diff --git a/pages/onboarding.vue b/pages/onboarding.vue
index 8f96039..c392d7a 100644
--- a/pages/onboarding.vue
+++ b/pages/onboarding.vue
@@ -35,6 +35,7 @@
 
       <div class="row pt-5 mt-0 mt-sm-4 " style="position: fixed;bottom: 0px;left: 0;right: 0">
         <div class="col-12 text-center pt-5 mt-3   pb-2 mb-2" >
+          <NuxtLink class="btn btn-warning px-2 mx-1" exact-active-class="px-4 mx-2" :to="localePath('/onboarding/selectinput')"></NuxtLink>
           <NuxtLink class="btn btn-warning px-2" exact-active-class="px-4 mx-2" :to="localePath('/onboarding')"></NuxtLink>
           <NuxtLink class="btn btn-warning  mx-2"  exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding2')"></NuxtLink>
           <NuxtLink class="btn btn-warning px-2 " exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding3')"></NuxtLink>
diff --git a/pages/onboarding/selectinput.vue b/pages/onboarding/selectinput.vue
new file mode 100644
index 0000000..0e606e0
--- /dev/null
+++ b/pages/onboarding/selectinput.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col-12 ">
+        <h4 class="text-center fw-bold pt-5">{{t("How is your audio hardware connected?")}}</h4>
+        <p class="text-center mb-0 pb-0 text-muted">As input, please select the microphone of your laptop or mobile device – not of your headphones.</p>
+        <p class="text-center mt-0 pt-0 text-muted">To use Mindboost, headphones are required.</p>
+      </div>
+    </div>
+    <div class="row justify-content-center">
+      <div class="col-11 pt-md-4">
+        <form>
+          <div class="row justify-content-center">
+            <div class="col-md-3 text-center">
+              <h6 class="pb-0 mb-0">Input device:</h6>
+              <p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select laptop or mobile device microphone)</p>
+              <select class="form-select pt-1 mt-0 select-box ">
+                <option>Internal Microphone</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="row justify-content-center pt-3">
+            <div class="col-md-3 text-center">
+              <h6 class="pb-0 mb-0 " >Output device:</h6>
+              <p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select headphones or headphone output)</p>
+              <select class="form-select pt-1 mt-0 select-box ">
+                <option>Audio Output</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="row justify-content-center pt-3">
+            <div class="col-md-3 text-center">
+              <button class="btn col-4 next-btn" >NEXT</button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+<script>
+import {useCounterStore} from '@/stores/counter';
+import {mapState,mapActions} from "pinia";
+export default {
+  setup() {
+    const { t } = useI18n()
+    const localePath = useLocalePath()
+
+    return {
+      t,
+      localePath,
+    }
+  },
+  mounted() {
+    this.increment(100);
+  },
+  computed:{...mapState(useCounterStore,['count'])},
+
+  data(){
+    return{
+      bar_val:100,
+      form:{
+        soundscape:'',
+      }
+    }
+  },
+  methods:{
+    ...mapActions(useCounterStore,['increment']),
+    ...mapActions(useCounterStore,['decrement']),
+    saveSetting(value){
+      this.form.soundscape=value;
+      this.$axios.post('/api/update-setting',this.form).then(({data})=>{
+        console.log(data);
+        if(data.success){
+          // this.$toast.success(data.message);
+          this.$router.push(this.localePath('letsgo'));
+        }
+      }).catch((e)=>{
+        this.$toast.error("something went wrong while saving...");
+      })
+    }
+  },
+}
+</script>
+
+<style scoped>
+.bar{
+  background-color: #e9c046;
+}
+
+.select-box{
+  border: 2px solid #e9c046;
+  box-shadow: none;
+}
+
+.select-box:focus{
+  border: 2px solid #e9c046;
+  box-shadow: none;
+
+}
+.next-btn{
+  background: #e9c046;
+  color: white;
+  font-weight: 600;
+  font-size: 18px;
+  padding: 8px 10px;
+}
+.next-btn:hover{
+  background: #e9c046;
+  color: white;
+}
+</style>
\ No newline at end of file