From 9499587c33846ff94c593e1f4a7e78e16a54a9f8 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 04:25:51 -0400
Subject: [PATCH] refac

---
 src/lib/components/AddConnectionModal.svelte  | 10 +++---
 .../components/AddTerminalServerModal.svelte  | 33 +++++++++++++------
 src/lib/components/AddToolServerModal.svelte  | 10 +++---
 src/lib/components/AutomationModal.svelte     |  6 ++--
 src/lib/components/ChangelogModal.svelte      |  8 +++--
 src/lib/components/ImportModal.svelte         |  8 ++---
 .../Analytics/AnalyticsModelModal.svelte      | 12 ++++---
 .../admin/Evaluations/FeedbackModal.svelte    | 12 ++++---
 .../admin/Evaluations/LeaderboardModal.svelte | 12 ++++---
 .../Connections/ManageOllamaModal.svelte      | 10 +++---
 .../Evaluations/ArenaModelModal.svelte        |  8 ++---
 .../components/admin/Settings/Events.svelte   | 19 +++++++----
 .../admin/Settings/ExternalKnowledge.svelte   | 12 +++----
 .../Settings/Models/ManageModelsModal.svelte  |  8 ++---
 .../Settings/Models/ModelSettingsModal.svelte |  8 ++---
 .../components/admin/UserPreviewModal.svelte  |  6 ++--
 .../admin/Users/Groups/EditGroupModal.svelte  |  8 ++---
 .../admin/Users/UserList/AddUserModal.svelte  |  8 ++---
 .../admin/Users/UserList/EditUserModal.svelte |  8 ++---
 .../calendar/CreateCalendarModal.svelte       |  6 ++--
 .../channel/ChannelInfoModal.svelte           |  6 ++--
 .../ChannelInfoModal/AddMembersModal.svelte   |  6 ++--
 .../channel/PinnedMessagesModal.svelte        |  6 ++--
 .../components/channel/WebhooksModal.svelte   |  9 +++--
 .../MessageInput/AttachWebpageModal.svelte    |  8 ++---
 .../MessageInput/InputVariablesModal.svelte   |  8 ++---
 .../Messages/Citations/CitationModal.svelte   |  6 ++--
 .../Messages/Citations/CitationsModal.svelte  |  8 ++---
 .../chat/Messages/CodeExecutionModal.svelte   |  8 ++---
 src/lib/components/chat/Navbar.svelte         |  2 +-
 .../ManageFloatingActionButtonsModal.svelte   |  8 ++---
 .../ManageImageCompressionModal.svelte        |  8 ++---
 .../Personalization/ManageModal.svelte        | 13 +++++---
 .../Personalization/MemoryModal.svelte        | 11 ++++---
 .../chat/Settings/SyncStatsModal.svelte       |  8 ++---
 src/lib/components/chat/ShareChatModal.svelte |  8 ++---
 src/lib/components/chat/SkillsModal.svelte    |  8 ++---
 .../components/chat/ToolServersModal.svelte   |  8 ++---
 src/lib/components/layout/ChatsModal.svelte   | 14 ++++----
 src/lib/components/layout/FilesModal.svelte   | 14 ++++----
 .../layout/Sidebar/ChannelModal.svelte        |  8 ++---
 .../layout/Sidebar/Folders/FolderModal.svelte |  8 ++---
 .../Sidebar/Folders/FolderShareModal.svelte   |  6 ++--
 .../layout/Sidebar/UserStatusModal.svelte     |  8 ++---
 src/lib/components/playground/Chat.svelte     |  8 ++---
 .../components/playground/Completions.svelte  |  2 +-
 src/lib/components/playground/Images.svelte   |  2 +-
 .../KnowledgeBase/NewDirectoryModal.svelte    |  6 ++--
 .../workspace/Prompts/PromptEditor.svelte     | 10 +++---
 .../workspace/common/ManifestModal.svelte     |  8 ++---
 50 files changed, 243 insertions(+), 202 deletions(-)

diff --git a/src/lib/components/AddConnectionModal.svelte b/src/lib/components/AddConnectionModal.svelte
index 08ee96cf4f..a5a8375853 100644
--- a/src/lib/components/AddConnectionModal.svelte
+++ b/src/lib/components/AddConnectionModal.svelte
@@ -248,8 +248,8 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-1.5">
-			<h1 class="text-lg font-normal self-center ">
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<h1 class="text-sm font-medium self-center">
 				{#if edit}
 					{$i18n.t('Edit Connection')}
 				{:else}
@@ -257,13 +257,13 @@
 				{/if}
 			</h1>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close modal')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
@@ -338,7 +338,7 @@
 
 							<Tooltip content={$i18n.t('Verify Connection')} className="self-end -mb-1">
 								<button
-									class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
+									class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
 									on:click={() => {
 										verifyHandler();
 									}}
diff --git a/src/lib/components/AddTerminalServerModal.svelte b/src/lib/components/AddTerminalServerModal.svelte
index 35d5913715..b77bce529e 100644
--- a/src/lib/components/AddTerminalServerModal.svelte
+++ b/src/lib/components/AddTerminalServerModal.svelte
@@ -138,13 +138,22 @@
 				if (error?.status !== 404) throw error;
 			}
 
-			const lifecycle = await getOrchestratorLifecycle(localStorage.token, url, key, policyId, auth_type);
+			const lifecycle = await getOrchestratorLifecycle(
+				localStorage.token,
+				url,
+				key,
+				policyId,
+				auth_type
+			);
 			const data = policy?.data ?? {};
 			policyImage = data.image ?? '';
 			policyIdleTimeout = data.idle_timeout_minutes ?? 30;
 			policyStorage = data.storage ? 'persistent' : 'ephemeral';
 			policyStorageSize = data.storage ?? '5Gi';
-			policyEnvPairs = Object.entries(data.env ?? {}).map(([key, value]) => ({ key, value: String(value) }));
+			policyEnvPairs = Object.entries(data.env ?? {}).map(([key, value]) => ({
+				key,
+				value: String(value)
+			}));
 			policyCpu = data.cpu_limit ?? '1';
 			policyMemory = data.memory_limit ?? '1Gi';
 			lifecycleJson = stringifyJson(lifecycle?.data);
@@ -358,8 +367,8 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class="flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
-			<h1 class="text-lg font-normal self-center ">
+		<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<h1 class="text-sm font-medium self-center">
 				{#if edit}
 					{$i18n.t('Edit Terminal Connection')}
 				{:else}
@@ -368,13 +377,13 @@
 			</h1>
 
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
@@ -452,7 +461,7 @@
 
 							<Tooltip content={$i18n.t('Verify Connection')} className="self-end -mb-1">
 								<button
-									class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
+									class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
 									on:click={() => {
 										verifyHandler();
 									}}
@@ -527,7 +536,9 @@
 							{#if loadingPolicy}
 								<div class="mt-2 text-xs text-gray-500">{$i18n.t('Loading policy...')}</div>
 							{:else if policyLoadError}
-								<div class="mt-2 text-xs text-red-600 dark:text-red-400">{$i18n.t('Failed to load policy: {{error}}', { error: policyLoadError })}</div>
+								<div class="mt-2 text-xs text-red-600 dark:text-red-400">
+									{$i18n.t('Failed to load policy: {{error}}', { error: policyLoadError })}
+								</div>
 							{/if}
 
 							<div class="flex gap-2 mt-2">
@@ -715,7 +726,7 @@
 								</div>
 							</div>
 
-								<div class="flex flex-wrap items-center justify-between gap-2 mt-2">
+							<div class="flex flex-wrap items-center justify-between gap-2 mt-2">
 								<div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
 									<label class="flex items-center gap-1.5">
 										<input type="checkbox" bind:checked={refreshOnlyIdle} />
@@ -727,7 +738,9 @@
 									</label>
 								</div>
 								<div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-									{$i18n.t('Policy changes apply to newly provisioned terminals. Refresh matching terminals to apply them to existing terminals.')}
+									{$i18n.t(
+										'Policy changes apply to newly provisioned terminals. Refresh matching terminals to apply them to existing terminals.'
+									)}
 								</div>
 								<button
 									type="button"
diff --git a/src/lib/components/AddToolServerModal.svelte b/src/lib/components/AddToolServerModal.svelte
index 539b24ba02..bf3b0bb9f3 100644
--- a/src/lib/components/AddToolServerModal.svelte
+++ b/src/lib/components/AddToolServerModal.svelte
@@ -444,8 +444,8 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
-			<h1 class=" text-lg font-normal self-center ">
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<h1 class=" text-sm font-medium self-center">
 				{#if edit}
 					{$i18n.t('Edit Connection')}
 				{:else}
@@ -470,13 +470,13 @@
 					</button>
 				</div>
 				<button
-					class="self-center"
+					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 					aria-label={$i18n.t('Close Configure Connection Modal')}
 					on:click={() => {
 						show = false;
 					}}
 				>
-					<XMark className={'size-5'} />
+					<XMark className={'size-4'} />
 				</button>
 			</div>
 		</div>
@@ -622,7 +622,7 @@
 										className="shrink-0 flex items-center mr-1"
 									>
 										<button
-											class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
+											class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
 											on:click={() => {
 												verifyHandler();
 											}}
diff --git a/src/lib/components/AutomationModal.svelte b/src/lib/components/AutomationModal.svelte
index 7010ca631f..d6dd0ab176 100644
--- a/src/lib/components/AutomationModal.svelte
+++ b/src/lib/components/AutomationModal.svelte
@@ -110,9 +110,9 @@
 <Modal size="md" bind:show>
 	<div>
 		<!-- Header -->
-		<div class="flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
+		<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
 			<input
-				class="w-full text-lg font-normal bg-transparent outline-hidden  placeholder:text-gray-300 dark:placeholder:text-gray-700"
+				class="w-full text-sm font-medium bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
 				type="text"
 				bind:value={name}
 				placeholder={$i18n.t('Automation title')}
@@ -122,7 +122,7 @@
 				aria-label={$i18n.t('Close')}
 				on:click={() => (show = false)}
 			>
-				<XMark className="size-5" />
+				<XMark className="size-4" />
 			</button>
 		</div>
 
diff --git a/src/lib/components/ChangelogModal.svelte b/src/lib/components/ChangelogModal.svelte
index 104240e47f..ada9d122d2 100644
--- a/src/lib/components/ChangelogModal.svelte
+++ b/src/lib/components/ChangelogModal.svelte
@@ -43,8 +43,12 @@
 				{$WEBUI_NAME}
 				<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
 			</h2>
-			<button class="self-center" on:click={closeModal} aria-label={$i18n.t('Close')}>
-				<XMark className={'size-5'} />
+			<button
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				on:click={closeModal}
+				aria-label={$i18n.t('Close')}
+			>
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 		<div class="flex items-center mt-1">
diff --git a/src/lib/components/ImportModal.svelte b/src/lib/components/ImportModal.svelte
index 35dbd075b6..e0192e165d 100644
--- a/src/lib/components/ImportModal.svelte
+++ b/src/lib/components/ImportModal.svelte
@@ -63,16 +63,16 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Import')}</div>
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">{$i18n.t('Import')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/admin/Analytics/AnalyticsModelModal.svelte b/src/lib/components/admin/Analytics/AnalyticsModelModal.svelte
index bcc1faaa1f..d9cddee73a 100644
--- a/src/lib/components/admin/Analytics/AnalyticsModelModal.svelte
+++ b/src/lib/components/admin/Analytics/AnalyticsModelModal.svelte
@@ -178,14 +178,18 @@
 
 <Modal size="md" bind:show>
 	{#if model}
-		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
+		<div class="flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
 			<Tooltip content={`${model.name} (${model.id})`} placement="top-start">
-				<div class="text-lg font-normal self-center line-clamp-1">
+				<div class="text-sm font-medium self-center line-clamp-1">
 					{model.name}
 				</div>
 			</Tooltip>
-			<button class="self-center" on:click={close} aria-label="Close">
-				<XMark className={'size-5'} />
+			<button
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				on:click={close}
+				aria-label="Close"
+			>
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/admin/Evaluations/FeedbackModal.svelte b/src/lib/components/admin/Evaluations/FeedbackModal.svelte
index 7cb4d5c290..c959ff882d 100644
--- a/src/lib/components/admin/Evaluations/FeedbackModal.svelte
+++ b/src/lib/components/admin/Evaluations/FeedbackModal.svelte
@@ -42,12 +42,16 @@
 <Modal size="sm" bind:show>
 	{#if selectedFeedback}
 		<div>
-			<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-				<div class="text-lg font-normal self-center">
+			<div class="flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+				<div class="text-sm font-medium self-center">
 					{$i18n.t('Feedback Details')}
 				</div>
-				<button class="self-center" on:click={close} aria-label="Close">
-					<XMark className={'size-5'} />
+				<button
+					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+					on:click={close}
+					aria-label="Close"
+				>
+					<XMark className={'size-4'} />
 				</button>
 			</div>
 
diff --git a/src/lib/components/admin/Evaluations/LeaderboardModal.svelte b/src/lib/components/admin/Evaluations/LeaderboardModal.svelte
index 94c0274309..2a89406c15 100644
--- a/src/lib/components/admin/Evaluations/LeaderboardModal.svelte
+++ b/src/lib/components/admin/Evaluations/LeaderboardModal.svelte
@@ -61,14 +61,18 @@
 
 <Modal size="md" bind:show>
 	{#if model}
-		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
+		<div class="flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
 			<Tooltip content={`${model.name} (${model.id})`} placement="top-start">
-				<div class="text-lg font-normal self-center line-clamp-1">
+				<div class="text-sm font-medium self-center line-clamp-1">
 					{model.name}
 				</div>
 			</Tooltip>
-			<button class="self-center" on:click={close} aria-label="Close">
-				<XMark className={'size-5'} />
+			<button
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				on:click={close}
+				aria-label="Close"
+			>
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 		<div class="px-5 pb-4 dark:text-gray-200">
diff --git a/src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte b/src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte
index ce6d77b218..8fb7c8803b 100644
--- a/src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte
+++ b/src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte
@@ -13,21 +13,19 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
-			<div
-				class="flex w-full justify-between items-center text-lg font-normal self-center "
-			>
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<div class="flex w-full justify-between items-center text-sm font-medium self-center">
 				<div class=" shrink-0">
 					{$i18n.t('Manage Ollama')}
 				</div>
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte b/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
index d073793250..19895aebbd 100644
--- a/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
+++ b/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
@@ -130,8 +130,8 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
-			<div class=" text-lg font-normal self-center ">
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">
 				{#if edit}
 					{$i18n.t('Edit Arena Model')}
 				{:else}
@@ -139,12 +139,12 @@
 				{/if}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/admin/Settings/Events.svelte b/src/lib/components/admin/Settings/Events.svelte
index 8e334f6b4e..980ba276cb 100644
--- a/src/lib/components/admin/Settings/Events.svelte
+++ b/src/lib/components/admin/Settings/Events.svelte
@@ -391,13 +391,18 @@
 
 <Modal bind:show={showWebhookModal} size="sm">
 	<div>
-		<div class="flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
-			<h1 class="text-lg font-normal self-center">
+		<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<h1 class="text-sm font-medium self-center">
 				{editing ? $i18n.t('Edit webhook') : $i18n.t('Add webhook')}
 			</h1>
 
-			<button class="self-center" aria-label={$i18n.t('Close')} type="button" on:click={resetForm}>
-				<XMark className="size-5" />
+			<button
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				aria-label={$i18n.t('Close')}
+				type="button"
+				on:click={resetForm}
+			>
+				<XMark className="size-4" />
 			</button>
 		</div>
 
@@ -531,7 +536,7 @@
 										{#each targetGroupResults as group}
 											<button
 												type="button"
-												class="w-full flex items-center justify-between gap-2 px-3 py-1.5 text-xs text-left hover:bg-gray-50 dark:hover:bg-gray-850"
+												class="w-full flex items-center justify-between gap-2 px-3 py-1.5 text-xs text-left hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
 												on:click={() => addTargetGroup(group)}
 											>
 												<span class="truncate">{group.name}</span>
@@ -542,7 +547,7 @@
 										{#each targetUserResults as user}
 											<button
 												type="button"
-												class="w-full flex items-center justify-between gap-2 px-3 py-1.5 text-xs text-left hover:bg-gray-50 dark:hover:bg-gray-850"
+												class="w-full flex items-center justify-between gap-2 px-3 py-1.5 text-xs text-left hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
 												on:click={() => addTargetUser(user)}
 											>
 												<span class="truncate">
@@ -721,7 +726,7 @@
 					<div class="flex gap-1 items-center">
 						<Tooltip content={$i18n.t('Configure')}>
 							<button
-								class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
+								class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
 								on:click={() => editWebhook(webhook)}
 								type="button"
 							>
diff --git a/src/lib/components/admin/Settings/ExternalKnowledge.svelte b/src/lib/components/admin/Settings/ExternalKnowledge.svelte
index 27f08e2cdd..54605fa66f 100644
--- a/src/lib/components/admin/Settings/ExternalKnowledge.svelte
+++ b/src/lib/components/admin/Settings/ExternalKnowledge.svelte
@@ -410,13 +410,13 @@
 
 <Modal bind:show={showSourceModal} size="sm">
 	<div>
-		<div class="flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
-			<h1 class="text-lg font-normal self-center">
+		<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<h1 class="text-sm font-medium self-center">
 				{editingItem ? $i18n.t('Edit Knowledge Connection') : $i18n.t('Add Knowledge Connection')}
 			</h1>
 
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				type="button"
 				on:click={() => {
@@ -424,7 +424,7 @@
 					resetForm();
 				}}
 			>
-				<XMark className="size-5" />
+				<XMark className="size-4" />
 			</button>
 		</div>
 
@@ -724,7 +724,7 @@
 										className="shrink-0 flex items-center mr-1"
 									>
 										<button
-											class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
+											class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
 											type="button"
 											on:click={testSource}
 											disabled={testing}
@@ -841,7 +841,7 @@
 				<div class="flex gap-1 items-center">
 					<Tooltip content={$i18n.t('Configure')}>
 						<button
-							class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
+							class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
 							type="button"
 							disabled={!connection}
 							aria-label={$i18n.t('Configure')}
diff --git a/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte b/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
index 466339f61f..04f28cc115 100644
--- a/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
+++ b/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
@@ -39,17 +39,17 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4">
-			<div class=" text-lg font-normal self-center ">
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">
 				{$i18n.t('Manage Models')}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte b/src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte
index b8d7ad38ce..4d3684c606 100644
--- a/src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte
+++ b/src/lib/components/admin/Settings/Models/ModelSettingsModal.svelte
@@ -165,17 +165,17 @@
 
 <Modal size="lg" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
-			<div class=" text-lg font-normal self-center ">
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">
 				{$i18n.t('Settings')}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/admin/UserPreviewModal.svelte b/src/lib/components/admin/UserPreviewModal.svelte
index b24b3bcf70..870746aad0 100644
--- a/src/lib/components/admin/UserPreviewModal.svelte
+++ b/src/lib/components/admin/UserPreviewModal.svelte
@@ -34,8 +34,8 @@
 
 <Modal size="md" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
-			<div class=" text-lg font-normal self-center  min-w-0 truncate">
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 mb-1">
+			<div class=" text-sm font-medium self-center min-w-0 truncate">
 				{$i18n.t('User Preview')}
 				{#if userName}
 					<span class="text-sm font-normal text-gray-500 ml-1">{userName}</span>
@@ -47,7 +47,7 @@
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/admin/Users/Groups/EditGroupModal.svelte b/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
index 995c892cee..61fdf15762 100644
--- a/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
+++ b/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
@@ -133,8 +133,8 @@
 
 <Modal size="lg" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
-			<div class=" text-lg font-normal self-center ">
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 mb-1">
+			<div class=" text-sm font-medium self-center">
 				{#if custom}
 					{#if edit}
 						{$i18n.t('Edit User Group')}
@@ -146,12 +146,12 @@
 				{/if}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/admin/Users/UserList/AddUserModal.svelte b/src/lib/components/admin/Users/UserList/AddUserModal.svelte
index d80210be77..01779626c8 100644
--- a/src/lib/components/admin/Users/UserList/AddUserModal.svelte
+++ b/src/lib/components/admin/Users/UserList/AddUserModal.svelte
@@ -143,16 +143,16 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Add User')}</div>
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">{$i18n.t('Add User')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/admin/Users/UserList/EditUserModal.svelte b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
index 37d9d411eb..99352feb7e 100644
--- a/src/lib/components/admin/Users/UserList/EditUserModal.svelte
+++ b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
@@ -68,16 +68,16 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Edit User')}</div>
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">{$i18n.t('Edit User')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/calendar/CreateCalendarModal.svelte b/src/lib/components/calendar/CreateCalendarModal.svelte
index f426839b5b..d1dafd558b 100644
--- a/src/lib/components/calendar/CreateCalendarModal.svelte
+++ b/src/lib/components/calendar/CreateCalendarModal.svelte
@@ -64,14 +64,14 @@
 <Modal size="sm" bind:show>
 	<div>
 		<!-- Header -->
-		<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-2">
+		<div class="flex justify-between items-center dark:text-gray-100 px-4 pt-3 pb-1">
 			<h3 class="text-base font-normal">{$i18n.t('New Calendar')}</h3>
 			<button
 				class="self-center shrink-0 ml-2"
 				aria-label={$i18n.t('Close')}
 				on:click={() => (show = false)}
 			>
-				<XMark className="size-5" />
+				<XMark className="size-4" />
 			</button>
 		</div>
 
@@ -81,7 +81,7 @@
 			<div>
 				<div class="mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
 				<input
-					class="w-full text-sm bg-transparent outline-hidden  placeholder:text-gray-300 dark:placeholder:text-gray-700"
+					class="w-full text-sm bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
 					type="text"
 					bind:value={name}
 					placeholder={$i18n.t('Calendar name')}
diff --git a/src/lib/components/channel/ChannelInfoModal.svelte b/src/lib/components/channel/ChannelInfoModal.svelte
index cd1ee35243..8ce3b47484 100644
--- a/src/lib/components/channel/ChannelInfoModal.svelte
+++ b/src/lib/components/channel/ChannelInfoModal.svelte
@@ -72,7 +72,7 @@
 	<AddMembersModal bind:show={showAddMembersModal} {channel} {onUpdate} />
 	<Modal size="sm" bind:show>
 		<div>
-			<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
+			<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 mb-1">
 				<div class="self-center text-base">
 					<div class="flex items-center gap-0.5 shrink-0">
 						{#if channel?.type === 'dm'}
@@ -95,12 +95,12 @@
 					</div>
 				</div>
 				<button
-					class="self-center"
+					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 					on:click={() => {
 						show = false;
 					}}
 				>
-					<XMark className={'size-5'} />
+					<XMark className={'size-4'} />
 				</button>
 			</div>
 
diff --git a/src/lib/components/channel/ChannelInfoModal/AddMembersModal.svelte b/src/lib/components/channel/ChannelInfoModal/AddMembersModal.svelte
index 0206776c1d..2d2998243b 100644
--- a/src/lib/components/channel/ChannelInfoModal/AddMembersModal.svelte
+++ b/src/lib/components/channel/ChannelInfoModal/AddMembersModal.svelte
@@ -52,19 +52,19 @@
 {#if channel}
 	<Modal size="sm" bind:show>
 		<div>
-			<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
+			<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 mb-1">
 				<div class="self-center text-base">
 					<div class="flex items-center gap-0.5 shrink-0">
 						{$i18n.t('Add Members')}
 					</div>
 				</div>
 				<button
-					class="self-center"
+					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 					on:click={() => {
 						show = false;
 					}}
 				>
-					<XMark className={'size-5'} />
+					<XMark className={'size-4'} />
 				</button>
 			</div>
 
diff --git a/src/lib/components/channel/PinnedMessagesModal.svelte b/src/lib/components/channel/PinnedMessagesModal.svelte
index 3e6832e005..ab171f9f96 100644
--- a/src/lib/components/channel/PinnedMessagesModal.svelte
+++ b/src/lib/components/channel/PinnedMessagesModal.svelte
@@ -69,19 +69,19 @@
 {#if channel}
 	<Modal size="sm" bind:show>
 		<div>
-			<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
+			<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 mb-1">
 				<div class="self-center text-base">
 					<div class="flex items-center gap-0.5 shrink-0">
 						{$i18n.t('Pinned Messages')}
 					</div>
 				</div>
 				<button
-					class="self-center"
+					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 					on:click={() => {
 						show = false;
 					}}
 				>
-					<XMark className={'size-5'} />
+					<XMark className={'size-4'} />
 				</button>
 			</div>
 
diff --git a/src/lib/components/channel/WebhooksModal.svelte b/src/lib/components/channel/WebhooksModal.svelte
index 299a9823d3..2fdc6b842d 100644
--- a/src/lib/components/channel/WebhooksModal.svelte
+++ b/src/lib/components/channel/WebhooksModal.svelte
@@ -99,7 +99,7 @@
 {#if channel}
 	<Modal size="sm" bind:show>
 		<div>
-			<div class="flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
+			<div class="flex justify-between dark:text-gray-100 px-4 pt-3 mb-1">
 				<div class="flex w-full justify-between items-center mr-3">
 					<div class="self-center text-base flex gap-1.5 items-center">
 						<div>{$i18n.t('Webhooks')}</div>
@@ -117,8 +117,11 @@
 					</button>
 				</div>
 
-				<button class="self-center" on:click={() => (show = false)}>
-					<XMark className="size-5" />
+				<button
+					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+					on:click={() => (show = false)}
+				>
+					<XMark className="size-4" />
 				</button>
 			</div>
 
diff --git a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
index fa1be05552..74dd609071 100644
--- a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
+++ b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
@@ -36,18 +36,18 @@
 
 <Modal bind:show size="sm">
 	<div class="flex flex-col h-full">
-		<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-1.5">
-			<h1 class="text-lg font-normal self-center ">
+		<div class="flex justify-between items-center dark:text-gray-100 px-4 pt-3 pb-1">
+			<h1 class="text-sm font-medium self-center">
 				{$i18n.t('Attach Webpage')}
 			</h1>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close modal')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className="size-5" />
+				<XMark className="size-4" />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/MessageInput/InputVariablesModal.svelte b/src/lib/components/chat/MessageInput/InputVariablesModal.svelte
index 854eabd796..b8b75da5d4 100644
--- a/src/lib/components/chat/MessageInput/InputVariablesModal.svelte
+++ b/src/lib/components/chat/MessageInput/InputVariablesModal.svelte
@@ -66,15 +66,15 @@
 
 <Modal bind:show size="md">
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Input Variables')}</div>
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">{$i18n.t('Input Variables')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/Messages/Citations/CitationModal.svelte b/src/lib/components/chat/Messages/Citations/CitationModal.svelte
index 1dae612f11..01a8de686e 100644
--- a/src/lib/components/chat/Messages/Citations/CitationModal.svelte
+++ b/src/lib/components/chat/Messages/Citations/CitationModal.svelte
@@ -98,7 +98,7 @@
 <Modal size="lg" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-4.5 pt-3 pb-2">
-			<div class=" text-lg font-normal self-center flex items-center">
+			<div class=" text-sm font-medium self-center flex items-center">
 				{#if citation?.source?.name}
 					{@const document = mergedDocuments?.[0]}
 					{#if document?.metadata?.file_id || document.source?.url?.includes('http')}
@@ -130,13 +130,13 @@
 				{/if}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close citation modal')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/Messages/Citations/CitationsModal.svelte b/src/lib/components/chat/Messages/Citations/CitationsModal.svelte
index 850ccad055..b43e5cd4ef 100644
--- a/src/lib/components/chat/Messages/Citations/CitationsModal.svelte
+++ b/src/lib/components/chat/Messages/Citations/CitationsModal.svelte
@@ -39,17 +39,17 @@
 
 <Modal size="lg" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class=" text-lg font-normal self-center capitalize">
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center capitalize">
 				{$i18n.t('Citations')}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/Messages/CodeExecutionModal.svelte b/src/lib/components/chat/Messages/CodeExecutionModal.svelte
index 79bc980c19..4b4ee0b7a7 100644
--- a/src/lib/components/chat/Messages/CodeExecutionModal.svelte
+++ b/src/lib/components/chat/Messages/CodeExecutionModal.svelte
@@ -13,8 +13,8 @@
 
 <Modal size="lg" bind:show>
 	<div>
-		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class="text-lg font-normal self-center flex flex-col gap-0.5 capitalize">
+		<div class="flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class="text-sm font-medium self-center flex flex-col gap-0.5 capitalize">
 				{#if codeExecution?.result}
 					<div>
 						{#if codeExecution.result?.error}
@@ -44,13 +44,13 @@
 				</div>
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 					codeExecution = null;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/Navbar.svelte b/src/lib/components/chat/Navbar.svelte
index 7eb720c12f..fd8a46d661 100644
--- a/src/lib/components/chat/Navbar.svelte
+++ b/src/lib/components/chat/Navbar.svelte
@@ -115,7 +115,7 @@
 					class="flex-1 overflow-hidden max-w-full mt-0.5 py-0.5 pl-1 {$showSidebar ? 'ml-1' : ''}"
 				>
 					{#if chat?.id}
-						<div class="flex max-w-full min-w-0 items-center gap-2">
+						<div class="flex max-w-full min-w-0 items-center gap-2 mr-2">
 							<div
 								class="min-w-0 truncate py-1 text-left text-[15px] font-normal text-gray-700 dark:text-gray-300"
 							>
diff --git a/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte b/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte
index 504c7ebabd..858f5d1a1e 100644
--- a/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte
+++ b/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte
@@ -29,18 +29,18 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-1.5">
-			<h1 class="text-lg font-normal self-center ">
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<h1 class="text-sm font-medium self-center">
 				{$i18n.t('Quick Actions')}
 			</h1>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close modal')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/Settings/Interface/ManageImageCompressionModal.svelte b/src/lib/components/chat/Settings/Interface/ManageImageCompressionModal.svelte
index 058bbc72a5..8d62e94a43 100644
--- a/src/lib/components/chat/Settings/Interface/ManageImageCompressionModal.svelte
+++ b/src/lib/components/chat/Settings/Interface/ManageImageCompressionModal.svelte
@@ -25,18 +25,18 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-1.5">
-			<h1 class="text-lg font-normal self-center ">
+		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
+			<h1 class="text-sm font-medium self-center">
 				{$i18n.t('Manage')}
 			</h1>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close modal')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/Settings/Personalization/ManageModal.svelte b/src/lib/components/chat/Settings/Personalization/ManageModal.svelte
index c980f12156..41710cb31b 100644
--- a/src/lib/components/chat/Settings/Personalization/ManageModal.svelte
+++ b/src/lib/components/chat/Settings/Personalization/ManageModal.svelte
@@ -104,19 +104,22 @@
 
 <Modal size="lg" bind:show>
 	<div>
-		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
+		<div class="flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
 			<div class="flex items-center gap-2">
-				<div class="text-lg font-normal">{$i18n.t('Memory')}</div>
+				<div class="text-sm font-medium">{$i18n.t('Memory')}</div>
 
 				{#if !loading}
-					<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
+					<div class="text-sm font-medium text-gray-500 dark:text-gray-500">
 						{memories.length}
 					</div>
 				{/if}
 			</div>
 
-			<button class="self-center" on:click={() => (show = false)}>
-				<XMark className="size-5" />
+			<button
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				on:click={() => (show = false)}
+			>
+				<XMark className="size-4" />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte b/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
index edbfae97d7..7b30c1eb13 100644
--- a/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
+++ b/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
@@ -53,16 +53,19 @@
 
 <Modal bind:show size="sm">
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class=" text-lg font-normal self-center">
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">
 				{#if edit}
 					{$i18n.t('Edit Memory')}
 				{:else}
 					{$i18n.t('Add Memory')}
 				{/if}
 			</div>
-			<button class="self-center" on:click={() => (show = false)}>
-				<XMark className={'size-5'} />
+			<button
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				on:click={() => (show = false)}
+			>
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/Settings/SyncStatsModal.svelte b/src/lib/components/chat/Settings/SyncStatsModal.svelte
index 375356bc96..dd24667f87 100644
--- a/src/lib/components/chat/Settings/SyncStatsModal.svelte
+++ b/src/lib/components/chat/Settings/SyncStatsModal.svelte
@@ -354,17 +354,17 @@
 				</div>
 			</div>
 		{:else}
-			<div class="flex justify-between px-5 pt-4 pb-0.5">
-				<div class="text-lg font-normal self-center">{$i18n.t('Sync Usage Stats')}</div>
+			<div class="flex justify-between px-4 pt-3 pb-1">
+				<div class="text-sm font-medium self-center">{$i18n.t('Sync Usage Stats')}</div>
 				<button
-					class="self-center"
+					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 					aria-label={$i18n.t('Close modal')}
 					on:click={() => {
 						show = false;
 					}}
 					disabled={syncing}
 				>
-					<XMark className={'size-5'} />
+					<XMark className={'size-4'} />
 				</button>
 			</div>
 
diff --git a/src/lib/components/chat/ShareChatModal.svelte b/src/lib/components/chat/ShareChatModal.svelte
index e6b3e8225d..842808b439 100644
--- a/src/lib/components/chat/ShareChatModal.svelte
+++ b/src/lib/components/chat/ShareChatModal.svelte
@@ -111,16 +111,16 @@
 
 <Modal bind:show size="md">
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-0.5">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Share Chat')}</div>
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">{$i18n.t('Share Chat')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/SkillsModal.svelte b/src/lib/components/chat/SkillsModal.svelte
index 7664ba99a7..0f5f111566 100644
--- a/src/lib/components/chat/SkillsModal.svelte
+++ b/src/lib/components/chat/SkillsModal.svelte
@@ -18,16 +18,16 @@
 
 <Modal bind:show size="md">
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-0.5">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Available Skills')}</div>
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">{$i18n.t('Available Skills')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/ToolServersModal.svelte b/src/lib/components/chat/ToolServersModal.svelte
index bbce9edb34..2d66f2965f 100644
--- a/src/lib/components/chat/ToolServersModal.svelte
+++ b/src/lib/components/chat/ToolServersModal.svelte
@@ -33,16 +33,16 @@
 
 <Modal bind:show size="md">
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-0.5">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Available Tools')}</div>
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">{$i18n.t('Available Tools')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/layout/ChatsModal.svelte b/src/lib/components/layout/ChatsModal.svelte
index b717ac5d4c..a02deee264 100644
--- a/src/lib/components/layout/ChatsModal.svelte
+++ b/src/lib/components/layout/ChatsModal.svelte
@@ -92,21 +92,21 @@
 
 <Modal size="lg" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
-			<div class="flex items-center gap-2 text-lg font-normal self-center">
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class="flex items-center gap-2 text-sm font-medium self-center">
 				<div>{title}</div>
 				{#if count !== null}
-					<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
+					<div class="text-sm font-medium text-gray-500 dark:text-gray-500">
 						{count}
 					</div>
 				{:else if chatList}
-					<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
+					<div class="text-sm font-medium text-gray-500 dark:text-gray-500">
 						{chatList.length}
 					</div>
 				{/if}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
@@ -115,7 +115,7 @@
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 20 20"
 					fill="currentColor"
-					class="w-5 h-5"
+					class="size-4"
 				>
 					<path
 						fill-rule="evenodd"
@@ -267,7 +267,7 @@
 								{/if}
 
 								<div
-									class=" w-full flex items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850"
+									class=" w-full flex items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
 									draggable="false"
 								>
 									{#if showUserInfo && chat.user_id}
diff --git a/src/lib/components/layout/FilesModal.svelte b/src/lib/components/layout/FilesModal.svelte
index e7e12bc1bc..d8a69d3f1d 100644
--- a/src/lib/components/layout/FilesModal.svelte
+++ b/src/lib/components/layout/FilesModal.svelte
@@ -202,21 +202,21 @@
 
 <Modal size="xl" bind:show>
 	<div>
-		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
-			<div class="flex items-center gap-2 text-lg font-normal self-center">
+		<div class="flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class="flex items-center gap-2 text-sm font-medium self-center">
 				<div>{$i18n.t('Files')}</div>
 				{#if query && files}
-					<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
+					<div class="text-sm font-medium text-gray-500 dark:text-gray-500">
 						{files.length}
 					</div>
 				{:else if fileCount !== null}
-					<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
+					<div class="text-sm font-medium text-gray-500 dark:text-gray-500">
 						{fileCount}
 					</div>
 				{/if}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
@@ -225,7 +225,7 @@
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 20 20"
 					fill="currentColor"
-					class="w-5 h-5"
+					class="size-4"
 				>
 					<path
 						fill-rule="evenodd"
@@ -338,7 +338,7 @@
 
 							{#each files as file (file.id)}
 								<div
-									class="w-full flex justify-between items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850 cursor-pointer"
+									class="w-full flex justify-between items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50/70 dark:hover:bg-gray-850/50 cursor-pointer"
 									on:click={() => openFileViewer(file)}
 								>
 									<div class="basis-3/5 min-w-0">
diff --git a/src/lib/components/layout/Sidebar/ChannelModal.svelte b/src/lib/components/layout/Sidebar/ChannelModal.svelte
index d70d226692..0d17f8e116 100644
--- a/src/lib/components/layout/Sidebar/ChannelModal.svelte
+++ b/src/lib/components/layout/Sidebar/ChannelModal.svelte
@@ -140,8 +140,8 @@
 
 <Modal size="md" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
-			<div class=" text-lg font-normal self-center">
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">
 				{#if edit}
 					{$i18n.t('Edit Channel')}
 				{:else}
@@ -149,12 +149,12 @@
 				{/if}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
index 0baf71d86d..dc7d7057b3 100644
--- a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
+++ b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
@@ -110,8 +110,8 @@
 
 <Modal size="md" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
-			<div class=" text-lg font-normal self-center">
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">
 				{#if edit}
 					{$i18n.t('Edit Folder')}
 				{:else}
@@ -119,12 +119,12 @@
 				{/if}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/layout/Sidebar/Folders/FolderShareModal.svelte b/src/lib/components/layout/Sidebar/Folders/FolderShareModal.svelte
index f4fd8d31ea..9eeb3411ce 100644
--- a/src/lib/components/layout/Sidebar/Folders/FolderShareModal.svelte
+++ b/src/lib/components/layout/Sidebar/Folders/FolderShareModal.svelte
@@ -57,16 +57,16 @@
 <Modal size="sm" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-100 px-5 pt-3 pb-1">
-			<div class=" text-lg font-normal self-center ">
+			<div class=" text-sm font-medium self-center">
 				{$i18n.t('Share')}: {folder?.name ?? ''}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/layout/Sidebar/UserStatusModal.svelte b/src/lib/components/layout/Sidebar/UserStatusModal.svelte
index 2150a40c44..eb2002ad1e 100644
--- a/src/lib/components/layout/Sidebar/UserStatusModal.svelte
+++ b/src/lib/components/layout/Sidebar/UserStatusModal.svelte
@@ -73,17 +73,17 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
-			<div class=" text-lg font-normal self-center">
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">
 				{$i18n.t('Set your status')}
 			</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
diff --git a/src/lib/components/playground/Chat.svelte b/src/lib/components/playground/Chat.svelte
index a4b61c9585..30caaeb987 100644
--- a/src/lib/components/playground/Chat.svelte
+++ b/src/lib/components/playground/Chat.svelte
@@ -320,16 +320,16 @@
 
 <Modal size="sm" bind:show={showControls}>
 	<div class="text-gray-700 dark:text-gray-100">
-		<div class="flex justify-between px-4.5 pt-4.5 pb-2">
-			<div class="text-lg font-normal self-center">{$i18n.t('Controls')}</div>
+		<div class="flex justify-between px-4 pt-3 pb-1">
+			<div class="text-sm font-medium self-center">{$i18n.t('Controls')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					showControls = false;
 				}}
 			>
-				<XMark className="size-5" />
+				<XMark className="size-4" />
 			</button>
 		</div>
 		<div class="px-4.5 pb-5 overflow-y-auto max-h-[70vh]">
diff --git a/src/lib/components/playground/Completions.svelte b/src/lib/components/playground/Completions.svelte
index 2df15e6f10..c5de36ae94 100644
--- a/src/lib/components/playground/Completions.svelte
+++ b/src/lib/components/playground/Completions.svelte
@@ -121,7 +121,7 @@
 
 <div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
 	<div class="mx-auto w-full md:px-0 h-full">
-		<div class=" flex flex-col h-full px-4">
+		<div class=" flex flex-col h-full px-2.5">
 			<div
 				class=" pt-0.5 pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
 				id="messages-container"
diff --git a/src/lib/components/playground/Images.svelte b/src/lib/components/playground/Images.svelte
index 6992564654..9d7d4bb25c 100644
--- a/src/lib/components/playground/Images.svelte
+++ b/src/lib/components/playground/Images.svelte
@@ -123,7 +123,7 @@
 
 <div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
 	<div class="mx-auto w-full md:px-0 h-full">
-		<div class=" flex flex-col h-full px-4">
+		<div class=" flex flex-col h-full px-2.5">
 			<!-- Results Area -->
 			<div
 				class=" pt-0.5 pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase/NewDirectoryModal.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase/NewDirectoryModal.svelte
index a1b171f70a..20f7c7d145 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase/NewDirectoryModal.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase/NewDirectoryModal.svelte
@@ -31,14 +31,14 @@
 <Modal size="sm" bind:show>
 	<div>
 		<!-- Header -->
-		<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-2">
+		<div class="flex justify-between items-center dark:text-gray-100 px-4 pt-3 pb-1">
 			<h3 class="text-base font-normal">{$i18n.t('New Directory')}</h3>
 			<button
 				class="self-center shrink-0 ml-2"
 				aria-label={$i18n.t('Close')}
 				on:click={() => (show = false)}
 			>
-				<XMark className="size-5" />
+				<XMark className="size-4" />
 			</button>
 		</div>
 
@@ -47,7 +47,7 @@
 			<div>
 				<div class="mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
 				<input
-					class="w-full text-sm bg-transparent outline-hidden  placeholder:text-gray-300 dark:placeholder:text-gray-700"
+					class="w-full text-sm bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
 					type="text"
 					bind:value={name}
 					placeholder={$i18n.t('Directory name')}
diff --git a/src/lib/components/workspace/Prompts/PromptEditor.svelte b/src/lib/components/workspace/Prompts/PromptEditor.svelte
index 0647617544..9d1cc86236 100644
--- a/src/lib/components/workspace/Prompts/PromptEditor.svelte
+++ b/src/lib/components/workspace/Prompts/PromptEditor.svelte
@@ -302,15 +302,15 @@
 
 <!-- Edit Modal -->
 <Modal size="lg" bind:show={showEditModal}>
-	<div class="px-5 pt-4 pb-5">
-		<div class="flex justify-between items-center mb-2">
-			<div class="text-lg font-normal">{$i18n.t('Edit Prompt')}</div>
+	<div class="px-4 pt-3 pb-4">
+		<div class="flex justify-between items-center mb-2 dark:text-gray-100">
+			<div class="text-sm font-medium">{$i18n.t('Edit Prompt')}</div>
 			<button
-				class="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
+				class="rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				aria-label={$i18n.t('Close')}
 				on:click={() => (showEditModal = false)}
 			>
-				<XMark className="size-5" />
+				<XMark className="size-4" />
 			</button>
 		</div>
 
diff --git a/src/lib/components/workspace/common/ManifestModal.svelte b/src/lib/components/workspace/common/ManifestModal.svelte
index 3cce367d69..3f194c4cb9 100644
--- a/src/lib/components/workspace/common/ManifestModal.svelte
+++ b/src/lib/components/workspace/common/ManifestModal.svelte
@@ -15,15 +15,15 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Show your support!')}</div>
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
+			<div class=" text-sm font-medium self-center">{$i18n.t('Show your support!')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>