k

web/src/app/chat/ChatPage.tsx

@@ -2007,7 +2007,7 @@ export function ChatPage({
                         {...getRootProps()}
                       >
                         <div
-                          className={`w-full h-full flex flex-col overflow-y-auto include-scrollbar overflow-x-hidden relative`}
+                          className={`w-full h-full flex flex-col overflow-y-auto include-horizontal-scrollbar overflow-x-hidden relative`}
                           ref={scrollableDivRef}
                         >
                           {/* ChatBanner is a custom banner that displays a admin-specified message at 

web/src/app/chat/modal/configuration/AssistantsTab.tsx

@@ -76,7 +76,7 @@ export function AssistantsTab({
           items={assistants.map((a) => a.id.toString())}
           strategy={verticalListSortingStrategy}
         >
-          <div className="px-4 pb-2  max-h-[500px] include-scrollbar overflow-y-scroll my-3 grid grid-cols-1 gap-4">
+          <div className="px-4 pb-2  max-h-[500px] include-horizontal-scrollbar overflow-y-scroll my-3 grid grid-cols-1 gap-4">
             {assistants.map((assistant) => (
               <DraggableAssistantCard
                 key={assistant.id.toString()}

web/src/app/globals.css

@@ -260,28 +260,29 @@
   }
 }
 
-.include-scrollbar::-webkit-scrollbar {
+.include-horizontal-scrollbar::-webkit-scrollbar {
   width: 6px;
 }
 
-.include-scrollbar::-webkit-scrollbar-track {
+.include-horizontal-scrollbar::-webkit-scrollbar-track {
   background: #f1f1f1;
 }
 
-.include-scrollbar::-webkit-scrollbar-thumb {
+.include-horizontal-scrollbar::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 4px;
 }
 
-.include-scrollbar::-webkit-scrollbar-thumb:hover {
+.include-horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
 
-.include-scrollbar {
+.include-horizontal-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: #888 transparent;
   overflow: overlay;
   overflow-y: scroll;
+  overflow-x: hidden;
 }
 
 .inputscroll::-webkit-scrollbar-track {

web/src/components/llm/LLMList.tsx

@@ -63,7 +63,9 @@ export const LlmList: React.FC<LlmListProps> = ({
   return (
     <div
       className={`${
-        scrollable ? "max-h-[200px] include-scrollbar" : "max-h-[300px]"
+        scrollable
+          ? "max-h-[200px] include-horizontal-scrollbar"
+          : "max-h-[300px]"
       } bg-background-175  flex flex-col gap-y-1 overflow-y-scroll`}
     >
       {userDefault && (

web/src/components/modals/ExceptionTraceModal.tsx

@@ -18,7 +18,7 @@ export default function ExceptionTraceModal({
       title="Full Exception Trace"
       onOutsideClick={onOutsideClick}
     >
-      <div className="overflow-y-auto include-scrollbar pr-3 h-full mb-6">
+      <div className="overflow-y-auto include-horizontal-scrollbar pr-3 h-full mb-6">
         <div className="mb-6">
           {!copyClicked ? (
             <div

web/src/components/search/SearchSection.tsx

@@ -698,7 +698,7 @@ export const SearchSection = ({
           </div>
         </div>
 
-        <div className="absolute include-scrollbar h-screen overflow-y-auto left-0 w-full top-0">
+        <div className="absolute include-horizontal-scrollbar h-screen overflow-y-auto left-0 w-full top-0">
           <FunctionalHeader
             sidebarToggled={toggledSidebar}
             reset={() => setQuery("")}

web/tailwind-themes/tailwind.config.js

@@ -83,7 +83,7 @@ module.exports = {
         "non-selectable": "var(--non-selectable)",
 
         // background
-        background: "var(--background)",
+        background: "#EDEDF1",
         "background-100": "var(--background-100)",
         "background-125": "var(--background-125)",
         "background-150": "var(--background-150)",
@@ -95,53 +95,40 @@ module.exports = {
         "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-strong)",
         "background-search": "var(--white)",
 
-        "background-history-sidebar-button-hover": "var(--background-200)",
-        "text-history-sidebar-button": "var(--text-800)",
-        "divider-history-sidebar-bar": "var(--border)",
-        "text-mobile-sidebar": "var(--text-800)",
-        "background-search-filter": "var(--background-100)",
-        "background-search-filter-dropdown": "var(--background-100)",
+        "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-chat-hover": "#1D4ED8",
+        "background-chat-selected": "#1D4ED8",
         // colors for sidebar in chat, search, and manage settings
-        "background-sidebar": "var(--background-100)",
-        "background-chatbar": "var(--background-100)",
-        "text-sidebar": "var(--text-500)",
-
-        "toggled-background": "var(--background-400)",
-        "untoggled-background": "var(--background-200)",
-        "background-starter-message": "var(--background)",
-        "background-starter-message-hover": "var(--background-100)",
-
-        "text-sidebar-toggled-header": "var(--text-800)",
-        "text-sidebar-header": "var(--text-800)",
-
-        "background-back-button": "var(--background-200)",
-        "text-back-button": "var(--text-800)",
+        "background-sidebar": "#0021A5",
+        "background-settings-sidebar": "var(--background-100)",
+        "background-chatbar": "#FFFFFF",
+        "text-sidebar": "#FFFFFF",
 
         // Settings
-        "text-sidebar-subtle": "var(--text-500)",
-        "icon-settings-sidebar": "var(--text-600)",
-        "text-settings-sidebar": "var(--text-600)",
-        "text-settings-sidebar-strong": "var(--text-900)",
-        "background-settings-hover": "var(--background-200)",
-
-        "text-application-toggled": "var(--text-800)",
-        "text-application-untoggled": "var(--text-500)",
-        "text-application-untoggled-hover": "var(--text-700)",
-
-        "background-chat-hover": "var(--background-200)",
-        "background-chat-selected": "var(--background-200)",
+        "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 for chat messages (user bubbles)
-        user: "var(--user-bubble)",
-
-        "background-toggle": "var(--background-100)",
+        user: "#0021A5",
 
         // Colors for the search toggle buttons
         "background-agentic-toggled": "var(--light-success)",
@@ -155,9 +142,11 @@ module.exports = {
         "star-indicator": "var(--background-100)",
 
         // Backgrounds for submit buttons on search and chat
-        "submit-background": "var(--background-800)",
+        "submit-background": "#0021A5",
         "disabled-submit-background": "var(--background-400)",
 
+        "sidebar-toggle": "var(--text-200)",
+
         input: "var(--white)",
 
         "text-50": "var(--text-50)",
@@ -172,7 +161,7 @@ module.exports = {
         "text-900": "var(--text-900)",
         "text-950": "var(--text-950)",
 
-        "user-text": "var(--text-800)",
+        "user-text": "#FFFFFF",
 
         description: "var(--text-400)",
         subtle: "var(--text-500)",