diff --git a/web/src/app/admin/connectors/[connector]/Sidebar.tsx b/web/src/app/admin/connectors/[connector]/Sidebar.tsx
index e227159ed9d..e821d14ef9c 100644
--- a/web/src/app/admin/connectors/[connector]/Sidebar.tsx
+++ b/web/src/app/admin/connectors/[connector]/Sidebar.tsx
@@ -62,11 +62,11 @@ export default function Sidebar() {
   ];
 
   return (
-    <div className="flex flex-none w-[250px] bg-background text-default">
+    <div className="flex flex-none w-[250px] text-default">
       <div
         className={`
                   fixed
-                  bg-background-100
+                  bg-background-sidebar
                   h-screen
                   transition-all
                   bg-opacity-80
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 51121621396..f1facd4ed29 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -1941,7 +1941,7 @@ export function ChatPage({
                   page="chat"
                   ref={innerSidebarElementRef}
                   toggleSidebar={toggleSidebar}
-                  toggled={toggledSidebar && !settings?.isMobile}
+                  toggled={toggledSidebar}
                   backgroundToggled={toggledSidebar || showDocSidebar}
                   existingChats={chatSessions}
                   currentChatSession={selectedChatSession}
diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
index c420a3f53e9..3942d9fe912 100644
--- a/web/src/app/chat/message/Messages.tsx
+++ b/web/src/app/chat/message/Messages.tsx
@@ -819,6 +819,7 @@ export const HumanMessage = ({
                         outline-none 
                         placeholder-gray-400 
                         resize-none
+                        text-text-editing-message
                         pl-4
                         overflow-y-auto
                         pr-12 
@@ -877,7 +878,6 @@ export const HumanMessage = ({
                           py-2 
                           px-3 
                           w-fit 
-                          bg-hover
                           bg-background-strong 
                           text-sm
                           rounded-lg
@@ -903,15 +903,13 @@ export const HumanMessage = ({
                         <TooltipProvider delayDuration={1000}>
                           <Tooltip>
                             <TooltipTrigger>
-                              <button
-                                className="hover:bg-hover p-1.5 rounded"
+                              <HoverableIcon
+                                icon={<FiEdit2 className="text-gray-600" />}
                                 onClick={() => {
                                   setIsEditing(true);
                                   setIsHovered(false);
                                 }}
-                              >
-                                <FiEdit2 className="!h-4 !w-4" />
-                              </button>
+                              />
                             </TooltipTrigger>
                             <TooltipContent>Edit</TooltipContent>
                           </Tooltip>
diff --git a/web/src/app/chat/shared_chat_search/FixedLogo.tsx b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
index 5bf48c27794..b9cc46ff421 100644
--- a/web/src/app/chat/shared_chat_search/FixedLogo.tsx
+++ b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
@@ -49,7 +49,13 @@ export default function FixedLogo({
         </div>
       </Link>
       <div className="mobile:hidden fixed left-2.5 bottom-4">
-        <FiSidebar className="text-text-mobile-sidebar" />
+        <FiSidebar
+          className={`${
+            backgroundToggled
+              ? "text-text-mobile-sidebar-toggled"
+              : "text-text-mobile-sidebar-untoggled"
+          }`}
+        />
       </div>
     </>
   );
diff --git a/web/src/components/UserDropdown.tsx b/web/src/components/UserDropdown.tsx
index 80c6be1785f..e09823b1b41 100644
--- a/web/src/components/UserDropdown.tsx
+++ b/web/src/components/UserDropdown.tsx
@@ -95,7 +95,9 @@ export function UserDropdown({ page }: { page?: pageType }) {
       }
 
       // Construct the current URL
-      const currentUrl = `${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`;
+      const currentUrl = `${pathname}${
+        searchParams.toString() ? `?${searchParams.toString()}` : ""
+      }`;
 
       // Encode the current URL to use as a redirect parameter
       const encodedRedirect = encodeURIComponent(currentUrl);
@@ -130,7 +132,7 @@ export function UserDropdown({ page }: { page?: pageType }) {
             <div
               className="
                 my-auto
-                bg-background-strong
+                bg-userdropdown-background
                 ring-2
                 ring-transparent
                 group-hover:ring-background-300/50
@@ -244,7 +246,11 @@ export function UserDropdown({ page }: { page?: pageType }) {
                     setShowNotifications(true);
                   }}
                   icon={<BellIcon className="h-5 w-5 my-auto mr-2" />}
-                  label={`Notifications ${notifications && notifications.length > 0 ? `(${notifications.length})` : ""}`}
+                  label={`Notifications ${
+                    notifications && notifications.length > 0
+                      ? `(${notifications.length})`
+                      : ""
+                  }`}
                 />
 
                 {showLogout &&
diff --git a/web/src/components/assistants/AssistantBanner.tsx b/web/src/components/assistants/AssistantBanner.tsx
index 688200d9d83..0d080c110b4 100644
--- a/web/src/components/assistants/AssistantBanner.tsx
+++ b/web/src/components/assistants/AssistantBanner.tsx
@@ -41,7 +41,7 @@ export default function AssistantBanner({
             <Tooltip>
               <TooltipTrigger asChild>
                 <div
-                  className="flex w-36 mx-3 py-1.5 scale-[1.] rounded-full border border-background-150  justify-center items-center gap-x-2 py-1 px-3 hover:bg-background-125 transition-colors cursor-pointer"
+                  className="flex w-36 mx-3 py-1.5 scale-[1.] rounded-full border border-border-recent-assistants  justify-center items-center gap-x-2 py-1 px-3 hover:bg-background-recent-assistants-hover transition-colors cursor-pointer"
                   onClick={() => onAssistantChange(assistant)}
                 >
                   <AssistantIcon
@@ -49,7 +49,7 @@ export default function AssistantBanner({
                     size="xs"
                     assistant={assistant}
                   />
-                  <span className="font-semibold text-text-800 text-xs truncate max-w-[120px]">
+                  <span className="font-semibold text-text-recent-assistants text-xs truncate max-w-[120px]">
                     {assistant.name}
                   </span>
                 </div>
diff --git a/web/src/components/header/LogoType.tsx b/web/src/components/header/LogoType.tsx
index b235d112d1b..a14b2be3ac1 100644
--- a/web/src/components/header/LogoType.tsx
+++ b/web/src/components/header/LogoType.tsx
@@ -51,7 +51,14 @@ export default function LogoType({
           onClick={() => toggleSidebar()}
           className="pt-[2px] flex  gap-x-2 items-center ml-4 desktop:invisible mb-auto"
         >
-          <FiSidebar size={20} className="text-text-mobile-sidebar" />
+          <FiSidebar
+            size={20}
+            className={`${
+              toggled
+                ? "text-text-mobile-sidebar-toggled"
+                : "text-text-mobile-sidebar-untoggled"
+            }`}
+          />
           {!showArrow && (
             <Logo className="desktop:hidden -my-2" height={24} width={24} />
           )}
diff --git a/web/src/components/search/SearchAnswer.tsx b/web/src/components/search/SearchAnswer.tsx
index a9fe728b1c2..3ee01f31bf7 100644
--- a/web/src/components/search/SearchAnswer.tsx
+++ b/web/src/components/search/SearchAnswer.tsx
@@ -74,8 +74,9 @@ export default function SearchAnswer({
         searchAnswerExpanded ? "min-h-[16rem]" : "h-[16rem]"
       } ${
         !searchAnswerExpanded && searchAnswerOverflowing && "overflow-y-hidden"
-      } p-4 border-2 border-search-answer-border rounded-lg relative`}
+      } p-4 border-2 border-search-answer-border text-text-search-answer   bg-background-search-answer  rounded-lg relative`}
     >
+      asdfasdf
       <div>
         <div className="flex gap-x-2">
           <h2 className="text-emphasis font-bold my-auto mb-1">AI Answer</h2>
@@ -152,7 +153,6 @@ export default function SearchAnswer({
       {!searchAnswerExpanded && searchAnswerOverflowing && (
         <div className="absolute bottom-0 left-0 w-full h-[100px] bg-gradient-to-b from-background/5 via-background/60 to-background/90"></div>
       )}
-
       {!searchAnswerExpanded && searchAnswerOverflowing && (
         <div className="w-full h-12 absolute items-center content-center flex left-0 px-4 bottom-0">
           <button
diff --git a/web/src/components/search/filtering/Filters.tsx b/web/src/components/search/filtering/Filters.tsx
index bdeb1d8523a..6c032350d33 100644
--- a/web/src/components/search/filtering/Filters.tsx
+++ b/web/src/components/search/filtering/Filters.tsx
@@ -121,7 +121,7 @@ export function SourceSelector({
           </div>
         </PopoverTrigger>
         <PopoverContent
-          className="bg-background border-border border rounded-md z-[200] p-0"
+          className="bg-background-search-filter border-border border rounded-md z-[200] p-0"
           align="start"
         >
           <Calendar
@@ -466,7 +466,6 @@ export function HorizontalSourceSelector({
               max-w-36
               border-border 
               rounded-lg 
-              bg-background
               max-h-96 
               overflow-y-scroll
               overscroll-contain
@@ -478,7 +477,6 @@ export function HorizontalSourceSelector({
               w-fit
               gap-x-1
               hover:bg-hover
-              bg-hover-light
               flex
               items-center
               bg-background-search-filter
@@ -490,22 +488,26 @@ export function HorizontalSourceSelector({
           </div>
         </PopoverTrigger>
         <PopoverContent
-          className="bg-background border-border border rounded-md z-[200] p-0"
+          className="bg-background-search-filter border-border border rounded-md z-[200] p-0"
           align="start"
         >
           <Calendar
-            mode="single"
-            selected={timeRange ? new Date(timeRange.from) : undefined}
-            onSelect={(date) => {
-              const selectedDate = date || new Date();
-              const today = new Date();
+            mode="range"
+            selected={
+              timeRange
+                ? { from: new Date(timeRange.from), to: new Date(timeRange.to) }
+                : undefined
+            }
+            onSelect={(daterange) => {
+              const initialDate = daterange?.from || new Date();
+              const endDate = daterange?.to || new Date();
               setTimeRange({
-                from: selectedDate > today ? today : selectedDate,
-                to: today,
+                from: initialDate,
+                to: endDate,
                 selectValue: timeRange?.selectValue || "",
               });
             }}
-            className="rounded-md "
+            className="rounded-md"
           />
         </PopoverContent>
       </Popover>
diff --git a/web/src/components/search/filtering/TagFilter.tsx b/web/src/components/search/filtering/TagFilter.tsx
index 80a6ee78922..1e25aef26f9 100644
--- a/web/src/components/search/filtering/TagFilter.tsx
+++ b/web/src/components/search/filtering/TagFilter.tsx
@@ -88,7 +88,22 @@ export function TagFilter({
               <div
                 key={tag.tag_key + tag.tag_value}
                 onClick={() => onSelectTag(tag)}
-                className="max-w-full break-all line-clamp-1 text-ellipsis flex text-sm border border-border py-0.5 px-2 rounded cursor-pointer bg-background hover:bg-hover"
+                className={`
+                max-w-full 
+                break-all 
+                line-clamp-1 
+                text-ellipsis 
+                flex 
+                text-sm 
+                border 
+                border-border 
+                py-0.5 
+                px-2 
+                rounded 
+                cursor-pointer 
+                bg-background-search-filter 
+                hover:bg-background-search-filter-dropdown
+                `}
               >
                 {tag.tag_key}
                 <b>=</b>
@@ -109,7 +124,7 @@ export function TagFilter({
         <div className="absolute top-0 right-0 transform translate-x-[105%] z-40">
           <div
             ref={popupRef}
-            className="p-2 border border-border rounded shadow-lg w-72 bg-background"
+            className="p-2 border border-border rounded shadow-lg w-72 bg-background-search-filter"
           >
             <div className="flex border-b border-border font-medium pb-1 text-xs mb-2">
               <FiTag className="mr-1 my-auto" />
@@ -132,7 +147,11 @@ export function TagFilter({
                     cursor-pointer 
                     bg-background 
                     hover:bg-hover
-                    ${selectedTags.includes(tag) ? "bg-hover" : ""}
+                    ${
+                      selectedTags.includes(tag)
+                        ? "bg-background-search-filter-dropdown"
+                        : ""
+                    }
                   `}
                   >
                     {tag.tag_key}
diff --git a/web/src/components/ui/calendar.tsx b/web/src/components/ui/calendar.tsx
index fe751d4a072..33c7320467e 100644
--- a/web/src/components/ui/calendar.tsx
+++ b/web/src/components/ui/calendar.tsx
@@ -34,23 +34,45 @@ function Calendar({
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
-          "text-neutral-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-neutral-400",
+          "text-calendar-text-muted rounded-md w-9 font-normal text-[0.8rem] dark:text-calendar-text-muted-dark",
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800",
+        cell: cn(
+          "h-9 w-9 text-center text-sm p-0 relative",
+          "[&:has([aria-selected].day-range-end)]:rounded-r-md",
+          "[&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected",
+          "[&:has([aria-selected])]:bg-calendar-bg-selected",
+          "first:[&:has([aria-selected])]:rounded-l-md",
+          "last:[&:has([aria-selected])]:rounded-r-md",
+          "focus-within:relative focus-within:z-20",
+          "dark:[&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected-dark",
+          "dark:[&:has([aria-selected])]:bg-calendar-bg-selected-dark"
+        ),
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
-        day_range_end: "day-range-end !text-neutral-200",
-        day_selected:
-          "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
+        day_selected: cn(
+          "bg-calendar-selected text-calendar-text-selected rounded-full",
+          "hover:bg-calendar-selected hover:text-calendar-text-selected",
+          "focus:bg-calendar-selected focus:text-calendar-text-selected"
+        ),
+        day_range_start: cn(
+          "bg-calendar-range-start text-calendar-text-selected rounded-l-full",
+          "hover:bg-calendar-range-start hover:text-calendar-text-selected",
+          "focus:bg-calendar-range-start focus:text-calendar-text-selected"
+        ),
+        day_range_end: cn(
+          "bg-calendar-range-end text-calendar-text-selected rounded-r-full",
+          "hover:bg-calendar-range-end hover:text-calendar-text-selected",
+          "focus:bg-calendar-range-end focus:text-calendar-text-selected"
+        ),
         day_today:
           "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
         day_outside:
           "day-outside text-neutral-500 opacity-50 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 aria-selected:opacity-30 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
         day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
         day_range_middle:
-          "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
+          "aria-selected:bg-calendar-bg-selected aria-selected:text-calendar-text-selected dark:aria-selected:bg-calendar-bg-selected-dark dark:aria-selected:text-calendar-text-selected-dark",
         day_hidden: "invisible",
         ...classNames,
       }}
diff --git a/web/tailwind-themes/UF Themign.js b/web/tailwind-themes/UF Themign.js
new file mode 100644
index 00000000000..1929e3297e7
--- /dev/null
+++ b/web/tailwind-themes/UF Themign.js	
@@ -0,0 +1,399 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  darkMode: "class",
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // tremor
+    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
+  ],
+
+  theme: {
+    transparent: "transparent",
+    current: "currentColor",
+    extend: {
+      transitionProperty: {
+        spacing: "margin, padding",
+      },
+
+      keyframes: {
+        "subtle-pulse": {
+          "0%, 100%": { opacity: 0.9 },
+          "50%": { opacity: 0.5 },
+        },
+        pulse: {
+          "0%, 100%": { opacity: 0.9 },
+          "50%": { opacity: 0.4 },
+        },
+      },
+      animation: {
+        "fade-in-up": "fadeInUp 0.5s ease-out",
+        "subtle-pulse": "subtle-pulse 2s ease-in-out infinite",
+        pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      },
+
+      gradientColorStops: {
+        "neutral-10": "#e5e5e5 5%",
+      },
+      screens: {
+        "2xl": "1420px",
+        "3xl": "1700px",
+        "4xl": "2000px",
+        mobile: { max: "767px" },
+        desktop: "768px",
+      },
+      fontFamily: {
+        sans: ["var(--font-inter)"],
+      },
+      width: {
+        "message-xs": "450px",
+        "message-sm": "550px",
+        "message-default": "740px",
+        "searchbar-xs": "560px",
+        "searchbar-sm": "660px",
+        searchbar: "850px",
+        "document-sidebar": "800px",
+        "document-sidebar-large": "1000px",
+        "searchbar-max": "60px",
+      },
+      maxWidth: {
+        "document-sidebar": "1000px",
+        "message-max": "850px",
+        "content-max": "725px",
+        "searchbar-max": "800px",
+      },
+      colors: {
+        // code styling
+        "code-bg": "var(--black)",
+        "code-text": "var(--code-text)",
+        "token-comment": "var(--token-comment)",
+        "token-punctuation": "var(--token-punctuation)",
+        "token-property": "var(--token-property)",
+        "token-selector": "var(--token-selector)",
+        "token-atrule": "var(--token-atrule)",
+        "token-function": "var(--token-function)",
+        "token-regex": "var(--token-regex)",
+        "token-attr-name": "var(--token-attr-name)",
+        "non-selectable": "var(--non-selectable)",
+
+        // background
+        background: "#EDEDF1",
+        "background-100": "var(--background-100)",
+        "background-125": "var(--background-125)",
+        "background-150": "var(--background-150)",
+        "background-200": "var(--background-200)",
+        "background-300": "var(--background-300)",
+        "background-400": "var(--background-400)",
+        "background-500": "var(--background-500)",
+        "background-600": "var(--background-600)",
+        "background-700": "var(--background-700)",
+        "background-800": "var(--background-800)",
+        "background-900": "var(--background-900)",
+        "background-toggle": "var(--background-100)",
+
+        "toggled-background": "var(--background-500)",
+        "untoggled-background": "var(--background-300)",
+        "background-inverted": "var(--background-inverted)",
+        "background-emphasis": "var(--background-emphasis)",
+        "background-strong": "var(--background-800)",
+        "background-search": "var(--white)",
+
+        "text-history-sidebar-button": "var(--text-900)",
+        "userdropdown-background": "var(--background-300)",
+        "text-sidebar-toggled-header": "var(--text-200)",
+        "text-sidebar-header": "var(--text-900)",
+        "text-sidebar-dark": "var(--text-200)",
+
+        "search-answer-border": "var(--background-300)",
+
+        "background-search-filter": "var(--background-100)",
+        "background-search-filter-dropdown": "var(--background-100)",
+
+        "text-editing-message": "var(--text-800)",
+
+        "background-chat-hover": "#1D4ED8",
+        "background-chat-selected": "#1D4ED8",
+        // colors for sidebar in chat, search, and manage settings
+        "background-sidebar": "#0021A5",
+        "background-settings-sidebar": "var(--background-100)",
+        "background-chatbar": "#FFFFFF",
+        "text-sidebar": "#FFFFFF",
+
+        // Settings
+        "text-sidebar-subtle": "#A9D4FF",
+        "icon-settings-sidebar": "var(--text-300)",
+        "text-settings-sidebar": "var(--text-300)",
+        "text-settings-sidebar-strong": "var(--text-200)",
+        "background-settings-hover": "#0026CC",
+        "background-back-button": "#A9D4FF",
+        "text-back-button": "var(--text-800)",
+
+        "background-search-answer": "var(--background-100)",
+        "text-search-answer": "var(--text-100)",
+        "text-recent-assistants": "var(--text-800)",
+        "border-recent-assistants": "var(--background-300)",
+        "text-mobile-sidebar-toggled": "var(--text-200)",
+        "text-mobile-sidebar-untoggled": "var(--text-900)",
+
+        "background-starter-message": "var(--background-100)",
+        "background-starter-message-hover": "var(--background-150)",
+
+        // Background for chat messages (user bubbles)
+        user: "#0021A5",
+
+        // Colors for the search toggle buttons
+        "background-agentic-toggled": "var(--light-success)",
+        "background-agentic-untoggled": "var(--undo)",
+        "text-agentic-toggled": "var(--text-800)",
+        "text-agentic-untoggled": "var(--white)",
+        "text-chatbar-subtle": "var(--text-500)",
+        "text-chatbar": "var(--text-800)",
+
+        // Color for the star indicator on high quality search results.
+        "star-indicator": "var(--background-100)",
+
+        // Backgrounds for submit buttons on search and chat
+        "submit-background": "#0021A5",
+        "disabled-submit-background": "var(--background-400)",
+
+        "background-recent-assistants-hover": "var(--background-100)",
+
+        "sidebar-toggle": "var(--text-200)",
+
+        input: "var(--white)",
+
+        "text-50": "var(--text-50)",
+        "text-100": "var(--text-100)",
+        "text-200": "var(--text-200)",
+        "text-300": "var(--text-300)",
+        "text-400": "var(--text-400)",
+        "text-500": "var(--text-500)",
+        "text-600": "var(--text-600)",
+        "text-700": "var(--text-700)",
+        "text-800": "var(--text-800)",
+        "text-900": "var(--text-900)",
+        "text-950": "var(--text-950)",
+
+        "user-text": "#FFFFFF",
+
+        description: "var(--text-400)",
+        subtle: "var(--text-500)",
+        default: "var(--text-600)",
+        emphasis: "var(--text-700)",
+        strong: "var(--text-900)",
+
+        // borders
+        border: "var(--border)",
+        "border-light": "var(--border-light)",
+        "border-medium": "var(--border-medium)",
+        "border-strong": "var(--border-strong)",
+        "border-dark": "var(--border-dark)",
+        "non-selectable-border": "#f5c2c7",
+
+        inverted: "var(--white)",
+        link: "var(--link)",
+        "link-hover": "var(--link-hover)",
+
+        // one offs
+        error: "var(--error)",
+        success: "var(--success)",
+        alert: "var(--alert)",
+        accent: "var(--accent)",
+
+        // hover
+        "hover-light": "var(--background-100)",
+        "hover-lightish": "var(--background-125)",
+
+        hover: "var(--background-200)",
+        "hover-emphasis": "var(--background-700)",
+        "accent-hover": "var(--accent-hover)",
+
+        // keyword highlighting
+        highlight: {
+          text: "var(--highlight-text)",
+        },
+
+        // scrollbar
+        scrollbar: {
+          track: "var(--scrollbar-track)",
+          thumb: "var(--scrollbar-thumb)",
+          "thumb-hover": "var(--scrollbar-thumb-hover)",
+
+          dark: {
+            thumb: "var(--scrollbar-dark-thumb)",
+            "thumb-hover": "var(--scrollbar-dark-thumb-hover)",
+          },
+        },
+
+        // for display documents
+        document: "var(--document-color)",
+
+        // light mode
+        tremor: {
+          brand: {
+            faint: "var(--tremor-brand-faint)",
+            muted: "var(--tremor-brand-muted)",
+            subtle: "var(--tremor-brand-subtle)",
+            DEFAULT: "#3b82f6", // blue-500
+            emphasis: "var(--tremor-brand-emphasis)",
+            inverted: "var(--tremor-brand-inverted)",
+          },
+          background: {
+            muted: "var(--tremor-background-muted)",
+            subtle: "var(--tremor-background-subtle)",
+            DEFAULT: "#ffffff", // white
+            emphasis: "var(--tremor-background-emphasis)",
+          },
+          border: {
+            DEFAULT: "#e5e7eb", // gray-200
+          },
+          ring: {
+            DEFAULT: "#e5e7eb", // gray-200
+          },
+          content: {
+            subtle: "var(--tremor-content-subtle)",
+            DEFAULT: "var(--tremor-content-default)",
+            emphasis: "var(--tremor-content-emphasis)",
+            strong: "var(--tremor-content-strong)",
+            inverted: "var(--tremor-content-inverted)",
+          },
+        },
+        // dark mode
+        "dark-tremor": {
+          brand: {
+            faint: "var(--dark-tremor-brand-faint)",
+            muted: "var(--dark-tremor-brand-muted)",
+            subtle: "var(--dark-tremor-brand-subtle)",
+            DEFAULT: "#3b82f6", // blue-500
+            emphasis: "var(--dark-tremor-brand-emphasis)",
+            inverted: "var(--dark-tremor-brand-inverted)",
+          },
+          background: {
+            muted: "var(--dark-tremor-background-muted)",
+            subtle: "var(--dark-tremor-background-subtle)",
+            DEFAULT: "var(--dark-tremor-background-default)",
+            emphasis: "var(--dark-tremor-background-emphasis)",
+          },
+          border: {
+            DEFAULT: "#1f2937", // gray-800
+          },
+          ring: {
+            DEFAULT: "#1f2937", // gray-800
+          },
+          content: {
+            subtle: "var(--dark-tremor-content-subtle)",
+            DEFAULT: "var(--dark-tremor-content-default)",
+            emphasis: "var(--dark-tremor-content-emphasis)",
+            strong: "var(--dark-tremor-content-strong)",
+            inverted: "var(--dark-tremor-content-inverted)",
+          },
+        },
+        calendar: {
+          // Light mode
+          "bg-selected": "#3B82F6",
+          "bg-outside-selected": "rgba(59, 130, 246, 0.2)",
+          "text-muted": "#6B7280",
+          "text-selected": "#FFFFFF",
+          "range-start": "#000000",
+          "range-middle": "#EFF6FF",
+          "range-end": "#000000",
+          "text-in-range": "#1E40AF",
+
+          // Dark mode
+          "bg-selected-dark": "#2563EB",
+          "bg-outside-selected-dark": "rgba(37, 99, 235, 0.2)",
+          "text-muted-dark": "#9CA3AF",
+          "text-selected-dark": "#F3F4F6",
+          "range-start-dark": "#1E40AF",
+          "range-middle-dark": "#1E3A8A",
+          "range-end-dark": "#1E40AF",
+          "text-in-range-dark": "#BFDBFE",
+
+          // Hover effects
+          "hover-bg": "#60A5FA",
+          "hover-bg-dark": "#3B82F6",
+          "hover-text": "#1E3A8A",
+          "hover-text-dark": "#DBEAFE",
+
+          // Today's date
+          "today-bg": "#FDE68A",
+          "today-bg-dark": "#92400E",
+          "today-text": "#92400E",
+          "today-text-dark": "#FDE68A",
+        },
+      },
+      boxShadow: {
+        // light
+        "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        "tremor-card":
+          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        "tremor-dropdown":
+          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        // dark
+        "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        "dark-tremor-card":
+          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        "dark-tremor-dropdown":
+          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      },
+      borderRadius: {
+        "tremor-small": "0.375rem",
+        "tremor-default": "0.5rem",
+        "tremor-full": "9999px",
+      },
+      fontSize: {
+        "code-sm": "small",
+        "tremor-label": ["0.75rem"],
+        "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
+        "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
+        "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
+      },
+      fontWeight: {
+        description: "375",
+        "token-bold": "bold",
+      },
+      fontStyle: {
+        "token-italic": "italic",
+      },
+    },
+  },
+  safelist: [
+    {
+      pattern:
+        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ["hover", "ui-selected"],
+    },
+    {
+      pattern:
+        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ["hover", "ui-selected"],
+    },
+    {
+      pattern:
+        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+      variants: ["hover", "ui-selected"],
+    },
+    {
+      pattern:
+        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    },
+    {
+      pattern:
+        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    },
+    {
+      pattern:
+        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    },
+  ],
+  plugins: [
+    require("@tailwindcss/typography"),
+    require("@headlessui/tailwindcss"),
+  ],
+};
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
index 4f33de65946..a8ea1a0549a 100644
--- a/web/tailwind-themes/tailwind.config.js
+++ b/web/tailwind-themes/tailwind.config.js
@@ -108,6 +108,8 @@ module.exports = {
         "background-search-filter": "var(--background-100)",
         "background-search-filter-dropdown": "var(--background-100)",
 
+        "user-bubble": "var(--user-bubble)",
+
         // colors for sidebar in chat, search, and manage settings
         "background-sidebar": "var(--background-100)",
         "background-chatbar": "var(--background-100)",
@@ -141,6 +143,14 @@ module.exports = {
         // Background for chat messages (user bubbles)
         user: "var(--user-bubble)",
 
+        "userdropdown-background": "var(--background-100)",
+        "text-mobile-sidebar-toggled": "var(--text-800)",
+        "text-mobile-sidebar-untoggled": "var(--text-500)",
+        "text-editing-message": "var(--text-800)",
+        "background-sidebar": "var(--background-100)",
+        "background-search-filter": "var(--background-100)",
+        "background-search-filter-dropdown": "var(--background-hover)",
+
         "background-toggle": "var(--background-100)",
 
         // Colors for the search toggle buttons
@@ -320,6 +330,39 @@ module.exports = {
       fontStyle: {
         "token-italic": "italic",
       },
+      calendar: {
+        // Light mode
+        "bg-selected": "#4B5563",
+        "bg-outside-selected": "rgba(75, 85, 99, 0.2)",
+        "text-muted": "#6B7280",
+        "text-selected": "#FFFFFF",
+        "range-start": "#000000",
+        "range-middle": "#F3F4F6",
+        "range-end": "#000000",
+        "text-in-range": "#1F2937",
+
+        // Dark mode
+        "bg-selected-dark": "#6B7280",
+        "bg-outside-selected-dark": "rgba(107, 114, 128, 0.2)",
+        "text-muted-dark": "#9CA3AF",
+        "text-selected-dark": "#F3F4F6",
+        "range-start-dark": "#374151",
+        "range-middle-dark": "#4B5563",
+        "range-end-dark": "#374151",
+        "text-in-range-dark": "#E5E7EB",
+
+        // Hover effects
+        "hover-bg": "#9CA3AF",
+        "hover-bg-dark": "#6B7280",
+        "hover-text": "#374151",
+        "hover-text-dark": "#E5E7EB",
+
+        // Today's date
+        "today-bg": "#D1D5DB",
+        "today-bg-dark": "#4B5563",
+        "today-text": "#374151",
+        "today-text-dark": "#D1D5DB",
+      },
     },
   },
   safelist: [