diff --git a/assets/css/style.css b/assets/css/style.css
index d77b5b5..ea64ba1 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -50,4 +50,23 @@
     transition: .2s ease-in-out;
 }
 
+.accordion-button-homebar:not(.collapsed)::after {
+    background-position-y:1px ;
+}
+.accordion-button-homebar:not(.collapsed) {
+    color: black;
+    background-color: white;
+}
+
+.accordion-button-homebar:focus {
+    z-index: 3;
+    border-color: white;
+    outline: 0;
+    box-shadow: none;
+}
+.dropdown-menu {
+    min-width: 200px !important;
+    border: none;
+    box-shadow: 1px 0px 4px 0px rgba(0,0,0,0.10);
+}
 
diff --git a/assets/image/AudioWave1.png b/assets/image/AudioWave1.png
new file mode 100644
index 0000000..a7dddac
Binary files /dev/null and b/assets/image/AudioWave1.png differ
diff --git a/assets/image/Cloudsoftware.png b/assets/image/Cloudsoftware.png
new file mode 100644
index 0000000..ccfd2b9
Binary files /dev/null and b/assets/image/Cloudsoftware.png differ
diff --git a/assets/image/Frame19439.png b/assets/image/Frame19439.png
new file mode 100644
index 0000000..844c05a
Binary files /dev/null and b/assets/image/Frame19439.png differ
diff --git a/assets/image/Vector (9).png b/assets/image/Vector121.png
similarity index 100%
rename from assets/image/Vector (9).png
rename to assets/image/Vector121.png
diff --git a/assets/image/Vector (7).png b/assets/image/Vector7.png
similarity index 100%
rename from assets/image/Vector (7).png
rename to assets/image/Vector7.png
diff --git a/assets/image/Vector (8).png b/assets/image/Vector8.png
similarity index 100%
rename from assets/image/Vector (8).png
rename to assets/image/Vector8.png
diff --git a/assets/image/airbods.png b/assets/image/airbods.png
new file mode 100644
index 0000000..fab833a
Binary files /dev/null and b/assets/image/airbods.png differ
diff --git a/assets/image/audiowave2.png b/assets/image/audiowave2.png
new file mode 100644
index 0000000..4b87b1c
Binary files /dev/null and b/assets/image/audiowave2.png differ
diff --git a/assets/image/headphone.png b/assets/image/headphone.png
new file mode 100644
index 0000000..37ee6e3
Binary files /dev/null and b/assets/image/headphone.png differ
diff --git a/components/homebar.vue b/components/homebar.vue
index fcdf613..2f84b16 100644
--- a/components/homebar.vue
+++ b/components/homebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nav class="navbar navbar-expand-sm">
+    <nav class="navbar navbar-expand">
       <div class="container-fluid">
         <a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -12,19 +12,68 @@
           <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>
+                <a class="nav-link first-icon px-2 py-2" aria-current="page"  data-bs-toggle="dropdown" href="#"></a>
+                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
+                  <li class="px-1"><a class="dropdown-item py-2 " href="#" style="border-bottom: 1px solid lightgray;">Lagoon  <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
+                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Tropics <span class="float-end"><img src="~/assets/image/Vector7.png"></span></a></li>
+                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Forest <span class="float-end"><img src="~/assets/image/Vector8.png"></span></a></li>
+                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Meadow <span class="float-end"><img src="~/assets/image/Vector121.png"></span></a></li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link second-icon  px-2 py-2" href="#"></a>
+              <li class="nav-item dropdown">
+                <a class="nav-link second-icon   px-2 py-2" data-bs-auto-close="outside" data-bs-toggle="dropdown" href="#">
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
+                  <li class="px-1">
+                    <div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample">
+                      <div class="accordion-item">
+                        <h4 class="accordion-header" id="flush-headingOne">
+                          <button class="accordion-button accordion-button-homebar  py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+                            Headphones Type
+                          </button>
+                        </h4>
+                        <div id="flush-collapseOne" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
+                          <div class="accordion-body p-0 m-0">
+                            <ul class="nav flex-column">
+                              <li class="nav-item">
+                                <a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">In-Ear  <span class="float-end"><img src="~/assets/image/airbods.png"></span></a>
+                              </li>
+                              <li class="nav-item">
+                                <a class="nav-link" href="#">Over-Ear <span class="float-end"><img src="~/assets/image/headphone.png"></span> </a>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li class="px-1">
+                    <div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample1">
+                      <div class="accordion-item">
+                        <h4 class="accordion-header" id="flush-headingOne">
+                          <button class="accordion-button accordion-button-homebar  py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne1" aria-expanded="false" aria-controls="flush-collapseOne">
+                            Headphones Type
+                          </button>
+                        </h4>
+                        <div id="flush-collapseOne1" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample1">
+                          <div class="accordion-body p-0 m-0">
+                            <ul class="nav flex-column">
+                              <li class="nav-item">
+                                <a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">No  <span class="float-end"><img src="~/assets/image/AudioWave1.png"></span></a>
+                              </li>
+                              <li class="nav-item">
+                                <a class="nav-link" href="#">Yes <span class="float-end"><img src="~/assets/image/audiowave2.png"></span></a>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+               </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link third-icon  px-2 py-2" href="#"></a>
+                <a class="nav-link third-icon  px-2 py-2" id="foucused-icon" href="#" ref="foucused"></a>
               </li>
               <li class="nav-item">
                 <a class="nav-link fourth-icon  px-2 py-2" href="#"></a>
@@ -60,7 +109,6 @@ export default {
   /*padding: 10px 10px;*/
   text-align: center;
   height: 44px;
-
 }
 .second-icon{
   content: url('~/assets/image/AirPods Pro Max.png');
@@ -104,4 +152,8 @@ export default {
   padding: 10px 10px;
   text-align: center;
 }
+.accordion-button-homebar::after {
+  background-size: 16px;
+  background-position-y: 4px;
+}
 </style>
\ No newline at end of file
diff --git a/components/settingbar.vue b/components/settingbar.vue
new file mode 100644
index 0000000..997bb15
--- /dev/null
+++ b/components/settingbar.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <nav class="navbar navbar-expand-sm my-0 py-0 ">
+      <div class="container-fluid ps-0 ms-0 ">
+        <div class="py-4 col-3 my-0 py-0" style="background-color: #f4f5f7">
+          <a class="" href="#"><img src="~/assets/image/Logo.png"></a>
+        </div>
+        <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"  data-bs-toggle="dropdown" href="#"></a>
+                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
+                  <li class="px-1"><a class="dropdown-item py-2 " href="#" style="border-bottom: 1px solid lightgray;">Lagoon  <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
+                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Tropics <span class="float-end"><img src="~/assets/image/Vector7.png"></span></a></li>
+                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Forest <span class="float-end"><img src="~/assets/image/Vector8.png"></span></a></li>
+                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Meadow <span class="float-end"><img src="~/assets/image/Vector121.png"></span></a></li>
+                </ul>
+              </li>
+              <li class="nav-item dropdown">
+                <a class="nav-link second-icon   px-2 py-2" data-bs-auto-close="outside" data-bs-toggle="dropdown" href="#">
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
+                  <li class="px-1">
+                    <div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample">
+                      <div class="accordion-item">
+                        <h4 class="accordion-header" id="flush-headingOne">
+                          <button class="accordion-button accordion-button-homebar  py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+                            Headphones Type
+                          </button>
+                        </h4>
+                        <div id="flush-collapseOne" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
+                          <div class="accordion-body p-0 m-0">
+                            <ul class="nav flex-column">
+                              <li class="nav-item">
+                                <a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">In-Ear  <span class="float-end"><img src="~/assets/image/airbods.png"></span></a>
+                              </li>
+                              <li class="nav-item">
+                                <a class="nav-link" href="#">Over-Ear <span class="float-end"><img src="~/assets/image/headphone.png"></span> </a>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li class="px-1">
+                    <div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample1">
+                      <div class="accordion-item">
+                        <h4 class="accordion-header" id="flush-headingOne">
+                          <button class="accordion-button accordion-button-homebar  py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne1" aria-expanded="false" aria-controls="flush-collapseOne">
+                            Headphones Type
+                          </button>
+                        </h4>
+                        <div id="flush-collapseOne1" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample1">
+                          <div class="accordion-body p-0 m-0">
+                            <ul class="nav flex-column">
+                              <li class="nav-item">
+                                <a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">No  <span class="float-end"><img src="~/assets/image/AudioWave1.png"></span></a>
+                              </li>
+                              <li class="nav-item">
+                                <a class="nav-link" href="#">Yes <span class="float-end"><img src="~/assets/image/audiowave2.png"></span></a>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link third-icon  px-2 py-2" id="foucused-icon" href="#" ref="foucused"></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:'settingBar',
+}
+</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;
+}
+.accordion-button-homebar::after {
+  background-size: 16px;
+  background-position-y: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 6093c44..2cdcefb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -32,6 +32,7 @@ useHead({
 </script>
 
 <style>
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css";
 .slide-left-enter-active,
 .slide-left-leave-active,
 .slide-right-enter-active,
diff --git a/pages/index.vue b/pages/index.vue
index c37052d..8ca5bcf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,11 +1,18 @@
 <template>
     <div>
       <home-bar />
+      <NuxtPage page-key="child" />
     </div>
 </template>
 <script>
+
 import HomeBar from "../components/homebar";
 export default {
-  components: {HomeBar}
+  components: {HomeBar},
+  methods:{
+    focused(){
+      document.getElementById('foucused-icon').focus();
+    }
+  }
 }
 </script>
\ No newline at end of file
diff --git a/pages/index/adaptivesoundscap.vue b/pages/index/adaptivesoundscap.vue
new file mode 100644
index 0000000..714c552
--- /dev/null
+++ b/pages/index/adaptivesoundscap.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-6">
+        <div class="row">
+          <div class="col-1"><span><i class="fa-solid fa-arrow-left-long"></i></span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
new file mode 100644
index 0000000..464c7c3
--- /dev/null
+++ b/pages/index/index.vue
@@ -0,0 +1,27 @@
+<template>
+<div>
+  <div class="container">
+    <div class="row pt-3">
+      <div class="col-12 text-center">
+        <img src="~/assets/image/Cloudsoftware.png">
+
+        <h4 class="fw-bold  ">Focus</h4>
+        <div class="pt-3">
+          <img src="~/assets/image/Frame19439.png" />
+        </div>
+        <div class="d-flex justify-content-center  pt-3">
+        <span class="text-muted fw-bold fs-6 ">Adaptive soundscape : <span class="" style="color: #e9c046">On</span> </span><span class="ps-3"><i class="fa-solid text-muted d-flex pt-1 mt-1 fa-chevron-right"></i></span>
+        </div>
+        </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name:'HomePage',
+  created() {
+  }
+}
+</script>
\ No newline at end of file
diff --git a/pages/setting.vue b/pages/setting.vue
new file mode 100644
index 0000000..cf51b85
--- /dev/null
+++ b/pages/setting.vue
@@ -0,0 +1,153 @@
+<template>
+<!--  <setting-bar />-->
+  <div class="container-fluid">
+    <div class="row flex-nowrap">
+      <div class="col-auto col-md-3  px-sm-2 px-0 " style="background-color: #f4f5f7">
+        <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
+          <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
+            <span class=" d-none d-sm-inline pt-3"><img src="~/assets/image/Logo.png" class="img img-fluid"></span>
+          </a>
+          <ul class="nav  flex-column mb-sm-auto mb-0 align-items-center w-100 align-items-sm-start" id="menu">
+            <li class="nav-item py-0 w-100 ">
+              <nuxt-link to="/setting" class="nav-link px-3 py-3 list-active align-middle px-0 active text-muted fw-bold">
+                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Account</span>
+              </nuxt-link>
+            </li>
+            <li class="nav-item py-0 w-100 ">
+              <nuxt-link to="/setting/editaccount" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
+                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Subscription</span>
+              </nuxt-link>
+            </li>
+            <li class="nav-item py-0 w-100 ">
+              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
+                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Soundscape Settings</span>
+              </a>
+            </li>
+            <li class="nav-item py-0 w-100 ">
+              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
+                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">FAQ</span>
+              </a>
+            </li>
+            <li class="nav-item py-0 w-100 ">
+              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
+                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">About Mindboost</span>
+              </a>
+            </li>
+            <li class="nav-item py-0 w-100 ">
+              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
+                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Imprint</span>
+              </a>
+            </li>
+
+          </ul>
+          <hr>
+        </div>
+      </div>
+      <div class="col-10 col-sm-9 overflow-hidden">
+        <div class="row ">
+          <div class="col-12 text-center">
+            <div class="d-inline-block mx-auto  ">
+              <h4 class="d-inline-block  d-none d-sm-block pt-3 text-muted fw-bolder">Settings</h4>
+            </div>
+            <ul class="nav float-end">
+              <li class="nav-item dropdown">
+                <a class="nav-link first-icon px-2 py-2" aria-current="page"  data-bs-toggle="dropdown" href="#"></a>
+                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
+                  <li class="px-1"><a class="dropdown-item py-2 " href="#" style="border-bottom: 1px solid lightgray;">Lagoon  <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
+                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Tropics <span class="float-end"><img src="~/assets/image/Vector7.png"></span></a></li>
+                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Forest <span class="float-end"><img src="~/assets/image/Vector8.png"></span></a></li>
+                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Meadow <span class="float-end"><img src="~/assets/image/Vector121.png"></span></a></li>
+                </ul>
+              </li>
+              <li class="nav-item dropdown">
+                <a class="nav-link second-icon   px-2 py-2" data-bs-auto-close="outside" data-bs-toggle="dropdown" href="#">
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
+                  <li class="px-1">
+                    <div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample">
+                      <div class="accordion-item">
+                        <h4 class="accordion-header" id="flush-headingOne">
+                          <button class="accordion-button accordion-button-homebar  py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+                            Headphones Type
+                          </button>
+                        </h4>
+                        <div id="flush-collapseOne" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
+                          <div class="accordion-body p-0 m-0">
+                            <ul class="nav flex-column">
+                              <li class="nav-item">
+                                <a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">In-Ear  <span class="float-end"><img src="~/assets/image/airbods.png"></span></a>
+                              </li>
+                              <li class="nav-item">
+                                <a class="nav-link" href="#">Over-Ear <span class="float-end"><img src="~/assets/image/headphone.png"></span> </a>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li class="px-1">
+                    <div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample1">
+                      <div class="accordion-item">
+                        <h4 class="accordion-header" id="flush-headingOne">
+                          <button class="accordion-button accordion-button-homebar  py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne1" aria-expanded="false" aria-controls="flush-collapseOne">
+                            Headphones Type
+                          </button>
+                        </h4>
+                        <div id="flush-collapseOne1" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample1">
+                          <div class="accordion-body p-0 m-0">
+                            <ul class="nav flex-column">
+                              <li class="nav-item">
+                                <a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">No  <span class="float-end"><img src="~/assets/image/AudioWave1.png"></span></a>
+                              </li>
+                              <li class="nav-item">
+                                <a class="nav-link" href="#">Yes <span class="float-end"><img src="~/assets/image/audiowave2.png"></span></a>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link third-icon  px-2 py-2" id="foucused-icon" href="#" ref="foucused"></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>
+
+        <nuxt-page key="child" />
+    </div>
+  </div>
+  </div>
+</template>
+<script>
+import SettingBar from "../components/settingbar";
+export default {
+  components: {SettingBar}
+}
+</script>
+
+<style>
+.list-active{
+  border-radius: 10px;
+  width: 100% !important;
+}
+.list-active.router-link-exact-active{
+  background-color: #e9c046;
+  border-radius: 10px;
+  color: white !important;
+  width: 100% !important;
+}
+.list-active:active a{
+  color: white !important;
+}
+</style>
\ No newline at end of file
diff --git a/pages/setting/editaccount.vue b/pages/setting/editaccount.vue
new file mode 100644
index 0000000..ea87ad6
--- /dev/null
+++ b/pages/setting/editaccount.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="row">
+    <div class="col-12">
+      <h1>Edit</h1>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/pages/setting/index.vue b/pages/setting/index.vue
new file mode 100644
index 0000000..e441beb
--- /dev/null
+++ b/pages/setting/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+      <div class="row">
+        <div class="col-12">
+          <div class="">
+
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file