diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx
index a469ae6..57f2ac9 100644
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -25,9 +25,7 @@ export const PlaygroundMessage = (props: Props) => {
 
   return (
     <div
-      className={`group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 ${
-        !props.isBot ? "dark:bg-black" : "bg-gray-50  dark:bg-[#0a0a0a]"
-      }`}>
+      className={`group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 `}>
       <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
         <div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
           <div className="w-8 flex flex-col relative items-end">
diff --git a/src/components/Sidepanel/Chat/empty.tsx b/src/components/Sidepanel/Chat/empty.tsx
index c7fe6cd..7626631 100644
--- a/src/components/Sidepanel/Chat/empty.tsx
+++ b/src/components/Sidepanel/Chat/empty.tsx
@@ -41,7 +41,7 @@ export const EmptySidePanel = () => {
 
   return (
     <div className="mx-auto sm:max-w-md px-4 mt-10">
-      <div className="rounded-lg justify-center items-center flex flex-col border p-8 bg-white dark:bg-black shadow-sm">
+      <div className="rounded-lg justify-center items-center flex flex-col border dark:border-gray-700 p-8 bg-white dark:bg-[#262626] shadow-sm">
         {(ollamaStatus === "pending" || isRefetching) && (
           <div className="inline-flex items-center space-x-2">
             <div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
@@ -98,7 +98,7 @@ export const EmptySidePanel = () => {
                 setSelectedModel(e.target.value)
               }}
               value={selectedModel}
-              className="bg-gray-100 truncate w-full dark:bg-black dark:text-gray-100 rounded-md px-4 py-2 mt-2">
+              className="bg-gray-100 truncate w-full dark:bg-[#171717] dark:text-gray-100 rounded-md px-4 py-2 mt-2">
               <option key="0x" value={""}>
                 Select a model
               </option>
diff --git a/src/components/Sidepanel/Chat/form.tsx b/src/components/Sidepanel/Chat/form.tsx
index 94bf2b8..d2e62db 100644
--- a/src/components/Sidepanel/Chat/form.tsx
+++ b/src/components/Sidepanel/Chat/form.tsx
@@ -57,7 +57,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
   })
 
   return (
-    <div className="p-3 md:p-6 md:bg-white dark:bg-[#171717] border rounded-t-xl border-black/10 dark:border-gray-900/50">
+    <div className="p-3 md:p-6 md:bg-white dark:bg-[#262626] border rounded-t-xl border-black/10 dark:border-gray-700">
       <div className="flex-grow space-y-6 ">
         {chatMode === "normal" && form.values.image && (
           <div className="h-full rounded-md shadow relative">
@@ -71,7 +71,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                 onClick={() => {
                   form.setFieldValue("image", "")
                 }}
-                className="absolute top-2 right-2 bg-white dark:bg-black p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-black dark:text-gray-100">
+                className="absolute top-2 right-2 bg-white dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-black dark:text-gray-100">
                 <XMarkIcon className="h-5 w-5" />
               </button>
             </div>
@@ -92,7 +92,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
               })
             })}
             className="shrink-0 flex-grow  flex items-center ">
-            <div className="flex items-center p-2 rounded-2xl border  bg-gray-100 w-full dark:bg-black dark:border-gray-800">
+            <div className="flex items-center p-2 rounded-2xl border  bg-gray-100 w-full dark:bg-[#262626] dark:border-gray-700">
               <button
                 type="button"
                 onClick={() => {
diff --git a/src/components/Sidepanel/Chat/header.tsx b/src/components/Sidepanel/Chat/header.tsx
index 82d386a..e79945e 100644
--- a/src/components/Sidepanel/Chat/header.tsx
+++ b/src/components/Sidepanel/Chat/header.tsx
@@ -8,7 +8,7 @@ import { Tooltip } from "antd"
 export const SidepanelHeader = () => {
   const { clearChat, isEmbedding } = useMessage()
   return (
-    <div className="flex px-3 justify-between bg-white dark:bg-black border-b border-gray-200 dark:border-gray-800 py-4 items-center">
+    <div className="flex px-3 justify-between bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
       <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
         <img className="h-6 w-auto" src={logoImage} alt="Page Assist" />
         <span className="ml-1 text-sm ">Page Assist</span>
diff --git a/src/components/Sidepanel/Settings/body.tsx b/src/components/Sidepanel/Settings/body.tsx
index 285df55..d8d913d 100644
--- a/src/components/Sidepanel/Settings/body.tsx
+++ b/src/components/Sidepanel/Settings/body.tsx
@@ -67,12 +67,12 @@ export const SettingsBody = () => {
 
   return (
     <div className="flex flex-col gap-4 p-4 max-w-2xl mx-auto lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl">
-      <div className="border border-gray-300 dark:border-gray-700 rounded p-4">
+      <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md mb-4 font-semibold dark:text-white">
           Ollama URL
         </h2>
         <input
-          className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
+          className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
           value={ollamaURL}
           type="url"
           onChange={(e) => setOllamaURL(e.target.value)}
@@ -86,7 +86,7 @@ export const SettingsBody = () => {
           />
         </div>
       </div>
-      <div className="border border-gray-300 dark:border-gray-700 rounded p-4">
+      <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md font-semibold dark:text-white">Prompt</h2>
         <div className="my-3 flex justify-end">
           <Radio.Group
@@ -103,7 +103,7 @@ export const SettingsBody = () => {
               System Prompt
             </span>
             <textarea
-              className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
+              className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
               value={systemPrompt}
               onChange={(e) => setSystemPrompt(e.target.value)}
             />
@@ -124,7 +124,7 @@ export const SettingsBody = () => {
                 System Prompt
               </span>
               <textarea
-                className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
+                className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
                 value={ragPrompt}
                 onChange={(e) => setRagPrompt(e.target.value)}
               />
@@ -134,7 +134,7 @@ export const SettingsBody = () => {
                 Question Prompt
               </span>
               <textarea
-                className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
+                className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
                 value={ragQuestionPrompt}
                 onChange={(e) => setRagQuestionPrompt(e.target.value)}
               />
@@ -151,7 +151,7 @@ export const SettingsBody = () => {
         )}
       </div>
 
-      <div className="border border-gray-300 dark:border-gray-700 rounded p-4">
+      <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md mb-4 font-semibold dark:text-white">Theme</h2>
         {mode === "dark" ? (
           <button
diff --git a/src/components/Sidepanel/Settings/header.tsx b/src/components/Sidepanel/Settings/header.tsx
index b38fdcd..eb58d2c 100644
--- a/src/components/Sidepanel/Settings/header.tsx
+++ b/src/components/Sidepanel/Settings/header.tsx
@@ -3,7 +3,7 @@ import { ChevronLeftIcon } from "@heroicons/react/24/outline"
 import { Link } from "react-router-dom"
 export const SidepanelSettingsHeader = () => {
   return (
-    <div className="flex px-3 justify-start gap-3 bg-white dark:bg-black border-b border-gray-200 dark:border-gray-800 py-4 items-center">
+    <div className="flex px-3 justify-start gap-3 bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700  py-4 items-center">
       <Link to="/">
         <ChevronLeftIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
       </Link>
diff --git a/src/routes/sidepanel-chat.tsx b/src/routes/sidepanel-chat.tsx
index 33e2d83..73a1a61 100644
--- a/src/routes/sidepanel-chat.tsx
+++ b/src/routes/sidepanel-chat.tsx
@@ -72,8 +72,8 @@ export const SidepanelChat = () => {
       ref={drop}
       className={`flex ${
         dropState === "dragging" && chatMode === "normal"
-          ? "bg-gray-100 dark:bg-gray-800 z-10"
-          : "bg-white dark:bg-black"
+          ? "bg-neutral-200 dark:bg-gray-800 z-10"
+          : "bg-neutral-50 dark:bg-[#171717]"
       } flex-col min-h-screen mx-auto max-w-7xl`}>
       <div className="sticky top-0 z-10">
         <SidepanelHeader />
diff --git a/src/routes/sidepanel-settings.tsx b/src/routes/sidepanel-settings.tsx
index ef9dcc8..b27d02e 100644
--- a/src/routes/sidepanel-settings.tsx
+++ b/src/routes/sidepanel-settings.tsx
@@ -3,8 +3,8 @@ import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header"
 
 export const SidepanelSettings = () => {
   return (
-    <div className="flex bg-white dark:bg-black flex-col min-h-screen mx-auto max-w-7xl">
-      <div className="sticky top-0 z-10">
+    <div className="flex bg-neutral-50 dark:bg-[#171717] flex-col min-h-screen mx-auto max-w-7xl">
+      <div className="sticky bg-white dark:bg-[#171717] top-0 z-10">
         <SidepanelSettingsHeader />
       </div>
       <SettingsBody />