From b7641c529620961aa12964bb2a5f72ec81f2fcf8 Mon Sep 17 00:00:00 2001
From: unknown <mudasser425@gmail.com>
Date: Thu, 5 Jan 2023 01:54:06 +0500
Subject: [PATCH] ok

---
 assets/css/style.css                          | 12 ++++++++++-
 pages/{onbording.vue => onboarding.vue}       |  0
 .../{onbording => onboarding}/fixproblem.vue  |  0
 pages/{onbording => onboarding}/index.vue     | 17 ++++++++--------
 .../onboarding2.vue}                          | 18 ++++++++---------
 .../onboarding3.vue}                          | 16 +++++++--------
 .../onboarding4.vue}                          | 20 +++++++++----------
 7 files changed, 47 insertions(+), 36 deletions(-)
 rename pages/{onbording.vue => onboarding.vue} (100%)
 mode change 100755 => 100644
 rename pages/{onbording => onboarding}/fixproblem.vue (100%)
 mode change 100755 => 100644
 rename pages/{onbording => onboarding}/index.vue (97%)
 mode change 100755 => 100644
 rename pages/{onbording/onbording2.vue => onboarding/onboarding2.vue} (93%)
 mode change 100755 => 100644
 rename pages/{onbording/onbording3.vue => onboarding/onboarding3.vue} (95%)
 mode change 100755 => 100644
 rename pages/{onbording/onbording4.vue => onboarding/onboarding4.vue} (97%)
 mode change 100755 => 100644

diff --git a/assets/css/style.css b/assets/css/style.css
index f959bdf..056d460 100755
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -118,4 +118,14 @@
 }
 .nav-icons.router-link-exact-active svg path{
     fill: white;
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 396px){
+    .checklabel{
+        padding: 12px 32px !important;
+    }
+    .checklabel123{
+        padding: 12px 10px !important;
+
+    }
+}
diff --git a/pages/onbording.vue b/pages/onboarding.vue
old mode 100755
new mode 100644
similarity index 100%
rename from pages/onbording.vue
rename to pages/onboarding.vue
diff --git a/pages/onbording/fixproblem.vue b/pages/onboarding/fixproblem.vue
old mode 100755
new mode 100644
similarity index 100%
rename from pages/onbording/fixproblem.vue
rename to pages/onboarding/fixproblem.vue
diff --git a/pages/onbording/index.vue b/pages/onboarding/index.vue
old mode 100755
new mode 100644
similarity index 97%
rename from pages/onbording/index.vue
rename to pages/onboarding/index.vue
index 09b1a8d..60861c0
--- a/pages/onbording/index.vue
+++ b/pages/onboarding/index.vue
@@ -9,9 +9,9 @@
       <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">
-      <div class=" ">
-        <div class="checkmark pt-2 d-block d-sm-inline-block d-inline-block">
+    <div class="row pt-5 text-center">
+      <div class="d-flex mx-auto justify-content-center ">
+        <div class="checkmark pt-2 d-block d-sm-inline-block px-1">
           <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off">
           <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
             <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 41" fill="none">
@@ -21,7 +21,7 @@
           </label>
         </div>
 
-        <nuxt-link to="/onbording/onbording2"  @click.once="increment(50)" class="checkmark pt-2 d-inline-block">
+        <nuxt-link to="/onboarding/onboarding2"  @click.once="increment(50)" class="checkmark px-1 pt-2 d-inline-block">
           <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
           <label class="btn checklabel  ms-0 ms-sm-3 pt-4 px-5" for="danger-outlined1">
             <svg xmlns="http://www.w3.org/2000/svg" width="54" height="58" viewBox="0 0 54 58" fill="none">
@@ -35,10 +35,10 @@
   </div>
   <div class="row pt-0 pt-sm-5 mt-0 mt-sm-3 ">
     <div class="col-12 text-center pt-5 mt-3  mb-2">
-      <NuxtLink @click.once="increment(25)" class="btn btn-warning px-4 " to="/onbording"></NuxtLink>
-      <NuxtLink @click.once="increment(50)" class="btn btn-warning px-2 mx-2 " to="/onbording/onbording2"></NuxtLink>
-      <NuxtLink @click.once="increment(75)" class="btn btn-warning px-2 " to="/onbording/onbording3"></NuxtLink>
-      <NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onbording/onbording4"></NuxtLink>
+      <NuxtLink @click.once="increment(25)" class="btn btn-warning px-4 " to="/onboarding"></NuxtLink>
+      <NuxtLink @click.once="increment(50)" class="btn btn-warning px-2 mx-2 " to="/onboarding/onboarding2"></NuxtLink>
+      <NuxtLink @click.once="increment(75)" class="btn btn-warning px-2 " to="/onboarding/onboarding3"></NuxtLink>
+      <NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
       <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
 
     </div>
@@ -63,6 +63,7 @@ export default {
 }
 </script>
 <style scoped>
+
 .checklabel:hover{
   border-color: #e9c046;
 }
diff --git a/pages/onbording/onbording2.vue b/pages/onboarding/onboarding2.vue
old mode 100755
new mode 100644
similarity index 93%
rename from pages/onbording/onbording2.vue
rename to pages/onboarding/onboarding2.vue
index 7968b09..563f03f
--- a/pages/onbording/onbording2.vue
+++ b/pages/onboarding/onboarding2.vue
@@ -9,8 +9,8 @@
           <h6 class="text-center text-muted">What’s that?</h6>
         </div>
         <div class=" pt-5 text-center">
-          <div class=" ">
-            <div class="checkmark pt-2 d-block d-sm-inline-block d-inline-block">
+          <div class="d-flex mx-auto justify-content-center ">
+            <div class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
               <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
               <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
                 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 46" fill="none">
@@ -20,10 +20,10 @@
               </label>
             </div>
 
-            <nuxt-link to="/onbording/onbording3"  @click.once="increment(75)" class="checkmark pt-2 d-inline-block">
+            <nuxt-link to="/onboarding/onboarding3"  @click.once="increment(75)" class="checkmark pt-2 px-1 d-inline-block">
               <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
-              <label class="btn checklabel  ms-0 ms-sm-3 pt-4 px-5" for="danger-outlined1">
-                <svg xmlns="http://www.w3.org/2000/svg" width="70"  viewBox="0 0 60 46" fill="none">
+              <label class="btn checklabel  ms-0 ms-sm-3  pt-4 px-5" for="danger-outlined1">
+                <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"  viewBox="0 0 60 46" fill="none">
                   <path d="M15.4874 0.162403C15.4358 0.171779 15.3843 0.18584 15.3374 0.199903C14.7796 0.326466 14.3858 0.828029 14.3999 1.3999V44.5999C14.3952 45.0312 14.6202 45.4343 14.9952 45.6546C15.3702 45.8702 15.8296 45.8702 16.2046 45.6546C16.5796 45.4343 16.8046 45.0312 16.7999 44.5999V1.3999C16.8139 1.05303 16.6733 0.720216 16.4249 0.48584C16.1718 0.246778 15.8296 0.12959 15.4874 0.162403ZM44.2874 0.162403C44.2358 0.171779 44.1843 0.18584 44.1374 0.199903C43.5796 0.326466 43.1858 0.828029 43.1999 1.3999V44.5999C43.1952 45.0312 43.4202 45.4343 43.7952 45.6546C44.1702 45.8702 44.6296 45.8702 45.0046 45.6546C45.3796 45.4343 45.6046 45.0312 45.5999 44.5999V1.3999C45.6139 1.05303 45.4733 0.720216 45.2249 0.48584C44.9718 0.246778 44.6296 0.12959 44.2874 0.162403ZM8.28738 10.9624C8.23581 10.9718 8.18425 10.9858 8.13738 10.9999C7.57956 11.1265 7.18581 11.628 7.19988 12.1999V33.7999C7.19519 34.2312 7.42019 34.6343 7.79519 34.8546C8.17019 35.0702 8.62956 35.0702 9.00456 34.8546C9.37956 34.6343 9.60456 34.2312 9.59988 33.7999V12.1999C9.61394 11.853 9.47331 11.5202 9.22488 11.2858C8.97175 11.0468 8.62956 10.9296 8.28738 10.9624ZM51.4874 10.9624C51.4358 10.9718 51.3843 10.9858 51.3374 10.9999C50.7796 11.1265 50.3858 11.628 50.3999 12.1999V33.7999C50.3952 34.2312 50.6202 34.6343 50.9952 34.8546C51.3702 35.0702 51.8296 35.0702 52.2046 34.8546C52.5796 34.6343 52.8046 34.2312 52.7999 33.7999V12.1999C52.8139 11.853 52.6733 11.5202 52.4249 11.2858C52.1718 11.0468 51.8296 10.9296 51.4874 10.9624ZM22.6874 12.1624C22.6358 12.1718 22.5843 12.1858 22.5374 12.1999C21.9796 12.3265 21.5858 12.828 21.5999 13.3999V22.9999V32.5999C21.5952 33.0312 21.8202 33.4343 22.1952 33.6546C22.5702 33.8702 23.0296 33.8702 23.4046 33.6546C23.7796 33.4343 24.0046 33.0312 23.9999 32.5999V13.3999C24.0139 13.053 23.8733 12.7202 23.6249 12.4858C23.3718 12.2468 23.0296 12.1296 22.6874 12.1624ZM37.0874 12.1624C37.0358 12.1718 36.9843 12.1858 36.9374 12.1999C36.3796 12.3265 35.9858 12.828 35.9999 13.3999V32.5999C35.9952 33.0312 36.2202 33.4343 36.5952 33.6546C36.9702 33.8702 37.4296 33.8702 37.8046 33.6546C38.1796 33.4343 38.4046 33.0312 38.3999 32.5999V13.3999C38.4139 13.053 38.2733 12.7202 38.0249 12.4858C37.7718 12.2468 37.4296 12.1296 37.0874 12.1624ZM1.08738 18.1624C1.03581 18.1718 0.984252 18.1858 0.937377 18.1999C0.379564 18.3265 -0.0141859 18.828 -0.000123334 19.3999V26.5999C-0.00481083 27.0312 0.220189 27.4343 0.59519 27.6546C0.97019 27.8702 1.42956 27.8702 1.80456 27.6546C2.17956 27.4343 2.40456 27.0312 2.39988 26.5999V19.3999C2.41394 19.053 2.27331 18.7202 2.02488 18.4858C1.77175 18.2468 1.42956 18.1296 1.08738 18.1624ZM29.8874 18.1624C29.8358 18.1718 29.7843 18.1858 29.7374 18.1999C29.1796 18.3265 28.7858 18.828 28.7999 19.3999V26.5999C28.7952 27.0312 29.0202 27.4343 29.3952 27.6546C29.7702 27.8702 30.2296 27.8702 30.6046 27.6546C30.9796 27.4343 31.2046 27.0312 31.1999 26.5999V19.3999C31.2139 19.053 31.0733 18.7202 30.8249 18.4858C30.5718 18.2468 30.2296 18.1296 29.8874 18.1624ZM58.6874 18.1624C58.6358 18.1718 58.5843 18.1858 58.5374 18.1999C57.9796 18.3265 57.5858 18.828 57.5999 19.3999V26.5999C57.5952 27.0312 57.8202 27.4343 58.1952 27.6546C58.5702 27.8702 59.0296 27.8702 59.4046 27.6546C59.7796 27.4343 60.0046 27.0312 59.9999 26.5999V19.3999C60.0139 19.053 59.8733 18.7202 59.6249 18.4858C59.3718 18.2468 59.0296 18.1296 58.6874 18.1624Z" fill="white"/>
                 </svg>
                 <p class="text-center">Yes</p>
@@ -34,10 +34,10 @@
       </div>
     <div class="row pt-5 mt-0 mt-sm-4 ">
       <div class="col-12 text-center pt-5 mt-3   pb-5 mb-2">
-        <NuxtLink class="btn btn-warning px-2 " @click.once="increment(25)" to="/onbording"></NuxtLink>
-        <NuxtLink class="btn btn-warning px-4 mx-2" @click.once="increment(50)" to="/onbording/onbording2"></NuxtLink>
-        <NuxtLink class="btn btn-warning px-2 " @click.once="increment(75)" to="/onbording/onbording3"></NuxtLink>
-        <NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onbording/onbording4"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 " @click.once="increment(25)" to="/onboarding"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-4 mx-2" @click.once="increment(50)" to="/onboarding/onboarding2"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 " @click.once="increment(75)" to="/onboarding/onboarding3"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
         <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
       </div>
 
diff --git a/pages/onbording/onbording3.vue b/pages/onboarding/onboarding3.vue
old mode 100755
new mode 100644
similarity index 95%
rename from pages/onbording/onbording3.vue
rename to pages/onboarding/onboarding3.vue
index 1614d4a..88d6281
--- a/pages/onbording/onbording3.vue
+++ b/pages/onboarding/onboarding3.vue
@@ -8,8 +8,8 @@
           <h4 class="text-center fw-bold pt-5">What are your plans for today?</h4>
         </div>
         <div class=" pt-5 text-center">
-          <div class=" ">
-            <div class="checkmark pt-2 d-block d-sm-inline-block d-inline-block">
+          <div class=" d-flex mx-auto justify-content-center">
+            <div class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
               <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
               <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
                 <svg xmlns="http://www.w3.org/2000/svg" width="60"  viewBox="0 0 51 56" fill="none">
@@ -19,9 +19,9 @@
               </label>
             </div>
 
-            <nuxt-link to="/onbording/onbording4"  @click.once="increment(100)" class="checkmark pt-2 d-inline-block">
+            <nuxt-link to="/onboarding/onboarding4"  @click.once="increment(100)" class="checkmark pt-2 px-1 d-inline-block">
               <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
-              <label class="btn checklabel  ms-0 ms-sm-3 pt-4 px-4" for="danger-outlined1">
+              <label class="btn checklabel checklabel123 ms-0 ms-sm-3 pt-4 px-4" for="danger-outlined1">
                 <svg xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 57 60" fill="none">
                   <path d="M23.6999 0C16.4858 0 12.2343 3.93281 10.8749 7.3875C7.153 8.08125 3.79675 10.575 2.09988 14.475C0.356125 18.4781 0.431125 23.8641 3.18738 29.925C1.62644 31.9594 0.721751 34.5797 1.16238 37.2375C1.59363 39.8625 3.41238 42.3094 6.56238 43.7625C5.28738 46.7063 5.69988 49.5797 7.31238 51.6C8.98581 53.7 11.7093 54.8531 14.5499 55.05C15.3889 57.2484 16.9452 58.7063 18.6374 59.325C20.5499 60.0234 22.4952 60 23.6999 60C25.6733 60 27.4077 59.0578 28.4999 57.6C29.5921 59.0531 31.3311 59.9859 33.2999 60C34.6405 60.0094 36.5858 59.6719 38.4749 58.65C40.1389 57.75 41.6202 56.1422 42.4499 53.925C45.1405 53.8313 47.803 53.2688 49.5749 51.5625C50.5452 50.625 51.1733 49.3313 51.2624 47.8125C51.3327 46.6125 50.9858 45.2531 50.3999 43.8C53.5874 42.3563 55.4811 39.9188 55.9499 37.275C56.4233 34.6219 55.4671 31.9641 53.8124 29.925C56.5686 23.8641 56.6436 18.4781 54.8999 14.475C53.203 10.575 49.8468 8.08125 46.1249 7.3875C44.7655 3.93281 40.5139 0 33.2999 0C31.5186 0 29.8405 0.459376 28.7624 1.8375C28.6639 1.96406 28.5843 2.11406 28.4999 2.25C28.4155 2.11406 28.3358 1.96406 28.2374 1.8375C27.1593 0.459376 25.4811 0 23.6999 0ZM23.6999 2.4C25.1436 2.4 25.8421 2.63906 26.3624 3.3C26.8827 3.96094 27.2999 5.39531 27.2999 7.9875V54C27.2999 56.1891 25.8468 57.6 23.6999 57.6C22.5046 57.6 20.8499 57.5813 19.4624 57.075C18.0749 56.5688 16.9639 55.7156 16.4624 53.7L16.2374 52.8H15.2999C12.8671 52.8 10.4718 51.7078 9.18738 50.1C7.903 48.4922 7.51863 46.4578 9.11238 43.8L9.89988 42.525L8.47488 42.075C5.22175 40.9922 3.88113 39.0094 3.52488 36.8625C3.178 34.7531 3.928 32.4234 5.28738 30.9C5.3155 30.8766 5.33894 30.8531 5.36238 30.825L5.39988 30.7875C5.39988 30.7875 8.3155 27.6 11.6999 27.6C15.9749 27.6 18.0749 29.6625 18.0749 29.6625C18.3702 30.0141 18.8436 30.1641 19.2843 30.0516C19.7296 29.9391 20.0718 29.5781 20.1655 29.1328C20.2593 28.6828 20.0858 28.2188 19.7249 27.9375C19.7249 27.9375 16.7952 25.2 11.6999 25.2C8.70456 25.2 6.27644 26.7609 4.87488 27.9375C2.77956 22.8047 2.96238 18.5484 4.31238 15.45C5.79363 12.0422 8.67644 9.97969 11.8124 9.6L12.6374 9.4875L12.8249 8.7375C13.4718 6.47813 16.9686 2.4 23.6999 2.4ZM33.2999 2.4C40.0311 2.4 43.528 6.47813 44.1749 8.7375L44.3624 9.4875L45.1874 9.6C48.3233 9.97969 51.2061 12.0422 52.6874 15.45C54.0139 18.4969 54.2202 22.6547 52.2374 27.675C51.8858 27.8391 51.6374 28.1578 51.5624 28.5375C51.5624 28.5375 51.3186 29.6531 49.9874 30.9375C48.6561 32.2219 46.2514 33.6 41.6999 33.6C41.2686 33.5953 40.8655 33.8203 40.6452 34.1953C40.4296 34.5703 40.4296 35.0297 40.6452 35.4047C40.8655 35.7797 41.2686 36.0047 41.6999 36C46.7483 36 49.8608 34.3781 51.6374 32.6625C51.9421 32.3719 52.1952 32.0906 52.4249 31.8C53.4186 33.2438 53.8968 35.0859 53.5874 36.825C53.2077 38.9625 51.7827 40.9875 48.5249 42.075L47.2124 42.4875L47.8124 43.725C48.6468 45.3984 48.9186 46.7063 48.8624 47.6625C48.8061 48.6188 48.4733 49.275 47.8874 49.8375C46.7389 50.9438 44.3952 51.5766 41.8499 51.6C40.3124 51.0516 39.1171 50.2641 38.2874 49.2C37.4202 48.0844 36.8999 46.5984 36.8999 44.4C36.9093 44.0297 36.7452 43.6781 36.4593 43.4438C36.178 43.2094 35.7983 43.1203 35.4374 43.2C34.8796 43.3266 34.4858 43.8281 34.4999 44.4C34.4999 47.0016 35.1796 49.1156 36.4124 50.7C37.4014 51.9703 38.7139 52.8375 40.1999 53.475C39.5811 54.9328 38.5171 55.8984 37.3124 56.55C35.8546 57.3375 34.1811 57.6047 33.2999 57.6C31.1436 57.5859 29.6999 56.1891 29.6999 54V7.9875C29.6999 5.39531 30.1171 3.96094 30.6374 3.3C31.1577 2.63906 31.8561 2.4 33.2999 2.4ZM21.1874 11.9625C21.1358 11.9719 21.0843 11.9859 21.0374 12C20.4796 12.1266 20.0858 12.6281 20.0999 13.2C20.0999 13.4016 19.8936 14.3813 19.0874 15.1875C18.2811 15.9938 16.8608 16.8 14.0999 16.8C13.6686 16.7953 13.2655 17.0203 13.0452 17.3953C12.8296 17.7703 12.8296 18.2297 13.0452 18.6047C13.2655 18.9797 13.6686 19.2047 14.0999 19.2C17.3389 19.2 19.5233 18.2063 20.8124 16.9125C22.1014 15.6188 22.4999 14.1984 22.4999 13.2C22.5139 12.8531 22.3733 12.5203 22.1249 12.2859C21.8718 12.0469 21.5296 11.9297 21.1874 11.9625ZM37.9874 14.3625C37.9358 14.3719 37.8843 14.3859 37.8374 14.4C37.2796 14.5266 36.8858 15.0281 36.8999 15.6C36.8999 17.1984 37.6124 19.2375 39.3374 20.9625C41.0624 22.6875 43.8327 24 47.6999 24C48.1311 24.0047 48.5343 23.7797 48.7546 23.4047C48.9702 23.0297 48.9702 22.5703 48.7546 22.1953C48.5343 21.8203 48.1311 21.5953 47.6999 21.6C44.3671 21.6 42.3374 20.5125 41.0624 19.2375C39.7874 17.9625 39.2999 16.4016 39.2999 15.6C39.3139 15.2531 39.1733 14.9203 38.9249 14.6859C38.6718 14.4469 38.3296 14.3297 37.9874 14.3625ZM11.3999 36C10.7389 36.0188 10.2186 36.5766 10.2374 37.2375C10.2561 37.8984 10.8139 38.4188 11.4749 38.4C14.6999 38.9344 16.0874 40.6547 16.8749 42.4875C17.6624 44.3203 17.6999 46.2 17.6999 46.8C17.6952 47.2313 17.9202 47.6344 18.2952 47.8547C18.6702 48.0703 19.1296 48.0703 19.5046 47.8547C19.8796 47.6344 20.1046 47.2313 20.0999 46.8C20.0999 46.2047 20.0999 43.8797 19.0874 41.5125C18.0749 39.1453 15.8764 36.6656 11.8874 36C11.7608 35.9813 11.6389 35.9813 11.5124 36C11.4749 36 11.4374 36 11.3999 36Z" fill="#E9C046"/>
                 </svg>
@@ -34,10 +34,10 @@
 
     <div class="row pt-5 mt-0 mt-sm-4 ">
       <div class="col-12 text-center pt-5 mt-3   pb-5 mb-2">
-        <NuxtLink class="btn btn-warning px-2 "  @click.once="increment(25)"  to="/onbording"></NuxtLink>
-        <NuxtLink class="btn btn-warning px-2 mx-2"  @click.once="increment(50)" to="/onbording/onbording2"></NuxtLink>
-        <NuxtLink class="btn btn-warning px-4 "  @click.once="increment(75)" to="/onbording/onbording3"></NuxtLink>
-        <NuxtLink class="btn btn-warning px-2 mx-2"  @click.once="increment(100)" to="/onbording/onbording4"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 "  @click.once="increment(25)"  to="/onboarding"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 mx-2"  @click.once="increment(50)" to="/onboarding/onboarding2"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-4 "  @click.once="increment(75)" to="/onboarding/onboarding3"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 mx-2"  @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
         <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
       </div>
 
diff --git a/pages/onbording/onbording4.vue b/pages/onboarding/onboarding4.vue
old mode 100755
new mode 100644
similarity index 97%
rename from pages/onbording/onbording4.vue
rename to pages/onboarding/onboarding4.vue
index df26f20..5c8110c
--- a/pages/onbording/onbording4.vue
+++ b/pages/onboarding/onboarding4.vue
@@ -8,8 +8,8 @@
           <h4 class="text-center fw-bold pt-5">Please choose a soundscape</h4>
         </div>
         <div class="col-12 text-center ">
-        <div class=" ">
-          <div class="checkmark pt-2 d-block d-sm-inline-block d-inline-block">
+        <div class="d-flex mx-auto justify-content-center ">
+          <div class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
           <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
           <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
             <svg xmlns="http://www.w3.org/2000/svg" width="55" height="60" viewBox="0 0 60 46" fill="none">
@@ -19,7 +19,7 @@
           </label>
           </div>
 
-          <nuxt-link to="/letsgo" class="checkmark pt-2 d-inline-block">
+          <nuxt-link to="/letsgo" class="checkmark px-1 pt-2 d-inline-block">
           <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
           <label class="btn checklabel  ms-0 ms-sm-3 pt-4 px-5" for="danger-outlined1">
             <svg xmlns="http://www.w3.org/2000/svg"  height="60" viewBox="0 0 52 52" fill="red">
@@ -29,8 +29,8 @@
           </label>
           </nuxt-link>
         </div>
-        <div class=" text-center">
-          <div class="checkmark pt-2 pt-sm-3 d-block d-sm-inline-block">
+        <div class="d-flex mx-auto justify-content-center ">
+          <div class="checkmark pt-2 pt-sm-3 px-1 d-block d-sm-inline-block">
           <input type="radio" class="btn-check" name="options-outlined" id="success-outlined2" autocomplete="off" >
           <label class="btn checklabel py-3 px-5" for="success-outlined2">
             <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -40,7 +40,7 @@
             <p class=" text-center">Forest</p>
           </label>
           </div>
-          <div class="checkmark pt-2 pt-sm-3 d-block d-sm-inline-block">
+          <div class="checkmark pt-2 px-1 pt-sm-3 d-block d-sm-inline-block">
           <input type="radio" class="btn-check  " name="options-outlined" id="danger-outlined" autocomplete="off">
           <label class="btn checklabel ms-0 ms-lg-3 py-3 px-5 " for="danger-outlined">
             <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -57,10 +57,10 @@
 
     <div class="row pt-5 mt-2 ">
       <div class="col-12 text-center pt-5 mt-3   pb-5 mb-2">
-        <NuxtLink class="btn btn-warning px-2 "  @click.once="increment(25)" to="/onbording"></NuxtLink>
-        <NuxtLink class="btn btn-warning px-2 mx-2 "  @click.once="increment(50)" to="/onbording/onbording2"></NuxtLink>
-        <NuxtLink class="btn btn-warning px-2 "  @click.once="increment(75)" to="/onbording/onbording3"></NuxtLink>
-        <NuxtLink class="btn btn-warning px-4 mx-2 " @click.once="increment(100)" to="/onbording/onbording4"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 "  @click.once="increment(25)" to="/onboarding"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 mx-2 "  @click.once="increment(50)" to="/onboarding/onboarding2"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-2 "  @click.once="increment(75)" to="/onboarding/onboarding3"></NuxtLink>
+        <NuxtLink class="btn btn-warning px-4 mx-2 " @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
         <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
       </div>