diff --git a/package.json b/package.json
index 444b88b..7cfaeaf 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
   "dependencies": {
     "@astrojs/tailwind": "^2.1.3",
     "@astrojs/vue": "^1.2.2",
+    "@headlessui/vue": "^1.7.13",
+    "@heroicons/vue": "1.0.6",
     "astro": "^1.7.2",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45"
diff --git a/public/img/1.jpg b/public/img/1.jpg
new file mode 100644
index 0000000..4eacd0d
Binary files /dev/null and b/public/img/1.jpg differ
diff --git a/public/img/10.jpg b/public/img/10.jpg
new file mode 100644
index 0000000..7047c63
Binary files /dev/null and b/public/img/10.jpg differ
diff --git a/public/img/11.jpg b/public/img/11.jpg
new file mode 100644
index 0000000..91effef
Binary files /dev/null and b/public/img/11.jpg differ
diff --git a/public/img/12.jpg b/public/img/12.jpg
new file mode 100644
index 0000000..1c515aa
Binary files /dev/null and b/public/img/12.jpg differ
diff --git a/public/img/13.jpg b/public/img/13.jpg
new file mode 100644
index 0000000..5324f69
Binary files /dev/null and b/public/img/13.jpg differ
diff --git a/public/img/14.jpg b/public/img/14.jpg
new file mode 100644
index 0000000..0825363
Binary files /dev/null and b/public/img/14.jpg differ
diff --git a/public/img/15.jpeg b/public/img/15.jpeg
new file mode 100644
index 0000000..25e8d2c
Binary files /dev/null and b/public/img/15.jpeg differ
diff --git a/public/img/16.jpeg b/public/img/16.jpeg
new file mode 100644
index 0000000..cc739f1
Binary files /dev/null and b/public/img/16.jpeg differ
diff --git a/public/img/17.jpeg b/public/img/17.jpeg
new file mode 100644
index 0000000..53eb02e
Binary files /dev/null and b/public/img/17.jpeg differ
diff --git a/public/img/18.jpeg b/public/img/18.jpeg
new file mode 100644
index 0000000..e8c71de
Binary files /dev/null and b/public/img/18.jpeg differ
diff --git a/public/img/19.jpeg b/public/img/19.jpeg
new file mode 100644
index 0000000..5c40767
Binary files /dev/null and b/public/img/19.jpeg differ
diff --git a/public/img/2.jpg b/public/img/2.jpg
new file mode 100644
index 0000000..c4d27fc
Binary files /dev/null and b/public/img/2.jpg differ
diff --git a/public/img/20.jpeg b/public/img/20.jpeg
new file mode 100644
index 0000000..eeabe7d
Binary files /dev/null and b/public/img/20.jpeg differ
diff --git a/public/img/21.jpeg b/public/img/21.jpeg
new file mode 100644
index 0000000..fba8b6e
Binary files /dev/null and b/public/img/21.jpeg differ
diff --git a/public/img/22.jpg b/public/img/22.jpg
new file mode 100644
index 0000000..246ce85
Binary files /dev/null and b/public/img/22.jpg differ
diff --git a/public/img/23.jpg b/public/img/23.jpg
new file mode 100644
index 0000000..494129b
Binary files /dev/null and b/public/img/23.jpg differ
diff --git a/public/img/24.jpg b/public/img/24.jpg
new file mode 100644
index 0000000..be3fcfb
Binary files /dev/null and b/public/img/24.jpg differ
diff --git a/public/img/25.jpg b/public/img/25.jpg
new file mode 100644
index 0000000..ffaec6a
Binary files /dev/null and b/public/img/25.jpg differ
diff --git a/public/img/26.jpg b/public/img/26.jpg
new file mode 100644
index 0000000..29a5bf8
Binary files /dev/null and b/public/img/26.jpg differ
diff --git a/public/img/27.jpg b/public/img/27.jpg
new file mode 100644
index 0000000..1b15c47
Binary files /dev/null and b/public/img/27.jpg differ
diff --git a/public/img/28.jpg b/public/img/28.jpg
new file mode 100644
index 0000000..fa38880
Binary files /dev/null and b/public/img/28.jpg differ
diff --git a/public/img/29.jpg b/public/img/29.jpg
new file mode 100644
index 0000000..7c78bc2
Binary files /dev/null and b/public/img/29.jpg differ
diff --git a/public/img/3.jpg b/public/img/3.jpg
new file mode 100644
index 0000000..00dfb7e
Binary files /dev/null and b/public/img/3.jpg differ
diff --git a/public/img/30.jpg b/public/img/30.jpg
new file mode 100644
index 0000000..fcd36fd
Binary files /dev/null and b/public/img/30.jpg differ
diff --git a/public/img/31.jpg b/public/img/31.jpg
new file mode 100644
index 0000000..0c8d5de
Binary files /dev/null and b/public/img/31.jpg differ
diff --git a/public/img/32.jpg b/public/img/32.jpg
new file mode 100644
index 0000000..95b0a5c
Binary files /dev/null and b/public/img/32.jpg differ
diff --git a/public/img/33.jpg b/public/img/33.jpg
new file mode 100644
index 0000000..ba3d010
Binary files /dev/null and b/public/img/33.jpg differ
diff --git a/public/img/34.jpg b/public/img/34.jpg
new file mode 100644
index 0000000..c823a15
Binary files /dev/null and b/public/img/34.jpg differ
diff --git a/public/img/35.jpg b/public/img/35.jpg
new file mode 100644
index 0000000..0a8a4ea
Binary files /dev/null and b/public/img/35.jpg differ
diff --git a/public/img/36.jpg b/public/img/36.jpg
new file mode 100644
index 0000000..25a1ca5
Binary files /dev/null and b/public/img/36.jpg differ
diff --git a/public/img/4.jpg b/public/img/4.jpg
new file mode 100644
index 0000000..2484860
Binary files /dev/null and b/public/img/4.jpg differ
diff --git a/public/img/5.jpg b/public/img/5.jpg
new file mode 100644
index 0000000..16cc92e
Binary files /dev/null and b/public/img/5.jpg differ
diff --git a/public/img/6.jpg b/public/img/6.jpg
new file mode 100644
index 0000000..c8b6d04
Binary files /dev/null and b/public/img/6.jpg differ
diff --git a/public/img/7.jpg b/public/img/7.jpg
new file mode 100644
index 0000000..07b29cd
Binary files /dev/null and b/public/img/7.jpg differ
diff --git a/public/img/8.jpg b/public/img/8.jpg
new file mode 100644
index 0000000..ab61548
Binary files /dev/null and b/public/img/8.jpg differ
diff --git a/public/img/9.jpg b/public/img/9.jpg
new file mode 100644
index 0000000..a972ac0
Binary files /dev/null and b/public/img/9.jpg differ
diff --git a/public/img/clg.jpg b/public/img/clg.jpg
new file mode 100755
index 0000000..7e2f8c3
Binary files /dev/null and b/public/img/clg.jpg differ
diff --git a/public/img/clg_grdnt.jpg b/public/img/clg_grdnt.jpg
new file mode 100755
index 0000000..7047c63
Binary files /dev/null and b/public/img/clg_grdnt.jpg differ
diff --git a/public/img/clgprin.jpg b/public/img/clgprin.jpg
new file mode 100755
index 0000000..67b68f3
Binary files /dev/null and b/public/img/clgprin.jpg differ
diff --git a/public/img/favicon.ico b/public/img/favicon.ico
new file mode 100755
index 0000000..965c770
Binary files /dev/null and b/public/img/favicon.ico differ
diff --git a/public/img/logo3.png b/public/img/logo3.png
new file mode 100755
index 0000000..e5e2f9b
Binary files /dev/null and b/public/img/logo3.png differ
diff --git a/src/components/DocumentsPage.vue b/src/components/DocumentsPage.vue
new file mode 100644
index 0000000..5091730
--- /dev/null
+++ b/src/components/DocumentsPage.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="container bg-white mx-auto  text-blue-900 leading-loose text-xl">
+        <!-- <h2 class="text-2xl text-blue-900">All pages having Documents / file Attachments are listed below:</h2> -->
+        <br>
+        <br>
+        <br>
+        <div v-if="isLoading">
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Loading ...</h2>
+        </div>
+        <div v-else>
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Documents</h2>
+            <div  v-for="(item, index) in page" >
+                <a :href="'/documents/'+item.slug"> <h3> {{item.title}}</h3> </a>
+                
+
+           
+                
+
+            </div>
+            <!-- <div v-html="page[0].content" class="container mx-auto"></div> -->
+        </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+        data() {
+            return {
+                page: null,
+                isLoading: true
+            }
+        },
+        mounted: function () {
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=documents&limit=-1')
+            // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
+                .then(response => response.json())
+                .then(data => {
+              this.page = data.data
+            //   console.log(data)
+              this.isLoading = false
+            })
+        }
+    }
+    </script>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 4cf1eb6..02e7a27 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,36 +1,84 @@
-<template>
-  <footer>
-      <div>
-          <div
-              class="grid grid-cols-1 md:grid-cols-3 bg-stone-600 "
-          >
-              <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Important Links<hr class="blue-400">
-                  <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
-                      <router-link to="/gallery">Gallery <hr class="border-slate-900"></router-link>
-                      <a href="/notice">Notice <hr class="border-slate-900"></a>
-                      <a href="/documents">Documents</a>
-                  </div>
-                  </div>
-              <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Related Sites<hr>
-                  <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
-                      <a href="https://www.wbsubregistration.org/">W.B.S.U<hr class="border-slate-900"></a>
-                      <a href="https://www.ugc.ac.in/">U.G.C.<hr class="border-slate-900"></a>
-                      <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
-                  </div>
-              </div>
-              <div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Document Links <hr>
-                  <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
-                      <router-link to="/documents/aqar">AQAR<hr class="border-slate-900"></router-link>
-                      <router-link to="/documents/iqac">IQAC<hr class="border-slate-900"></router-link>
-                      <router-link to="/documents/academic-calendar">Academic Calendar</router-link>
-                  </div>
-              </div>
-          </div>
-          <div class="grid grid-cols-1 md:grid-cols-3 bg-stone-600 place-items-center text-gray-100 -mt-4 ">
-              <a href=""><div class="">© sreechaitanyacollege.in <hr> </div></a>
-              <a href="https://dwd.siliconpin.com"><div class="">	Powered by DWD Consultancy Services  <hr></div></a>
-              <a href=""><div class=""> Count 112964  | Site Performance  <hr> </div></a>
-          </div>
-      </div>
-  </footer>
-</template>
\ No newline at end of file
+---
+import FooterComponent from "./FooterComponent.vue"
+// const notice = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice');
+// const noticeJson = await notice.json();
+// const noticeData = noticeJson.data.reverse();
+// console.log(noticeData)
+---
+<!-- <section class="container mx-auto px-4 my-6">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-4">
+        <div class="grid border-4 border-blue-700 rounded-xl ">
+            <p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold  "><span class="underline decoration-4 decoration-[#7c4c23]">Latest Updates</span><span class="shape text-2xl font-bold p-1 rounded-full h-fit">*</span></p>
+            <div class="flex flex-col h-[250px] h-fit overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
+                {
+                    noticeData.map((data : {title : string | undefined; slug : string | undefined} )=>
+                    <a target="_blank" href={'/notice/'+data.slug} class="px-6 text-xl text-blue-700 hover:underline">{data.title}</a>
+                    )
+                }
+            </div>
+            <a href="/notice" class="flex justify-end bg-blue-50 pt-2"> <span class="bg-blue-700 text-white px-4 py-2 rounded-tl-md font-bold">View All</span> </a>
+        </div>
+        <div class="grid border-4 border-blue-700 rounded-xl h-fit">
+            <p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold underline decoration-4 decoration-[#7c4c23]">Important Links</p>
+            <div class="flex flex-col h-[300px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
+                <a target="_blank" href="/gallery" class="px-6 text-xl text-blue-700 hover:underline">Gallery</a>
+                <a target="_blank" href="/notice" class="px-6 text-xl text-blue-700 hover:underline">Notice</a>
+                <a target="_blank" href="/documents" class="px-6 text-xl text-blue-700 hover:underline">Documents</a>
+                <a target="_blank" href="/documents/aqar" class="px-6 text-xl text-blue-700 hover:underline">AQAR</a>
+                <a target="_blank" href="/documents/iqac" class="px-6 text-xl text-blue-700 hover:underline">IQAC</a>
+                <a target="_blank" href="/documents/academic-calendar" class="px-6 text-xl text-blue-700 hover:underline">Academic Calendar</a>
+                <a target="_blank" href="https://www.wbsuexams.net" class="px-6 text-xl text-blue-700 hover:underline">West Bengal State University</a>
+                <a target="_blank" href="https://www.ugc.gov.in" class="px-6 text-xl text-blue-700 hover:underline">University Grants Commission</a>
+                <a target="_blank" href="https://banglaruchchashiksha.wb.gov.in/" class="px-6 text-xl text-blue-700 hover:underline">W.B.H.E.D</a>
+            </div>
+        </div>
+        
+    </div>
+</section> -->
+<section class="">
+    <FooterComponent client:visible />
+</section>
+<!-- <div class="container-fluid bg-stone-600">
+    <div class="">
+        <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 bg-stone-600">
+            <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Other's Links<hr class="blue-400">
+                <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
+                    <a href="/gallery">Gallery <hr class="border-slate-900"></a>
+                    <a href="/notice">Notice <hr class="border-slate-900"></a>
+                    <a href="/documents">Documents</a>
+                </div>
+            </div>
+            <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Related Sites<hr>
+                <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
+                    <a href="https://www.wbsubregistration.org/">W.B.S.U<hr class="border-slate-900"></a>
+                    <a href="https://www.ugc.ac.in/">U.G.C.<hr class="border-slate-900"></a>
+                    <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
+                </div>
+            </div>
+            <div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Document Links <hr>
+                <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
+                    <a href="/documents/aqar">AQAR<hr class="border-slate-900"></a>
+                    <a href="/documents/iqac">IQAC<hr class="border-slate-900"></a>
+                    <a href="/documents/academic-calendar">Academic Calendar</a>
+                </div>
+            </div>
+        </div>
+        <div class="container mx-auto px-4 flex flex-col md:flex-row place-items-center md:place-content-between bg-stone-600 text-gray-100 -mt-4 ">
+            <a href=""><span class="">© sreechaitanyacollege.in <hr> </span></a>
+            <a href="https://dwd.siliconpin.com"><span class="">Powered by DWD Consultancy Services  <hr></span></a>
+            <a href=""><span class=""> Count 112964  | Site Performance  <hr> </span></a>
+        </div>
+    </div>
+</div> -->
+<style>
+    .shape {
+        -webkit-animation: shape 3ss forwards;
+        animation: shape 2s infinite;
+        color: rgb(255, 0, 0);
+    }
+    @keyframes shape {
+        50%{color: red(187, 224, 85); }
+        50%{color: rgb(255, 255, 255); }
+        /* 50%{color: rgb(0, 255, 34);} */
+    }
+</style>
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
new file mode 100644
index 0000000..2a47cf8
--- /dev/null
+++ b/src/components/FooterComponent.vue
@@ -0,0 +1,109 @@
+<template>
+    <section class="container mx-auto px-4 my-6">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-4">
+        <div class="grid border-4 border-blue-700 rounded-xl ">
+            <p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold"><span class="underline decoration-4 decoration-[#7c4c23]">Latest Updates</span><span class="shape text-2xl font-bold p-1 rounded-full h-fit">*</span></p>
+            <div  class="flex flex-col h-[250px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
+                    <a v-for="data in notice" :key="notice.id" target="_blank" :href="'/notice/'+data.slug" class="px-6 text-xl text-blue-700 hover:underline">{{data.title}}</a>
+            </div>
+            <a href="/notice" class="flex justify-end bg-blue-50 pt-2"> <span class="bg-blue-700 text-white px-4 py-2 rounded-tl-md font-bold">View All</span> </a>
+        </div>
+        <div class="grid border-4 border-blue-700 rounded-xl h-fit">
+            <p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold underline decoration-4 decoration-[#7c4c23]">Important Links</p>
+            <!-- <p class="text-center text-xl py-4"><span class="shape px-2 text-blue-700 rounded-md">New</span> <a class="hover:underline" href="https://online.rgyci.org"></a></p> -->
+            <div class="flex flex-col h-[300px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
+                
+                <a v-for="data in important" :key="important.id" target="_blank" :href="'/'+data.slug" class="px-6 text-xl text-blue-700 hover:underline">{{data.title}}</a>
+                <!-- <a target="_blank" href="/notice" class="px-6 text-xl text-blue-700 hover:underline">Notice</a>
+                <a target="_blank" href="/documents" class="px-6 text-xl text-blue-700 hover:underline">Documents</a>
+                <a target="_blank" href="/documents/aqar" class="px-6 text-xl text-blue-700 hover:underline">AQAR</a>
+                <a target="_blank" href="/documents/iqac" class="px-6 text-xl text-blue-700 hover:underline">IQAC</a>
+                <a target="_blank" href="/documents/academic-calendar" class="px-6 text-xl text-blue-700 hover:underline">Academic Calendar</a>
+                <a target="_blank" href="https://www.wbsuexams.net" class="px-6 text-xl text-blue-700 hover:underline">West Bengal State University</a>
+                <a target="_blank" href="https://www.ugc.gov.in" class="px-6 text-xl text-blue-700 hover:underline">University Grants Commission</a>
+                <a target="_blank" href="https://banglaruchchashiksha.wb.gov.in/" class="px-6 text-xl text-blue-700 hover:underline">W.B.H.E.D</a> -->
+            </div>
+            <!-- <a href="/important" class="flex justify-end bg-blue-50 pt-2"><span class="bg-blue-700 text-white px-4 py-2 rounded-tl-md font-bold">View All</span> </a> -->
+        </div>
+        
+    </div>
+</section>
+<div class="container-fluid bg-stone-600">
+    <div class="">
+        <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 bg-stone-600">
+            <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Other's Links<hr class="blue-400">
+                <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
+                    <a href="/gallery">Gallery <hr class="border-slate-900"></a>
+                    <a href="/notice">Notice <hr class="border-slate-900"></a>
+                    <a href="/documents">Documents</a>
+                </div>
+            </div>
+            <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Related Sites<hr>
+                <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
+                    <a href="https://www.wbsubregistration.org/">W.B.S.U<hr class="border-slate-900"></a>
+                    <a href="https://www.ugc.ac.in/">U.G.C.<hr class="border-slate-900"></a>
+                    <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
+                </div>
+            </div>
+            <div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Document Links <hr>
+                <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
+                    <a href="/documents/aqar">AQAR<hr class="border-slate-900"></a>
+                    <a href="/documents/iqac">IQAC<hr class="border-slate-900"></a>
+                    <a href="/documents/academic-calendar">Academic Calendar</a>
+                </div>
+            </div>
+        </div>
+        <div class="container mx-auto px-4 flex flex-col md:flex-row place-items-center md:place-content-between bg-stone-600 text-gray-100 -mt-4 ">
+            <a href=""><span class="">© sreechaitanyacollege.in <hr> </span></a>
+            <a href="https://dwd.siliconpin.com"><span class="">Powered by DWD Consultancy Services  <hr></span></a>
+            <a href=""><span class=""> Count 112964  | Site Performance  <hr> </span></a>
+        </div>
+    </div>
+</div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            notice: null,
+            important: null,
+            isLoading: true,
+            lpModal:false,
+
+
+        }
+    },
+    methods: {   
+    },
+    mounted: function () {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice')
+            .then(resp => resp.json())
+            .then(data => {
+                this.notice=data.data.reverse();
+                // console.log(this.dailyplan)
+            }),
+            fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[position][_eq]=important')
+            .then(resp => resp.json())
+            .then(data => {
+                this.important=data.data.reverse()
+                // console.log(this.dailyplan)
+            })
+            
+            }
+       
+        }
+    
+</script>
+<style>
+    .shape {
+        -webkit-animation: shape 3ss forwards;
+        animation: shape 2s infinite;
+        color: rgb(255, 0, 0);
+    }
+    @keyframes shape {
+        50%{color: red(187, 224, 85); }
+        50%{color: rgb(255, 255, 255); }
+        /* 50%{color: rgb(0, 255, 34);} */
+    }
+</style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..0fed970
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,19 @@
+<main>
+    <header>
+        <div class="lg:hidden grid grid-cols-6 bg-blue-700 place-items-center text-white">
+            <div class="grid col-span-1 "> <a href="/"><img class="w-16" src="/img/logo3.png" alt="Sree Chaitanya College,Habra "/></a> </div>
+            <div class="grid col-span-4 ">SREE CHAITANYA COLLEGE</div>
+            <!-- <div class="grid col-span-1 "><button class="hover:bg-white hover:text-blue-700 rounded-md p-1">Log In</button></div> -->
+        </div>
+        <div
+            class="hidden lg:block flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12">
+            <a href="/"><img src="/img/logo3.png" alt="Sree Chaitanya College,Habra" class="absolute left-0 top-0 h-44 w-44 mt-2 ml-14 text-base "
+                /></a>
+            Estd.-1956
+            <br />Sree Chaitanya College,Habra
+            <br />(Arts and Science)
+            <br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
+        </div>
+        <!-- <Menu /> -->
+    </header>
+</main>
diff --git a/src/components/MainMenu.astro b/src/components/MainMenu.astro
new file mode 100644
index 0000000..b536b37
--- /dev/null
+++ b/src/components/MainMenu.astro
@@ -0,0 +1,303 @@
+
+<main>
+  <section class="container-fluid" style="background-color: #173382;"> 
+    <div class="navbar shadow-xl zindex xl:container xl:mx-auto">
+ 
+      <!-- Navbar logo -->
+      <div class="nav-header">
+        <div class="nav-logo">
+        </div>
+      </div>
+   
+      <!-- responsive navbar toggle button -->
+      <input type="checkbox" id="nav-check">
+      <div class="nav-btn">
+        <label for="nav-check">
+          <span></span>
+          <span></span>
+          <span></span>
+        </label>
+      </div>
+   
+      <!-- Navbar items -->
+      <div class="nav-links">
+        <a href="/">Home</a>|
+        <a href="/about-us">About</a>|
+        <a href="/contact-us">Contact Us</a>|
+        <a href="/notice">Notice</a>|
+        <a href="/library">Library</a>|
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Administration
+            <i class="fas fa-angle-down"></i>
+          </a>|
+          <div class="drop-content" >
+            <a href="/governing-body">Governing Body</a>
+            <a href="/composition-of-gb">Composition of GB</a>
+            <a href="/staff">Staff</a>
+            <a href="/working-hour">Working Hour</a>
+          </div>
+        </div>
+        <!-- <a href="https://center.rgyci.org/center_list">Center List</a> -->
+        <!-- Dropdown menu -->
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Academics
+            <i class="fas fa-angle-down"></i>
+          </a>|
+          <div class="drop-content">
+            <a href="/departments">Departments & Faculty</a>
+            <a href="/admission">Admission</a>
+            <a href="/librarians">Librarians</a>
+            <a href="/course-offered">Course Offered</a>
+            <a href="/subject-combinationhons">Subject Combination(Hons)</a>
+            <a href="/subject-combinationgen">Subject Combination(Gen)</a>
+            <a href="/intake-capacity">Intake Capacity</a>
+            <a href="/academic-calender">Academic Calendar</a>
+            <a href="/prospectus">Prospectus</a>
+            <a href="/Marks-Distribution">Marks Distribution</a>
+            <a href="/result">Result</a>             
+          </div>
+        </div>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Organizations
+            <i class="fas fa-angle-down"></i>
+          </a>|
+          <div class="drop-content">
+            <a href="/iqac">IQAC</a>
+            <a href="/naac">NAAC</a>
+            <a href="/nirf-data">NIRF</a>
+            <a href="/aqar">AQAR</a>
+            <a href="/students-union">Student's Union</a>
+            <a href="/teachers-council">Teacher's Council</a>
+            <a href="/alumni-association">Alumni Association</a>
+            <a href="/gallery">Image Gallery</a>            
+          </div>
+        </div>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Facilities
+            <i class="fas fa-angle-down"></i>
+          </a>|
+          <div class="drop-content">
+            <a href="/facilities">Facilities</a>
+            <a href="/rti">RTI</a>           
+          </div>
+        </div>
+        <div class="dropdown">
+            <a class="dropBtn" href="#">Students
+              <i class="fas fa-angle-down"></i>
+            </a>
+            <div class="drop-content">
+                <a href="/admission">Admission</a>
+                <a href="/activities">Activities</a>
+                <a href="/students-union">Student's Union</a>
+                <a href="/student-grievance">Students Suggestion / Grievance</a>
+                <a href="/students-feedback">Student's Feedback</a>
+                <a href="/students-health-home">Student's Health Home</a>
+                <a href="/code-of-conduct">Code of Conduct</a>
+                <a href="/holiday-list">Holiday List</a>
+                <a href="/gallery">Image Gallery</a>         
+            </div>
+        </div>
+
+        <!-- <div class="dropdown">
+          <a class="dropBtn" href="#">Login
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="https://center.rgyci.org/form/teacher_login">Teacer</a>
+            <a href="https://center.rgyci.org/form/center_login">Students</a>
+          </div>
+        </div> -->
+      </div>
+      
+    </div>
+  </section>
+    
+</main>
+<script is:inline>
+</script>
+<style>
+  .drop-content {
+    color: black;
+    width: fit-content;
+  }
+    .zindex {
+        z-index: 1;
+    }
+    *{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body{
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
+  background-image: url(background-img.jpg);
+  background-size: cover;
+  background-attachment: fixed;
+}
+.navbar{
+  height: 70px;
+  width: 100%;
+  padding: 25px 10px;
+  background-color: #173382;
+  position: relative;
+}
+.navbar .nav-header{
+  display: inline;
+}
+.navbar .nav-header .nav-logo{
+  display: inline-block;
+  margin-top: -7px;
+}
+.navbar .nav-links{
+  display: inline;
+  float: right;
+  font-size: 16px;
+}
+ 
+.navbar .nav-links .loginBtn{
+  display: inline-block;
+  padding: 5px 15px;
+  margin-left: 20px;
+  font-size: 17px;
+  color: rgb(255, 255, 255);
+}
+.navbar .nav-links a {
+  border-radius: 5px;
+  /* background-color: #0ea5e930; */
+  width: 100%;
+  padding: 10px 4px;
+  width: fit-content;
+  text-decoration: none;
+  font-weight: 550;
+  color: white;
+}
+/* Hover effects */
+.navbar .nav-links a:hover{
+  background-color: #0ea5e950;
+  width: 100%;
+  border-radius: 10px;
+}
+ 
+/* responsive navbar toggle button */
+.navbar #nav-check, .navbar .nav-btn{
+  display: none;
+}
+ 
+@media (max-width:960px) {
+  .navbar .nav-btn{
+    display: inline-block;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+  .navbar .nav-btn label {
+    display: inline-block;
+    width: 80px;
+    height: 70px;
+    padding: 25px;
+  }
+  .navbar .nav-btn label span {
+    display: block;
+    height: 10px;
+    width: 25px;
+    border-top: 3px solid #eee;
+  }
+  .navbar .nav-btn label:hover, .navbar #nav-check:checked ~ .nav-btn label {
+    background-color: rgb(9, 14, 90);
+    transition: all 0.5s ease;
+  }
+  .navbar .nav-links{
+    position: absolute;
+    display: block;
+    text-align: center;
+    width: 100%;
+    background-color: rgb(9, 14, 90);
+    transition: all 0.3s ease-in;
+    overflow-y: hidden;
+    top: 70px;
+    right: 0px;
+  }
+  .navbar .nav-links a {
+    display: block;
+  }
+ 
+  /* when nav toggle button not checked */
+  .navbar #nav-check:not(:checked) ~ .nav-links {
+    height: 0px;
+  }
+ 
+  /* when nav toggle button is checked */
+  .navbar #nav-check:checked ~ .nav-links {
+    height: fit-content;
+    overflow-y: auto;
+  }
+  .navbar .nav-links .loginBtn {
+    padding: 10px 40px ;
+    margin: 20px;
+    font-size:  18px;
+    font-weight: bold;
+    color: rgb(9, 14, 90);
+  }
+  /* Responsive dropdown code */
+  .navbar .nav-links .dropdown, .navbar .nav-links .dropdown2 {
+    float: none;
+    width: 100%;
+  }
+  .navbar .nav-links .drop-content, .navbar .nav-links .drop-content2 {
+    position: relative;
+    background-color: rgb(220, 220, 250);
+    top: 0px;
+    left: 0px;
+  }
+  /* Text color */
+  .navbar .nav-links .drop-content a {
+    color: rgb(9, 14, 90);
+  }  
+ 
+}
+ 
+/* Dropdown menu CSS code */
+.dropdown{
+  position: relative;
+  display: inline-block;
+  color: black;
+}
+.drop-content, .drop-content2 {
+  display: none;
+  position: absolute;
+  background-color: #172554;
+  color: black;
+  min-width: 200px;
+  width: 100%;
+  font-size: 16px;
+  top: 34px;
+  z-index: 1;
+  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
+}
+/* on hover show dropdown */
+.dropdown:hover .drop-content, .dropdown2:hover .drop-content2 {
+  display: block;
+}
+/* drondown links */
+.drop-content a {
+  padding: 12px 10px;
+  /* width: 200px;
+  border-bottom: 1px solid rgb(197, 197, 250); */
+  display: block;
+  transition: all 0.5s ease !important;
+}
+.dropBtn .drop-content a:hover {
+  background-color: rgb(230, 230, 230);
+}
+.dropdown:hover .dropBtn, .dropdown2:hover .dropBtn2 {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.dropdown2 .drop-content2 {
+  position: absolute;
+  left: 120px;
+  top: 126px;
+}
+.dropBtn2 i {
+  margin-left: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/MenuFinal.astro b/src/components/MenuFinal.astro
new file mode 100644
index 0000000..bb3424a
--- /dev/null
+++ b/src/components/MenuFinal.astro
@@ -0,0 +1,1349 @@
+
+<template>
+    <div class="container-fluid bg-blue-900">
+      <div
+        id="hidden_mnu"
+        class="container mx-auto 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
+          ">
+            <a
+              href="/"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50','block px-1 py-2 text-sm text-white',]">Home </a>
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/about-us"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              About </a
+            >
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/notice"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Notice </a
+            >
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/library"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Library </a
+            >
+          </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 }">
+                  <a
+                    href="/governing-body"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Governing Body</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/composition-of-gb"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Composition of GB</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/staff"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Staff</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/working-hour"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Working Hour</a
+                  >
+                </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 }">
+                  <a
+                    href="/departments"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Departments and Faculty</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                        <a
+                          href="admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Admission</a
+                        >
+                      </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/librarians"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Librarians</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/course-offered"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Course Offered
+                  </a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/subject-combinantionhons"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Subject Combinantion(Hons)</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/subject-combinantiongen"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Subject Combinantion(Gen)
+                  </a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/intake-capacity"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Intake Capacity</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/academic-calendar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Academic Calendar
+                  </a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/prospectus"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Prospectus</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="Marks-Distribution"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Marks Distribution</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/result"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Result</a
+                  >
+                </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 }">
+                  <a
+                    href="/iqac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >IQAC</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/naac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NAAC</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/nirf-data"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NIRF </a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/aqar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >AQAR</a
+                  >
+                </MenuItem>
+
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-union"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Union</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/teachers-council"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Teacher's Council</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/alumni-association"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Alumni Association</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href=""
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    ></a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/gallery"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Image Gallery</a
+                  >
+                </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 }">
+                  <a
+                    href="/facilities"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Facilities</a
+                  >
+                </MenuItem>
+  
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/rti"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >RTI</a
+                  >
+                </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 }">
+                  <a
+                    href="/admission"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Admission</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/activities"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Activities</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-union"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Union</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/student-grievance"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Student Suggestions/Grievance</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-feedback"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's feedback</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/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</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/code-of-conduct"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Code of Conduct</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/holidays-list"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Holiday List</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/gallery"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Photo Gallery
+                  </a>
+                </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
+          ">
+            <a
+              href="/contact-us"
+              :class="[
+                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Contact </a
+            >
+          </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">
+            
+            
+            
+            
+
+
+
+
+
+            <div class="bg-white">
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/">Home</a>
+                </button>
+              </div>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/about-us">About Us</a>
+                </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 }">
+                        <a
+                          href="/governing-body"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Governing Body</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/composition-of-gb"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Composition of GB</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/staff"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Staff</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/working-hour"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Working Hour</a
+                        >
+                      </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 }">
+                        <a
+                          href="#"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Departments and Faculty</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="ug-admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >UG Admission</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/librarians"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Librarians</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/course-offered"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Course Offered
+                        </a>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/subject-combinantionhons"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Subject Combinantion(Hons)</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/Subject-combinantiongen"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Subject Combinantion(Gen)
+                        </a>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/intake-capacity"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Intake Capacity</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/academic-calendar"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Academic Calendar
+                        </a>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/prospectus"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Prospectus</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="Marks-Distributionyarn"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Marks Distribution</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/result"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Result</a
+                        >
+                      </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 }">
+                        <a
+                          href="/iqac"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >IQAC</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                  <a
+                    href="/naac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NAAC</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/nirf-data"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NIRF</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/aqar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >AQAR</a
+                  >
+                </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-union"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Union</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/alumni-association"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Alumni Association</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/activity-gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Activity Gallery</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Image Gallery</a
+                        >
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/facilities">Facilities</a>
+                </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 }">
+                        <a
+                          href="/admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Admission</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/activities"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Activities</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-union"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Union</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/student-grievance"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Student Suggestions/Grievance</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-feedback"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's feedback</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/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</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/code-of-conduct"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Code of Conduct</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/holidays-list"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Holiday List</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Photo Gallery
+                        </a>
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/library">Library</a>
+                </button>
+              </div>
+  
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/contact">Contact</a>
+                </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/components/NoticePage.vue b/src/components/NoticePage.vue
new file mode 100644
index 0000000..d7d6d17
--- /dev/null
+++ b/src/components/NoticePage.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="container bg-white mx-auto mt-3  p-4 text-blue-700 leading-loose">
+        <div v-if="isLoading">
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Loading ...</h2>
+        </div>
+        
+        <div v-else>
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Notice</h2>
+            <div  v-for="(item, index) in page" >
+                <a :href="'/notice/'+item.slug"> <h3> {{item.title}}</h3> </a>
+
+           
+                
+
+            </div>
+            <!-- <div v-html="page[0].content" class="container mx-auto">
+    
+            </div> -->
+        </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+        data() {
+            return {
+                page: null,
+                isLoading: true
+            }
+        },
+        mounted: function () {
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+            // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
+                .then(response => response.json())
+                .then(data => {
+              this.page = data.data.reverse()
+            //   console.log(data)
+              this.isLoading = false
+            })
+        }
+    }
+    </script>
\ No newline at end of file
diff --git a/src/components/NoticeSlug.vue b/src/components/NoticeSlug.vue
new file mode 100644
index 0000000..678e8c0
--- /dev/null
+++ b/src/components/NoticeSlug.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="container bg-white mx-auto mt-3  p-4">
+        <div v-if="isLoading">
+            <h2>Loading ...</h2>
+        </div>
+        <div v-else>
+            <h2>{{page[0].title}}</h2>
+            <div v-html="page[0].content" ></div>
+            <div v-if="fileAttached">
+                <h2>Attachments.</h2>
+                <ul>
+                    <li v-for="(file, index) in files">
+                        {{index+1}}. 
+                        <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                          {{ file.filename_download }}
+                        </a>
+                    </li>
+
+                </ul>
+
+            </div>
+        </div>
+    </div>
+</template>
+    
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            fileAttached:false,
+            files: [],
+            isLoading: true
+        }
+    },
+    mounted: function () {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            throw new Error('Something went wrong');
+            })
+            .then(jsonPageData => {
+                this.page = jsonPageData.data
+                console.log(this.page)
+                this.isLoading = false
+                return jsonPageData.data[0].id
+                }
+            )
+            .then((pageID) => {
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
+                .then(resp => resp.json())
+                    .then(file => {
+                            let attIDs = ''
+                            let t = 0
+                            file.data.forEach(ids => {
+                                if (t == 0) attIDs = ids.directus_files_id
+                                else attIDs = attIDs + ',' + ids.directus_files_id
+                                t++
+                            });
+                            if(t>0) this.fileAttached=true
+                        return attIDs
+                    })
+                        .then((attIDs) => {
+                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
+                            .then(resp => resp.json())
+                                .then(file => {
+                                    this.files = file.data
+                                })
+                        })
+            })
+            .catch((error) => {
+                console.log(error)
+                });
+    },
+    methods: {
+        // getAttachments(att) {
+
+        //     console.log(att)
+        //     // fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
+        //     //     .then(response => response.json())
+        //     //     .then(data => this.itemByCategory = data)
+        //     // console.log(this.itemByCategory)
+
+        // }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/RoutePage.vue b/src/components/RoutePage.vue
new file mode 100644
index 0000000..e552c5c
--- /dev/null
+++ b/src/components/RoutePage.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="container mx-auto px-4 text-justify">
+        <div v-if="content">
+            <div v-html="content"></div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            attachment:null,
+            content:null,
+            isLoading: true
+        }
+    },
+    mounted: function () {
+        
+        let path=window.location.pathname.split('/');
+        console.log(path[1]);
+
+        // fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+        let queryP='https://api8.siliconpin.com/items/scc22?filter[slug][_eq]='+path[1];
+        fetch(queryP)
+            .then(response => response.json())
+            .then(data => {
+          this.page = data.data[0]
+          this.content = this.page.content
+        //   console.log(data)
+          this.isLoading = false
+        })
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/temp.vue b/src/components/temp.vue
new file mode 100644
index 0000000..bb3424a
--- /dev/null
+++ b/src/components/temp.vue
@@ -0,0 +1,1349 @@
+
+<template>
+    <div class="container-fluid bg-blue-900">
+      <div
+        id="hidden_mnu"
+        class="container mx-auto 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
+          ">
+            <a
+              href="/"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50','block px-1 py-2 text-sm text-white',]">Home </a>
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/about-us"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              About </a
+            >
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/notice"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Notice </a
+            >
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/library"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Library </a
+            >
+          </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 }">
+                  <a
+                    href="/governing-body"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Governing Body</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/composition-of-gb"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Composition of GB</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/staff"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Staff</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/working-hour"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Working Hour</a
+                  >
+                </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 }">
+                  <a
+                    href="/departments"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Departments and Faculty</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                        <a
+                          href="admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Admission</a
+                        >
+                      </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/librarians"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Librarians</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/course-offered"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Course Offered
+                  </a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/subject-combinantionhons"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Subject Combinantion(Hons)</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/subject-combinantiongen"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Subject Combinantion(Gen)
+                  </a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/intake-capacity"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Intake Capacity</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/academic-calendar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Academic Calendar
+                  </a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/prospectus"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Prospectus</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="Marks-Distribution"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Marks Distribution</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/result"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Result</a
+                  >
+                </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 }">
+                  <a
+                    href="/iqac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >IQAC</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/naac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NAAC</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/nirf-data"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NIRF </a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/aqar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >AQAR</a
+                  >
+                </MenuItem>
+
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-union"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Union</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/teachers-council"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Teacher's Council</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/alumni-association"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Alumni Association</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href=""
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    ></a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/gallery"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Image Gallery</a
+                  >
+                </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 }">
+                  <a
+                    href="/facilities"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Facilities</a
+                  >
+                </MenuItem>
+  
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/rti"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >RTI</a
+                  >
+                </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 }">
+                  <a
+                    href="/admission"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Admission</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/activities"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Activities</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-union"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Union</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/student-grievance"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Student Suggestions/Grievance</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-feedback"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's feedback</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/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</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/code-of-conduct"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Code of Conduct</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/holidays-list"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Holiday List</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/gallery"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Photo Gallery
+                  </a>
+                </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
+          ">
+            <a
+              href="/contact-us"
+              :class="[
+                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Contact </a
+            >
+          </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">
+            
+            
+            
+            
+
+
+
+
+
+            <div class="bg-white">
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/">Home</a>
+                </button>
+              </div>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/about-us">About Us</a>
+                </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 }">
+                        <a
+                          href="/governing-body"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Governing Body</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/composition-of-gb"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Composition of GB</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/staff"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Staff</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/working-hour"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Working Hour</a
+                        >
+                      </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 }">
+                        <a
+                          href="#"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Departments and Faculty</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="ug-admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >UG Admission</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/librarians"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Librarians</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/course-offered"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Course Offered
+                        </a>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/subject-combinantionhons"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Subject Combinantion(Hons)</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/Subject-combinantiongen"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Subject Combinantion(Gen)
+                        </a>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/intake-capacity"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Intake Capacity</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/academic-calendar"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Academic Calendar
+                        </a>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/prospectus"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Prospectus</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="Marks-Distributionyarn"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Marks Distribution</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/result"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Result</a
+                        >
+                      </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 }">
+                        <a
+                          href="/iqac"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >IQAC</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                  <a
+                    href="/naac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NAAC</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/nirf-data"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NIRF</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/aqar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >AQAR</a
+                  >
+                </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-union"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Union</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/alumni-association"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Alumni Association</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/activity-gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Activity Gallery</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Image Gallery</a
+                        >
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/facilities">Facilities</a>
+                </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 }">
+                        <a
+                          href="/admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Admission</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/activities"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Activities</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-union"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Union</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/student-grievance"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Student Suggestions/Grievance</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-feedback"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's feedback</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/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</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/code-of-conduct"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Code of Conduct</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/holidays-list"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Holiday List</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Photo Gallery
+                        </a>
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/library">Library</a>
+                </button>
+              </div>
+  
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/contact">Contact</a>
+                </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/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..5c776b5
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,109 @@
+---
+import Layout from "../layouts/Layout.astro"
+import RoutePage from "../components/RoutePage.vue"
+import Header from "../components/Header.astro"
+import MainMenu from "../components/MainMenu.astro"
+import Footer from "../components/Footer.astro"
+console.log(Astro.url.pathname)
+---
+<Layout title="">
+	<main>
+		<Header />
+		<MainMenu />
+		<RoutePage client:visible/>
+		<!-- <section class="container-fluid">
+			<div class="flex justify-center">
+				<img src="/img/clg.jpg" alt="clg" class="mb-5 rounded-b-2xl" width="100%"height="100%"/>
+		  </div>
+		</section>
+		<div class="container mx-auto px-4">
+			
+			<div class="flex justify-center">
+				<div class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full">Vision of The College</div>
+			</div>
+			  <div class="flex-none mt-5 justify-center">
+				  <div class="flex h-8 border-b border-slate-200 ml-5 text-xl">Character Formation through Knowledge and Value-based Education for Transformation of the Society and the Nation</div>
+			  </div>
+			  <br />
+			  <div class="flex justify-center">
+				  <div
+					  class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full mt-14"
+				  >Our Mission</div>
+			  </div>
+			  <div class="flex-none justify-center p-5 text-xl text-justify">
+				  <div
+					  class="flex border-b border-slate-200"
+				  >a) To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.</div>
+				  <div
+					  class="flex border-b border-slate-200 mt-3"
+				  >b) The college aims at moulding and shaping the students as good citizens with qualities of mind and heart showing commitment towards the nation as well as the community in which they live, extending the role of governance and leadership in discharging the different activities to its stakeholders and inculcating innovative practices. With such orientation students are expected to get involved in societal transformation.</div>
+				  <div
+					  class="flex border-b border-slate-200 mt-3"
+				  >c) Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us.</div>
+			  
+			  <div class="grid grid-cols-1 lg:grid-cols-2 bg-local md:gap-0 mt-4" style="background-image: url('/img/clg_grdnt.jpg')">
+				  <div class="grid place-items-center p-4">
+					<img src="/img/clgprin.jpg" alt="" class="w-full h-full rounded-md">
+				</div>
+				  <div class="grid text-white place-items-center text-justify p-6"> To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us. rer</div>
+			  </div>
+			  <div class="flex justify-center">
+					  <a href="/gallery"><button class="bg-blue-700 w-56 text-white p-1 mt-14 text-xl rounded-full">Gallery</button></a>
+				  </div>
+			  </div> -->
+			  <!-- <div
+				  class="grid grid-cols-12 bg-gradient-to-r from-stone-600 to-stone-800 h-56 content-center gap-5"
+			  >
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14 grid grid-rows-17">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Important Links</div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a
+							  href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne"
+						  >Gallery</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne">Notice</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a
+							  href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne"
+						  >Document</a>
+					  </div>
+				  </div>
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Related Sites</div>
+					  <div class="grid row-span-5 text-blue-600 pl-4 border-b border-black target-blank">
+						  <a href="https://www.wbsubregistration.org/">W.B.S.U.</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="https://www.ugc.ac.in/">U.G.C.</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
+					  </div>
+				  </div>
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Document Links</div>
+					  <div class="grid row-span-5 text-blue-600 pl-4 border-b border-black">
+						  <a href="AQAR">AQAR</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="">R & D Cell</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a href="">Academic Calendar</a>
+					  </div>
+				  </div>
+			  </div> -->
+		</div>
+	</main>
+	<Footer />
+</Layout>
+
+  
\ No newline at end of file
diff --git a/src/pages/contact-us.astro b/src/pages/contact-us.astro
new file mode 100644
index 0000000..6897570
--- /dev/null
+++ b/src/pages/contact-us.astro
@@ -0,0 +1,44 @@
+---
+import Layout from "../layouts/Layout.astro"
+import Header from "../components/Header.astro"
+import MainMenu from "../components/MainMenu.astro"
+import Footer from "../components/Footer.astro"
+---
+<Layout title="">
+    <Header />
+    <MainMenu />
+    <main>
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 lg:grid-cols-2 mt-8">
+                <div class="flex flex-col h-fit justify-center place-items-center">
+                    <p class="text-center text-3xl text-blue-900 mt-4 font-semibold pt-10">Contact Us</p>
+                    <div class="flex flex-col place-items-center">
+                        <h1 class="text-center text-3xl text-blue-900 mt-4 font-semibold">Sree Chaitanya College,Habra </h1>
+                        <span class="text-2xl font-bold">(Arts and Science) </span>
+                        <h2 class="text-xl font-bold pt-2 text-center">Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B </h2>
+                        <p class="text-2xl pt-4">Call to: +913216237020</p>
+                        <p class="text-lg md:text-2xl text-center">Mail to: <a href="" class="text-blue-700 font-bold underline">sreechaitanyacollege@rediffmail.com</a></p>
+                    </div>
+                   
+                </div>
+                <div class="flex flex-col place-items-center justify-center">
+                    <p class="text-center text-3xl text-blue-900 font-semibold mt-4">View College on Google Map</p>
+                    <!-- Google Map Copied Code -->
+                    <iframe class="mt-4 mb-8" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3677.0775585659544!2d88.64048451555165!3d22.83661988504755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f8b071c69b9933%3A0x5181c48a7b97726e!2sSree%20Chaitanya%20College%2C%20Habra!5e0!3m2!1sen!2sin!4v1667829054410!5m2!1sen!2sin"
+                            width="80%"
+                            height="400"
+                            frameborder="0"
+                            style="border:0;"
+                            
+                            aria-hidden="false"
+                            tabindex="0">
+                    </iframe>
+                </div>
+            </div>
+           
+        
+            
+        </div>
+    </main>
+    <Footer />
+</Layout>
diff --git a/src/pages/documents/[id].astro b/src/pages/documents/[id].astro
new file mode 100644
index 0000000..fc6fabf
--- /dev/null
+++ b/src/pages/documents/[id].astro
@@ -0,0 +1,46 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import Header from "../../components/Header.astro"
+import MainMenu from "../../components/MainMenu.astro"
+import Footer from "../../components/Footer.astro"
+
+export async function getStaticPaths() {
+  const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents');
+  const data = await response.json();
+  const finalData = data.data.map((n: {slug: string | undefined;})=>{
+      return {params: {id:n.slug}}
+  }) 
+  return finalData;
+}
+
+const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents');
+const data = await response.json();
+const { id } = Astro.params;
+const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
+---
+<Layout title="">
+    <Header />
+    <MainMenu />
+    <main>
+        <div class="container bg-white mx-auto mt-3  p-4">
+            <div v-if="isLoading">
+                <!-- <h2>Loading ...</h2> -->
+            </div>
+            <div>
+                <!-- <h2 class="text-center t-8">{data.data[idx].title}</h2> -->
+                <div></div>
+                <div >
+                    <!-- <h2>Attachments.</h2> -->
+                    <div>
+                        <div class="flex flex-col place-items-center justify-center" set:html={data.data[idx].content}></div>
+                        <a href=""></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <Footer />
+</Layout>
+
+    
+   
\ No newline at end of file
diff --git a/src/pages/documents/index.astro b/src/pages/documents/index.astro
new file mode 100644
index 0000000..4ad62de
--- /dev/null
+++ b/src/pages/documents/index.astro
@@ -0,0 +1,35 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import Header from "../../components/Header.astro"
+import MainMenu from "../../components/MainMenu.astro"
+import Footer from "../../components/Footer.astro"
+import DocumentsPage from "../../components/DocumentsPage.vue"
+const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents&sort=-date_created');
+const data = await response.json();
+const notice = data.data;
+// console.log(data)
+---
+<Layout title="">
+    <Header />
+    <MainMenu  />
+    <DocumentsPage client:visible />
+    <!-- <main>
+        <div class="container mx-auto mt-3 p-4 ">
+            <div>
+                <h1 class="text-center text-4xl font-bold underline decoration-4 decoration-blue-700 py-10">Documents</h1>
+                <div class="text-blue-700 leading-loose">
+                    {
+                        notice.map(item =>
+                            <a href={'/documents/'+item.slug}>
+                                <h3>{item.title}</h3>
+                            </a>
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    </main> -->
+    <Footer />    
+</Layout>
+
+   
\ No newline at end of file
diff --git a/src/pages/gallery.astro b/src/pages/gallery.astro
new file mode 100644
index 0000000..7ff0d0a
--- /dev/null
+++ b/src/pages/gallery.astro
@@ -0,0 +1,241 @@
+---
+import Layout from "../layouts/Layout.astro"
+import Header from "../components/Header.astro"
+import MainMenu from "../components/MainMenu.astro"
+import Footer from "../components/Footer.astro"
+---
+<Layout title="">
+    <Header />
+<MainMenu />
+    <main>
+        <div>
+            <div class="grid place-items-center bg-blue-700  w-48 text-4xl font-bold text-white rounded-full p-1 md:mt-8 absolute md:inset-x-2/4 top-56 md:-ml-28 -mt-40 inset-x-2/4 top-72 -ml-28 gap-4">Gallery</div>
+            <section class="overflow-hidden text-gray-700 mt-32">
+                <div class="">
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full">
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/1.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/2.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/3.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/4.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/5.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/6.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/7.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/8.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/9.jpg">
+                            </div>
+                        </div>
+    
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/11.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/12.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/13.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/14.jpg">
+                            </div>
+                        </div>
+    
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/15.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/16.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/17.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/18.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/19.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/20.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/21.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/22.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/23.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/24.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/25.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/26.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/27.jpg">
+                            </div>
+                        </div>
+    
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/28.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/29.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/30.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/31.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/32.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/32.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/33.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/34.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/35.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/36.jpg">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+    <Footer />
+</Layout>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 134d10f..09a9b94 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,90 +1,106 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
-import Modal from '../components/Modal.astro';
-import Header from '../components/Header.html';
-import MainHeader from '../components/MainHeader.vue';
-import Footer from '../components/Footer.astro';
+import Layout from "../layouts/Layout.astro"
+import Header from "../components/Header.astro"
+import MainMenu from "../components/MainMenu.astro"
+import Footer from "../components/Footer.astro"
 ---
-
-<Layout title="Welcome to Astro.">
-	<Header />
-	<MainHeader />
+<Layout title="">
 	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-		<p class="instructions">
-			To get started, open the directory <code>src/pages</code> in your project.<br />
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-		</p>
-		<button id="myBtn">Open Modal</button>
-		<Modal text=" This is a sample modal" /> 
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-			<Card
-				href="https://astro.build/integrations/"
-				title="Integrations"
-				body="Supercharge your project with new frameworks and libraries."
-			/>
-			<Card
-				href="https://astro.build/themes/"
-				title="Themes"
-				body="Explore a galaxy of community-built starter themes."
-			/>
-			<Card
-				href="https://astro.build/chat/"
-				title="Community"
-				body="Come say hi to our amazing Discord community. ❤️"
-			/>
-		</ul>
+		<Header />
+		<MainMenu />
+		<section class="container-fluid">
+			<div class="flex justify-center">
+				<img src="/img/clg.jpg" alt="clg" class="mb-5 rounded-b-2xl" width="100%"height="100%"/>
+		  </div>
+		</section>
+		<div class="container mx-auto px-4">
+			
+			<div class="flex justify-center">
+				<div class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full">Vision of The College</div>
+			</div>
+			  <div class="flex-none mt-5 justify-center">
+				  <div class="flex h-8 border-b border-slate-200 ml-5 text-xl">Character Formation through Knowledge and Value-based Education for Transformation of the Society and the Nation</div>
+			  </div>
+			  <br />
+			  <div class="flex justify-center">
+				  <div
+					  class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full mt-14"
+				  >Our Mission</div>
+			  </div>
+			  <div class="flex-none justify-center p-5 text-xl text-justify">
+				  <div
+					  class="flex border-b border-slate-200"
+				  >a) To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.</div>
+				  <div
+					  class="flex border-b border-slate-200 mt-3"
+				  >b) The college aims at moulding and shaping the students as good citizens with qualities of mind and heart showing commitment towards the nation as well as the community in which they live, extending the role of governance and leadership in discharging the different activities to its stakeholders and inculcating innovative practices. With such orientation students are expected to get involved in societal transformation.</div>
+				  <div
+					  class="flex border-b border-slate-200 mt-3"
+				  >c) Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us.</div>
+			  
+			  <div class="grid grid-cols-1 lg:grid-cols-2 bg-local md:gap-0 mt-4" style="background-image: url('/img/clg_grdnt.jpg')">
+				  <div class="grid place-items-center p-4">
+					<img src="/img/clgprin.jpg" alt="" class="w-full h-full rounded-md">
+				</div>
+				  <div class="grid text-white place-items-center text-justify p-6"> To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us. rer</div>
+			  </div>
+			  <div class="flex justify-center">
+					  <a href="/gallery"><button class="bg-blue-700 w-56 text-white p-1 mt-14 text-xl rounded-full">Gallery</button></a>
+				  </div>
+			  </div>
+			  <!-- <div
+				  class="grid grid-cols-12 bg-gradient-to-r from-stone-600 to-stone-800 h-56 content-center gap-5"
+			  >
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14 grid grid-rows-17">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Important Links</div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a
+							  href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne"
+						  >Gallery</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne">Notice</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a
+							  href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne"
+						  >Document</a>
+					  </div>
+				  </div>
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Related Sites</div>
+					  <div class="grid row-span-5 text-blue-600 pl-4 border-b border-black target-blank">
+						  <a href="https://www.wbsubregistration.org/">W.B.S.U.</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="https://www.ugc.ac.in/">U.G.C.</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
+					  </div>
+				  </div>
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Document Links</div>
+					  <div class="grid row-span-5 text-blue-600 pl-4 border-b border-black">
+						  <a href="AQAR">AQAR</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="">R & D Cell</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a href="">Academic Calendar</a>
+					  </div>
+				  </div>
+			  </div> -->
+		</div>
 	</main>
 	<Footer />
 </Layout>
 
-<style>
-	main {
-		margin: auto;
-		padding: 1.5rem;
-		max-width: 60ch;
-	}
-	h1 {
-		font-size: 3rem;
-		font-weight: 800;
-		margin: 0;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		line-height: 1.6;
-		margin: 1rem 0;
-		border: 1px solid rgba(var(--accent), 25%);
-		background-color: white;
-		padding: 1rem;
-		border-radius: 0.4rem;
-	}
-	.instructions code {
-		font-size: 0.875em;
-		font-weight: bold;
-		background: rgba(var(--accent), 12%);
-		color: rgb(var(--accent));
-		border-radius: 4px;
-		padding: 0.3em 0.45em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 1rem;
-		padding: 0;
-	}
-</style>
+  
\ No newline at end of file
diff --git a/src/pages/learn.astro b/src/pages/learn.astro
new file mode 100644
index 0000000..8cc47b3
--- /dev/null
+++ b/src/pages/learn.astro
@@ -0,0 +1,126 @@
+<body  class="container mx-auto px-4">
+    <main onclick="bodyColor()" >
+        <a href="youtube.com">Youtube</a>
+        <div>
+            <button class="bg-blue-700 text-white" onclick="myfunction()">Click Me</button>
+            <p id="demo"></p>
+            <p id="demo2" onclick="myfunction2()">Click me</p>
+            <!-- <p id="demo3" onclick="myfunction3()">Click</p> -->
+            <button onclick="myfunction3()">Click Me</button>
+            <p id="demo3"></p>
+            <p id="color" onclick="changeColor()">Click To change Color</p>
+           
+            <input oncut="textCopied()" type="text" value="Try cut me" class="border">
+            <p id="copy"></p>
+            <label for="">Enter name</label>
+            <input type="text" id="fname" onblur="onBlur()" class="border" />
+        </div>
+
+        <select name="" id="mySelect" onchange="nameChange()">
+            <option value="Select" selected>-Select-</option>
+            <option value="Kumra">Kumra</option>
+            <option value="Habra">Habra</option>
+            <option value="Barasat">Barasat</option>
+            <option value="Kolkata">Kolkata</option>
+            <option value="North 24 parganas">North 24 parganas</option>
+            <option value="West Bengal">West Bengal</option>
+        </select>
+        <p id="name"></p>
+        <button onclick="fullScreen()" class="bg-green-800 text-white font-bold px-6 py-2 rounded-lg">Open Full Screen</button>
+        <button onclick="closeScreen()" class="bg-red-800 text-white px-6 py-2 font-bold rounded-lg" >Close Full Screen</button>
+
+ 
+
+    </main>
+</body>
+
+<script is:inline>
+    let data =[10, 22, 37, 48, 88, 92, 99, 100];
+    let evenArray=[];
+    for(let i=0;i<data.length;i++) {
+
+    }
+
+
+
+    var elem = document.documentElement;
+
+    function fullScreen() {
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        }
+        else if (elem.mozRequestFullScreen) {
+            elem.mozRequestFullScreen();
+        }
+        else if (elem.webkitRequestFullScreen) {
+            elem.webkitRequestFullScreen();
+        }
+        else if (elem.msRequestFullScreen) {
+            elem = window.top.document.body;
+            elem.msRequestFullScreen();
+        }
+    }
+
+    function closeScreen(){
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+        else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        }
+        else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+        else if (document.msExitFullscreen) {
+            window.top.document.msExitFullscreen
+        }
+    }
+    var output = document.getElementById("myP");
+    document.addEventListener("fullscreenchange", function() {
+        output.innerHTML = "fullscreenchange event fired!";
+    });
+    document.addEventListener("mozfullscreenchange", function() {
+        output.innerHTML = "mozfullscreenchange event fired!";
+    });
+    document.addEventListener("webkitfullscreenchange", function() {
+        output.innerHTML = "webkitfullscreenchange event fired!";
+    });
+    document.addEventListener("msfullscreenchange", function() {
+        output.innerHTML = "msfullscreenchange event fired!";
+    });
+function nameChange() {
+    var s = document.getElementById("mySelect").value;
+    document.getElementById("name").innerHTML = "You Selected: " + s;
+}
+
+    // function unload() {
+    //     return "Write Something Here......!";
+    // }
+
+    function myfunction() {
+        document.getElementById("demo").innerHTML="A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs.";
+    }
+    function myfunction2() {
+        document.getElementById("demo2").innerHTML = "YOU CLICKED ME!";
+    }
+    function myfunction3() {
+        document.getElementById("demo3").innerHTML= "You Clicked Me";
+    }
+    function changeColor() {
+        document.getElementById("color").style.background = "red"; 
+        document.getElementById("color").style.color = "yellow"
+    }
+    function bodyColor() {
+        document.getElementsByTagName("main")[0].style.background = "yellow"
+        document.getElementsByTagName("main")[0].style.color = "#7c4c23"
+        document.getElementsByTagName("main")[0].style.fontWeight = "1000"
+    }
+    function textCopied() {
+        document.getElementById("copy").innerHTML = "You Copied Me";
+    }
+
+    function onBlur() {
+        let x = document.getElementById("fname");
+        x.value = x.value.toUpperCase();
+    }
+</script>
\ No newline at end of file
diff --git a/src/pages/notice/[id].astro b/src/pages/notice/[id].astro
new file mode 100644
index 0000000..1b8bff4
--- /dev/null
+++ b/src/pages/notice/[id].astro
@@ -0,0 +1,44 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import Header from "../../components/Header.astro"
+import MainMenu from "../../components/MainMenu.astro"
+import Footer from "../../components/Footer.astro"
+
+export async function getStaticPaths() {
+  const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice');
+  const data = await response.json();
+  const finalData = data.data.map((n: { slug: string | undefined; })=>{
+      return {params: {id:n.slug}}
+  }) 
+  return finalData;
+}
+
+const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice');
+const data = await response.json();
+const { id } = Astro.params;
+const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
+---
+<Layout title="">
+    <Header />
+    <MainMenu />
+    <main>
+        <div class="container bg-white mx-auto mt-3  p-4">
+            <div>
+            </div>
+            <div>
+                <h2 class="text-center t-8">{data.data[idx].title}</h2>
+                <div></div>
+                <div >
+                    <div>
+                        <div class="flex flex-col place-items-center justify-center" set:html={data.data[idx].content}></div>
+                        <a href=""></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <Footer />
+</Layout>
+
+    
+   
\ No newline at end of file
diff --git a/src/pages/notice/index.astro b/src/pages/notice/index.astro
new file mode 100644
index 0000000..e408414
--- /dev/null
+++ b/src/pages/notice/index.astro
@@ -0,0 +1,35 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import Header from "../../components/Header.astro"
+import MainMenu from "../../components/MainMenu.astro"
+import Footer from "../../components/Footer.astro"
+import NoticePage from "../../components/NoticePage.vue"
+// const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice&sort=-date_created');
+// const data = await response.json();
+// const notice = data.data;
+// console.log(data)
+---
+<Layout title="">
+    <Header />
+    <MainMenu />
+    <NoticePage client:visible />
+    <!-- <main>
+        <div class="container mx-auto mt-3 p-4 ">
+            <div>
+                <h1 class="text-center text-4xl font-bold underline decoration-4 decoration-blue-700 py-10">Notice</h1>
+                <div class="text-blue-700 leading-loose">
+                    {
+                        notice.map(item =>
+                            <a href={'/notice/'+item.slug}>
+                                <h3>{item.title}</h3>
+                            </a>
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    </main> -->
+    <Footer />    
+</Layout>
+
+   
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 3613d44..aa3b68b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -425,6 +425,16 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz#128b76ecb9be48b60cf5cfc1c63a4f00691a3239"
   integrity sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==
 
+"@headlessui/vue@^1.7.13":
+  version "1.7.13"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.13.tgz#bf4c5e324c3a724f6f7911362e7f38989b754590"
+  integrity sha512-obG5TdPdBDfs+jiA1mY29LPFqyJl93Q90EL86ontfRe1B6XvbjPkx+x1aAC5DA18bXbb0Juni1ayDbXo0w1u0A==
+
+"@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==
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"