diff --git a/src/app/globals.css b/src/app/globals.css
index b23277f..bff8ffc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,118 +4,111 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-	--background: oklch(1.0000 0 0);
-	--foreground: oklch(0.2686 0 0);
-	--card: oklch(1.0000 0 0);
-	--card-foreground: oklch(0.2686 0 0);
-	--popover: oklch(1.0000 0 0);
-	--popover-foreground: oklch(0.2686 0 0);
-	--primary: oklch(0.7686 0.1647 70.0804);
-	--primary-foreground: oklch(0 0 0);
-	--secondary: oklch(0.9670 0.0029 264.5419);
-	--secondary-foreground: oklch(0.4461 0.0263 256.8018);
-	--muted: oklch(0.9846 0.0017 247.8389);
-	--muted-foreground: oklch(0.5510 0.0234 264.3637);
-	--accent: oklch(0.9869 0.0214 95.2774);
-	--accent-foreground: oklch(0.4732 0.1247 46.2007);
-	--destructive: oklch(0.6368 0.2078 25.3313);
-	--destructive-foreground: oklch(1.0000 0 0);
-	--border: oklch(0.9276 0.0058 264.5313);
-	--input: oklch(0.9276 0.0058 264.5313);
-	--ring: oklch(0.7686 0.1647 70.0804);
-	--chart-1: oklch(0.7686 0.1647 70.0804);
-	--chart-2: oklch(0.6658 0.1574 58.3183);
-	--chart-3: oklch(0.5553 0.1455 48.9975);
-	--chart-4: oklch(0.4732 0.1247 46.2007);
-	--chart-5: oklch(0.4137 0.1054 45.9038);
-	--sidebar: oklch(0.9846 0.0017 247.8389);
-	--sidebar-foreground: oklch(0.2686 0 0);
-	--sidebar-primary: oklch(0.7686 0.1647 70.0804);
-	--sidebar-primary-foreground: oklch(1.0000 0 0);
-	--sidebar-accent: oklch(0.9869 0.0214 95.2774);
-	--sidebar-accent-foreground: oklch(0.4732 0.1247 46.2007);
-	--sidebar-border: oklch(0.9276 0.0058 264.5313);
-	--sidebar-ring: oklch(0.7686 0.1647 70.0804);
-	--font-sans: Inter, sans-serif;
-	--font-serif: Source Serif 4, serif;
-	--font-mono: JetBrains Mono, monospace;
-	--radius: 0.375rem;
-	--shadow-x: 1px;
-	--shadow-y: 2px;
-	--shadow-blur: 8px;
-	--shadow-spread: -1px;
-	--shadow-opacity: 0.1;
-	--shadow-color: hsl(0 0% 0%);
-	--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-	--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-	--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-	--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-	--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
-	--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
-	--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
-	--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+	--background: oklch(0.1467 0.0041 49.3141);
+	--foreground: oklch(0.8848 0.0037 56.3763);
+	--card: oklch(0.1588 0.0050 48.3894);
+	--card-foreground: oklch(0.8848 0.0037 56.3763);
+	--popover: oklch(0.1588 0.0050 48.3894);
+	--popover-foreground: oklch(0.8848 0.0037 56.3763);
+	--primary: oklch(0.7065 0.1860 48.1293);
+	--primary-foreground: oklch(0.9620 0.0012 56.4186);
+	--secondary: oklch(0.2698 0.0089 52.1501);
+	--secondary-foreground: oklch(0.8848 0.0037 56.3763);
+	--muted: oklch(0.2698 0.0089 52.1501);
+	--muted-foreground: oklch(0.7250 0.0092 56.2587);
+	--accent: oklch(0.2698 0.0089 52.1501);
+	--accent-foreground: oklch(0.8848 0.0037 56.3763);
+	--destructive: oklch(0.5714 0.2121 27.2502);
+	--destructive-foreground: oklch(0.9620 0.0012 56.4186);
+	--border: oklch(0.2371 0.0107 48.2489);
+	--input: oklch(0.2371 0.0107 48.2489);
+	--ring: oklch(0.7065 0.1860 48.1293);
+	--chart-1: oklch(0.7065 0.1860 48.1293);
+	--chart-2: oklch(0.6356 0.1398 156.1492);
+	--chart-3: oklch(0.6296 0.1443 251.2286);
+	--chart-4: oklch(0.6665 0.1797 327.3573);
+	--chart-5: oklch(0.9204 0.1621 109.2030);
+	--sidebar: oklch(0.1154 0.0031 50.5978);
+	--sidebar-foreground: oklch(0.9081 0.0030 56.3898);
+	--sidebar-primary: oklch(0.7065 0.1860 48.1293);
+	--sidebar-primary-foreground: oklch(0.9620 0.0012 56.4186);
+	--sidebar-accent: oklch(0.1931 0.0052 52.2293);
+	--sidebar-accent-foreground: oklch(0.9081 0.0030 56.3898);
+	--sidebar-border: oklch(0.2151 0.0091 48.2763);
+	--sidebar-ring: oklch(0.7065 0.1860 48.1293);
+	--font-sans: "Inter", sans-serif;
+	--font-serif: "Lora", serif;
+	--font-mono: "Fira Mono", monospace;
+	--radius: 0.5rem;
+	--shadow-x: 0px;
+	--shadow-y: 4px;
+	--shadow-blur: 10px;
+	--shadow-spread: -2px;
+	--shadow-opacity: 0.3;
+	--shadow-color: hsl(20, 14.3%, 2%);
+	--shadow-2xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
+	--shadow-xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
+	--shadow-sm: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow-md: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 2px 4px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow-lg: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 4px 6px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow-xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 8px 10px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow-2xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.75);
 	--tracking-normal: 0em;
 	--spacing: 0.25rem;
-	--shadow-offset-x: 0px;
-	--shadow-offset-y: 4px;
-	--letter-spacing: 0em;
 }
 
 .dark {
-	--background: oklch(0.2046 0 0);
-	--foreground: oklch(0.9219 0 0);
-	--card: oklch(0.2686 0 0);
-	--card-foreground: oklch(0.9219 0 0);
-	--popover: oklch(0.2686 0 0);
-	--popover-foreground: oklch(0.9219 0 0);
-	--primary: oklch(0.7686 0.1647 70.0804);
-	--primary-foreground: oklch(0 0 0);
-	--secondary: oklch(0.2686 0 0);
-	--secondary-foreground: oklch(0.9219 0 0);
-	--muted: oklch(0.2393 0 0);
-	--muted-foreground: oklch(0.7155 0 0);
-	--accent: oklch(0.4732 0.1247 46.2007);
-	--accent-foreground: oklch(0.9243 0.1151 95.7459);
-	--destructive: oklch(0.6368 0.2078 25.3313);
-	--destructive-foreground: oklch(1.0000 0 0);
-	--border: oklch(0.3715 0 0);
-	--input: oklch(0.3715 0 0);
-	--ring: oklch(0.7686 0.1647 70.0804);
-	--chart-1: oklch(0.8369 0.1644 84.4286);
-	--chart-2: oklch(0.6658 0.1574 58.3183);
-	--chart-3: oklch(0.4732 0.1247 46.2007);
-	--chart-4: oklch(0.5553 0.1455 48.9975);
-	--chart-5: oklch(0.4732 0.1247 46.2007);
-	--sidebar: oklch(0.1684 0 0);
-	--sidebar-foreground: oklch(0.9219 0 0);
-	--sidebar-primary: oklch(0.7686 0.1647 70.0804);
-	--sidebar-primary-foreground: oklch(1.0000 0 0);
-	--sidebar-accent: oklch(0.4732 0.1247 46.2007);
-	--sidebar-accent-foreground: oklch(0.9243 0.1151 95.7459);
-	--sidebar-border: oklch(0.3715 0 0);
-	--sidebar-ring: oklch(0.7686 0.1647 70.0804);
-	--font-sans: Inter, sans-serif;
-	--font-serif: Source Serif 4, serif;
-	--font-mono: JetBrains Mono, monospace;
-	--radius: 0.375rem;
-	--shadow-x: 1px;
-	--shadow-y: 2px;
-	--shadow-blur: 8px;
-	--shadow-spread: -1px;
-	--shadow-opacity: 0.1;
-	--shadow-color: hsl(0 0% 0%);
-	--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-	--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-	--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-	--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-	--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
-	--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
-	--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
-	--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
-	--shadow-offset-x: 0px;
-	--shadow-offset-y: 4px;
-	--letter-spacing: 0em;
-	--spacing: 0.25rem;
+	--background: oklch(0.1467 0.0041 49.3141);
+	--foreground: oklch(0.8848 0.0037 56.3763);
+	--card: oklch(0.1588 0.0050 48.3894);
+	--card-foreground: oklch(0.8848 0.0037 56.3763);
+	--popover: oklch(0.1588 0.0050 48.3894);
+	--popover-foreground: oklch(0.8848 0.0037 56.3763);
+	--primary: oklch(0.7065 0.1860 48.1293);
+	--primary-foreground: oklch(0.9620 0.0012 56.4186);
+	--secondary: oklch(0.2698 0.0089 52.1501);
+	--secondary-foreground: oklch(0.8848 0.0037 56.3763);
+	--muted: oklch(0.2698 0.0089 52.1501);
+	--muted-foreground: oklch(0.7250 0.0092 56.2587);
+	--accent: oklch(0.2698 0.0089 52.1501);
+	--accent-foreground: oklch(0.8848 0.0037 56.3763);
+	--destructive: oklch(0.5714 0.2121 27.2502);
+	--destructive-foreground: oklch(0.9620 0.0012 56.4186);
+	--border: oklch(0.2371 0.0107 48.2489);
+	--input: oklch(0.2371 0.0107 48.2489);
+	--ring: oklch(0.7065 0.1860 48.1293);
+	--chart-1: oklch(0.7065 0.1860 48.1293);
+	--chart-2: oklch(0.6356 0.1398 156.1492);
+	--chart-3: oklch(0.6296 0.1443 251.2286);
+	--chart-4: oklch(0.6665 0.1797 327.3573);
+	--chart-5: oklch(0.9204 0.1621 109.2030);
+	--sidebar: oklch(0.1154 0.0031 50.5978);
+	--sidebar-foreground: oklch(0.9081 0.0030 56.3898);
+	--sidebar-primary: oklch(0.7065 0.1860 48.1293);
+	--sidebar-primary-foreground: oklch(0.9620 0.0012 56.4186);
+	--sidebar-accent: oklch(0.1931 0.0052 52.2293);
+	--sidebar-accent-foreground: oklch(0.9081 0.0030 56.3898);
+	--sidebar-border: oklch(0.2151 0.0091 48.2763);
+	--sidebar-ring: oklch(0.7065 0.1860 48.1293);
+	--font-sans: "Inter", sans-serif;
+	--font-serif: "Lora", serif;
+	--font-mono: "Fira Mono", monospace;
+	--radius: 0.5rem;
+	--shadow-x: 0px;
+	--shadow-y: 4px;
+	--shadow-blur: 10px;
+	--shadow-spread: -2px;
+	--shadow-opacity: 0.3;
+	--shadow-color: hsl(20, 14.3%, 2%);
+	--shadow-2xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
+	--shadow-xs: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.15);
+	--shadow-sm: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 1px 2px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow-md: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 2px 4px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow-lg: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 4px 6px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow-xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.30), 0px 8px 10px -3px hsl(20 14.3000% 2% / 0.30);
+	--shadow-2xl: 0px 4px 10px -2px hsl(20 14.3000% 2% / 0.75);
 }
 
 @theme inline {
@@ -152,9 +145,9 @@
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
 
-	--font-sans: Inter, sans-serif;
-	--font-mono: JetBrains Mono, monospace;
-	--font-serif: Source Serif 4, serif;
+	--font-sans: var(--font-sans);
+	--font-mono: var(--font-mono);
+	--font-serif: var(--font-serif);
 
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
@@ -169,34 +162,4 @@
 	--shadow-lg: var(--shadow-lg);
 	--shadow-xl: var(--shadow-xl);
 	--shadow-2xl: var(--shadow-2xl);
-
-	--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
-	--tracking-tight: calc(var(--tracking-normal) - 0.025em);
-	--tracking-normal: var(--tracking-normal);
-	--tracking-wide: calc(var(--tracking-normal) + 0.025em);
-	--tracking-wider: calc(var(--tracking-normal) + 0.05em);
-	--tracking-widest: calc(var(--tracking-normal) + 0.1em);
-	--radius: 0.375rem;
-	--spacing: var(--spacing);
-	--letter-spacing: var(--letter-spacing);
-	--shadow-offset-y: var(--shadow-offset-y);
-	--shadow-offset-x: var(--shadow-offset-x);
-	--shadow-spread: var(--shadow-spread);
-	--shadow-blur: var(--shadow-blur);
-	--shadow-opacity: var(--shadow-opacity);
-	--color-shadow-color: var(--shadow-color);
-}
-
-body {
-	letter-spacing: var(--tracking-normal);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-	}
-  body {
-    @apply bg-background text-foreground;
-    letter-spacing: var(--tracking-normal);
-	}
 }
\ No newline at end of file
diff --git a/src/components/ui/dm/DmChannelContent.tsx b/src/components/ui/dm/DmChannelContent.tsx
index a99e08f..d179dea 100644
--- a/src/components/ui/dm/DmChannelContent.tsx
+++ b/src/components/ui/dm/DmChannelContent.tsx
@@ -2,11 +2,12 @@ import { useOlmContext } from "@/contexts/olm-context";
 import { useSocketContext } from "@/contexts/socket-context";
 import { clearUnread, db, sendMessage } from "@/lib/db";
 import { useLiveQuery } from "dexie-react-hooks";
-import { KeyRound } from "lucide-react";
+import { KeyRound, SendIcon } from "lucide-react";
 import moment from "moment";
 import React, { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import { Button } from "../button";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog";
 import { Input } from "../input";
 
@@ -294,14 +295,14 @@ export default function DMChannelContent(
 														{timeLabel}
 													</span>
 												</div>
-												<div className="text-sm md:text-[15px] leading-[1.375rem] text-foreground mt-0.5 wrap-break-word">
+												<div className="text-sm md:text-[15px] leading-5.5 text-foreground mt-0.5 wrap-break-word">
 													{msg.content}
 												</div>
 											</div>
 										</div>
 									) : (
 										// Compact message without avatar (grouped)
-										<div className="flex gap-2 md:gap-4 leading-[1.375rem]">
+										<div className="flex gap-2 md:gap-4 leading-5.5">
 											<div className="w-8 md:w-10 shrink-0 flex items-start justify-end pt-0.5">
 												<span className="text-[10px] text-transparent group-hover:text-muted-foreground transition-colors duration-100 font-medium">
 													{
@@ -309,7 +310,7 @@ export default function DMChannelContent(
 													}
 												</span>
 											</div>
-											<div className="flex-1 min-w-0 text-sm md:text-[15px] leading-[1.375rem] text-foreground wrap-break-word">
+											<div className="flex-1 min-w-0 text-sm md:text-[15px] leading-5.5 text-foreground wrap-break-word">
 												{msg.content}
 											</div>
 										</div>
@@ -324,7 +325,7 @@ export default function DMChannelContent(
 			</div>
 
 			{/* Message input */}
-			<div className="shrink-0 px-2 md:px-4 pb-4 md:pb-6 pt-2">
+			<div className="flex items-center gap-2 shrink-0 px-2 md:px-4 pb-4 md:pb-6 pt-2">
 				<Input
 					className="h-10 md:h-11 rounded-lg bg-muted border-0 focus-visible:ring-0 focus-visible:ring-offset-0 px-3 md:px-4 text-sm md:text-[15px]"
 					placeholder={
@@ -362,6 +363,9 @@ export default function DMChannelContent(
 						}
 					}}
 				/>
+				<Button className="flex md:hidden items-center justify-center h-10 md:h-11 w-10 md:w-11" variant="outline" size="icon">
+					<SendIcon className="size-4" />
+				</Button>
 			</div>
 		</div>
 	);
diff --git a/src/components/ui/layout/channel-list.tsx b/src/components/ui/layout/channel-list.tsx
index 165f6b6..7b4aed3 100644
--- a/src/components/ui/layout/channel-list.tsx
+++ b/src/components/ui/layout/channel-list.tsx
@@ -2,9 +2,10 @@
 
 import { Button } from "@/components/ui/button"
 import { clearUnread, db } from "@/lib/db"
+import { QuestionMarkIcon } from "@phosphor-icons/react"
 import { formatDistanceToNow } from "date-fns"
 import { useLiveQuery } from "dexie-react-hooks"
-import { MessageSquarePlusIcon, SettingsIcon, Sparkles, UsersIcon, XIcon } from "lucide-react"
+import { MessageSquarePlusIcon, SettingsIcon, UsersIcon, XIcon } from "lucide-react"
 import { useRouter } from "next/navigation"
 import UserCard from "../user/user-card"
 
@@ -61,8 +62,8 @@ export function ChannelList({
 						<Button
 							variant="ghost"
 							className={`w-full justify-start gap-3 h-11 px-3 rounded-lg transition-all ${page === "friends"
-									? "bg-primary/10 text-primary hover:bg-primary/15 ring-1 ring-primary/20"
-									: "hover:bg-accent/60"
+								? "bg-primary/10 text-primary hover:bg-primary/15 ring-1 ring-primary/20"
+								: "hover:bg-accent/60"
 								}`}
 							onClick={() => {
 								onPageChange("friends")
@@ -70,8 +71,8 @@ export function ChannelList({
 							}}
 						>
 							<div className={`flex items-center justify-center w-8 h-8 rounded-lg ${page === "friends"
-									? "bg-primary/20"
-									: "bg-muted/50"
+								? "bg-primary/20"
+								: "bg-muted/50"
 								}`}>
 								<UsersIcon className="size-4" />
 							</div>
@@ -80,8 +81,8 @@ export function ChannelList({
 						<Button
 							variant="ghost"
 							className={`w-full justify-start gap-3 h-11 px-3 rounded-lg transition-all ${page === "support"
-									? "bg-primary/10 text-primary hover:bg-primary/15 ring-1 ring-primary/20"
-									: "hover:bg-accent/60"
+								? "bg-primary/10 text-primary hover:bg-primary/15 ring-1 ring-primary/20"
+								: "hover:bg-accent/60"
 								}`}
 							onClick={() => {
 								onPageChange("support")
@@ -89,8 +90,8 @@ export function ChannelList({
 							}}
 						>
 							<div className={`flex items-center justify-center w-8 h-8 rounded-lg ${page === "support"
-									? "bg-primary/20"
-									: "bg-muted/50"
+								? "bg-primary/20"
+								: "bg-muted/50"
 								}`}>
 								<SettingsIcon className="size-4" />
 							</div>
@@ -157,7 +158,6 @@ export function ChannelList({
 						{openDmChannels.length > 0 ? (
 							<div className="flex flex-col gap-0.5">
 								{openDmChannels.map((channel) => {
-									const participantDetails = dmChannel?.participantDetails.find((p) => p.id === channel.participants[0])
 									const isActive = dmChannel?.id === channel.id
 									const lastMessage = channel.times?.lastMessage
 									const lastMessageTime = channel.times?.lastMessageAt
@@ -239,7 +239,7 @@ export function ChannelList({
 						) : (
 							<div className="flex flex-col items-center justify-center py-8 px-4 text-center">
 								<div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 mb-3">
-									<Sparkles className="size-5 text-muted-foreground/50" />
+									<QuestionMarkIcon size={20} className="text-muted-foreground/50" />
 								</div>
 								<span className="text-xs font-medium text-muted-foreground/70 leading-relaxed">
 									{emptyMessage}