diff --git a/survey-frontend/src/ProgressBar.tsx b/survey-frontend/src/ProgressBar.tsx
index 4aad4bba840b5781616772a299da3c8ca0aaf6ca..728abfc5c8ca5939245e8b1e5c06845c8100ebb8 100644
--- a/survey-frontend/src/ProgressBar.tsx
+++ b/survey-frontend/src/ProgressBar.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { Col, Container, Row } from "react-bootstrap";
 
 interface Progress {
     completionPercentage: number;
@@ -16,31 +17,33 @@ function ProgressBar({ surveyModel, pageNoSetter }) {
         return question.value !== null && question.value !== undefined;
     };
 
-    const calculateProgress = (survey) => {
-        if (survey && survey.pages) {
-            const progressArray: Progress[] = [];
-            survey.pages.forEach((page) => {
-                const sectionQuestions = page.questions.filter(
-                    (question) => question.startWithNewLine
-                );
-                const questionCount = sectionQuestions.length;
-                const answeredCount = sectionQuestions.filter(filterCallback).length;
-                const unansweredCount = questionCount - answeredCount;
-                const completionPercentage = answeredCount / questionCount;
-
-
-                progressArray.push({
-                    completionPercentage: completionPercentage * 100,
-                    unansweredPercentage: (unansweredCount / questionCount) * 100,
-                    totalPages: survey.pages.length,
-                    pageTitle: page.title,
-                });
-            });
-            setProgress(progressArray);
-        }
-    };
+
 
     useEffect(() => {
+        const calculateProgress = (survey) => {
+            if (survey && survey.pages) {
+                const progressArray: Progress[] = [];
+                survey.pages.forEach((page) => {
+                    const sectionQuestions = page.questions.filter(
+                        (question) => question.startWithNewLine
+                    );
+                    const questionCount = sectionQuestions.length;
+                    const answeredCount = sectionQuestions.filter(filterCallback).length;
+                    const unansweredCount = questionCount - answeredCount;
+                    const completionPercentage = answeredCount / questionCount;
+
+
+                    progressArray.push({
+                        completionPercentage: completionPercentage * 100,
+                        unansweredPercentage: (unansweredCount / questionCount) * 100,
+                        totalPages: survey.pages.length,
+                        pageTitle: page.title,
+                    });
+                });
+                setProgress(progressArray);
+            }
+        };
+
         surveyModel.onValueChanged.add((sender) => {
             calculateProgress(sender);
         });
@@ -49,63 +52,51 @@ function ProgressBar({ surveyModel, pageNoSetter }) {
     }, [surveyModel]);
 
 
-    function progressBarContainerStyle(sectionProgress): React.CSSProperties {
-        return {
-            display: "flex",
-            flexWrap: "wrap",
-            height: "10px",
-            margin: "5px",
-            width: `${100 / sectionProgress.totalPages}%`,
-        }
-    }
-
-    const progressBarFillStyle: React.CSSProperties = {
-        height: "100%",
+    const progressBarStyle: React.CSSProperties = {
+        height: "0.5rem",
         transition: "width 0.3s ease",
     };
 
-    function progressBarFillStyleCopy(sectionProgress): React.CSSProperties {
-        return {
-            ...progressBarFillStyle,
-            width: `${sectionProgress.completionPercentage}%`,
-            backgroundColor: "#1ab394",
-        }
-    }
-
-    function unansweredProgressBarFillStyle(sectionProgress): React.CSSProperties {
-        return {
-            ...progressBarFillStyle,
-            width: `${sectionProgress.unansweredPercentage}%`,
-            backgroundColor: "#9d9d9d",
-        }
-    }
-
-    function pageTitleStyle(index): React.CSSProperties {
-        if (surveyModel.currentPageNo == index) {
-            return {
-                width: "100%",
-                textAlign: "center",
-                fontWeight: "bold"
-            }
-        } else {
-            return {
-                width: "100%",
-                textAlign: "center"
-            }
-        }
-    }
-
     return (
-        <div className="survey-progress">
-            {progress.map((sectionProgress, index) => (
-                <div key={index} style={progressBarContainerStyle(sectionProgress)} onClick={() => pageNoSetter(index)}>
-                    <div style={progressBarFillStyleCopy(sectionProgress)} />
-                    <div style={unansweredProgressBarFillStyle(sectionProgress)} />
-                    <div style={pageTitleStyle(index)}>{sectionProgress.pageTitle}</div>
-                </div>
-            ))}
-        </div>
-    );
+        <Container className="survey-progress">
+            <Row>
+                {progress.map((sectionProgress, index) => (
+                    <Col xs={12} md key={index} onClick={() => pageNoSetter(index)} style={{ cursor: "pointer", margin: '0.5rem' }}>
+                        <div>
+                            <span style={{
+                                whiteSpace: "nowrap",
+                                fontSize: "1.5rem",
+                                marginRight: "0.25rem",
+                                fontWeight: "bold",
+                                color: "#2db394",
+                            }}>{index + 1}</span>
+                            <span style={{
+                                whiteSpace: "nowrap",
+                                ...(surveyModel.currentPageNo == index) && {
+                                    fontWeight: "bold",
+                                },
+                            }}>{sectionProgress.pageTitle}</span>
+                            <div style={{ display: "flex", flexWrap: "wrap" }}>
+
+                                <div style={{
+                                    ...progressBarStyle,
+                                    width: `${sectionProgress.completionPercentage}%`,
+                                    backgroundColor: "#262261",
+                                }} />
+                                <div style={{
+                                    ...progressBarStyle,
+                                    width: `${sectionProgress.unansweredPercentage}%`,
+                                    backgroundColor: "#cdcdcd",
+                                }} />
+
+                            </div>
+                        </div>
+
+                    </Col>
+
+                ))}
+            </Row>
+        </Container>);
 }
 
 export default ProgressBar;