diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index e3dc80512378..2b71f913d7f1 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -59,6 +59,7 @@ import {
 import { type View, ViewOptions } from '../App';
 import { MainPanelLayout } from './Layout/MainPanelLayout';
 import ChatInput from './ChatInput';
+import ChatInputWrapper from './ChatInputWrapper';
 import { ScrollArea, ScrollAreaHandle } from './ui/scroll-area';
 import { RecipeWarningModal } from './ui/RecipeWarningModal';
 import ParameterInputModal from './ParameterInputModal';
@@ -84,6 +85,7 @@ interface BaseChatProps {
   enableLocalStorage?: boolean;
   onMessageStreamFinish?: () => void;
   onMessageSubmit?: (message: string) => void; // Callback after message is submitted
+  onTypingStateChange?: (isTyping: boolean) => void; // Callback for typing state changes
   renderHeader?: () => React.ReactNode;
   renderBeforeMessages?: () => React.ReactNode;
   renderAfterMessages?: () => React.ReactNode;
@@ -103,6 +105,7 @@ function BaseChatContent({
   enableLocalStorage = false,
   onMessageStreamFinish,
   onMessageSubmit,
+  onTypingStateChange,
   renderHeader,
   renderBeforeMessages,
   renderAfterMessages,
@@ -353,16 +356,8 @@ function BaseChatContent({
               ref={scrollRef}
               className={`flex-1 rounded-b-2xl min-h-0 relative ${contentClassName}`}
               style={{
-                background: `
-                  linear-gradient(135deg, 
-                    rgba(255, 255, 255, 0.1) 0%, 
-                    rgba(255, 255, 255, 0.05) 100%
-                  )
-                `,
-                backdropFilter: 'blur(20px) saturate(180%)',
-                WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+                background: 'transparent',
                 border: '1px solid rgba(255, 255, 255, 0.1)',
-                boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
               }}
               autoScroll
               onDrop={handleDrop}
@@ -541,28 +536,30 @@ function BaseChatContent({
         <div
           className={`relative z-10 ${disableAnimation ? '' : 'animate-[fadein_400ms_ease-in_forwards]'}`}
         >
-          <ChatInput
-            handleSubmit={handleSubmit}
-            chatState={chatState}
-            onStop={onStopGoose}
-            commandHistory={commandHistory}
-            initialValue={input || ''}
-            setView={setView}
-            numTokens={sessionTokenCount}
-            inputTokens={sessionInputTokens || localInputTokens}
-            outputTokens={sessionOutputTokens || localOutputTokens}
-            droppedFiles={droppedFiles}
-            onFilesProcessed={() => setDroppedFiles([])} // Clear dropped files after processing
-            messages={messages}
-            setMessages={setMessages}
-            disableAnimation={disableAnimation}
-            sessionCosts={sessionCosts}
-            setIsGoosehintsModalOpen={setIsGoosehintsModalOpen}
-            recipeConfig={recipeConfig}
-            recipeAccepted={recipeAccepted}
-            initialPrompt={initialPrompt}
-            {...customChatInputProps}
-          />
+          <ChatInputWrapper onTypingStateChange={onTypingStateChange}>
+            <ChatInput
+              handleSubmit={handleSubmit}
+              chatState={chatState}
+              onStop={onStopGoose}
+              commandHistory={commandHistory}
+              initialValue={input || ''}
+              setView={setView}
+              numTokens={sessionTokenCount}
+              inputTokens={sessionInputTokens || localInputTokens}
+              outputTokens={sessionOutputTokens || localOutputTokens}
+              droppedFiles={droppedFiles}
+              onFilesProcessed={() => setDroppedFiles([])} // Clear dropped files after processing
+              messages={messages}
+              setMessages={setMessages}
+              disableAnimation={disableAnimation}
+              sessionCosts={sessionCosts}
+              setIsGoosehintsModalOpen={setIsGoosehintsModalOpen}
+              recipeConfig={recipeConfig}
+              recipeAccepted={recipeAccepted}
+              initialPrompt={initialPrompt}
+              {...customChatInputProps}
+            />
+          </ChatInputWrapper>
         </div>
       </MainPanelLayout>
 
diff --git a/ui/desktop/src/components/BlurOverlay.tsx b/ui/desktop/src/components/BlurOverlay.tsx
new file mode 100644
index 000000000000..f67d0284d928
--- /dev/null
+++ b/ui/desktop/src/components/BlurOverlay.tsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+
+interface BlurOverlayProps {
+  isActive: boolean;
+  isDarkMode?: boolean;
+  intensity?: number;
+}
+
+const BlurOverlay: React.FC<BlurOverlayProps> = ({ 
+  isActive, 
+  isDarkMode = true,
+  intensity = 20 // Default blur intensity
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [opacity, setOpacity] = useState(0);
+
+  // Use two-step animation for smoother transition
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    
+    if (isActive) {
+      setIsVisible(true);
+      // Small delay before starting the opacity transition
+      timeout = setTimeout(() => {
+        setOpacity(1);
+      }, 10);
+    } else {
+      setOpacity(0);
+      // Wait for transition to complete before hiding
+      timeout = setTimeout(() => {
+        setIsVisible(false);
+      }, 300); // Match the transition duration
+    }
+    
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [isActive]);
+
+  if (!isVisible) return null;
+
+  return (
+    <div 
+      className="fixed inset-0 pointer-events-none z-40 transition-all duration-300 ease-in-out"
+      style={{ 
+        backdropFilter: `blur(${opacity * intensity}px)`,
+        backgroundColor: isDarkMode 
+          ? `rgba(0, 0, 0, ${opacity * 0.7})` 
+          : `rgba(255, 255, 255, ${opacity * 0.7})`,
+        opacity: opacity
+      }}
+    />
+  );
+};
+
+export default BlurOverlay;
diff --git a/ui/desktop/src/components/ChatInputWrapper.tsx b/ui/desktop/src/components/ChatInputWrapper.tsx
new file mode 100644
index 000000000000..6b7cf9223033
--- /dev/null
+++ b/ui/desktop/src/components/ChatInputWrapper.tsx
@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+interface ChatInputWrapperProps {
+  children: React.ReactNode;
+  onTypingStateChange?: (isTyping: boolean) => void;
+}
+
+const ChatInputWrapper: React.FC<ChatInputWrapperProps> = ({ children, onTypingStateChange }) => {
+  const [isTyping, setIsTyping] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  
+  // Listen for keyboard input events in the chat input
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only trigger for textarea elements
+      if ((e.target as HTMLElement).tagName.toLowerCase() === 'textarea') {
+        // Set typing state to true
+        setIsTyping(true);
+        if (onTypingStateChange) onTypingStateChange(true);
+        
+        // Clear any existing timeout
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        
+        // Set a timeout to turn off the typing state after 1.5 seconds of inactivity
+        timeoutRef.current = setTimeout(() => {
+          setIsTyping(false);
+          if (onTypingStateChange) onTypingStateChange(false);
+        }, 1500);
+      }
+    };
+    
+    // Add event listeners
+    document.addEventListener('keydown', handleKeyDown);
+    
+    // Cleanup
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [onTypingStateChange]);
+  
+  return (
+    <div className="relative">
+      {/* Render the chat input */}
+      {children}
+    </div>
+  );
+};
+
+export default ChatInputWrapper;
diff --git a/ui/desktop/src/components/CustomSideNav.tsx b/ui/desktop/src/components/CustomSideNav.tsx
new file mode 100644
index 000000000000..77360ddc73e7
--- /dev/null
+++ b/ui/desktop/src/components/CustomSideNav.tsx
@@ -0,0 +1,170 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { cn } from '../utils';
+import { 
+  House, 
+  ChatCenteredText, 
+  Clock, 
+  FileText, 
+  Puzzle, 
+  Gear,
+  CaretRight,
+  History
+} from 'phosphor-react';
+
+interface SideNavItemProps {
+  icon: React.ReactNode;
+  label: string;
+  path: string;
+  isActive?: boolean;
+  onClick?: () => void;
+}
+
+const SideNavItem: React.FC<SideNavItemProps> = ({ 
+  icon, 
+  label, 
+  path, 
+  isActive = false,
+  onClick
+}) => {
+  return (
+    <li className="mb-1">
+      <a 
+        href={path}
+        onClick={(e) => {
+          e.preventDefault();
+          if (onClick) onClick();
+        }}
+        className={cn(
+          "flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200",
+          isActive 
+            ? "bg-white/10 text-white" 
+            : "text-white/70 hover:text-white hover:bg-white/5"
+        )}
+      >
+        <div className="text-lg">
+          {icon}
+        </div>
+        <span className="text-sm font-medium">{label}</span>
+        {isActive && (
+          <CaretRight weight="bold" className="ml-auto text-white/70" size={16} />
+        )}
+      </a>
+    </li>
+  );
+};
+
+interface SideNavSectionProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+const SideNavSection: React.FC<SideNavSectionProps> = ({ title, children }) => {
+  return (
+    <div className="mb-6">
+      {title && (
+        <h3 className="text-xs font-medium text-white/50 uppercase tracking-wider px-3 mb-2">
+          {title}
+        </h3>
+      )}
+      <ul>{children}</ul>
+    </div>
+  );
+};
+
+const SideNavDivider: React.FC = () => {
+  return <div className="h-px bg-white/10 my-4 mx-3" />;
+};
+
+export const CustomSideNav: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentPath = location.pathname;
+
+  const handleNavigation = (path: string) => {
+    navigate(path);
+  };
+
+  return (
+    <div className="h-full w-64 bg-gradient-to-b from-gray-800/90 to-gray-900/90 backdrop-blur-lg border-r border-white/10 flex flex-col">
+      {/* Logo Area */}
+      <div className="flex items-center px-4 py-6">
+        <div className="w-8 h-8 bg-white rounded-full flex items-center justify-center">
+          <span className="text-gray-900 font-bold text-lg">G</span>
+        </div>
+        <span className="ml-2 text-white font-medium text-lg">Goose</span>
+      </div>
+
+      {/* Navigation */}
+      <div className="flex-1 overflow-y-auto px-3 py-2">
+        <SideNavSection>
+          <SideNavItem 
+            icon={<House weight="fill" />} 
+            label="Home" 
+            path="/"
+            isActive={currentPath === '/'}
+            onClick={() => handleNavigation('/')}
+          />
+          <SideNavItem 
+            icon={<ChatCenteredText weight="fill" />} 
+            label="Chat" 
+            path="/pair"
+            isActive={currentPath === '/pair'}
+            onClick={() => handleNavigation('/pair')}
+          />
+        </SideNavSection>
+
+        <SideNavDivider />
+
+        <SideNavSection title="History">
+          <SideNavItem 
+            icon={<History weight="fill" />} 
+            label="Sessions" 
+            path="/sessions"
+            isActive={currentPath === '/sessions'}
+            onClick={() => handleNavigation('/sessions')}
+          />
+          <SideNavItem 
+            icon={<Clock weight="fill" />} 
+            label="Scheduler" 
+            path="/schedules"
+            isActive={currentPath === '/schedules'}
+            onClick={() => handleNavigation('/schedules')}
+          />
+        </SideNavSection>
+
+        <SideNavDivider />
+
+        <SideNavSection title="Tools">
+          <SideNavItem 
+            icon={<FileText weight="fill" />} 
+            label="Recipes" 
+            path="/recipes"
+            isActive={currentPath === '/recipes'}
+            onClick={() => handleNavigation('/recipes')}
+          />
+          <SideNavItem 
+            icon={<Puzzle weight="fill" />} 
+            label="Extensions" 
+            path="/extensions"
+            isActive={currentPath === '/extensions'}
+            onClick={() => handleNavigation('/extensions')}
+          />
+        </SideNavSection>
+      </div>
+
+      {/* Footer */}
+      <div className="p-3 border-t border-white/10">
+        <SideNavItem 
+          icon={<Gear weight="fill" />} 
+          label="Settings" 
+          path="/settings"
+          isActive={currentPath === '/settings'}
+          onClick={() => handleNavigation('/settings')}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CustomSideNav;
diff --git a/ui/desktop/src/components/GooseMessage.tsx b/ui/desktop/src/components/GooseMessage.tsx
index 31bc9ae1b5e1..8aa4c30e297b 100644
--- a/ui/desktop/src/components/GooseMessage.tsx
+++ b/ui/desktop/src/components/GooseMessage.tsx
@@ -146,8 +146,8 @@ export default function GooseMessage({
   ]);
 
   return (
-    <div className="goose-message flex w-[90%] justify-start min-w-0">
-      <div className="flex flex-col w-full min-w-0">
+    <div className="goose-message flex w-[90%] justify-start min-w-0 bg-transparent">
+      <div className="flex flex-col w-full min-w-0 bg-transparent">
         {/* Chain-of-Thought (hidden by default) */}
         {cotText && (
           <details className="bg-bgSubtle border border-borderSubtle rounded p-2 mb-2">
diff --git a/ui/desktop/src/components/PillSideNav.tsx b/ui/desktop/src/components/PillSideNav.tsx
index a9d046bcbed3..bb8f9cf151be 100644
--- a/ui/desktop/src/components/PillSideNav.tsx
+++ b/ui/desktop/src/components/PillSideNav.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { cn } from '../utils';
 import { 
@@ -13,49 +13,32 @@ import {
   X as CloseIcon
 } from 'lucide-react';
 
-interface NavItemProps {
-  icon: React.ReactNode;
-  label: string;
-  path: string;
-  isActive?: boolean;
-  onClick: () => void;
-}
-
-const NavItem: React.FC<NavItemProps> = ({ 
-  icon, 
-  label, 
-  isActive = false,
-  onClick
-}) => {
-  return (
-    <button 
-      onClick={onClick}
-      className={cn(
-        "flex items-center gap-2 px-3 py-2 rounded-full transition-all duration-200 w-full",
-        isActive 
-          ? "bg-white/15 text-white" 
-          : "text-white/80 hover:text-white hover:bg-white/10"
-      )}
-    >
-      <div className="text-lg">
-        {icon}
-      </div>
-      <span className="text-sm font-medium">{label}</span>
-    </button>
-  );
-};
-
 export const PillSideNav: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const currentPath = location.pathname;
   const [isExpanded, setIsExpanded] = useState(false);
+  const navRef = useRef<HTMLDivElement>(null);
 
   const handleNavigation = (path: string) => {
     navigate(path);
     setIsExpanded(false);
   };
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (navRef.current && !navRef.current.contains(event.target as Node)) {
+        setIsExpanded(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   // Navigation items configuration
   const navItems = [
     { icon: <HomeIcon size={18} />, label: 'Home', path: '/' },
@@ -67,58 +50,57 @@ export const PillSideNav: React.FC = () => {
 
   // Find the current active item
   const activeItem = navItems.find(item => item.path === currentPath) || navItems[0];
-  
-  // Get current mode label
-  const currentModeLabel = activeItem.label;
 
+  // Create a reordered list with the active item first
+  const orderedNavItems = [
+    activeItem,
+    ...navItems.filter(item => item.path !== activeItem.path)
+  ];
+  
   return (
-    <div className="relative">
-      {/* Collapsed Pill */}
-      {!isExpanded && (
-        <div 
-          className="h-9 bg-white/10 backdrop-blur-md rounded-full 
-                    flex items-center cursor-pointer shadow-md
-                    transition-all duration-300 hover:bg-white/15 px-4
-                    border border-white/20"
-          onClick={() => setIsExpanded(true)}
-        >
-          <span className="text-white font-medium text-sm">{currentModeLabel}</span>
-        </div>
-      )}
-
-      {/* Expanded Navigation */}
-      {isExpanded && (
-        <div className="absolute left-1/2 transform -translate-x-1/2 top-0 z-50
-                      bg-black/70 backdrop-blur-xl
-                      border border-white/20 shadow-xl rounded-lg animate-in fade-in duration-200">
-          <div className="flex flex-col p-2">
-            {/* Header with close button */}
-            <div className="flex items-center justify-between px-2 py-1 mb-1">
-              <span className="text-white font-medium text-sm">Navigation</span>
-              <button 
-                onClick={() => setIsExpanded(false)}
-                className="text-white/70 hover:text-white p-1 rounded-full hover:bg-white/10"
-              >
-                <CloseIcon size={16} />
-              </button>
+    <div className="relative z-50" ref={navRef}>
+      {/* All Pills (including the active one) */}
+      <div className="relative">
+        {orderedNavItems.map((item, index) => {
+          const isActive = item.path === currentPath;
+          const showPill = isExpanded || isActive;
+          
+          // Calculate position - first pill is at top (0), others follow
+          const verticalOffset = index * 42; // Height of pill + small gap
+          
+          return (
+            <div
+              key={item.path}
+              className={cn(
+                "absolute left-1/2 transform -translate-x-1/2",
+                "bg-black/70 backdrop-blur-xl rounded-full shadow-lg border border-white/20",
+                "transition-all duration-300 ease-in-out cursor-pointer",
+                "hover:bg-black/80",
+                showPill 
+                  ? "opacity-100" 
+                  : "opacity-0 pointer-events-none"
+              )}
+              style={{
+                top: showPill ? `${verticalOffset}px` : 0,
+                zIndex: 50 - index,
+                transitionDelay: isExpanded ? `${index * 50}ms` : '0ms'
+              }}
+              onClick={() => {
+                if (isActive) {
+                  setIsExpanded(!isExpanded);
+                } else {
+                  handleNavigation(item.path);
+                }
+              }}
+            >
+              <div className="flex items-center gap-2 px-4 py-2 whitespace-nowrap">
+                <div className="text-white">{item.icon}</div>
+                <span className="text-white text-sm font-medium">{item.label}</span>
+              </div>
             </div>
-
-            {/* Navigation Items */}
-            <div className="space-y-1 min-w-40">
-              {navItems.map((item) => (
-                <NavItem 
-                  key={item.path}
-                  icon={item.icon} 
-                  label={item.label} 
-                  path={item.path}
-                  isActive={currentPath === item.path}
-                  onClick={() => handleNavigation(item.path)}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
+          );
+        })}
+      </div>
     </div>
   );
 };
diff --git a/ui/desktop/src/components/UserMessage.tsx b/ui/desktop/src/components/UserMessage.tsx
index 4eecb8016d75..bf3c8fdcdc46 100644
--- a/ui/desktop/src/components/UserMessage.tsx
+++ b/ui/desktop/src/components/UserMessage.tsx
@@ -31,8 +31,8 @@ export default function UserMessage({ message }: UserMessageProps) {
   const urls = extractUrls(displayText, []);
 
   return (
-    <div className="message flex justify-end mt-[16px] w-full opacity-0 animate-[appear_150ms_ease-in_forwards]">
-      <div className="flex-col max-w-[85%] w-fit">
+    <div className="message flex justify-end mt-[16px] w-full opacity-0 animate-[appear_150ms_ease-in_forwards] bg-transparent">
+      <div className="flex-col max-w-[85%] w-fit bg-transparent">
         <div className="flex flex-col group">
           <div className="flex bg-background-accent text-text-on-accent rounded-xl py-2.5 px-4">
             <div ref={contentRef}>
diff --git a/ui/desktop/src/components/pair.tsx b/ui/desktop/src/components/pair.tsx
index 8172d5388cac..6554c6ddb6c5 100644
--- a/ui/desktop/src/components/pair.tsx
+++ b/ui/desktop/src/components/pair.tsx
@@ -56,6 +56,7 @@ export default function Pair({
   const [shouldAutoSubmit, setShouldAutoSubmit] = useState(false);
   const [initialMessage, setInitialMessage] = useState<string | null>(null);
   const [isTransitioningFromHub, setIsTransitioningFromHub] = useState(false);
+  const [isInFocusMode, setIsInFocusMode] = useState(false);
 
   // Get recipe configuration and parameter handling
   const { initialPrompt: recipeInitialPrompt } = useRecipeManager(chat.messages, location.state);
@@ -64,6 +65,9 @@ export default function Pair({
   const { state: currentSidebarState } = useSidebar();
   const isSidebarCollapsed = currentSidebarState === 'collapsed';
 
+  // Get system theme preference
+  const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
   // Override backgrounds to allow our gradient to show through
   useEffect(() => {
     // Target the specific SidebarInset component with the complex class
@@ -123,9 +127,6 @@ export default function Pair({
     const chatInputContainer = document.querySelector('[data-drop-zone="true"]') as HTMLElement;
     if (chatInputContainer) {
       chatInputContainer.style.background = 'rgba(255, 255, 255, 0.05)';
-      chatInputContainer.style.backdropFilter = 'blur(10px)';
-      // @ts-expect-error - webkitBackdropFilter is a valid CSS property
-      chatInputContainer.style.webkitBackdropFilter = 'blur(10px)';
       chatInputContainer.style.border = '1px solid rgba(255, 255, 255, 0.1)';
     }
     
@@ -166,9 +167,6 @@ export default function Pair({
       });
       if (chatInputContainer) {
         chatInputContainer.style.background = '';
-        chatInputContainer.style.backdropFilter = '';
-        // @ts-expect-error - webkitBackdropFilter is a valid CSS property
-        chatInputContainer.style.webkitBackdropFilter = '';
         chatInputContainer.style.border = '';
       }
     };
@@ -282,6 +280,7 @@ export default function Pair({
     // This is called after a message is submitted
     setShouldAutoSubmit(false);
     setIsTransitioningFromHub(false); // Clear transitioning state once message is submitted
+    setIsInFocusMode(true); // Enable focus mode when user sends a message
     console.log('Message submitted:', message);
   };
 
@@ -289,6 +288,7 @@ export default function Pair({
   const handleMessageStreamFinish = () => {
     // This will be called with the proper append function from BaseChat
     // For now, we'll handle auto-execution in the BaseChat component
+    // Focus mode remains active until chat is refreshed
   };
 
   // Determine the initial value for the chat input
@@ -315,6 +315,17 @@ export default function Pair({
     return <div>{/* Any Pair-specific content before messages can go here */}</div>;
   };
 
+  // Fixed blur intensity and background color based on theme - matching home page styling
+  const blurIntensity = 20; // Consistent blur for chat mode
+  
+  // Get the actual theme from document.documentElement
+  const isDarkTheme = document.documentElement.classList.contains('dark');
+  
+  // Determine background color based on focus mode and theme
+  const backgroundColor = isInFocusMode
+    ? (isDarkTheme ? 'rgba(0, 0, 0, 0.9)' : 'rgba(255, 255, 255, 0.9)') // 90% opacity in focus mode
+    : (isDarkTheme ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'); // 70% opacity in normal mode
+
   return (
     <div className="flex flex-col h-full relative bg-transparent">
       {/* Image background implementation */}
@@ -327,9 +338,13 @@ export default function Pair({
         }}
       />
       
-      {/* Optional overlay for better text readability */}
+      {/* Fixed blur overlay - always present with consistent intensity */}
       <div 
-        className="fixed inset-0 -z-10 bg-black/20"
+        className="fixed inset-0 -z-5 pointer-events-none transition-colors duration-500"
+        style={{ 
+          backdropFilter: `blur(${blurIntensity}px)`,
+          backgroundColor: backgroundColor
+        }}
       />
       
       {/* Centered chat content */}