diff --git a/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx b/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx
index d84950ed18b..28623c46dc9 100644
--- a/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx
+++ b/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx
@@ -45,7 +45,7 @@ export default function NumberInput({
           field.value === undefined || field.value === null ? "" : field.value
         }
         className={`mt-2 block w-full px-3 py-2 
-                bg-[#fff] dark:bg-transparent border border-background-300 rounded-md 
+                bg-white dark:bg-transparent border border-background-300 rounded-md 
                 text-sm shadow-sm placeholder-text-400
                 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
                 disabled:bg-background-50 disabled:text-text-500 disabled:border-background-200 disabled:shadow-none
diff --git a/web/src/app/assistants/mine/AssistantCard.tsx b/web/src/app/assistants/mine/AssistantCard.tsx
index 92817fa70b3..2e946a52f70 100644
--- a/web/src/app/assistants/mine/AssistantCard.tsx
+++ b/web/src/app/assistants/mine/AssistantCard.tsx
@@ -320,7 +320,7 @@ const AssistantCard: React.FC<{
                       router.push(`/chat?assistantId=${persona.id}`);
                       closeModal();
                     }}
-                    className="hover:bg-neutral-100 dark:hover:bg-neutral-700 dark:bg-[#2E2E2D] hover:text-neutral-900 dark:hover:text-neutral-100 px-2 py-1 gap-x-1 rounded border border-neutral-400 dark:border-neutral-600 flex items-center"
+                    className="hover:bg-neutral-100 dark:hover:bg-neutral-700 dark:bg-neutral-800 hover:text-neutral-900 dark:hover:text-neutral-100 px-2 py-1 gap-x-1 rounded border border-neutral-400 dark:border-neutral-600 flex items-center"
                   >
                     <PencilIcon size={12} className="flex-none" />
                     <span className="text-xs">Start Chat</span>
@@ -342,7 +342,7 @@ const AssistantCard: React.FC<{
                         !pinned
                       );
                     }}
-                    className="hover:bg-neutral-100  dark:hover:bg-neutral-700 dark:bg-[#2E2E2D] px-2 group cursor-pointer py-1 gap-x-1 relative rounded border border-neutral-400 dark:border-neutral-600 flex items-center w-[65px]"
+                    className="hover:bg-neutral-100  dark:hover:bg-neutral-700 dark:bg-neutral-800 px-2 group cursor-pointer py-1 gap-x-1 relative rounded border border-neutral-400 dark:border-neutral-600 flex items-center w-[65px]"
                   >
                     <PinnedIcon size={12} />
                     {!pinned ? (
diff --git a/web/src/app/assistants/mine/AssistantModal.tsx b/web/src/app/assistants/mine/AssistantModal.tsx
index c08c97bcd2b..4f7d5a64cc5 100644
--- a/web/src/app/assistants/mine/AssistantModal.tsx
+++ b/web/src/app/assistants/mine/AssistantModal.tsx
@@ -182,7 +182,7 @@ export function AssistantModal({ hideModal }: AssistantModalProps) {
                       onFocus={() => setIsSearchFocused(true)}
                       onBlur={() => setIsSearchFocused(false)}
                       type="text"
-                      className="w-full h-full bg-transparent outline-none text-black"
+                      className="w-full h-full bg-transparent outline-none text-strong dark:text-white"
                     />
                   </div>
                 </div>
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index ae62d93a704..afad19d1fb6 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -3422,7 +3422,7 @@ export function ChatPage({
                                   currentPersona={liveAssistant}
                                   messageId={-1}
                                   content={
-                                    <p className="text-red-700 text-sm my-auto">
+                                    <p className="text-red-700 dark:text-red-400 text-sm my-auto">
                                       {loadingError}
                                     </p>
                                   }
diff --git a/web/src/app/chat/chat_search/ChatSearchGroup.tsx b/web/src/app/chat/chat_search/ChatSearchGroup.tsx
index 93be2fa93f3..b9f797e362c 100644
--- a/web/src/app/chat/chat_search/ChatSearchGroup.tsx
+++ b/web/src/app/chat/chat_search/ChatSearchGroup.tsx
@@ -15,7 +15,7 @@ export function ChatSearchGroup({
 }: ChatSearchGroupProps) {
   return (
     <div className="mb-4">
-      <div className="sticky -top-1 mt-1 z-10 bg-[#fff]/90 dark:bg-neutral-800/90  py-2 px-4  px-4">
+      <div className="sticky -top-1 mt-1 z-10 bg-white/90 dark:bg-neutral-800/90  py-2 px-4  px-4">
         <div className="text-xs font-medium leading-4 text-neutral-600 dark:text-neutral-400">
           {title}
         </div>
diff --git a/web/src/app/chat/folders/FolderDropdown.tsx b/web/src/app/chat/folders/FolderDropdown.tsx
index 7b5846b7371..3b818d323a5 100644
--- a/web/src/app/chat/folders/FolderDropdown.tsx
+++ b/web/src/app/chat/folders/FolderDropdown.tsx
@@ -159,13 +159,13 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
         >
           <div
             ref={ref}
-            className="flex overflow-visible items-center w-full text-text-darker rounded-md p-1 bg-background-sidebar  dark:bg-[#000] relative sticky top-0"
+            className="flex overflow-visible items-center w-full text-text-darker rounded-md p-1 bg-background-sidebar  dark:bg-neutral-950 relative sticky top-0"
             style={{ zIndex: 10 - index }}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
           >
             <button
-              className="flex overflow-hidden bg-background-sidebar dark:bg-[#000] items-center flex-grow"
+              className="flex overflow-hidden bg-background-sidebar dark:bg-neutral-950 items-center flex-grow"
               onClick={() => !isEditing && setIsOpen(!isOpen)}
               {...(isEditing ? {} : listeners)}
             >
diff --git a/web/src/app/chat/input-prompts/InputPrompts.tsx b/web/src/app/chat/input-prompts/InputPrompts.tsx
index 02dd93bb8e8..372d01e942a 100644
--- a/web/src/app/chat/input-prompts/InputPrompts.tsx
+++ b/web/src/app/chat/input-prompts/InputPrompts.tsx
@@ -259,7 +259,7 @@ const PromptCard: React.FC<PromptCardProps> = ({
   }, []);
 
   return (
-    <div className="border dark:border-none dark:bg-[#333333] rounded-lg p-4 mb-4 relative">
+    <div className="border dark:border-none dark:bg-neutral-700 rounded-lg p-4 mb-4 relative">
       {isEditing ? (
         <>
           <div className="absolute top-2 right-2">
diff --git a/web/src/app/chat/input-prompts/PromptCard.tsx b/web/src/app/chat/input-prompts/PromptCard.tsx
index 09c1faf2c90..9f1040eaf34 100644
--- a/web/src/app/chat/input-prompts/PromptCard.tsx
+++ b/web/src/app/chat/input-prompts/PromptCard.tsx
@@ -62,7 +62,7 @@ export const PromptCard = ({
   };
 
   return (
-    <div className="border dark:border-none dark:bg-[#333333] rounded-lg p-4 mb-4 relative">
+    <div className="border dark:border-none dark:bg-neutral-700 rounded-lg p-4 mb-4 relative">
       {isEditing ? (
         <>
           <div className="absolute top-2 right-2">
diff --git a/web/src/app/chat/input/AgenticToggle.tsx b/web/src/app/chat/input/AgenticToggle.tsx
index f475d969a83..7b6f990ae71 100644
--- a/web/src/app/chat/input/AgenticToggle.tsx
+++ b/web/src/app/chat/input/AgenticToggle.tsx
@@ -61,8 +61,8 @@ export function AgenticToggle({
               className={`
                 ${
                   proSearchEnabled
-                    ? "border-background-200 group-hover:border-[#000] dark:group-hover:border-neutral-300"
-                    : "border-background-200 group-hover:border-[#000] dark:group-hover:border-neutral-300"
+                    ? "border-background-200 group-hover:border-black dark:group-hover:border-neutral-300"
+                    : "border-background-200 group-hover:border-black dark:group-hover:border-neutral-300"
                 }
                  relative inline-flex h-[16px] w-8 items-center rounded-full transition-colors focus:outline-none border animate transition-all duration-200 border-background-200 group-hover:border-[1px]  `}
             >
diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx
index 5594c4b04fa..ca525ff67cc 100644
--- a/web/src/app/chat/input/ChatInputBar.tsx
+++ b/web/src/app/chat/input/ChatInputBar.tsx
@@ -657,7 +657,7 @@ export function ChatInputBar({
                 resize-none
                 px-5
                 py-4
-                dark:text-[#D4D4D4]
+                dark:text-neutral-300
               `}
               autoFocus
               style={{ scrollbarWidth: "thin" }}
diff --git a/web/src/app/chat/input/LLMPopover.tsx b/web/src/app/chat/input/LLMPopover.tsx
index 6d64a2fec25..a3c24107262 100644
--- a/web/src/app/chat/input/LLMPopover.tsx
+++ b/web/src/app/chat/input/LLMPopover.tsx
@@ -78,7 +78,7 @@ export default function LLMPopover({
       ? () => trigger
       : () => (
           <button
-            className="dark:text-[#fff] text-[#000] focus:outline-none"
+            className="dark:text-white text-black focus:outline-none"
             data-testid="llm-popover-trigger"
           >
             <ChatInputOption
@@ -154,7 +154,7 @@ export default function LLMPopover({
                   >
                     {icon({
                       size: 16,
-                      className: "flex-none my-auto text-black",
+                      className: "flex-none my-auto text-strong dark:text-white",
                     })}
                     <TruncatedText text={getDisplayNameForModel(modelName)} />
                     {(() => {
diff --git a/web/src/app/chat/message/AgenticMessage.tsx b/web/src/app/chat/message/AgenticMessage.tsx
index 4ac364774e9..ebac5532537 100644
--- a/web/src/app/chat/message/AgenticMessage.tsx
+++ b/web/src/app/chat/message/AgenticMessage.tsx
@@ -475,7 +475,7 @@ export const AgenticMessage = ({
                     <>
                       <div className="w-full  py-4 flex flex-col gap-4">
                         <div className="flex items-center gap-x-2 px-4">
-                          <div className="text-black text-lg font-medium">
+                          <div className="text-strong dark:text-white text-lg font-medium">
                             Answer
                           </div>
                         </div>
@@ -502,7 +502,7 @@ export const AgenticMessage = ({
                     </>
                   ) : isComplete ? (
                     error && (
-                      <p className="mt-2 mx-4 text-red-700 text-sm my-auto">
+                      <p className="mt-2 mx-4 text-red-700 dark:text-red-400 text-sm my-auto">
                         <ErrorBanner error={error} resubmit={resubmit} />
                       </p>
                     )
diff --git a/web/src/app/chat/message/Resubmit.tsx b/web/src/app/chat/message/Resubmit.tsx
index c8febd55a81..4d8b011e496 100644
--- a/web/src/app/chat/message/Resubmit.tsx
+++ b/web/src/app/chat/message/Resubmit.tsx
@@ -36,7 +36,7 @@ export const ErrorBanner = ({
   resubmit?: () => void;
 }) => {
   return (
-    <div className="text-red-700 mt-4 text-sm my-auto">
+    <div className="text-red-700 dark:text-red-400 mt-4 text-sm my-auto">
       <Alert variant="broken">
         <AlertCircle className="h-4 w-4" />
         <AlertTitle>Error</AlertTitle>
diff --git a/web/src/app/chat/message/SourcesDisplay.tsx b/web/src/app/chat/message/SourcesDisplay.tsx
index ae2b9a4fd97..f945680394e 100644
--- a/web/src/app/chat/message/SourcesDisplay.tsx
+++ b/web/src/app/chat/message/SourcesDisplay.tsx
@@ -185,7 +185,7 @@ export const SourcesDisplay: React.FC<SourcesDisplayProps> = ({
       }`}
     >
       <div className="flex items-center px-4">
-        <div className="text-black text-lg font-medium">Sources</div>
+        <div className="text-strong dark:text-white text-lg font-medium">Sources</div>
       </div>
       <div
         className={`grid  w-full ${
diff --git a/web/src/app/chat/message/SubQuestionsDisplay.tsx b/web/src/app/chat/message/SubQuestionsDisplay.tsx
index 437b47be16d..73187571606 100644
--- a/web/src/app/chat/message/SubQuestionsDisplay.tsx
+++ b/web/src/app/chat/message/SubQuestionsDisplay.tsx
@@ -340,7 +340,7 @@ const SubQuestionDisplay: React.FC<{
             className="flex -mx-2 rounded-md px-2 hover:bg-background-100 dark:hover:bg-neutral-800 items-start py-1.5 my-.5 cursor-pointer"
             onClick={() => setToggled(!toggled)}
           >
-            <div className="text-black text-base font-medium leading-normal flex-grow pr-2">
+            <div className="text-strong dark:text-white text-base font-medium leading-normal flex-grow pr-2">
               {subQuestion?.question || temporaryDisplay?.question}
             </div>
             <ChevronDown
@@ -407,7 +407,7 @@ const SubQuestionDisplay: React.FC<{
                               );
                             })
                           ) : (
-                            <div className="text-black text-sm font-medium">
+                            <div className="text-strong dark:text-white text-sm font-medium">
                               No sources found
                             </div>
                           )}
diff --git a/web/src/app/chat/my-documents/MyDocumenItem.tsx b/web/src/app/chat/my-documents/MyDocumenItem.tsx
index 52ed779786c..864140925c8 100644
--- a/web/src/app/chat/my-documents/MyDocumenItem.tsx
+++ b/web/src/app/chat/my-documents/MyDocumenItem.tsx
@@ -84,7 +84,7 @@ export function FolderItem({
       onDrop={(e) => onDrop(e, folder.id)}
     >
       <div className="flex items-center">
-        <FolderIcon className="h-5 w-5 text-black dark:text-black shrink-0 fill-black dark:fill-black" />
+        <FolderIcon className="h-5 w-5 text-neutral-700 dark:text-neutral-300 shrink-0 fill-neutral-700 dark:fill-neutral-300" />
         {isEditing ? (
           <div className="flex items-center">
             <input
diff --git a/web/src/app/chat/my-documents/[id]/components/DocumentList.tsx b/web/src/app/chat/my-documents/[id]/components/DocumentList.tsx
index 866d58472f6..93256f6744e 100644
--- a/web/src/app/chat/my-documents/[id]/components/DocumentList.tsx
+++ b/web/src/app/chat/my-documents/[id]/components/DocumentList.tsx
@@ -600,7 +600,7 @@ export const DocumentList: React.FC<DocumentListProps> = ({
                 {uploadingFiles.map((uploadingFile, index) => (
                   <div
                     key={`uploading-${index}`}
-                    className={`group relative flex cursor-pointer items-center border-b border-border dark:border-border-200 hover:bg-[#f2f0e8]/50 dark:hover:bg-[#1a1a1a]/50 py-4 px-4 transition-all ease-in-out ${
+                    className={`group relative flex cursor-pointer items-center border-b border-border dark:border-border-200 hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 py-4 px-4 transition-all ease-in-out ${
                       completedFiles.includes(uploadingFile.name)
                         ? "bg-green-50/30 dark:bg-green-900/10"
                         : ""
diff --git a/web/src/app/chat/my-documents/components/FileListItem.tsx b/web/src/app/chat/my-documents/components/FileListItem.tsx
index 53ab8b21867..a20555b2cf7 100644
--- a/web/src/app/chat/my-documents/components/FileListItem.tsx
+++ b/web/src/app/chat/my-documents/components/FileListItem.tsx
@@ -187,7 +187,7 @@ export const FileListItem: React.FC<FileListItemProps> = ({
 
   return (
     <div
-      className="group relative flex cursor-pointer items-center border-b border-border dark:border-border-200 hover:bg-[#f2f0e8]/50 dark:hover:bg-[#1a1a1a]/50 py-3 px-4 transition-all ease-in-out"
+      className="group relative flex cursor-pointer items-center border-b border-border dark:border-border-200 hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 py-3 px-4 transition-all ease-in-out"
       onClick={(e) => {
         if (!(e.target as HTMLElement).closest(".action-menu")) {
           onSelect && onSelect(file);
diff --git a/web/src/app/chat/my-documents/components/FilePicker.tsx b/web/src/app/chat/my-documents/components/FilePicker.tsx
index 3341b3fc5b7..ea60254a58f 100644
--- a/web/src/app/chat/my-documents/components/FilePicker.tsx
+++ b/web/src/app/chat/my-documents/components/FilePicker.tsx
@@ -241,7 +241,7 @@ const FilePickerFolderItem: React.FC<{
       >
         <div className="flex items-center flex-1 min-w-0" onClick={onClick}>
           <div className="flex text-sm items-center gap-2 w-[65%] min-w-0">
-            <FolderIcon className="h-5 w-5 text-black dark:text-black shrink-0 fill-black dark:fill-black" />
+            <FolderIcon className="h-5 w-5 text-neutral-700 dark:text-neutral-300 shrink-0 fill-neutral-700 dark:fill-neutral-300" />
 
             {folder.name.length > 40 ? (
               <TooltipProvider>
diff --git a/web/src/app/chat/my-documents/components/SearchResultItem.tsx b/web/src/app/chat/my-documents/components/SearchResultItem.tsx
index 4d5ccf1b5de..3ef531d4b09 100644
--- a/web/src/app/chat/my-documents/components/SearchResultItem.tsx
+++ b/web/src/app/chat/my-documents/components/SearchResultItem.tsx
@@ -58,7 +58,7 @@ export const SearchResultItem: React.FC<SearchResultItemProps> = ({
       <a
         className={`flex items-center flex-grow ${
           view === "list" ? "w-full" : "w-4/5"
-        } p-3 rounded-lg hover:bg-[#F3F2EA]/60 transition-colors duration-200`}
+        } p-3 rounded-lg hover:bg-neutral-100/60 dark:hover:bg-neutral-800/60 transition-colors duration-200`}
         href="#"
         onClick={(e) => {
           e.preventDefault();
diff --git a/web/src/app/chat/my-documents/components/SelectedItemsList.tsx b/web/src/app/chat/my-documents/components/SelectedItemsList.tsx
index 1a3b71ec99a..adf4844e5d2 100644
--- a/web/src/app/chat/my-documents/components/SelectedItemsList.tsx
+++ b/web/src/app/chat/my-documents/components/SelectedItemsList.tsx
@@ -56,7 +56,7 @@ export const SelectedItemsList: React.FC<SelectedItemsListProps> = ({
                   )}
                 >
                   <div className="flex items-center min-w-0 flex-1">
-                    <FolderIcon className="h-5 w-5 mr-2 text-black dark:text-black shrink-0 fill-black dark:fill-black" />
+                    <FolderIcon className="h-5 w-5 mr-2 text-neutral-700 dark:text-neutral-300 shrink-0 fill-neutral-700 dark:fill-neutral-300" />
 
                     <span className="text-sm font-medium truncate text-neutral-800 dark:text-neutral-100">
                       {truncateString(folder.name, 34)}
diff --git a/web/src/app/chat/my-documents/components/SharedFolderItem.tsx b/web/src/app/chat/my-documents/components/SharedFolderItem.tsx
index 03e07590943..cd5dff9f5f7 100644
--- a/web/src/app/chat/my-documents/components/SharedFolderItem.tsx
+++ b/web/src/app/chat/my-documents/components/SharedFolderItem.tsx
@@ -45,7 +45,7 @@ export const SharedFolderItem: React.FC<SharedFolderItemProps> = ({
   return (
     <>
       <div
-        className="group relative flex cursor-pointer items-center border-b border-border dark:border-border-200 hover:bg-[#f2f0e8]/50 dark:hover:bg-[#1a1a1a]/50 py-3 px-4 transition-all ease-in-out"
+        className="group relative flex cursor-pointer items-center border-b border-border dark:border-border-200 hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 py-3 px-4 transition-all ease-in-out"
         onClick={(e) => {
           if (!(e.target as HTMLElement).closest(".action-menu")) {
             e.preventDefault();
@@ -55,7 +55,7 @@ export const SharedFolderItem: React.FC<SharedFolderItemProps> = ({
       >
         <div className="flex items-center flex-1 min-w-0">
           <div className="flex items-center gap-3 w-[40%]">
-            <FolderIcon className="h-5 w-5 text-black dark:text-black shrink-0 fill-black dark:fill-black" />
+            <FolderIcon className="h-5 w-5 text-neutral-700 dark:text-neutral-300 shrink-0 fill-neutral-700 dark:fill-neutral-300" />
             {folder.name.length > 50 ? (
               <TooltipProvider>
                 <Tooltip>
diff --git a/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx b/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
index 7fba199d182..d2e74392b21 100644
--- a/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
+++ b/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
@@ -382,7 +382,7 @@ export function SharedChatDisplay({
                               currentPersona={persona}
                               messageId={message.messageId}
                               content={
-                                <p className="text-red-700 text-sm my-auto">
+                                <p className="text-red-700 dark:text-red-400 text-sm my-auto">
                                   {message.message}
                                 </p>
                               }
diff --git a/web/src/components/Hoverable.tsx b/web/src/components/Hoverable.tsx
index 2bfc282615f..ca33c3830e2 100644
--- a/web/src/components/Hoverable.tsx
+++ b/web/src/components/Hoverable.tsx
@@ -17,7 +17,7 @@ export const Hoverable: React.FC<{
       <div className="flex items-center">
         <Icon
           size={size}
-          className="dark:text-[#B4B4B4] text-neutral-600  rounded h-fit cursor-pointer"
+          className="dark:text-neutral-400 text-neutral-600  rounded h-fit cursor-pointer"
         />
         {hoverText && (
           <div className="max-w-0 leading-none whitespace-nowrap overflow-hidden transition-all duration-300 ease-in-out group-hover:max-w-xs group-hover:ml-2">
@@ -35,7 +35,7 @@ export const HoverableIcon: React.FC<{
 }> = ({ icon, onClick }) => {
   return (
     <div
-      className="hover:bg-background-chat-hover dark:text-[#B4B4B4] text-neutral-600 p-1.5 rounded h-fit cursor-pointer"
+      className="hover:bg-background-chat-hover dark:text-neutral-400 text-neutral-600 p-1.5 rounded h-fit cursor-pointer"
       onClick={onClick}
     >
       {icon}
diff --git a/web/src/components/Spinner.tsx b/web/src/components/Spinner.tsx
index c4034465b7c..4d5bc9907ae 100644
--- a/web/src/components/Spinner.tsx
+++ b/web/src/components/Spinner.tsx
@@ -2,7 +2,7 @@ import "./spinner.css";
 
 export const Spinner = () => {
   return (
-    <div className="fixed top-0 left-0 z-50 w-screen h-screen bg-[#000] bg-opacity-50 flex items-center justify-center">
+    <div className="fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-50 flex items-center justify-center">
       <div className="loader ease-linear rounded-full border-8 border-t-8 border-background-200 h-8 w-8"></div>
     </div>
   );
diff --git a/web/src/components/UserDropdown.tsx b/web/src/components/UserDropdown.tsx
index 56631ba3af6..6b8701750c8 100644
--- a/web/src/components/UserDropdown.tsx
+++ b/web/src/components/UserDropdown.tsx
@@ -34,7 +34,7 @@ const DropdownOption: React.FC<DropdownOptionProps> = ({
   openInNewTab,
 }) => {
   const content = (
-    <div className="flex py-1.5 text-sm px-2 gap-x-2 text-black text-sm cursor-pointer rounded hover:bg-background-300">
+    <div className="flex py-1.5 text-sm px-2 gap-x-2 text-strong dark:text-neutral-200 text-sm cursor-pointer rounded hover:bg-background-300">
       {icon}
       {label}
     </div>
@@ -176,7 +176,7 @@ export function UserDropdown({
                 border 
                 border-border 
                 bg-background
-                dark:bg-[#2F2F2F]
+                dark:bg-neutral-800
                 rounded-lg
                 shadow-lg 
                 flex 
diff --git a/web/src/components/admin/CardSection.tsx b/web/src/components/admin/CardSection.tsx
index 68dbef2ba5c..a8dc9c21bc9 100644
--- a/web/src/components/admin/CardSection.tsx
+++ b/web/src/components/admin/CardSection.tsx
@@ -11,7 +11,7 @@ export default function CardSection({
   return (
     <div
       className={cn(
-        "p-6 border bg-[#fff] dark:bg-neutral-800 rounded border-neutral-200 dark:border-neutral-700",
+        "p-6 border bg-white dark:bg-neutral-800 rounded border-neutral-200 dark:border-neutral-700",
         className
       )}
     >
diff --git a/web/src/components/admin/ClientLayout.tsx b/web/src/components/admin/ClientLayout.tsx
index 54b49487cb0..e1d5ba4b65f 100644
--- a/web/src/components/admin/ClientLayout.tsx
+++ b/web/src/components/admin/ClientLayout.tsx
@@ -457,7 +457,7 @@ export function ClientLayout({
         </div>
       )}
 
-      <div className="default-scrollbar flex-none text-text-settings-sidebar bg-background-sidebar dark:bg-[#000] w-[250px] overflow-x-hidden z-20 pt-2 pb-8 h-full border-r border-border dark:border-none miniscroll overflow-auto">
+      <div className="default-scrollbar flex-none text-text-settings-sidebar bg-background-sidebar dark:bg-neutral-950 w-[250px] overflow-x-hidden z-20 pt-2 pb-8 h-full border-r border-border dark:border-none miniscroll overflow-auto">
         <AdminSidebar
           collections={collections(
             isCurator,
diff --git a/web/src/components/admin/connectors/Popup.tsx b/web/src/components/admin/connectors/Popup.tsx
index 28a2213785e..0cf5a92791b 100644
--- a/web/src/components/admin/connectors/Popup.tsx
+++ b/web/src/components/admin/connectors/Popup.tsx
@@ -6,7 +6,7 @@ import { Warning } from "@phosphor-icons/react";
 import { NEXT_PUBLIC_INCLUDE_ERROR_POPUP_SUPPORT_LINK } from "@/lib/constants";
 
 const popupVariants = cva(
-  "fixed bottom-4 left-4 p-4 rounded-lg shadow-xl text-[#fff] z-[10000] flex items-center space-x-3 transition-all duration-300 ease-in-out",
+  "fixed bottom-4 left-4 p-4 rounded-lg shadow-xl text-white z-[10000] flex items-center space-x-3 transition-all duration-300 ease-in-out",
   {
     variants: {
       type: {
diff --git a/web/src/components/assistants/AssistantCards.tsx b/web/src/components/assistants/AssistantCards.tsx
index 8f8651b833f..403fac8a189 100644
--- a/web/src/components/assistants/AssistantCards.tsx
+++ b/web/src/components/assistants/AssistantCards.tsx
@@ -52,7 +52,7 @@ export const AssistantCard = ({
         <AssistantIcon size="xs" assistant={assistant} />
         <div className="overflow-hidden text-ellipsis break-words flex-grow">
           <div className="flex items-start justify-start gap-2">
-            <span className="line-clamp-1 text-sm text-black font-semibold leading-tight">
+            <span className="line-clamp-1 text-sm text-strong dark:text-neutral-200 font-semibold leading-tight">
               {assistant.name}
             </span>
             {assistant.tools.map((tool, index) => (
diff --git a/web/src/components/embedding/EmbeddingSidebar.tsx b/web/src/components/embedding/EmbeddingSidebar.tsx
index e474b58ecef..ca08e56fd8e 100644
--- a/web/src/components/embedding/EmbeddingSidebar.tsx
+++ b/web/src/components/embedding/EmbeddingSidebar.tsx
@@ -48,7 +48,7 @@ export default function EmbeddingSidebar() {
           <div className="mx-3 mt-6 gap-y-1 flex-col flex gap-x-1.5 items-center items-center">
             <Link
               href={"/admin/configuration/search"}
-              className="w-full p-2 bg-[#fff] dark:bg-neutral-950 border-border border dark:border-neutral-800 dark:hover:bg-neutral-900 rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
+              className="w-full p-2 bg-white dark:bg-neutral-950 border-border border dark:border-neutral-800 dark:hover:bg-neutral-900 rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
             >
               <SettingsIcon className="flex-none " />
               <p className="my-auto flex items-center text-sm">
diff --git a/web/src/components/embedding/FailedReIndexAttempts.tsx b/web/src/components/embedding/FailedReIndexAttempts.tsx
index 1b34672ca19..8e1c73c71f8 100644
--- a/web/src/components/embedding/FailedReIndexAttempts.tsx
+++ b/web/src/components/embedding/FailedReIndexAttempts.tsx
@@ -35,7 +35,7 @@ export function FailedReIndexAttempts({
 
   return (
     <div className="mt-6 mb-8 p-4 border border-red-300 rounded-lg bg-red-50">
-      <Text className="text-red-700 font-semibold mb-2">
+      <Text className="text-red-700 dark:text-red-400 font-semibold mb-2">
         Failed Re-indexing Attempts
       </Text>
       <Text className="text-red-600 mb-4">
diff --git a/web/src/components/extension/Shortcuts.tsx b/web/src/components/extension/Shortcuts.tsx
index 41f33003cd2..20b2e5444d9 100644
--- a/web/src/components/extension/Shortcuts.tsx
+++ b/web/src/components/extension/Shortcuts.tsx
@@ -36,15 +36,15 @@ export const ShortCut = ({
   const [faviconError, setFaviconError] = useState(false);
 
   return (
-    <div className="w-24 h-24 flex-none rounded-xl shadow-lg relative group transition-all duration-300 ease-in-out hover:scale-105 bg-[#fff]/10 backdrop-blur-sm">
+    <div className="w-24 h-24 flex-none rounded-xl shadow-lg relative group transition-all duration-300 ease-in-out hover:scale-105 bg-white/10 backdrop-blur-sm">
       <button
         onClick={(e) => {
           e.stopPropagation();
           onEdit(shortCut);
         }}
-        className="absolute top-1 right-1 p-1 bg-[#fff]/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+        className="absolute top-1 right-1 p-1 bg-white/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200"
       >
-        <PencilIcon className="w-3 h-3 text-[#fff]" />
+        <PencilIcon className="w-3 h-3 text-white" />
       </button>
       <div
         onClick={() => window.open(shortCut.url, "_blank")}
@@ -61,10 +61,10 @@ export const ShortCut = ({
               onError={() => setFaviconError(true)}
             />
           ) : (
-            <QuestionMarkIcon size={32} className="text-[#fff] w-full h-full" />
+            <QuestionMarkIcon size={32} className="text-white w-full h-full" />
           )}
         </div>
-        <h1 className="text-[#fff] w-full text-center font-semibold text-sm truncate px-2">
+        <h1 className="text-white w-full text-center font-semibold text-sm truncate px-2">
           {shortCut.name}
         </h1>
       </div>
@@ -80,10 +80,10 @@ export const AddShortCut = ({
   return (
     <button
       onClick={openShortCutModal}
-      className="w-24 h-24 flex-none rounded-xl bg-[#fff]/10 hover:bg-[#fff]/20 backdrop-blur-sm transition-all duration-300 ease-in-out flex flex-col items-center justify-center"
+      className="w-24 h-24 flex-none rounded-xl bg-white/10 hover:bg-white/20 backdrop-blur-sm transition-all duration-300 ease-in-out flex flex-col items-center justify-center"
     >
-      <PlusIcon className="w-8 h-8 text-[#fff] mb-2" />
-      <h1 className="text-[#fff] text-xs font-medium">New Bookmark</h1>
+      <PlusIcon className="w-8 h-8 text-white mb-2" />
+      <h1 className="text-white text-xs font-medium">New Bookmark</h1>
     </button>
   );
 };
@@ -145,7 +145,7 @@ export const NewShortCutModal = ({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[95%] sm:max-w-[425px] bg-background-900 border-none text-[#fff]">
+      <DialogContent className="max-w-[95%] sm:max-w-[425px] bg-background-900 border-none text-white">
         <DialogHeader>
           <DialogTitle>
             {editingShortcut ? "Edit Shortcut" : "Add New Shortcut"}
@@ -169,7 +169,7 @@ export const NewShortCutModal = ({
                 id="name"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                className="w-full bg-background-800 border-background-700 text-[#fff]"
+                className="w-full bg-background-800 border-background-700 text-white"
                 placeholder="Enter shortcut name"
               />
             </div>
@@ -184,7 +184,7 @@ export const NewShortCutModal = ({
                 id="url"
                 value={url}
                 onChange={handleUrlChange}
-                className={`bg-background-800 border-background-700 text-[#fff] ${
+                className={`bg-background-800 border-background-700 text-white ${
                   !isValidUrl && url ? "border-red-500" : ""
                 }`}
                 placeholder="https://example.com"
@@ -216,7 +216,7 @@ export const NewShortCutModal = ({
           <DialogFooter>
             <Button
               type="submit"
-              className="bg-blue-600 hover:bg-blue-700 text-[#fff]"
+              className="bg-blue-600 hover:bg-blue-700 text-white"
               disabled={!isValidUrl || !name}
             >
               {editingShortcut ? "Save Changes" : "Add Shortcut"}
diff --git a/web/src/components/header/HeaderTitle.tsx b/web/src/components/header/HeaderTitle.tsx
index bf4c1dc7d68..777f22aaee2 100644
--- a/web/src/components/header/HeaderTitle.tsx
+++ b/web/src/components/header/HeaderTitle.tsx
@@ -21,7 +21,7 @@ export function HeaderTitle({
         backgroundToggled
           ? "text-text-sidebar-toggled-header"
           : "text-text-sidebar-header"
-      } break-words dark:text-[#fff] text-left line-clamp-2 ellipsis text-strong overflow-hidden leading-none font-bold`}
+      } break-words dark:text-white text-left line-clamp-2 ellipsis text-strong overflow-hidden leading-none font-bold`}
     >
       {children}
     </h1>
diff --git a/web/src/components/modals/NewTeamModal.tsx b/web/src/components/modals/NewTeamModal.tsx
index 4e8a24e16a7..df2d7ec98d4 100644
--- a/web/src/components/modals/NewTeamModal.tsx
+++ b/web/src/components/modals/NewTeamModal.tsx
@@ -131,14 +131,14 @@ export function NewTeamModal() {
       className="relative z-[1000]"
     >
       {/* Modal backdrop */}
-      <div className="fixed inset-0 bg-[#000]/50" aria-hidden="true" />
+      <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
 
       <div className="fixed inset-0 flex items-center justify-center p-4">
         <Dialog.Panel className="mx-auto w-full max-w-md rounded-lg bg-white dark:bg-neutral-800 p-6 shadow-xl border border-neutral-200 dark:border-neutral-700">
           <Dialog.Title className="text-xl font-semibold mb-4 flex items-center">
             {hasRequestedInvite ? (
               <>
-                <CheckCircle className="mr-2 h-5 w-5 text-neutral-900 dark:text-[#fff]" />
+                <CheckCircle className="mr-2 h-5 w-5 text-neutral-900 dark:text-white" />
                 Join Request Sent
               </>
             ) : (
diff --git a/web/src/components/modals/NewTenantModal.tsx b/web/src/components/modals/NewTenantModal.tsx
index 62d8aa65e2a..e95d446adf1 100644
--- a/web/src/components/modals/NewTenantModal.tsx
+++ b/web/src/components/modals/NewTenantModal.tsx
@@ -135,7 +135,7 @@ export default function NewTenantModal({
   return (
     <Dialog open={isOpen} onClose={handleClose} className="relative z-[1000]">
       {/* Modal backdrop */}
-      <div className="fixed inset-0 bg-[#000]/50" aria-hidden="true" />
+      <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
 
       <div className="fixed inset-0 flex items-center justify-center p-4">
         <Dialog.Panel className="mx-auto w-full max-w-md rounded-lg bg-white dark:bg-neutral-800 p-6 shadow-xl border border-neutral-200 dark:border-neutral-700">
diff --git a/web/src/components/search/results/Citation.tsx b/web/src/components/search/results/Citation.tsx
index 08b8c7aaf0e..96ab6dce8b2 100644
--- a/web/src/components/search/results/Citation.tsx
+++ b/web/src/components/search/results/Citation.tsx
@@ -85,7 +85,7 @@ export function Citation({
           </span>
         </TooltipTrigger>
         <TooltipContent
-          className="border border-neutral-300  hover:text-neutral-900 bg-neutral-100 dark:!bg-[#000] dark:border-neutral-700"
+          className="border border-neutral-300  hover:text-neutral-900 bg-neutral-100 dark:!bg-neutral-950 dark:border-neutral-700"
           width="mb-2 max-w-lg"
         >
           {document_info?.document ? (
diff --git a/web/src/components/sidebar/ChatSessionDisplay.tsx b/web/src/components/sidebar/ChatSessionDisplay.tsx
index c6f64d14741..c8ff07bff9e 100644
--- a/web/src/components/sidebar/ChatSessionDisplay.tsx
+++ b/web/src/components/sidebar/ChatSessionDisplay.tsx
@@ -267,7 +267,7 @@ export function ChatSessionDisplay({
                     </div>
                   </div>
                 ) : (
-                  <p className="break-all font-normal overflow-hidden dark:text-[#D4D4D4] whitespace-nowrap w-full mr-3 relative">
+                  <p className="break-all font-normal overflow-hidden dark:text-neutral-300 whitespace-nowrap w-full mr-3 relative">
                     {chatName || `Unnamed Chat`}
                     <span
                       className={`absolute right-0 top-0 h-full w-2 bg-gradient-to-r from-transparent 
diff --git a/web/src/components/sidebar/HistorySidebar.tsx b/web/src/components/sidebar/HistorySidebar.tsx
index 130ea332315..574ebeae455 100644
--- a/web/src/components/sidebar/HistorySidebar.tsx
+++ b/web/src/components/sidebar/HistorySidebar.tsx
@@ -130,7 +130,7 @@ const SortableAssistant: React.FC<SortableAssistantProps> = ({
       >
         <AssistantIcon assistant={assistant} size={16} className="flex-none" />
         <TruncatedText
-          className="text-base mr-4 text-left w-fit line-clamp-1 text-ellipsis text-black dark:text-[#D4D4D4]"
+          className="text-base mr-4 text-left w-fit line-clamp-1 text-ellipsis text-strong dark:text-neutral-300"
           text={assistant.name}
         />
 
@@ -267,8 +267,8 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             w-full
             border-r 
             dark:border-none
-            dark:text-[#D4D4D4]
-            dark:bg-[#000]
+            dark:text-neutral-300
+            dark:bg-neutral-950
             border-sidebar-border 
             flex 
             flex-col relative
@@ -339,7 +339,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             </div>
           )}
           <div className="h-full  relative overflow-x-hidden overflow-y-auto">
-            <div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-text-500/80 dark:text-[#D4D4D4] items-center font-normal leading-normal">
+            <div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-text-500/80 dark:text-neutral-300 items-center font-normal leading-normal">
               Assistants
             </div>
             <DndContext
@@ -408,7 +408,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
               <button
                 aria-label="Explore Assistants"
                 onClick={() => setShowAssistantsModal(true)}
-                className="w-full cursor-pointer text-base text-black dark:text-[#D4D4D4] hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md"
+                className="w-full cursor-pointer text-base text-strong dark:text-neutral-300 hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md"
               >
                 Explore Assistants
               </button>
diff --git a/web/src/components/sidebar/PagesTab.tsx b/web/src/components/sidebar/PagesTab.tsx
index c433968a7d9..43ac25b4b7b 100644
--- a/web/src/components/sidebar/PagesTab.tsx
+++ b/web/src/components/sidebar/PagesTab.tsx
@@ -330,7 +330,7 @@ export function PagesTab({
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
-                  className="my-auto mr-auto  group-hover:opacity-100 opacity-0 transition duration-200 cursor-pointer gap-x-1 items-center text-black text-xs font-medium leading-normal mobile:hidden"
+                  className="my-auto mr-auto  group-hover:opacity-100 opacity-0 transition duration-200 cursor-pointer gap-x-1 items-center text-strong dark:text-neutral-200 text-xs font-medium leading-normal mobile:hidden"
                   onClick={() => {
                     toggleChatSessionSearchModal?.();
                   }}
@@ -347,7 +347,7 @@ export function PagesTab({
 
           <button
             onClick={handleCreateFolder}
-            className="flex group-hover:opacity-100 opacity-0 transition duration-200 cursor-pointer gap-x-1 items-center text-black text-xs font-medium leading-normal"
+            className="flex group-hover:opacity-100 opacity-0 transition duration-200 cursor-pointer gap-x-1 items-center text-strong dark:text-neutral-200 text-xs font-medium leading-normal"
           >
             <FiPlus size={12} className="flex-none" />
             Create Group
diff --git a/web/src/components/ui/alert.tsx b/web/src/components/ui/alert.tsx
index ca648c79874..3ca244422a5 100644
--- a/web/src/components/ui/alert.tsx
+++ b/web/src/components/ui/alert.tsx
@@ -11,7 +11,7 @@ const alertVariants = cva(
         broken:
           "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-100 dark:dark:border-red-900 dark:[&>svg]:text-red-700 bg-red-50 dark:bg-red-950",
         ark: "border-amber-500/50 text-amber-500 dark:border-amber-500 [&>svg]:text-amber-500 dark:border-amber-900/50 dark:text-amber-900 dark:dark:border-amber-900 dark:[&>svg]:text-amber-900 bg-amber-50 dark:bg-amber-950",
-        info: "border-[#fff]/50 dark:border-[#fff] dark:border-[#fff]/50 dark:dark:border-[#fff]",
+        info: "border-white/50 dark:border-white dark:border-white/50 dark:dark:border-white",
         default:
           "bg-neutral-50 text-neutral-darker dark:bg-neutral-950 dark:text-text",
         destructive:
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 54182f2c6ae..9952a7a822d 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-[#fff] transition-colors focus-visible:outline-none  disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none  disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -15,7 +15,7 @@ const buttonVariants = cva(
         success:
           "bg-green-100 text-green-600 hover:bg-green-500/90 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600/90",
         "success-reverse":
-          "bg-green-600 text-[#fff] hover:bg-green-700 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600",
+          "bg-green-600 text-white hover:bg-green-700 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600",
         default:
           "bg-neutral-900 border-border text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200",
         "default-reverse":
@@ -25,7 +25,7 @@ const buttonVariants = cva(
         "destructive-reverse":
           "bg-neutral-50 text-red-500 hover:bg-neutral-50/90 dark:bg-red-100 dark:text-red-700 dark:hover:bg-red-200",
         outline:
-          "border border-neutral-300 bg-[#fff] hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:hover:text-neutral-50",
+          "border border-neutral-300 bg-white hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:hover:text-neutral-50",
         create:
           "border border-neutral-300 bg-neutral-50 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 transition-colors duration-200 ease-in-out shadow-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-50",
         "outline-reverse":
@@ -46,9 +46,9 @@ const buttonVariants = cva(
         "submit-reverse":
           "bg-neutral-50 text-blue-600 hover:bg-neutral-50/80 dark:bg-blue-100 dark:text-blue-800 dark:hover:bg-blue-200",
         navigate:
-          "bg-blue-500 text-[#fff] hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600",
+          "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600",
         "navigate-reverse":
-          "bg-[#fff] text-blue-500 hover:bg-blue-50 dark:bg-blue-100 dark:text-blue-800 dark:hover:bg-blue-200",
+          "bg-white text-blue-500 hover:bg-blue-50 dark:bg-blue-100 dark:text-blue-800 dark:hover:bg-blue-200",
         update:
           "border border-neutral-300 bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600",
         "update-reverse":
diff --git a/web/src/components/ui/callout.tsx b/web/src/components/ui/callout.tsx
index 5ccd3d6b78b..ba92f3d6363 100644
--- a/web/src/components/ui/callout.tsx
+++ b/web/src/components/ui/callout.tsx
@@ -33,7 +33,7 @@ export function Callout({
       {icon && <span className="mr-4 text-2xl">{icon}</span>}
       <div className="flex-1">
         {title && (
-          <div className="font-medium mb-1 flex items-center dark:text-[#fff]">
+          <div className="font-medium mb-1 flex items-center dark:text-white">
             {title}
           </div>
         )}