diff --git a/src/components/InstructionPage.vue b/src/components/InstructionPage.vue
index 2b8423c..5e71e2e 100644
--- a/src/components/InstructionPage.vue
+++ b/src/components/InstructionPage.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="xl:mr-20 xl:ml-10 lg:mr-24 lg:ml-24 md:mr-48 md:ml-48 sm:mr-60 sm:ml-60">
-        <h4 class="text-lg font-bold m-6 ">Test Paper Overview</h4>
+    <div>
+        <h4 class="text-lg font-bold m-6">Test Paper Overview</h4>
         <!-- Table -->
         <table class="table-auto m-4">
             <!-- row 1 -->
@@ -11,12 +11,12 @@
             <!-- row 2 -->
             <tr>
                 <th class="border-black border-1 text-left px-4 py-2">Test Format</th>
-                <td class="border-black border-1 px-4 py-2" data-test="test-format">{{ testFormatMapping.get($props.testFormat) }} </td>
+                <td class="border-black border-1 px-4 py-2" data-test="test-format">{{ testFormatMapping.get($props.testFormat || "") }} </td>
             </tr>
             <!-- row 3 -->
             <tr>
                 <th class="border-black border-1 text-left px-4 py-2">Duration</th>
-                <td class="border-black border-1 px-4 py-2" data-test="quiz-time-limit">{{ ($props.quizTimeLimit)/60 }} minutes</td>
+                <td class="border-black border-1 px-4 py-2" data-test="quiz-time-limit">{{ ($props.quizTimeLimit?.max || 0)/60 }} minutes</td>
             </tr>
             <!-- row 4 -->
             <tr>
@@ -45,12 +45,12 @@
             </p>
             <!-- iterating over every questionset and printing title and its description -->
             <div
-              v-for="(questionSet, index) in questionSets" :key="index">
-                <li class="text-base mt-2 ml-7 font-semibold leading-none mr-4" :data-test="`questionSetTitle-${index}`">{{ questionSet.title }}</li>
+              v-for="(questionSetState, index) in questionSetStates" :key="index">
+                <li class="text-base mt-2 ml-7 font-semibold leading-none mr-4" :data-test="`questionSetTitle-${index}`">{{ questionSetState.title }}</li>
                 <div class="ml-12 mr-4 mt-1" :data-test="`no-of-questions-${index}`">
-                  There are {{ questionSet.questions.length }} questions, out of which only {{ questionSet.max_questions_allowed_to_attempt }} questions need to be attempted.
+                  There are {{ questionSetState.paletteItems.length }} questions, out of which only {{ questionSetState.maxQuestionsAllowedToAttempt }} questions need to be attempted.
                 </div>
-                <div class="text-base mx-2 mb-4 leading-tight text-slate-500 ml-12 mr-4" :data-test="`questionSetInstruction-${index}`" v-html="questionSet.description"></div>
+                <div class="text-base mx-2 mb-4 leading-tight text-slate-500 ml-12 mr-4" :data-test="`questionSetInstruction-${index}`" v-html="questionSetState.instructionPageText"></div>
             </div>
         </div>
         <!-- general Instruction -->
@@ -106,7 +106,7 @@ import BaseIcon from "./UI/Icons/BaseIcon.vue";
 import Success from "./Questions/Palette/Success.vue";
 import Error from "./Questions/Palette/Error.vue";
 import Neutral from "./Questions/Palette/Neutral.vue";
-import { quizTitleType, testFormat, QuestionSet } from "../types";
+import { quizTitleType, testFormat, questionSetPalette, TimeLimit } from "../types";
 export default defineComponent({
   name: "InstructionPage",
   components: {
@@ -133,16 +133,16 @@ export default defineComponent({
       required: true
     },
     quizTimeLimit: {
-      type: Number,
-      required: true
+      type: Object as PropType<TimeLimit> || null,
+      default: null
     },
-    questionSets: {
-      required: true,
-      type: Array as PropType<QuestionSet[]>
+    questionSetStates: {
+      type: Array as PropType<questionSetPalette[]>,
+      default: () => []
     },
     testFormat: {
       type: [null, String] as PropType<testFormat>,
-      required: true
+      default: null
     },
   },
   setup(props) {
@@ -150,7 +150,7 @@ export default defineComponent({
 
     // to extract the questionSetTitles from questionSets (eg. Physics - Section A)
     const questionSetTitles = computed(() => {
-      return props.questionSets.map(questionSet => questionSet.title);
+      return props.questionSetStates.map(questionSetState => questionSetState.title);
     });
 
     // to split the questionSetTitles from char "-" (eg. Physics)
diff --git a/src/components/Questions/Body.vue b/src/components/Questions/Body.vue
index 28c06ee..c4bc339 100644
--- a/src/components/Questions/Body.vue
+++ b/src/components/Questions/Body.vue
@@ -8,6 +8,12 @@
       :hasQuizEnded="hasQuizEnded"
       :questionSetStates="questionSetStates"
       :currentQuestionIndex="currentQuestionIndex"
+      :title="title"
+      :subject="subject"
+      :testFormat="testFormat"
+      :maxMarks="maxMarks"
+      :numQuestions="numQuestions"
+      :quizTimeLimit="quizTimeLimit"
       class="absolute w-full h-full sm:w-2/3 lg:w-1/2 xl:w-1/3 z-10"
       @navigate="navigateToQuestion"
       data-test="questionPalette"
@@ -160,7 +166,7 @@ import {
   onUpdated
 } from "vue"
 import BaseIcon from "../UI/Icons/BaseIcon.vue"
-import { quizType, questionSetPalette, questionType, questionTypeHeaderText } from "../../types"
+import { quizType, questionSetPalette, questionType, questionTypeHeaderText, quizTitleType, testFormat, TimeLimit } from "../../types"
 import QuestionPalette from "./Palette/QuestionPalette.vue"
 
 const MAX_LENGTH_NUMERICAL_CHARACTERS: number = 10 // max length of characters in numerical answer textbox
@@ -256,7 +262,31 @@ export default defineComponent({
     questionSetTitle: {
       type: String,
       default: ""
-    }
+    },
+    title: {
+      type: [null, String] as PropType<quizTitleType>,
+      required: true,
+    },
+    subject: {
+      type: String,
+      required: true,
+    },
+    numQuestions: {
+      type: Number,
+      required: true,
+    },
+    maxMarks: {
+      type: Number,
+      required: true
+    },
+    quizTimeLimit: {
+      type: Object as PropType<TimeLimit> || null,
+      default: null
+    },
+    testFormat: {
+      type: [null, String] as PropType<testFormat>,
+      default: null
+    },
   },
   setup(props, context) {
     const isQuizAssessment = computed(() => props.quizType == "assessment")
diff --git a/src/components/Questions/Palette/QuestionPalette.vue b/src/components/Questions/Palette/QuestionPalette.vue
index 486449b..1a126cb 100644
--- a/src/components/Questions/Palette/QuestionPalette.vue
+++ b/src/components/Questions/Palette/QuestionPalette.vue
@@ -1,46 +1,74 @@
 <template>
   <div class="bg-white p-4 sm:p-6 lg:p-8 overflow-auto sm:w-1/3 lg:w-1/3 xl:w-1/3">
-    <div
-      class="bg-gray-200 rounded-md p-4 grid grid-rows-2 space-y-2"
-    >
-      <div class="grid grid-cols-2">
-        <Success
-          :title="legendSuccessText"
-          :hasQuizEnded="hasQuizEnded"
-        ></Success>
-        <Error :title="legendErrorText" :hasQuizEnded="hasQuizEnded"></Error>
-      </div>
-
-      <div class="grid grid-cols-2">
-        <Neutral
-        :title="legendNeutralText"
-        :hasQuizEnded="hasQuizEnded"
-      ></Neutral>
-        <div v-if="hasQuizEnded">
-          <PartialSuccess :title="legendPartialSuccessText" :hasQuizEnded="hasQuizEnded"></PartialSuccess>
-        </div>
-      </div>
+    <div class="inline-flex rounded-md w-full" role="group">
+      <button
+        :class="togglePaletteButtonClass"
+        class="mr-1"
+        type="button"
+        @click="togglePalette"
+        data-test="togglePalette"
+      >PALETTE</button>
+      <button
+        :class="toggleInstructionsButtonClass"
+        class="ml-1"
+        type="button"
+        @click="toggleInstructions"
+        data-test="toggleInstructions"
+      >INSTRUCTIONS</button>
     </div>
-
-    <div
-      v-for="(questionSetState, index) in questionSetStates" :key="index" class="space-y-2">
-        <p :class="titleTextClass" :data-test="`paletteTitle-${index}`">{{ questionSetState.title }}</p>
-        <div :class="instructionTextClass" :data-test="`paletteInstruction-${index}`" v-html="questionSetState.instructionText"></div>
-        <div class="grid grid-cols-5 bp-500:grid-cols-6 lg:grid-cols-7 xl:grid-cols-8 mt-4 space-y-4">
-          <PaletteItem
-            v-for="(questionState, qindex) in questionSetState.paletteItems"
-            class="hover:cursor-pointer"
-            :class="{ 'mt-4': qindex == 0 }"
-            :key="qindex"
-            :index="questionState.index"
+      <InstructionPage
+      v-if="showInstructionButton"
+      :title="title"
+      :subject="subject"
+      :testFormat="testFormat"
+      :maxMarks="maxMarks"
+      :max-questions-allowed-to-attempt="numQuestions"
+      :quizTimeLimit="quizTimeLimit"
+      :questionSetStates = "questionSetStates"
+      data-test="instruction-page"
+    />
+    <div v-if="showPaletteButton" data-test="question-palette">
+      <div
+        class="bg-gray-200 rounded-md p-4 grid grid-rows-2 space-y-2 mt-6"
+      >
+        <div class="grid grid-cols-2">
+          <Success
+            :title="legendSuccessText"
             :hasQuizEnded="hasQuizEnded"
-            :state="questionState.value"
-            :isHighlighted="currentQuestionIndex == questionState.index"
-            @click="navigateToQuestion(questionState.index)"
-            :data-test="`paletteItem-${questionState.index}`"
-          ></PaletteItem>
+          ></Success>
+          <Error :title="legendErrorText" :hasQuizEnded="hasQuizEnded"></Error>
         </div>
 
+        <div class="grid grid-cols-2">
+          <Neutral
+          :title="legendNeutralText"
+          :hasQuizEnded="hasQuizEnded"
+        ></Neutral>
+          <div v-if="hasQuizEnded">
+            <PartialSuccess :title="legendPartialSuccessText" :hasQuizEnded="hasQuizEnded"></PartialSuccess>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-for="(questionSetState, index) in questionSetStates" :key="index" class="space-y-2">
+          <p :class="titleTextClass" :data-test="`paletteTitle-${index}`">{{ questionSetState.title }}</p>
+          <div :class="instructionTextClass" :data-test="`paletteInstruction-${index}`" v-html="questionSetState.instructionText"></div>
+          <div class="grid grid-cols-5 bp-500:grid-cols-6 lg:grid-cols-7 xl:grid-cols-8 mt-4 space-y-4">
+            <PaletteItem
+              v-for="(questionState, qindex) in questionSetState.paletteItems"
+              class="hover:cursor-pointer"
+              :class="{ 'mt-4': qindex == 0 }"
+              :key="qindex"
+              :index="questionState.index"
+              :hasQuizEnded="hasQuizEnded"
+              :state="questionState.value"
+              :isHighlighted="currentQuestionIndex == questionState.index"
+              @click="navigateToQuestion(questionState.index)"
+              :data-test="`paletteItem-${questionState.index}`"
+            ></PaletteItem>
+          </div>
+      </div>
     </div>
   </div>
 </template>
@@ -51,8 +79,9 @@ import PartialSuccess from "./PartialSuccess.vue";
 import Error from "./Error.vue";
 import Neutral from "./Neutral.vue";
 import PaletteItem from "./Item.vue";
-import { questionSetPalette } from "../../../types";
-import { defineComponent, computed, PropType } from "vue";
+import InstructionPage from "@/components/InstructionPage.vue";
+import { TimeLimit, questionSetPalette, quizTitleType, testFormat } from "../../../types";
+import { defineComponent, computed, PropType, reactive } from "vue";
 
 export default defineComponent({
   components: {
@@ -61,6 +90,7 @@ export default defineComponent({
     Error,
     Neutral,
     PaletteItem,
+    InstructionPage
   },
   props: {
     hasQuizEnded: {
@@ -75,12 +105,49 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    title: {
+      type: [null, String] as PropType<quizTitleType>,
+      required: true,
+    },
+    subject: {
+      type: String,
+      required: true,
+    },
+    numQuestions: {
+      type: Number,
+      required: true,
+    },
+    maxMarks: {
+      type: Number,
+      required: true
+    },
+    quizTimeLimit: {
+      type: Object as PropType<TimeLimit> || null,
+      default: null
+    },
+    testFormat: {
+      type: [null, String] as PropType<testFormat>,
+      default: null
+    },
   },
   setup(props, context) {
     function navigateToQuestion(questionIndex: number) {
       context.emit("navigate", questionIndex);
     }
 
+    function toggleInstructions() {
+      if (state.showInstructions == false) {
+        state.showInstructions = !state.showInstructions;
+        state.showPalette = !state.showPalette
+      }
+    };
+
+    function togglePalette() {
+      if (state.showPalette == false) {
+        state.showPalette = !state.showPalette;
+        state.showInstructions = !state.showInstructions;
+      }
+    }
     const legendSuccessText = computed(() =>
       props.hasQuizEnded ? "Correct" : "Answered"
     );
@@ -93,18 +160,47 @@ export default defineComponent({
 
     const legendPartialSuccessText = "Partially Correct"
 
-    const state = {
+    const showInstructionButton = computed(() => state.showInstructions == true)
+    const showPaletteButton = computed(() => state.showPalette == true)
+
+    const toggleInstructionsButtonClass = computed(() => [
+      {
+        "bg-primary": !showInstructionButton.value,
+        "bg-orange-300 hover:cursor-not-allowed": showInstructionButton.value,
+      },
+      `w-1/2 font-bold text-white p-2 px-4 bp-500:p-4 bp-500:px-6 rounded-lg sm:rounded-2xl shadow-xl border shadow-lg ring-primary`,
+    ]);
+
+    const togglePaletteButtonClass = computed(() => [
+      {
+        "bg-primary": !showPaletteButton.value,
+        "bg-orange-300 hover:cursor-not-allowed": showPaletteButton.value,
+      },
+      `w-1/2 font-bold text-white p-2 px-4 bp-500:p-4 bp-500:px-6 rounded-lg sm:rounded-2xl shadow-xl border shadow-lg ring-primary`,
+    ]);
+
+    const state = reactive({
       instructionTextClass:
         "text-lg md:text-xl lg:text-2xl mx-4 mt-2 leading-none text-slate-500",
       titleTextClass:
         "text-lg md:text-xl lg:text-2xl mx-4 mt-10 font-bold leading-tight whitespace-pre-wrap",
-    }
+      instructionsButtonClass:
+        "bg-gray-300 w-full font-bold ring-gray-500 p-2 px-4 bp-500:p-4 bp-500:px-6 rounded-lg sm:rounded-2xl shadow-xl",
+      showInstructions: false,
+      showPalette: true,
+    });
 
     return {
       ...state,
       navigateToQuestion,
+      toggleInstructions,
+      togglePalette,
       legendSuccessText,
       legendPartialSuccessText,
+      showInstructionButton,
+      showPaletteButton,
+      toggleInstructionsButtonClass,
+      togglePaletteButtonClass,
       legendErrorText,
       legendNeutralText,
     };
diff --git a/src/components/Questions/QuestionModal.vue b/src/components/Questions/QuestionModal.vue
index 536e0ab..d7fe046 100644
--- a/src/components/Questions/QuestionModal.vue
+++ b/src/components/Questions/QuestionModal.vue
@@ -52,6 +52,13 @@
         :questionSetTitle="questionSetTitle"
         :currentQuestionIndex="currentQuestionIndex"
         :questionSetStates="questionSetStates"
+        :title="title"
+        :subject="subject"
+        :testFormat="testFormat"
+        :maxMarks="maxMarks"
+        :maxQuestionsAllowedToAttempt="maxQuestionsAllowedToAttempt"
+        :quizTimeLimit="quizTimeLimit"
+        :numQuestions = "numQuestions"
         @option-selected="questionOptionSelected"
         @subjective-answer-entered="subjectiveAnswerUpdated"
         @numerical-answer-entered="numericalAnswerUpdated"
@@ -103,7 +110,8 @@ import {
   QuestionSetIndexLimits,
   questionSetPalette,
   TimeLimit,
-  quizTitleType
+  quizTitleType,
+  testFormat
 } from "../../types"
 import { useToast, POSITION } from "vue-toastification"
 const clonedeep = require("lodash.clonedeep");
@@ -179,7 +187,19 @@ export default defineComponent({
     title: {
       required: true,
       type: [null, String] as PropType<quizTitleType>,
-    }
+    },
+    subject: {
+      type: String,
+      required: true,
+    },
+    maxMarks: {
+      type: Number,
+      required: true
+    },
+    testFormat: {
+      type: [null, String] as PropType<testFormat>,
+      required: true
+    },
   },
   setup(props, context) {
     const state = reactive({
diff --git a/src/components/Splash.vue b/src/components/Splash.vue
index 54e209e..4cd4a40 100644
--- a/src/components/Splash.vue
+++ b/src/components/Splash.vue
@@ -60,9 +60,10 @@
         :subject="subject"
         :testFormat="testFormat"
         :maxMarks="maxMarks"
-        :max-questions-allowed-to-attempt="maxQuestionsAllowedToAttempt"
-        :quiz-time-limit="quizTimeLimit"
-        :questionSets = "questionSets"
+        :maxQuestionsAllowedToAttempt="maxQuestionsAllowedToAttempt"
+        :quizTimeLimit="quizTimeLimit"
+        :questionSetStates = "questionSetStates"
+        class="xl:mr-20 xl:ml-10 lg:mr-24 lg:ml-24 md:mr-48 md:ml-48 sm:mr-60 sm:ml-60"
     ></InstructionPage>
 
     <!-- start button -->
@@ -82,7 +83,7 @@
 import IconButton from "./UI/Buttons/IconButton.vue";
 import BaseIcon from "./UI/Icons/BaseIcon.vue";
 import { defineComponent, computed, reactive, toRefs, PropType } from "vue";
-import { IconButtonTitleConfig, quizType, quizTitleType, isFirstSessionType, QuestionSet, testFormat } from "../types";
+import { IconButtonTitleConfig, quizType, quizTitleType, isFirstSessionType, testFormat, questionSetPalette, TimeLimit } from "../types";
 import InstructionPage from "./InstructionPage.vue";
 export default defineComponent({
   name: "Splash",
@@ -121,16 +122,16 @@ export default defineComponent({
       required: true,
     },
     quizTimeLimit: {
-      type: Number,
-      required: true
+      type: Object as PropType<TimeLimit> || null,
+      default: null
     },
-    questionSets: {
-      required: true,
-      type: Array as PropType<QuestionSet[]>
+    questionSetStates: {
+      type: Array as PropType<questionSetPalette[]>,
+      default: () => []
     },
     testFormat: {
       type: [null, String] as PropType<testFormat>,
-      required: true
+      default: null
     },
     isFirstSession: {
       type: Boolean as PropType<isFirstSessionType>,
diff --git a/src/types.ts b/src/types.ts
index 51037d4..dea3a32 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -226,6 +226,7 @@ export interface questionSetPalette {
   title: string | null;
   paletteItems: paletteItemState[];
   instructionText: string;
+  instructionPageText?: string;
   maxQuestionsAllowedToAttempt: number;
 }
 
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 25bb85e..70b70f0 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -20,13 +20,12 @@
         :sessionEndTimeText="sessionEndTimeText"
         :numQuestions="maxQuestionsAllowedToAttempt"
         :quizType="metadata.quiz_type"
-        :quizTimeLimit="quizTimeLimit?.max"
+        :quizTimeLimit="quizTimeLimit"
         :maxMarks="maxMarks"
         :maxQuestionsAllowedToAttempt="maxQuestionsAllowedToAttempt"
         :testFormat="metadata.test_format || ''"
         :questions="questions"
         :questionSetStates="questionSetStates"
-        :questionSets = "questionSets"
         @start="startQuiz"
         data-test="splash"
       ></Splash>
@@ -77,6 +76,9 @@
         :timeRemaining="timeRemaining"
         :userId="userId"
         :title="title"
+        :subject="metadata.subject"
+        :testFormat="metadata.test_format || ''"
+        :maxMarks="maxMarks"
         v-model:currentQuestionIndex="currentQuestionIndex"
         v-model:responses="responses"
         v-model:previousResponse="previousResponse"
@@ -708,6 +710,8 @@ export default defineComponent({
         }
         // the below instruction assumes all questions within a set are of the same type
         let paletteInstructionText: string = state.questionSets[index].description ?? "";
+        // added instructionPageText variable for instructionPage component to not print extra information that is present in paletteInstructionText
+        const localInstructionPageText: string = state.questionSets[index].description ?? "";
 
         if (state.questionSets[index].max_questions_allowed_to_attempt < state.questionSets[index].questions.length) {
           paletteInstructionText += `\nYou may attempt only up to ${state.questionSets[index].max_questions_allowed_to_attempt} questions in this section.`
@@ -719,7 +723,8 @@ export default defineComponent({
           title: state.questionSets[index].title,
           paletteItems: states,
           instructionText: paletteInstructionText,
-          maxQuestionsAllowedToAttempt: state.questionSets[index].max_questions_allowed_to_attempt
+          instructionPageText: localInstructionPageText,
+          maxQuestionsAllowedToAttempt: state.questionSets[index].max_questions_allowed_to_attempt,
         })
       }
       return qsetStates
diff --git a/tests/unit/components/InstructionPage.spec.ts b/tests/unit/components/InstructionPage.spec.ts
index 6da505a..3e85b70 100644
--- a/tests/unit/components/InstructionPage.spec.ts
+++ b/tests/unit/components/InstructionPage.spec.ts
@@ -4,34 +4,42 @@ import InstructionPage from '@/components/InstructionPage.vue';
 describe('InstructionPage', () => {
   // When test_format is not 'full_syllabus_test'
   describe('when test_format is not FST', () => {
-    const testQuestionSets = [
+    const testTimeLimit = {
+      max: 10800,
+      min: 0
+    };
+    const testQuestionSetStates = [
       {
-        _id: "64bf709a8b60731c693290c1",
-        title: "Maths - Set 0",
-        description: "You may attempt all questions",
-        max_questions_allowed_to_attempt: 2,
-        questions: [
+        instructionPageText: "You may attempt 2 out of 5 questions",
+        instructionTest: "You may attempt all the questions",
+        maxQuestionsAllowedToAttempt: 2,
+        paletteItems: [
           {
-            _id: "64bf709a8b60731c693290c1",
+            index: 0,
+            value: "error"
           },
           {
-            _id: "64bf709a8b60731c693290c1",
+            index: 1,
+            value: "error"
           },
-        ]
+        ],
+        title: "Maths - Set 0",
       },
       {
-        _id: "64bf709a8b60731c693290c8",
-        title: "Maths - Set 1",
-        description: "You may attempt all questions",
-        max_questions_allowed_to_attempt: 2,
-        questions: [
+        instructionPageText: "You may attempt 2 out of 5 questions",
+        instructionTest: "You may attempt all the questions",
+        maxQuestionsAllowedToAttempt: 2,
+        paletteItems: [
           {
-            _id: "64bf709a8b60731c693290c1",
+            index: 0,
+            value: "error"
           },
           {
-            _id: "64bf709a8b60731c693290c1",
+            index: 1,
+            value: "error"
           },
-        ]
+        ],
+        title: "Maths - Set 1",
       },
       // Add more questionSets as needed
     ]
@@ -43,9 +51,9 @@ describe('InstructionPage', () => {
         maxQuestionsAllowedToAttempt: 3,
         grade: "8",
         maxMarks: 30,
-        quizTimeLimit: 10800,
         testFormat: "major_test",
-        questionSets: testQuestionSets,
+        quizTimeLimit: testTimeLimit,
+        questionSetStates: testQuestionSetStates,
       },
     });
 
@@ -64,34 +72,42 @@ describe('InstructionPage', () => {
   });
 
   describe('when test_format is FST', () => {
-    const testQuestionSets = [
+    const testTimeLimit = {
+      max: 10800,
+      min: 0
+    };
+    const testQuestionSetStates = [
       {
-        _id: "64bf709a8b60731c693290c1",
-        title: "Maths - Set 0",
-        description: "You may attempt all questions",
-        max_questions_allowed_to_attempt: 2,
-        questions: [
+        instructionPageText: "You may attempt 2 out of 5 questions",
+        instructionTest: "You may attempt all the questions",
+        maxQuestionsAllowedToAttempt: 2,
+        paletteItems: [
           {
-            _id: "64bf709a8b60731c693290c1",
+            index: 0,
+            value: "error"
           },
           {
-            _id: "64bf709a8b60731c693290c1",
+            index: 1,
+            value: "error"
           },
-        ]
+        ],
+        title: "Maths - Set 0",
       },
       {
-        _id: "64bf709a8b60731c693290c8",
-        title: "Maths - Set 1",
-        description: "You may attempt all questions",
-        max_questions_allowed_to_attempt: 2,
-        questions: [
+        instructionPageText: "You may attempt 2 out of 5 questions",
+        instructionTest: "You may attempt all the questions",
+        maxQuestionsAllowedToAttempt: 2,
+        paletteItems: [
           {
-            _id: "64bf709a8b60731c693290c1",
+            index: 0,
+            value: "error"
           },
           {
-            _id: "64bf709a8b60731c693290c1",
+            index: 1,
+            value: "error"
           },
-        ]
+        ],
+        title: "Maths - Set 1",
       },
       // Add more questionSets as needed
     ]
@@ -103,9 +119,9 @@ describe('InstructionPage', () => {
         maxQuestionsAllowedToAttempt: 3,
         grade: "8",
         maxMarks: 30,
-        quizTimeLimit: 10800,
+        quizTimeLimit: testTimeLimit,
         testFormat: "full_syllabus_test",
-        questionSets: testQuestionSets,
+        questionSetStates: testQuestionSetStates,
       },
     });
 
@@ -132,10 +148,10 @@ describe('InstructionPage', () => {
 
     it("displays instruction text for each set", () => {
       let questionSetIndex = 0;
-      expect(wrapper.find(`[data-test="questionSetInstruction-${questionSetIndex}"]`).text()).toBe("You may attempt all questions");
+      expect(wrapper.find(`[data-test="questionSetInstruction-${questionSetIndex}"]`).text()).toBe("You may attempt 2 out of 5 questions");
 
       questionSetIndex = 1;
-      expect(wrapper.find(`[data-test="questionSetInstruction-${questionSetIndex}"]`).text()).toBe("You may attempt all questions");
+      expect(wrapper.find(`[data-test="questionSetInstruction-${questionSetIndex}"]`).text()).toBe("You may attempt 2 out of 5 questions");
     });
 
     it("No. of questions need to be attempted for each set", () => {
diff --git a/tests/unit/components/Questions/Palette/QuestionPalette.spec.ts b/tests/unit/components/Questions/Palette/QuestionPalette.spec.ts
index df48b8b..116fc16 100644
--- a/tests/unit/components/Questions/Palette/QuestionPalette.spec.ts
+++ b/tests/unit/components/Questions/Palette/QuestionPalette.spec.ts
@@ -1,6 +1,31 @@
 import { mount } from "@vue/test-utils";
 import QuestionPalette from "@/components/Questions/Palette/QuestionPalette.vue";
 
+describe("Buttons in palette", () => {
+  const wrapper = mount(QuestionPalette);
+  it("Buttons are visible or not", () => {
+    expect(wrapper.find('[data-test="toggleInstructions"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test="togglePalette"]').exists()).toBeTruthy();
+  })
+
+  it("By default palette should be visible", async () => {
+    expect(wrapper.find('[data-test="instruction-page"]').exists()).toBe(false);
+    expect(wrapper.find('[data-test="question-palette"]').exists()).toBe(true);
+  })
+
+  it("instructions are visible when instruction button is clicked", async () => {
+    await wrapper.find('[data-test="toggleInstructions"]').trigger("click");
+    expect(wrapper.find('[data-test="instruction-page"]').exists()).toBe(true);
+    expect(wrapper.find('[data-test="question-palette"]').exists()).toBe(false);
+  });
+
+  it("palette is visible when palette button is clicked", async () => {
+    await wrapper.find('[data-test="togglePalette"]').trigger("click");
+    expect(wrapper.find('[data-test="question-palette"]').exists()).toBe(true);
+    expect(wrapper.find('[data-test="instruction-page"]').exists()).toBe(false);
+  });
+})
+
 describe("QuestionPalette.vue", () => {
   const wrapper = mount(QuestionPalette);
   it("renders div for quiz in progress", () => {