diff --git a/package.json b/package.json
index 7ae1fe9..aff0b79 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev --host --port 2008",
-    "start": "astro dev --host --port 2008",
+    "dev": "astro dev --host --port 2020",
+    "start": "astro dev --host --port 2020",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
diff --git a/src/components/AddQuestion.vue b/src/components/AddQuestion.vue
new file mode 100644
index 0000000..bf057db
--- /dev/null
+++ b/src/components/AddQuestion.vue
@@ -0,0 +1,125 @@
+<template>
+    <div>
+      <section class="container-fluid bg-green-600 mb-16">
+        <div class="container mx-auto px-4">
+          <h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
+        </div>
+        <!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
+      </section>
+      <section class="container mx-auto px-4 max-w-2xl">
+        <form @submit="submitForm" class="flex-flex-col">
+            <div @change="" >
+                <select v-model="identifier" name="" id="" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5 w-full">
+                    <option v-for="idData in idfrData" :value="idData.identifier_name + idData.identifier_number">{{ idData.identifier_name }} {{ idData.identifier_number }}</option>
+                </select>
+            </div>
+            <div class="flex flex-col">
+                <label for="question">Add Question:<span class="text-[#ff0000] text-xl">*</span></label>
+                <input v-model="question" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="question" name="question" type="text" placeholder="Question" required />
+                <div v-for="(field, index) in optionsField" :key="index" class="flex flex-col">
+                    <label :for="'Question' + (index + 1)">Options: {{ index + 1 }}<span class="text-[#ff0000] text-xl">*</span></label>
+                    <div class="flex flex-row place-items-center gap-2">                        
+                        <input class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5 w-full" placeholder="Add Option" v-model="options[index]" :id="'Question' + (index + 1)" :name="'Question' + (index + 1)" type="text" required />
+                        <span class="text-[#FF0000] text-2xl cursor-pointer" @click="deleteField()">&#10006;</span>
+                        <input v-model="ansNoDa[index]" :value="options" :name="options" type="checkbox" />
+                    </div>
+                </div>
+                <div>
+                    <p class="bg-green-500 text-white font-bold rounded-lg float-right p-1.5 mt-2 cursor-pointer" @click="addField()">Add More</p>
+                </div>
+                <div class="flex flex-col">
+                    <label for="answer">Correct Answer:<span class="text-[#ff0000] text-xl">*</span></label>
+                    <input v-model="correctAnswer" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="answer" name="answer" type="text" placeholder="Correct Answer" required />
+                    <label class="mt-2" for="answerNumber">Select Answer Number:<span class="text-[#ff0000] text-xl">*</span></label>
+                    <select v-model="answerNumber" name="answerNumber" id="answerNumber" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" required>
+                        <option value="0" selected>-Select-</option>
+                        <option v-for="(field, index) in optionsField" :key="index" :value="index + 1" class="">{{ index +1 }}</option>
+                    </select>
+                    <input class="bg-green-500 text-white font-bold rounded-lg float-right p-2 mt-2 cursor-pointer mt-6" type="submit" value="Save">
+                </div>
+                <p>Answer {{ ansNoDa }}</p>
+            </div>
+        </form>
+      </section>
+    </div>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                options: [''],
+                optionsField: 2,
+                question: '',
+                correctAnswer: '',
+                answerNumber: 0,
+                ansNoDa: [],
+                identifier: "",
+                identifierNumber: "",
+                idfrData: ""
+            };
+        },
+        methods: {
+            indentifierValue(){
+                console.log(this.identifier.target.value)
+            },
+            addField() {
+            this.optionsField++;
+            this.options.push('');
+            },
+            deleteField() {
+            if (this.optionsField > 1) {
+                this.optionsField--;
+                this.options.pop();
+            }
+            },
+            submitForm(e) {
+                e.preventDefault();
+                const formData = new FormData();
+                // const idntyName = this.identifier;
+                const questionObject = {
+                    identifier: this.identifier +  '-' + this.identifierNumber,
+                    id: Math.floor(Math.random() * 100000),
+                    qs: this.question,
+                    options: this.options,
+                    answer: this.correctAnswer,
+                    annswer_number: this.answerNumber,
+                };
+                formData.append('questions', JSON.stringify(questionObject));
+                // Make the fetch request
+                fetch('https://api8.siliconpin.com/items/exam_portal', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json', // Set the content type to JSON
+                    },
+                    body: JSON.stringify({ questions: [questionObject] }), // Send an array of questions
+                })
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        // Handle success response
+                        console.log('Success:', data);
+                    })
+                    .catch(error => {
+                        // Handle error
+                        console.error('Error:', error);
+                    });
+            },
+        },
+        mounted(){
+            fetch('https://api8.siliconpin.com/items/question_identifier')
+            .then(response => response.json())
+            .then(data => {
+                this.idfrData = data.data;
+                console.log(this.idfrData)
+            })
+            .catch(error => {
+                console.error("Something Wrong", error)
+            })
+            // console.log(this.ansNoDa)
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/MCQQuestion.vue b/src/components/MCQQuestion.vue
index e6c9f48..0745330 100644
--- a/src/components/MCQQuestion.vue
+++ b/src/components/MCQQuestion.vue
@@ -7,43 +7,49 @@
             <!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
         </section>
         <section class="container mx-auto " >
-            <div class="flex flex-col justify-center place-items-center">
+            <div class="flex flex-col md:flex-row justify-center  gap-4">
                 <div class="border-t-2 rounded-2xl border-yellow-500 shadow-lg p-6 w-full max-w-2xl">
                 <div class="flex flex-row place-content-between">
                     <p class="text-xl font-bold">Question: {{ qPoint + 1 }} / {{ noOfQs }} </p>
                     <div class="flex flex-row place-items-center gap-x-2">
-                    <p class="text-xl font-bold">00:00</p>
-                    <!-- <p class="text-xl font-bold">{{countdown}}</p> -->
+                    <!-- <p class="text-xl font-bold">00:00</p> -->
+                    <!-- <p class="text-xl font-bold" @click="remainingTime()">Start {{countdown}}</p> -->
                     </div>
                 </div>
                 <div>
-                    <div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">
+                    <div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">     
                         <span>Question ID: {{ qsActive.id }}</span>
                     <p v-html="qsData[qPoint].qs"></p>
                     <div class="flex flex-col gap-y-4 h-[250px] overflow-y-auto">
-                        <div v-for="(item, index) in qsActive.options" :key="index" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer" :class="{ 'selected-option': selectedOptionIndex === index }">
-                            <span class="font-bold">{{ index + 1 }} </span>&nbsp;
-                            <input  type="radio" :id="item" v-model="totalAnswer" :value="index + 1" @change="selectOption(index)"/>&nbsp;
+                        <div v-for="(item, index) in qsActive.options" :key="index + 1" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer" @change="selectOption(index)" :class="{ 'selected-option': selectedOptionIndex === index }">
+                            <span class="font-bold">{{ index + 1  }} </span>&nbsp;
+                            <input  type="radio" :id="item" v-model="saveAnswer" :value="index + 1" :class="{ 'selected-option': selectedOptionIndex === index }" />&nbsp;
                             <!-- <p v-else>Select kor age</p> -->
                             <!-- <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsActive.id, status: qsStatus }" @change="selectOption(index)" />&nbsp; -->
                             <label :for="item" v-html="item"></label>
                         </div>
-                    </div> 
+                    </div>
                     <div class="flex flex-row place-content-between mt-4 text-sm md:text-base">
                         <button v-on:click="getPrevQs" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75" :disabled="qPoint <= 0">Previous Question</button>
                         <div class="flex flex-col md:flex-row gap-2 md:gap-4">
                             <!-- <input @click="saveAns();" type="submit" id="testdis" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg" value="Save Answer" /> -->
-                            <button :disabled="this.totalAnswer <= 0" :class="{ 'button-visibility': this.totalAnswer <= 0 }"  @click="saveAns();" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</button>
-                            <!-- :class="{ 'button-visibility': this.totalAnswer <= 0 }" -->
-                            <button :disabled="this.totalAnswer >= 1" :class="{ 'button-visibility': this.totalAnswer >= 1 }" v-on:click="reviewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
-                            <!-- :class="{ 'button-visibility': this.totalAnswer >= 1 }" -->
+                            <button :disabled="this.saveAnswer <= 0" :class="{ 'button-visibility': this.saveAnswer <= 0 }"  @click="saveAns();" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</button>
+                            <!-- :class="{ 'button-visibility': this.saveAnswer <= 0 }" -->
+                            <button :disabled="this.saveAnswer >= 1" :class="{ 'button-visibility': this.saveAnswer >= 1 }" v-on:click="reviewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
+                            <!-- :class="{ 'button-visibility': this.saveAnswer >= 1 }" -->
                         </div>
-                        <button :disabled="qPoint >= noOfQs - 1" @click="getNextQs(); selectOption(index);" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75"> Next  Question</button>
+                        <button :disabled="qPoint >= noOfQs + 2" @click="getNextQs(); selectOption(index);" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75"> Next  Question</button>
                     </div>
                     </div>
                     <div v-else>No Data Found</div>
                 </div>
                 </div>
+                <div class="flex flex-col border-t-2 border-yellow-500 shadow-lg rounded-lg p-2">
+                    <p class="text-center py-4 text-xl font-bold">Your Response</p>
+                    <div class="grid grid-cols-3 gap-2">
+                        <p class="bg-green-600 response-indicator shadow-md font-bold text-white text-xl" v-for="(response, index) in totalAnswer" :key="index " :class="{'response' : response.answer <= 0}"> {{ index + 1}}</p>
+                    </div>
+                </div>
             </div>
         </section>
     </div>
@@ -52,8 +58,8 @@
 export default {
     data() {
         return {
-            totalAnswer: {},
-            allAnswer: [],
+            saveAnswer: 0,
+            totalAnswer: [],
             qsData: "",
             noOfQs: 0,
             qPoint: 0,
@@ -66,25 +72,29 @@ export default {
         };
     },
     methods: {
+        resetRadioInputs() {
+            // this.selectedOptions = {};
+            this.saveAnswer = null;
+        },
         saveAns() {
-            // if (this.totalAnswer !== null) {
+            // if (this.saveAnswer !== null) {
                 const selectedAnswer = {
-                    answer: this.totalAnswer,
+                    answer: this.saveAnswer,
                     questionId: this.qsData[this.qPoint].id,
                     view: this.viewStatus = 1, // Set status to 1 for "Save Answer"
                 };
-                this.allAnswer.push(selectedAnswer);
-                console.log('array', this.allAnswer);
+                this.totalAnswer.push(selectedAnswer);
+                console.log('array', this.totalAnswer);
             // } else {
             //     // Show an alert or set a message indicating that no option is selected
             //     alert("Select an answer before saving.");
             // }
+            this.resetRadioInputs();
+            if (this.totalAnswer.length <= 24) {
+                this.getNextQs();
+            }
         },
-        resetRadioInputs() {
-            // this.selectedOptions = {};
-            this.totalAnswer = null;
-        },
-        getNextQs() {
+        getNextQs() {            
             this.qPoint++;
             this.qsActive=this.qsData[this.qPoint];
             this.resetRadioInputs();
@@ -103,11 +113,18 @@ export default {
                 questionId: this.qsData[this.qPoint].id,
                 view: this.viewStatus = 1// Set status to 1 for "Save Answer"
             };
-                this.allAnswer.push(selectedAnswer);
+                this.totalAnswer.push(selectedAnswer);
+                console.log('array later', this.totalAnswer);
+
         },
         selectOption(index) {
             this.selectedOptionIndex = index;
         },
+        // submitExam(){
+        //     if (this.qPoint == this.noOfQs) {
+        //         aler
+        //     }
+        // },
     },
     mounted() {
         fetch('/assets/qs.json')
@@ -122,19 +139,22 @@ export default {
         .catch(error => {
             console.error('Error fetching data:', error);
         });
-        let intervalId;
-        // Start countdown on mounted
-        intervalId = setInterval(() => {
-        if (this.countdown > 0) {
-            this.countdown--;
-        } else {
-            clearInterval(intervalId);
-        }
-        }, 1000);
+        // this.remainingTime();
     },
 };
 </script>
 <style>
+.response-indicator{
+    width: 45px;
+    height: 45px;
+    align-items: center;
+    text-align: center;
+    padding-top: 10px;
+    border-radius: 50%;
+}
+.response{
+    background-color: red;
+}
 .button-visibility{
     /* display: none; */
     opacity: 0.5;
diff --git a/src/components/QuestionIdentifier.vue b/src/components/QuestionIdentifier.vue
new file mode 100644
index 0000000..5969a69
--- /dev/null
+++ b/src/components/QuestionIdentifier.vue
@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <section class="container-fluid bg-green-600 mb-16">
+            <div class="container mx-auto px-4">
+                <h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
+            </div>
+        </section>
+        <section class="container mx-auto px-4 max-w-2xl">
+            <div class="shadow-lg rounded-xl p-6">
+                <p class="text-center">Add Question Identifier</p>
+                <form @submit.prevent="saveIdentifier()" name="identifierForm">
+                    <div class="flex flex-col">
+                        <label for="identifierName" class="mt-4 ">Identifier Name:</label>
+                        <input v-model="identifierName" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierName" name="identifierName" type="text" placeholder="Identifier Name" required />
+                        <label for="identifierNumber" class="mt-4 ">Identifier Number:</label>
+                        <input v-model="identifierNumber" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierNumber" name="identifierNumber" type="text" min="1" placeholder="Identifier Number"  />
+                        <div><input value="Add" type="submit" class="mt-4 rounded-lg bg-green-500 py-1.5 text-white font-bold px-6 float-right" /></div>
+                    </div>
+                </form>
+            </div>
+        </section>
+        <section class="container mx-auto px-4 mt-6 md:mt-16">
+           <div class="flex justify-center">
+            <table class="border-2">
+                <tr>
+                    <th class="border-2">Sl No.</th>
+                    <th class="border-2">Identifier</th>
+                    <th class="border-2">Number</th>
+                    <th class="border-2">Action</th>
+                </tr>
+                <tr v-for="(items, index) in idfrData" :key="index">
+                    <td class="border-2">{{ index + 1 }}</td>
+                    <td class="border-2">{{ items.identifier_name }}</td>
+                    <td class="border-2">{{ items.identifier_number }}</td>
+                    <td class="border-2 flex flex-row gap-x-2">
+                        <a href="">Edit</a>
+                        <a href="">Delete</a>
+                    </td>
+                </tr>
+            </table>
+           </div> 
+        </section>
+    </div>
+  </template>
+  <script>
+    export default {
+        data(){
+            return{
+                identifierName: "",
+                identifierNumber: "",
+                idfrData: null,
+            };
+        },
+        methods:{
+            saveIdentifier() {
+                fetch('https://api8.siliconpin.com/items/question_identifier', {
+                    method: 'POST',
+                    headers:{
+                        'Content-Type' : 'application/json'
+                    },
+                    body: JSON.stringify({
+                        status: 'published',
+                        identifier_name: this.identifierName,
+                        identifier_number: this.identifierNumber,
+                    })
+                })
+                .then(response => {
+                    if(response.ok){
+                        return response.json();
+                        console.log(response)
+                    }
+                    return Promise.reject(response)
+                })
+                .then(json => {
+
+                })
+                .catch((response) => {
+                    console.log(response.status, response.statusText);
+                    response.json().then((json) => {
+                        console.log(json.errors[0].message);
+                    })
+                })
+            }
+
+        },
+        mounted(){
+            fetch('https://api8.siliconpin.com/items/question_identifier')
+            .then(response => response.json())
+            .then(data => {
+                this.idfrData = data.data;
+                console.log(this.idfrData)
+            })
+            .catch(error => {
+                console.error("Something Wrong", error)
+            })
+        }
+    }
+  </script>
\ No newline at end of file
diff --git a/src/components/Temp.vue b/src/components/Temp.vue
index 96b3d04..c0f6b0d 100644
--- a/src/components/Temp.vue
+++ b/src/components/Temp.vue
@@ -1,34 +1,88 @@
+<template>
+  <div>
+      <section class="container-fluid bg-green-600 mb-16">
+          <div class="container mx-auto px-4">
+              <h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
+          </div>
+      </section>
+      <section class="container mx-auto px-4 max-w-2xl">
+          <div class="shadow-lg rounded-xl p-6">
+              <p class="text-center">Add Question Identifier</p>
+              <form @submit="saveIdentifier" name="identifierForm">
+                  <div class="flex flex-col">
+                      <label for="identifierName" class="mt-4 ">Identifier Name:</label>
+                      <input v-model="identifierName" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierName" name="identifierName" type="text" placeholder="Identifier Name" required />
+                      <label for="identifierNumber" class="mt-4 ">Identifier Number:</label>
+                      <input v-model="identifierNumber" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierNumber" name="identifierNumber" type="text" min="1" placeholder="Identifier Number"  />
+                      <div><input value="Add" type="submit" class="mt-4 rounded-lg bg-green-500 py-1.5 text-white font-bold px-6 float-right" /></div>
+                  </div>
+              </form>
+          </div>
+      </section>
+      <section class="container mx-auto px-4 mt-6 md:mt-16">
+         <div class="flex justify-center">
+          <table class="border-2">
+              <tr>
+                  <th class="border-2">Sl No.</th>
+                  <th class="border-2">Identifier</th>
+                  <th class="border-2">Number</th>
+                  <th class="border-2">Action</th>
+              </tr>
+              <tr v-for="(items, index) in idfrData" :key="index">
+                  <td class="border-2">{{ index + 1 }}</td>
+                  <td class="border-2">{{ items.identifier_name }}</td>
+                  <td class="border-2">{{ items.identifier_number }}</td>
+                  <td class="border-2 flex flex-row gap-x-2">
+                      <a href="">Edit</a>
+                      <a href="">Delete</a>
+                  </td>
+              </tr>
+          </table>
+         </div> 
+      </section>
+  </div>
+</template>
 <script>
-export default {
-  // ... (other options)
-
-  data() {
-    return {
-      // ... (other data properties)
-      totalAnswer: [], // Change this to an array
-      allAnswer: [],
-    };
-  },
-
-  methods: {
-    saveAns() {
-      const selectedAnswer = {
-        answer: this.totalAnswer,
-        questionId: this.qsData[this.qPoint].id,
-        status: (this.qsStatus = 1), // Set status to 1 for "Save Answer"
-      };
-
-      // Push the selected answer into the allAnswer array
-      this.allAnswer.push(this.selectedAnswer);
-
-      console.log("selected options", selectedAnswer);
-      console.log("question ID:" + this.qsActive.id);
-      console.log("ans no: " + this.ansNo);
-    },
-
-    // ... (other methods)
-  },
-};
-
-
+  export default {
+      data(){
+          return{
+              identifierName: null,
+              identifierNumber: null,
+              idfrData: null,
+          };
+      },
+      methods:{
+          saveIdentifier(e) {
+              e.preventDefault();
+              console.log('Identifier Name:', this.identifierName);
+              console.log('Identifier Number:', this.identifierNumber);
+              let formData = new FormData();
+              formData.append('status', 'published');
+              formData.append('identifier_name', this.identifierName);
+              formData.append('identifier_number', this.identifierNumber);
+              fetch('https://api8.siliconpin.com/items/question_identifier', {
+                  method: 'POST',
+                  body: formData,
+              })
+              .then(response => response.json())
+              .then(data => {
+                  console.log('Response:', data);
+              })
+              .catch(error => {
+                  console.error('Error:', error);
+              });
+          }
+      },
+      mounted(){
+          fetch('https://api8.siliconpin.com/items/question_identifier')
+          .then(response => response.json())
+          .then(data => {
+              this.idfrData = data.data;
+              console.log(this.idfrData)
+          })
+          .catch(error => {
+              console.error("Something Wrong", error)
+          })
+      }
+  }
 </script>
\ No newline at end of file
diff --git a/src/components/Time.vue b/src/components/Time.vue
new file mode 100644
index 0000000..1b8b34d
--- /dev/null
+++ b/src/components/Time.vue
@@ -0,0 +1,174 @@
+<template>
+    <div>
+        <section class="container-fluid bg-green-600 mb-16">
+            <div class="container mx-auto px-4 ">
+                <h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
+            </div>
+            <!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
+        </section>
+        <section class="container mx-auto " >
+            <div class="flex flex-col justify-center place-items-center">
+                <div class="border-t-2 rounded-2xl border-yellow-500 shadow-lg p-6 w-full max-w-2xl">
+                <div class="flex flex-row place-content-between">
+                    <p class="text-xl font-bold">Question: {{ qPoint + 1 }} / {{ noOfQs }} </p>
+                    <div class="flex flex-row place-items-center gap-x-2">
+                        <p class="text-base font-bold">Time Remaining: {{ timer }} seconds</p>
+                    <!-- <p class="text-xl font-bold">00:00</p> -->
+                    <!-- <p class="text-xl font-bold" @click="remainingTime()">Start {{countdown}}</p> -->
+                    </div>
+                </div>
+                <div>
+                    <div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">     
+                        <span>Question ID: {{ qsActive.id }}</span>
+                    <p v-html="qsData[qPoint].qs"></p>
+                    <div class="flex flex-col gap-y-4 h-[250px] overflow-y-auto">
+                        <div v-for="(item, index) in qsActive.options" :key="index + 1" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer" @change="selectOption(index)" :class="{ 'selected-option': selectedOptionIndex === index }">
+                            <span class="font-bold">{{ index + 1  }} </span>&nbsp;
+                            <input  type="radio" :id="item" v-model="saveAnswer" :value="index + 1" :class="{ 'selected-option': selectedOptionIndex === index }" />&nbsp;
+                            <!-- <p v-else>Select kor age</p> -->
+                            <!-- <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsActive.id, status: qsStatus }" @change="selectOption(index)" />&nbsp; -->
+                            <label :for="item" v-html="item"></label>
+                        </div>
+                    </div>
+                    <div class="flex flex-row place-content-between mt-4 text-sm md:text-base">
+                        <button v-on:click="getPrevQs" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75" :disabled="qPoint <= 0">Previous Question</button>
+                        <div class="flex flex-col md:flex-row gap-2 md:gap-4">
+                            <!-- <input @click="saveAns();" type="submit" id="testdis" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg" value="Save Answer" /> -->
+                            <button :disabled="this.saveAnswer <= 0" :class="{ 'button-visibility': this.saveAnswer <= 0 }"  @click="saveAns();" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</button>
+                            <!-- :class="{ 'button-visibility': this.saveAnswer <= 0 }" -->
+                            <button :disabled="this.saveAnswer >= 1" :class="{ 'button-visibility': this.saveAnswer >= 1 }" v-on:click="reviewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
+                            <!-- :class="{ 'button-visibility': this.saveAnswer >= 1 }" -->
+                        </div>
+                        <button :disabled="qPoint >= noOfQs - 1" @click="getNextQs(); selectOption(index);" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75"> Next  Question</button>
+                    </div>
+                    </div>
+                    <div v-else>No Data Found</div>
+                </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            saveAnswer: {},
+            totalAnswer: [],
+            qsData: "",
+            noOfQs: 0,
+            qPoint: 0,
+            qsStatus: 0,
+            countdown: 10,
+            counting: false,
+            qsActive:[],
+            ansNo:0,
+            selectedOptionIndex: null, // Add this property
+            timer: 10,
+        };
+    },
+    methods: {
+        startTimer() {
+            let intervalId = setInterval(() => {
+                if (this.timer > 0) {
+                    this.timer--;
+                } else {
+                    // Time has expired, perform your action here
+                    this.handleTimeExpired();
+
+                    // Stop the interval
+                    clearInterval(intervalId);
+                }
+            }, 1000);
+        },
+        handleTimeExpired() {
+            console.log("Time expired for question", this.qsActive.id);
+            // this.getNextQs();
+        },
+        saveAns() {
+            // if (this.saveAnswer !== null) {
+                const selectedAnswer = {
+                    answer: this.saveAnswer,
+                    questionId: this.qsData[this.qPoint].id,
+                    view: this.viewStatus = 1, // Set status to 1 for "Save Answer"
+                };
+                this.totalAnswer.push(selectedAnswer);
+                console.log('array', this.totalAnswer);
+            // } else {
+            //     // Show an alert or set a message indicating that no option is selected
+            //     alert("Select an answer before saving.");
+            // }
+        },
+        resetRadioInputs() {
+            // this.selectedOptions = {};
+            this.saveAnswer = null;
+        },
+        getNextQs() {
+            this.timer = 10;
+            this.startTimer();
+            this.qPoint++;
+            this.qsActive=this.qsData[this.qPoint];
+            this.resetRadioInputs();
+            // this.resetRadioInputs();
+            // console.log(this.qsActive);            
+        },
+        getPrevQs() {
+            this.qPoint--;
+            this.qsActive=this.qsData[this.qPoint];
+            this.selectOption();
+        },
+        reviewLater(){
+            this.getNextQs();
+            const selectedAnswer = {
+                answer: 0,
+                questionId: this.qsData[this.qPoint].id,
+                view: this.viewStatus = 1// Set status to 1 for "Save Answer"
+            };
+                this.totalAnswer.push(selectedAnswer);
+                console.log('array later', this.totalAnswer);
+
+        },
+        selectOption(index) {
+            this.selectedOptionIndex = index;
+        },
+        remainingTime(){
+            let intervalId;
+            // Start countdown on mounted
+            intervalId = setInterval(() => {
+            if (this.countdown > 0) {
+                this.countdown--;
+            } else {
+                clearInterval(intervalId);
+            }
+            }, 1000);
+        },
+    },
+    mounted() {
+        fetch('/assets/qs.json')
+        .then(response => response.json())
+        .then(data => {
+            this.qsData=data;
+            this.noOfQs = this.qsData.length;
+            this.qsActive=this.qsData[0];
+            // console.log(this.qsActive);
+            // console.log(this.noOfQs);
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+        });
+        this.startTimer();
+        // this.remainingTime();
+    },
+};
+</script>
+<style>
+.button-visibility{
+    /* display: none; */
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+    .selected-option {
+        background-color: #05b3a4;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/pages/add-question.astro b/src/pages/add-question.astro
new file mode 100644
index 0000000..23b05d2
--- /dev/null
+++ b/src/pages/add-question.astro
@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Layout.astro";
+import AddQuestion from "../components/AddQuestion.vue";
+---
+<Layout title="Add New Question">
+    <AddQuestion client:visible />
+</Layout>
\ No newline at end of file
diff --git a/src/pages/identifier.astro b/src/pages/identifier.astro
new file mode 100644
index 0000000..5b0f33d
--- /dev/null
+++ b/src/pages/identifier.astro
@@ -0,0 +1,57 @@
+---
+import Layout from "../layouts/Layout.astro";
+import QuestionIdentifier from "../components/QuestionIdentifier.vue";
+---
+<Layout title="">
+    <QuestionIdentifier client:visible />
+    <!-- <main>
+        <div>
+            <section class="container mx-auto px-4 max-w-2xl mt-20">
+                <form id="identifierForm">
+                    <div class="flex flex-col">
+                        <label for="identifierName" class="mt-4 ">Identifier Name:</label>
+                        <input class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierName" name="identifierName" type="text" placeholder="Identifier Name" required />
+                        <label for="identifierNumber" class="mt-4 ">Identifier Number:</label>
+                        <input class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierNumber" name="identifierNumber" type="text" min="1" placeholder="Identifier Number"  />
+                        <div><input value="Add" type="submit" class="mt-4 rounded-lg bg-green-500 py-1.5 text-white font-bold px-6 float-right" /></div>
+                    </div>
+                </form>
+            </section>
+        </div>  
+    </main> -->
+</Layout>
+<script is:inline>
+    // document.addEventListener('DOMContentLoaded', function(){
+    //     const identifierForm = document.getElementById('identifierForm');
+    //     const identifierName = document.getElementById('identifierName');
+    //     const identifierNumber = document.getElementById('identifierNumber');
+        
+    //     identifierForm.addEventListener('submit', async function(event){
+    //         event.preventDefault();
+    //         const formData = {
+    //             status: 'published',
+    //             identifier_name: identifierName.value,
+    //             identifier_number: identifierNumber.value,
+    //         };
+    //         console.log('Form Data', formData)
+    //         const URL = 'https://api8.siliconpin.com/items/question_identifier'
+    //         try{
+    //             const response = await fetch(URL, {
+    //                 method: 'POST',
+    //                 headers: {
+    //                     'Content-Type' : 'application/json'
+    //                 },
+    //                 body: JSON.stringify(formData)
+    //             });
+    //             if(response.ok){
+    //                 console.log('Data Saved Succefully')
+    //             } else{
+    //                 console.error('Data not Saved')
+    //             }
+    //         } catch(error){
+    //             console.error('Error occoured', error)
+    //         }
+    //     })
+    // })
+</script>
+<!-- https://api8.siliconpin.com/items/question_identifier -->
\ No newline at end of file