diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 4c3479c2..a54adf9b 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -2,7 +2,8 @@
   "permissions": {
     "allow": [
       "Bash(wc:*)",
-      "Bash(tree:*)"
+      "Bash(tree:*)",
+      "mcp__ide__getDiagnostics"
     ],
     "deny": [],
     "ask": []
diff --git a/backend/src/auth.rs b/backend/src/auth.rs
index ece95ac4..4592f6ac 100644
--- a/backend/src/auth.rs
+++ b/backend/src/auth.rs
@@ -1,6 +1,3 @@
-
-
-
 use axum::{
     extract::FromRequestParts,
     http::{
diff --git a/backend/src/handlers/auth.rs b/backend/src/handlers/auth.rs
index de28285f..e5cec2c9 100644
--- a/backend/src/handlers/auth.rs
+++ b/backend/src/handlers/auth.rs
@@ -18,22 +18,39 @@ struct LoginAttempt {
     blocked_until: Option<String>,
 }
 
-fn hash_login_identifier(username: &str) -> String {
-    static SALT: OnceLock<String> = OnceLock::new();
+static LOGIN_ATTEMPT_SALT: OnceLock<String> = OnceLock::new();
 
-    let salt = SALT.get_or_init(|| {
-        env::var("LOGIN_ATTEMPT_SALT").unwrap_or_else(|_| {
-            tracing::error!(
-                "LOGIN_ATTEMPT_SALT environment variable is missing. Set a high-entropy value to enable secure brute-force protection."
-            );
-            panic!(
-                "LOGIN_ATTEMPT_SALT must be set to a random, high-entropy string. See .env.example for guidance."
-            );
-        })
-    });
+pub fn init_login_attempt_salt() -> Result<(), String> {
+    let raw = env::var("LOGIN_ATTEMPT_SALT")
+        .map_err(|_| "LOGIN_ATTEMPT_SALT environment variable not set".to_string())?;
+    let trimmed = raw.trim();
+
+    if trimmed.len() < 32 {
+        return Err("LOGIN_ATTEMPT_SALT must be at least 32 characters long".to_string());
+    }
+
+    let unique_chars = trimmed.chars().collect::<std::collections::HashSet<_>>().len();
+    if unique_chars < 10 {
+        return Err("LOGIN_ATTEMPT_SALT must contain at least 10 unique characters".to_string());
+    }
 
+    LOGIN_ATTEMPT_SALT
+        .set(trimmed.to_string())
+        .map_err(|_| "LOGIN_ATTEMPT_SALT already initialized".to_string())?;
+
+    Ok(())
+}
+
+fn login_attempt_salt() -> &'static str {
+    LOGIN_ATTEMPT_SALT
+        .get()
+        .expect("LOGIN_ATTEMPT_SALT not initialized. Call init_login_attempt_salt() first.")
+        .as_str()
+}
+
+fn hash_login_identifier(username: &str) -> String {
     let mut hasher = Sha256::new();
-    hasher.update(salt.as_bytes());
+    hasher.update(login_attempt_salt().as_bytes());
     hasher.update(username.trim().to_ascii_lowercase().as_bytes());
     format!("{:x}", hasher.finalize())
 }
diff --git a/backend/src/handlers/site_pages.rs b/backend/src/handlers/site_pages.rs
index 9b762a07..3074397e 100644
--- a/backend/src/handlers/site_pages.rs
+++ b/backend/src/handlers/site_pages.rs
@@ -286,8 +286,9 @@ fn map_page(
         )
     })?;
 
+    let sanitized_slug = slug.trim().to_lowercase();
     let sanitized_title = match title.trim() {
-        "" => slug.clone(),
+        "" => sanitized_slug.clone(),
         value => value.to_string(),
     };
 
@@ -304,7 +305,7 @@ fn map_page(
 
     Ok(SitePageResponse {
         id,
-        slug,
+        slug: sanitized_slug,
         title: sanitized_title,
         description: sanitized_description,
         nav_label: sanitized_nav_label,
@@ -480,14 +481,18 @@ pub async fn get_navigation(
 
     let mut items = Vec::with_capacity(pages.len());
     for page in pages {
+        let normalized_slug = page.slug.trim().to_lowercase();
+        if normalized_slug.is_empty() {
+            continue;
+        }
         items.push(NavigationItemResponse {
             id: page.id,
-            slug: page.slug,
+            slug: normalized_slug.clone(),
             label: page
                 .nav_label
                 .clone()
                 .filter(|label| !label.trim().is_empty())
-                .unwrap_or(page.title.clone()),
+                .unwrap_or_else(|| page.title.trim().to_string()),
             order_index: page.order_index,
         });
     }
@@ -557,7 +562,17 @@ pub async fn list_published_page_slugs(
         .await
         .map_err(|err| map_sqlx_error(err, "Navigation"))?;
 
-    let slugs = pages.into_iter().map(|page| page.slug).collect();
+    let slugs = pages
+        .into_iter()
+        .filter_map(|page| {
+            let normalized = page.slug.trim().to_lowercase();
+            if normalized.is_empty() {
+                None
+            } else {
+                Some(normalized)
+            }
+        })
+        .collect();
 
     Ok(Json(slugs))
 }
diff --git a/backend/src/main.rs b/backend/src/main.rs
index 4994c852..ebf65992 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -223,6 +223,9 @@ async fn main() {
     csrf::init_csrf_secret().expect("Failed to initialize CSRF secret");
     tracing::info!("CSRF secret initialized successfully");
 
+    handlers::auth::init_login_attempt_salt().expect("Failed to initialize login attempt salt");
+    tracing::info!("Login attempt salt initialized successfully");
+
     let pool = db::create_pool()
         .await
         .expect("Failed to create database pool");
@@ -260,7 +263,11 @@ async fn main() {
             Method::OPTIONS,
             Method::HEAD,
         ]))
-        .allow_headers(AllowHeaders::list(vec![AUTHORIZATION, CONTENT_TYPE]))
+        .allow_headers(AllowHeaders::list(vec![
+            AUTHORIZATION,
+            CONTENT_TYPE,
+            HeaderName::from_static(csrf::csrf_header_name()),
+        ]))
         .allow_credentials(true);
 
     tracing::info!(origins = ?allowed_origins, "Configured CORS origins");
@@ -340,10 +347,10 @@ async fn main() {
             delete(handlers::comments::delete_comment),
         )
 
-        .route_layer(middleware::from_extractor::<csrf::CsrfGuard>())
-
         .route_layer(middleware::from_fn(auth::auth_middleware))
 
+        .route_layer(middleware::from_extractor::<csrf::CsrfGuard>())
+
         .layer(RequestBodyLimitLayer::new(ADMIN_BODY_LIMIT))
 
         .layer(GovernorLayer::new(admin_rate_limit_config.clone()));
diff --git a/src/api/client.js b/src/api/client.js
index 7cef8c0c..b40a3466 100644
--- a/src/api/client.js
+++ b/src/api/client.js
@@ -62,11 +62,17 @@ class ApiClient {
   setToken(token) {
     if (token && typeof token !== 'string') {
       console.warn('Attempted to set invalid JWT token; ignoring')
+      this.token = null
+      return
     }
-    this.token = null
+    this.token = typeof token === 'string' && token.trim() !== '' ? token.trim() : null
   }
   getHeaders() {
-    return {}
+    const headers = {}
+    if (this.token) {
+      headers.Authorization = `Bearer ${this.token}`
+    }
+    return headers
   }
   async request(endpoint, options = {}) {
     const {
diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index b90971eb..3cbff929 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -1,21 +1,40 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { MessageSquare, Send, Trash2 } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import { api } from '../api/client';
 import PropTypes from 'prop-types';
+const VALID_TUTORIAL_ID = /^[a-zA-Z0-9_-]+$/;
+
 const Comments = ({ tutorialId }) => {
   const [comments, setComments] = useState([]);
   const [newComment, setNewComment] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [loadingComments, setLoadingComments] = useState(false);
+  const [loadError, setLoadError] = useState(null);
   const { isAuthenticated, user } = useAuth();
   const isAdmin = Boolean(user && user.role === 'admin');
-  useEffect(() => {
-    loadComments();
+  const normalizedTutorialId = useMemo(() => {
+    if (typeof tutorialId !== 'string') {
+      return null;
+    }
+    const trimmed = tutorialId.trim();
+    if (!trimmed || trimmed.length > 100 || !VALID_TUTORIAL_ID.test(trimmed)) {
+      return null;
+    }
+    return trimmed;
   }, [tutorialId]);
-  const loadComments = async () => {
+
+  const loadComments = useCallback(async () => {
+    if (!normalizedTutorialId) {
+      setComments([]);
+      setLoadError(new Error('Kommentare für diese Ressource sind deaktiviert.'));
+      return;
+    }
+    setLoadingComments(true);
+    setLoadError(null);
     try {
       // Fetch comments from the API using the tutorial ID
-      const data = await api.listTutorialComments(tutorialId);
+      const data = await api.listTutorialComments(normalizedTutorialId);
       // Ensure we always have an array, even if API returns unexpected data
       setComments(Array.isArray(data) ? data : []);
     } catch (error) {
@@ -23,18 +42,24 @@ const Comments = ({ tutorialId }) => {
       console.error('Failed to load comments:', error);
       // Set empty array to maintain consistent state
       setComments([]);
+      setLoadError(error);
     }
-  };
+    setLoadingComments(false);
+  }, [normalizedTutorialId]);
+
+  useEffect(() => {
+    loadComments();
+  }, [loadComments]);
   const handleSubmit = async (e) => {
     // Prevent default form submission behavior
     e.preventDefault();
     // Validate form data and user permissions
-    if (!newComment.trim() || !isAuthenticated || !isAdmin) return;
+    if (!canManageComments || !newComment.trim()) return;
     // Set loading state to prevent duplicate submissions
     setIsLoading(true);
     try {
       // Submit comment to API
-      await api.createComment(tutorialId, newComment);
+      await api.createComment(normalizedTutorialId, newComment);
       // Clear form for next comment
       setNewComment('');
       // Refresh comments list to show new comment
@@ -49,9 +74,9 @@ const Comments = ({ tutorialId }) => {
   };
   const handleDelete = async (commentId) => {
     // Double-check admin permissions
-    if (!isAdmin) return;
+    if (!canManageComments) return;
     // Show confirmation dialog to prevent accidental deletion
-    if (!confirm('Kommentar wirklich löschen?')) return;
+    if (typeof window !== 'undefined' && !window.confirm('Kommentar wirklich löschen?')) return;
     try {
       // Delete comment from API
       await api.deleteComment(commentId);
@@ -62,6 +87,8 @@ const Comments = ({ tutorialId }) => {
       console.error('Failed to delete comment:', error);
     }
   };
+  const canManageComments = isAdmin && normalizedTutorialId;
+
   return (
     <div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
       {}
@@ -70,7 +97,7 @@ const Comments = ({ tutorialId }) => {
         Kommentare ({comments.length})
       </h2>
       {}
-      {isAdmin && (
+      {canManageComments && (
         <form onSubmit={handleSubmit} className="mb-8">
           <textarea
             value={newComment}
@@ -115,6 +142,15 @@ const Comments = ({ tutorialId }) => {
         </div>
       )}
       {}
+      {loadingComments && (
+        <div className="mb-6 text-sm text-gray-500 dark:text-gray-400">Kommentare werden geladen…</div>
+      )}
+      {loadError && !loadingComments && (
+        <div className="mb-6 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-200">
+          Kommentare konnten nicht geladen werden.
+        </div>
+      )}
+      {}
       <div className="space-y-4">
         {comments.length === 0 ? (
           <p className="text-center text-gray-500 dark:text-gray-400 py-8">
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 2cd7a736..8b17bda7 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -71,15 +71,38 @@ const Footer = () => {
     const allItems = Array.isArray(navigation?.items) ? navigation.items : []
     return allItems
   }, [staticNavigationItems, dynamicNavigationItems, navigation?.items])
+  const buildTargetHref = useCallback((target) => {
+    if (!target || typeof target !== 'object') {
+      return null
+    }
+    const value = typeof target.value === 'string' ? target.value : target.path || target.href || ''
+    switch (target.type) {
+      case 'section':
+        if (value) {
+          return `#${value.replace(/^#/, '')}`
+        }
+        return '#'
+      case 'route':
+      case 'page':
+        return value || '/'
+      case 'external':
+      case 'href':
+        return sanitizeExternalUrl(value) || null
+      default:
+        return null
+    }
+  }, [])
   const navigationQuickLinks = useMemo(() => {
     const items = effectiveNavigationItems
     return items
       .map((item) => {
         if (!item) return null
         if (item.target) {
+          const href = buildTargetHref(item.target)
           return {
             label: item.label || item.slug || 'Link',
             target: item.target,
+            href,
           }
         }
         if (item.href) {
@@ -97,6 +120,7 @@ const Footer = () => {
           return {
             label: item.label || item.slug || item.path,
             target: { type: 'route', value: item.path },
+            href: item.path,
           }
         }
         if (item.type === 'section') {
@@ -105,55 +129,48 @@ const Footer = () => {
           return {
             label: item.label || 'Link',
             target: { type: 'section', value: sectionValue },
+            href: `#${sectionValue.replace(/^#/, '')}`,
           }
         }
         if (item.slug) {
           return {
             label: item.label || item.slug,
             target: { type: 'route', value: `/pages/${item.slug}` },
+            href: `/pages/${item.slug}`,
           }
         }
         return null
       })
       .filter(Boolean)
-  }, [effectiveNavigationItems])
+  }, [buildTargetHref, effectiveNavigationItems])
   const quickLinks = useMemo(() => {
     return navigationQuickLinks
   }, [navigationQuickLinks])
-  const handleQuickLink = (link) => {
+  const handleQuickLink = (event, link) => {
     // Early return for invalid or missing link data
     if (!link) return
     // Extract navigation data from link object
     const target = link.target
-    const href = sanitizeExternalUrl(link.href || link.url)
-    const path = link.path
-    // Priority 1: Content targets (CMS-driven navigation)
     if (target) {
+      event?.preventDefault?.()
       navigateContentTarget(target, { navigate, location })
       return
     }
-    // Priority 2: External URLs and special protocols
+    const href = sanitizeExternalUrl(link.href || link.url)
     if (href) {
-      // Ensure we're in a browser environment
-      if (typeof window === 'undefined') {
-        return
-      }
-      // External HTTP/HTTPS links - open in new tab with security
-      if (href.startsWith('http://') || href.startsWith('https://')) {
-        window.open(href, '_blank', 'noopener,noreferrer')
+      const isExternal = href.startsWith('http://') || href.startsWith('https://')
+      const isSpecialProtocol = href.startsWith('mailto:') || href.startsWith('tel:')
+      if (isExternal || isSpecialProtocol) {
+        // Allow default anchor behavior
         return
       }
-      // Special protocol links (email, phone) - use current window
-      if (href.startsWith('mailto:') || href.startsWith('tel:')) {
-        window.location.href = href
-        return
-      }
-      // Other relative URLs - navigate in current window
+      event?.preventDefault?.()
       window.location.assign(href)
       return
     }
-    // Priority 3: Internal routes - use React Router
+    const path = link.path
     if (path) {
+      event?.preventDefault?.()
       navigate(path)
       return
     }
@@ -182,16 +199,24 @@ const Footer = () => {
             <h4 className="text-white font-semibold mb-4">Quick Links</h4>
             <ul className="space-y-2">
               {quickLinks.length > 0 ? (
-                quickLinks.map((link, index) => (
-                  <li key={link.label || link.target?.value || `quick-${index}`}>
-                    <button
-                      onClick={() => handleQuickLink(link)}
-                      className="hover:text-primary-400 transition-colors duration-200"
-                    >
-                      {link.label || 'Link'}
-                    </button>
-                  </li>
-                ))
+                quickLinks.map((link, index) => {
+                  const href = link.href || '#'
+                  const isExternal = typeof href === 'string' && (href.startsWith('http://') || href.startsWith('https://'))
+                  const isSpecialProtocol = typeof href === 'string' && (href.startsWith('mailto:') || href.startsWith('tel:'))
+                  return (
+                    <li key={link.label || link.target?.value || `quick-${index}`}>
+                      <a
+                        href={href}
+                        onClick={(event) => handleQuickLink(event, link)}
+                        className="hover:text-primary-400 transition-colors duration-200"
+                        target={isExternal ? '_blank' : undefined}
+                        rel={isExternal ? 'noopener noreferrer' : undefined}
+                      >
+                        {link.label || 'Link'}
+                      </a>
+                    </li>
+                  )
+                })
               ) : (
                 <li className="text-sm text-gray-500">Noch keine Quick Links definiert.</li>
               )}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index c504adca..726e1947 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -39,8 +39,11 @@ const Header = () => {
     if (contentNavItems.length > 0) {
       return contentNavItems
     }
+    if (navigation?.loading) {
+      return []
+    }
     return FALLBACK_NAV_ITEMS
-  }, [navigation?.items, contentNavItems])
+  }, [navigation?.items, navigation?.loading, contentNavItems])
   const handleNavigation = (item) => {
     if (!item) return
     if (item.target) {
@@ -91,14 +94,11 @@ const Header = () => {
       <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-20">
           {}
-          <div className="flex items-center space-x-3 group">
-            <div className="relative">
-              <div className="absolute inset-0 bg-gradient-to-r from-primary-600 to-primary-800 p-2.5 rounded-xl blur opacity-50 group-hover:opacity-75 transition-opacity duration-300"></div>
-              <div className="relative bg-gradient-to-r from-primary-600 to-primary-800 p-2.5 rounded-xl shadow-lg group-hover:scale-110 transition-transform duration-300">
-                <BrandIcon className="w-6 h-6 text-white" />
-              </div>
+          <div className="flex items-center space-x-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-600 text-white shadow-sm">
+              <BrandIcon className="w-6 h-6" />
             </div>
-            <span className="text-xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 dark:from-gray-100 dark:to-gray-300 bg-clip-text text-transparent">
+            <span className="text-xl font-semibold text-gray-900 dark:text-gray-100">
               {headerContent?.brand?.name || 'Linux Tutorial'}
             </span>
           </div>
@@ -121,13 +121,9 @@ const Header = () => {
               <Search className="w-5 h-5 text-gray-700 dark:text-gray-300" />
             </button>
             <ThemeToggle />
-            <button
-              onClick={handleCtaClick}
-              className="relative flex items-center space-x-2 px-5 py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl font-medium shadow-lg hover:shadow-2xl hover:scale-105 hover:-translate-y-0.5 transition-all duration-300 overflow-hidden group/btn"
-            >
-              <CTAIcon className="w-4 h-4 group-hover/btn:rotate-12 transition-transform duration-300" />
+            <button onClick={handleCtaClick} className="btn-primary btn-primary--compact">
+              <CTAIcon className="w-4 h-4" />
               <span>{isAuthenticated ? ctaContent.authLabel || 'Admin' : ctaContent.guestLabel || 'Login'}</span>
-              <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover/btn:opacity-100 transition-opacity duration-300"></div>
             </button>
           </div>
           {}
@@ -168,7 +164,7 @@ const Header = () => {
                 handleCtaClick()
                 setMobileMenuOpen(false)
               }}
-              className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-lg hover:from-primary-700 hover:to-primary-800 transition-all duration-200"
+              className="btn-primary w-full justify-center"
             >
               <CTAIcon className="w-4 h-4" />
               <span>{isAuthenticated ? ctaContent.authLabel || 'Admin' : ctaContent.guestLabel || 'Login'}</span>
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index a5e1ff90..ef79a5c6 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -61,101 +61,72 @@ const Hero = () => {
     }
   }
   return (
-    <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-primary-600 via-primary-700 to-indigo-900">
-      {}
-      <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute inset-0 opacity-20">
-          <div className="absolute top-0 -left-4 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl animate-float"></div>
-          <div className="absolute top-0 -right-4 w-96 h-96 bg-yellow-500 rounded-full mix-blend-multiply filter blur-3xl animate-float-delayed-2s"></div>
-          <div className="absolute -bottom-8 left-20 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl animate-float-delayed-4s"></div>
-        </div>
-        {}
-        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzRjMC0yLjIxIDEuNzktNCA0LTRzNCAxLjc5IDQgNC0xLjc5IDQtNCA0LTQtMS43OS00LTR6TTAgMTRjMC0yLjIxIDEuNzktNCA0LTRzNCAxLjc5IDQgNC0xLjc5IDQtNCA0LTQtMS43OS00LTR6bTAgNDBjMC0yLjIxIDEuNzktNCA0LTRzNCAxLjc5IDQgNC0xLjc5IDQtNCA0LTQtMS43OS00LTR6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-10"></div>
+    <section className="relative isolate overflow-hidden bg-gradient-to-br from-slate-950 via-slate-900 to-primary-950 text-white">
+      <div className="absolute inset-0 opacity-40">
+        <div className="absolute -top-32 -right-20 h-96 w-96 rounded-full bg-primary-500/30 blur-3xl"></div>
+        <div className="absolute -bottom-40 -left-16 h-96 w-96 rounded-full bg-cyan-500/20 blur-3xl"></div>
+        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzRjMC0yLjIxIDEuNzktNCA0LTRzNCAxLjc5IDQgNC0xLjc5IDQtNCA0LTQtMS43OS00LTR6TTAgMTRjMC0yLjIxIDEuNzktNCA0LTRzNCAxLjc5IDQgNC0xLjc5IDQtNCA0LTQtMS43OS00LTR6bTAgNDBjMC0yLjIxIDEuNzktNCA0LTRzNCAxLjc5IDQgNC0xLjc5IDQtNCA0LTQtMS43OS00LTR6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-20"></div>
       </div>
-      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 z-10">
-        <div className="text-center">
-          {}
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-xl border border-white/20 text-white mb-8 animate-slide-down">
+      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+        <div className="text-center space-y-10">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border border-white/20 text-sm font-medium">
             <Sparkles className="w-4 h-4" />
-            <span className="text-sm font-medium">{heroContent.badgeText}</span>
+            <span>{heroContent.badgeText}</span>
+          </div>
+          <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-2xl border border-white/20 bg-white/10 backdrop-blur">
+            <HeroIcon className="w-12 h-12 text-white" />
           </div>
-          {}
-          <div className="inline-flex items-center justify-center w-24 h-24 mb-8 relative group animate-scale-in">
-            <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-white/10 rounded-3xl rotate-6 group-hover:rotate-12 transition-transform duration-500"></div>
-            <div className="absolute inset-0 bg-gradient-to-r from-white/10 to-white/5 rounded-3xl -rotate-6 group-hover:-rotate-12 transition-transform duration-500"></div>
-            <div className="relative bg-white/20 backdrop-blur-xl rounded-2xl p-5 border border-white/30 shadow-2xl">
-              <HeroIcon className="w-12 h-12 text-white" />
-            </div>
+          <div className="space-y-6">
+            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-white">
+              <span>{heroContent?.title?.line1}</span>
+              <span className="block text-primary-200">{heroContent?.title?.line2}</span>
+            </h1>
+            <p className="text-lg sm:text-xl text-slate-200 max-w-3xl mx-auto leading-relaxed">
+              {heroContent?.subtitle}
+              {heroContent?.subline && (
+                <span className="block mt-2 text-slate-300">{heroContent.subline}</span>
+              )}
+            </p>
           </div>
-          {}
-          <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 animate-slide-up">
-            <span className="text-white drop-shadow-2xl">
-              {heroContent?.title?.line1}
-            </span>
-            <br />
-            <span className="bg-gradient-to-r from-yellow-200 via-yellow-100 to-yellow-200 bg-clip-text text-transparent drop-shadow-lg animate-gradient bg-[length:200%_auto]">
-              {heroContent?.title?.line2}
-            </span>
-          </h1>
-          {}
-          <p className="text-xl sm:text-2xl text-blue-50 mb-12 max-w-3xl mx-auto leading-relaxed animate-slide-up-delayed-1">
-            {heroContent?.subtitle}
-            {heroContent?.subline && (
-              <span className="block mt-2 text-blue-100">{heroContent.subline}</span>
-            )}
-          </p>
-          {}
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16 animate-slide-up-delayed-2">
-            <button 
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <button
               onClick={() => handleTarget(heroContent?.primaryCta?.target)}
-              className="group relative px-8 py-4 bg-white text-primary-700 rounded-xl font-semibold shadow-2xl hover:shadow-white/20 transition-all duration-300 hover:scale-105 hover:-translate-y-1 overflow-hidden"
+              className="btn-primary"
               aria-label="Zu den Tutorials navigieren"
             >
-              <span className="relative z-10 flex items-center gap-2">
+              <span className="flex items-center gap-2">
                 {heroContent?.primaryCta?.label || "Los geht's"}
-                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                <ArrowRight className="w-5 h-5" />
               </span>
-              <div className="absolute inset-0 bg-gradient-to-r from-yellow-100 to-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
             </button>
-            <button 
+            <button
               onClick={() => handleTarget(heroContent?.secondaryCta?.target)}
-              className="group px-8 py-4 bg-white/10 backdrop-blur-xl text-white rounded-xl font-semibold border-2 border-white/30 hover:bg-white/20 hover:border-white/50 transition-all duration-300 hover:scale-105 hover:-translate-y-1"
+              className="btn-secondary-inverse"
               aria-label="Mehr über die Tutorials erfahren"
             >
               <span className="flex items-center gap-2">
                 {heroContent?.secondaryCta?.label || 'Mehr erfahren'}
-                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                <ArrowRight className="w-5 h-5" />
               </span>
             </button>
           </div>
-          {}
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-5xl mx-auto animate-slide-up-delayed-3">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-5xl mx-auto text-left">
             {features.map((feature, i) => {
               const FeatureIcon = getIconComponent(feature.icon, 'Terminal')
               return (
-                <div 
+                <div
                   key={i}
-                  className="group relative bg-white/10 backdrop-blur-xl rounded-2xl p-6 border border-white/20 hover:bg-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2 cursor-pointer"
+                  className="rounded-2xl border border-white/15 bg-white/5 p-6 backdrop-blur transition-colors duration-300 hover:border-primary-400/40"
                 >
-                  {}
-                  <div className={`absolute inset-0 bg-gradient-to-br ${feature.color || 'from-blue-500 to-cyan-500'} opacity-0 group-hover:opacity-10 rounded-2xl transition-opacity duration-500 blur-xl`}></div>
-                  <div className="relative">
-                    <div className={`inline-flex p-3 rounded-xl bg-gradient-to-br ${feature.color || 'from-blue-500 to-cyan-500'} mb-4 shadow-lg`}>
-                      <FeatureIcon className="w-6 h-6 text-white" />
-                    </div>
-                    <h3 className="font-bold text-lg text-white mb-2">{feature.title}</h3>
-                    <p className="text-blue-100 text-sm leading-relaxed">{feature.description}</p>
+                  <div className={`inline-flex p-3 rounded-xl bg-gradient-to-br ${feature.color || 'from-blue-500 to-cyan-500'} mb-4 shadow-md`}>
+                    <FeatureIcon className="w-6 h-6 text-white" />
                   </div>
+                  <h3 className="font-semibold text-lg text-white mb-2">{feature.title}</h3>
+                  <p className="text-sm text-slate-200 leading-relaxed">{feature.description}</p>
                 </div>
               )
             })}
           </div>
-          {}
-          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
-            <div className="w-6 h-10 rounded-full border-2 border-white/30 flex items-start justify-center p-2">
-              <div className="w-1 h-3 bg-white rounded-full"></div>
-            </div>
-          </div>
         </div>
       </div>
     </section>
diff --git a/src/components/PageManager.jsx b/src/components/PageManager.jsx
index a4ef4a8c..c11a8364 100644
--- a/src/components/PageManager.jsx
+++ b/src/components/PageManager.jsx
@@ -670,6 +670,17 @@ const PageManager = () => {
   const pagesAbortRef = useRef(null)
   const postsAbortRef = useRef(null)
   const isMountedRef = useRef(true)
+  const normalizedPublishedSlugs = useMemo(() => {
+    if (!Array.isArray(publishedPages?.publishedSlugs)) {
+      return new Set()
+    }
+    return new Set(
+      publishedPages.publishedSlugs
+        .map((slug) => (typeof slug === 'string' ? slug.trim().toLowerCase() : ''))
+        .filter(Boolean),
+    )
+  }, [publishedPages?.publishedSlugs])
+  const publishedSlugList = useMemo(() => Array.from(normalizedPublishedSlugs).sort(), [normalizedPublishedSlugs])
   useEffect(() => {
     isMountedRef.current = true
     return () => {
@@ -891,7 +902,7 @@ const PageManager = () => {
     setPostFormData(null)
   }
   const dynamicPagesInNav = navigation?.dynamic?.length ?? 0
-  const totalPublishedPages = publishedPages?.publishedSlugs?.length ?? 0
+  const totalPublishedPages = publishedSlugList.length
   return (
     <div className="space-y-8">
       <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
@@ -952,7 +963,7 @@ const PageManager = () => {
             </div>
           </div>
           <div className="space-y-3">
-            {(publishedPages?.publishedSlugs ?? []).map((slugValue) => (
+            {publishedSlugList.map((slugValue) => (
               <div key={slugValue} className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-300">
                 <span>/pages/{slugValue}</span>
               </div>
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index 27072727..02d0769a 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -21,7 +21,7 @@ const SearchBar = ({ onClose }) => {
       })
   }, []);
   useEffect(() => {
-    if (query.trim().length < 2) {
+    if (query.trim().length < 1) {
       setResults([]);
       return;
     }
@@ -116,14 +116,14 @@ const SearchBar = ({ onClose }) => {
               Suche läuft...
             </div>
           )}
-          {!isLoading && query.trim().length >= 2 && results.length === 0 && (
+          {!isLoading && query.trim().length >= 1 && results.length === 0 && (
             <div className="text-center py-8 text-gray-500 dark:text-gray-400">
               Keine Ergebnisse gefunden
             </div>
           )}
-          {!isLoading && query.trim().length < 2 && (
+          {!isLoading && query.trim().length < 1 && (
             <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-              Gib mindestens 2 Zeichen ein
+              Gib mindestens 1 Zeichen ein
             </div>
           )}
           {!isLoading && results.length > 0 && (
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
index 4f811590..897eb919 100644
--- a/src/components/ThemeToggle.jsx
+++ b/src/components/ThemeToggle.jsx
@@ -50,8 +50,8 @@ const ThemeToggle = () => {
       className="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
       
       // Accessibility label for screen readers
-      // Dynamically describes the action based on current theme
-      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+      // Includes the word "theme" to align with automated tests and clarity
+      aria-label={`Toggle theme (switch to ${theme === 'dark' ? 'light' : 'dark'} mode)`}
     >
       {/* Conditional rendering based on current theme */}
       {theme === 'dark' ? (
diff --git a/src/components/TutorialSection.jsx b/src/components/TutorialSection.jsx
index 258c8af2..5f05b6b9 100644
--- a/src/components/TutorialSection.jsx
+++ b/src/components/TutorialSection.jsx
@@ -19,28 +19,28 @@ const TutorialSection = () => {
   }, [tutorials])
   return (
     <section
-      className="relative isolate overflow-hidden bg-gradient-to-br from-[#0b1733] via-[#101f3d] to-[#050a1a] py-24 sm:py-28 text-neutral-100"
+      className="relative isolate overflow-hidden bg-slate-950 text-slate-100 py-24 sm:py-28"
       data-section="tutorials"
       id="tutorials"
     >
       <div className="absolute inset-0 -z-10">
         <div
           aria-hidden="true"
-          className="absolute inset-x-0 top-0 h-[420px] bg-gradient-to-b from-primary-500/25 via-primary-500/10 to-transparent blur-3xl"
+          className="absolute inset-x-0 top-0 h-64 bg-gradient-to-b from-primary-500/15 via-primary-500/5 to-transparent"
         ></div>
         <div
           aria-hidden="true"
-          className="absolute -right-36 top-1/3 h-96 w-96 rounded-full bg-[radial-gradient(circle_at_top,#22d3ee33,transparent)] blur-3xl"
+          className="absolute -right-40 top-1/4 h-80 w-80 rounded-full bg-primary-400/20 blur-3xl"
         ></div>
         <div
           aria-hidden="true"
-          className="absolute -left-32 bottom-0 h-80 w-80 rounded-full bg-[radial-gradient(circle_at_bottom,#a855f733,transparent)] blur-3xl"
+          className="absolute -left-32 bottom-0 h-72 w-72 rounded-full bg-cyan-400/10 blur-3xl"
         ></div>
       </div>
       <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
-          <h2 className="section-title">{sectionContent.title || 'Tutorial Inhalte'}</h2>
-          <p className="mt-4 text-lg leading-relaxed text-neutral-200 max-w-2xl mx-auto">
+          <h2 className="section-title text-white">{sectionContent.title || 'Tutorial Inhalte'}</h2>
+          <p className="mt-4 text-lg leading-relaxed text-slate-300 max-w-2xl mx-auto">
             {sectionContent.description ||
               'Umfassende Lernmodule für alle Erfahrungsstufen – vom Anfänger bis zum Profi'}
           </p>
@@ -69,11 +69,11 @@ const TutorialSection = () => {
           ))}
         </div>
       )}
-        <div className="mt-20 rounded-3xl border border-white/10 bg-gradient-to-r from-primary-600 via-primary-700 to-[#0f1c45] p-8 text-center text-neutral-50 shadow-card-xl md:p-12">
-          <h3 className="mb-4 text-3xl font-semibold md:text-4xl">
+        <div className="mt-20 rounded-3xl border border-white/10 bg-slate-900/80 p-8 text-center text-slate-100 shadow-card-xl md:p-12">
+          <h3 className="mb-4 text-3xl font-semibold md:text-4xl text-white">
             {sectionContent.heading || 'Bereit anzufangen?'}
           </h3>
-          <p className="mb-8 text-lg text-neutral-100/80">
+          <p className="mb-8 text-lg text-slate-300">
             {sectionContent.ctaDescription ||
               'Wähle ein Thema aus und starte deine Linux-Lernreise noch heute!'}
           </p>
@@ -82,7 +82,7 @@ const TutorialSection = () => {
               onClick={() =>
                 navigateContentTarget(sectionContent?.ctaPrimary?.target, { navigate, location })
               }
-              className="rounded-xl bg-gradient-to-r from-primary-500 to-primary-700 px-8 py-3 font-semibold text-neutral-50 shadow-lg transition-all duration-300 hover:-translate-y-0.5 hover:from-primary-400 hover:to-primary-600"
+              className="btn-primary"
               aria-label="Tutorial starten und nach oben scrollen"
             >
               {sectionContent?.ctaPrimary?.label || 'Tutorial starten'}
@@ -91,7 +91,7 @@ const TutorialSection = () => {
               onClick={() =>
                 navigateContentTarget(sectionContent?.ctaSecondary?.target, { navigate, location })
               }
-              className="rounded-xl border border-white/20 bg-white/10 px-8 py-3 font-semibold text-neutral-100 transition-all duration-300 hover:bg-white/20 hover:text-white"
+              className="btn-secondary-inverse"
               aria-label="Mehr über die Tutorials erfahren"
             >
               {sectionContent?.ctaSecondary?.label || 'Mehr erfahren'}
diff --git a/src/context/ContentContext.jsx b/src/context/ContentContext.jsx
index b6f36f47..2cf20c32 100644
--- a/src/context/ContentContext.jsx
+++ b/src/context/ContentContext.jsx
@@ -178,6 +178,7 @@ export const ContentProvider = ({ children }) => {
   const [publishedPagesError, setPublishedPagesError] = useState(null)
   const [pageCache, setPageCache] = useState({})
   const pageCacheRef = useRef({})
+  const publishedPageSlugsRef = useRef([])
   const loadContent = useCallback(async () => {
     try {
       setLoading(true)
@@ -227,6 +228,12 @@ export const ContentProvider = ({ children }) => {
       setPublishedPagesLoading(false)
     }
   }, [])
+  useEffect(() => {
+    publishedPageSlugsRef.current = Array.isArray(publishedPageSlugs)
+      ? publishedPageSlugs
+      : []
+  }, [publishedPageSlugs])
+
   const fetchPublishedPage = useCallback(
     async (slug, { force = false, signal } = {}) => {
       if (!slug || typeof slug !== 'string') {
@@ -239,6 +246,29 @@ export const ContentProvider = ({ children }) => {
       if (!force && pageCacheRef.current[normalizedSlug]) {
         return pageCacheRef.current[normalizedSlug]
       }
+      const buildSlugSet = (values) =>
+        new Set(
+          (Array.isArray(values) ? values : [])
+            .map((value) => (typeof value === 'string' ? value.trim().toLowerCase() : ''))
+            .filter(Boolean),
+        )
+
+      if (!force) {
+        const initialPublished = buildSlugSet(publishedPageSlugsRef.current)
+        if (!initialPublished.has(normalizedSlug)) {
+          await loadPublishedPages()
+          await new Promise((resolve) => {
+            // allow state updates triggered by loadPublishedPages to settle before checking again
+            setTimeout(resolve, 0)
+          })
+          const refreshedPublished = buildSlugSet(publishedPageSlugsRef.current)
+          if (!refreshedPublished.has(normalizedSlug)) {
+            const error = new Error('Seite ist nicht veröffentlicht oder wurde entfernt.')
+            error.status = 404
+            throw error
+          }
+        }
+      }
       try {
         const data = await api.getPublishedPage(normalizedSlug, { signal })
         const nextCache = { ...pageCacheRef.current, [normalizedSlug]: data }
@@ -249,10 +279,16 @@ export const ContentProvider = ({ children }) => {
         if (!force && pageCacheRef.current[normalizedSlug]) {
           return pageCacheRef.current[normalizedSlug]
         }
+        const published = buildSlugSet(publishedPageSlugsRef.current)
+        if (!published.has(normalizedSlug)) {
+          const error = new Error('Seite ist nicht veröffentlicht oder wurde entfernt.')
+          error.status = 404
+          throw error
+        }
         throw err
       }
     },
-    [],
+    [loadPublishedPages],
   )
   const invalidatePageCache = useCallback((slug) => {
     if (slug && typeof slug === 'string') {
@@ -310,27 +346,50 @@ export const ContentProvider = ({ children }) => {
       id: item.id || item.slug || item.path || `static-${index}`,
       source: item.source || 'static',
     }))
+
+    const normalizedPublishedSlugs = new Set(
+      (Array.isArray(publishedPageSlugs) ? publishedPageSlugs : [])
+        .map((slug) => (typeof slug === 'string' ? slug.trim().toLowerCase() : ''))
+        .filter(Boolean),
+    )
+    const restrictToPublished = normalizedPublishedSlugs.size > 0
+
     const filteredDynamic = Array.isArray(dynamicNavItems)
-      ? dynamicNavItems.filter((item) => item && item.slug)
+      ? dynamicNavItems.filter((item) => {
+          if (!item || typeof item.slug !== 'string') {
+            return false
+          }
+          const normalizedSlug = item.slug.trim().toLowerCase()
+          if (!normalizedSlug) {
+            return false
+          }
+          if (restrictToPublished && !normalizedPublishedSlugs.has(normalizedSlug)) {
+            return false
+          }
+          return true
+        })
       : []
     const sortedDynamic = [...filteredDynamic].sort(
       (a, b) => (a?.order_index ?? 0) - (b?.order_index ?? 0),
     )
-    const dynamicNormalized = sortedDynamic.map((item, index) => ({
-      id: item.id || `page-${item.slug}-${index}`,
-      label: item.label || item.slug || 'Seite',
-      type: 'route',
-      path: `/pages/${item.slug}`,
-      slug: item.slug,
-      source: 'dynamic',
-      order_index: item.order_index ?? index,
-    }))
+    const dynamicNormalized = sortedDynamic.map((item, index) => {
+      const normalizedSlug = item.slug.trim().toLowerCase()
+      return {
+        id: item.id || `page-${normalizedSlug}-${index}`,
+        label: item.label || item.slug || 'Seite',
+        type: 'route',
+        path: `/pages/${normalizedSlug}`,
+        slug: normalizedSlug,
+        source: 'dynamic',
+        order_index: item.order_index ?? index,
+      }
+    })
     return {
       static: staticNormalized,
       dynamic: dynamicNormalized,
       items: [...staticNormalized, ...dynamicNormalized],
     }
-  }, [content, dynamicNavItems])
+  }, [content, dynamicNavItems, publishedPageSlugs])
   const value = useMemo(() => ({
     content,
     loading,
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
index 41f25fb5..f605929f 100644
--- a/src/context/ThemeContext.jsx
+++ b/src/context/ThemeContext.jsx
@@ -78,18 +78,27 @@ export const ThemeProvider = ({ children }) => {
    * This ensures theme persists across sessions and respects user preferences.
    */
   const [theme, setTheme] = useState(() => {
-    // Try to get saved theme from localStorage
-    const savedTheme = localStorage.getItem('theme');
-    
-    // If theme was previously saved, use it
-    if (savedTheme) return savedTheme;
-    
-    // Check if user's system prefers dark mode
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';  // Use dark theme if system preference is dark
+    if (typeof window === 'undefined') {
+      return 'light';
     }
-    
-    // Default to light theme if no preference found
+
+    try {
+      const savedTheme = window.localStorage?.getItem('theme');
+      if (savedTheme) {
+        return savedTheme;
+      }
+    } catch (error) {
+      console.warn('Unable to read theme from localStorage:', error);
+    }
+
+    try {
+      if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+      }
+    } catch (error) {
+      console.warn('System theme preference detection failed:', error);
+    }
+
     return 'light';
   });
   /**
@@ -103,17 +112,25 @@ export const ThemeProvider = ({ children }) => {
    */
   useEffect(() => {
     // Get reference to document root element (<html>)
+    if (typeof window === 'undefined' || !window.document?.documentElement) {
+      return undefined;
+    }
+
     const root = window.document.documentElement;
-    
+
     // Apply or remove 'dark' class based on current theme
     if (theme === 'dark') {
       root.classList.add('dark');     // Add 'dark' class for dark mode styles
     } else {
       root.classList.remove('dark');  // Remove 'dark' class for light mode
     }
-    
+
     // Persist theme preference to localStorage for next session
-    localStorage.setItem('theme', theme);
+    try {
+      window.localStorage?.setItem('theme', theme);
+    } catch (error) {
+      console.warn('Unable to persist theme preference:', error);
+    }
   }, [theme]);  // Re-run effect whenever theme changes
   /**
    * Toggle Theme Function
diff --git a/src/index.css b/src/index.css
index ecc2a18e..b3be18bf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -153,22 +153,29 @@
     -webkit-text-fill-color: transparent;
   }
 
-  /* Primary button with gradient background and hover effects */
+  /* Button utility styles for consistent CTA presentation */
+  .btn-base {
+    @apply inline-flex items-center justify-center gap-2 rounded-xl font-semibold transition-all duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-60 disabled:cursor-not-allowed;
+  }
+
   .btn-primary {
-    background: linear-gradient(to right, #0284c7, #0369a1);
-    @apply relative px-8 py-4 text-white rounded-xl font-semibold shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 overflow-hidden;
+    @apply btn-base px-6 py-3 text-white shadow-md bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-500 hover:to-primary-600 hover:-translate-y-0.5;
   }
 
-  /* Shimmer effect overlay for primary button hover state */
-  .btn-primary::before {
-    content: '';
-    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent);
-    @apply absolute inset-0 opacity-0 transition-opacity duration-300;
+  .btn-primary--compact {
+    @apply px-5 py-2.5;
   }
 
-  /* Show shimmer effect on button hover */
-  .btn-primary:hover::before {
-    @apply opacity-100;
+  .btn-secondary {
+    @apply btn-base px-6 py-3 border border-primary-600 text-primary-700 bg-white hover:bg-primary-50;
+  }
+
+  .btn-secondary-inverse {
+    @apply btn-base px-6 py-3 border border-white/40 text-white hover:bg-white/10;
+  }
+
+  .btn-ghost {
+    @apply btn-base px-6 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 dark:text-gray-300 dark:hover:text-primary-300 dark:hover:bg-gray-800/60;
   }
   /* Floating animation class for continuous up and down movement */
   .floating {
diff --git a/src/pages/Grundlagen.jsx b/src/pages/Grundlagen.jsx
index 17b647c5..1f307baf 100644
--- a/src/pages/Grundlagen.jsx
+++ b/src/pages/Grundlagen.jsx
@@ -101,16 +101,10 @@ const Grundlagen = () => {
             {cta.description || 'Wechsel zur Startseite und wähle das Modul, das am besten zu dir passt, oder tauche direkt in die Praxis- und Advanced-Themen ein, sobald du die Grundlagen sicher beherrschst.'}
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <a
-              href={cta.primary?.href || '/'}
-              className="inline-flex items-center justify-center gap-2 px-8 py-3 rounded-xl bg-gradient-to-r from-primary-600 to-primary-700 text-white font-semibold shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
-            >
+            <a href={cta.primary?.href || '/'} className="btn-primary">
               {cta.primary?.label || 'Zur Startseite'}
             </a>
-            <a
-              href={cta.secondary?.href || '/admin'}
-              className="inline-flex items-center justify-center gap-2 px-8 py-3 rounded-xl border border-primary-600 text-primary-700 font-semibold transition-all duration-300 hover:bg-primary-50"
-            >
+            <a href={cta.secondary?.href || '/admin'} className="btn-secondary">
               {cta.secondary?.label || 'Tutorials verwalten'}
             </a>
           </div>
diff --git a/src/utils/progressTracking.js b/src/utils/progressTracking.js
index eeea9ac3..b677b85c 100644
--- a/src/utils/progressTracking.js
+++ b/src/utils/progressTracking.js
@@ -2,6 +2,7 @@
 const STORAGE_KEY = 'linux_tutorial_cms_progress_v2';
 const BOOKMARKS_KEY = 'linux_tutorial_cms_bookmarks_v2';
 const STORAGE_PREFIX = 'linux_tutorial_cms_';
+const MAX_STORAGE_RETRIES = 2;
 // Performance and security limits
 const MAX_STORAGE_SIZE = 5 * 1024 * 1024; // 5MB limit
 const MAX_TUTORIALS_PER_USER = 1000;
@@ -35,7 +36,7 @@ const safeGetStorage = (key, defaultValue = null) => {
     return defaultValue;
   }
 };
-const safeSetStorage = (key, value) => {
+const safeSetStorage = (key, value, attempt = 0) => {
   try {
     const serialized = JSON.stringify(value);
     // Check size limits
@@ -52,25 +53,47 @@ const safeSetStorage = (key, value) => {
   } catch (error) {
     if (error.name === 'QuotaExceededError') {
       console.warn('Storage quota exceeded, attempting to free space...');
-      attemptStorageCleanup();
-      return safeSetStorage(key, value);
+      const cleaned = attemptStorageCleanup();
+      if (!cleaned || attempt >= MAX_STORAGE_RETRIES) {
+        console.error('Storage cleanup did not free enough space. Aborting write.');
+        return false;
+      }
+      return safeSetStorage(key, value, attempt + 1);
     }
     console.error(`Failed to store ${key} to storage:`, error);
     return false;
   }
 };
 const attemptStorageCleanup = () => {
+  if (!isLocalStorageAvailable()) {
+    return false;
+  }
   try {
-    const keys = Object.keys(localStorage).filter(key => key.startsWith(STORAGE_PREFIX));
-    const totalSize = keys.reduce((size, key) => {
-      return size + (localStorage.getItem(key) || '').length;
-    }, 0);
-    if (totalSize > MAX_STORAGE_SIZE * 0.9) {
-      console.warn('Cleaning up old progress data to free space');
-      // Implementation for cleaning up old data would go here
+    const entries = Object.keys(localStorage)
+      .filter((key) => key.startsWith(STORAGE_PREFIX))
+      .map((key) => ({ key, size: (localStorage.getItem(key) || '').length }))
+      .sort((a, b) => b.size - a.size);
+
+    let totalSize = entries.reduce((size, entry) => size + entry.size, 0);
+    if (totalSize <= MAX_STORAGE_SIZE * 0.9) {
+      return false;
     }
+
+    console.warn('Cleaning up stored progress data to free space');
+    let removed = false;
+    for (const entry of entries) {
+      localStorage.removeItem(entry.key);
+      totalSize -= entry.size;
+      removed = true;
+      if (totalSize <= MAX_STORAGE_SIZE * 0.8) {
+        break;
+      }
+    }
+
+    return removed;
   } catch (error) {
     console.error('Storage cleanup failed:', error);
+    return false;
   }
 };
 const validateTutorialId = (tutorialId) => {
@@ -237,8 +260,7 @@ export const getProgressStatistics = () => {
     // Get recently completed tutorials (last 5)
     const recentlyRead = completedIds
       .sort((a, b) => new Date(progress[b].timestamp) - new Date(progress[a].timestamp))
-      .slice(-5)
-      .reverse();
+      .slice(0, 5);
     return {
       totalTutorials: tutorialIds.length,
       completedTutorials: completedIds.length,