diff --git a/webseite/assets/js/search.js b/webseite/assets/js/search.js
new file mode 100644
index 0000000..0fa586b
--- /dev/null
+++ b/webseite/assets/js/search.js
@@ -0,0 +1,31 @@
+// Update search function with fallback animation
+function handleSearch() {
+    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+    const topicCards = document.querySelectorAll('.topic-card');
+
+    topicCards.forEach(card => {
+        const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || '';
+        const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || '';
+        const relatedTopics = Array.from(card.querySelectorAll('.related-topics li'))
+            .map(li => li.textContent.toLowerCase())
+            .join(' ');
+
+        const content = `${title} ${description} ${relatedTopics}`;
+
+        if (content.includes(searchTerm)) {
+            card.style.display = 'block';
+            if (window.gsap) {
+                gsap.to(card, {
+                    opacity: 1,
+                    y: 0,
+                    duration: 0.3
+                });
+            } else {
+                card.style.opacity = 1;
+                card.style.transform = 'translateY(0)';
+            }
+        } else {
+            card.style.display = 'none';
+        }
+    });
+}
\ No newline at end of file
diff --git a/webseite/assets/js/sidebar.js b/webseite/assets/js/sidebar.js
new file mode 100644
index 0000000..399b3f4
--- /dev/null
+++ b/webseite/assets/js/sidebar.js
@@ -0,0 +1,83 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const menuToggle = document.querySelector('.menu-toggle');
+    const sidebar = document.querySelector('.sidebar');
+
+    // Function to handle sidebar toggle
+    function toggleSidebar() {
+        sidebar.classList.toggle('active');
+
+        // Add overlay when sidebar is active on mobile/tablet
+        if (window.innerWidth <= 1024) {
+            if (sidebar.classList.contains('active')) {
+                addOverlay();
+            } else {
+                removeOverlay();
+            }
+        }
+    }
+
+    // Function to add overlay
+    function addOverlay() {
+        const overlay = document.createElement('div');
+        overlay.className = 'sidebar-overlay';
+        overlay.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 45;
+                transition: opacity 0.3s ease;
+            `;
+        document.body.appendChild(overlay);
+
+        // Close sidebar when clicking overlay
+        overlay.addEventListener('click', () => {
+            sidebar.classList.remove('active');
+            removeOverlay();
+        });
+
+        // Fade in
+        requestAnimationFrame(() => {
+            overlay.style.opacity = '1';
+        });
+    }
+
+    // Function to remove overlay
+    function removeOverlay() {
+        const overlay = document.querySelector('.sidebar-overlay');
+        if (overlay) {
+            overlay.style.opacity = '0';
+            setTimeout(() => overlay.remove(), 300);
+        }
+    }
+
+    // Add click event to menu toggle
+    menuToggle.addEventListener('click', toggleSidebar);
+
+    // Handle window resize
+    let resizeTimer;
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+            if (window.innerWidth > 1024) {
+                sidebar.classList.remove('active');
+                removeOverlay();
+            }
+        }, 250);
+    });
+});
+
+// Add this right after your existing toggleSidebar function
+function updateMenuVisibility() {
+    const menuToggle = document.querySelector('.menu-toggle');
+    if (window.innerWidth <= 768) { // Smartphone breakpoint
+        menuToggle.style.display = 'flex';
+    } else {
+        menuToggle.style.display = 'none';
+    }
+}
+
+// Add event listeners
+window.addEventListener('resize', updateMenuVisibility);
\ No newline at end of file
diff --git a/webseite/subject.php b/webseite/subject.php
index edc6cef..80adce7 100644
--- a/webseite/subject.php
+++ b/webseite/subject.php
@@ -25,6 +25,8 @@ $topics = $subjectData->topics;
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="assets/js/sidebar.js"></script>
+    <script src="assets/js/search.js"></script>
 </head>
 <body>
 
@@ -51,7 +53,7 @@ $topics = $subjectData->topics;
            oninput="handleSearch()">
 </div>
 
-<div class="main-content">
+<div class="main-content max-w-7xl">
     <div class="container">
 
         <?php
@@ -122,124 +124,6 @@ $topics = $subjectData->topics;
     </div>
 </div>
 
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const menuToggle = document.querySelector('.menu-toggle');
-        const sidebar = document.querySelector('.sidebar');
-
-        // Function to handle sidebar toggle
-        function toggleSidebar() {
-            sidebar.classList.toggle('active');
-
-            // Add overlay when sidebar is active on mobile/tablet
-            if (window.innerWidth <= 1024) {
-                if (sidebar.classList.contains('active')) {
-                    addOverlay();
-                } else {
-                    removeOverlay();
-                }
-            }
-        }
-
-        // Function to add overlay
-        function addOverlay() {
-            const overlay = document.createElement('div');
-            overlay.className = 'sidebar-overlay';
-            overlay.style.cssText = `
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(0, 0, 0, 0.5);
-                z-index: 45;
-                transition: opacity 0.3s ease;
-            `;
-            document.body.appendChild(overlay);
-
-            // Close sidebar when clicking overlay
-            overlay.addEventListener('click', () => {
-                sidebar.classList.remove('active');
-                removeOverlay();
-            });
-
-            // Fade in
-            requestAnimationFrame(() => {
-                overlay.style.opacity = '1';
-            });
-        }
-
-        // Function to remove overlay
-        function removeOverlay() {
-            const overlay = document.querySelector('.sidebar-overlay');
-            if (overlay) {
-                overlay.style.opacity = '0';
-                setTimeout(() => overlay.remove(), 300);
-            }
-        }
-
-        // Add click event to menu toggle
-        menuToggle.addEventListener('click', toggleSidebar);
-
-        // Handle window resize
-        let resizeTimer;
-        window.addEventListener('resize', () => {
-            clearTimeout(resizeTimer);
-            resizeTimer = setTimeout(() => {
-                if (window.innerWidth > 1024) {
-                    sidebar.classList.remove('active');
-                    removeOverlay();
-                }
-            }, 250);
-        });
-    });
-
-    // Add this right after your existing toggleSidebar function
-    function updateMenuVisibility() {
-        const menuToggle = document.querySelector('.menu-toggle');
-        if (window.innerWidth <= 768) { // Smartphone breakpoint
-            menuToggle.style.display = 'flex';
-        } else {
-            menuToggle.style.display = 'none';
-        }
-    }
-
-    // Add event listeners
-    window.addEventListener('resize', updateMenuVisibility);
-
-    // Update search function with fallback animation
-    function handleSearch() {
-        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-        const topicCards = document.querySelectorAll('.topic-card');
-
-        topicCards.forEach(card => {
-            const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || '';
-            const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || '';
-            const relatedTopics = Array.from(card.querySelectorAll('.related-topics li'))
-                .map(li => li.textContent.toLowerCase())
-                .join(' ');
-
-            const content = `${title} ${description} ${relatedTopics}`;
-
-            if (content.includes(searchTerm)) {
-                card.style.display = 'block';
-                if (window.gsap) {
-                    gsap.to(card, {
-                        opacity: 1,
-                        y: 0,
-                        duration: 0.3
-                    });
-                } else {
-                    card.style.opacity = 1;
-                    card.style.transform = 'translateY(0)';
-                }
-            } else {
-                card.style.display = 'none';
-            }
-        });
-    }
-</script>
-
 <!-- Code injected by live-server -->
 </body>
 </html>
diff --git a/webseite/topic.php b/webseite/topic.php
index 46e7f80..0a8933a 100644
--- a/webseite/topic.php
+++ b/webseite/topic.php
@@ -31,6 +31,7 @@ if (!isset($topicData)) {
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="assets/js/sidebar.js"></script>
 </head>
 <body>
 <button class="menu-toggle fixed top-4 left-4 z-50 bg-white h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
@@ -106,91 +107,6 @@ if (!isset($topicData)) {
         </ul>
     </div>
 </main>
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const menuToggle = document.querySelector('.menu-toggle');
-        const sidebar = document.querySelector('.sidebar');
 
-        // Function to handle sidebar toggle
-        function toggleSidebar() {
-            sidebar.classList.toggle('active');
-
-            // Add overlay when sidebar is active on mobile/tablet
-            if (window.innerWidth <= 1024) {
-                if (sidebar.classList.contains('active')) {
-                    addOverlay();
-                } else {
-                    removeOverlay();
-                }
-            }
-        }
-
-        // Function to add overlay
-        function addOverlay() {
-            const overlay = document.createElement('div');
-            overlay.className = 'sidebar-overlay';
-            overlay.style.cssText = `
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(0, 0, 0, 0.5);
-                z-index: 45;
-                transition: opacity 0.3s ease;
-            `;
-            document.body.appendChild(overlay);
-
-            // Close sidebar when clicking overlay
-            overlay.addEventListener('click', () => {
-                sidebar.classList.remove('active');
-                removeOverlay();
-            });
-
-            // Fade in
-            requestAnimationFrame(() => {
-                overlay.style.opacity = '1';
-            });
-        }
-
-        // Function to remove overlay
-        function removeOverlay() {
-            const overlay = document.querySelector('.sidebar-overlay');
-            if (overlay) {
-                overlay.style.opacity = '0';
-                setTimeout(() => overlay.remove(), 300);
-            }
-        }
-
-        // Add click event to menu toggle
-        menuToggle.addEventListener('click', toggleSidebar);
-
-        // Handle window resize
-        let resizeTimer;
-        window.addEventListener('resize', () => {
-            clearTimeout(resizeTimer);
-            resizeTimer = setTimeout(() => {
-                if (window.innerWidth > 1024) {
-                    sidebar.classList.remove('active');
-                    removeOverlay();
-                }
-            }, 250);
-        });
-    });
-
-    // Add this right after your existing toggleSidebar function
-    function updateMenuVisibility() {
-        const menuToggle = document.querySelector('.menu-toggle');
-        if (window.innerWidth <= 768) { // Smartphone breakpoint
-            menuToggle.style.display = 'flex';
-        } else {
-            menuToggle.style.display = 'none';
-        }
-    }
-
-    // Add event listeners
-    window.addEventListener('resize', updateMenuVisibility);
-
-</script>
 </body>
 </html>