diff --git a/frontend/src/components/molecules/chatProfiles.tsx b/frontend/src/components/molecules/chatProfiles.tsx
index 2ff5f24e36..989bcf342d 100644
--- a/frontend/src/components/molecules/chatProfiles.tsx
+++ b/frontend/src/components/molecules/chatProfiles.tsx
@@ -7,7 +7,6 @@ import { Box, Popover, Tab, Tabs } from '@mui/material';
 import {
   InputStateHandler,
   grey,
-  primary,
   useChat,
   useIsDarkMode
 } from '@chainlit/components';
@@ -101,7 +100,9 @@ export default function ChatProfiles() {
               },
               '& .MuiTabs-indicator': {
                 background: (theme) =>
-                  isDarkMode ? theme.palette.divider : primary[600],
+                  isDarkMode
+                    ? theme.palette.divider
+                    : theme.palette.primary.main,
                 height: '100%',
                 borderRadius: '5px'
               }
diff --git a/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx b/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx
index 7ab333377e..a6fecd71ec 100644
--- a/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx
+++ b/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx
@@ -150,7 +150,7 @@ const _ConversationsHistorySidebar = () => {
           onScroll: handleScroll
         }}
         sx={{
-          width: settings.isChatHistoryOpen ? DRAWER_WIDTH : 0,
+          width: settings.isChatHistoryOpen ? 'auto' : 0,
           '& .MuiDrawer-paper': {
             width: settings.isChatHistoryOpen ? DRAWER_WIDTH : 0,
             position: 'inherit',
diff --git a/libs/components/src/buttons/Toggle.tsx b/libs/components/src/buttons/Toggle.tsx
index 806cbe8c53..82776cc049 100644
--- a/libs/components/src/buttons/Toggle.tsx
+++ b/libs/components/src/buttons/Toggle.tsx
@@ -1,7 +1,7 @@
 import { useIsDarkMode } from 'hooks';
 import React from 'react';
 import { InputStateHandler } from 'src/inputs';
-import { grey, primary } from 'theme';
+import { grey } from 'theme';
 
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
@@ -59,7 +59,7 @@ const Toggle = (props: ToggleProps): JSX.Element => {
             },
             '& .MuiTabs-indicator': {
               background: (theme) =>
-                isDarkMode ? theme.palette.divider : primary[600],
+                isDarkMode ? theme.palette.divider : theme.palette.primary.main,
               height: '100%',
               borderRadius: '5px'
             }