diff --git a/assets/css/style.css b/assets/css/style.css
index d1f9658..d77b5b5 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -48,4 +48,6 @@
     color: #e9c046;
     text-decoration: underline;
     transition: .2s ease-in-out;
-}
\ No newline at end of file
+}
+
+
diff --git a/assets/image/AirPodsPro.png b/assets/image/AirPodsPro.png
new file mode 100644
index 0000000..d261888
Binary files /dev/null and b/assets/image/AirPodsPro.png differ
diff --git a/assets/image/AirPodsProMax.png b/assets/image/AirPodsProMax.png
new file mode 100644
index 0000000..fda0f86
Binary files /dev/null and b/assets/image/AirPodsProMax.png differ
diff --git a/layouts/default.vue b/layouts/default.vue
index 097a31a..6093c44 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,6 +2,7 @@
   <div>
 <div class="">
   <slot/>
+<!--  <NuxtPage />-->
 </div>
   </div>
 
@@ -31,5 +32,26 @@ useHead({
 </script>
 
 <style>
-  /*@import "assets/css/style.css";*/
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.2s;
+}
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
 </style>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7401f3a..227e136 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,7 +4,7 @@ export default defineNuxtConfig({
 
     css:[
         '~/assets/css/style.css'
-    ]
+    ],
     // modules: [
     //     '@nuxtjs/tailwindcss',
     //     'nuxt-headlessui'
@@ -13,6 +13,11 @@ export default defineNuxtConfig({
     // headlessui: {
     //     prefix: 'Headless'
     // },
-
+    app: {
+        pageTransition: {
+            name: 'slide-right',
+            mode: 'out-in'
+        },
+    }
 
 })
diff --git a/pages/onbording.vue b/pages/onbording.vue
new file mode 100644
index 0000000..4a11443
--- /dev/null
+++ b/pages/onbording.vue
@@ -0,0 +1,48 @@
+<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': 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="/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>
+
+
+<script>
+export default {
+  data(){
+    return{
+      bar_val:25,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bar{
+  background-color: #e9c046;
+}
+</style>
\ No newline at end of file
diff --git a/pages/onbording/index.vue b/pages/onbording/index.vue
new file mode 100644
index 0000000..1e12f04
--- /dev/null
+++ b/pages/onbording/index.vue
@@ -0,0 +1,29 @@
+<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>
+
diff --git a/pages/onbording/onbording1.vue b/pages/onbording/onbording1.vue
new file mode 100644
index 0000000..0119ba9
--- /dev/null
+++ b/pages/onbording/onbording1.vue
@@ -0,0 +1,39 @@
+<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
new file mode 100644
index 0000000..e9c0893
--- /dev/null
+++ b/pages/onbording/onbording2.vue
@@ -0,0 +1,42 @@
+<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">Do your headphones have ANC?</h4>
+          <h6 class="text-center text-muted">What’s that?</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',
+  data(){
+    return{
+      bar_val:25,
+    }
+  }
+}
+</script>
+
+<style>
+.bar{
+  background-color: #e9c046;
+}
+</style>
\ No newline at end of file
diff --git a/pages/onbording/onbording3.vue b/pages/onbording/onbording3.vue
new file mode 100644
index 0000000..fdc6d54
--- /dev/null
+++ b/pages/onbording/onbording3.vue
@@ -0,0 +1,41 @@
+<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 are your plans for today?</h4>
+        </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',
+  data(){
+    return{
+      bar_val:25,
+    }
+  }
+}
+</script>
+
+<style>
+.bar{
+  background-color: #e9c046;
+}
+</style>
\ No newline at end of file
diff --git a/pages/onbording/onbording4.vue b/pages/onbording/onbording4.vue
new file mode 100644
index 0000000..0638062
--- /dev/null
+++ b/pages/onbording/onbording4.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">Please choose a soundscape</h4>
+        </div>
+        <div class=" pt-2 text-center">
+          <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" checked>
+          <label class="btn btn-outline-warning py-3 px-5" for="success-outlined1">
+            <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-outlined1" 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 class=" pt-3 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',
+  data(){
+    return{
+      bar_val:100,
+    }
+  }
+}
+</script>
+
+<style>
+.bar{
+  background-color: #e9c046;
+}
+</style>
\ No newline at end of file
diff --git a/pages/onbording1.vue b/pages/onbording1.vue
deleted file mode 100644
index 8ed01f8..0000000
--- a/pages/onbording1.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<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-9">
-          <div class="progress " style="width: 70%">
-            <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import TopLogoBar from "../components/toplogobar";
-export default {
-  components: {TopLogoBar}
-}
-</script>
\ No newline at end of file