diff --git a/frontend/src/pages/Admin/Agents/index.jsx b/frontend/src/pages/Admin/Agents/index.jsx
index 99c093d5c..0a83148b8 100644
--- a/frontend/src/pages/Admin/Agents/index.jsx
+++ b/frontend/src/pages/Admin/Agents/index.jsx
@@ -333,7 +333,7 @@ function SkillLayout({ children, hasChanges, handleSubmit, handleCancel }) {
   return (
     <div
       id="workspace-agent-settings-container"
-      className="w-screen h-screen overflow-hidden bg-sidebar flex md:mt-0 mt-6"
+      className="w-screen h-screen overflow-hidden bg-main-container-bg flex md:mt-0 mt-6"
     >
       <Sidebar />
       <div
diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx
index 027ebb7e6..68a00941e 100644
--- a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx
+++ b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx
@@ -8,7 +8,7 @@ import DocumentSyncQueueRow from "./DocumentSyncQueueRow";
 
 export default function LiveDocumentSyncManager() {
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
index 72aac8f59..e0f48ccbb 100644
--- a/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
+++ b/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
@@ -90,7 +90,7 @@ function FeatureLayout({ children }) {
   return (
     <div
       id="workspace-feature-settings-container"
-      className="w-screen h-screen overflow-hidden bg-sidebar flex md:mt-0 mt-6"
+      className="w-screen h-screen overflow-hidden bg-main-container-bg flex md:mt-0 mt-6"
     >
       <Sidebar />
       <div
diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index 599271ad9..e2b2bd52f 100644
--- a/frontend/src/pages/Admin/Invitations/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/index.jsx
@@ -16,7 +16,7 @@ export default function AdminInvites() {
   const { isOpen, openModal, closeModal } = useModal();
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/Admin/Logging/index.jsx b/frontend/src/pages/Admin/Logging/index.jsx
index 389263f4b..157d26690 100644
--- a/frontend/src/pages/Admin/Logging/index.jsx
+++ b/frontend/src/pages/Admin/Logging/index.jsx
@@ -54,7 +54,7 @@ export default function AdminLogs() {
   };
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/Admin/System/index.jsx b/frontend/src/pages/Admin/System/index.jsx
index dba1872d3..6e00acdec 100644
--- a/frontend/src/pages/Admin/System/index.jsx
+++ b/frontend/src/pages/Admin/System/index.jsx
@@ -38,7 +38,7 @@ export default function AdminSystem() {
   }, []);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index 408e794aa..2bb106c75 100644
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/frontend/src/pages/Admin/Users/index.jsx
@@ -16,7 +16,7 @@ export default function AdminUsers() {
   const { isOpen, openModal, closeModal } = useModal();
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index 5a7b128d2..c28cd2616 100644
--- a/frontend/src/pages/Admin/Workspaces/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/index.jsx
@@ -15,7 +15,7 @@ export default function AdminWorkspaces() {
   const { isOpen, openModal, closeModal } = useModal();
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/FineTuning/Steps/index.jsx b/frontend/src/pages/FineTuning/Steps/index.jsx
index 7cf74263f..c8c8f1cc7 100644
--- a/frontend/src/pages/FineTuning/Steps/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/index.jsx
@@ -133,7 +133,7 @@ export function FineTuningCreationLayout({ setStep, children }) {
   return (
     <div
       id="fine-tune-create-order-container"
-      className="w-screen h-screen overflow-hidden bg-sidebar flex md:mt-0 mt-6"
+      className="w-screen h-screen overflow-hidden bg-main-container-bg flex md:mt-0 mt-6"
     >
       <Sidebar />
       <div
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index 3aa17b4bf..4d3a234d8 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
@@ -19,7 +19,7 @@ export default function AdminApiKeys() {
   const { isOpen, openModal, closeModal } = useModal();
   const { t } = useTranslation();
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index afb244395..2fd7d0d5b 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
@@ -13,7 +13,7 @@ import ShowScrollbar from "./ShowScrollbar";
 export default function Appearance() {
   const { t } = useTranslation();
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/index.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/index.jsx
index c4abaf546..e922e6cb4 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/index.jsx
@@ -20,7 +20,7 @@ export default function AudioPreference() {
   }, []);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       {loading ? (
         <div
diff --git a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
index 1bcb7c13f..7c01ece09 100644
--- a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
+++ b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
@@ -39,7 +39,7 @@ export default function BrowserExtensionApiKeys() {
   };
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index a2385aa2d..6c7ec890a 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -115,7 +115,7 @@ export default function WorkspaceChats() {
   }, [offset]);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index 82cb261aa..26fb3c05f 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
@@ -88,7 +88,7 @@ export default function EmbedChats() {
   }, []);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
index 442a03d93..13490489f 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
@@ -16,7 +16,7 @@ export default function EmbedConfigs() {
   const { isOpen, openModal, closeModal } = useModal();
   const { t } = useTranslation();
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index d95c6b112..860b5e3c4 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -211,7 +211,7 @@ export default function GeneralEmbeddingPreference() {
   );
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       {loading ? (
         <div
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
index f1f2df3e4..d3e3dbc84 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
@@ -63,7 +63,7 @@ export default function EmbeddingTextSplitterPreference() {
   }, []);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       {loading ? (
         <div
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index 6b041c117..22e9d881d 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -328,7 +328,7 @@ export default function GeneralLLMPreference() {
     (llm) => llm.value === selectedLLM
   );
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       {loading ? (
         <div
diff --git a/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx b/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
index 12d5a3e52..3eb71c615 100644
--- a/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
+++ b/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
@@ -26,7 +26,7 @@ export default function PrivacyAndDataHandling() {
   }, []);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx
index c014b3274..7c235bcd8 100644
--- a/frontend/src/pages/GeneralSettings/Security/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Security/index.jsx
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 
 export default function GeneralSecurity() {
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
index 8c84c3e9d..db86bb658 100644
--- a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
@@ -99,7 +99,7 @@ export default function TranscriptionModelPreference() {
   );
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       {loading ? (
         <div
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index e35dc3208..0dd563860 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -171,7 +171,7 @@ export default function GeneralVectorDatabase() {
   const selectedVDBObject = VECTOR_DBS.find((vdb) => vdb.value === selectedVDB);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       <Sidebar />
       {loading ? (
         <div
diff --git a/frontend/src/pages/Invite/index.jsx b/frontend/src/pages/Invite/index.jsx
index a7522a54e..d84f81cd0 100644
--- a/frontend/src/pages/Invite/index.jsx
+++ b/frontend/src/pages/Invite/index.jsx
@@ -32,7 +32,7 @@ export default function InvitePage() {
 
   if (result.status === "loading") {
     return (
-      <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+      <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
         <FullScreenLoader />
       </div>
     );
@@ -40,14 +40,14 @@ export default function InvitePage() {
 
   if (result.status === "invalid") {
     return (
-      <div className="w-screen h-screen overflow-hidden bg-sidebar flex items-center justify-center">
+      <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex items-center justify-center">
         <p className="text-red-400 text-lg">{result.message}</p>
       </div>
     );
   }
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex items-center justify-center">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex items-center justify-center">
       <ModalWrapper isOpen={true}>
         <NewUserModal />
       </ModalWrapper>
diff --git a/frontend/src/pages/Main/index.jsx b/frontend/src/pages/Main/index.jsx
index 36c7a8607..c7f934a58 100644
--- a/frontend/src/pages/Main/index.jsx
+++ b/frontend/src/pages/Main/index.jsx
@@ -17,7 +17,7 @@ export default function Main() {
   return (
     <>
       <UserMenu>
-        <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+        <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
           {!isMobile && <Sidebar />}
           <DefaultChatContainer />
         </div>
diff --git a/frontend/src/pages/WorkspaceChat/index.jsx b/frontend/src/pages/WorkspaceChat/index.jsx
index 6c5fcfb13..32401694e 100644
--- a/frontend/src/pages/WorkspaceChat/index.jsx
+++ b/frontend/src/pages/WorkspaceChat/index.jsx
@@ -45,7 +45,7 @@ function ShowWorkspaceChat() {
 
   return (
     <>
-      <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+      <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
         {!isMobile && <Sidebar />}
         <WorkspaceChatContainer loading={loading} workspace={workspace} />
       </div>
diff --git a/frontend/src/pages/WorkspaceSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/index.jsx
index 888e59566..107a9e22f 100644
--- a/frontend/src/pages/WorkspaceSettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/index.jsx
@@ -73,7 +73,7 @@ function ShowWorkspaceChat() {
 
   const TabContent = TABS[tab];
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-main-container-bg flex">
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 8e43068f7..c39cad6d8 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -52,6 +52,9 @@ export default {
         "footer-icon": "rgba(255, 255, 255, 0.1)",
         "footer-icon-hover": "rgba(255, 255, 255, 0.2)",
         "sidebar-border": "rgba(255, 255, 255, 0.1)",
+
+        // Main container colors
+        "main-container-bg": "#0E0F0F",
       },
       backgroundImage: {
         "preference-gradient":