diff --git a/src/lib/components/channel/Messages/Message/UserStatus.svelte b/src/lib/components/channel/Messages/Message/UserStatus.svelte
index 3fd8249743..c14ef0288d 100644
--- a/src/lib/components/channel/Messages/Message/UserStatus.svelte
+++ b/src/lib/components/channel/Messages/Message/UserStatus.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte';
+	import { getContext } from 'svelte';
 
 	const i18n = getContext('i18n');
 
-	import { user as _user, channels, socket } from '$lib/stores';
-	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
-	import { getChannels, getDMChannelByUserId } from '$lib/apis/channels';
+	import { user as _user } from '$lib/stores';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
+	import { getDMChannelByUserId } from '$lib/apis/channels';
 
-	import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
-	import ChatBubble from '$lib/components/icons/ChatBubble.svelte';
 	import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
 	import { goto } from '$app/navigation';
 	import Emoji from '$lib/components/common/Emoji.svelte';
@@ -33,105 +31,84 @@
 </script>
 
 {#if user}
-	<div class="py-3">
-		<div class=" flex gap-3.5 w-full px-3 items-center">
-			<div class=" items-center flex shrink-0">
+	<div class="text-xs">
+		<div class="px-3 pt-3 pb-2">
+			<div class="flex items-center gap-2">
 				<img
-					src={`${WEBUI_API_BASE_URL}/users/${user?.id}/profile/image`}
-					class=" size-14 object-cover rounded-xl"
-					alt="profile"
+					src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
+					class="size-7 shrink-0 rounded-full object-cover"
+					alt=""
 				/>
-			</div>
-
-			<div class=" flex flex-col w-full flex-1">
-				<div class="mb-0.5 font-normal line-clamp-1 pr-2">
-					{user.name}
-				</div>
-
-				<div class=" flex items-center gap-2">
-					{#if user?.is_active}
-						<div>
-							<span class="relative flex size-2">
-								<span
-									class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
-								/>
-								<span class="relative inline-flex rounded-full size-2 bg-green-500" />
-							</span>
-						</div>
-
-						<span class="text-xs"> {$i18n.t('Active')} </span>
-					{:else}
-						<div>
-							<span class="relative flex size-2">
-								<span class="relative inline-flex rounded-full size-2 bg-gray-500" />
-							</span>
-						</div>
-
-						<span class="text-xs"> {$i18n.t('Away')} </span>
-					{/if}
+				<div class="min-w-0 flex-1">
+					<div
+						class="truncate text-[0.8125rem] font-medium leading-5 text-gray-900 dark:text-gray-100"
+						title={user.name}
+					>
+						{user.name}
+					</div>
+					<div
+						class="flex items-center gap-1.5 text-[0.6875rem] leading-4 text-gray-500 dark:text-gray-400"
+					>
+						<span
+							class="size-1.5 shrink-0 rounded-full {user.is_active
+								? 'bg-green-500'
+								: 'bg-gray-400'}"
+							aria-hidden="true"
+						></span>
+						<span>{user.is_active ? $i18n.t('Active') : $i18n.t('Away')}</span>
+					</div>
 				</div>
 			</div>
+
+			{#if user.status_emoji || user.status_message}
+				<div class="mt-2.5">
+					<Tooltip content={user.status_message}>
+						<div class="flex min-w-0 items-start gap-1.5 text-gray-700 dark:text-gray-300">
+							{#if user.status_emoji}
+								<div class="flex h-4 shrink-0 items-center">
+									<Emoji className="size-3.5" shortCode={user.status_emoji} />
+								</div>
+							{/if}
+							{#if user.status_message}
+								<div class="min-w-0 line-clamp-2 text-left leading-4">{user.status_message}</div>
+							{/if}
+						</div>
+					</Tooltip>
+				</div>
+			{/if}
+
+			{#if user.bio}
+				<div class="mt-2">
+					<Tooltip content={user.bio}>
+						<div class="line-clamp-3 text-left leading-[1.125rem] text-gray-500 dark:text-gray-400">
+							{user.bio}
+						</div>
+					</Tooltip>
+				</div>
+			{/if}
+
+			{#if (user.groups ?? []).length > 0}
+				<div class="mt-2 flex max-h-16 flex-wrap gap-1 overflow-y-auto scrollbar-hover">
+					{#each user.groups as group}
+						<span
+							class="max-w-full break-words rounded-md bg-gray-50 px-1.5 py-0.5 text-[0.6875rem] leading-4 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400"
+						>
+							{group.name}
+						</span>
+					{/each}
+				</div>
+			{/if}
 		</div>
 
-		{#if user?.status_emoji || user?.status_message}
-			<div class="mx-2 mt-2">
-				<Tooltip content={user?.status_message}>
-					<div
-						class="w-full gap-2 px-2.5 py-1.5 rounded-xl bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs flex items-center"
-					>
-						{#if user?.status_emoji}
-							<div class=" self-center shrink-0">
-								<Emoji className="size-4" shortCode={user?.status_emoji} />
-							</div>
-						{/if}
-						<div class=" self-center line-clamp-2 flex-1 text-left">
-							{user?.status_message}
-						</div>
-					</div>
-				</Tooltip>
-			</div>
-		{/if}
-
-		{#if user?.bio}
-			<div class="mx-3.5 mt-2">
-				<Tooltip content={user?.bio}>
-					<div class=" self-center line-clamp-3 flex-1 text-left text-xs">
-						{user?.bio}
-					</div>
-				</Tooltip>
-			</div>
-		{/if}
-
-		{#if (user?.groups ?? []).length > 0}
-			<div class="mx-3.5 mt-2 flex flex-wrap gap-0.5 max-h-20 overflow-y-auto">
-				{#each user.groups as group}
-					<div
-						class="px-1.5 py-0.5 rounded-lg bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs"
-					>
-						{group.name}
-					</div>
-				{/each}
-			</div>
-		{/if}
-
 		{#if $_user?.id !== user.id}
-			<hr class="border-gray-100/50 dark:border-gray-800/50 my-2.5" />
-
-			<div class=" flex flex-col w-full px-2.5 items-center">
+			<div class="border-t border-gray-50/60 p-1.5 dark:border-gray-800/30">
 				<button
-					class="w-full text-left px-3 py-1.5 rounded-xl border border-gray-100/50 dark:border-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-850 transition flex items-center gap-2 text-sm"
+					class="flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left text-xs text-gray-700 transition-colors hover:bg-gray-50/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 dark:text-gray-300 dark:hover:bg-gray-800/60"
 					type="button"
-					on:click={() => {
-						directMessageHandler();
-					}}
+					on:click={directMessageHandler}
 				>
-					<div>
-						<ChatBubbleOval className="size-4" />
-					</div>
-
-					<div class="font-normal">
-						{$i18n.t('Message')}
-					</div>
+					<ChatBubbleOval className="size-3.5 shrink-0" />
+					<span>{$i18n.t('Message')}</span>
 				</button>
 			</div>
 		{/if}
diff --git a/src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte b/src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte
index 769db40db1..13d9094cf3 100644
--- a/src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte
+++ b/src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte
@@ -41,7 +41,7 @@
 {#if user}
 	<LinkPreview.Portal>
 		<LinkPreview.Content
-			class="w-[16.25rem] rounded-2xl border border-gray-100  dark:border-gray-800 z-[9999] bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
+			class="z-[9999] w-60 max-w-[calc(100vw-1.5rem)] max-h-[calc(100dvh-1.5rem)] overflow-y-auto rounded-xl bg-white font-sans text-gray-900 shadow-[0_16px_40px_-28px_rgba(0,0,0,0.55)] ring-1 ring-black/5 dark:bg-gray-850 dark:text-gray-100 dark:ring-white/10"
 			{side}
 			{align}
 			{sideOffset}