diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx
index 9db596887ab..cdcd52a979c 100644
--- a/frontend/src/components/Footer/index.jsx
+++ b/frontend/src/components/Footer/index.jsx
@@ -61,8 +61,7 @@ export default function Footer() {
             >
               <GithubLogo
                 weight="fill"
-                className="h-5 w-5"
-                color="var(--theme-sidebar-footer-icon-fill)"
+                className="h-5 w-5 text-white light:text-slate-800"
               />
             </Link>
           </div>
@@ -78,8 +77,7 @@ export default function Footer() {
             >
               <BookOpen
                 weight="fill"
-                className="h-5 w-5"
-                color="var(--theme-sidebar-footer-icon-fill)"
+                className="h-5 w-5 text-white light:text-slate-800"
               />
             </Link>
           </div>
@@ -95,8 +93,7 @@ export default function Footer() {
             >
               <DiscordLogo
                 weight="fill"
-                className="h-5 w-5"
-                color="var(--theme-sidebar-footer-icon-fill)"
+                className="h-5 w-5 text-white light:text-slate-800"
               />
             </Link>
           </div>
diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
index 97fbefee2d6..75fb2fd2df4 100644
--- a/frontend/src/components/SettingsButton/index.jsx
+++ b/frontend/src/components/SettingsButton/index.jsx
@@ -21,9 +21,8 @@ export default function SettingsButton() {
           data-tooltip-content="Back to workspaces"
         >
           <ArrowUUpLeft
-            className="h-5 w-5"
+            className="h-5 w-5 text-white light:text-slate-800"
             weight="fill"
-            color="var(--theme-sidebar-footer-icon-fill)"
           />
         </Link>
       </div>
@@ -39,9 +38,8 @@ export default function SettingsButton() {
         data-tooltip-content="Open settings"
       >
         <Wrench
-          className="h-5 w-5"
+          className="h-5 w-5 text-white light:text-slate-800"
           weight="fill"
-          color="var(--theme-sidebar-footer-icon-fill)"
         />
       </Link>
     </div>
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
index d30e218cdb0..bcf02bf7718 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
@@ -46,8 +46,8 @@ export default function ThreadItem({
         style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
         className={`${
           isActive
-            ? "border-l-2 border-b-2 border-white light:border-theme-sidebar-border z-[2]"
-            : "border-l border-b border-[#6F6F71] light:border-theme-sidebar-border z-[1]"
+            ? "border-l-2 border-b-2 border-white light:border-blue-800 z-[2]"
+            : "border-l border-b border-zinc-500 light:border-slate-400 z-[1]"
         } h-[50%] absolute top-0 left-3 rounded-bl-lg`}
       ></div>
       {/* Downstroke border for next item */}
@@ -56,8 +56,8 @@ export default function ThreadItem({
           style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
           className={`${
             idx <= activeIdx && !isActive
-              ? "border-l-2 border-white light:border-theme-sidebar-border z-[2]"
-              : "border-l border-[#6F6F71] light:border-theme-sidebar-border z-[1]"
+              ? "border-l-2 border-white light:border-blue-800 z-[2]"
+              : "border-l border-zinc-500 light:border-slate-400 z-[1]"
           } h-[100%] absolute top-0 left-3`}
         ></div>
       )}
@@ -68,7 +68,7 @@ export default function ThreadItem({
         className="h-full"
       />
       <div
-        className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? "bg-[var(--theme-sidebar-thread-selected)] border border-solid border-transparent light:border-blue-400" : "hover:bg-theme-sidebar-subitem-hover"} rounded-[4px]`}
+        className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? "bg-[var(--theme-sidebar-thread-selected)] light:bg-blue-200" : "hover:bg-theme-sidebar-subitem-hover light:hover:bg-slate-300"} rounded-[4px]`}
       >
         {thread.deleted ? (
           <div className="w-full flex justify-between">
@@ -105,7 +105,9 @@ export default function ThreadItem({
           >
             <p
               className={`text-left text-sm truncate max-w-[150px] ${
-                isActive ? "font-medium text-white" : "text-theme-text-primary"
+                isActive
+                  ? "font-semibold text-white light:text-blue-900"
+                  : "text-zinc-600 font-medium light:text-slate-800"
               }`}
             >
               {thread.name}
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
index f9c0ea4edb7..113717fe99b 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
@@ -174,10 +174,10 @@ function NewThreadButton({ workspace }) {
   return (
     <button
       onClick={onClick}
-      className="w-full relative flex h-[40px] items-center border-none hover:bg-[var(--theme-sidebar-thread-selected)] hover:light:bg-theme-sidebar-subitem-hover rounded-lg"
+      className="w-full relative flex h-[40px] items-center border-none hover:bg-[var(--theme-sidebar-thread-selected)] light:hover:bg-slate-300 hover:light:bg-theme-sidebar-subitem-hover rounded-lg"
     >
       <div className="flex w-full gap-x-2 items-center pl-4">
-        <div className="bg-white/20 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
+        <div className="bg-zinc-800 light:bg-slate-50 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
           {loading ? (
             <CircleNotch
               weight="bold"
@@ -198,7 +198,7 @@ function NewThreadButton({ workspace }) {
             Starting Thread...
           </p>
         ) : (
-          <p className="text-left text-white light:text-theme-text-primary text-sm">
+          <p className="text-left text-white light:text-theme-text-primary text-sm font-semibold">
             New Thread
           </p>
         )}
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index 47a39530a50..cac5834380a 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -113,8 +113,7 @@ export default function ActiveWorkspaces() {
                             transition-all duration-[200ms]
                             flex flex-grow w-[75%] gap-x-2 py-[6px] pl-[4px] pr-[6px] rounded-[4px] text-white justify-start items-center
                             bg-theme-sidebar-item-default
-                            hover:bg-theme-sidebar-subitem-hover hover:font-bold
-                            ${isActive ? "bg-theme-sidebar-item-selected font-bold light:outline-2 light:outline light:outline-blue-400 light:outline-offset-[-2px]" : ""}
+                            ${isActive ? "light:bg-blue-200 font-bold" : "hover:bg-theme-sidebar-subitem-hover light:hover:bg-slate-300"}
                           `}
                         >
                           <div className="flex flex-row justify-between w-full items-center">
@@ -124,7 +123,7 @@ export default function ActiveWorkspaces() {
                             >
                               <DotsSixVertical
                                 size={20}
-                                color="var(--theme-sidebar-item-workspace-active)"
+                                className={`${isActive ? "text-white light:text-blue-800" : ""}`}
                                 weight="bold"
                               />
                             </div>
@@ -132,9 +131,9 @@ export default function ActiveWorkspaces() {
                               <div className="w-[130px] overflow-hidden">
                                 <p
                                   className={`
-                                  text-[14px] leading-loose whitespace-nowrap overflow-hidden text-white
-                                  ${isActive ? "font-bold" : "font-medium"} truncate
-                                  w-full group-hover:w-[130px] group-hover:font-bold group-hover:duration-200
+                                  text-[14px] leading-loose whitespace-nowrap overflow-hidden
+                                  ${isActive ? "font-bold text-white light:text-blue-900" : "font-medium "} truncate
+                                  w-full group-hover:w-[130px] group-hover:duration-200
                                 `}
                                 >
                                   {workspace.name}
@@ -152,9 +151,11 @@ export default function ActiveWorkspaces() {
                                     setSelectedWs(workspace);
                                     showModal();
                                   }}
-                                  className="border-none rounded-md flex items-center justify-center ml-auto p-[2px] hover:bg-[#646768] text-[#A7A8A9] hover:text-white"
+                                  className={`group/upload border-none rounded-md flex items-center justify-center ml-auto p-[2px] ${isActive ? "hover:bg-zinc-500 light:hover:bg-sky-800/30" : "hover:bg-zinc-500 light:hover:bg-slate-400"}`}
                                 >
-                                  <UploadSimple className="h-[20px] w-[20px]" />
+                                  <UploadSimple
+                                    className={`h-[20px] w-[20px] ${isActive ? "text-zinc-400 hover:text-white light:text-blue-700 light:group-hover/upload:text-blue-900" : "text-zinc-400 hover:text-white light:text-slate-600 light:group-hover/upload:text-slate-950"}`}
+                                  />
                                 </button>
                                 <button
                                   onClick={(e) => {
@@ -168,7 +169,7 @@ export default function ActiveWorkspaces() {
                                           )
                                     );
                                   }}
-                                  className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto p-[2px] hover:bg-[#646768]"
+                                  className={`group/gear rounded-md flex items-center justify-center ml-auto p-[2px] ${isActive ? "hover:bg-zinc-500 light:hover:bg-sky-800/30" : "hover:bg-zinc-500 light:hover:bg-slate-400"}`}
                                   aria-label="General appearance settings"
                                 >
                                   <GearSix
@@ -178,7 +179,7 @@ export default function ActiveWorkspaces() {
                                         ? "#46C8FF"
                                         : undefined
                                     }
-                                    className="h-[20px] w-[20px]"
+                                    className={`h-[20px] w-[20px] ${isActive ? "text-zinc-400 hover:text-white light:text-blue-700 light:group-hover/gear:text-blue-900" : "text-zinc-400 hover:text-white light:text-slate-600 light:group-hover/gear:text-slate-950"}`}
                                   />
                                 </button>
                               </div>
diff --git a/frontend/src/components/Sidebar/SearchBox/index.jsx b/frontend/src/components/Sidebar/SearchBox/index.jsx
index d03cc88264b..5784679e073 100644
--- a/frontend/src/components/Sidebar/SearchBox/index.jsx
+++ b/frontend/src/components/Sidebar/SearchBox/index.jsx
@@ -61,7 +61,7 @@ export default function SearchBox({ user, showNewWsModal }) {
           onChange={handleSearch}
           onReset={handleReset}
           onFocus={(e) => e.target.select()}
-          className="border-none w-full h-full rounded-lg bg-theme-sidebar-item-default pl-9 focus:pl-4 pr-1 placeholder:text-theme-settings-input-placeholder outline-none text-white search-input peer text-sm"
+          className="border-none w-full h-full rounded-lg bg-theme-sidebar-item-default pl-9 focus:pl-4 pr-1 placeholder:text-white/50 light:placeholder:text-slate-500 placeholder:font-semibold outline-none text-theme-text-primary search-input peer text-sm"
         />
         <MagnifyingGlass
           size={14}
@@ -198,9 +198,13 @@ function ShortWidthNewWorkspaceButton({ user, showNewWsModal }) {
         data-tooltip-id="new-workspace-tooltip"
         data-tooltip-content={t("new-workspace.title")}
         onClick={showNewWsModal}
-        className="border-none flex items-center justify-center bg-white rounded-lg p-[8px] hover:bg-white/80 transition-all duration-300"
+        className="border-none flex items-center justify-center bg-white  rounded-lg p-[8px] hover:bg-white/80 light:hover:bg-slate-300 transition-all duration-300"
       >
-        <Plus size={16} weight="bold" className="text-black" />
+        <Plus
+          size={16}
+          weight="bold"
+          className="text-black light:text-slate-500"
+        />
       </button>
       <Tooltip
         id="new-workspace-tooltip"
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index edbd2cafb58..353a8af155b 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -56,7 +56,7 @@ export default function Sidebar() {
           </div>
           <div
             ref={sidebarRef}
-            className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]"
+            className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar light:bg-slate-200 border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]"
           >
             <div className="flex flex-col h-full overflow-hidden">
               <div className="flex-grow flex flex-col min-w-[235px] min-h-0">
@@ -66,7 +66,7 @@ export default function Sidebar() {
                     <ActiveWorkspaces />
                   </div>
                 </div>
-                <div className="absolute bottom-0 left-0 right-0 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
+                <div className="absolute bottom-0 left-0 right-0 pb-3 rounded-b-[16px] bg-theme-bg-sidebar light:bg-slate-200 bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
                   <Footer />
                 </div>
               </div>