diff --git a/database/systades.db b/database/systades.db
index bc618e7..59f8166 100644
Binary files a/database/systades.db and b/database/systades.db differ
diff --git a/static/css/base-styles.css b/static/css/base-styles.css
index 40bb4da..4bb2600 100644
--- a/static/css/base-styles.css
+++ b/static/css/base-styles.css
@@ -460,17 +460,53 @@ body:not(.dark) button:not(.toggle) {
     background-color: var(--light-primary);
     color: white;
     border: none;
-    box-shadow: var(--light-shadow);
-    border-radius: 0.375rem;
-    padding: 0.5rem 1rem;
-    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    padding: 0.625rem 1.25rem;
+    transition: all 0.2s ease;
+    font-weight: 600;
+    letter-spacing: 0.02em;
 }
 
 body:not(.dark) .btn:hover,
 body:not(.dark) button:not(.toggle):hover {
     background-color: var(--light-primary-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Dark/Light Mode Switch Button */
+.theme-toggle {
+    position: relative;
+    width: 48px;
+    height: 24px;
+    background: linear-gradient(to right, #7c3aed, #3b82f6);
+    border-radius: 24px;
+    padding: 2px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.theme-toggle::after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.theme-toggle.dark::after {
+    transform: translateX(24px);
+}
+
+.theme-toggle:hover::after {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
 /* Light Mode Cards und Panels */
@@ -547,33 +583,37 @@ body:not(.dark) .card:hover {
 
 /* Light Mode Buttons mit verbesserter Lesbarkeit */
 body:not(.dark) .btn-primary {
-    background: linear-gradient(135deg, var(--light-primary), var(--light-primary-hover));
+    background: linear-gradient(135deg, #7c3aed, #6d28d9);
     color: white;
     border: none;
     transition: all 0.2s ease;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-    font-weight: 500;
-    letter-spacing: 0.01em;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    box-shadow: 0 2px 4px rgba(109, 40, 217, 0.2);
+    border-radius: 8px;
 }
 
 body:not(.dark) .btn-primary:hover {
-    background: linear-gradient(135deg, var(--light-primary-hover), var(--light-primary));
-    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
-    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
 }
 
 body:not(.dark) .btn-secondary {
-    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
-    color: var(--light-text);
-    border: 1px solid #e5e7eb;
-    font-weight: 500;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    background: white;
+    color: #1f2937;
+    border: 2px solid #e5e7eb;
+    font-weight: 600;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
 }
 
 body:not(.dark) .btn-secondary:hover {
-    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+    background: #f9fafb;
     border-color: #d1d5db;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
 }
 
 body:not(.dark) .btn-outline {
diff --git a/templates/base.html b/templates/base.html
index 0ebfb63..d3b5c78 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -326,20 +326,10 @@
                     <!-- Dark/Light Mode Schalter -->
                     <button
                         @click="toggleDarkMode()"
-                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300 focus:outline-none"
-                        :class="darkMode ? 'bg-purple-600' : 'bg-gray-200'"
+                        class="theme-toggle"
+                        :class="{ 'dark': darkMode }"
+                        aria-label="Dark Mode umschalten"
                     >
-                        <span class="sr-only">Dark Mode umschalten</span>
-                        <!-- Schieberegler -->
-                        <span
-                            class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300"
-                            :class="darkMode ? 'translate-x-6' : 'translate-x-1'"
-                        ></span>
-                        <!-- Icons -->
-                        <i class="fas fa-sun absolute left-1 text-yellow-400 transition-opacity duration-300"
-                           :class="darkMode ? 'opacity-0' : 'opacity-100'"></i>
-                        <i class="fas fa-moon absolute right-1 text-gray-100 transition-opacity duration-300"
-                           :class="darkMode ? 'opacity-100' : 'opacity-0'"></i>
                     </button>
                     <!-- Profil-Link oder Login -->
                     {% if current_user.is_authenticated %}