diff --git a/components.d.ts b/components.d.ts
index 9a37375..7e4a142 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,10 +7,9 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    ButtonRepo: typeof import('./src/components/ButtonRepo.vue')['default']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
-    MainMen: typeof import('./src/components/MainMen.vue')['default']
+    MainMenu: typeof import('./src/components/MainMenu.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/package.json b/package.json
index 8b25c55..c6e394f 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@headlessui/vue": "^1.6.7",
-    "@heroicons/vue": "^2.0.10",
+    "@heroicons/vue": "1.0.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 28fd4ce..123f08a 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <header>
         <div
             class="flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12"
         >
@@ -13,8 +13,10 @@
             <br />(Arts and Science)
             <br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
         </div>
-        <div class="flex justify-center">
-            <div class="flex bg-blue-900 h-8 w-11/12"></div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
+        <MainMenu />
+
+    </header>
+</template>
+
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
new file mode 100644
index 0000000..b4bf37e
--- /dev/null
+++ b/src/components/MainMenu.vue
@@ -0,0 +1,1316 @@
+
+<template>
+    <div class="container mx-auto">
+      <div
+        id="hidden_mnu"
+        class="flex justify-center gap-1 bg-blue-900 shadow-md"
+      >
+  
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+           ring-1 ring-black ring-opacity-5 text-white
+            hover:text-blue-800
+          ">
+            <router-link
+              to="/"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm text-white',
+              ]"
+            >
+              Home </router-link
+            >
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <router-link
+              to="/about-us"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              About </router-link
+            >
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <router-link
+              to="/notice"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Notice </router-link
+            >
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <router-link
+              to="/library"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Library </router-link
+            >
+          </MenuItem>
+        </Menu>
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Administration
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/governing-body"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Governing Body</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/composition-of-gb"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Composition of GB</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/staff"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Staff</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/working-hour"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Working Hour</router-link
+                  >
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Academics
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/departments"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Departments and Faculty</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Admission</router-link
+                        >
+                      </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/librarians"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Librarians</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/course-offered"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Course Offered
+                  </router-link>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/subject-combinantionhons"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Subject Combinantion(Hons)</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/subject-combinantiongen"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Subject Combinantion(Gen)
+                  </router-link>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/intake-capacity"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Intake Capacity</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/academic-calendar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Academic Calendar
+                  </router-link>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/prospectus"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Prospectus</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="Marks-Distribution"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Marks Distribution</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/result"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Result</router-link
+                  >
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Organizations
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/iqac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >IQAC</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/naac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NAAC</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/aqar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >AQAR</router-link
+                  >
+                </MenuItem>
+                <!-- <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/icc"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >ICC</router-link
+                  >
+                </MenuItem> -->
+                <!-- <MenuItem v-slot="{ active }">
+                                  <router-link to="/Teacher's-Council":class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-1 py-2 text-sm']">Teacher's Council</router-link>
+                              </MenuItem> -->
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/students-union"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Union</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/teachers-council"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Teacher's Council</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/alumni-association"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Alumni Association</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/activity-gallery"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Activity Gallery</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/gallery"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Image Gallery</router-link
+                  >
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Facilities
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/facilities"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Facilities</router-link
+                  >
+                </MenuItem>
+  
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/rti"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >RTI</router-link
+                  >
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+  
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Students
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/admission"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Admission</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/activities"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Activities</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/students-union"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Union</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/student-grievance"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Student Suggestions/Grievance</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/students-feedback"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's feedback</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/students-health-home"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Health Home</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/code-of-conduct"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Code of Conduct</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/holidays-list"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Holiday List</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/gallery"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Photo Gallery
+                  </router-link>
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <router-link
+              to="/contact"
+              :class="[
+                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Contact </router-link
+            >
+          </MenuItem>
+        </Menu>
+  
+      </div>
+      <div class="w-full h-8 bg-blue-700 fixed bottom-0" id="hidden_large">
+        <div>
+          <p></p>
+        </div>
+        <div class="overflow-hidden">
+          <label
+            class="
+              block
+              cursor-pointer
+              text-2xl text-center
+              font-semibold
+              text-white
+              bottom-0
+              right-0
+            "
+            for="mobile_mnu"
+          >
+            Menu</label
+          >
+          <input class="hidden" type="checkbox" id="mobile_mnu" />
+          <div class="mobile_menu bg-cyan-200 transition duration-150">
+            <!-- mobile_menu_item -->
+            <div class="bg-white">
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <router-Link to="/">Home</router-Link>
+                </button>
+              </div>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <router-Link to="/about-us">About Us</router-Link>
+                </button>
+              </div>
+              <Menu as="div" class="text-center">
+                <div>
+                  <MenuButton
+                    class="
+                      inline-flex
+                      justify-center
+                      w-full
+                      px-4
+                      py-2
+                      bg-white
+                      text-sm
+                      font-medium
+                      text-gray-700
+                      focus:outline-none
+                    "
+                  >
+                    Administration
+                    <ChevronDownIcon
+                      class="-mr-1 ml-2 h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </MenuButton>
+                </div>
+  
+                <div
+                  enter-active-class="transition ease-out duration-100"
+                  enter-from-class="transform opacity-0 scale-95"
+                  enter-to-class="transform opacity-100 scale-100"
+                  leave-active-class="transition ease-in duration-75"
+                  leave-from-class="transform opacity-100 scale-100"
+                  leave-to-class="transform opacity-0 scale-95"
+                >
+                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
+                    <div class="py-1">
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/governing-body"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Governing Body</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/composition-of-gb"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Composition of GB</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/staff"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Staff</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/working-hour"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Working Hour</router-link
+                        >
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <Menu as="div" class="text-center">
+                <div>
+                  <MenuButton
+                    class="
+                      inline-flex
+                      justify-center
+                      w-full
+                      px-4
+                      py-2
+                      bg-white
+                      text-sm
+                      font-medium
+                      text-gray-700
+                      focus:outline-none
+                    "
+                  >
+                    Academics
+                    <ChevronDownIcon
+                      class="-mr-1 ml-2 h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </MenuButton>
+                </div>
+  
+                <div
+                  enter-active-class="transition ease-out duration-100"
+                  enter-from-class="transform opacity-0 scale-95"
+                  enter-to-class="transform opacity-100 scale-100"
+                  leave-active-class="transition ease-in duration-75"
+                  leave-from-class="transform opacity-100 scale-100"
+                  leave-to-class="transform opacity-0 scale-95"
+                >
+                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
+                    <div class="py-1">
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="#"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Departments and Faculty</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="ug-admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >UG Admission</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/librarians"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Librarians</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/course-offered"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Course Offered
+                        </router-link>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/subject-combinantionhons"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Subject Combinantion(Hons)</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/Subject-combinantiongen"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Subject Combinantion(Gen)
+                        </router-link>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/intake-capacity"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Intake Capacity</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/academic-calendar"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Academic Calendar
+                        </router-link>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/prospectus"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Prospectus</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="Marks-Distributionyarn"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Marks Distribution</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/result"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Result</router-link
+                        >
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <Menu as="div" class="text-center">
+                <div>
+                  <MenuButton
+                    class="
+                      inline-flex
+                      justify-center
+                      w-full
+                      px-4
+                      py-2
+                      bg-white
+                      text-sm
+                      font-medium
+                      text-gray-700
+                      focus:outline-none
+                    "
+                  >
+                    Organizations
+                    <ChevronDownIcon
+                      class="-mr-1 ml-2 h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </MenuButton>
+                </div>
+  
+                <div
+                  enter-active-class="transition ease-out duration-100"
+                  enter-from-class="transform opacity-0 scale-95"
+                  enter-to-class="transform opacity-100 scale-100"
+                  leave-active-class="transition ease-in duration-75"
+                  leave-from-class="transform opacity-100 scale-100"
+                  leave-to-class="transform opacity-0 scale-95"
+                >
+                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
+                    <div class="py-1">
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/iqac"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >IQAC</router-link
+                        >
+                      </MenuItem>
+                      <!-- <MenuItem v-slot="{ active }">
+                                              <router-link to="/Teacher's-Council":class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-1 py-2 text-sm']">Teacher's Council</router-link>
+                                          </MenuItem> -->
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/students-union"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Union</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/alumni-association"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Alumni Association</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/activity-gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Activity Gallery</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Image Gallery</router-link
+                        >
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <router-Link to="/facilities">Facilities</router-Link>
+                </button>
+              </div>
+  
+              <Menu as="div" class="text-center">
+                <div>
+                  <MenuButton
+                    class="
+                      inline-flex
+                      justify-center
+                      w-full
+                      px-4
+                      py-2
+                      bg-white
+                      text-sm
+                      font-medium
+                      text-gray-700
+                      focus:outline-none
+                    "
+                  >
+                    Students
+                    <ChevronDownIcon
+                      class="-mr-1 ml-2 h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </MenuButton>
+                </div>
+  
+                <div
+                  enter-active-class="transition ease-out duration-100"
+                  enter-from-class="transform opacity-0 scale-95"
+                  enter-to-class="transform opacity-100 scale-100"
+                  leave-active-class="transition ease-in duration-75"
+                  leave-from-class="transform opacity-100 scale-100"
+                  leave-to-class="transform opacity-0 scale-95"
+                >
+                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
+                    <div class="py-1">
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Admission</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/activities"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Activities</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/students-union"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Union</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/student-grievance"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Student Suggestions/Grievance</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/students-feedback"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's feedback</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/students-health-home"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Health Home</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/code-of-conduct"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Code of Conduct</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/holidays-list"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Holiday List</router-link
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <router-link
+                          to="/gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Photo Gallery
+                        </router-link>
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <router-Link to="/library">Library</router-Link>
+                </button>
+              </div>
+  
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <router-Link to="/contact">Contact</router-Link>
+                </button>
+              </div>
+            </div>
+            <div
+              class="
+                w-full
+                bg-blue-700
+                text-white text-2xl
+                font-semibold
+                text-center
+              "
+            >
+              <label
+                class="block cursor-pointer right-0 dark:text-white"
+                for="mobile_mnu"
+                >close</label
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <style scoped>
+  @media only screen and (max-width: 600px) {
+    #hidden_mnu {
+      display: none;
+    }
+  }
+  @media only screen and (min-width: 600px) {
+    #hidden_large {
+      display: none;
+    }
+  }
+  
+  .mobile_mnu {
+    color: red;
+  }
+  .mobile_menu {
+    display: none;
+    position: absolute;
+    width: 0;
+    bottom: -1000px;
+    transition-duration: 3s ease-in;
+    transition: width 2s;
+  }
+  #mobile_mnu:checked ~ .mobile_menu {
+    display: block;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+  </style>
+  
+  <script setup>
+  import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+  import { ChevronDownIcon } from '@heroicons/vue/solid'
+  </script>
\ No newline at end of file
diff --git a/src/pages/[id].vue b/src/pages/[id].vue
index ecc4cef..08e3d4b 100644
--- a/src/pages/[id].vue
+++ b/src/pages/[id].vue
@@ -4,7 +4,7 @@
         <h2>Loading ...</h2>
     </div>
     <div v-else>
-        <div v-html="page[0].content" class="container">
+        <div v-html="page[0].content" class="container mx-auto">
 
         </div>
     </div>
diff --git a/yarn.lock b/yarn.lock
index 49c268a..4859211 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -46,10 +46,10 @@
   resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.3.tgz#116d13391552436ea1e9e88c69f0e9d7d2585c45"
   integrity sha512-Is4iakKts9u9E0+jEZNzoJpBjwq2SamwEIoEl2RlyYSu6Zco536GsPXaQEfg/o7Eyc1GUUlcL+dJd4Rt7qyf7A==
 
-"@heroicons/vue@^2.0.10":
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-2.0.12.tgz#45b97946731721269dd4141035af338a1ef88f35"
-  integrity sha512-ypuQl/Wei7BoShO65AdRVikXDaSt6hJBRuKs2pVd/6HvxfEz18oXraH+J5G/QPIwObMEVhMb6nkOs9l3WZv/gA==
+"@heroicons/vue@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-1.0.6.tgz#d8b90734b436eb5a87f40cc300b64a0fb0031f7f"
+  integrity sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"