diff --git a/public/img/rgyci-img1.jpg b/public/img/rgyci-img1.jpg
new file mode 100644
index 0000000..3069c80
Binary files /dev/null and b/public/img/rgyci-img1.jpg differ
diff --git a/public/img/rgyci-img2.jpg b/public/img/rgyci-img2.jpg
new file mode 100644
index 0000000..353743b
Binary files /dev/null and b/public/img/rgyci-img2.jpg differ
diff --git a/public/img/rgyci-img3.jpg b/public/img/rgyci-img3.jpg
new file mode 100644
index 0000000..d31c051
Binary files /dev/null and b/public/img/rgyci-img3.jpg differ
diff --git a/public/img/rgyci-img4.jpg b/public/img/rgyci-img4.jpg
new file mode 100644
index 0000000..e7067a8
Binary files /dev/null and b/public/img/rgyci-img4.jpg differ
diff --git a/public/img/rgyci-img5.jpg b/public/img/rgyci-img5.jpg
new file mode 100644
index 0000000..b0594f3
Binary files /dev/null and b/public/img/rgyci-img5.jpg differ
diff --git a/public/img/rgyci-img6.jpg b/public/img/rgyci-img6.jpg
new file mode 100644
index 0000000..098ca73
Binary files /dev/null and b/public/img/rgyci-img6.jpg differ
diff --git a/public/img/rgyci-img7.jpg b/public/img/rgyci-img7.jpg
new file mode 100644
index 0000000..2d32b3f
Binary files /dev/null and b/public/img/rgyci-img7.jpg differ
diff --git a/public/img/rgyci-img8.jpg b/public/img/rgyci-img8.jpg
new file mode 100644
index 0000000..844b172
Binary files /dev/null and b/public/img/rgyci-img8.jpg differ
diff --git a/public/img/rgyci-img9.jpg b/public/img/rgyci-img9.jpg
new file mode 100644
index 0000000..1f8c4a1
Binary files /dev/null and b/public/img/rgyci-img9.jpg differ
diff --git a/src/components/Contactfrom.vue b/src/components/Contactfrom.vue
index 2878eea..ca1ead8 100644
--- a/src/components/Contactfrom.vue
+++ b/src/components/Contactfrom.vue
@@ -21,7 +21,7 @@
             </div>
             <div class="py-32 2xl:px-32" v-else>
                 <h2 class="text-2xl font-semibold py-4">Thanks for being awesome!</h2>
-                <p class="text-xl pb-32 text-justify px-8 w-full">We will back you Soon.[RGYCI].</p>
+                <p class="text-xl pb-32 text-justify px-8 w-full">We will back you Soon.</p>
             </div>
         </div>
     </div>
@@ -55,7 +55,7 @@ export default {
         formData.append('Email', this.cuemail);
         formData.append('MessageDetails', this.cumessage);
         formData.append('formName', 'rgyci-contact-us');
-        fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
+        fetch('', 
             {
                 method: 'POST',
                 body: formData,
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3fa829f..fc1dfb2 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,7 +9,7 @@
                 <p class="flex inline-flex hover:text-yellow-400"><img class="" src="/img/svg/phone.svg" alt="">&nbsp;+91 7318992100;</p>
                 <p class="flex inline-flex hover:text-yellow-400 pr-10"><img src="/img/svg/mail.svg" alt="">&nbsp;ho@rgyci.org</p>
             </div>
-            <div class="flex text-lg md:text-2xl pb-0 pr-10 justify-end"><button class="text-white hover:text-yellow-400">Login</button></div>
+            <!-- <div class="flex text-lg md:text-2xl pb-0 pr-10 justify-end"><button class="text-white hover:text-yellow-400">Login</button></div> -->
         </div>
     </section>
 </main>
diff --git a/src/components/IndexSlider.vue b/src/components/IndexSlider.vue
new file mode 100644
index 0000000..9662116
--- /dev/null
+++ b/src/components/IndexSlider.vue
@@ -0,0 +1,86 @@
+<template>
+  <swiper class="z-index"
+    :modules="modules"
+    :slides-per-view="1"
+    :space-between="50"
+    navigation
+    :pagination="{ clickable: true }"
+    :autoplay=" { delay: 2500, disableOnInteraction: true}"
+    @swiper="onSwiper"
+    @slideChange="onSlideChange"
+  >
+    <swiper-slide><img class="w-full" src="/img/sld/8.jpg" alt="" /></swiper-slide>
+    <swiper-slide><img class="w-full" src="/img/sld/1.jpg" alt="" /></swiper-slide>
+    <swiper-slide><img class="w-full" src="/img/sld/2.jpg" alt="" /></swiper-slide>
+    <swiper-slide><img class="w-full" src="/img/sld/3.jpg" alt="" /></swiper-slide>
+    <swiper-slide><img class="w-full" src="/img/sld/5.jpg" alt="" /></swiper-slide>
+    <swiper-slide><img class="w-full" src="/img/sld/6.jpg" alt="" /></swiper-slide>
+    <swiper-slide><img class="w-full" src="/img/sld/7.jpg" alt="" /></swiper-slide>
+    ...
+  </swiper>
+</template>
+<style>
+.z-index {
+  z-index: -1;
+}
+.text-color-1 {
+      color: #7C4C23;
+      font-family: 'Quicksand';
+  }
+.slider-width {
+width: 350px;
+}
+@media screen and (min-width: 1500px) {
+    .hero-text {
+      font-size: 50px;
+      
+      
+    }
+  }
+  
+  @media screen and (max-width: 1499px) {
+    .hero-text {
+      font-size: 40px;
+      
+    }
+  }
+  @media screen and (max-width: 1199px) {
+    .hero-text {
+      font-size: 30px;
+      
+    }
+  }
+</style>
+<script>
+  // import Swiper core and required modules
+  import { Navigation, Pagination, Scrollbar, A11y, Autoplay, } from 'swiper';
+
+  // Import Swiper Vue.js components
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+
+  // Import Swiper styles
+  import 'swiper/css';
+  import 'swiper/css/navigation';
+  import 'swiper/css/pagination';
+  import 'swiper/css/scrollbar';
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  setup() {
+    const onSwiper = (swiper) => {
+      console.log(swiper);
+    };
+    const onSlideChange = () => {
+      console.log('slide change');
+    };
+    return {
+      onSwiper,
+      onSlideChange,
+      modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
index 42b34c7..5fb19ab 100644
--- a/src/components/Menu.astro
+++ b/src/components/Menu.astro
@@ -1,244 +1,276 @@
 ---
-import Layout from "../layouts/Layout.astro";
 import Online from "./Online.vue";
 ---
-<Online/>
-
-<main class="container-fluid navbar">
-                                                                <!-- Desktop Menu -->
-    <div class="container mx-auto flex justify-center">
-        <div class="hidden md:block  py-4">
-            <div class="navbar">
-              <a href="/">Home</a>
-              <div class="dropdownDesktop">
-                <button class="dropbtnDesktop">About 
-                  <i class="fa fa-caret-downDesktop"></i>
-                </button>
-                <div class="dropdown-contentDesktop">
-                  <a href="/aboutus">About Us</a>
-                  <a href="/chairman-message">Chairman Message</a>
-                  <a href="/administrator">Adninistrator</a>
-                </div>
-              </div>
-              <a href="#news">Center List</a>
-              <div class="dropdownDesktop">
-                <button class="dropbtnDesktop">Courses 
-                  <i class="fa fa-caret-downDesktop"></i>
-                </button>
-                <div class="dropdown-contentDesktop">
-                  <a href="online-course">Online Courses</a>
-                  <a href="#">Offline Courses</a>
-                </div>
-              </div> 
-              <div class="dropdownDesktop ">
-                <button class="dropbtnDesktop">Student Zone 
-                    <i class="fa fa-caret-downDesktop"></i>
-                </button>
-                <div class="dropdown-contentDesktop z-index">
-                    <a href="https://center.rgyci.org/check_registration">Check Registration</a>
-                    <a href="https://center.rgyci.org/checkresult">Result</a>
-                    <a href="https://center.rgyci.org/chekcertificate">Certificate Verification</a>
-                    <a href="https://center.rgyci.org/download">Download</a>
-                    <a href="#">Online Exam</a>
-                    <a href="https://center.rgyci.org/form/student_placement">Student's Placement Form</a>
-                    <a href="/library">Library</a>
-                </div>
-            </div>
-            <div class="dropdownDesktop">
-                <button class="dropbtnDesktop">Franchise 
-                    <i class="fa fa-caret-downDesktop"></i>
-                </button>
-                <div class="dropdown-contentDesktop">
-                    <a href="https://center.rgyci.org/how-to-get-franchisee-with-rgyci">Procedure</a>
-                    <a href="https://center.rgyci.org/form/franchise_enquiry">Enquiry</a>
-                    <a href="https://center.rgyci.org/form/companies_placement">Company's Placement Form</a>
-                </div>
-            </div>
-            <a href="/gallery">Gallery</a>
-            <a href="contactus">Contact Us</a>
-            <div class="dropdownDesktop">
-                <button class="dropbtnDesktop">Login 
-                    <i class="fa fa-caret-downDesktop"></i>
-                </button>
-                <div class="dropdown-contentDesktop">
-                    <a href="https://center.rgyci.org/form/center_login">Center</a>
-                    <a href="https://center.rgyci.org/form/teacher_login">Teacher</a>
-                </div>
-            </div>
-          </div>
-    </div>
-    </div>
-        
-                                                            <!-- Mobile Menu -->
-    <div class="mobileTopMenu block md:hidden">
-      <div class="topnavMobile">
-        <a href="#home" class="active">Logo</a>
-        <div id="mobileMenu" class="hidden">
-          <a href="#news">News</a>
-          <a href="#contact">Contact</a>
-          <div class="dropdown">
-            <button class="dropbtn">Dropdown 
-              &#11183
-            </button>
-            <div class="dropdown-content">
-              <a href="#">Link 1</a>
-              <a href="#">Link 2Link 2Link 2</a>
-              <a href="#">Link 3</a>
-            </div>
-          </div> 
-      
-
+<main>
+  <Online />
+  <section class="container-fluid" style="background-color: #962727;"> 
+    <div class="navbar shadow-xl zindex container mx-auto">
+ 
+      <!-- Navbar logo -->
+      <div class="nav-header">
+        <div class="nav-logo">
         </div>
-        <a  class="icon" onclick="openMobileMenu()">
-          &#9776;
-        </a>
       </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>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">About
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content" >
+            <a href="/aboutus">About Us</a>
+            <a href="/chairman-message">Chairman Message</a>
+            <a href="/administrator">Adninistrator</a>
+          </div>
+        </div>
+        <a href="https://center.rgyci.org/center_list">Center List</a>
+        <!-- Dropdown menu -->
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Courses
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="https://online.rgyci.org/login/index.php">Online Courses</a>
+            <a href="#">Offline Courses</a>             
+          </div>
+        </div>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Student Zone
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="https://center.rgyci.org/check_registration">Check Registration</a>
+            <a href="https://center.rgyci.org/checkresult">Result</a>
+            <a href="https://center.rgyci.org/chekcertificate">Certificate Verification</a>
+            <a href="https://center.rgyci.org/download">Download</a>
+            <a href="http://center.rgyci.org/form/exam_center_login">Online Exam</a>
+            <a href="https://center.rgyci.org/form/student_placement">Student's Placement Form</a>
+            <a href="/library">Library</a>            
+          </div>
+        </div>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Franchise
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="https://center.rgyci.org/how-to-get-franchisee-with-rgyci">Procedure</a>
+            <a href="https://center.rgyci.org/form/franchise_enquiry">Enquiry</a>
+            <a href="https://center.rgyci.org/form/companies_placement">Company's Placement Form</a>           
+          </div>
+        </div>
+        
+   
+        <a href="/gallery">Gallery</a>
+        <a href="/contactus">Contact Us</a>
+        <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/center_login">Center</a>
+            <a href="https://center.rgyci.org/form/teacher_login">Teacher</a>         
+          </div>
+        </div>
+      </div>
+      
     </div>
-  </main>
-  
-  
-  
-  <script is:inline>
-    function openMobileMenu() {
-      var element = document.getElementById("mobileMenu");
-      element.classList.toggle("hidden");
-    }
-  </script>
-  <style>
-    .z-index {
-      z-index: +10;    
-    }
-
-    .navbar {
-    overflow: hidden;
-    background-color: rgb(150, 39, 39);
-    /* position: absolute;
-    width: 100%;
-    left: 0;
-    top: 0; */
+  </section>
+    
+</main>
+<script is:inline>
+</script>
+<style>
+  .drop-content {
+    color: black;
+    width: fit-content;
   }
-  
-  .navbar a {
-    float: left;
-    font-size: 16px;
-    color: white;
+    .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 30px;
+  background-color: #962727;
+  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: 18px;
+}
+ 
+.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 {
+  padding: 10px 12px;
+  width: fit-content;
+  text-decoration: none;
+  font-weight: 550;
+  color: white;
+}
+/* Hover effects */
+.navbar .nav-links a:hover{
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 100%;
+  border-radius: 10px;
+}
+ 
+/* responsive navbar toggle button */
+.navbar #nav-check, .navbar .nav-btn{
+  display: none;
+}
+ 
+@media (max-width:970px) {
+  .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;
-    padding: 14px 16px;
-    text-decoration: none;
+    width: 100%;
+    background-color: rgb(9, 14, 90);
+    transition: all 0.3s ease-in;
+    overflow-y: hidden;
+    top: 70px;
+    right: 0px;
   }
-  
-  .dropdownDesktop {
-    float: left;
-    overflow: hidden;
-
+  .navbar .nav-links a {
+    display: block;
   }
-  
-  .dropdownDesktop .dropbtnDesktop {
-    font-size: 16px;  
-    border: none;
-    outline: none;
-    color: white;
-    padding: 14px 16px;
-    background-color: inherit;
-    font-family: inherit;
-    margin: 0;
+ 
+  /* when nav toggle button not checked */
+  .navbar #nav-check:not(:checked) ~ .nav-links {
+    height: 0px;
   }
-  
-  .navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
-    background-color: red;
+ 
+  /* when nav toggle button is checked */
+  .navbar #nav-check:checked ~ .nav-links {
+    height: fit-content;
+    overflow-y: auto;
   }
-  
-  .dropdown-contentDesktop {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
+  .navbar .nav-links .loginBtn {
+    padding: 10px 40px ;
+    margin: 20px;
+    font-size:  18px;
+    font-weight: bold;
+    color: rgb(9, 14, 90);
   }
-  
-  .dropdown-contentDesktop a {
+  /* Responsive dropdown code */
+  .navbar .nav-links .dropdown, .navbar .nav-links .dropdown2 {
     float: none;
-    color: black;
-    padding: 12px 16px;
-    text-decoration: none;
-    display: block;
-    text-align: left;
+    width: 100%;
   }
-  
-  .dropdown-contentDesktop a:hover {
-    background-color: #ddd;
-  }
-  
-  .dropdownDesktop:hover .dropdown-contentDesktop {
-    display: block;
-  }
-  
-  
-  
-  
-   /* .mobileTopMenu{
-    position: absolute;
-    top:0;
-    left:0;
-    width:100%;
-   } */
-  .dropdown:hover .dropdown-content {
-    display: block;
-    background-color: #ddd;
-  }
-  .dropdown-content a:hover {
-    background-color: #ddd;
-  }
-  .dropdown-content {
-    display: none;
-    position: absolute;
-    z-index: 1;
-  }
-  
-  .dropdown-content a {
-    float: none;
-    text-decoration: none;
-    display: block;
-    text-align: left;
-  }
-  
-  
-  
-  
-  
-  .topnavMobile {
-    overflow: hidden;
-    background-color: #333;
+  .navbar .nav-links .drop-content, .navbar .nav-links .drop-content2 {
     position: relative;
+    background-color: rgb(220, 220, 250);
+    top: 0px;
+    left: 0px;
   }
-  
-  
-  .topnavMobile a, .topnavMobile >div > div {
-    color: white;
-    padding: 14px 16px;
-    text-decoration: none;
-    font-size: 17px;
-    display: block;
-  }
-  
-  .topnavMobile a.icon {
-    background: black;
-    display: block;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-  
-  .topnavMobile a:hover {
-    background-color: #ddd;
-    color: black;
-  }
-  
-  .active {
-    background-color: #aa6204;
-    color: white;
-  }
-  
-  
-    </style>
\ No newline at end of file
+  /* 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: #962727;
+  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/MenuTesting.astro b/src/components/MenuTesting.astro
new file mode 100644
index 0000000..bea98bf
--- /dev/null
+++ b/src/components/MenuTesting.astro
@@ -0,0 +1,243 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Online from "./Online.vue";
+---
+<Online/>
+
+<main class="container-fluid navbar ">
+                                                                <!-- Desktop Menu -->
+    <div class="container mx-auto flex justify-center z-20">
+        <div class="hidden md:block  py-4">
+            <div class="navbar">
+              <a href="/">Home</a>
+              <div class="dropdownDesktop">
+                <button class="dropbtnDesktop">About 
+                  <i class="fa fa-caret-downDesktop"></i>
+                </button>
+                <div class="dropdown-contentDesktop">
+                  <a href="/aboutus">About Us</a>
+                  <a href="/chairman-message">Chairman Message</a>
+                  <a href="/administrator">Adninistrator</a>
+                </div>
+              </div>
+              <a href="https://center.rgyci.org/center_list">Center List</a>
+              <div class="dropdownDesktop">
+                <button class="dropbtnDesktop">Courses 
+                  <i class="fa fa-caret-downDesktop"></i>
+                </button>
+                <div class="dropdown-contentDesktop z-20">
+                  <a href="https://online.rgyci.org/login/index.php">Online Courses</a>
+                  <a href="#">Offline Courses</a>
+                </div>
+              </div> 
+              <div class="dropdownDesktop ">
+                <button class="dropbtnDesktop">Student Zone 
+                    <i class="fa fa-caret-downDesktop"></i>
+                </button>
+                <div class="dropdown-contentDesktop z-20">
+                    <a href="https://center.rgyci.org/check_registration">Check Registration</a>
+                    <a href="https://center.rgyci.org/checkresult">Result</a>
+                    <a href="https://center.rgyci.org/chekcertificate">Certificate Verification</a>
+                    <a href="https://center.rgyci.org/download">Download</a>
+                    <a href="http://center.rgyci.org/form/exam_center_login">Online Exam</a>
+                    <a href="https://center.rgyci.org/form/student_placement">Student's Placement Form</a>
+                    <a href="/library">Library</a>
+                </div>
+            </div>
+            <div class="dropdownDesktop">
+                <button class="dropbtnDesktop">Franchise 
+                    <i class="fa fa-caret-downDesktop"></i>
+                </button>
+                <div class="dropdown-contentDesktop">
+                    <a href="https://center.rgyci.org/how-to-get-franchisee-with-rgyci">Procedure</a>
+                    <a href="https://center.rgyci.org/form/franchise_enquiry">Enquiry</a>
+                    <a href="https://center.rgyci.org/form/companies_placement">Company's Placement Form</a>
+                </div>
+            </div>
+            <a href="/gallery">Gallery</a>
+            <a href="contactus">Contact Us</a>
+            <div class="dropdownDesktop">
+                <button class="dropbtnDesktop">Login 
+                    <i class="fa fa-caret-downDesktop"></i>
+                </button>
+                <div class="dropdown-contentDesktop">
+                    <a href="https://center.rgyci.org/form/center_login">Center</a>
+                    <a href="https://center.rgyci.org/form/teacher_login">Teacher</a>
+                </div>
+            </div>
+          </div>
+    </div>
+    </div>
+        
+                                                            <!-- Mobile Menu -->
+    <div class="mobileTopMenu block md:hidden zindex">
+      <div class="topnavMobile zindex z-20">
+        <a href="#home" class="active">Logo</a>
+        <div id="mobileMenu" class="hidden">
+          <a href="#news">News</a>
+          <a href="#contact">Contact</a>
+          <div class="dropdown">
+            <button class="dropbtn">Dropdown 
+              &#11183
+            </button>
+            <div class="dropdown-content zindex z-20">
+              <a href="#">Link 1</a>
+              <a href="#">Link 2Link 2Link 2</a>
+              <a href="#">Link 3</a>
+            </div>
+          </div> 
+      
+
+        </div>
+        <a  class="icon" onclick="openMobileMenu()">
+          &#9776;
+        </a>
+      </div>
+    </div>
+  </main>
+  
+  
+  
+  <script is:inline>
+    function openMobileMenu() {
+      var element = document.getElementById("mobileMenu");
+      element.classList.toggle("hidden");
+    }
+  </script>
+  <style>
+    .zindex {
+      z-index: 1;
+    }
+    .navbar {
+    overflow: hidden;
+    background-color: rgb(150, 39, 39);
+    /* position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0; */
+  }
+  
+  .navbar a {
+    float: left;
+    font-size: 16px;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+  }
+  
+  .dropdownDesktop {
+    float: left;
+    overflow: hidden;
+
+  }
+  
+  .dropdownDesktop .dropbtnDesktop {
+    font-size: 16px;  
+    border: none;
+    outline: none;
+    color: white;
+    padding: 14px 16px;
+    background-color: inherit;
+    font-family: inherit;
+    margin: 0;
+  }
+  
+  .navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
+    background-color: red;
+  }
+  
+  .dropdown-contentDesktop {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+  
+  .dropdown-contentDesktop a {
+    float: none;
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+  }
+  
+  .dropdown-contentDesktop a:hover {
+    background-color: #ddd;
+  }
+  
+  .dropdownDesktop:hover .dropdown-contentDesktop {
+    display: block;
+  }
+  
+  
+  
+  
+   /* .mobileTopMenu{
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+   } */
+  .dropdown:hover .dropdown-content {
+    display: block;
+    background-color: #ddd;
+  }
+  .dropdown-content a:hover {
+    background-color: #ddd;
+  }
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    z-index: 1;
+  }
+  
+  .dropdown-content a {
+    float: none;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+  }
+  
+  
+  
+  
+  
+  .topnavMobile {
+    overflow: hidden;
+    background-color: #333;
+    position: relative;
+  }
+  
+  
+  .topnavMobile a, .topnavMobile >div > div {
+    color: white;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+    display: block;
+  }
+  
+  .topnavMobile a.icon {
+    background: black;
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  
+  .topnavMobile a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+  
+  .active {
+    background-color: #aa6204;
+    color: white;
+  }
+  
+  
+    </style>
\ No newline at end of file
diff --git a/src/components/Online.vue b/src/components/Online.vue
index 319a231..8714d87 100644
--- a/src/components/Online.vue
+++ b/src/components/Online.vue
@@ -1,5 +1,5 @@
 <template>
-    <p class="text-center text-xl bg-red-800 py-1 text-white"><span class="shape px-2 text-blue-700 rounded-md">New</span> <a class="hover:underline" href="https://online.rgyci.org/">Online Learning</a></p>
+    <p class="text-center text-xl bg-red-800  text-white border-b-2 border-red-900 py-4"><span class="shape px-2 text-blue-700 rounded-md">New</span> <a class="hover:underline" href="https://online.rgyci.org">Online Computer Training</a></p>
 </template>
 <style>
     .shape {
diff --git a/src/components/SwiperOne.jsx b/src/components/SwiperOne.jsx
index 25a5988..d6db254 100644
--- a/src/components/SwiperOne.jsx
+++ b/src/components/SwiperOne.jsx
@@ -11,12 +11,13 @@ export default function SwiperOne() {
       <Swiper
           modules={[Navigation, Pagination, Scrollbar, A11y, ]}
           spaceBetween={0} slidesPerView={1}
+          
           navigation
           pagination={{ clickable: true }}
           // onSwiper={(swiper) => console.log(swiper)}
           // onSlideChange={() => console.log('slide change')}
           >
-          <SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/8.jpg" alt="" /></SwiperSlide>
+          <SwiperSlide><img class="" style={{ width: '100%', zIndex:1}} src="/img/sld/8.jpg" alt="" /></SwiperSlide>
           <SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/1.jpg" alt="" /></SwiperSlide>
           <SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/2.jpg" alt="" /></SwiperSlide>
           <SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/3.jpg" alt="" /></SwiperSlide>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4095265..1dc4b4c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,22 +1,24 @@
 ---
 import Header from '../components/Header.astro';
 import Layout from '../layouts/Layout.astro';
+import Online from '../components/Online.vue';
 import Menu from '../components/Menu.astro';
+import IndexSlider from '../components/IndexSlider.vue';
 import Mainfooter from '../components/Mainfooter.astro';
 import SwiperOne from '../components/SwiperOne';
 ---
 
-<Layout title="Welcome to RGYCSM">
+<Layout title="Welcome to RGYCI">
     <Header/>
+    <!-- <Online /> -->
 	<Menu />
-    <section class="">
-    </section>
 	<main class="">
+        <IndexSlider client:visible/>
         <!-- <section>
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
                 <div class="grid box1 shadow-2xl rounded-tr-full rounded-br-full border-8 border-gray-300">
                     <p class="text-3xl font-bold pt-6 px-6"><span class="underline decoration-4 decoration-red-600">About</span> Us</p>
-                    <p class="w-11/12 text-justify pt-4 px-4 text-xl leading-tight ">The Rajeev Gandhi Youth Computer Saksharta Mission (RGYCSM) Computer Education, Distance Education Institute of with brand name RGYCSM started its Journey in March 2014. The main function of the Trust is to provide higher technical education for every group of urban and rural areas to get success in computer revolution which is the main dream of Indian Govt. RGYCSM is a non Commercial organization engaged in the work of social welfare, started with a mission to education service and spread literacy to all class of people.
+                    <p class="w-11/12 text-justify pt-4 px-4 text-xl leading-tight ">The Rajeev Gandhi Youth Computer Saksharta Mission (RGYCI) Computer Education, Distance Education Institute of with brand name RGYCI started its Journey in March 2014. The main function of the Trust is to provide higher technical education for every group of urban and rural areas to get success in computer revolution which is the main dream of Indian Govt. RGYCI is a non Commercial organization engaged in the work of social welfare, started with a mission to education service and spread literacy to all class of people.
                     <br>
                     <div class="p-4"><button class="bg-yellow-400 px-4 py-2 rounded-full shadow-2xl text-white text-xl">Read More</button></div>
                     </p>
@@ -28,97 +30,99 @@ import SwiperOne from '../components/SwiperOne';
             <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-16 ">
                 <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none cursor-pointer">
                     <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img1.jpg" alt="">
                         <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">06 Months</button>
                         </div>
                     </div>
                 </div>
                 <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
                     <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
-                        <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img2.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DCAAE (Diploma In Computer Application & Accounting Expert)</h1>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
                         </div>
                     </div>
                 </div>
                 <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
                     <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
-                        <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img3.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">ADCHNE (Advance Diploma In Computer Hardware & Networking Engineering)</h1>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
                         </div>
                     </div>
                 </div>
                 <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
                     <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/image4.png" alt="">
-                        <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img4.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">ADCS (Advance Diploma In Cyber Security)</h1>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
                         </div>
                     </div>
                 </div>
                 <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
                     <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/image5.png" alt="">
-                        <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img5.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">ADOAP (Advance Diploma In Office Accounts & Publishing)</h1>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
                         </div>
                     </div>
                 </div>
                 <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
                     <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/image6.png" alt="">
-                        <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img6.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">ADCA (Advance Diploma In Computer Application)</h1>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
                         </div>
                     </div>
                 </div>
                 <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
                     <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
-                        <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img7.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">CCLE (Computer Chip Level Engineering)</h1>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
                         </div>
                     </div>
                 </div>
                 <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
                     <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
-                        <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img8.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DCAMS (Diploma In Computer Application & Multimedia Specialist)</h1>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
                         </div>
                     </div>
                 </div>
                 <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
                     <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
-                        <h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img9.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DCCTT (Diploma In Computer Teacher Training)</h1>
                         <div class="flex place-content-between p-4 button-place hr">
                             <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
-        <SwiperOne client:load />
+        <!-- <IndexSlider client:visible/> -->
+            <!-- <SwiperOne client:load /> -->
+        
                                     <!-- image gallery -->
         <section class="container mx-auto">
             <p class="text-4xl font-bold text-center py-16">Im<span class="underline decoration-4 decoration-red-600">age Gall</span>ery</p>
@@ -289,7 +293,7 @@ import SwiperOne from '../components/SwiperOne';
     }
     .img-size {
         width: 300px;
-        height: 170px;
+        height: 200px;
     }
     .button-place {
         position: sticky;
@@ -298,7 +302,7 @@ import SwiperOne from '../components/SwiperOne';
   position: fixed;
     }
     .h1-text {
-        font-size: 24px;
+        font-size: 20px;
         color: black;
     }
     .h1-text:hover {