diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 20eab5b6f..22e89e55e 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -316,9 +316,9 @@
 			</div>
 		</div>
 	</div>
-	<div class="bg-white dark:bg-gray-800">
+	<div class="bg-white dark:bg-gray-900">
 		<div class="max-w-3xl px-2.5 -mb-0.5 mx-auto inset-x-0">
-			<div class="bg-gradient-to-t from-white dark:from-gray-800 from-40% pb-2">
+			<div class=" pb-2">
 				<input
 					bind:this={filesInputElement}
 					bind:files={inputFiles}
@@ -361,7 +361,7 @@
 					}}
 				/>
 				<form
-					class=" flex flex-col relative w-full rounded-xl border dark:border-gray-600 bg-white dark:bg-gray-800 dark:text-gray-100"
+					class=" flex flex-col relative w-full rounded-xl border dark:border-gray-600 bg-white dark:bg-gray-900 dark:text-gray-100"
 					on:submit|preventDefault={() => {
 						submitPrompt(prompt, user);
 					}}
@@ -530,7 +530,7 @@
 
 						<textarea
 							id="chat-textarea"
-							class=" dark:bg-gray-800 dark:text-gray-100 outline-none w-full py-3 px-2 {fileUploadEnabled
+							class=" dark:bg-gray-900 dark:text-gray-100 outline-none w-full py-3 px-2 {fileUploadEnabled
 								? ''
 								: ' pl-4'} rounded-xl resize-none h-[48px]"
 							placeholder={chatInputPlaceholder !== ''
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index e829aeb3a..31ef619ec 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -68,7 +68,7 @@
 <ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} />
 <nav
 	id="nav"
-	class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30"
+	class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-900/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30"
 >
 	<div class=" flex max-w-3xl w-full mx-auto px-3">
 		<div class="flex items-center w-full max-w-full">
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index c7839d93f..17713b2bb 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -351,7 +351,7 @@
 		{/if}
 
 		<div
-			class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 min-h-screen overflow-auto flex flex-row"
+			class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 min-h-screen overflow-auto flex flex-row"
 		>
 			<Sidebar />
 			<SettingsModal bind:show={$showSettings} />
diff --git a/tailwind.config.js b/tailwind.config.js
index b97b22db0..4a2143191 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,17 +6,19 @@ export default {
 		extend: {
 			colors: {
 				gray: {
-					50: '#f7f7f8',
-					100: '#ececf1',
-					200: '#d9d9e3',
-					300: '#c5c5d2',
-					400: '#acacbe',
-					500: '#8e8ea0',
-					600: '#565869',
-					700: '#40414f',
-					800: '#343541',
-					900: '#202123',
-					950: '#050509'
+					50: '#f9f9f9',
+					100: '#ececec',
+					200: '#e3e3e3',
+					300: '#cdcdcd',
+					400: '#b4b4b4',
+					500: '#9b9b9b',
+					600: '#676767',
+					700: '#4e4e4e',
+					800: '#333',
+					850: '#262626',
+
+					900: '#171717',
+					950: '#0d0d0d'
 				}
 			},
 			typography: {