diff --git a/src/App.tsx b/src/App.tsx
index b07fd68..a8dab00 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -124,6 +124,8 @@ export default function App() {
     }
     const handleSplashFinished = () => {
         setIsLoading(false);
+        setIsLoggedIn(false);
+        localStorage.setItem('loggedIn', 'false');
     };
 
     if (isLoading) {
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index 8b83e1c..3f859ef 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1,8 +1,8 @@
 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="50%">
-            <stop offset="0%" stop-color="darkorchid" />
-            <stop offset="100%" stop-color="darkslateblue" />
+            <stop offset="0%" stop-color="#a64dff" />
+            <stop offset="100%" stop-color="#6a0dad" />
         </linearGradient>
         <mask id="moonMask">
             <circle cx="60" cy="60" r="50" fill="white" />
diff --git a/src/assets/logotext.svg b/src/assets/logotext.svg
index 70bf655..c1806f8 100644
--- a/src/assets/logotext.svg
+++ b/src/assets/logotext.svg
@@ -1,8 +1,8 @@
 <svg width="400" height="120" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0" stop-color="darkorchid" />
-            <stop offset="100" stop-color="darkslateblue" />
+            <stop offset="0" stop-color="#a64dff" />
+            <stop offset="100" stop-color="#6a0dad" />
         </linearGradient>
         <mask id="moonMask">
             <circle cx="60" cy="60" r="50" fill="white" />
@@ -14,7 +14,8 @@
     </defs>
     <circle cx="60" cy="50%" r="50" fill="url(#moonGradient)" mask="url(#moonMask)" />
     <text x="250" y="60%" dominant-baseline="middle" text-anchor="middle"
-          font-family="'Raleway', sans-serif" font-size="70" fill="url(#moonGradient)" letter-spacing="2">
+          font-family="'Raleway', sans-serif" font-size="70" fill="white" letter-spacing="2" 
+          style="text-shadow: 0 0 5px rgba(0,0,0,0.3);">
         REMind
     </text>
 </svg>
diff --git a/src/components/SplashScreen.tsx b/src/components/SplashScreen.tsx
index ba9355e..2c019e9 100644
--- a/src/components/SplashScreen.tsx
+++ b/src/components/SplashScreen.tsx
@@ -1,33 +1,31 @@
-import {useEffect} from 'react';
+import { useEffect } from 'react';
 import logo from '../assets/logo.svg';
 import text from '../assets/text.svg';
 
 interface SplashScreenProps {
-    onFinished: () => void;
+  onFinished: () => void;
 }
 
-export default function SplashScreen({onFinished}: SplashScreenProps) {
-    useEffect(() => {
-        // Simulate loading time with a timeout
-        const timer = setTimeout(() => {
-            onFinished();
-            localStorage.setItem('loggedIn', 'false');
-        }, 2000); // Show splash screen for 2 seconds
+export default function SplashScreen({ onFinished }: SplashScreenProps) {
+  useEffect(() => {
+    // Simulate loading time with a timeout
+    const timer = setTimeout(() => {
+      onFinished();
+    }, 2000); // Show splash screen for 2 seconds
 
-        return () => clearTimeout(timer);
-    }, [onFinished]);
+    return () => clearTimeout(timer);
+  }, [onFinished]);
 
-    return (<div
-            className="fixed inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-violet-900 via-rose-500 to-indigo-950 z-50">
-            <div className="animate-pulse flex flex-col items-center">
-                <img src={logo} alt="REMind Logo" className="h-64 w-64 mb-4"/>
-                <img src={text} alt="REMind Text" className="h-32"/>
-                <p className="h-16">Träume analysieren, Gesellschaft verstehen</p>
-            </div>
-            <div className="mt-8 text-fuchsia-400">
-                <div
-                    className="animate-spin h-8 w-8 border-4 border-current border-t-transparent rounded-full mx-auto"></div>
-                <p className="mt-4 text-center">Loading your dreams...</p>
-            </div>
-        </div>);
+  return (
+    <div className="fixed inset-0 flex flex-col items-center justify-center z-50 bg-gradient-to-br from-fuchsia-900 via-pink-700 to-purple-900">
+      <div className="animate-pulse flex flex-col items-center">
+        <img src={logo} alt="REMind Logo" className="h-32 w-32 mb-4" />
+        <img src={text} alt="REMind Text" className="h-16" />
+      </div>
+      <div className="mt-8 text-fuchsia-400">
+        <div className="animate-spin h-8 w-8 border-4 border-current border-t-transparent rounded-full mx-auto"></div>
+        <p className="mt-4 text-center">Loading your dreams...</p>
+      </div>
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index dbf5e0e..5d8f4d7 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -8,7 +8,7 @@ export default function TopBar() {
 
   // Function to update theme meta tag
   const updateThemeColor = (isDark: boolean) => {
-    const themeColor = isDark ? '#bb86fc' : '#9d4eff';
+    const themeColor = isDark ? '#c490ff' : '#6a0dad';
     const metaThemeColor = document.querySelector('meta[name="theme-color"]');
     if (metaThemeColor) {
       metaThemeColor.setAttribute('content', themeColor);
@@ -66,7 +66,9 @@ export default function TopBar() {
     >
       <div className="flex items-center justify-between w-full max-w-6xl mx-auto">
         <div className="flex items-center">
-          <img src={logotext} alt="REMind Logo and Text" className="h-16"/>
+          <div className="p-1 rounded-lg" style={{ backgroundColor: 'rgba(255, 255, 255, 0.15)', backdropFilter: 'blur(4px)' }}>
+            <img src={logotext} alt="REMind Logo and Text" className="h-16"/>
+          </div>
         </div>
 
         <button 
diff --git a/src/index.css b/src/index.css
index 8954949..1492565 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,16 +1,16 @@
 @import "tailwindcss";
 
 :root {
-  --bg: #f8f5ff;
-  --container: #ede6fa;
-  --card: #e0d4ff;
-  --text: #1e102e;
-  --text-muted: #4a375e;
-  --accent: #9d4eff;
-  --accent-gradient: linear-gradient(135deg, #9d4eff, #d500f9);
+  --bg: #f9f6ff;
+  --container: #eee8fc;
+  --card: #e5dcff;
+  --text: #1a0d29;
+  --text-muted: #3d2a5c;
+  --accent: #a64dff;
+  --accent-gradient: linear-gradient(135deg, #a64dff, #d500f9);
   --accent-soft: #c9a4ff;
   --accent-dark: #6a0dad;
-  --shadow: rgba(157, 78, 255, 0.2);
+  --shadow: rgba(166, 77, 255, 0.2);
 
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -27,16 +27,16 @@
 }
 
 [data-theme="dark"] {
-  --bg: #1a0933;
-  --container: #2d1155;
+  --bg: #150830;
+  --container: #2a1050;
   --card: #3d1a6e;
-  --text: #f5e6ff;
-  --text-muted: #c9a4e3;
-  --accent: #bb86fc;
-  --accent-gradient: linear-gradient(135deg, #bb86fc, #d500f9);
-  --accent-soft: #9d4eff;
+  --text: #f8eeff;
+  --text-muted: #d4b8f0;
+  --accent: #c490ff;
+  --accent-gradient: linear-gradient(135deg, #c490ff, #d500f9);
+  --accent-soft: #a64dff;
   --accent-dark: #6a0dad;
-  --shadow: rgba(187, 134, 252, 0.3);
+  --shadow: rgba(196, 144, 255, 0.3);
 }
 
 .border-background {
diff --git a/src/pages/DreamPage.tsx b/src/pages/DreamPage.tsx
index 8e98ae2..af5ff25 100644
--- a/src/pages/DreamPage.tsx
+++ b/src/pages/DreamPage.tsx
@@ -1,13 +1,10 @@
+// src/pages/DreamPage.tsx
+
 import {type NavigateFunction, useNavigate, useParams} from 'react-router-dom';
 import {mockDreams} from '../data/MockDreams';
 import MockUsers from '../data/MockUsers';
 import User from '../types/User';
 import type Dream from "../types/Dream.ts";
-import {FaArrowLeft} from "react-icons/fa";
-import Slider from "react-slick";
-
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 
 export default function DreamPage() {
     const {id} = useParams<{ id: string }>();
@@ -21,35 +18,35 @@ export default function DreamPage() {
             <button
                 onClick={() => navigate(-1)}
                 className="mb-4 hover:underline"
-                style={{color: 'var(--accent)'}}
+                style={{ color: 'var(--accent)' }}
             >
                 ← Zurück
             </button>
-            <p style={{color: 'var(--text-muted)'}}>Traum nicht gefunden.</p>
+            <p style={{ color: 'var(--text-muted)' }}>Traum nicht gefunden.</p>
         </div>);
     }
 
-    return (<div className="page min-h-screen">
+    return (<div className="page min-h-screen pb-20">
         {/* Header */}
-        <div className="relative" style={{background: 'var(--accent-gradient)'}}>
+        <div className="relative" style={{ background: 'var(--accent-gradient)' }}>
             <div className="p-4 sm:p-6 md:p-8 text-white">
                 <button
                     onClick={() => navigate(-1)}
                     className="absolute top-4 left-4 p-2 rounded-full bg-white/20 backdrop-blur-sm"
                 >
-                    <FaArrowLeft/>
+                    ←
                 </button>
-                <div className="flex items-center space-x-4 mt-8">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:space-x-4 mt-8">
                     {user && (<img
                         src={`/assets/profiles/${user.profilePicture}`}
                         alt={user.name}
-                        className="w-16 h-16 rounded-full border-4 border-white/30 object-cover"
+                        className="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-white/30 object-cover mx-auto sm:mx-0 mb-3 sm:mb-0"
                     />)}
-                    <div>
-                        <h1 className="font-bold !text-xl sm:!text-2xl md:!text-3xl lg:!text-4xl">
+                    <div className="text-center sm:text-left">
+                        <h1 className="font-bold text-xl sm:text-2xl md:text-3xl lg:text-4xl">
                             {dream.title}
                         </h1>
-                        {user && (<p className="mt-1 text-white/80">
+                        {user && (<p className="mt-1 text-white/80 text-sm sm:text-base">
                             {user.name} •{' '}
                             {dream.date.toLocaleDateString('de-DE', {
                                 day: '2-digit',
@@ -64,92 +61,83 @@ export default function DreamPage() {
             </div>
         </div>
 
-        <div className="p-4 sm:p-6 md:p-8 space-y-6 sm:space-y-8">
+        <div className="p-4 sm:p-6 md:p-8 space-y-6 sm:space-y-8 max-w-4xl mx-auto">
             <div className="dream-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
-                    <span className="font-medium" style={{color: 'var(--accent)'}}>Traum-Beschreibung</span>
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>Traum-Beschreibung</span>
                 </div>
-                {(dream.input.inputType === 'image' || dream.input.inputType === 'audio') && (
-                    <div className="flex justify-center mb-1">
-                        {dream.input.inputType === 'audio' && (
-                            <audio></audio>
-                        )}
-                        {dream.input.inputType === 'image' && (
-                            <img alt={dream.input.imgAlt}></img>
-                        )}
-                    </div>)}
-                <p className="leading-relaxed text-lg">
-                    {(dream.input.inputType === 'text' && dream.input.input)
-                        || (dream.input.inputType === 'audio' && dream.input.transcript)
-                        || (dream.input.inputType === 'image' && dream.input.description)}
+                <p className="leading-relaxed text-base sm:text-lg">
+                    {dream.input}
                 </p>
             </div>
 
             {dream.ai?.interpretation && dream.ai.interpretation !== '' && (<div
                 className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
-                    <span className="font-medium" style={{color: 'var(--accent)'}}>KI-Interpretation</span>
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Interpretation</span>
                 </div>
                 <p className="leading-relaxed">
                     {dream.ai.interpretation}
                 </p>
             </div>)}
 
-            <Slider className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
-                {dream.ai?.image && dream.ai.image !== '' && (<div>
-                    <div className="flex items-center mb-4">
-                        <span className="font-medium" style={{color: 'var(--accent)'}}>KI-Bild</span>
-                    </div>
-                    <div className="flex justify-center">
-                        <img
-                            src={`/assets/dreams/images/${dream.ai.image}`}
-                            alt="KI-generiertes Traumbild"
-                            className="max-w-full w-full sm:w-auto rounded-lg shadow-lg object-contain mx-auto"
-                        />
-                    </div>
-                </div>)}
-
-                {dream.ai?.video && dream.ai.video !== '' && (<div>
-                    <div className="flex items-center mb-4">
-                        <span className="font-medium" style={{color: 'var(--accent)'}}>KI-Video</span>
-                    </div>
-                    <div className="flex justify-center">
-                        <video
-                            controls
-                            src={`/assets/dreams/videos/${dream.ai.video}`}
-                            className="max-w-full w-full sm:w-auto rounded-lg shadow-lg object-contain mx-auto"
-                        >
-                            Ihr Browser unterstützt das Video-Element nicht.
-                        </video>
-                    </div>
-                </div>)}
-            </Slider>
+            {dream.ai?.image && dream.ai.image !== '' && (<div
+                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                <div className="flex items-center mb-4">
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Bild</span>
+                </div>
+                <div className="flex justify-center">
+                    <img 
+                        src={`/assets/dreams/images/${dream.ai.image}`}
+                        alt="KI-generiertes Traumbild" 
+                        className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                        style={{ maxHeight: '70vh' }}
+                    />
+                </div>
+            </div>)}
 
             {dream.ai?.audio && dream.ai.audio !== '' && (<div
                 className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
-                    <span className="font-medium" style={{color: 'var(--accent)'}}>KI-Audio</span>
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Audio</span>
                 </div>
                 <div className="flex justify-center">
-                    <audio
-                        controls
+                    <audio 
+                        controls 
                         src={`/assets/dreams/audio/${dream.ai.audio}`}
-                        className="w-full max-w-md sm:max-w-lg mx-auto"
+                        className="w-full max-w-xs sm:max-w-md md:max-w-lg mx-auto"
                     >
                         Ihr Browser unterstützt das Audio-Element nicht.
                     </audio>
                 </div>
             </div>)}
 
+            {dream.ai?.video && dream.ai.video !== '' && (<div
+                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                <div className="flex items-center mb-4">
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Video</span>
+                </div>
+                <div className="flex justify-center">
+                    <video 
+                        controls 
+                        src={`/assets/dreams/videos/${dream.ai.video}`}
+                        className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                        style={{ maxHeight: '70vh' }}
+                    >
+                        Ihr Browser unterstützt das Video-Element nicht.
+                    </video>
+                </div>
+            </div>)}
+
             <div className="dream-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <h2 className="text-lg font-semibold mb-3">Details</h2>
-                <div className="space-y-2" style={{color: 'var(--text-muted)'}}>
-                    <div className="flex justify-between">
-                        <span>Eingabetyp</span>
-                        <span className="capitalize">{dream.input.inputType}</span>
+                <div className="space-y-3" style={{ color: 'var(--text-muted)' }}>
+                    <div className="flex flex-col sm:flex-row sm:justify-between">
+                        <span className="font-medium mb-1 sm:mb-0">Eingabetyp</span>
+                        <span className="capitalize">{dream.inputType}</span>
                     </div>
-                    <div className="flex justify-between">
-                        <span>Datum</span>
+                    <div className="flex flex-col sm:flex-row sm:justify-between">
+                        <span className="font-medium mb-1 sm:mb-0">Datum</span>
                         <span>
                             {dream.date.toLocaleDateString('de-DE', {
                                 day: '2-digit', month: '2-digit', year: 'numeric',
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9941706..ae192be 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -30,7 +30,7 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
         </div>)
     }
 
-    return (<div className="p-4 max-w-6xl mx-auto relative overflow-hidden">
+    return (<div className="p-4 pb-20 max-w-6xl mx-auto relative overflow-hidden">
         {/* Floating Background Elements */}
         <div className="absolute inset-0 pointer-events-none">
             <div className="absolute top-10 left-10 text-purple-200 opacity-30">
@@ -45,20 +45,20 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
         </div>
 
         {/* Hero Section */}
-        <div className="text-center mb-16 relative z-10">
-            <div className="animate-pulse flex flex-col items-center mb-12">
+        <div className="text-center mb-12 sm:mb-16 relative z-10">
+            <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
                 <div className="flex items-center justify-around">
-                    <img src={logotext} alt="REMind Logo and Text" className="h-48 mb-4"/>
+                    <img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
                 </div>
-                <p className="text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
+                <p className="text-lg sm:text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
             </div>
-            <div className="dream-container max-w-3xl mx-auto backdrop-blur-sm bg-white/10 rounded-3xl p-8">
-                <div className="flex justify-center items-center mb-4">
-                    <HiSparkles className="text-yellow-400 mr-2" size={24}/>
-                    <h2 className="dream-title text-2xl">Träume sammeln • KI verstehen • VR erleben</h2>
-                    <HiSparkles className="text-yellow-400 ml-2" size={24}/>
+            <div className="dream-container max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8">
+                <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
+                    <HiSparkles className="text-yellow-400 mb-2 sm:mb-0 sm:mr-2" size={20} />
+                    <h2 className="dream-title text-xl sm:text-2xl">Träume sammeln • KI verstehen • VR erleben</h2>
+                    <HiSparkles className="text-yellow-400 mt-2 sm:mt-0 sm:ml-2 hidden sm:block" size={20} />
                 </div>
-                <p className="mb-8 text-lg font-light">
+                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
                     Verwandle deine nächtlichen Reisen in interaktive Traumlandschaften
                     mit KI-gestützter Analyse und immersiven VR-Erlebnissen
                 </p>
@@ -68,17 +68,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
             {/* KI-Traumdeutung */}
             <div
-                className="card floating backdrop-blur-md bg-gradient-to-br from-purple-100/50 to-pink-100/50 border border-purple-200/30"
+                className="card floating backdrop-blur-md bg-gradient-to-br from-purple-100/50 to-pink-100/50 border border-purple-200/30 dark:bg-gradient-to-br dark:from-purple-900/30 dark:to-pink-900/30 dark:border-purple-700/30"
                 style={{animationDelay: '0.5s'}}>
                 <div className="flex justify-center mb-4">
-                    <div className="p-4 bg-purple-500/20 rounded-full">
-                        <FaBrain className="text-purple-600" size={32}/>
+                    <div className="p-3 sm:p-4 bg-purple-500/20 rounded-full">
+                        <FaBrain className="text-purple-600 dark:text-purple-400" size={28} />
                     </div>
                 </div>
-                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
                     KI-Traumdeutung
                 </h3>
-                <p className="text-center text-gray-700 font-light">
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                     Deine Träume werden von KI entschlüsselt -
                     Symbole erkannt, Emotionen analysiert, Bedeutungen offenbart
                 </p>
@@ -86,17 +86,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
 
             {/* Multimediale Traumerfassung */}
             <div
-                className="card floating backdrop-blur-md bg-gradient-to-br from-blue-100/50 to-indigo-100/50 border border-blue-200/30"
+                className="card floating backdrop-blur-md bg-gradient-to-br from-blue-100/50 to-indigo-100/50 border border-blue-200/30 dark:bg-gradient-to-br dark:from-blue-900/30 dark:to-indigo-900/30 dark:border-blue-700/30"
                 style={{animationDelay: '1s'}}>
                 <div className="flex justify-center mb-4">
-                    <div className="p-4 bg-blue-500/20 rounded-full">
-                        <FaMicrophone className="text-blue-600" size={32}/>
+                    <div className="p-3 sm:p-4 bg-blue-500/20 rounded-full">
+                        <FaMicrophone className="text-blue-600 dark:text-blue-400" size={28} />
                     </div>
                 </div>
-                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
                     Träume einfangen
                 </h3>
-                <p className="text-center text-gray-700 font-light">
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                     Sprich deine Träume in der Nacht, zeichne traumhafte Skizzen
                     oder schreibe poetische Beschreibungen
                 </p>
@@ -104,17 +104,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
 
             {/* VR-Traumwelten */}
             <div
-                className="card floating backdrop-blur-md bg-gradient-to-br from-violet-100/50 to-purple-100/50 border border-violet-200/30"
+                className="card floating backdrop-blur-md bg-gradient-to-br from-violet-100/50 to-purple-100/50 border border-violet-200/30 dark:bg-gradient-to-br dark:from-violet-900/30 dark:to-purple-900/30 dark:border-violet-700/30"
                 style={{animationDelay: '1.5s'}}>
                 <div className="flex justify-center mb-4">
-                    <div className="p-4 bg-violet-500/20 rounded-full">
-                        <FaVrCardboard className="text-violet-600" size={32}/>
+                    <div className="p-3 sm:p-4 bg-violet-500/20 rounded-full">
+                        <FaVrCardboard className="text-violet-600 dark:text-violet-400" size={28} />
                     </div>
                 </div>
-                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
                     VR-Traumreisen
                 </h3>
-                <p className="text-center text-gray-700 font-light">
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                     Betritt deine Träume als begehbare Welten -
                     schwebe durch Erinnerungen, berühre Traumsymbole
                 </p>
@@ -122,17 +122,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
 
             {/* Traumarchiv */}
             <div
-                className="card backdrop-blur-md bg-gradient-to-br from-emerald-100/50 to-teal-100/50 border border-emerald-200/30"
+                className="card backdrop-blur-md bg-gradient-to-br from-emerald-100/50 to-teal-100/50 border border-emerald-200/30 dark:bg-gradient-to-br dark:from-emerald-900/30 dark:to-teal-900/30 dark:border-emerald-700/30"
                 style={{animationDelay: '2s'}}>
                 <div className="flex justify-center mb-4">
-                    <div className="p-4 bg-emerald-500/20 rounded-full">
-                        <FaBook className="text-emerald-600" size={32}/>
+                    <div className="p-3 sm:p-4 bg-emerald-500/20 rounded-full">
+                        <FaBook className="text-emerald-600 dark:text-emerald-400" size={28} />
                     </div>
                 </div>
-                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
                     Traumschatzkammer
                 </h3>
-                <p className="text-center text-gray-700 font-light">
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                     Deine Traumsammlung wächst - durchsuchbar nach Gefühlen,
                     Symbolen und magischen Momenten
                 </p>
@@ -140,17 +140,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
 
             {/* Traumstatistiken */}
             <div
-                className="card backdrop-blur-md bg-gradient-to-br from-amber-100/50 to-orange-100/50 border border-amber-200/30"
+                className="card backdrop-blur-md bg-gradient-to-br from-amber-100/50 to-orange-100/50 border border-amber-200/30 dark:bg-gradient-to-br dark:from-amber-900/30 dark:to-orange-900/30 dark:border-amber-700/30"
                 style={{animationDelay: '2.5s'}}>
                 <div className="flex justify-center mb-4">
-                    <div className="p-4 bg-amber-500/20 rounded-full">
-                        <FaChartBar className="text-amber-600" size={32}/>
+                    <div className="p-3 sm:p-4 bg-amber-500/20 rounded-full">
+                        <FaChartBar className="text-amber-600 dark:text-amber-400" size={28} />
                     </div>
                 </div>
-                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
                     Traummuster
                 </h3>
-                <p className="text-center text-gray-700 font-light">
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                     Entdecke die geheimen Muster deiner Nachtreisen -
                     welche Träume kehren zurück?
                 </p>
@@ -158,17 +158,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
 
             {/* Schlafrhythmus */}
             <div
-                className="card backdrop-blur-md bg-gradient-to-br from-rose-100/50 to-pink-100/50 border border-rose-200/30"
+                className="card backdrop-blur-md bg-gradient-to-br from-rose-100/50 to-pink-100/50 border border-rose-200/30 dark:bg-gradient-to-br dark:from-rose-900/30 dark:to-pink-900/30 dark:border-rose-700/30"
                 style={{animationDelay: '3s'}}>
                 <div className="flex justify-center mb-4">
-                    <div className="p-4 bg-rose-500/20 rounded-full">
-                        <FaMoon className="text-rose-600" size={32}/>
+                    <div className="p-3 sm:p-4 bg-rose-500/20 rounded-full">
+                        <FaMoon className="text-rose-600 dark:text-rose-400" size={28} />
                     </div>
                 </div>
-                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
                     Schlafzyklen
                 </h3>
-                <p className="text-center text-gray-700 font-light">
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                     Verstehe deine Schlafrhythmen und wie sie deine
                     Traumlandschaften formen
                 </p>
@@ -177,49 +177,49 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
 
         {/* Dreamy Workflow Section */}
         <div
-            className="dream-container mb-16 backdrop-blur-lg bg-gradient-to-br from-pink-500/30 to-red-400/30 rounded-3xl p-12">
+            className="dream-container mb-16 backdrop-blur-lg bg-gradient-to-br from-pink-500/30 to-red-400/30 dark:from-pink-800/30 dark:to-red-900/30 rounded-3xl p-6 sm:p-8 md:p-12">
             <div className="text-center">
-                <FaHeart className="text-pink-500 mx-auto mb-4" size={40}/>
-                <h2 className="dream-title text-3xl">Deine magische Traumreise</h2>
+                <FaHeart className="text-pink-500 dark:text-pink-400 mx-auto mb-4" size={32} />
+                <h2 className="dream-title text-2xl sm:text-3xl">Deine magische Traumreise</h2>
             </div>
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mt-8">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mt-6 sm:mt-8">
                 <div className="text-center">
                     <div
-                        className="bg-gradient-to-br from-purple-400 to-purple-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
-                        <FaBed className="text-white" size={28}/>
+                        className="bg-gradient-to-br from-purple-400 to-purple-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
+                        <FaBed className="text-white" size={24} />
                     </div>
-                    <h4 className="font-bold mb-3 dreamy-text">1. Träumen</h4>
-                    <p className="text-sm font-light">
+                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">1. Träumen</h4>
+                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                         In der Nacht zeichnen deine Sensoren sanft deine Traumreisen auf
                     </p>
                 </div>
                 <div className="text-center">
                     <div
-                        className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
-                        <FaPen className="text-white" size={28}/>
+                        className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
+                        <FaPen className="text-white" size={24} />
                     </div>
-                    <h4 className="font-bold mb-3 dreamy-text">2. Einfangen</h4>
-                    <p className="text-sm font-light">
+                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">2. Einfangen</h4>
+                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                         Beim Erwachen flüsterst du deine Träume in die App
                     </p>
                 </div>
                 <div className="text-center">
                     <div
-                        className="bg-gradient-to-br from-violet-400 to-violet-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
-                        <FaRobot className="text-white" size={28}/>
+                        className="bg-gradient-to-br from-violet-400 to-violet-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
+                        <FaRobot className="text-white" size={24} />
                     </div>
-                    <h4 className="font-bold mb-3 dreamy-text">3. Verzaubern</h4>
-                    <p className="text-sm font-light">
+                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">3. Verzaubern</h4>
+                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                         KI-Magie verwandelt deine Worte in Bilder, Klänge und Bedeutungen
                     </p>
                 </div>
                 <div className="text-center">
                     <div
-                        className="bg-gradient-to-br from-pink-400 to-pink-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
-                        <FaEye className="text-white" size={28}/>
+                        className="bg-gradient-to-br from-pink-400 to-pink-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
+                        <FaEye className="text-white" size={24} />
                     </div>
-                    <h4 className="font-bold mb-3 dreamy-text">4. Erleben</h4>
-                    <p className="text-sm font-light">
+                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">4. Erleben</h4>
+                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                         Tauche ein in deine VR-Traumwelten und entdecke dich selbst
                     </p>
                 </div>
@@ -227,29 +227,29 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
         </div>
 
         {/* Dreamy CTA Section */}
-        <div className="relative mt-16">
+        <div className="relative mt-12 sm:mt-16">
             <div
-                className="card p-12 text-center bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden">
+                className="card p-6 sm:p-8 md:p-12 text-center bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden">
                 <div className="relative z-10">
-                    <div className="flex justify-center items-center mb-6">
-                        <FaStar className="text-yellow-300 mr-3" size={32}/>
-                        <h2 className="text-4xl font-bold text-white">Wo Träume Realität werden</h2>
-                        <FaStar className="text-yellow-300 ml-3" size={32}/>
+                    <div className="flex flex-col sm:flex-row justify-center items-center mb-4 sm:mb-6">
+                        <FaStar className="text-yellow-300 mb-2 sm:mb-0 sm:mr-3" size={24} />
+                        <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">Wo Träume Realität werden</h2>
+                        <FaStar className="text-yellow-300 mt-2 sm:mt-0 sm:ml-3 hidden sm:block" size={24} />
                     </div>
-                    <p className="text-xl text-purple-100 mb-10 font-light max-w-2xl mx-auto">
+                    <p className="text-base sm:text-lg md:text-xl text-purple-100 mb-6 sm:mb-8 md:mb-10 max-w-2xl mx-auto">
                         Lass dich von KI-gestützter Traumdeutung, VR-Erlebnissen und personalisierten
                         Einsichten in eine tiefere Welt deines Unterbewusstseins führen
                     </p>
                     <button
-                        className="dreamy-button flex items-center mx-auto"
+                        className="dreamy-button flex items-center mx-auto text-sm sm:text-base"
                         onClick={handleLogin}
                     >
-                        <FaMoon className="mr-3" size={24}/>
+                        <FaMoon className="mr-2 sm:mr-3" size={18} />
                         Lass die Magie beginnen!
-                        <HiSparkles className="ml-3" size={24}/>
+                        <HiSparkles className="ml-2 sm:ml-3" size={18} />
                     </button>
                 </div>
             </div>
         </div>
     </div>)
-}
\ No newline at end of file
+}
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 3cd9ff4..41b8c9e 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -12,10 +12,10 @@ const ProfilePage: React.FC = () => {
   const defaultStreakDays = 0;
 
   return (
-    <div className="page min-h-screen p-4">
-      <div className="dreamPanel flex flex-col items-center p-6">
+    <div className="page p-4 pb-20">
+      <div className="dreamPanel flex flex-col items-center p-4 sm:p-6 md:p-8 max-w-md mx-auto">
         {/* Profile Picture */}
-        <div className="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-accent">
+        <div className="w-24 h-24 sm:w-32 sm:h-32 rounded-full overflow-hidden mb-4 border-4 border-accent">
           <img 
             src={profileUser ? `/assets/profiles/${profileUser.profilePicture}` : `https://ui-avatars.com/api/?name=${defaultName}&background=random&color=fff&size=128`} 
             alt={profileUser ? profileUser.name : defaultName} 
@@ -24,34 +24,34 @@ const ProfilePage: React.FC = () => {
         </div>
 
         {/* User Information */}
-        <div className="text-center">
-          <h2 className="text-xl font-bold mb-2">{profileUser ? profileUser.name : defaultName}</h2>
+        <div className="text-center w-full">
+          <h2 className="text-xl sm:text-2xl font-bold mb-2">{profileUser ? profileUser.name : defaultName}</h2>
           <p className="text-text-muted mb-4">{profileUser ? profileUser.email : defaultEmail}</p>
 
-          <div className="grid grid-cols-2 gap-4 mt-6 text-center">
-            <div className="dreamPanel">
-              <p className="font-bold text-2xl">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
-              <p className="text-sm text-text-muted">Dreams</p>
+          <div className="grid grid-cols-2 gap-2 sm:gap-4 mt-6 text-center">
+            <div className="dreamPanel p-3 sm:p-4">
+              <p className="font-bold text-xl sm:text-2xl">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
+              <p className="text-xs sm:text-sm text-text-muted">Dreams</p>
             </div>
-            <div className="dreamPanel">
-              <p className="font-bold text-2xl">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
-              <p className="text-sm text-text-muted">Days Streak</p>
+            <div className="dreamPanel p-3 sm:p-4">
+              <p className="font-bold text-xl sm:text-2xl">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
+              <p className="text-xs sm:text-sm text-text-muted">Days Streak</p>
             </div>
           </div>
 
-          <div className="mt-8">
+          <div className="mt-6 sm:mt-8">
             <h3 className="text-lg font-semibold mb-2">Account Settings</h3>
-            <div className="dreamPanel text-left">
+            <div className="dreamPanel text-left p-3 sm:p-4">
               <div className="flex justify-between items-center py-2">
                 <span>Notifications</span>
-                <label className="theme-toggle">
+                <label className="theme-toggle relative inline-block">
                   <input type="checkbox" defaultChecked />
                   <span className="slider"></span>
                 </label>
               </div>
               <div className="flex justify-between items-center py-2">
                 <span>Privacy</span>
-                <label className="theme-toggle">
+                <label className="theme-toggle relative inline-block">
                   <input type="checkbox" />
                   <span className="slider"></span>
                 </label>