diff --git a/frontend/src/components/shared/QuickAccessBar.css b/frontend/src/components/shared/QuickAccessBar.css
index d429f9721..16f7def5e 100644
--- a/frontend/src/components/shared/QuickAccessBar.css
+++ b/frontend/src/components/shared/QuickAccessBar.css
@@ -10,4 +10,18 @@
   justify-content: center;
   width: 32px;
   height: 32px;
+}
+
+.fallbackDivider {
+  width: 60px;
+  height: 1px;
+  background-color: var(--color-gray-300);
+  margin: 8px 0;
+  border-radius: 1px;
+}
+
+.mantineDivider {
+  width: 60px;
+  margin: 8px 0;
+  border-color: var(--color-gray-300);
 } 
\ No newline at end of file
diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index 1a4a3cab8..a12298b3c 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -5,6 +5,8 @@ import AppsIcon from "@mui/icons-material/AppsRounded";
 import SettingsIcon from "@mui/icons-material/SettingsRounded";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesomeRounded";
 import FolderIcon from "@mui/icons-material/FolderRounded";
+import PersonIcon from "@mui/icons-material/PersonRounded";
+import NotificationsIcon from "@mui/icons-material/NotificationsRounded";
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
 import rainbowStyles from '../../styles/rainbow.module.css';
 import AppConfigModal from './AppConfigModal';
@@ -30,6 +32,54 @@ interface ButtonConfig {
   onClick: () => void;
 }
 
+function NavHeader() {
+  return (
+    <>
+      <div className="flex flex-row items-center justify-center mb-0">
+        <Tooltip label="User Profile" position="right">
+          <ActionIcon
+            size="md"
+            variant="subtle"
+            style={{
+              backgroundColor: 'var(--icon-user-bg)',
+              color: 'var(--icon-user-color)',
+              borderRadius: '50%',
+              width: '24px',
+              height: '24px',
+              marginRight: '8px'
+            }}
+          >
+            <PersonIcon sx={{ fontSize: 16 }} />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label="Notifications" position="right">
+          <ActionIcon
+            size="md"
+            variant="subtle"
+            style={{
+              backgroundColor: 'var(--icon-notifications-bg)',
+              color: 'var(--icon-notifications-color)',
+              borderRadius: '50%',
+              width: '24px',
+              height: '24px'
+            }}
+          >
+            <NotificationsIcon sx={{ fontSize: 16 }} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+      {/* Divider after top icons */}
+      <Divider 
+        size="xs" 
+        style={{ 
+          width: '60px',
+          borderColor: 'var(--color-gray-300)'
+        }}
+      />
+    </>
+  );
+}
+
 const QuickAccessBar = ({
   onToolsClick,
   onReaderToggle,
@@ -46,7 +96,7 @@ const QuickAccessBar = ({
     {
       id: 'tools',
       name: 'All Tools',
-      icon: <AppsIcon sx={{ fontSize: 20 }} />,
+      icon: <AppsIcon sx={{ fontSize: 26 }} />,
       tooltip: 'View all available tools',
       color: '#1E88E5',
       size: 'lg',
@@ -141,16 +191,69 @@ const QuickAccessBar = ({
 
   const getButtonStyle = (config: ButtonConfig) => {
     const isActive = activeButton === config.id;
-    if (config.isRound && isActive) {
-      return {
-        backgroundColor: '#D3E7F7',
-        color: '#0A8BFF',
-        borderRadius: '50%',
-      };
+    
+    if (isActive) {
+      // Active state - use specific icon colors
+      if (config.id === 'tools') {
+        return {
+          backgroundColor: 'var(--icon-tools-bg)',
+          color: 'var(--icon-tools-color)',
+          border: 'none',
+          borderRadius: config.isRound ? '50%' : '8px',
+        };
+      }
+      if (config.id === 'read') {
+        return {
+          backgroundColor: 'var(--icon-read-bg)',
+          color: 'var(--icon-read-color)',
+          border: 'none',
+          borderRadius: config.isRound ? '50%' : '8px',
+        };
+      }
+      if (config.id === 'sign') {
+        return {
+          backgroundColor: 'var(--icon-sign-bg)',
+          color: 'var(--icon-sign-color)',
+          border: 'none',
+          borderRadius: config.isRound ? '50%' : '8px',
+        };
+      }
+      if (config.id === 'automate') {
+        return {
+          backgroundColor: 'var(--icon-automate-bg)',
+          color: 'var(--icon-automate-color)',
+          border: 'none',
+          borderRadius: config.isRound ? '50%' : '8px',
+        };
+      }
+      if (config.id === 'files') {
+        return {
+          backgroundColor: 'var(--icon-files-bg)',
+          color: 'var(--icon-files-color)',
+          borderRadius: '50%',
+        };
+      }
+      if (config.id === 'activity') {
+        return {
+          backgroundColor: 'var(--icon-activity-bg)',
+          color: 'var(--icon-activity-color)',
+          borderRadius: '50%',
+        };
+      }
+      if (config.id === 'config') {
+        return {
+          backgroundColor: 'var(--icon-config-bg)',
+          color: 'var(--icon-config-color)',
+          border: 'none',
+          borderRadius: config.isRound ? '50%' : '8px',
+        };
+      }
     }
+    
+    // Inactive state - use consistent inactive colors
     return {
-      backgroundColor: isActive ? config.color : '#9CA3AF',
-      color: 'white',
+      backgroundColor: 'var(--icon-inactive-bg)',
+      color: 'var(--icon-inactive-color)',
       border: 'none',
       borderRadius: config.isRound ? '50%' : '8px',
     };
@@ -180,6 +283,7 @@ const QuickAccessBar = ({
       }}
     >
       <Stack gap="lg" align="center" className="flex-1">
+        <NavHeader />
         {buttonConfigs.map((config, index) => (
           <React.Fragment key={config.id}>
             <Tooltip label={config.tooltip} position="right">
@@ -202,7 +306,15 @@ const QuickAccessBar = ({
             </Tooltip>
             
             {/* Add divider after Automate button (index 3) */}
-            {index === 3 && <Divider size="sm" />}
+            {index === 3 && (
+                <Divider 
+                  size="xs" 
+                  style={{ 
+                    width: '60px',
+                    borderColor: 'var(--color-gray-300)'
+                  }}
+                />
+            )}
             
             {/* Add spacer before Config button (index 7) */}
             {index === 5 && <div className="flex-1" />}
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 0503a7d6d..51cb0d8f6 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -97,7 +97,7 @@ export default function HomePage() {
 
       {/* Left: Tool Picker or Selected Tool Panel */}
       <div
-        className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-surface)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
+        className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
         style={{
           width: sidebarsVisible && !readerMode ? '14vw' : '0',
           padding: sidebarsVisible && !readerMode ? '1rem' : '0'
@@ -157,9 +157,11 @@ export default function HomePage() {
       {/* Main View */}
       <Box
         className="flex-1 h-screen min-w-80 relative flex flex-col"
-        style={{
-          backgroundColor: 'var(--bg-background)'
-        }}
+        style={
+          isRainbowMode
+            ? {} // No background color in rainbow mode
+            : { backgroundColor: 'var(--bg-background)' }
+        }
       >
         {/* Top Controls */}
         <TopControls
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 98f05a2f9..7cdb46c55 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -72,6 +72,8 @@
   --bg-surface: #ffffff;
   --bg-raised: #f9fafb;
   --bg-muted: #f3f4f6;
+  --bg-background: #f9fafb;
+  --bg-toolbar: #ffffff;
   --text-primary: #111827;
   --text-secondary: #4b5563;
   --text-muted: #6b7280;
@@ -80,51 +82,101 @@
   --border-strong: #9ca3af;
   --hover-bg: #f9fafb;
   --active-bg: #f3f4f6;
+
+  /* Icon colors for light mode */
+  --icon-user-bg: #9CA3AF;
+  --icon-user-color: #FFFFFF;
+  --icon-notifications-bg: #9CA3AF;
+  --icon-notifications-color: #FFFFFF;
+  --icon-tools-bg: #1E88E5;
+  --icon-tools-color: #FFFFFF;
+  --icon-read-bg: #4CAF50;
+  --icon-read-color: #FFFFFF;
+  --icon-sign-bg: #3BA99C;
+  --icon-sign-color: #FFFFFF;
+  --icon-automate-bg: #A576E3;
+  --icon-automate-color: #FFFFFF;
+  --icon-files-bg: #D3E7F7;
+  --icon-files-color: #0A8BFF;
+  --icon-activity-bg: #D3E7F7;
+  --icon-activity-color: #0A8BFF;
+  --icon-config-bg: #9CA3AF;
+  --icon-config-color: #FFFFFF;
+
+  /* Inactive icon colors for light mode */
+  --icon-inactive-bg: #9CA3AF;
+  --icon-inactive-color: #FFFFFF;
 }
 
 [data-mantine-color-scheme="dark"] {
   /* Dark theme gray scale (inverted) */
   --gray-50: 17 24 39;
-  --gray-100: 31 41 55;
-  --gray-200: 55 65 81;
-  --gray-300: 75 85 99;
-  --gray-400: 107 114 128;
-  --gray-500: 156 163 175;
-  --gray-600: 209 213 219;
-  --gray-700: 229 231 235;
-  --gray-800: 243 244 246;
-  --gray-900: 249 250 251;
+  --gray-100: 31 35 41;
+  --gray-200: 42 47 54;
+  --gray-300: 55 65 81;
+  --gray-400: 75 85 99;
+  --gray-500: 107 114 128;
+  --gray-600: 156 163 175;
+  --gray-700: 209 213 219;
+  --gray-800: 229 231 235;
+  --gray-900: 243 244 246;
 
   /* Dark semantic colors for Tailwind */
-  --surface: 31 41 55;
-  --background: 17 24 39;
-  --border: 75 85 99;
+  --surface: 31 35 41;
+  --background: 42 47 54;
+  --border: 55 65 81;
 
   /* Dark theme Mantine colors */
   --color-gray-50: #111827;
-  --color-gray-100: #1f2937;
-  --color-gray-200: #374151;
-  --color-gray-300: #4b5563;
-  --color-gray-400: #6b7280;
-  --color-gray-500: #9ca3af;
-  --color-gray-600: #d1d5db;
-  --color-gray-700: #e5e7eb;
-  --color-gray-800: #f3f4f6;
-  --color-gray-900: #f9fafb;
+  --color-gray-100: #1F2329;
+  --color-gray-200: #2A2F36;
+  --color-gray-300: #374151;
+  --color-gray-400: #4b5563;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #9ca3af;
+  --color-gray-700: #d1d5db;
+  --color-gray-800: #e5e7eb;
+  --color-gray-900: #f3f4f6;
 
   /* Dark theme semantic colors */
-  --bg-surface: #1f2937;
-  --bg-raised: #374151;
-  --bg-muted: #374151;
+  --bg-surface: #2A2F36;
+  --bg-raised: #1F2329;
+  --bg-muted: #1F2329;
+  --bg-background: #2A2F36;
+  --bg-toolbar: #272A2E;
   --text-primary: #f9fafb;
   --text-secondary: #d1d5db;
   --text-muted: #9ca3af;
-  --border-subtle: #374151;
-  --border-default: #4b5563;
-  --border-strong: #6b7280;
+  --border-subtle: #2A2F36;
+  --border-default: #374151;
+  --border-strong: #4b5563;
   --hover-bg: #374151;
   --active-bg: #4b5563;
 
+  /* Icon colors for dark mode */
+  --icon-user-bg: #2A2F36;
+  --icon-user-color: #6E7581;
+  --icon-notifications-bg: #2A2F36;
+  --icon-notifications-color: #6E7581;
+  --icon-tools-bg: #4B525A;
+  --icon-tools-color: #EAEAEA;
+  --icon-read-bg: #4B525A;
+  --icon-read-color: #EAEAEA;
+  --icon-sign-bg: #4B525A;
+  --icon-sign-color: #EAEAEA;
+  --icon-automate-bg: #4B525A;
+  --icon-automate-color: #EAEAEA;
+  --icon-files-bg: #4B525A;
+  --icon-files-color: #EAEAEA;
+  --icon-activity-bg: #4B525A;
+  --icon-activity-color: #EAEAEA;
+  --icon-config-bg: #4B525A;
+  --icon-config-color: #EAEAEA;
+
+  /* Inactive icon colors for dark mode */
+  --icon-inactive-bg: #2A2F36;
+  --icon-inactive-color: #6E7581;
+
   /* Adjust shadows for dark mode */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);