diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 4f224e1..02e7a27 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -38,7 +38,7 @@ import FooterComponent from "./FooterComponent.vue"
 <section class="">
     <FooterComponent client:visible />
 </section>
-<div class="container-fluid bg-stone-600">
+<!-- <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">
@@ -69,7 +69,7 @@ import FooterComponent from "./FooterComponent.vue"
             <a href=""><span class=""> Count 112964  | Site Performance  <hr> </span></a>
         </div>
     </div>
-</div>
+</div> -->
 <style>
     .shape {
         -webkit-animation: shape 3ss forwards;
diff --git a/src/components/MainMenu.astro b/src/components/MainMenu.astro
index b77841e..a8f31c7 100644
--- a/src/components/MainMenu.astro
+++ b/src/components/MainMenu.astro
@@ -1,6 +1,6 @@
 
 <main>
-  <section class="container-fluid" style="background-color: #172554;"> 
+  <section class="container-fluid" style="background-color: #173382;"> 
     <div class="navbar shadow-xl zindex xl:container xl:mx-auto">
  
       <!-- Navbar logo -->
@@ -138,7 +138,7 @@ body{
   height: 70px;
   width: 100%;
   padding: 25px 10px;
-  background-color: #172554;
+  background-color: #173382;
   position: relative;
 }
 .navbar .nav-header{
@@ -162,6 +162,9 @@ body{
   color: rgb(255, 255, 255);
 }
 .navbar .nav-links a {
+  border-radius: 5px;
+  /* background-color: #0ea5e930; */
+  width: 100%;
   padding: 10px 6px;
   width: fit-content;
   text-decoration: none;
@@ -170,7 +173,7 @@ body{
 }
 /* Hover effects */
 .navbar .nav-links a:hover{
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: #0ea5e950;
   width: 100%;
   border-radius: 10px;
 }
@@ -180,7 +183,7 @@ body{
   display: none;
 }
  
-@media (max-width:970px) {
+@media (max-width:960px) {
   .navbar .nav-btn{
     display: inline-block;
     position: absolute;
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/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/learn.astro b/src/pages/learn.astro
index 7567d8a..8cc47b3 100644
--- a/src/pages/learn.astro
+++ b/src/pages/learn.astro
@@ -1,4 +1,4 @@
-<body onbeforeunload="return unload()" class="container mx-auto px-4">
+<body  class="container mx-auto px-4">
     <main onclick="bodyColor()" >
         <a href="youtube.com">Youtube</a>
         <div>
@@ -17,6 +17,7 @@
         </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>
@@ -25,11 +26,68 @@
             <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;