diff --git a/src/pages/dreamarchive/ResearchLive.tsx b/src/pages/dreamarchive/ResearchLive.tsx
index fbf0ee8..5ceef96 100644
--- a/src/pages/dreamarchive/ResearchLive.tsx
+++ b/src/pages/dreamarchive/ResearchLive.tsx
@@ -1,128 +1,49 @@
-import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
-import {FaCalendarAlt, FaClipboardCheck, FaFlask, FaGlobeAmericas, FaUserMd, FaUsers, FaVideo} from 'react-icons/fa';
+import {FaCalendarAlt, FaClipboardCheck, FaGlobeAmericas} from 'react-icons/fa';
 import mockResearchLive from '../../data/MockResearchLive';
+import HeroSection from '../../components/dreamarchive/HeroSection';
+import SectionHeader from '../../components/dreamarchive/SectionHeader';
+import DreamyCard from '../../components/dreamarchive/DreamyCard';
+import StudyCard from '../../components/dreamarchive/StudyCard';
+import ResearcherInterviewCard from '../../components/dreamarchive/ResearcherInterviewCard';
+import IconWithBackground from '../../components/dreamarchive/IconWithBackground';
 
 export default function ResearchLive() {
     return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
         {/* Hero Section */}
-        <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">
-                <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Traumforschung Live</h1>
-                <p className="text-lg sm:text-xl dreamy-text">Aktuelle Studien, Citizen Science und
-                    Forscher-Interviews</p>
-            </div>
-            <div
-                className="dream-container floating 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"
-                style={{animationDelay: '0.2s'}}>
-                <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
-                    <h2 className="dream-title text-xl sm:text-2xl">Sei Teil der Traumforschung</h2>
-                </div>
-                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
-                    Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden
-                    Traumforschern aus der ganzen Welt.
-                </p>
-            </div>
-        </div>
+        <HeroSection
+            title="Traumforschung Live"
+            subtitle="Aktuelle Studien, Citizen Science und Forscher-Interviews"
+            containerTitle="Sei Teil der Traumforschung"
+            description="Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden Traumforschern aus der ganzen Welt."
+        />
 
         {/* Current Studies */}
         <div className="mb-12">
-            <h2 className="text-2xl font-bold mb-6 dream-title">Aktuelle Studien</h2>
+            <SectionHeader title="Aktuelle Studien"/>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 {mockResearchLive.currentStudies.slice(0, 2).map((study) => (
-                    <div key={study.id} className="dreamy-card p-6" style={getBackgroundStyle(study.color)}>
-                        <div className="flex items-center mb-4">
-                            <div className={`p-3 bg-${study.color}-500/20 rounded-full mr-4`}>
-                                <FaFlask className={`text-${study.color}-600 dark:text-${study.color}-400`} size={28}/>
-                            </div>
-                            <div>
-                                <h3 className="text-lg font-bold dreamy-text">{study.title}</h3>
-                                <p className="text-xs" style={getTextStyle('muted')}>{study.institution}</p>
-                            </div>
-                        </div>
-
-                        <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
-                            <div className="flex justify-between mb-2">
-                                <span className="text-sm font-bold">Status:</span>
-                                <span
-                                    className={`text-sm bg-${study.statusColor}-100 dark:bg-${study.statusColor}-900 text-${study.statusColor}-800 dark:text-${study.statusColor}-200 px-2 py-0.5 rounded-full`}>{study.status}</span>
-                            </div>
-                            <div className="flex justify-between mb-2">
-                                <span className="text-sm font-bold">Teilnehmer:</span>
-                                <span
-                                    className="text-sm">{study.participants.current.toLocaleString()} / {study.participants.target.toLocaleString()}</span>
-                            </div>
-                            <div className="flex justify-between">
-                                <span className="text-sm font-bold">Enddatum:</span>
-                                <span className="text-sm">{study.endDate}</span>
-                            </div>
-                        </div>
-
-                        <p className="text-sm mb-4">
-                            {study.description}
-                        </p>
-
-                        <button
-                            className={`w-full py-2 px-4 bg-${study.color}-500 hover:bg-${study.color}-600 text-white rounded-lg transition-colors`}>
-                            Teilnehmen
-                        </button>
-                    </div>
-                ))}
+                    <StudyCard key={study.id} study={study}/>))}
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                 {mockResearchLive.currentStudies.slice(2, 4).map((study) => (
-                    <div key={study.id} className="dreamy-card p-6" style={getBackgroundStyle(study.color)}>
-                        <div className="flex items-center mb-4">
-                            <div className={`p-3 bg-${study.color}-500/20 rounded-full mr-4`}>
-                                <FaFlask className={`text-${study.color}-600 dark:text-${study.color}-400`} size={28}/>
-                            </div>
-                            <div>
-                                <h3 className="text-lg font-bold dreamy-text">{study.title}</h3>
-                                <p className="text-xs" style={getTextStyle('muted')}>{study.institution}</p>
-                            </div>
-                        </div>
-
-                        <div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
-                            <div className="flex justify-between mb-2">
-                                <span className="text-sm font-bold">Status:</span>
-                                <span
-                                    className={`text-sm bg-${study.statusColor}-100 dark:bg-${study.statusColor}-900 text-${study.statusColor}-800 dark:text-${study.statusColor}-200 px-2 py-0.5 rounded-full`}>{study.status}</span>
-                            </div>
-                            <div className="flex justify-between mb-2">
-                                <span className="text-sm font-bold">Teilnehmer:</span>
-                                <span
-                                    className="text-sm">{study.participants.current.toLocaleString()} / {study.participants.target.toLocaleString()}</span>
-                            </div>
-                            <div className="flex justify-between">
-                                <span className="text-sm font-bold">Enddatum:</span>
-                                <span className="text-sm">{study.endDate}</span>
-                            </div>
-                        </div>
-
-                        <p className="text-sm mb-4">
-                            {study.description}
-                        </p>
-
-                        <button
-                            className={`w-full py-2 px-4 bg-${study.color}-500 hover:bg-${study.color}-600 text-white rounded-lg transition-colors`}>
-                            Teilnehmen
-                        </button>
-                    </div>
-                ))}
+                    <StudyCard key={study.id} study={study}/>))}
             </div>
         </div>
 
         {/* Citizen Science */}
         <div className="mb-12">
-            <h2 className="text-2xl font-bold mb-6 dream-title">Citizen Science: Mitmachen bei der
-                Traumforschung</h2>
+            <SectionHeader title="Citizen Science: Mitmachen bei der Traumforschung"/>
 
-            <div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
+            <DreamyCard color="violet">
                 <div className="flex items-center mb-6">
-                    <div className="p-3 bg-violet-500/20 rounded-full mr-4">
-                        <FaUsers className="text-violet-600 dark:text-violet-400" size={28}/>
-                    </div>
+                    <IconWithBackground
+                        icon={<FaCalendarAlt/>}
+                        color="violet"
+                        size={28}
+                        className="mr-4"
+                    />
                     <h3 className="text-xl font-bold dreamy-text">Wie du zur Wissenschaft beitragen kannst</h3>
                 </div>
 
@@ -144,25 +65,23 @@ export default function ResearchLive() {
                                 IconComponent = FaClipboardCheck;
                         }
 
-                        return (
-                            <div key={project.id} className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
-                                <div className="flex justify-center mb-3">
-                                    <div className="p-2 bg-violet-500/20 rounded-full">
-                                        <IconComponent className="text-violet-600 dark:text-violet-400" size={20}/>
-                                    </div>
-                                </div>
-                                <h4 className="font-bold mb-2 text-center">{project.title}</h4>
-                                <p className="text-sm">
-                                    {project.description}
-                                </p>
-                                <div className="mt-3 text-center">
-                                    <button
-                                        className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
-                                        Beitragen
-                                    </button>
+                        return (<div key={project.id} className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                            <div className="flex justify-center mb-3">
+                                <div className="p-2 bg-violet-500/20 rounded-full">
+                                    <IconComponent className="text-violet-600 dark:text-violet-400" size={20}/>
                                 </div>
                             </div>
-                        );
+                            <h4 className="font-bold mb-2 text-center">{project.title}</h4>
+                            <p className="text-sm">
+                                {project.description}
+                            </p>
+                            <div className="mt-3 text-center">
+                                <button
+                                    className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
+                                    Beitragen
+                                </button>
+                            </div>
+                        </div>);
                     })}
                 </div>
 
@@ -171,97 +90,29 @@ export default function ResearchLive() {
                     hilft Wissenschaftlern, größere und vielfältigere Datensätze zu sammeln, was zu robusteren
                     Forschungsergebnissen führt.
                 </p>
-            </div>
+            </DreamyCard>
         </div>
 
         {/* Researcher Interviews */}
         <div className="mb-12">
-            <h2 className="text-2xl font-bold mb-6 dream-title">Forscher-Interviews</h2>
+            <SectionHeader title="Forscher-Interviews"/>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 {mockResearchLive.researcherInterviews.slice(0, 2).map((interview) => (
-                    <div key={interview.id} className="dreamy-card p-6" style={getBackgroundStyle(interview.color)}>
-                        <div className="flex items-start mb-4">
-                            <div className={`p-3 bg-${interview.color}-500/20 rounded-full mr-4 mt-1`}>
-                                <FaUserMd className={`text-${interview.color}-600 dark:text-${interview.color}-400`}
-                                          size={28}/>
-                            </div>
-                            <div>
-                                <h3 className="text-lg font-bold dreamy-text">{interview.name}</h3>
-                                <p className="text-xs mb-1" style={getTextStyle('muted')}>{interview.institution}</p>
-                                <p className="text-sm mb-3">{interview.specialty}</p>
-
-                                <div className="relative">
-                                    <div
-                                        className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
-                                        <FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
-                                        <div className="absolute inset-0 flex items-center justify-center">
-                                            <div
-                                                className={`w-12 h-12 rounded-full bg-${interview.color}-500/80 flex items-center justify-center cursor-pointer`}>
-                                                <div
-                                                    className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
-                                <ul className="list-disc list-inside text-sm space-y-1">
-                                    {interview.topics.map((topic, index) => (
-                                        <li key={index}>{topic}</li>
-                                    ))}
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                ))}
+                    <ResearcherInterviewCard key={interview.id} interview={interview}/>))}
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                 {mockResearchLive.researcherInterviews.slice(2, 4).map((interview) => (
-                    <div key={interview.id} className="dreamy-card p-6" style={getBackgroundStyle(interview.color)}>
-                        <div className="flex items-start mb-4">
-                            <div className={`p-3 bg-${interview.color}-500/20 rounded-full mr-4 mt-1`}>
-                                <FaUserMd className={`text-${interview.color}-600 dark:text-${interview.color}-400`}
-                                          size={28}/>
-                            </div>
-                            <div>
-                                <h3 className="text-lg font-bold dreamy-text">{interview.name}</h3>
-                                <p className="text-xs mb-1" style={getTextStyle('muted')}>{interview.institution}</p>
-                                <p className="text-sm mb-3">{interview.specialty}</p>
-
-                                <div className="relative">
-                                    <div
-                                        className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
-                                        <FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
-                                        <div className="absolute inset-0 flex items-center justify-center">
-                                            <div
-                                                className={`w-12 h-12 rounded-full bg-${interview.color}-500/80 flex items-center justify-center cursor-pointer`}>
-                                                <div
-                                                    className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
-                                <ul className="list-disc list-inside text-sm space-y-1">
-                                    {interview.topics.map((topic, index) => (
-                                        <li key={index}>{topic}</li>
-                                    ))}
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                ))}
+                    <ResearcherInterviewCard key={interview.id} interview={interview}/>))}
             </div>
         </div>
 
         {/* Upcoming Events */}
         <div className="mb-12">
-            <h2 className="text-2xl font-bold mb-6 dream-title">Kommende Veranstaltungen</h2>
+            <SectionHeader title="Kommende Veranstaltungen"/>
 
-            <div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
+            <DreamyCard color="purple">
                 <div className="overflow-x-auto">
                     <table className="w-full">
                         <thead>
@@ -279,13 +130,12 @@ export default function ResearchLive() {
                                 <td className="p-2">{event.title}</td>
                                 <td className="p-2">{event.location}</td>
                                 <td className="p-2">
-                                    <span
-                                        className={`bg-${event.typeColor}-100 dark:bg-${event.typeColor}-900 text-${event.typeColor}-800 dark:text-${event.typeColor}-200 text-xs px-2 py-0.5 rounded-full`}>
-                                      {event.type}
-                                    </span>
+                                        <span
+                                            className={`bg-${event.typeColor}-100 dark:bg-${event.typeColor}-900 text-${event.typeColor}-800 dark:text-${event.typeColor}-200 text-xs px-2 py-0.5 rounded-full`}>
+                                          {event.type}
+                                        </span>
                                 </td>
-                            </tr>
-                        ))}
+                            </tr>))}
                         </tbody>
                     </table>
                 </div>
@@ -296,7 +146,7 @@ export default function ResearchLive() {
                         Alle Veranstaltungen anzeigen
                     </button>
                 </div>
-            </div>
+            </DreamyCard>
         </div>
     </div>);
-}
+}
\ No newline at end of file