diff --git a/webseite/assets/css/subject.css b/webseite/assets/css/subject.css
index fb9b0fe..de96c61 100644
--- a/webseite/assets/css/subject.css
+++ b/webseite/assets/css/subject.css
@@ -1,4 +1,14 @@
 /* Subject page styles */
+
+/* Corporate Design Colors */
+:root {
+    --primary-color: #5265A0; /* HSGG Blau */
+    --secondary-color: #323966; /* Dunkel Blau */
+    --background-color: #F3F4F6; /* Gray-50 */
+    --text-color: #1F2937; /* Gray-900 */
+    --accent-color: #62a1f4; /* Green */
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -8,7 +18,6 @@
 
 body {
     min-height: 100vh;
-    display: flex;
     overflow-x: hidden;
 }
 
@@ -107,11 +116,11 @@ body {
 
 .topic-card {
     border-radius: 20px;
-    padding: 2rem;
+    padding: 1.5rem;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.1);
     transform: translateY(0);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
     box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -133,8 +142,8 @@ body {
 
 .topic-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    /*box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);*/
 }
 
 .topic-card:hover::before {
@@ -144,7 +153,6 @@ body {
 .topic-header {
     display: flex;
     align-items: center;
-    margin-bottom: 1.5rem;
     position: relative;
 }
 
@@ -163,7 +171,6 @@ body {
 .topic-description {
     font-size: 1rem;
     line-height: 1.7;
-    margin-bottom: 1.5rem;
 }
 
 .related-topics {
@@ -202,8 +209,7 @@ body {
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    transform: translateY(0);  /* Set initial transform state */
-    transition: all 0.2s ease;
+    transform: translateY(0); /* Set initial transform state */
 }
 
 .download-btn:hover {
@@ -234,6 +240,7 @@ body {
     .search-container {
         width: 100%;
     }
+
     .menu-toggle {
         display: flex !important;
     }
@@ -292,8 +299,12 @@ body {
 
 /* Add floating animation for icons */
 @keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
 }
 
 .theme-toggle:hover {
@@ -313,6 +324,7 @@ body {
 }
 
 .download-section h4 {
+    color: var(--primary-color);
     margin-bottom: 1rem;
     font-size: 1rem;
 }
@@ -323,22 +335,6 @@ body {
     flex-wrap: wrap;
 }
 
-.download-btn {
-    color: white;
-    padding: 0.75rem 1.25rem;
-    border-radius: 10px;
-    text-decoration: none;
-    font-size: 0.9rem;
-    transition: all 0.2s ease;
-    backdrop-filter: blur(5px);
-    flex: 1;
-    min-width: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-}
-
 .download-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -390,4 +386,4 @@ body {
 .topic-card:hover {
     transform: translateY(-5px) scale(1.01);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-}
+}
\ No newline at end of file
diff --git a/webseite/assets/css/topic.css b/webseite/assets/css/topic.css
index 5437597..4721a8f 100644
--- a/webseite/assets/css/topic.css
+++ b/webseite/assets/css/topic.css
@@ -1,3 +1,12 @@
+/* Corporate Design Colors */
+:root {
+    --primary-color: #5265A0; /* HSGG Blau */
+    --secondary-color: #323966; /* Dunkel Blau */
+    --background-color: #F3F4F6; /* Gray-50 */
+    --text-color: #1F2937; /* Gray-900 */
+    --accent-color: #62a1f4; /* Green */
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -7,7 +16,6 @@
 
 body {
     min-height: 100vh;
-    display: flex;
     overflow-x: hidden;
 }
 
@@ -60,6 +68,7 @@ body {
 /* Main Content Styles */
 .main-content {
     margin-left: 280px;
+    width: calc(100% - 280px);
     padding: 2rem;
     flex: 1;
 }
@@ -70,7 +79,8 @@ body {
     border-radius: 20px;
     padding: 2rem;
     margin-bottom: 2rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    /*box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);*/
+    box-shadow: 2px 4px 6px 2px rgba(0, 0, 0, 0.1);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -126,7 +136,7 @@ body {
 .exercise-section {
     padding: 1.5rem;
     border-radius: 12px;
-    color: white;
+    /*color: white;*/
     margin-top: 2rem;
     position: relative;
     overflow: hidden;
@@ -148,7 +158,7 @@ body {
     align-items: center;
     gap: 0.5rem;
     background: rgba(255, 255, 255, 0.1);
-    color: white;
+    /*color: white;*/
     padding: 0.75rem 1.25rem;
     border-radius: 10px;
     text-decoration: none;
@@ -163,7 +173,7 @@ body {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
     .sidebar {
         transform: translateX(-100%);
     }
@@ -174,6 +184,8 @@ body {
 
     .main-content {
         margin-left: 0;
+        width: 100%;
+        padding: 1rem;
     }
 }
 
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..a500929
--- /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 <= 1024) { // 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/classes/SubjectData.php b/webseite/classes/SubjectData.php
index 7f79d4f..87c9db0 100644
--- a/webseite/classes/SubjectData.php
+++ b/webseite/classes/SubjectData.php
@@ -28,11 +28,6 @@ class SubjectData
      */
     public string $color;
 
-    /**
-     * @var string Text des Knopfes der auf die Fachseite weiterführt, nur reiner Text
-     */
-    public string $buttonText;
-
     /**
      * @var string Icon des Faches als Font-Awesome CSS-Klasse
      */
@@ -54,6 +49,11 @@ class SubjectData
 
         $subjectDirectory = "config/subjects";
         $subjectNames = scandir($subjectDirectory);
+
+        usort($subjectNames, function ($a, $b) {
+            return strcmp($a, $b);
+        });
+
         foreach ($subjectNames as $subjectName) {
             if ($subjectName == "." || $subjectName == "..") {
                 continue;
@@ -84,7 +84,7 @@ class SubjectData
         $subjectDirectory = "config/subjects/$subjectId";
         $filename = "$subjectDirectory/properties.json";
         $data = Util::parseJsonFromFile($filename);
-        if(!isset($data)) {
+        if (!isset($data)) {
             return null;
         }
 
@@ -108,12 +108,6 @@ class SubjectData
             return null;
         }
 
-        if (isset($data->buttonText)) {
-            $result->buttonText = $data->buttonText;
-        } else {
-            return null;
-        }
-
         if (isset($data->icon)) {
             $result->icon = $data->icon;
         } else {
diff --git a/webseite/classes/TopicData.php b/webseite/classes/TopicData.php
index 6954a24..66bbac4 100644
--- a/webseite/classes/TopicData.php
+++ b/webseite/classes/TopicData.php
@@ -54,6 +54,11 @@ class TopicData
 
         $topicDirectory = "config/subjects/$subjectId/topics";
         $topicNames = scandir($topicDirectory);
+
+        usort($topicNames, function ($a, $b) {
+            return strcmp($a, $b);
+        });
+
         foreach ($topicNames as $topicName) {
             if ($topicName == "." || $topicName == "..") {
                 continue;
@@ -85,7 +90,7 @@ class TopicData
         $topicsDirectory = "config/subjects/$subjectId/topics";
         $topicDataDirectory = "$topicsDirectory/$topicId";
         $data = Util::parseJsonFromFile("$topicDataDirectory/properties.json");
-        if(!isset($data)) {
+        if (!isset($data)) {
             return null;
         }
 
diff --git a/webseite/classes/Util.php b/webseite/classes/Util.php
index 0df7596..e83349f 100644
--- a/webseite/classes/Util.php
+++ b/webseite/classes/Util.php
@@ -41,7 +41,7 @@ class Util
     static function parseJsonFromFile(string $filename): mixed
     {
         $content = self::readFileContent($filename);
-        if(!isset($content)) {
+        if (!isset($content)) {
             return null;
         }
         return json_decode($content);
diff --git a/webseite/config/subjects/deutsch/properties.json b/webseite/config/subjects/deutsch/properties.json
index 08c572e..099226f 100644
--- a/webseite/config/subjects/deutsch/properties.json
+++ b/webseite/config/subjects/deutsch/properties.json
@@ -2,6 +2,5 @@
   "displayName": "Deutsch",
   "description": "Deutsch ist rot",
   "color": "#ef4444",
-  "buttonText": "Erfahre von einem ungeheuren Ungeziefer",
   "icon": "fa-book"
 }
\ No newline at end of file
diff --git a/webseite/config/subjects/deutsch/topics/topic6/article.html b/webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/article.html
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic6/article.html
rename to webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/article.html
diff --git a/webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/exercise1.pdf b/webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/exercise1.pdf differ
diff --git a/webseite/config/subjects/deutsch/topics/topic1/image.png b/webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/image.png
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic1/image.png
rename to webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/image.png
diff --git a/webseite/config/subjects/deutsch/topics/topic6/properties.json b/webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/properties.json
similarity index 91%
rename from webseite/config/subjects/deutsch/topics/topic6/properties.json
rename to webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/properties.json
index a8e8fd4..eb6817d 100644
--- a/webseite/config/subjects/deutsch/topics/topic6/properties.json
+++ b/webseite/config/subjects/deutsch/topics/adverbiale-bestimmung/properties.json
@@ -3,7 +3,7 @@
   "icon": "fa-map-pin",
   "description": "Adverbiale Bestimmungen sind Satzteile, die zusätzliche Informationen über Umstände wie Zeit, Ort, Grund oder Art und Weise geben und dadurch die Handlung des Satzes genauer beschreiben.",
   "relatedTopics": [
-    "topic2", "topic3"
+    "wortarten", "vier-faelle"
   ],
   "files": [
     "exercise1.pdf"
diff --git a/webseite/config/subjects/deutsch/topics/topic1/article.html b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/article.html
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic1/article.html
rename to webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/article.html
diff --git a/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise1.pdf b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise1.pdf differ
diff --git a/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise2.pdf b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise2.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise2.pdf differ
diff --git a/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise3.pdf b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise3.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/exercise3.pdf differ
diff --git a/webseite/config/subjects/deutsch/topics/topic2/image.png b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/image.png
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic2/image.png
rename to webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/image.png
diff --git a/webseite/config/subjects/deutsch/topics/topic1/img.png b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/img.png
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic1/img.png
rename to webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/img.png
diff --git a/webseite/config/subjects/deutsch/topics/topic1/properties.json b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/properties.json
similarity index 80%
rename from webseite/config/subjects/deutsch/topics/topic1/properties.json
rename to webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/properties.json
index c60244e..3372f25 100644
--- a/webseite/config/subjects/deutsch/topics/topic1/properties.json
+++ b/webseite/config/subjects/deutsch/topics/geschichten-erzaehlen/properties.json
@@ -3,9 +3,9 @@
   "icon": "fa-feather-pointed",
   "description": "Das Thema \"Geschichten erzählen\" umfasst das kreative Gestalten und Vermitteln von Erlebnissen oder Fantasien durch eine spannende Handlung, interessante Charaktere und lebendige Beschreibungen, um die Zuhörer oder Leser zu fesseln.",
   "relatedTopics": [
-    "topic5", "topic4"
+    "satzglieder", "personalpronomen"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf",  "exercise3.pdf"
   ]
 }
\ No newline at end of file
diff --git a/webseite/config/subjects/deutsch/topics/topic4/article.html b/webseite/config/subjects/deutsch/topics/personalpronomen/article.html
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic4/article.html
rename to webseite/config/subjects/deutsch/topics/personalpronomen/article.html
diff --git a/webseite/config/subjects/deutsch/topics/personalpronomen/exercise1.pdf b/webseite/config/subjects/deutsch/topics/personalpronomen/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/deutsch/topics/personalpronomen/exercise1.pdf differ
diff --git a/webseite/config/subjects/deutsch/topics/topic3/image.png b/webseite/config/subjects/deutsch/topics/personalpronomen/image.png
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic3/image.png
rename to webseite/config/subjects/deutsch/topics/personalpronomen/image.png
diff --git a/webseite/config/subjects/deutsch/topics/topic4/img.png b/webseite/config/subjects/deutsch/topics/personalpronomen/img.png
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic4/img.png
rename to webseite/config/subjects/deutsch/topics/personalpronomen/img.png
diff --git a/webseite/config/subjects/deutsch/topics/topic4/properties.json b/webseite/config/subjects/deutsch/topics/personalpronomen/properties.json
similarity index 89%
rename from webseite/config/subjects/deutsch/topics/topic4/properties.json
rename to webseite/config/subjects/deutsch/topics/personalpronomen/properties.json
index 7b94a21..eec49d2 100644
--- a/webseite/config/subjects/deutsch/topics/topic4/properties.json
+++ b/webseite/config/subjects/deutsch/topics/personalpronomen/properties.json
@@ -3,7 +3,7 @@
   "icon": "fa-person",
   "description": "Personalpronomen sind Wörter, die anstelle von Personen oder Dingen verwendet werden, wie zum Beispiel \"ich\", \"du\", \"er\", \"sie\" oder \"es\", um Wiederholungen zu vermeiden und Sätze flüssiger zu gestalten.",
   "relatedTopics": [
-    "topic2", "topic1"
+    "wortarten", "geschichten-erzaehlen"
   ],
   "files": [
     "exercise1.pdf"
diff --git a/webseite/config/subjects/deutsch/topics/topic5/article.html b/webseite/config/subjects/deutsch/topics/satzglieder/article.html
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic5/article.html
rename to webseite/config/subjects/deutsch/topics/satzglieder/article.html
diff --git a/webseite/config/subjects/deutsch/topics/satzglieder/exercise1.pdf b/webseite/config/subjects/deutsch/topics/satzglieder/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/deutsch/topics/satzglieder/exercise1.pdf differ
diff --git a/webseite/config/subjects/deutsch/topics/topic4/image.png b/webseite/config/subjects/deutsch/topics/satzglieder/image.png
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic4/image.png
rename to webseite/config/subjects/deutsch/topics/satzglieder/image.png
diff --git a/webseite/config/subjects/deutsch/topics/topic5/properties.json b/webseite/config/subjects/deutsch/topics/satzglieder/properties.json
similarity index 92%
rename from webseite/config/subjects/deutsch/topics/topic5/properties.json
rename to webseite/config/subjects/deutsch/topics/satzglieder/properties.json
index 28139d7..90a0dfa 100644
--- a/webseite/config/subjects/deutsch/topics/topic5/properties.json
+++ b/webseite/config/subjects/deutsch/topics/satzglieder/properties.json
@@ -3,7 +3,7 @@
   "icon": "fa-link",
   "description": "Satzglieder sind die Bausteine eines Satzes, die jeweils eine bestimmte Funktion erfüllen, wie Subjekt, Prädikat, Objekt oder adverbiale Bestimmung, und sich gemeinsam verschieben lassen, ohne die grammatische Korrektheit des Satzes zu verändern.",
   "relatedTopics": [
-    "topic2", "topic3"
+    "wortarten", "vier-faelle"
   ],
   "files": [
     "exercise1.pdf"
diff --git a/webseite/config/subjects/deutsch/topics/topic1/exercise1.pdf b/webseite/config/subjects/deutsch/topics/topic1/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/deutsch/topics/topic1/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/deutsch/topics/topic2/exercise1.pdf b/webseite/config/subjects/deutsch/topics/topic2/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/deutsch/topics/topic2/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/deutsch/topics/topic3/exercise1.pdf b/webseite/config/subjects/deutsch/topics/topic3/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/deutsch/topics/topic3/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/deutsch/topics/topic4/exercise1.pdf b/webseite/config/subjects/deutsch/topics/topic4/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/deutsch/topics/topic4/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/deutsch/topics/topic5/exercise1.pdf b/webseite/config/subjects/deutsch/topics/topic5/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/deutsch/topics/topic5/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/deutsch/topics/topic6/exercise1.pdf b/webseite/config/subjects/deutsch/topics/topic6/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/deutsch/topics/topic6/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/deutsch/topics/topic3/article.html b/webseite/config/subjects/deutsch/topics/vier-faelle/article.html
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic3/article.html
rename to webseite/config/subjects/deutsch/topics/vier-faelle/article.html
diff --git a/webseite/config/subjects/deutsch/topics/vier-faelle/exercise1.pdf b/webseite/config/subjects/deutsch/topics/vier-faelle/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/deutsch/topics/vier-faelle/exercise1.pdf differ
diff --git a/webseite/config/subjects/deutsch/topics/vier-faelle/exercise2.pdf b/webseite/config/subjects/deutsch/topics/vier-faelle/exercise2.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/deutsch/topics/vier-faelle/exercise2.pdf differ
diff --git a/webseite/config/subjects/deutsch/topics/topic5/image.png b/webseite/config/subjects/deutsch/topics/vier-faelle/image.png
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic5/image.png
rename to webseite/config/subjects/deutsch/topics/vier-faelle/image.png
diff --git a/webseite/config/subjects/deutsch/topics/topic3/properties.json b/webseite/config/subjects/deutsch/topics/vier-faelle/properties.json
similarity index 86%
rename from webseite/config/subjects/deutsch/topics/topic3/properties.json
rename to webseite/config/subjects/deutsch/topics/vier-faelle/properties.json
index 0bc3d6e..b76669a 100644
--- a/webseite/config/subjects/deutsch/topics/topic3/properties.json
+++ b/webseite/config/subjects/deutsch/topics/vier-faelle/properties.json
@@ -3,9 +3,9 @@
   "icon": "fa-4",
   "description": "Die vier Fälle im Deutschen - Nominativ, Genitiv, Dativ und Akkusativ - beschreiben die verschiedenen grammatischen Funktionen eines Nomens oder Pronomens im Satz, wie Subjekt, Besitz, indirektes Objekt oder direktes Objekt.",
   "relatedTopics": [
-    "topic5"
+    "satzglieder"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf"
   ]
 }
\ No newline at end of file
diff --git a/webseite/config/subjects/deutsch/topics/topic2/article.html b/webseite/config/subjects/deutsch/topics/wortarten/article.html
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic2/article.html
rename to webseite/config/subjects/deutsch/topics/wortarten/article.html
diff --git a/webseite/config/subjects/deutsch/topics/wortarten/exercise1.pdf b/webseite/config/subjects/deutsch/topics/wortarten/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/deutsch/topics/wortarten/exercise1.pdf differ
diff --git a/webseite/config/subjects/deutsch/topics/topic6/image.png b/webseite/config/subjects/deutsch/topics/wortarten/image.png
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic6/image.png
rename to webseite/config/subjects/deutsch/topics/wortarten/image.png
diff --git a/webseite/config/subjects/deutsch/topics/topic2/img.png b/webseite/config/subjects/deutsch/topics/wortarten/img.png
similarity index 100%
rename from webseite/config/subjects/deutsch/topics/topic2/img.png
rename to webseite/config/subjects/deutsch/topics/wortarten/img.png
diff --git a/webseite/config/subjects/deutsch/topics/topic2/properties.json b/webseite/config/subjects/deutsch/topics/wortarten/properties.json
similarity index 83%
rename from webseite/config/subjects/deutsch/topics/topic2/properties.json
rename to webseite/config/subjects/deutsch/topics/wortarten/properties.json
index 23e4402..66f0c51 100644
--- a/webseite/config/subjects/deutsch/topics/topic2/properties.json
+++ b/webseite/config/subjects/deutsch/topics/wortarten/properties.json
@@ -3,7 +3,7 @@
   "icon": "fa-sitemap",
   "description": "Wortarten sind Kategorien, in die Wörter anhand ihrer grammatischen Funktion und Bedeutung eingeteilt werden, wie zum Beispiel Nomen, Verben, Adjektive und Adverbien.",
   "relatedTopics": [
-    "topic5", "topic6", "topic4"
+    "satzglieder", "adverbiale-bestimmung", "personalpronomen"
   ],
   "files": [
     "exercise1.pdf"
diff --git a/webseite/config/subjects/englisch/properties.json b/webseite/config/subjects/englisch/properties.json
new file mode 100644
index 0000000..df5ea24
--- /dev/null
+++ b/webseite/config/subjects/englisch/properties.json
@@ -0,0 +1,6 @@
+{
+  "displayName": "Englisch",
+  "description": "He she it das s muss mit!",
+  "color": "#17B750",
+  "icon": "fa-language"
+}
\ No newline at end of file
diff --git a/webseite/config/subjects/englisch/topics/LoremIpsum/article.html b/webseite/config/subjects/englisch/topics/LoremIpsum/article.html
new file mode 100644
index 0000000..1f86357
--- /dev/null
+++ b/webseite/config/subjects/englisch/topics/LoremIpsum/article.html
@@ -0,0 +1,9 @@
+<img alt="Ein Bild" src="$TOPICPATH/img.png">
+<br>
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+<br><br>
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+<br><br>
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+<br>
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
\ No newline at end of file
diff --git a/webseite/config/subjects/englisch/topics/LoremIpsum/exercise1.pdf b/webseite/config/subjects/englisch/topics/LoremIpsum/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/englisch/topics/LoremIpsum/exercise1.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/topic1/image.png b/webseite/config/subjects/englisch/topics/LoremIpsum/image.png
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic1/image.png
rename to webseite/config/subjects/englisch/topics/LoremIpsum/image.png
diff --git a/webseite/config/subjects/englisch/topics/LoremIpsum/img.png b/webseite/config/subjects/englisch/topics/LoremIpsum/img.png
new file mode 100644
index 0000000..bbd2355
Binary files /dev/null and b/webseite/config/subjects/englisch/topics/LoremIpsum/img.png differ
diff --git a/webseite/config/subjects/englisch/topics/LoremIpsum/properties.json b/webseite/config/subjects/englisch/topics/LoremIpsum/properties.json
new file mode 100644
index 0000000..df380f7
--- /dev/null
+++ b/webseite/config/subjects/englisch/topics/LoremIpsum/properties.json
@@ -0,0 +1,11 @@
+{
+  "displayName": "Lorem Ipsum",
+  "icon": "fa-sitemap",
+  "description": "Lorem Ipsum",
+  "relatedTopics": [
+
+  ],
+  "files": [
+    "exercise1.pdf"
+  ]
+}
\ No newline at end of file
diff --git a/webseite/config/subjects/mathe/properties.json b/webseite/config/subjects/mathe/properties.json
index c1adc41..ff8bc94 100644
--- a/webseite/config/subjects/mathe/properties.json
+++ b/webseite/config/subjects/mathe/properties.json
@@ -2,6 +2,5 @@
   "displayName": "Mathe",
   "description": "Mathe ist blau",
   "color": "#3b82f6",
-  "buttonText": "Jetzt rechnen!",
   "icon": "fa-square-root-alt"
 }
\ No newline at end of file
diff --git a/webseite/config/subjects/mathe/topics/topic3/article.html b/webseite/config/subjects/mathe/topics/bruchrechnung/article.html
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic3/article.html
rename to webseite/config/subjects/mathe/topics/bruchrechnung/article.html
diff --git a/webseite/config/subjects/mathe/topics/bruchrechnung/exercise1.pdf b/webseite/config/subjects/mathe/topics/bruchrechnung/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/bruchrechnung/exercise1.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/bruchrechnung/exercise2.pdf b/webseite/config/subjects/mathe/topics/bruchrechnung/exercise2.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/bruchrechnung/exercise2.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/topic2/image.png b/webseite/config/subjects/mathe/topics/bruchrechnung/image.png
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic2/image.png
rename to webseite/config/subjects/mathe/topics/bruchrechnung/image.png
diff --git a/webseite/config/subjects/mathe/topics/topic3/properties.json b/webseite/config/subjects/mathe/topics/bruchrechnung/properties.json
similarity index 70%
rename from webseite/config/subjects/mathe/topics/topic3/properties.json
rename to webseite/config/subjects/mathe/topics/bruchrechnung/properties.json
index 7d8f395..4b9c4b8 100644
--- a/webseite/config/subjects/mathe/topics/topic3/properties.json
+++ b/webseite/config/subjects/mathe/topics/bruchrechnung/properties.json
@@ -3,9 +3,9 @@
   "icon": "fa-chart-pie",
   "description": "Die Bruchrechnung ist ein Teil der Mathematik, der das Rechnen mit Brüchen beinhaltet, also das Teilen eines Ganzen in gleich große Teile, und umfasst Operationen wie Addition, Subtraktion, Multiplikation und Division von Brüchen.",
   "relatedTopics": [
-    "topic1", "topic2", "topic5", "topic6"
+    "schriftliches-multiplizieren", "schriftliches-dividieren", "punkt-vor-strichrechnung", "rechnen-mit-klammern"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf"
   ]
 }
\ No newline at end of file
diff --git a/webseite/config/subjects/mathe/topics/topic5/article.html b/webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/article.html
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic5/article.html
rename to webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/article.html
diff --git a/webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/exercise1.pdf b/webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/exercise1.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/topic3/image.png b/webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/image.png
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic3/image.png
rename to webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/image.png
diff --git a/webseite/config/subjects/mathe/topics/topic5/properties.json b/webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/properties.json
similarity index 89%
rename from webseite/config/subjects/mathe/topics/topic5/properties.json
rename to webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/properties.json
index 027e675..bcc3e3f 100644
--- a/webseite/config/subjects/mathe/topics/topic5/properties.json
+++ b/webseite/config/subjects/mathe/topics/punkt-vor-strichrechnung/properties.json
@@ -3,7 +3,7 @@
   "icon": "fa-plus-minus",
   "description": "Die Regel \"Punkt vor Strichrechnung\" besagt, dass bei mathematischen Berechnungen Multiplikation und Division immer vor Addition und Subtraktion ausgeführt werden müssen, um das richtige Ergebnis zu erhalten.",
   "relatedTopics": [
-    "topic6", "topic3"
+    "rechnen-mit-klammern", "bruchrechnung"
   ],
   "files": [
     "exercise1.pdf"
diff --git a/webseite/config/subjects/mathe/topics/topic4/article.html b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/article.html
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic4/article.html
rename to webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/article.html
diff --git a/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/exercise1.pdf b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/exercise1.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/exercise2.pdf b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/exercise2.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/exercise2.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/topic4/gewichte.png b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/gewichte.png
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic4/gewichte.png
rename to webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/gewichte.png
diff --git a/webseite/config/subjects/mathe/topics/topic4/image.png b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/image.png
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic4/image.png
rename to webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/image.png
diff --git a/webseite/config/subjects/mathe/topics/topic4/laengen.png b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/laengen.png
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic4/laengen.png
rename to webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/laengen.png
diff --git a/webseite/config/subjects/mathe/topics/topic4/properties.json b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/properties.json
similarity index 81%
rename from webseite/config/subjects/mathe/topics/topic4/properties.json
rename to webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/properties.json
index 483fe96..010a643 100644
--- a/webseite/config/subjects/mathe/topics/topic4/properties.json
+++ b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/properties.json
@@ -3,9 +3,9 @@
   "icon": "fa-clock",
   "description": "Rechnen mit Einheiten bedeutet, Größen mit verschiedenen Maßeinheiten wie Meter, Kilogramm oder Liter rechnerisch zu verarbeiten, dabei die Einheiten korrekt umzurechnen und sicherzustellen, dass das Ergebnis in der richtigen Einheit angegeben wird.",
   "relatedTopics": [
-    "topic2", "topic3"
+    "schriftliches-dividieren", "bruchrechnung"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf"
   ]
 }
\ No newline at end of file
diff --git a/webseite/config/subjects/mathe/topics/topic4/zeit.png b/webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/zeit.png
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic4/zeit.png
rename to webseite/config/subjects/mathe/topics/rechnen-mit-einheiten/zeit.png
diff --git a/webseite/config/subjects/mathe/topics/topic6/article.html b/webseite/config/subjects/mathe/topics/rechnen-mit-klammern/article.html
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic6/article.html
rename to webseite/config/subjects/mathe/topics/rechnen-mit-klammern/article.html
diff --git a/webseite/config/subjects/mathe/topics/rechnen-mit-klammern/exercise1.pdf b/webseite/config/subjects/mathe/topics/rechnen-mit-klammern/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/rechnen-mit-klammern/exercise1.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/topic5/image.png b/webseite/config/subjects/mathe/topics/rechnen-mit-klammern/image.png
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic5/image.png
rename to webseite/config/subjects/mathe/topics/rechnen-mit-klammern/image.png
diff --git a/webseite/config/subjects/mathe/topics/topic6/properties.json b/webseite/config/subjects/mathe/topics/rechnen-mit-klammern/properties.json
similarity index 88%
rename from webseite/config/subjects/mathe/topics/topic6/properties.json
rename to webseite/config/subjects/mathe/topics/rechnen-mit-klammern/properties.json
index 21c050c..016563e 100644
--- a/webseite/config/subjects/mathe/topics/topic6/properties.json
+++ b/webseite/config/subjects/mathe/topics/rechnen-mit-klammern/properties.json
@@ -3,7 +3,7 @@
   "icon": "fa-code",
   "description": "Beim Rechnen mit Klammern werden die Rechenoperationen innerhalb der Klammern zuerst ausgeführt, bevor die restlichen Berechnungen im Ausdruck vorgenommen werden, um die korrekte Reihenfolge der Rechenschritte einzuhalten.",
   "relatedTopics": [
-    "topic5", "topic3"
+    "punkt-vor-strichrechnung", "bruchrechnung"
   ],
   "files": [
     "exercise1.pdf"
diff --git a/webseite/config/subjects/mathe/topics/topic2/article.html b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/article.html
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic2/article.html
rename to webseite/config/subjects/mathe/topics/schriftliches-dividieren/article.html
diff --git a/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise1.pdf b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise1.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise2.pdf b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise2.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise2.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise3.pdf b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise3.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise3.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise4.pdf b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise4.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/exercise4.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/topic6/image.png b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/image.png
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic6/image.png
rename to webseite/config/subjects/mathe/topics/schriftliches-dividieren/image.png
diff --git a/webseite/config/subjects/mathe/topics/topic2/properties.json b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/properties.json
similarity index 76%
rename from webseite/config/subjects/mathe/topics/topic2/properties.json
rename to webseite/config/subjects/mathe/topics/schriftliches-dividieren/properties.json
index 7a8d653..2443f26 100644
--- a/webseite/config/subjects/mathe/topics/topic2/properties.json
+++ b/webseite/config/subjects/mathe/topics/schriftliches-dividieren/properties.json
@@ -3,9 +3,9 @@
   "icon": "fa-divide",
   "description": "Schriftliches Dividieren ist eine Methode zur schrittweisen Aufteilung einer Zahl durch eine andere, wobei man die Teilschritte nacheinander schriftlich notiert, um das Ergebnis systematisch zu berechnen.",
   "relatedTopics": [
-    "topic1"
+    "schriftliches-multiplizieren"
   ],
   "files": [
-    "exercise1.pdf"
+    "exercise1.pdf", "exercise2.pdf", "exercise3.pdf", "exercise4.pdf"
   ]
 }
\ No newline at end of file
diff --git a/webseite/config/subjects/mathe/topics/topic1/article.html b/webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/article.html
similarity index 100%
rename from webseite/config/subjects/mathe/topics/topic1/article.html
rename to webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/article.html
diff --git a/webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/exercise1.pdf b/webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/exercise1.pdf
new file mode 100644
index 0000000..047d232
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/exercise1.pdf differ
diff --git a/webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/image.png b/webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/image.png
new file mode 100644
index 0000000..a111ca4
Binary files /dev/null and b/webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/image.png differ
diff --git a/webseite/config/subjects/mathe/topics/topic1/properties.json b/webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/properties.json
similarity index 93%
rename from webseite/config/subjects/mathe/topics/topic1/properties.json
rename to webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/properties.json
index 7a9feee..04215f4 100644
--- a/webseite/config/subjects/mathe/topics/topic1/properties.json
+++ b/webseite/config/subjects/mathe/topics/schriftliches-multiplizieren/properties.json
@@ -3,7 +3,7 @@
   "icon": "fa-x",
   "description": "Schriftliches Multiplizieren ist eine Rechenmethode, bei der zwei Zahlen schrittweise multipliziert werden, indem man die einzelnen Stellen der Zahlen nacheinander verrechnet, die Teilergebnisse notiert und am Ende addiert, um das Gesamtergebnis zu erhalten.",
   "relatedTopics": [
-    "topic2"
+    "schriftliches-dividieren"
   ],
   "files": [
     "exercise1.pdf"
diff --git a/webseite/config/subjects/mathe/topics/topic1/exercise1.pdf b/webseite/config/subjects/mathe/topics/topic1/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/mathe/topics/topic1/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/mathe/topics/topic2/exercise1.pdf b/webseite/config/subjects/mathe/topics/topic2/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/mathe/topics/topic2/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/mathe/topics/topic3/exercise1.pdf b/webseite/config/subjects/mathe/topics/topic3/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/mathe/topics/topic3/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/mathe/topics/topic4/exercise1.pdf b/webseite/config/subjects/mathe/topics/topic4/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/mathe/topics/topic4/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/mathe/topics/topic5/exercise1.pdf b/webseite/config/subjects/mathe/topics/topic5/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/mathe/topics/topic5/exercise1.pdf and /dev/null differ
diff --git a/webseite/config/subjects/mathe/topics/topic6/exercise1.pdf b/webseite/config/subjects/mathe/topics/topic6/exercise1.pdf
deleted file mode 100644
index 10b056f..0000000
Binary files a/webseite/config/subjects/mathe/topics/topic6/exercise1.pdf and /dev/null differ
diff --git a/webseite/impressum.php b/webseite/impressum.php
index 6f78e40..6461b1e 100644
--- a/webseite/impressum.php
+++ b/webseite/impressum.php
@@ -19,7 +19,7 @@
 <nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg shadow-sm z-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
-            <a href="homepage.php" class="flex items-center">
+            <a href="index.php" class="flex items-center">
                 <img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
                 <span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
             </a>
@@ -27,7 +27,7 @@
     </div>
 </nav>
 
-<div class="content mt-24 max-w-7xl mx-auto">
+<div class="content mt-24 max-w-7xl mx-[16px] xl:mx-auto">
     <h1 class="text-3xl font-bold text-gray-900 mb-6">Impressum</h1>
     <p class="text-gray-600 mb-4">Angaben gemäß § 5 TMG:</p>
     <p class="text-gray-600 mb-4">
diff --git a/webseite/homepage.php b/webseite/index.php
similarity index 93%
rename from webseite/homepage.php
rename to webseite/index.php
index 3f9679b..75facc9 100644
--- a/webseite/homepage.php
+++ b/webseite/index.php
@@ -12,7 +12,9 @@
     <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>
 </head>
-<body class="bg-gray-50">
+
+
+<body class="bg-gray-50 min-h-screen">
 <!-- Animated background blobs -->
 <div class="fixed inset-0 -z-10 overflow-hidden">
     <div class="blob absolute w-96 h-96 bg-sky-300/30 -top-48 -left-16"></div>
@@ -23,7 +25,7 @@
 <nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg shadow-sm z-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
-            <a href="homepage.php" class="flex items-center">
+            <a href="index.php" class="flex items-center">
                 <img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
                 <span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
             </a>
@@ -32,7 +34,7 @@
 </nav>
 
 <!-- Hero Section -->
-<div class="pt-24 pb-16 px-4">
+<div class="hidden md:block pt-24 px-4">
     <div class="max-w-7xl mx-auto">
         <div class="text-center">
             <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
@@ -44,7 +46,7 @@
 </div>
 
 <!-- Subject Grid -->
-<div class="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+<div class="max-w-7xl mx-auto px-4 pt-20 grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
     <!-- Mathematik -->
     <?php
     require_once("classes/SubjectData.php");
@@ -88,7 +90,7 @@
 
 </div>
 
-<footer class="fixed bottom-0 w-full bg-white/80 backdrop-blur-lg shadow-sm p-5">
+<footer class="sticky top-[100vh] w-full bg-white/80 backdrop-blur-lg shadow-sm p-5">
     <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <div class="flex justify-between">
             <p class="text-gray-600">&copy; Horst-Schlämmer-Gedächtnis-Gymnasium</p>
diff --git a/webseite/subject.php b/webseite/subject.php
index edc6cef..36929e5 100644
--- a/webseite/subject.php
+++ b/webseite/subject.php
@@ -25,8 +25,12 @@ $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>
+
+
+<body class="min-h-screen">
 
 <nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
     <div class="sidebar-header">
@@ -35,7 +39,7 @@ $topics = $subjectData->topics;
         <h2><?php echo($subjectData->displayName); ?></h2>
     </div>
 
-    <a href="homepage.php" class="nav-link">
+    <a href="index.php" class="nav-link">
         <i class="fas fa-home"></i> Startseite
     </a>
     <a href="#" class="nav-link active">
@@ -47,12 +51,13 @@ $topics = $subjectData->topics;
     <button class="menu-toggle h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
         <i class="fas fa-bars"></i>
     </button>
-    <input type="text" class="search-box p-3 border-2 w-full focus:border-[<?php echo($subjectData->color); ?>]" id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..."
+    <input type="text" class="search-box p-3 border-2 w-full focus:border-[<?php echo($subjectData->color); ?>]"
+           id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..."
            oninput="handleSearch()">
 </div>
 
 <div class="main-content">
-    <div class="container">
+    <div class="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-8 mb-8">
 
         <?php
 
@@ -70,6 +75,7 @@ $topics = $subjectData->topics;
                     <p class="topic-description">
                         <?php echo($topicData->description); ?>
                     </p>
+                    <!--
                     <div class="related-topics bg-gray-100">
                         <h4>Verwandte Themen:</h4>
                         <ul>
@@ -92,9 +98,9 @@ $topics = $subjectData->topics;
                             }
                             ?>
                         </ul>
-                    </div>
+                    </div>-->
                 </div>
-                <div class="download-section">
+                <div class="download-section bg-gray-100 p-[20px] rounded-[20px]">
                     <h4>Übungen herunterladen:</h4>
                     <div class="download-links">
                         <?php
@@ -103,7 +109,8 @@ $topics = $subjectData->topics;
 
                             <a onclick="event.stopPropagation();"
                                href="<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName") ?>"
-                               target="_blank" download class="download-btn bg-[<?php echo($subjectData->color); ?>]">
+                               target="_blank" download
+                               class="download-btn border-2 border-[<?php echo($subjectData->color); ?>]">
                                 <i class="fas fa-file-pdf"></i>
                                 <?php echo($fileName); ?>
                             </a>
@@ -122,124 +129,15 @@ $topics = $subjectData->topics;
     </div>
 </div>
 
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const menuToggle = document.querySelector('.menu-toggle');
-        const sidebar = document.querySelector('.sidebar');
+<footer class="sticky top-[100vh] lg:ms-[280px] w-full lg:w-auto bg-white/80 backdrop-blur-lg shadow-sm p-5">
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="flex justify-between">
+            <p class="text-gray-600">&copy; Horst-Schlämmer-Gedächtnis-Gymnasium</p>
+            <p><a href="impressum.php"
+                  class="text-[var(--primary-color)] hover:text-[var(--accent-color)]">Impressum</a></p>
+        </div>
+    </div>
+</footer>
 
-        // 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..2ff1f5d 100644
--- a/webseite/topic.php
+++ b/webseite/topic.php
@@ -31,18 +31,23 @@ 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>
+
+
+<body class="min-h-screen">
+
 <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); ?>]">
     <i class="fas fa-bars"></i>
 </button>
+
 <!-- Left Sidebar -->
 <nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
     <div class="sidebar-header">
         <i class="fas fa-graduation-cap"></i>
         <h2><?php echo($subjectData->displayName); ?></h2>
     </div>
-    <a href="homepage.php" class="nav-link">
+    <a href="index.php" class="nav-link">
         <i class="fas fa-home"></i> Startseite
     </a>
     <a href="subject.php?subject=<?php echo($subjectData->id); ?>" class="nav-link">
@@ -54,143 +59,97 @@ if (!isset($topicData)) {
 </nav>
 
 <!-- Main Content -->
-<main class="main-content max-w-7xl">
+<main class="main-content">
+    <div class="max-w-7xl mx-auto mt-5">
+        <div class="mt-16"></div>
 
-    <div class="content-card">
-        <h1 class="content-title"><?php echo($topicData->displayName); ?></h1>
-        <p class="content-text">
-            <?php echo($topicData->description); ?>
-        </p>
-        <p class="content-text article-section">
-            <?php echo($topicData->article); ?>
-        </p>
-
-        <div class="exercise-section bg-[<?php echo($subjectData->color); ?>]">
-            <h3 style="margin-bottom: 1rem;">Übungen herunterladen:</h3>
-            <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+        <div class="related-topics bg-gray-100 p-4 rounded-lg">
+            <h4>Verwandte Themen:</h4>
+            <ul class="flex flex-wrap gap-2">
                 <?php
-                foreach ($topicData->files as $fileName) {
+                foreach ($topicData->relatedTopics as $relatedTopicName) {
+                    $relatedTopic = $subjectData->topics[$relatedTopicName];
+                    if (!isset($relatedTopic)) {
+                        continue;
+                    }
                     ?>
-
-                    <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>
-
+                    <li onclick="event.stopPropagation();"
+                        class="border-[<?php echo($subjectData->color); ?>] border-2">
+                        <a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>'
+                           class="block">
+                            <?php echo($relatedTopic->displayName); ?>
+                        </a>
+                    </li>
                     <?php
                 }
                 ?>
+            </ul>
+        </div>
+
+        <div class="content-card mt-[8px]">
+            <h1 class="content-title"><?php echo($topicData->displayName); ?></h1>
+            <p class="content-text">
+                <?php echo($topicData->description); ?>
+            </p>
+            <p class="content-text article-section">
+                <?php echo($topicData->article); ?>
+            </p>
+
+            <div class="exercise-section bg-gray-100">
+                <h3 style="margin-bottom: 1rem;" class="text-[var(--primary-color)]">Übungen herunterladen:</h3>
+                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+                    <?php
+                    foreach ($topicData->files as $fileName) {
+                        ?>
+
+                        <a href='<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName") ?>'
+                           target="_blank" download
+                           class="download-btn border-[<?php echo($subjectData->color); ?>] border-2">
+                            <i class="fas fa-file-pdf"></i>
+                            <?php echo($fileName); ?>
+                        </a>
+
+                        <?php
+                    }
+                    ?>
+                </div>
             </div>
         </div>
-    </div>
 
-    <div class="related-topics bg-gray-100 p-4 rounded-lg">
-        <h4>Verwandte Themen:</h4>
-        <ul class="flex flex-wrap gap-2">
-            <?php
-            foreach ($topicData->relatedTopics as $relatedTopicName) {
-                $relatedTopic = $subjectData->topics[$relatedTopicName];
-                if (!isset($relatedTopic)) {
-                    continue;
+        <div class="related-topics bg-gray-100 p-4 rounded-lg">
+            <h4>Verwandte Themen:</h4>
+            <ul class="flex flex-wrap gap-2">
+                <?php
+                foreach ($topicData->relatedTopics as $relatedTopicName) {
+                    $relatedTopic = $subjectData->topics[$relatedTopicName];
+                    if (!isset($relatedTopic)) {
+                        continue;
+                    }
+                    ?>
+                    <li onclick="event.stopPropagation();"
+                        class="border-[<?php echo($subjectData->color); ?>] border-2">
+                        <a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>'
+                           class="block">
+                            <?php echo($relatedTopic->displayName); ?>
+                        </a>
+                    </li>
+                    <?php
                 }
                 ?>
-                <li onclick="event.stopPropagation();" class="border-[<?php echo($subjectData->color); ?>] border-2">
-                    <a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>' class="block">
-                        <?php echo($relatedTopic->displayName); ?>
-                    </a>
-                </li>
-                <?php
-            }
-            ?>
-        </ul>
+            </ul>
+        </div>
     </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');
+<footer class="sticky top-[100vh] lg:ms-[280px] w-full lg:w-auto bg-white/80 backdrop-blur-lg shadow-sm p-5">
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="flex justify-between">
+            <p class="text-gray-600">&copy; Horst-Schlämmer-Gedächtnis-Gymnasium</p>
+            <p><a href="impressum.php"
+                  class="text-[var(--primary-color)] hover:text-[var(--accent-color)]">Impressum</a></p>
+        </div>
+    </div>
+</footer>
 
-            // 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>