diff --git a/webseite/subject.php b/webseite/subject.php
index b781b5f..0d98b74 100644
--- a/webseite/subject.php
+++ b/webseite/subject.php
@@ -146,11 +146,12 @@ $topics = $subjectData->topics;
 
         .container {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
-            gap: 2rem;
+            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); /* Back to original 380px for desktop */
+            gap: 2rem; /* Back to original 2rem gap */
             padding: 2rem;
             max-width: 1600px;
             margin: 0 auto;
+            width: 100%;
         }
 
         .topic-card {
@@ -312,12 +313,76 @@ $topics = $subjectData->topics;
 
             .search-container {
                 left: 0;
+                padding: 0.85rem; /* Match with menu-toggle top */
+                padding-left: 4.5rem; /* Increased space for menu icon */
+            }
+
+            .menu-toggle {
+                display: block;
+            }
+
+            .search-box {
+                width: calc(100% - 1rem); /* Adjust width to account for padding */
+            }
+
+            .container {
+                grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* Slightly smaller for tablets */
+                gap: 1.5rem;
+                padding: 1.5rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                grid-template-columns: 1fr; /* Single column on mobile */
+                gap: 1.5rem;
+                padding: 1rem;
+            }
+
+            .topic-card {
+                margin: 0 1rem; /* Add horizontal margins */
+            }
+
+            .main-content {
+                padding-top: 4rem;
+            }
+
+            .search-container {
+                padding: 0.75rem 1rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .search-container {
+                padding: 0.75rem;
+                padding-left: 4rem; /* Keep space for menu icon */
+            }
+
+            .search-box {
+                font-size: 0.9rem;
+                padding: 0.5rem 0.75rem;
+            }
+
+            .download-links {
+                flex-direction: column;
+            }
+
+            .download-btn {
+                width: 100%;
+            }
+
+            .container {
+                padding: 0.5rem;
+            }
+
+            .topic-card {
+                margin: 0 0.5rem;
             }
         }
 
         .menu-toggle {
             position: fixed;
-            top: 1rem;
+            top: 0.85rem; /* Adjusted to align with search bar */
             left: 1rem;
             z-index: 60;
             background: white;
@@ -327,13 +392,18 @@ $topics = $subjectData->topics;
             cursor: pointer;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
             display: none;
+            width: 42px; /* Fixed width */
+            height: 42px; /* Fixed height */
+            display: flex; /* Added to center icon */
+            align-items: center; /* Added to center icon */
+            justify-content: center; /* Added to center icon */
         }
 
-        @media (max-width: 1024px) {
-            .menu-toggle {
-                display: block;
-            }
+        /* Adjust the menu icon size */
+        .menu-toggle i {
+            font-size: 1.25rem; /* Standardize icon size */
         }
+
         /* Add floating animation for icons */
         @keyframes float {
             0%, 100% { transform: translateY(0); }
@@ -523,15 +593,6 @@ $topics = $subjectData->topics;
     <a href="#" class="nav-link">
         <i class="fas fa-book"></i> Kurse
     </a>
-    <a href="#" class="nav-link">
-        <i class="fas fa-trophy"></i> Erfolge
-    </a>
-    <a href="#" class="nav-link">
-        <i class="fas fa-chart-line"></i> Fortschritt
-    </a>
-    <a href="#" class="nav-link">
-        <i class="fas fa-question-circle"></i> Hilfe
-    </a>
 </nav>
 
 <div class="search-container">
@@ -559,13 +620,13 @@ $topics = $subjectData->topics;
                         <h4>Verwandte Themen:</h4>
                         <ul>
                             <?php
-                                foreach ($topicData->relatedTopics as $relatedTopic) {
-                                    ?>
+                            foreach ($topicData->relatedTopics as $relatedTopic) {
+                                ?>
 
-                                    <li><?php echo($relatedTopic); ?></li>
+                                <li><?php echo($relatedTopic); ?></li>
 
-                                    <?php
-                                }
+                                <?php
+                            }
                             ?>
                         </ul>
                     </div>
@@ -574,17 +635,17 @@ $topics = $subjectData->topics;
                     <h4>Übungen herunterladen:</h4>
                     <div class="download-links">
                         <?php
-                            foreach ($topicData->files as $fileName) {
-                                ?>
+                        foreach ($topicData->files as $fileName) {
+                            ?>
 
 
-                                <a href="<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName")?>" target="_blank" download class="download-btn">
-                                    <i class="fas fa-file-pdf"></i>
-                                    <?php echo($fileName); ?>
-                                </a>
+                            <a href="<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName")?>" target="_blank" download class="download-btn">
+                                <i class="fas fa-file-pdf"></i>
+                                <?php echo($fileName); ?>
+                            </a>
 
-                                <?php
-                            }
+                            <?php
+                        }
                         ?>
                     </div>
                 </div>
@@ -671,9 +732,11 @@ $topics = $subjectData->topics;
         const progressBars = document.querySelectorAll('.progress-bar');
         progressBars.forEach(bar => {
             const progressElement = bar.querySelector('.progress');
-            setTimeout(() => {
-                progressElement.style.width = '100%';
-            }, 300);
+            if (progressElement) { // Add null check
+                setTimeout(() => {
+                    progressElement.style.width = '100%';
+                }, 300);
+            }
         });
     });
 
@@ -714,29 +777,42 @@ $topics = $subjectData->topics;
     // Add card hover effects
     document.querySelectorAll('.topic-card').forEach(card => {
         card.addEventListener('mouseenter', () => {
-            gsap.to(card.querySelector('.topic-icon'), {
-                rotate: -10,
-                scale: 1.2,
-                duration: 0.3
-            });
+            const icon = card.querySelector('.topic-icon');
+            if (window.gsap) {
+                gsap.to(icon, {
+                    rotate: -10,
+                    scale: 1.2,
+                    duration: 0.3
+                });
+            } else {
+                // Fallback animation using CSS
+                icon.style.transform = 'rotate(-10deg) scale(1.2)';
+            }
         });
 
         card.addEventListener('mouseleave', () => {
-            gsap.to(card.querySelector('.topic-icon'), {
-                rotate: 0,
-                scale: 1,
-                duration: 0.3
-            });
+            const icon = card.querySelector('.topic-icon');
+            if (window.gsap) {
+                gsap.to(icon, {
+                    rotate: 0,
+                    scale: 1,
+                    duration: 0.3
+                });
+            } else {
+                // Fallback animation using CSS
+                icon.style.transform = 'none';
+            }
         });
     });
 
+    // 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 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(' ');
@@ -745,12 +821,16 @@ $topics = $subjectData->topics;
 
             if (content.includes(searchTerm)) {
                 card.style.display = 'block';
-                // Optional: Add animation for appearing cards
-                gsap.to(card, {
-                    opacity: 1,
-                    y: 0,
-                    duration: 0.3
-                });
+                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';
             }