diff --git a/src/assets/text.svg b/src/assets/text.svg
index ba9d58e..87f4ea5 100644
--- a/src/assets/text.svg
+++ b/src/assets/text.svg
@@ -4,8 +4,8 @@
             @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
         </style>
         <linearGradient id="textGradient" x1="25%" y1="0%" x2="75%" y2="100%">
-            <stop offset="0%" stop-color="darkslateblue" />
-            <stop offset="100%" stop-color="indigo" />
+            <stop offset="0%" stop-color="white"/>
+            <stop offset="100%" stop-color="grey"/>
         </linearGradient>
     </defs>
 
diff --git a/src/components/SplashScreen.tsx b/src/components/SplashScreen.tsx
index 9985b54..5e89acb 100644
--- a/src/components/SplashScreen.tsx
+++ b/src/components/SplashScreen.tsx
@@ -18,7 +18,9 @@ export default function SplashScreen({ onFinished }: SplashScreenProps) {
 
   return (
       <div className="fixed inset-0 flex flex-col items-center justify-center z-50" style={{
-          background: 'var(--accent-gradient)'
+          background: 'linear-gradient(135deg, #2e0854, #4a0e8f, #6a0dad, #8a2be2)',
+          backgroundSize: '400% 400%',
+          animation: 'gradient-animation 15s ease infinite'
       }}>
       <div className="animate-pulse flex flex-col items-center">
         <img src={logo} alt="REMind Logo" className="h-32 w-32 mb-4" />
diff --git a/src/index.css b/src/index.css
index f009227..514878b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -311,10 +311,38 @@ button:focus-visible {
     }
 }
 
+@keyframes gradient-animation {
+    0% {
+        background-position: 0 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 .floating {
     animation: dream-float 6s ease-in-out infinite;
 }
 
+/* Custom animations */
+.animate-fadeIn {
+    animation: fadeIn 0.5s ease-out forwards;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     h1 {
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 71d38e1..1c0ae31 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import {getSortedDreamsByDate} from '../utils/DreamUtils.ts';
 import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
 import {getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
 import {formatDateFull, formatDateSimple} from '../utils/DateUtils';
+import {NavLink} from 'react-router-dom';
 
 export default function Home() {
     const currentUser = MockUserMap.get(4); // Neo Quantum
@@ -35,7 +36,7 @@ export default function Home() {
             <div
                 className={getCardStyle(true).className}
                 style={getBackgroundStyle('accent-gradient')}>
-                <div className="flex items-center">
+                <div className="flex items-center justify-center">
                     <div className="mr-3">
                         <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24"
                              stroke="currentColor">
@@ -43,7 +44,7 @@ export default function Home() {
                                   d="M13 10V3L4 14h7v7l9-11h-7z"/>
                         </svg>
                     </div>
-                    <div>
+                    <div className="text-center">
                         <h3 className="font-bold">Traum-Streak: {currentUser?.streakDays} Tage</h3>
                         <p className="text-sm">Beeindruckend! Du hältst deine Traum-Aufzeichnungen konstant bei.</p>
                     </div>
@@ -51,75 +52,76 @@ export default function Home() {
             </div>
 
             {/* Personal Feed */}
-            <div className={getCardStyle().className}
-                 style={getCardStyle()}>
-                <h3 className="font-bold mb-3 dream-title">Deine letzten Träume</h3>
-                {personalDreams.length > 0 ? (
-                    <div className="space-y-3">
-                        {personalDreams.map((dream, index) => (
-                            <div key={dream.id}
-                                 className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
-                                 style={{
-                                     ...getBackgroundStyle('card'),
-                                     animationDelay: `${index * 0.1}s`
-                                 }}>
-                                <h4 className="font-medium" style={getTextStyle('accent')}>{dream.title}</h4>
-                                <p className="text-sm" style={getTextStyle('muted')}>
-                                    {formatDateSimple(dream.date)}
-                                </p>
-                            </div>
-                        ))}
-                    </div>
-                ) : (
-                    <p className="text-sm" style={getTextStyle('muted')}>
-                        Du hast noch keine Träume aufgezeichnet. Starte jetzt!
-                    </p>
-                )}
-            </div>
+            <NavLink to='/feed'
+                     className="block mb-3 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
+                <div className="p-3">
+                    <h3 className="font-bold mb-2 dream-title text-base">Deine letzten Träume</h3>
+                    {personalDreams.length > 0 ? (
+                        <div className="space-y-2">
+                            {personalDreams.map((dream, index) => (
+                                <NavLink key={dream.id} to={`/dream/${dream.id}`}
+                                         className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] bg-[var(--bg)] shadow-md backdrop-blur-sm animate-fadeIn rounded-lg mb-2">
+                                    <div
+                                        className="p-2"
+                                        style={{animationDelay: `${index * 0.1}s`}}>
+                                        <h4 className="font-medium text-[var(--accent)] text-sm">{dream.title}</h4>
+                                        <p className="text-xs text-[var(--text-muted)]">
+                                            {formatDateSimple(dream.date)}
+                                        </p>
+                                    </div>
+                                </NavLink>
+                            ))}
+                        </div>
+                    ) : (
+                        <p className="text-xs text-[var(--text-muted)]">
+                            Du hast noch keine Träume aufgezeichnet. Starte jetzt!
+                        </p>
+                    )}
+                </div>
+            </NavLink>
 
             {/* Friends Feed */}
-            <div className={getCardStyle().className}
-                 style={getCardStyle()}>
-                <h3 className="font-bold mb-3 dream-title">Träume von Freunden</h3>
-                <div className="space-y-3">
-                    {friendsDreams.map((dream, index) => {
-                        const dreamUser = MockUserMap.get(dream.userId);
-                        return (
-                            <div key={dream.id}
-                                 className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
-                                 style={{
-                                     ...getBackgroundStyle('card'),
-                                     animationDelay: `${index * 0.1}s`
-                                 }}>
-                                <div className="flex items-center mb-1">
+            <NavLink to='/feed'
+                     className="block mb-3 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
+                <div className="p-3">
+                    <h3 className="font-bold mb-2 dream-title text-base">Träume von Freunden</h3>
+                    <div className="space-y-2">
+                        {friendsDreams.map((dream, index) => {
+                            const dreamUser = MockUserMap.get(dream.userId);
+                            return (
+                                <NavLink key={dream.id} to={`/dream/${dream.id}`}
+                                         className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] bg-[var(--bg)] shadow-md backdrop-blur-sm animate-fadeIn rounded-lg mb-2">
                                     <div
-                                        className="w-6 h-6 rounded-full mr-2 flex items-center justify-center overflow-hidden"
-                                        style={{
-                                            backgroundColor: 'var(--accent-soft)',
-                                            border: '1px solid var(--accent)'
-                                        }}>
-                                        {dreamUser?.profilePicture ? (
-                                            <img src={`/assets/profiles/${dreamUser.profilePicture}`}
-                                                 alt={dreamUser.name} className="w-full h-full object-cover"/>
-                                        ) : (
-                                            <span className="text-xs"
-                                                  style={getTextStyle()}>{dreamUser?.name.charAt(0)}</span>
-                                        )}
+                                        className="p-2"
+                                        style={{animationDelay: `${index * 0.1}s`}}>
+                                        <div className="flex items-center mb-1">
+                                            <div
+                                                className="w-5 h-5 rounded-full mr-1 flex items-center justify-center overflow-hidden bg-[var(--accent-soft)] border border-[var(--accent)]">
+                                                {dreamUser?.profilePicture ? (
+                                                    <img src={`/assets/profiles/${dreamUser.profilePicture}`}
+                                                         alt={dreamUser.name} className="w-full h-full object-cover"/>
+                                                ) : (
+                                                    <span
+                                                        className="text-xs text-[var(--text)]">{dreamUser?.name.charAt(0)}</span>
+                                                )}
+                                            </div>
+                                            <span
+                                                className="font-medium text-xs text-[var(--text)]">{dreamUser?.name}</span>
+                                        </div>
+                                        <h4 className="font-medium text-[var(--accent)] text-sm">{dream.title}</h4>
+                                        <p className="text-xs text-[var(--text-muted)]">
+                                            {formatDateSimple(dream.date)}
+                                        </p>
                                     </div>
-                                    <span className="font-medium text-sm"
-                                          style={getTextStyle()}>{dreamUser?.name}</span>
-                                </div>
-                                <h4 className="font-medium" style={getTextStyle('accent')}>{dream.title}</h4>
-                                <p className="text-sm" style={getTextStyle('muted')}>
-                                    {formatDateSimple(dream.date)}
-                                </p>
-                            </div>
-                        );
-                    })}
+                                </NavLink>
+                            );
+                        })}
+                    </div>
                 </div>
-            </div>
+            </NavLink>
 
-            {/* Daily Highlights */}
+            {/* Daily Highlights */
+            }
             <div className={getCardStyle().className}
                  style={getCardStyle()}>
                 <h3 className="font-bold mb-3 dream-title">Tägliche Highlights</h3>
@@ -127,13 +129,15 @@ export default function Home() {
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div className="p-3 rounded-lg"
                          style={getBackgroundStyle('card')}>
-                        <h4 className="font-medium mb-2" style={getTextStyle('accent')}>Top Traumthemen</h4>
+                        <h4 className="font-medium mb-2" style={getTextStyle('accent')}>Top
+                            Traumthemen</h4>
                         <ul className="list-disc pl-5 mb-4">
                             {topDreamTopics.map((topic, index) => (
                                 <li key={index}
                                     className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
                                     style={getTextStyle()}>
-                                    <span style={{color: 'var(--accent-soft)'}}>{topic.label}:</span> {topic.percentage}%
+                                                    <span
+                                                        style={{color: 'var(--accent-soft)'}}>{topic.label}:</span> {topic.percentage}%
                                 </li>
                             ))}
                         </ul>
@@ -141,13 +145,15 @@ export default function Home() {
 
                     <div className="p-3 rounded-lg"
                          style={getBackgroundStyle('card')}>
-                        <h4 className="font-medium mb-2" style={getTextStyle('accent')}>Stimmungskategorien</h4>
+                        <h4 className="font-medium mb-2"
+                            style={getTextStyle('accent')}>Stimmungskategorien</h4>
                         <ul className="list-disc pl-5">
                             {primaryMoodCategories.map((mood, index) => (
                                 <li key={index}
                                     className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
                                     style={getTextStyle()}>
-                                    <span style={{color: 'var(--accent-soft)'}}>{mood.label}:</span> {mood.percentage}%
+                                                    <span
+                                                        style={{color: 'var(--accent-soft)'}}>{mood.label}:</span> {mood.percentage}%
                                 </li>
                             ))}
                         </ul>
@@ -155,13 +161,16 @@ export default function Home() {
                 </div>
             </div>
 
-            {/* Ad Banner */}
+            {/* Ad Banner */
+            }
             <div
                 className={getCardStyle(true).className}
                 style={getBackgroundStyle('gradient')}>
                 <div className="flex flex-col sm:flex-row items-center">
-                    <div className="mb-4 sm:mb-0 sm:mr-4 transition-all duration-300 hover:transform hover:rotate-12">
-                        <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16" fill="none" viewBox="0 0 24 24"
+                    <div
+                        className="mb-4 sm:mb-0 sm:mr-4 transition-all duration-300 hover:transform hover:rotate-12">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16" fill="none"
+                             viewBox="0 0 24 24"
                              stroke="currentColor">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1}
                                   d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
@@ -169,7 +178,8 @@ export default function Home() {
                     </div>
                     <div>
                         <h3 className="font-bold text-lg mb-1">ReMind Sensor-Gerät</h3>
-                        <p className="text-sm mb-2">Verbessere deine Traumerfahrung mit unserem Sensor mit EEG,
+                        <p className="text-sm mb-2">Verbessere deine Traumerfahrung mit unserem Sensor
+                            mit EEG,
                             Bewegungserkennung und Vitalzeichen-Überwachung.</p>
                         <div
                             className="mb-3 inline-block px-2 py-1 text-xs font-bold rounded transition-all duration-300 hover:transform hover:scale-105"
@@ -180,5 +190,6 @@ export default function Home() {
                 </div>
             </div>
         </div>
-    );
+    )
+        ;
 }