diff --git a/frontend/src/components/ChatBubble/index.jsx b/frontend/src/components/ChatBubble/index.jsx
index c5a1f19076f..96a47ffea47 100644
--- a/frontend/src/components/ChatBubble/index.jsx
+++ b/frontend/src/components/ChatBubble/index.jsx
@@ -1,14 +1,12 @@
 import React from "react";
 import UserIcon from "../UserIcon";
 import { userFromStorage } from "@/utils/request";
-import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 
 export default function ChatBubble({ message, type, popMsg }) {
   const isUser = type === "user";
-  const backgroundColor = isUser ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR;
 
   return (
-    <div className={`flex justify-center items-end w-full ${backgroundColor}`}>
+    <div className={`flex justify-center items-end w-full bg-theme-bg-secondary`}>
       <div className={`py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}>
         <div className="flex gap-x-5">
           <UserIcon
diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index 4241ed71ea7..b579cf41372 100644
--- a/frontend/src/components/DefaultChat/index.jsx
+++ b/frontend/src/components/DefaultChat/index.jsx
@@ -15,7 +15,6 @@ import ChatBubble from "../ChatBubble";
 import System from "@/models/system";
 import UserIcon from "../UserIcon";
 import { userFromStorage } from "@/utils/request";
-import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 import useUser from "@/hooks/useUser";
 import { useTranslation, Trans } from "react-i18next";
 
@@ -41,239 +40,145 @@ export default function DefaultChatContainer() {
 
   const MESSAGES = [
     <React.Fragment key="msg1">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR} md:mt-0 mt-[40px]`}
-      >
-        <div
-          className={`pt-10 pb-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.part1")}
-            </span>
-          </div>
-        </div>
-      </div>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <MessageText>{t("welcomeMessage.part1")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg2">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`pb-4 pt-2 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.part2")}
-            </span>
-          </div>
-        </div>
-      </div>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <MessageText>{t("welcomeMessage.part2")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg3">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`pt-2 pb-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-            <div>
-              <span
-                className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-              >
-                {t("welcomeMessage.part3")}
-              </span>
-              <a
-                href={paths.github()}
-                target="_blank"
-                rel="noreferrer"
-                className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-              >
-                <GitMerge className="h-4 w-4" />
-                <p>{t("welcomeMessage.githubIssue")}</p>
-              </a>
-            </div>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <div>
+            <MessageText>{t("welcomeMessage.part3")}</MessageText>
+            <a
+              href={paths.github()}
+              target="_blank"
+              rel="noreferrer"
+              className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+            >
+              <GitMerge className="h-4 w-4" />
+              <p>{t("welcomeMessage.githubIssue")}</p>
+            </a>
           </div>
-        </div>
-      </div>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg4">
-      <div
-        className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon
-              user={{ uid: userFromStorage()?.username }}
-              role={"user"}
-            />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.user1")}
-            </span>
-          </div>
-        </div>
-      </div>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon
+            user={{ uid: userFromStorage()?.username }}
+            role={"user"}
+          />
+          <MessageText>{t("welcomeMessage.user1")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg5">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-            <div>
-              <span
-                className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-              >
-                {t("welcomeMessage.part4")}
-              </span>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <div>
+            <MessageText>{t("welcomeMessage.part4")}</MessageText>
 
-              {(!user || user?.role !== "default") && (
-                <button
-                  onClick={showNewWsModal}
-                  className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  <Plus className="h-4 w-4" />
-                  <p>{t("welcomeMessage.createWorkspace")}</p>
-                </button>
-              )}
-            </div>
+            {(!user || user?.role !== "default") && (
+              <button
+                onClick={showNewWsModal}
+                className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+              >
+                <Plus className="h-4 w-4" />
+                <p>{t("welcomeMessage.createWorkspace")}</p>
+              </button>
+            )}
           </div>
-        </div>
-      </div>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg6">
-      <div
-        className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon
-              user={{ uid: userFromStorage()?.username }}
-              role={"user"}
-            />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.user2")}
-            </span>
-          </div>
-        </div>
-      </div>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon
+            user={{ uid: userFromStorage()?.username }}
+            role={"user"}
+          />
+          <MessageText>{t("welcomeMessage.user2")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg7">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              <Trans
-                i18nKey="welcomeMessage.part5"
-                components={{
-                  i: <i />,
-                  br: <br />,
-                }}
-              />
-            </span>
-          </div>
-        </div>
-      </div>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <MessageText>
+            <Trans
+              i18nKey="welcomeMessage.part5"
+              components={{
+                i: <i />,
+                br: <br />,
+              }}
+            />
+          </MessageText>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg8">
-      <div
-        className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon
-              user={{ uid: userFromStorage()?.username }}
-              role={"user"}
-            />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.user3")}
-            </span>
-          </div>
-        </div>
-      </div>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon
+            user={{ uid: userFromStorage()?.username }}
+            role={"user"}
+          />
+          <MessageText>{t("welcomeMessage.user3")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg9">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-            <div>
-              <span
-                className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-              >
-                {t("welcomeMessage.part6")}
-              </span>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <div>
+            <MessageText>{t("welcomeMessage.part6")}</MessageText>
 
-              <div className="flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-4">
-                <a
-                  href={paths.github()}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  <GithubLogo className="h-4 w-4" />
-                  <p>{t("welcomeMessage.starOnGithub")}</p>
-                </a>
-                <a
-                  href={paths.mailToMintplex()}
-                  className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  <EnvelopeSimple className="h-4 w-4" />
-                  <p>{t("welcomeMessage.contact")}</p>
-                </a>
-              </div>
+            <div className="flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-4">
+              <a
+                href={paths.github()}
+                target="_blank"
+                rel="noreferrer"
+                className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+              >
+                <GithubLogo className="h-4 w-4" />
+                <p>{t("welcomeMessage.starOnGithub")}</p>
+              </a>
+              <a
+                href={paths.mailToMintplex()}
+                className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+              >
+                <EnvelopeSimple className="h-4 w-4" />
+                <p>{t("welcomeMessage.contact")}</p>
+              </a>
             </div>
           </div>
-        </div>
-      </div>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
   ];
 
@@ -305,7 +210,7 @@ export default function DefaultChatContainer() {
   return (
     <div
       style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll"
     >
       {isMobile && <SidebarMobileHeader />}
       {fetchedMessages.length === 0
@@ -331,3 +236,25 @@ export default function DefaultChatContainer() {
     </div>
   );
 }
+
+function MessageContainer({ children }) {
+  return (
+    <div className="flex justify-center items-end w-full bg-theme-bg-chat">
+      <div className="py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function MessageContent({ children }) {
+  return <div className="flex gap-x-5">{children}</div>;
+}
+
+function MessageText({ children }) {
+  return (
+    <span className="text-white/80 font-light text-[14px] flex flex-col gap-y-1 mt-2">
+      {children}
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index 5eeb66414a4..724fb8e1d8d 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -4,7 +4,6 @@ import NewWorkspaceModal, {
   useNewWorkspaceModal,
 } from "../Modals/NewWorkspace";
 import ActiveWorkspaces from "./ActiveWorkspaces";
-import { USER_BACKGROUND_COLOR } from "@/utils/constants";
 import useLogo from "@/hooks/useLogo";
 import useUser from "@/hooks/useUser";
 import Footer from "../Footer";
@@ -133,7 +132,7 @@ export function SidebarMobileHeader() {
             showBgOverlay
               ? "transition-all opacity-1"
               : "transition-none opacity-0"
-          }  duration-500 fixed top-0 left-0 ${USER_BACKGROUND_COLOR} bg-opacity-75 w-screen h-screen`}
+          }  duration-500 fixed top-0 left-0 bg-theme-bg-secondary bg-opacity-75 w-screen h-screen`}
           onClick={() => setShowSidebar(false)}
         />
         <div
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
index 811de87d639..a8b7ca1f1d1 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
@@ -1,4 +1,3 @@
-import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 import { Pencil } from "@phosphor-icons/react";
 import { useState, useEffect, useRef } from "react";
 import { Tooltip } from "react-tooltip";
@@ -102,9 +101,7 @@ export function EditMessageForm({
       <textarea
         ref={formRef}
         name="editedMessage"
-        className={`w-full rounded ${
-          role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR
-        } border border-white/20 active:outline-none focus:outline-none focus:ring-0 pr-16 pl-1.5 pt-1.5 resize-y`}
+        className="w-full rounded bg-theme-bg-secondary border border-white/20 active:outline-none focus:outline-none focus:ring-0 pr-16 pl-1.5 pt-1.5 resize-y"
         defaultValue={message}
         onChange={adjustTextArea}
       />
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 8b9c75629e9..9a0d26bc5ff 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -7,8 +7,6 @@ export const COMPLETE_QUESTIONNAIRE = "anythingllm_completed_questionnaire";
 export const SEEN_DOC_PIN_ALERT = "anythingllm_pinned_document_alert";
 export const SEEN_WATCH_ALERT = "anythingllm_watched_document_alert";
 
-export const USER_BACKGROUND_COLOR = "bg-historical-msg-user";
-export const AI_BACKGROUND_COLOR = "bg-historical-msg-system";
 export const APPEARANCE_SETTINGS = "anythingllm_appearance_settings";
 
 export const OLLAMA_COMMON_URLS = [