diff --git a/pages/onbording.vue b/pages/onbording.vue
index 154287a..4a11443 100644
--- a/pages/onbording.vue
+++ b/pages/onbording.vue
@@ -7,18 +7,20 @@
         </div>
         <div class="col-12 text-center justify-content-center col-lg-9 pt-1">
           <div class="progress mx-auto  ms-lg-3 mt-2 " style="width: 70%;height: 12px">
-            <div class="progress-bar bar"  role="progressbar" style="width: 25%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+            <div class="progress-bar bar"  role="progressbar" :style="{ 'width': bar_val + '%' }"  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
           </div>
         </div>
       </div>
+
+
       <NuxtPage page-key="child" />
 
       <div class="row pt-5 mt-2">
         <div class="col-12 text-center pt-5 mt-3">
-          <NuxtLink class="btn btn-warning px-4 " to="onbording1"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording2"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 " to="onbording3"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording4"></NuxtLink>
+          <NuxtLink class="btn btn-warning px-4 " to="/onbording"></NuxtLink>
+          <NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording2"></NuxtLink>
+          <NuxtLink class="btn btn-warning px-2 " to="/onbording/onbording3"></NuxtLink>
+          <NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording4"></NuxtLink>
         </div>
         <div class="col-12">
           <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
@@ -27,10 +29,15 @@
     </div>
   </div>
 </template>
+
+
 <script>
 export default {
-
-
+  data(){
+    return{
+      bar_val:25,
+    }
+  }
 }
 </script>
 
diff --git a/pages/onbording/onbording1.vue b/pages/onbording/onbording1.vue
index 38e8175..0119ba9 100644
--- a/pages/onbording/onbording1.vue
+++ b/pages/onbording/onbording1.vue
@@ -1,31 +1,30 @@
 <template>
   <div>
-    <div class="container-fluid pt-3 ps-4">
       <div class="row">
-        <div class="col-3">
-          <a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
-        </div>
-        <div class="col-12 text-center justify-content-center col-lg-9 pt-1">
-          <div class="progress mx-auto  ms-lg-3 mt-2 " style="width: 70%;height: 12px">
-            <div class="progress-bar bar"  role="progressbar" style="width: 25%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
-
-
-      <div class="row pt-5 mt-2">
-        <div class="col-12 text-center pt-5 mt-3">
-          <NuxtLink class="btn btn-warning px-4 " to="onbording1"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording2"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 " to="onbording3"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording4"></NuxtLink>
+        <div class="col-12 pt-3">
+          <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
         </div>
         <div class="col-12">
-          <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
+          <h4 class="text-center fw-bold pt-5">What headphones do you use?</h4>
+          <h6 class="text-center text-muted">Make sure that your headphones are properly connected. </h6>
+          <h6 class="text-center text-muted">To use Mindboost, headphones are required. </h6>
+        </div>
+        <div class=" pt-5 text-center">
+          <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
+            <label class="btn btn-outline-warning py-3 px-5" for="success-outlined">
+              <img src="~/assets/image/AirPodsPro.png" style="height: 60px">
+              <p class="text-white text-center">In-Ear</p>
+            </label>
+
+          <input type="radio" class="btn-check " name="options-outlined" id="danger-outlined" autocomplete="off">
+            <label class="btn btn-outline-warning ms-3 py-3 px-5" for="danger-outlined">
+              <img src="~/assets/image/AirPodsProMax.png" style="height: 60px">
+              <p class="text-white text-center">In-Ear</p>
+            </label>
         </div>
       </div>
     </div>
-    </div>
+
 </template>
 <script>
 export default {
@@ -34,5 +33,7 @@ export default {
 </script>
 
 <style>
-
+.bar{
+  background-color: #e9c046;
+}
 </style>
\ No newline at end of file
diff --git a/pages/onbording/onbording2.vue b/pages/onbording/onbording2.vue
index a6220ca..e9c0893 100644
--- a/pages/onbording/onbording2.vue
+++ b/pages/onbording/onbording2.vue
@@ -1,17 +1,6 @@
 <template>
   <div>
-    <div class="container-fluid pt-3 ps-4">
-      <div class="row">
-        <div class="col-3">
-          <a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
-        </div>
-        <div class="col-12 text-center justify-content-center col-lg-9 pt-1">
-          <div class="progress mx-auto  ms-lg-3 mt-2 " style="width: 70%;height: 12px">
-            <div class="progress-bar bar"  role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
-      <div class="row">
+        <div class="row">
         <div class="col-12 pt-3">
           <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
         </div>
@@ -33,24 +22,16 @@
           </label>
         </div>
       </div>
-
-      <div class="row pt-5 mt-2">
-        <div class="col-12 text-center pt-5 mt-3">
-          <NuxtLink class="btn btn-warning px-2 " to="onbording1"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-4 mx-2 " to="onbording2"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 " to="onbording3"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording4"></NuxtLink>
-        </div>
-        <div class="col-12">
-          <h6 class="text-muted text-center  pt-3">You can customize your selection later</h6>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <script>
 export default {
   name:'OnBording',
+  data(){
+    return{
+      bar_val:25,
+    }
+  }
 }
 </script>
 
diff --git a/pages/onbording/onbording3.vue b/pages/onbording/onbording3.vue
index 015b515..fdc6d54 100644
--- a/pages/onbording/onbording3.vue
+++ b/pages/onbording/onbording3.vue
@@ -1,16 +1,5 @@
 <template>
   <div>
-    <div class="container-fluid pt-3 ps-4">
-      <div class="row">
-        <div class="col-3">
-          <a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
-        </div>
-        <div class="col-12 text-center justify-content-center col-lg-9 pt-1">
-          <div class="progress mx-auto  ms-lg-3 mt-2 " style="width: 75%;height: 12px">
-            <div class="progress-bar bar"  role="progressbar" style="width: 75%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
       <div class="row">
         <div class="col-12 pt-3">
           <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
@@ -32,24 +21,16 @@
           </label>
         </div>
       </div>
-
-      <div class="row pt-5 mt-2">
-        <div class="col-12 text-center pt-5 mt-3">
-          <NuxtLink class="btn btn-warning px-2 " to="onbording1"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording2"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-4 " to="onbording3"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 mx-2" to="onbording4"></NuxtLink>
-        </div>
-        <div class="col-12">
-          <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <script>
 export default {
   name:'OnBording',
+  data(){
+    return{
+      bar_val:25,
+    }
+  }
 }
 </script>
 
diff --git a/pages/onbording/onbording4.vue b/pages/onbording/onbording4.vue
index f7bd550..0638062 100644
--- a/pages/onbording/onbording4.vue
+++ b/pages/onbording/onbording4.vue
@@ -1,16 +1,5 @@
 <template>
   <div>
-    <div class="container-fluid pt-3 ps-4">
-      <div class="row">
-        <div class="col-3">
-          <a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
-        </div>
-        <div class="col-12 text-center justify-content-center col-lg-9 pt-1">
-          <div class="progress mx-auto  ms-lg-3 mt-2 " style="width: 70%;height: 12px">
-            <div class="progress-bar bar"  role="progressbar" style="width: 100%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
       <div class="row">
         <div class="col-12 pt-3">
           <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
@@ -45,24 +34,16 @@
           </label>
         </div>
       </div>
-
-      <div class="row pt-5 mt-2">
-        <div class="col-12 text-center pt-5 mt-3">
-          <NuxtLink class="btn btn-warning px-2 " to="onbording1"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 mx-2 " to="onbording2"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-2 " to="onbording3"></NuxtLink>
-          <NuxtLink class="btn btn-warning px-4 mx-2" to="onbording4"></NuxtLink>
-        </div>
-        <div class="col-12">
-          <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <script>
 export default {
   name:'OnBording',
+  data(){
+    return{
+      bar_val:100,
+    }
+  }
 }
 </script>