diff --git a/assets/image/AirPods Pro Max (1).png b/assets/image/AirPods Pro Max (1).png
new file mode 100644
index 0000000..997ce4a
Binary files /dev/null and b/assets/image/AirPods Pro Max (1).png differ
diff --git a/assets/image/AirPods Pro Max.png b/assets/image/AirPods Pro Max.png
new file mode 100644
index 0000000..0ecf6ca
Binary files /dev/null and b/assets/image/AirPods Pro Max.png differ
diff --git a/assets/image/Audio Wave.png b/assets/image/Audio Wave.png
new file mode 100644
index 0000000..4b87b1c
Binary files /dev/null and b/assets/image/Audio Wave.png differ
diff --git a/assets/image/Sounscape.png b/assets/image/Sounscape.png
new file mode 100644
index 0000000..aee80c8
Binary files /dev/null and b/assets/image/Sounscape.png differ
diff --git a/assets/image/Start-upguyflyingwithjetpack.png b/assets/image/Start-upguyflyingwithjetpack.png
new file mode 100644
index 0000000..f7d5cd0
Binary files /dev/null and b/assets/image/Start-upguyflyingwithjetpack.png differ
diff --git a/assets/image/Vector (1).png b/assets/image/Vector (1).png
new file mode 100644
index 0000000..077a7bb
Binary files /dev/null and b/assets/image/Vector (1).png differ
diff --git a/assets/image/Vector (2).png b/assets/image/Vector (2).png
new file mode 100644
index 0000000..9621df3
Binary files /dev/null and b/assets/image/Vector (2).png differ
diff --git a/assets/image/Vector (3).png b/assets/image/Vector (3).png
new file mode 100644
index 0000000..9621df3
Binary files /dev/null and b/assets/image/Vector (3).png differ
diff --git a/assets/image/Vector (4).png b/assets/image/Vector (4).png
new file mode 100644
index 0000000..61d4db9
Binary files /dev/null and b/assets/image/Vector (4).png differ
diff --git a/assets/image/Vector (5).png b/assets/image/Vector (5).png
new file mode 100644
index 0000000..c480dcd
Binary files /dev/null and b/assets/image/Vector (5).png differ
diff --git a/assets/image/Vector (7).png b/assets/image/Vector (7).png
new file mode 100644
index 0000000..804613a
Binary files /dev/null and b/assets/image/Vector (7).png differ
diff --git a/assets/image/Vector (8).png b/assets/image/Vector (8).png
new file mode 100644
index 0000000..d28d3cc
Binary files /dev/null and b/assets/image/Vector (8).png differ
diff --git a/assets/image/Vector (9).png b/assets/image/Vector (9).png
new file mode 100644
index 0000000..fc79930
Binary files /dev/null and b/assets/image/Vector (9).png differ
diff --git a/assets/image/Vector.png b/assets/image/Vector.png
new file mode 100644
index 0000000..762cb5e
Binary files /dev/null and b/assets/image/Vector.png differ
diff --git a/assets/image/Vector123.png b/assets/image/Vector123.png
new file mode 100644
index 0000000..192b6df
Binary files /dev/null and b/assets/image/Vector123.png differ
diff --git a/components/homebar.vue b/components/homebar.vue
new file mode 100644
index 0000000..fcdf613
--- /dev/null
+++ b/components/homebar.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <nav class="navbar navbar-expand-sm">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link fw-bolder fs-5 text-dark" aria-current="page" href="#">Home</a>
+            </li>
+          </ul>
+          <div class="d-flex">
+            <ul class="nav">
+              <li class="nav-item dropdown">
+                <a class="nav-link first-icon px-2 py-2" aria-current="page" id="dropdownMenuLink" data-bs-toggle="dropdown" href="#"></a>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                  <li><a class="dropdown-item" href="#" style="border-bottom: 1px solid lightgray;">Lagoon  <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
+                  <li><a class="dropdown-item" href="#">Tropics <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
+                  <li><a class="dropdown-item" href="#">Forest <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
+                  <li><a class="dropdown-item" href="#">Meadow <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link second-icon  px-2 py-2" href="#"></a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link third-icon  px-2 py-2" href="#"></a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link fourth-icon  px-2 py-2" href="#"></a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link fivith-icon  px-2 py-2" href="#"></a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'HomeBar',
+}
+</script>
+<style>
+.first-icon{
+  content: url('~/assets/image/Vector.png');
+  border-radius: 5px;
+  /*padding: 10px 10px;*/
+  text-align: center;
+  height: 44px;
+}
+.first-icon:focus{
+  content: url('~/assets/image/Sounscape.png');
+  background-color: #e9c046;
+  border-radius: 5px;
+  /*padding: 10px 10px;*/
+  text-align: center;
+  height: 44px;
+
+}
+.second-icon{
+  content: url('~/assets/image/AirPods Pro Max.png');
+  border-radius: 5px;
+  padding: 10px 10px;
+  text-align: center;
+}
+.second-icon:focus{
+  content: url('~/assets/image/AirPods Pro Max (1).png');
+  background-color: #e9c046;
+  border-radius: 5px;
+  padding: 10px 10px;
+  text-align: center;
+}
+.third-icon{
+  content: url('~/assets/image/Vector (5).png');
+  border-radius: 5px;
+  padding: 10px 10px;
+  text-align: center;
+}
+.third-icon:focus{
+  content: url('~/assets/image/Vector (3).png');
+  background-color: #e9c046;
+  border-radius: 5px;
+  padding: 10px 10px;
+  text-align: center;
+}
+.fourth-icon{
+  content: url('~/assets/image/Audio Wave.png');
+}
+.fivith-icon{
+  content: url('~/assets/image/Vector (1).png');
+  border-radius: 5px;
+  padding: 10px 10px;
+  text-align: center;
+}
+.fivith-icon:focus{
+  content: url('~/assets/image/Vector (4).png');
+  background-color: #e9c046;
+  border-radius: 5px;
+  padding: 10px 10px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index e731440..c37052d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,11 @@
 <template>
-  <div>
-    <h1>Home Page</h1>
-  </div>
+    <div>
+      <home-bar />
+    </div>
 </template>
+<script>
+import HomeBar from "../components/homebar";
+export default {
+  components: {HomeBar}
+}
+</script>
\ No newline at end of file
diff --git a/pages/letsgo.vue b/pages/letsgo.vue
new file mode 100644
index 0000000..20ee825
--- /dev/null
+++ b/pages/letsgo.vue
@@ -0,0 +1,26 @@
+<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>
+      <div class="row">
+        <div class="col-12">
+          <h4 class="text-center fw-bold pt-5">Let’s Go!</h4>
+          <h6 class="text-center text-muted pb-0 mb-0">We have saved your selection.  </h6>
+          <h6 class="text-center text-muted pt-0 mt-0">You can change your settings at any time. </h6>
+        </div>
+      </div>
+      <div class="row pt-5">
+        <div class="col-12 text-center">
+          <img src="~assets/image/Start-upguyflyingwithjetpack.png">
+        </div>
+        <div class="col-12 text-center pt-5">
+          <button type="button" class="btn btn-warning text-white px-4 fs-5 fw-bolder py-2">NEXT</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/pages/onbording.vue b/pages/onbording.vue
index 4a11443..f13f53e 100644
--- a/pages/onbording.vue
+++ b/pages/onbording.vue
@@ -15,17 +15,7 @@
 
       <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="/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>
-        </div>
-      </div>
+
     </div>
   </div>
 </template>
diff --git a/pages/onbording/fixproblem.vue b/pages/onbording/fixproblem.vue
new file mode 100644
index 0000000..2ebc8f5
--- /dev/null
+++ b/pages/onbording/fixproblem.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+      <div class="row">
+        <div class="col-12 pt-3">
+          <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
+        </div>
+        <div class="col-12">
+          <h4 class="text-center fw-bold pt-5">The microphone does not provide any level</h4>
+          <h6 class="text-center text-muted">Please check the input level of the microphone in the audio  </h6>
+          <h6 class="text-center text-muted">system settings of your device and start again. </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 px-5 fw-bolder" for="success-outlined">
+              Fix This Problem
+            </label>
+
+          <input type="radio" class="btn-check " name="options-outlined" id="danger-outlined" autocomplete="off">
+            <label class="btn btn-outline-warning ms-3 px-5 fw-bolder" for="danger-outlined">
+              Try Again
+            </label>
+        </div>
+      </div>
+
+    <div class="row pt-5 mt-2 ">
+      <div class="col-12 text-center pt-5 mt-3  position-fixed bottom-0 pb-5 mb-2">
+        <NuxtLink class="btn btn-warning px-2 " to="/onbording"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-4 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>
+        <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
+      </div>
+    </div>
+    </div>
+
+</template>
+<script>
+export default {
+  name:'OnBording',
+}
+</script>
+
+<style >
+.bar{
+  background-color: #e9c046;
+
+}
+.btn-outline-warning:active{
+  color: white !important;
+}
+.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
+  color: white !important;
+}
+</style>
\ No newline at end of file
diff --git a/pages/onbording/index.vue b/pages/onbording/index.vue
index 1e12f04..1f8e6cf 100644
--- a/pages/onbording/index.vue
+++ b/pages/onbording/index.vue
@@ -24,6 +24,16 @@
     </div>
   </div>
 
+  <div class="row pt-5 mt-2 ">
+    <div class="col-12 text-center pt-5 mt-3  position-fixed bottom-0 pb-5 mb-2">
+      <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>
+      <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
+    </div>
+
+  </div>
 </div>
 </template>
 
diff --git a/pages/onbording/onbording1.vue b/pages/onbording/onbording1.vue
deleted file mode 100644
index 0119ba9..0000000
--- a/pages/onbording/onbording1.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div>
-      <div class="row">
-        <div class="col-12 pt-3">
-          <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
-        </div>
-        <div class="col-12">
-          <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>
-
-</template>
-<script>
-export default {
-  name:'OnBording',
-}
-</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 e9c0893..1985559 100644
--- a/pages/onbording/onbording2.vue
+++ b/pages/onbording/onbording2.vue
@@ -22,6 +22,16 @@
           </label>
         </div>
       </div>
+    <div class="row pt-5 mt-2 ">
+      <div class="col-12 text-center pt-5 mt-3  position-fixed bottom-0 pb-5 mb-2">
+        <NuxtLink class="btn btn-warning px-2 " to="/onbording"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-4 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>
+        <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
+      </div>
+
+    </div>
   </div>
 </template>
 <script>
diff --git a/pages/onbording/onbording3.vue b/pages/onbording/onbording3.vue
index fdc6d54..fa1130c 100644
--- a/pages/onbording/onbording3.vue
+++ b/pages/onbording/onbording3.vue
@@ -21,6 +21,17 @@
           </label>
         </div>
       </div>
+
+    <div class="row pt-5 mt-2 ">
+      <div class="col-12 text-center pt-5 mt-3  position-fixed bottom-0 pb-5 mb-2">
+        <NuxtLink class="btn btn-warning px-2 " to="/onbording"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording2"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-4 " to="/onbording/onbording3"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording4"></NuxtLink>
+        <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
+      </div>
+
+    </div>
   </div>
 </template>
 <script>
diff --git a/pages/onbording/onbording4.vue b/pages/onbording/onbording4.vue
index 0638062..2b214e8 100644
--- a/pages/onbording/onbording4.vue
+++ b/pages/onbording/onbording4.vue
@@ -34,6 +34,17 @@
           </label>
         </div>
       </div>
+
+    <div class="row pt-5 mt-2 ">
+      <div class="col-12 text-center pt-5 mt-3  position-fixed bottom-0 pb-5 mb-2">
+        <NuxtLink class="btn btn-warning px-2 " 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-4 mx-2 " to="/onbording/onbording4"></NuxtLink>
+        <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
+      </div>
+
+    </div>
   </div>
 </template>
 <script>