diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 790ef2017e5..4c4291405f9 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -2512,7 +2512,7 @@ export function ChatPage({
               )}
             </div>
           </div>
-          <FixedLogo />
+          <FixedLogo chat />
         </div>
       </div>
       <DocumentSidebar
diff --git a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
index 8b690968c74..d06ee14be25 100644
--- a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
+++ b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
@@ -122,7 +122,7 @@ export function ChatSessionDisplay({
           );
         }}
       >
-        <BasicSelectable padding="extra" fullWidth selected={isSelected}>
+        <BasicSelectable chat padding="extra" fullWidth selected={isSelected}>
           <>
             <div className="flex relative">
               {isRenamingChat ? (
@@ -142,7 +142,11 @@ export function ChatSessionDisplay({
                   {chatName || `Chat ${chatSession.id}`}
                   <span
                     className={`absolute right-0 top-0 h-full w-8 bg-gradient-to-r from-transparent 
-                    ${isSelected ? "to-background-200" : " to-background-100 group-hover:to-background-200"} `}
+                    ${
+                      isSelected
+                        ? "to-background-chat-hover"
+                        : " to-background-chat-selected group-hover:to-background-chat-hover"
+                    } `}
                   />
                 </p>
               )}
@@ -176,7 +180,9 @@ export function ChatSessionDisplay({
                             This chat will expire{" "}
                             {daysUntilExpiration < 1
                               ? "today"
-                              : `in ${daysUntilExpiration} day${daysUntilExpiration !== 1 ? "s" : ""}`}
+                              : `in ${daysUntilExpiration} day${
+                                  daysUntilExpiration !== 1 ? "s" : ""
+                                }`}
                           </p>
                         }
                       >
diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
index 9e072050b5a..9dad5c05079 100644
--- a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
+++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
@@ -94,7 +94,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             bg-background-sidebar
             w-full
             border-r 
-            border-border 
+            border-sidebar-border 
             flex 
             flex-col relative
             h-screen
diff --git a/web/src/app/chat/shared_chat_search/FixedLogo.tsx b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
index 2961db9df5b..717b407c8a4 100644
--- a/web/src/app/chat/shared_chat_search/FixedLogo.tsx
+++ b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
@@ -8,7 +8,7 @@ import Link from "next/link";
 import { useContext } from "react";
 import { FiSidebar } from "react-icons/fi";
 
-export default function FixedLogo() {
+export default function FixedLogo({ chat }: { chat?: boolean }) {
   const combinedSettings = useContext(SettingsContext);
   const settings = combinedSettings?.settings;
   const enterpriseSettings = combinedSettings?.enterpriseSettings;
@@ -28,13 +28,15 @@ export default function FixedLogo() {
           <div className="w-full">
             {enterpriseSettings && enterpriseSettings.application_name ? (
               <div>
-                <HeaderTitle>{enterpriseSettings.application_name}</HeaderTitle>
+                <HeaderTitle chat={chat}>
+                  {enterpriseSettings.application_name}
+                </HeaderTitle>
                 {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
                   <p className="text-xs text-subtle">Powered by Danswer</p>
                 )}
               </div>
             ) : (
-              <HeaderTitle>Danswer</HeaderTitle>
+              <HeaderTitle chat={chat}>Danswer</HeaderTitle>
             )}
           </div>
         </div>
diff --git a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
index 4f8d31d39ee..bfa8ef934f3 100644
--- a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
+++ b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
@@ -36,7 +36,7 @@ const ToggleSwitch = () => {
   };
 
   return (
-    <div className="bg-gray-100 mobile:mt-8 flex rounded-full p-1">
+    <div className="bg-background-toggle mobile:mt-8 flex rounded-full p-1">
       <div
         className={`absolute mobile:mt-8 top-1 bottom-1 ${
           activeTab === "chat" ? "w-[45%]" : "w-[50%]"
@@ -148,7 +148,9 @@ export default function FunctionalWrapper({
       {(!settings ||
         (settings.search_page_enabled && settings.chat_page_enabled)) && (
         <div
-          className={`mobile:hidden z-30 flex fixed ${chatBannerPresent ? (twoLines ? "top-20" : "top-14") : "top-4"} left-1/2 transform -translate-x-1/2`}
+          className={`mobile:hidden z-30 flex fixed ${
+            chatBannerPresent ? (twoLines ? "top-20" : "top-14") : "top-4"
+          } left-1/2 transform -translate-x-1/2`}
         >
           <div
             style={{ transition: "width 0.30s ease-out" }}
diff --git a/web/src/components/BasicClickable.tsx b/web/src/components/BasicClickable.tsx
index 34132c7bce5..44386a9d177 100644
--- a/web/src/components/BasicClickable.tsx
+++ b/web/src/components/BasicClickable.tsx
@@ -81,12 +81,14 @@ export function BasicSelectable({
   children,
   selected,
   hasBorder,
+  chat,
   fullWidth = false,
   padding = "normal",
 }: {
   children: string | JSX.Element;
   selected: boolean;
   hasBorder?: boolean;
+  chat?: boolean;
   fullWidth?: boolean;
   padding?: "none" | "normal" | "extra";
 }) {
@@ -100,7 +102,15 @@ export function BasicSelectable({
         ${padding == "extra" && "p-1.5"}
         select-none
         ${hasBorder ? "border border-border" : ""}
-        ${selected ? "bg-hover" : "hover:bg-hover"}
+        ${
+          selected
+            ? chat
+              ? "bg-background-chat-selected"
+              : "bg-hover"
+            : chat
+              ? "bg-background-chat-hover"
+              : "hover:bg-hover"
+        }
         ${fullWidth ? "w-full" : ""}`}
     >
       {children}
diff --git a/web/src/components/header/HeaderTitle.tsx b/web/src/components/header/HeaderTitle.tsx
index f63a8769c44..f7c9d21c47d 100644
--- a/web/src/components/header/HeaderTitle.tsx
+++ b/web/src/components/header/HeaderTitle.tsx
@@ -2,13 +2,21 @@
 
 import React from "react";
 
-export function HeaderTitle({ children }: { children: JSX.Element | string }) {
+export function HeaderTitle({
+  children,
+  chat,
+}: {
+  children: JSX.Element | string;
+  chat?: boolean;
+}) {
   const isString = typeof children === "string";
   const textSize = isString && children.length > 10 ? "text-xl" : "text-2xl";
 
   return (
     <h1
-      className={`${textSize} break-words line-clamp-2 ellipsis text-strong leading-none font-bold`}
+      className={`${textSize} ${
+        chat ? "text-text-sidebar-header" : "text-text-header"
+      } break-words line-clamp-2 ellipsis text-strong leading-none font-bold`}
     >
       {children}
     </h1>
diff --git a/web/src/components/search/SearchAnswer.tsx b/web/src/components/search/SearchAnswer.tsx
index e8645dfcea0..a9fe728b1c2 100644
--- a/web/src/components/search/SearchAnswer.tsx
+++ b/web/src/components/search/SearchAnswer.tsx
@@ -70,7 +70,11 @@ export default function SearchAnswer({
   return (
     <div
       ref={answerContainerRef}
-      className={`my-4 ${searchAnswerExpanded ? "min-h-[16rem]" : "h-[16rem]"} ${!searchAnswerExpanded && searchAnswerOverflowing && "overflow-y-hidden"} p-4 border-2 border-border rounded-lg relative`}
+      className={`my-4 ${
+        searchAnswerExpanded ? "min-h-[16rem]" : "h-[16rem]"
+      } ${
+        !searchAnswerExpanded && searchAnswerOverflowing && "overflow-y-hidden"
+      } p-4 border-2 border-search-answer-border rounded-lg relative`}
     >
       <div>
         <div className="flex gap-x-2">
diff --git a/web/src/components/search/SearchBar.tsx b/web/src/components/search/SearchBar.tsx
index df6f45eacdb..30b61b20c7e 100644
--- a/web/src/components/search/SearchBar.tsx
+++ b/web/src/components/search/SearchBar.tsx
@@ -68,8 +68,8 @@ export const AnimatedToggle = ({
           {/* Toggle switch */}
           <div
             className={`
-            w-10 h-6 flex items-center rounded-full p-1 transition-all duration-300 ease-in-out
-            ${isOn ? "bg-background-400" : "bg-background-200"}
+            w-10 h-6 flex items-center rounded-full p-1 transition-all duration-300 ease-in-out 
+            ${isOn ? "bg-toggled-background" : "bg-untoggled-background"}
           `}
           >
             <div
@@ -178,10 +178,14 @@ export const FullSearchBar = ({
         suppressContentEditableWarning={true}
       />
       <div
-        className={`flex flex-nowrap ${showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"} justify-between 4xl:justify-end w-full max-w-full items-center space-x-3 py-3 px-4`}
+        className={`flex flex-nowrap ${
+          showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"
+        } justify-between 4xl:justify-end w-full max-w-full items-center space-x-3 py-3 px-4`}
       >
         <div
-          className={`-my-1 flex-grow 4xl:hidden ${!showingSidebar && "2xl:hidden"}`}
+          className={`-my-1 flex-grow 4xl:hidden ${
+            !showingSidebar && "2xl:hidden"
+          }`}
         >
           {(ccPairs.length > 0 || documentSets.length > 0) && (
             <HorizontalSourceSelector
@@ -208,7 +212,11 @@ export const FullSearchBar = ({
             >
               <SendIcon
                 size={28}
-                className={`text-emphasis ${disabled || !query ? "bg-disabled-submit-background" : "bg-submit-background"} text-white p-1 rounded-full`}
+                className={`text-emphasis ${
+                  disabled || !query
+                    ? "bg-disabled-submit-background"
+                    : "bg-submit-background"
+                } text-white p-1 rounded-full`}
               />
             </button>
           </div>
diff --git a/web/src/components/search/SearchSection.tsx b/web/src/components/search/SearchSection.tsx
index 66b5cb481ed..454f180bf21 100644
--- a/web/src/components/search/SearchSection.tsx
+++ b/web/src/components/search/SearchSection.tsx
@@ -724,7 +724,9 @@ export const SearchSection = ({
 
             {
               <div
-                className={`desktop:px-24 w-full ${chatBannerPresent && "mt-10"} pt-10 relative max-w-[2000px] xl:max-w-[1430px] mx-auto`}
+                className={`desktop:px-24 w-full ${
+                  chatBannerPresent && "mt-10"
+                } pt-10 relative max-w-[2000px] xl:max-w-[1430px] mx-auto`}
               >
                 <div className="absolute z-10 mobile:px-4 mobile:max-w-searchbar-max mobile:w-[90%] top-12 desktop:left-4 hidden 2xl:block mobile:left-1/2 mobile:transform mobile:-translate-x-1/2 desktop:w-52 3xl:w-64">
                   {!settings?.isMobile &&
@@ -849,7 +851,7 @@ export const SearchSection = ({
           </div>
         </div>
       </div>
-      <FixedLogo />
+      <FixedLogo chat />
     </>
   );
 };