diff --git a/apps/matrix/apps/web/src/app.css b/apps/matrix/apps/web/src/app.css
index 0d82a0a39..fa4d24d8d 100644
--- a/apps/matrix/apps/web/src/app.css
+++ b/apps/matrix/apps/web/src/app.css
@@ -5,6 +5,8 @@
 @source '../../../packages/shared/src';
 @source '../../../../../packages/shared-ui/src';
 @source '../../../../../packages/shared-icons/src';
+@source '../../../../../packages/shared-auth-ui/src';
+@source '../../../../../packages/shared-theme-ui/src';
 
 @layer base {
 	:root {
@@ -20,6 +22,22 @@
 	}
 }
 
+/* Fade-in animation */
+@keyframes fade-in {
+	from {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.animate-fade-in {
+	animation: fade-in 0.3s ease-out;
+}
+
 /* Custom scrollbar for chat */
 .chat-scrollbar::-webkit-scrollbar {
 	width: 6px;
@@ -30,10 +48,32 @@
 }
 
 .chat-scrollbar::-webkit-scrollbar-thumb {
-	background: oklch(var(--bc) / 0.2);
+	background: rgba(0, 0, 0, 0.15);
 	border-radius: 3px;
 }
 
 .chat-scrollbar::-webkit-scrollbar-thumb:hover {
-	background: oklch(var(--bc) / 0.3);
+	background: rgba(0, 0, 0, 0.25);
+}
+
+.dark .chat-scrollbar::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.15);
+}
+
+.dark .chat-scrollbar::-webkit-scrollbar-thumb:hover {
+	background: rgba(255, 255, 255, 0.25);
+}
+
+/* Glassmorphic utilities */
+.glass {
+	@apply bg-white/80 dark:bg-white/10 backdrop-blur-xl border border-black/10 dark:border-white/20;
+}
+
+.glass-card {
+	@apply bg-white/60 dark:bg-white/5 backdrop-blur-sm border border-black/10 dark:border-white/10;
+}
+
+.glass-button {
+	@apply bg-white/90 dark:bg-white/20 backdrop-blur-sm border border-black/10 dark:border-white/20
+	       hover:bg-white dark:hover:bg-white/30 hover:shadow-lg transition-all duration-200;
 }
diff --git a/apps/matrix/apps/web/src/lib/components/chat/Message.svelte b/apps/matrix/apps/web/src/lib/components/chat/Message.svelte
index 1a1719a5e..aab60ca5a 100644
--- a/apps/matrix/apps/web/src/lib/components/chat/Message.svelte
+++ b/apps/matrix/apps/web/src/lib/components/chat/Message.svelte
@@ -101,80 +101,75 @@
 
 <!-- Message -->
 <div
-	class="group relative flex gap-3 rounded-lg px-2 py-1 hover:bg-surface-hover"
-	class:mt-2={showAvatar}
+	class="group flex gap-3 mb-4 animate-fade-in {message.isOwn ? 'flex-row-reverse' : 'flex-row'}"
 	class:opacity-50={message.redacted}
 	role="article"
 	onmouseenter={() => (showActions = true)}
 	onmouseleave={() => (showActions = false)}
 >
-	<!-- Avatar Column -->
-	<div class="w-10 flex-shrink-0">
-		{#if showAvatar && !message.isOwn}
-			<div
-				class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground"
-			>
-				<span class="text-xs">{initials}</span>
-			</div>
-		{/if}
-	</div>
+	<!-- Avatar -->
+	{#if showAvatar}
+		<div
+			class="flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center shadow-md
+				   {message.isOwn
+				? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white'
+				: 'bg-gradient-to-br from-violet-500 to-purple-600 text-white'}"
+		>
+			<span class="text-xs font-semibold">{initials}</span>
+		</div>
+	{:else}
+		<div class="w-9 flex-shrink-0"></div>
+	{/if}
 
-	<!-- Content -->
-	<div class="min-w-0 flex-1">
-		{#if showAvatar}
-			<div class="mb-0.5 flex items-baseline gap-2">
-				<span class="font-medium" class:text-primary={message.isOwn}>
-					{message.isOwn ? 'Du' : message.senderName}
-				</span>
-				<span class="text-xs text-muted-foreground">{formattedTime}</span>
-				{#if message.edited}
-					<span class="text-xs text-muted-foreground">(bearbeitet)</span>
-				{/if}
-				{#if showEncryptionBadge}
-					<span title="Verschlüsselt"><Lock class="h-3 w-3 text-success" /></span>
-				{/if}
-			</div>
+	<!-- Message Content -->
+	<div class="flex flex-col {message.isOwn ? 'items-end' : 'items-start'} max-w-[75%] relative">
+		<!-- Sender name (for others only) -->
+		{#if showAvatar && !message.isOwn}
+			<span class="text-xs text-muted-foreground mb-1 px-1">{message.senderName}</span>
 		{/if}
 
 		<!-- Reply preview -->
 		{#if message.replyTo && message.replyToBody}
 			<div
-				class="mb-1 flex items-center gap-2 rounded border-l-2 border-primary/50 bg-muted px-2 py-1 text-sm"
+				class="mb-1 flex items-center gap-2 rounded-lg glass-card px-3 py-1.5 text-sm max-w-full"
 			>
 				<ArrowBendUpLeft class="h-3 w-3 flex-shrink-0 text-muted-foreground" />
-				<span class="truncate text-muted-foreground">{message.replyToBody}</span>
+				<span class="truncate text-muted-foreground text-xs">{message.replyToBody}</span>
 			</div>
 		{/if}
 
-		<!-- Message body -->
-		<div class="relative">
+		<!-- Message Bubble -->
+		<div
+			class="relative px-4 py-3 shadow-md
+				   {message.isOwn
+				? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white rounded-2xl rounded-tr-md'
+				: 'bg-white dark:bg-white/10 text-foreground border border-black/5 dark:border-white/10 rounded-2xl rounded-tl-md'}"
+		>
 			{#if message.redacted}
-				<p class="italic text-muted-foreground">Nachricht wurde gelöscht</p>
+				<p class="italic text-white/70">Nachricht wurde gelöscht</p>
 			{:else if isDecryptionError}
 				<!-- Decryption error -->
-				<div class="flex items-center gap-2 rounded-lg bg-warning/10 px-3 py-2 text-warning">
+				<div class="flex items-center gap-2 text-amber-200">
 					<Warning class="h-4 w-4 flex-shrink-0" />
-					<span class="text-sm">
-						Nachricht kann nicht entschlüsselt werden. Möglicherweise fehlen Schlüssel.
-					</span>
+					<span class="text-sm"> Kann nicht entschlüsselt werden </span>
 				</div>
 			{:else if message.type === 'm.image' && thumbnailUrl}
 				<!-- Image message -->
-				<div class="relative max-w-sm">
+				<div class="relative">
 					{#if imageLoading}
-						<div class="flex h-48 w-full items-center justify-center rounded-lg bg-muted">
-							<ImageIcon class="h-8 w-8 animate-pulse text-muted-foreground" />
+						<div class="flex h-48 w-full items-center justify-center rounded-lg bg-black/10">
+							<ImageIcon class="h-8 w-8 animate-pulse text-white/50" />
 						</div>
 					{/if}
 					{#if imageError}
-						<div class="flex h-32 w-full items-center justify-center rounded-lg bg-muted">
-							<p class="text-sm text-muted-foreground">Bild konnte nicht geladen werden</p>
+						<div class="flex h-32 w-full items-center justify-center rounded-lg bg-black/10">
+							<p class="text-sm text-white/70">Bild konnte nicht geladen werden</p>
 						</div>
 					{:else}
 						<img
 							src={thumbnailUrl}
 							alt={message.body}
-							class="max-h-80 cursor-pointer rounded-lg object-contain"
+							class="max-h-80 max-w-xs cursor-pointer rounded-lg object-contain"
 							class:hidden={imageLoading}
 							onload={() => (imageLoading = false)}
 							onerror={() => {
@@ -187,17 +182,19 @@
 				</div>
 			{:else if message.type === 'm.video' && thumbnailUrl}
 				<!-- Video message -->
-				<div class="relative max-w-sm">
+				<div class="relative">
 					<div class="group/video relative">
-						<img src={thumbnailUrl} alt={message.body} class="rounded-lg" />
+						<img src={thumbnailUrl} alt={message.body} class="rounded-lg max-w-xs" />
 						<div
-							class="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity group-hover/video:opacity-100"
+							class="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity group-hover/video:opacity-100 rounded-lg"
 						>
 							<Play class="h-12 w-12 text-white" />
 						</div>
 					</div>
 					{#if message.media?.duration}
-						<span class="absolute bottom-2 right-2 rounded bg-black/60 px-1 text-xs text-white">
+						<span
+							class="absolute bottom-2 right-2 rounded bg-black/60 px-1.5 py-0.5 text-xs text-white"
+						>
 							{Math.floor(message.media.duration / 60)}:{(message.media.duration % 60)
 								.toString()
 								.padStart(2, '0')}
@@ -210,59 +207,92 @@
 					href={mediaUrl}
 					target="_blank"
 					rel="noopener noreferrer"
-					class="flex items-center gap-3 rounded-lg border border-border bg-muted p-3 transition-colors hover:bg-surface-hover"
+					class="flex items-center gap-3 rounded-lg {message.isOwn
+						? 'bg-white/20 hover:bg-white/30'
+						: 'bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10'} p-3 transition-colors"
 				>
-					<div class="rounded-lg bg-primary/10 p-2">
-						<FileIcon class="h-6 w-6 text-primary" />
+					<div class="rounded-lg {message.isOwn ? 'bg-white/20' : 'bg-primary/10'} p-2">
+						<FileIcon class="h-5 w-5 {message.isOwn ? 'text-white' : 'text-primary'}" />
 					</div>
 					<div class="min-w-0 flex-1">
-						<p class="truncate font-medium">{message.media?.filename || message.body}</p>
-						<p class="text-sm text-muted-foreground">
+						<p class="truncate font-medium text-sm">{message.media?.filename || message.body}</p>
+						<p class="text-xs {message.isOwn ? 'text-white/70' : 'text-muted-foreground'}">
 							{formatFileSize(message.media?.size)}
 							{#if message.media?.mimetype}
 								• {message.media.mimetype.split('/')[1]?.toUpperCase()}
 							{/if}
 						</p>
 					</div>
-					<DownloadSimple class="h-5 w-5 flex-shrink-0 text-muted-foreground" />
+					<DownloadSimple
+						class="h-4 w-4 flex-shrink-0 {message.isOwn
+							? 'text-white/70'
+							: 'text-muted-foreground'}"
+					/>
 				</a>
 			{:else if message.type === 'm.emote'}
-				<p class="italic text-muted-foreground">* {message.senderName} {message.body}</p>
+				<p class="italic {message.isOwn ? 'text-white/80' : 'text-muted-foreground'}">
+					* {message.senderName}
+					{message.body}
+				</p>
 			{:else if message.type === 'm.notice'}
-				<p class="text-sm text-muted-foreground">{message.body}</p>
+				<p class="text-sm {message.isOwn ? 'text-white/80' : 'text-muted-foreground'}">
+					{message.body}
+				</p>
 			{:else}
-				<p class="whitespace-pre-wrap break-words">{message.body}</p>
+				<p class="whitespace-pre-wrap break-words text-[15px] leading-relaxed">{message.body}</p>
 			{/if}
 
-			<!-- Hover timestamp for grouped messages -->
-			{#if !showAvatar}
-				<span
-					class="absolute -left-12 top-0 hidden text-xs text-muted-foreground group-hover:inline"
+			{#if message.edited}
+				<span class="text-xs {message.isOwn ? 'text-white/60' : 'text-muted-foreground'} mt-1 block"
+					>(bearbeitet)</span
 				>
-					{formattedTime}
-				</span>
 			{/if}
-		</div>
-	</div>
 
-	<!-- Message actions (hover) -->
-	{#if showActions && !message.redacted}
-		<div
-			class="absolute -top-2 right-2 flex items-center gap-1 rounded-lg border border-border bg-surface p-1 shadow-sm"
-		>
-			<button class="btn-ghost rounded p-1" title="Antworten" onclick={() => onReply?.(message)}>
-				<ArrowBendUpLeft class="h-4 w-4" />
-			</button>
-			{#if message.isOwn && message.type === 'm.text'}
-				<button class="btn-ghost rounded p-1" title="Bearbeiten" onclick={() => onEdit?.(message)}>
-					<PencilSimple class="h-4 w-4" />
-				</button>
-			{/if}
-			{#if message.isOwn}
-				<button class="btn-ghost rounded p-1 text-error" title="Löschen" onclick={handleDelete}>
-					<Trash class="h-4 w-4" />
-				</button>
+			{#if showEncryptionBadge}
+				<Lock class="absolute -bottom-1 -right-1 h-3 w-3 text-green-500" />
 			{/if}
 		</div>
-	{/if}
+
+		<!-- Time (shown on hover) -->
+		<div
+			class="flex items-center gap-2 mt-1.5 px-1 opacity-0 group-hover:opacity-100 transition-opacity"
+		>
+			<span class="text-xs text-muted-foreground">{formattedTime}</span>
+		</div>
+
+		<!-- Message actions (hover) -->
+		{#if showActions && !message.redacted}
+			<div
+				class="absolute {message.isOwn
+					? '-left-24'
+					: '-right-24'} top-0 flex items-center gap-1 rounded-xl glass p-1.5 shadow-lg"
+			>
+				<button
+					class="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+					title="Antworten"
+					onclick={() => onReply?.(message)}
+				>
+					<ArrowBendUpLeft class="h-4 w-4 text-muted-foreground" />
+				</button>
+				{#if message.isOwn && message.type === 'm.text'}
+					<button
+						class="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+						title="Bearbeiten"
+						onclick={() => onEdit?.(message)}
+					>
+						<PencilSimple class="h-4 w-4 text-muted-foreground" />
+					</button>
+				{/if}
+				{#if message.isOwn}
+					<button
+						class="p-1.5 rounded-lg hover:bg-red-500/10 transition-colors"
+						title="Löschen"
+						onclick={handleDelete}
+					>
+						<Trash class="h-4 w-4 text-red-500" />
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
 </div>
diff --git a/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte b/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
index cc3e7ddb9..ace6face0 100644
--- a/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
+++ b/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
@@ -137,23 +137,23 @@
 	}
 </script>
 
-<div class="border-t border-base-300 bg-base-100">
+<div class="p-4">
 	<!-- Reply/Edit Preview -->
 	{#if replyTo || editMessage}
-		<div class="flex items-center gap-2 border-b border-base-300 bg-base-200/50 px-4 py-2">
+		<div class="mb-3 flex items-center gap-2 rounded-xl glass-card px-4 py-2">
 			<div class="flex-1">
 				{#if editMessage}
-					<p class="text-xs text-base-content/60">Nachricht bearbeiten</p>
+					<p class="text-xs text-muted-foreground">Nachricht bearbeiten</p>
 					<p class="truncate text-sm">{editMessage.body}</p>
 				{:else if replyTo}
-					<p class="text-xs text-base-content/60">
+					<p class="text-xs text-muted-foreground">
 						Antwort auf <span class="font-medium">{replyTo.senderName}</span>
 					</p>
 					<p class="truncate text-sm">{replyTo.body}</p>
 				{/if}
 			</div>
 			<button
-				class="btn btn-ghost btn-xs"
+				class="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
 				onclick={() => {
 					if (editMessage) {
 						onCancelEdit?.();
@@ -170,45 +170,49 @@
 
 	<!-- Upload Progress -->
 	{#if uploading}
-		<div class="flex items-center gap-3 px-4 py-2">
+		<div class="mb-3 flex items-center gap-3 rounded-xl glass-card px-4 py-3">
 			<CircleNotch class="h-5 w-5 animate-spin text-primary" />
 			<div class="flex-1">
-				<div class="h-2 overflow-hidden rounded-full bg-base-300">
+				<div class="h-2 overflow-hidden rounded-full bg-black/10 dark:bg-white/10">
 					<div
-						class="h-full bg-primary transition-all duration-300"
+						class="h-full bg-gradient-to-r from-blue-500 to-indigo-600 transition-all duration-300"
 						style="width: {uploadProgress}%"
 					></div>
 				</div>
 			</div>
-			<span class="text-sm text-base-content/60">{uploadProgress}%</span>
+			<span class="text-sm text-muted-foreground">{uploadProgress}%</span>
 		</div>
 	{/if}
 
-	<!-- Input Area -->
-	<div class="p-4">
-		<div class="flex items-end gap-2">
+	<!-- Input Area - Glassmorphic Pill -->
+	<div class="flex flex-col gap-2 rounded-2xl glass p-2 shadow-lg">
+		<!-- Input Row -->
+		<div class="flex items-end gap-3">
 			<!-- Attachment button -->
 			<div class="dropdown dropdown-top">
 				<button
 					tabindex="0"
-					class="btn btn-ghost btn-sm"
+					class="p-2.5 rounded-xl glass-button shadow-sm"
 					title="Datei anhängen"
 					disabled={uploading}
 				>
-					<Paperclip class="h-5 w-5" />
+					<Paperclip class="h-5 w-5 text-muted-foreground" />
 				</button>
-				<ul
-					tabindex="0"
-					class="dropdown-content menu rounded-box z-50 w-48 bg-base-100 p-2 shadow-lg"
-				>
+				<ul tabindex="0" class="dropdown-content z-50 w-48 rounded-xl glass p-2 shadow-xl mb-2">
 					<li>
-						<button onclick={openFilePicker}>
+						<button
+							onclick={openFilePicker}
+							class="flex items-center gap-2 w-full px-3 py-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+						>
 							<Image class="h-4 w-4" />
 							Bild oder Video
 						</button>
 					</li>
 					<li>
-						<button onclick={openFilePicker}>
+						<button
+							onclick={openFilePicker}
+							class="flex items-center gap-2 w-full px-3 py-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+						>
 							<File class="h-4 w-4" />
 							Datei
 						</button>
@@ -226,7 +230,7 @@
 			/>
 
 			<!-- Text input -->
-			<div class="relative flex-1">
+			<div class="flex-1 relative">
 				<textarea
 					bind:this={textarea}
 					bind:value={message}
@@ -239,39 +243,35 @@
 							? 'Antwort schreiben...'
 							: 'Nachricht schreiben...'}
 					rows="1"
-					class="textarea textarea-bordered w-full resize-none pr-10"
+					class="w-full resize-none rounded-xl border-0 bg-transparent
+					       px-4 py-3 text-sm text-foreground
+					       focus:outline-none focus:ring-0
+					       disabled:opacity-50 disabled:cursor-not-allowed
+					       placeholder:text-muted-foreground"
 					style="max-height: 200px; min-height: 48px;"
 					disabled={uploading}
 				></textarea>
-
-				<!-- Emoji button (inside textarea) -->
-				<button
-					class="absolute bottom-2 right-2 text-base-content/50 hover:text-base-content"
-					title="Emoji hinzufügen"
-					disabled
-				>
-					<Smiley class="h-5 w-5" />
-				</button>
 			</div>
 
 			<!-- Send button -->
 			<button
-				class="btn btn-primary"
+				class="flex-shrink-0 p-3 rounded-xl glass-button shadow-md text-primary
+				       disabled:opacity-50 disabled:cursor-not-allowed"
 				onclick={handleSend}
 				disabled={!message.trim() || uploading}
 				title={editMessage ? 'Speichern' : 'Senden'}
 			>
-				<PaperPlaneTilt class="h-5 w-5" />
+				<PaperPlaneTilt class="h-5 w-5" weight="bold" />
 			</button>
 		</div>
-
-		<!-- Hint -->
-		<p class="mt-1 text-xs text-base-content/40">
-			{#if editMessage}
-				Enter zum Speichern, Escape zum Abbrechen
-			{:else}
-				Enter zum Senden, Shift+Enter für neue Zeile
-			{/if}
-		</p>
 	</div>
+
+	<!-- Hint -->
+	<p class="text-xs text-muted-foreground text-center mt-2 opacity-70">
+		{#if editMessage}
+			Enter zum Speichern, Escape zum Abbrechen
+		{:else}
+			Enter zum Senden, Shift+Enter für neue Zeile
+		{/if}
+	</p>
 </div>
diff --git a/apps/matrix/apps/web/src/lib/components/chat/RoomHeader.svelte b/apps/matrix/apps/web/src/lib/components/chat/RoomHeader.svelte
index 25131e09d..7280baeb2 100644
--- a/apps/matrix/apps/web/src/lib/components/chat/RoomHeader.svelte
+++ b/apps/matrix/apps/web/src/lib/components/chat/RoomHeader.svelte
@@ -41,38 +41,44 @@
 </script>
 
 {#if room}
-	<header class="flex items-center gap-3 border-b border-border bg-surface px-4 py-3">
+	<header
+		class="flex items-center gap-3 border-b border-black/10 dark:border-white/10 bg-white/50 dark:bg-white/5 backdrop-blur-sm px-4 py-3"
+	>
 		<!-- Mobile menu button -->
-		<button class="btn-ghost rounded p-2 lg:hidden" onclick={onMenuClick}>
+		<button
+			class="p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors lg:hidden"
+			onclick={onMenuClick}
+		>
 			<List class="h-5 w-5" />
 		</button>
 
 		<!-- Room avatar -->
 		<div
-			class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground"
+			class="flex h-10 w-10 items-center justify-center rounded-full shadow-md
+			       bg-gradient-to-br from-violet-500 to-purple-600 text-white"
 		>
 			{#if room.avatar}
 				<img src={room.avatar} alt={room.name} class="h-10 w-10 rounded-full object-cover" />
 			{:else}
-				<span class="text-sm">{room.name.charAt(0).toUpperCase()}</span>
+				<span class="text-sm font-semibold">{room.name.charAt(0).toUpperCase()}</span>
 			{/if}
 		</div>
 
 		<!-- Room info -->
 		<div class="min-w-0 flex-1">
 			<div class="flex items-center gap-2">
-				<h2 class="truncate font-semibold">{room.name}</h2>
+				<h2 class="truncate font-semibold text-foreground">{room.name}</h2>
 				{#if room.isEncrypted}
 					{#if encryptionStatus.allDevicesVerified}
 						<div class="flex-shrink-0" title="Verschlüsselt - Alle Geräte verifiziert">
-							<ShieldCheck class="h-4 w-4 text-success" />
+							<ShieldCheck class="h-4 w-4 text-green-500" />
 						</div>
 					{:else}
 						<div
 							class="flex-shrink-0"
 							title="Verschlüsselt - {encryptionStatus.unverifiedDevices} unverifizierte Geräte"
 						>
-							<ShieldWarning class="h-4 w-4 text-warning" />
+							<ShieldWarning class="h-4 w-4 text-amber-500" />
 						</div>
 					{/if}
 				{:else}
@@ -95,14 +101,26 @@
 
 		<!-- Actions -->
 		<div class="flex items-center gap-1">
-			<button class="btn-ghost rounded p-2" title="Sprachanruf" disabled>
-				<Phone class="h-5 w-5" />
+			<button
+				class="p-2.5 rounded-xl glass-button shadow-sm disabled:opacity-40"
+				title="Sprachanruf"
+				disabled
+			>
+				<Phone class="h-5 w-5 text-muted-foreground" />
 			</button>
-			<button class="btn-ghost rounded p-2" title="Videoanruf" disabled>
-				<VideoCamera class="h-5 w-5" />
+			<button
+				class="p-2.5 rounded-xl glass-button shadow-sm disabled:opacity-40"
+				title="Videoanruf"
+				disabled
+			>
+				<VideoCamera class="h-5 w-5 text-muted-foreground" />
 			</button>
-			<button class="btn-ghost rounded p-2" title="Rauminfo" onclick={onInfoClick}>
-				<Info class="h-5 w-5" />
+			<button
+				class="p-2.5 rounded-xl glass-button shadow-sm"
+				title="Rauminfo"
+				onclick={onInfoClick}
+			>
+				<Info class="h-5 w-5 text-muted-foreground" />
 			</button>
 		</div>
 	</header>
diff --git a/apps/matrix/apps/web/src/lib/components/chat/RoomItem.svelte b/apps/matrix/apps/web/src/lib/components/chat/RoomItem.svelte
index 961f869b7..8850bdfc3 100644
--- a/apps/matrix/apps/web/src/lib/components/chat/RoomItem.svelte
+++ b/apps/matrix/apps/web/src/lib/components/chat/RoomItem.svelte
@@ -29,44 +29,44 @@
 </script>
 
 <button
-	class="flex w-full items-center gap-3 px-3 py-2 transition-colors hover:bg-surface-hover {selected
-		? 'bg-primary/10 hover:bg-primary/20'
-		: ''}"
+	class="flex w-full items-center gap-3 px-3 py-2.5 mb-1 rounded-xl transition-all duration-200
+	       {selected
+		? 'bg-white dark:bg-white/15 shadow-md border border-black/5 dark:border-white/10'
+		: 'hover:bg-white/60 dark:hover:bg-white/5 hover:-translate-y-0.5'}"
 	{onclick}
 >
 	<!-- Avatar -->
-	<div class="avatar placeholder">
-		<div
-			class="w-12 rounded-full bg-neutral text-neutral-content"
-			class:bg-primary={selected}
-			class:text-primary-content={selected}
-		>
-			{#if room.avatar}
-				<img src={room.avatar} alt={room.name} class="object-cover" />
-			{:else}
-				<span class="text-sm font-medium">{initials}</span>
-			{/if}
-		</div>
+	<div
+		class="w-11 h-11 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm
+		       {selected
+			? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white'
+			: 'bg-gradient-to-br from-violet-500 to-purple-600 text-white'}"
+	>
+		{#if room.avatar}
+			<img src={room.avatar} alt={room.name} class="w-11 h-11 rounded-full object-cover" />
+		{:else}
+			<span class="text-sm font-semibold">{initials}</span>
+		{/if}
 	</div>
 
 	<!-- Room Info -->
 	<div class="flex min-w-0 flex-1 flex-col items-start">
-		<div class="flex w-full items-center gap-1">
-			<span class="truncate font-medium">{room.name}</span>
+		<div class="flex w-full items-center gap-1.5">
+			<span class="truncate font-medium text-foreground">{room.name}</span>
 			{#if room.isEncrypted}
-				<Lock class="h-3 w-3 flex-shrink-0 text-success" />
+				<Lock class="h-3 w-3 flex-shrink-0 text-green-500" />
 			{/if}
 			{#if !room.isDirect && room.memberCount > 2}
-				<span class="flex items-center text-xs text-base-content/50">
+				<span class="flex items-center text-xs text-muted-foreground">
 					<Users class="mr-0.5 h-3 w-3" />
 					{room.memberCount}
 				</span>
 			{/if}
 		</div>
 		{#if room.lastMessage}
-			<p class="w-full truncate text-left text-sm text-base-content/60">
+			<p class="w-full truncate text-left text-sm text-muted-foreground">
 				{#if room.lastMessageSender && !room.isDirect}
-					<span class="font-medium">{room.lastMessageSender}:</span>
+					<span class="font-medium text-foreground/70">{room.lastMessageSender}:</span>
 				{/if}
 				{room.lastMessage}
 			</p>
@@ -76,13 +76,14 @@
 	<!-- Meta -->
 	<div class="flex flex-shrink-0 flex-col items-end gap-1">
 		{#if timeAgo}
-			<span class="text-xs text-base-content/40">{timeAgo}</span>
+			<span class="text-xs text-muted-foreground">{timeAgo}</span>
 		{/if}
 		{#if room.unreadCount > 0}
 			<span
-				class="badge badge-sm"
-				class:badge-primary={room.highlightCount === 0}
-				class:badge-error={room.highlightCount > 0}
+				class="px-1.5 py-0.5 rounded-full text-xs font-medium text-white
+				       {room.highlightCount > 0
+					? 'bg-gradient-to-r from-red-500 to-rose-600'
+					: 'bg-gradient-to-r from-blue-500 to-indigo-600'}"
 			>
 				{room.unreadCount > 99 ? '99+' : room.unreadCount}
 			</span>
diff --git a/apps/matrix/apps/web/src/lib/components/chat/RoomList.svelte b/apps/matrix/apps/web/src/lib/components/chat/RoomList.svelte
index 9cb931ca0..d5bb1fce4 100644
--- a/apps/matrix/apps/web/src/lib/components/chat/RoomList.svelte
+++ b/apps/matrix/apps/web/src/lib/components/chat/RoomList.svelte
@@ -24,37 +24,56 @@
 	<div class="p-3">
 		<div class="relative">
 			<MagnifyingGlass
-				class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-base-content/50"
+				class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
 			/>
 			<input
 				type="text"
 				bind:value={search}
-				placeholder="Search rooms..."
-				class="input input-bordered input-sm w-full pl-10"
+				placeholder="Chats durchsuchen..."
+				class="w-full rounded-xl bg-white/70 dark:bg-white/10 backdrop-blur-xl
+				       border border-black/10 dark:border-white/20 px-4 py-2.5 pl-10
+				       text-sm font-medium text-foreground focus:ring-2 focus:ring-primary focus:outline-none
+				       placeholder:text-muted-foreground shadow-sm"
 			/>
 		</div>
 	</div>
 
 	<!-- Tabs -->
-	<div class="tabs tabs-boxed mx-3 mb-2">
-		<button class="tab flex-1" class:tab-active={showDMs} onclick={() => (showDMs = true)}>
-			<ChatCircle class="mr-1 h-4 w-4" />
-			Direct
+	<div class="flex mx-3 mb-2 p-1 rounded-xl bg-black/5 dark:bg-white/5">
+		<button
+			class="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-sm font-medium transition-all duration-200
+			       {showDMs
+				? 'bg-white dark:bg-white/20 shadow-sm text-foreground'
+				: 'text-muted-foreground hover:text-foreground'}"
+			onclick={() => (showDMs = true)}
+		>
+			<ChatCircle class="h-4 w-4" weight={showDMs ? 'fill' : 'regular'} />
+			Direkt
 			{#if matrixStore.directRooms.length > 0}
-				<span class="badge badge-sm ml-1">{matrixStore.directRooms.length}</span>
+				<span class="px-1.5 py-0.5 rounded-full bg-black/10 dark:bg-white/10 text-xs">
+					{matrixStore.directRooms.length}
+				</span>
 			{/if}
 		</button>
-		<button class="tab flex-1" class:tab-active={!showDMs} onclick={() => (showDMs = false)}>
-			<Users class="mr-1 h-4 w-4" />
-			Rooms
+		<button
+			class="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-sm font-medium transition-all duration-200
+			       {!showDMs
+				? 'bg-white dark:bg-white/20 shadow-sm text-foreground'
+				: 'text-muted-foreground hover:text-foreground'}"
+			onclick={() => (showDMs = false)}
+		>
+			<Users class="h-4 w-4" weight={!showDMs ? 'fill' : 'regular'} />
+			Räume
 			{#if matrixStore.groupRooms.length > 0}
-				<span class="badge badge-sm ml-1">{matrixStore.groupRooms.length}</span>
+				<span class="px-1.5 py-0.5 rounded-full bg-black/10 dark:bg-white/10 text-xs">
+					{matrixStore.groupRooms.length}
+				</span>
 			{/if}
 		</button>
 	</div>
 
 	<!-- Room List -->
-	<div class="chat-scrollbar flex-1 overflow-y-auto">
+	<div class="chat-scrollbar flex-1 overflow-y-auto px-3">
 		{#each filteredRooms as room (room.id)}
 			<RoomItem
 				{room}
@@ -62,21 +81,26 @@
 				onclick={() => matrixStore.selectRoom(room.id)}
 			/>
 		{:else}
-			<div class="flex flex-col items-center justify-center p-8 text-base-content/50">
+			<div class="flex flex-col items-center justify-center p-8 text-muted-foreground">
 				{#if search}
-					<MagnifyingGlass class="mb-2 h-8 w-8" />
-					<p>No rooms match "{search}"</p>
+					<MagnifyingGlass class="mb-2 h-8 w-8 opacity-50" />
+					<p class="text-sm">Keine Ergebnisse für "{search}"</p>
 				{:else}
-					<ChatCircle class="mb-2 h-8 w-8" />
-					<p>No {showDMs ? 'direct messages' : 'rooms'} yet</p>
+					<ChatCircle class="mb-2 h-8 w-8 opacity-50" />
+					<p class="text-sm">Noch keine {showDMs ? 'Direktnachrichten' : 'Räume'}</p>
 				{/if}
 			</div>
 		{/each}
 	</div>
 
 	<!-- New Room Button -->
-	<div class="border-t border-base-300 p-3">
-		<button class="btn btn-ghost btn-sm w-full justify-start" onclick={onCreateRoom}>
+	<div class="border-t border-black/10 dark:border-white/10 p-3">
+		<button
+			class="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl
+			       bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium
+			       shadow-md hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200"
+			onclick={onCreateRoom}
+		>
 			<Plus class="h-4 w-4" />
 			{showDMs ? 'Neuen Chat starten' : 'Raum erstellen'}
 		</button>
diff --git a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
index 348d9037d..e31b5ad7d 100644
--- a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
@@ -38,43 +38,53 @@
 	}
 </script>
 
-<div class="flex h-screen overflow-hidden bg-base-100">
+<div class="flex h-screen overflow-hidden bg-background">
 	<!-- Sidebar -->
 	<aside
-		class="flex w-80 flex-shrink-0 flex-col border-r border-base-300 bg-base-200 transition-all duration-300 ease-in-out"
+		class="flex w-80 flex-shrink-0 flex-col border-r border-black/10 dark:border-white/10 bg-white/50 dark:bg-white/5 backdrop-blur-sm transition-all duration-300 ease-in-out"
 		class:hidden={!sidebarOpen}
 		class:lg:flex={true}
 	>
 		<!-- Sidebar Header -->
-		<header class="flex items-center justify-between border-b border-base-300 p-4">
+		<header
+			class="flex items-center justify-between border-b border-black/10 dark:border-white/10 p-4"
+		>
 			<div class="flex items-center gap-2">
-				<ChatCircle class="h-6 w-6 text-primary" />
-				<h1 class="text-xl font-bold">Mana Matrix</h1>
+				<div class="p-1.5 rounded-lg bg-gradient-to-br from-violet-500 to-purple-600">
+					<ChatCircle class="h-5 w-5 text-white" weight="fill" />
+				</div>
+				<h1 class="text-lg font-bold">Mana Matrix</h1>
 			</div>
 			<div class="flex items-center gap-1">
 				<button
-					class="btn btn-ghost btn-sm btn-circle"
+					class="p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
 					title="Neuer Chat"
 					onclick={() => (showCreateRoom = true)}
 				>
 					<Plus class="h-5 w-5" />
 				</button>
 				<div class="dropdown dropdown-end">
-					<button tabindex="0" class="btn btn-ghost btn-sm btn-circle">
+					<button
+						tabindex="0"
+						class="p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+					>
 						<Gear class="h-5 w-5" />
 					</button>
-					<ul
-						tabindex="0"
-						class="dropdown-content menu rounded-box z-50 w-52 bg-base-100 p-2 shadow-lg"
-					>
+					<ul tabindex="0" class="dropdown-content z-50 w-52 rounded-xl glass p-2 shadow-xl mt-2">
 						<li>
-							<a href="/settings">
+							<a
+								href="/settings"
+								class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+							>
 								<Gear class="h-4 w-4" />
 								Einstellungen
 							</a>
 						</li>
 						<li>
-							<button onclick={handleLogout} class="text-error">
+							<button
+								onclick={handleLogout}
+								class="flex items-center gap-2 w-full px-3 py-2 rounded-lg hover:bg-red-500/10 text-red-500 transition-colors"
+							>
 								<SignOut class="h-4 w-4" />
 								Abmelden
 							</button>
@@ -85,13 +95,17 @@
 		</header>
 
 		<!-- User Info -->
-		<div class="border-b border-base-300 px-4 py-2">
+		<div class="border-b border-black/10 dark:border-white/10 px-4 py-3">
 			<p class="truncate text-sm font-medium">{matrixStore.userId}</p>
-			<p class="flex items-center gap-1 text-xs text-base-content/60">
-				<span class="h-2 w-2 rounded-full bg-success"></span>
+			<p class="flex items-center gap-1.5 text-xs text-muted-foreground mt-0.5">
+				<span class="h-2 w-2 rounded-full bg-green-500"></span>
 				{matrixStore.syncState === 'SYNCING' ? 'Verbunden' : matrixStore.syncState}
 				{#if matrixStore.totalUnreadCount > 0}
-					<span class="ml-auto badge badge-primary badge-xs">{matrixStore.totalUnreadCount}</span>
+					<span
+						class="ml-auto px-1.5 py-0.5 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-xs font-medium"
+					>
+						{matrixStore.totalUnreadCount}
+					</span>
 				{/if}
 			</p>
 		</div>
@@ -103,7 +117,7 @@
 	</aside>
 
 	<!-- Main Chat Area -->
-	<main class="flex flex-1 flex-col overflow-hidden">
+	<main class="flex flex-1 flex-col overflow-hidden bg-background">
 		{#if matrixStore.currentRoom}
 			<!-- Room Header -->
 			<RoomHeader onMenuClick={toggleSidebar} onInfoClick={() => (showRoomSettings = true)} />
@@ -120,29 +134,34 @@
 			/>
 		{:else}
 			<!-- No Room Selected -->
-			<div class="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-base-content/50">
-				<ChatCircle class="h-16 w-16" />
+			<div class="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-muted-foreground">
+				<div class="p-4 rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-600/20">
+					<ChatCircle class="h-12 w-12 text-violet-500" />
+				</div>
 				<div class="text-center">
-					<h2 class="text-xl font-semibold text-base-content">Willkommen bei Mana Matrix</h2>
-					<p class="mt-2">
+					<h2 class="text-xl font-semibold text-foreground">Willkommen bei Mana Matrix</h2>
+					<p class="mt-2 max-w-sm">
 						Wähle eine Unterhaltung aus der Seitenleiste oder starte einen neuen Chat
 					</p>
 				</div>
 
-				<button class="btn btn-primary mt-4" onclick={() => (showCreateRoom = true)}>
+				<button
+					class="mt-4 px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 flex items-center gap-2"
+					onclick={() => (showCreateRoom = true)}
+				>
 					<Plus class="h-4 w-4" />
 					Neuer Chat
 				</button>
 
 				<!-- Stats -->
 				<div class="mt-8 flex gap-8 text-center">
-					<div>
-						<p class="text-3xl font-bold text-base-content">{matrixStore.rooms.length}</p>
-						<p class="text-sm">Räume</p>
+					<div class="glass-card rounded-xl px-6 py-4">
+						<p class="text-3xl font-bold text-foreground">{matrixStore.rooms.length}</p>
+						<p class="text-sm text-muted-foreground">Räume</p>
 					</div>
-					<div>
-						<p class="text-3xl font-bold text-base-content">{matrixStore.totalUnreadCount}</p>
-						<p class="text-sm">Ungelesen</p>
+					<div class="glass-card rounded-xl px-6 py-4">
+						<p class="text-3xl font-bold text-foreground">{matrixStore.totalUnreadCount}</p>
+						<p class="text-sm text-muted-foreground">Ungelesen</p>
 					</div>
 				</div>
 			</div>