diff --git a/index.html b/index.html
index 5601ae0..b15224f 100644
--- a/index.html
+++ b/index.html
@@ -565,6 +565,32 @@
         </div>
     </section>
 
+
+        <div id="slider-placeholder"></div>
+
+        <script>
+        fetch("slider.html")
+        .then(res => res.text())
+        .then(data => {
+            const placeholder = document.getElementById("slider-placeholder");
+            placeholder.innerHTML = data;
+
+            // Run the slider initialization function
+            const scripts = placeholder.querySelectorAll("script");
+            scripts.forEach(oldScript => {
+            if (oldScript.textContent.includes("initSlider")) {
+                const newScript = document.createElement("script");
+                newScript.textContent = oldScript.textContent + "\ninitSlider();";
+                document.body.appendChild(newScript);
+            }
+            });
+        })
+        .catch(err => console.error("Failed to load slider:", err));
+        </script>
+
+
+
+
     <section class="our-numbers">
         <h2>Our Numbers</h2>
 
@@ -601,6 +627,9 @@
         </div>
     </section>
 
+
+    
+
     <div id="footer-placeholder"></div>
     <script>
         fetch("footer.html")
@@ -613,6 +642,9 @@
             window.location.href = "/login";
         }
     </script>
+
+
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/slider.html b/slider.html
index 3ccc4df..516594e 100644
--- a/slider.html
+++ b/slider.html
@@ -1,5 +1,22 @@
+<div class="slider-container">
+  <div class="slider-wrapper">
+    <div class="slider-track" id="sliderTrack">
+      <div class="slide"></div>
+      <div class="slide"></div>
+      <div class="slide"></div>
+      <div class="slide"></div>
+    </div>
+  </div>
+
+  <button class="nav-button prev-btn" id="prevBtn"></button>
+  <button class="nav-button next-btn" id="nextBtn"></button>
+
+  <div class="dots-container" id="dotsContainer"></div>
+</div>
+
 <style>
     .slider-container {
+        margin: 0 auto; 
         max-width: 800px;
         width: 100%;
         position: relative;
@@ -139,115 +156,92 @@
     }
 </style>
 
-<body>
-    <div class="slider-container">
-        <div class="slider-wrapper">
-            <div class="slider-track" id="sliderTrack">
-                <div class="slide"></div>
-                <div class="slide"></div>
-                <div class="slide"></div>
-                <div class="slide"></div>
-            </div>
-        </div>
 
-        <button class="nav-button prev-btn" id="prevBtn"></button>
-        <button class="nav-button next-btn" id="nextBtn"></button>
+<script>
+  function initSlider() {
+    class SimpleSlider {
+      constructor() {
+        this.track = document.getElementById('sliderTrack');
+        this.slides = document.querySelectorAll('.slide');
+        this.prevBtn = document.getElementById('prevBtn');
+        this.nextBtn = document.getElementById('nextBtn');
+        this.dotsContainer = document.getElementById('dotsContainer');
 
-        <div class="dots-container" id="dotsContainer"></div>
-    </div>
+        this.currentIndex = 0;
+        this.totalSlides = this.slides.length;
 
-    <script>
-        class SimpleSlider {
-            constructor() {
-                this.track = document.getElementById('sliderTrack');
-                this.slides = document.querySelectorAll('.slide');
-                this.prevBtn = document.getElementById('prevBtn');
-                this.nextBtn = document.getElementById('nextBtn');
-                this.dotsContainer = document.getElementById('dotsContainer');
+        this.init();
+      }
 
-                this.currentIndex = 0;
-                this.totalSlides = this.slides.length;
+      init() {
+        this.createDots();
+        this.updateSlider();
+        this.bindEvents();
+        this.startAutoPlay();
+      }
 
-                this.init();
-            }
-
-            init() {
-                this.createDots();
-                this.updateSlider();
-                this.bindEvents();
-                this.startAutoPlay();
-            }
-
-            createDots() {
-                for (let i = 0; i < this.totalSlides; i++) {
-                    const dot = document.createElement('div');
-                    dot.classList.add('dot');
-                    if (i === 0) dot.classList.add('active');
-                    dot.addEventListener('click', () => this.goToSlide(i));
-                    this.dotsContainer.appendChild(dot);
-                }
-            }
-
-            updateSlider() {
-                const translateX = -this.currentIndex * 100;
-                this.track.style.transform = `translateX(${translateX}%)`;
-
-                const dots = this.dotsContainer.querySelectorAll('.dot');
-                dots.forEach((dot, index) => {
-                    dot.classList.toggle('active', index === this.currentIndex);
-                });
-            }
-
-            nextSlide() {
-                this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
-                this.updateSlider();
-            }
-
-            prevSlide() {
-                this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
-                this.updateSlider();
-            }
-
-            goToSlide(index) {
-                this.currentIndex = index;
-                this.updateSlider();
-            }
-
-            startAutoPlay() {
-                setInterval(() => {
-                    this.nextSlide();
-                }, 4000);
-            }
-
-            bindEvents() {
-                this.nextBtn.addEventListener('click', () => this.nextSlide());
-                this.prevBtn.addEventListener('click', () => this.prevSlide());
-
-                // Keyboard navigation
-                document.addEventListener('keydown', (e) => {
-                    if (e.key === 'ArrowLeft') this.prevSlide();
-                    if (e.key === 'ArrowRight') this.nextSlide();
-                });
-
-                // Touch navigation for mobile
-                let startX = 0;
-                this.track.addEventListener('touchstart', (e) => {
-                    startX = e.touches[0].clientX;
-                });
-
-                this.track.addEventListener('touchend', (e) => {
-                    const endX = e.changedTouches[0].clientX;
-                    const diff = startX - endX;
-
-                    if (Math.abs(diff) > 50) {
-                        if (diff > 0) this.nextSlide();
-                        else this.prevSlide();
-                    }
-                });
-            }
+      createDots() {
+        for (let i = 0; i < this.totalSlides; i++) {
+          const dot = document.createElement('div');
+          dot.classList.add('dot');
+          if (i === 0) dot.classList.add('active');
+          dot.addEventListener('click', () => this.goToSlide(i));
+          this.dotsContainer.appendChild(dot);
         }
+      }
 
-        document.addEventListener('DOMContentLoaded', () => {
-            new SimpleSlider();
+      updateSlider() {
+        const translateX = -this.currentIndex * 100;
+        this.track.style.transform = `translateX(${translateX}%)`;
+
+        const dots = this.dotsContainer.querySelectorAll('.dot');
+        dots.forEach((dot, index) => {
+          dot.classList.toggle('active', index === this.currentIndex);
         });
-    </script>
\ No newline at end of file
+      }
+
+      nextSlide() {
+        this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
+        this.updateSlider();
+      }
+
+      prevSlide() {
+        this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
+        this.updateSlider();
+      }
+
+      goToSlide(index) {
+        this.currentIndex = index;
+        this.updateSlider();
+      }
+
+      startAutoPlay() {
+        setInterval(() => {
+          this.nextSlide();
+        }, 4000);
+      }
+
+      bindEvents() {
+        this.nextBtn.addEventListener('click', () => this.nextSlide());
+        this.prevBtn.addEventListener('click', () => this.prevSlide());
+
+        let startX = 0;
+        this.track.addEventListener('touchstart', (e) => {
+          startX = e.touches[0].clientX;
+        });
+
+        this.track.addEventListener('touchend', (e) => {
+          const endX = e.changedTouches[0].clientX;
+          const diff = startX - endX;
+
+          if (Math.abs(diff) > 50) {
+            if (diff > 0) this.nextSlide();
+            else this.prevSlide();
+          }
+        });
+      }
+    }
+
+    new SimpleSlider();
+  }
+</script>
