diff --git a/ui/desktop/src/components/GlobalBlurOverlay.tsx b/ui/desktop/src/components/GlobalBlurOverlay.tsx
index 93dd288e6c59..906b34666c1a 100644
--- a/ui/desktop/src/components/GlobalBlurOverlay.tsx
+++ b/ui/desktop/src/components/GlobalBlurOverlay.tsx
@@ -20,6 +20,7 @@ const GlobalBlurOverlay: React.FC = () => {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [backgroundImage, setBackgroundImage] = useState<string | null>(null);
   const [backgroundId, setBackgroundId] = useState<string>('default-gradient');
+  const [isProcessingChange, setIsProcessingChange] = useState(false);
   
   // Update theme detection when it changes
   useEffect(() => {
@@ -70,14 +71,49 @@ const GlobalBlurOverlay: React.FC = () => {
     // Listen for background changes
     const handleBackgroundChange = (e: CustomEvent) => {
       console.log("Background changed:", e.detail);
-      setBackgroundId(e.detail.backgroundId);
       
-      if (e.detail.backgroundId === 'custom-image' && e.detail.customImage) {
-        setBackgroundImage(e.detail.customImage);
-        setImageLoaded(true);
-      } else {
-        setBackgroundImage(null);
-      }
+      // Set processing flag to prevent UI freezes
+      setIsProcessingChange(true);
+      
+      // Use setTimeout to defer processing to next tick
+      setTimeout(() => {
+        try {
+          setBackgroundId(e.detail.backgroundId);
+          
+          if (e.detail.backgroundId === 'custom-image' && e.detail.customImage) {
+            setBackgroundImage(e.detail.customImage);
+            
+            // For custom images, we need to wait for them to load
+            if (e.detail.customImage !== backgroundImage) {
+              setImageLoaded(false);
+              const img = new Image();
+              img.onload = () => {
+                console.log("New custom background image loaded successfully");
+                setImageLoaded(true);
+                setIsProcessingChange(false);
+              };
+              img.onerror = (e) => {
+                console.error("Failed to load new custom background image:", e);
+                setImageLoaded(true); // Still mark as loaded to prevent UI freeze
+                setIsProcessingChange(false);
+              };
+              img.src = e.detail.customImage;
+            } else {
+              // If it's the same image, no need to reload
+              setImageLoaded(true);
+              setIsProcessingChange(false);
+            }
+          } else {
+            setBackgroundImage(null);
+            setImageLoaded(true);
+            setIsProcessingChange(false);
+          }
+        } catch (error) {
+          console.error("Error handling background change:", error);
+          setImageLoaded(true); // Ensure we don't get stuck in loading state
+          setIsProcessingChange(false);
+        }
+      }, 0);
     };
     
     window.addEventListener('dashboard-background-changed', handleBackgroundChange as EventListener);
@@ -86,7 +122,7 @@ const GlobalBlurOverlay: React.FC = () => {
       observer.disconnect();
       window.removeEventListener('dashboard-background-changed', handleBackgroundChange as EventListener);
     };
-  }, []);
+  }, [backgroundImage]);
 
   // Fixed blur intensity
   const blurIntensity = 20; // Consistent blur for chat mode
@@ -176,7 +212,8 @@ const GlobalBlurOverlay: React.FC = () => {
         Custom Image: ${backgroundImage ? 'Yes' : 'No'}<br />
         Dark Theme: ${isDarkTheme ? 'Yes' : 'No'}<br />
         Focus Mode: ${isInFocusMode ? 'Yes' : 'No'}<br />
-        Overlay Color: ${backgroundColor}
+        Overlay Color: ${backgroundColor}<br />
+        Processing Change: ${isProcessingChange ? 'Yes' : 'No'}
       `;
       
       document.body.appendChild(debugDiv);
@@ -194,7 +231,19 @@ const GlobalBlurOverlay: React.FC = () => {
         }
       }
     };
-  }, [backgroundId, backgroundImage, imageLoaded, isDarkTheme, isInFocusMode, backgroundColor]);
+  }, [backgroundId, backgroundImage, imageLoaded, isDarkTheme, isInFocusMode, backgroundColor, isProcessingChange]);
+
+  // Loading overlay to prevent interaction during background changes
+  if (isProcessingChange) {
+    return (
+      <div className="fixed inset-0 bg-background-default/50 backdrop-blur-sm flex items-center justify-center z-50">
+        <div className="bg-background-default p-4 rounded-lg shadow-lg flex flex-col items-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-textStandard mb-2"></div>
+          <p className="text-sm text-textStandard">Updating background...</p>
+        </div>
+      </div>
+    );
+  }
 
   // Return null since we're appending directly to the body
   return null;
diff --git a/ui/desktop/src/components/sessions/SessionListView.tsx b/ui/desktop/src/components/sessions/SessionListView.tsx
index a030a4eeee1d..b86aae593427 100644
--- a/ui/desktop/src/components/sessions/SessionListView.tsx
+++ b/ui/desktop/src/components/sessions/SessionListView.tsx
@@ -1,201 +1,320 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { Session, fetchSessions, updateSessionMetadata } from '../../sessions';
-import { ScrollArea } from '../ui/scroll-area';
-import { MainPanelLayout } from '../Layout/MainPanelLayout';
+import React, { useEffect, useState, useRef, useCallback, useMemo, startTransition } from 'react';
+import { MessageSquareText, Target, AlertCircle, Calendar, Folder, Edit2 } from 'lucide-react';
+import { fetchSessions, updateSessionMetadata, type Session } from '../../sessions';
+import { Card } from '../ui/card';
 import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Calendar, Folder, MessageSquareText, MoreHorizontal, AlertCircle, Target, Search, X } from 'lucide-react';
+import { ScrollArea } from '../ui/scroll-area';
+import { View, ViewOptions } from '../../utils/navigationUtils';
 import { formatMessageTimestamp } from '../../utils/timeUtils';
-import { StaggeredSessionItem } from './StaggeredSessionItem';
-
-interface DateGroup {
-  label: string;
-  sessions: Session[];
+import { SearchView } from '../conversation/SearchView';
+import { SearchHighlighter } from '../../utils/searchHighlighter';
+import { MainPanelLayout } from '../Layout/MainPanelLayout';
+import { groupSessionsByDate, type DateGroup } from '../../utils/dateUtils';
+import { Skeleton } from '../ui/skeleton';
+import { toast } from 'react-toastify';
+
+interface EditSessionModalProps {
+  session: Session | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (sessionId: string, newDescription: string) => Promise<void>;
+  disabled?: boolean;
 }
 
-interface SearchViewProps {
-  onSearch: (query: string) => void;
-}
+const EditSessionModal = React.memo<EditSessionModalProps>(
+  ({ session, isOpen, onClose, onSave, disabled = false }) => {
+    const [description, setDescription] = useState('');
+    const [isUpdating, setIsUpdating] = useState(false);
+
+    useEffect(() => {
+      if (session && isOpen) {
+        setDescription(session.metadata.description || session.id);
+      } else if (!isOpen) {
+        // Reset state when modal closes
+        setDescription('');
+        setIsUpdating(false);
+      }
+    }, [session, isOpen]);
 
-const SearchView: React.FC<SearchViewProps> = ({ onSearch }) => {
-  const [query, setQuery] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
+    const handleSave = useCallback(async () => {
+      if (!session || disabled) return;
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onSearch(query);
-  };
+      const trimmedDescription = description.trim();
+      if (trimmedDescription === session.metadata.description) {
+        onClose();
+        return;
+      }
 
-  const handleClear = () => {
-    setQuery('');
-    onSearch('');
-    inputRef.current?.focus();
-  };
+      setIsUpdating(true);
+      try {
+        await updateSessionMetadata(session.id, trimmedDescription);
+        await onSave(session.id, trimmedDescription);
+
+        // Close modal, then show success toast on a timeout to let the UI update complete.
+        onClose();
+        setTimeout(() => {
+          toast.success('Session description updated successfully');
+        }, 300);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+        console.error('Failed to update session description:', errorMessage);
+        toast.error(`Failed to update session description: ${errorMessage}`);
+        // Reset to original description on error
+        setDescription(session.metadata.description || session.id);
+      } finally {
+        setIsUpdating(false);
+      }
+    }, [session, description, onSave, onClose, disabled]);
 
-  return (
-    <form onSubmit={handleSubmit} className="flex items-center gap-2 mb-6">
-      <div className="relative flex-1">
-        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-text-muted" />
-        <Input
-          ref={inputRef}
-          type="text"
-          placeholder="Search sessions..."
-          className="pl-10 pr-10 py-2 h-10 bg-background-muted/30 border-borderSubtle"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-        />
-        {query && (
-          <button
-            type="button"
-            onClick={handleClear}
-            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-text-muted hover:text-text-standard"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        )}
+    const handleCancel = useCallback(() => {
+      if (!isUpdating) {
+        onClose();
+      }
+    }, [onClose, isUpdating]);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' && !isUpdating) {
+          handleSave();
+        } else if (e.key === 'Escape' && !isUpdating) {
+          handleCancel();
+        }
+      },
+      [handleSave, handleCancel, isUpdating]
+    );
+
+    const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      setDescription(e.target.value);
+    }, []);
+
+    if (!isOpen || !session) return null;
+
+    return (
+      <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/50">
+        <div className="bg-background-default border border-border-subtle rounded-lg p-6 w-[500px] max-w-[90vw]">
+          <h3 className="text-lg font-medium text-text-standard mb-4">Edit Session Description</h3>
+
+          <div className="space-y-4">
+            <div>
+              <input
+                id="session-description"
+                type="text"
+                value={description}
+                onChange={handleInputChange}
+                className="w-full p-3 border border-border-subtle rounded-lg bg-background-default text-text-standard focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter session description"
+                autoFocus
+                maxLength={200}
+                onKeyDown={handleKeyDown}
+                disabled={isUpdating || disabled}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-end space-x-3 mt-6">
+            <Button onClick={handleCancel} variant="ghost" disabled={isUpdating || disabled}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSave}
+              disabled={!description.trim() || isUpdating || disabled}
+              variant="default"
+            >
+              {isUpdating ? 'Saving...' : 'Save'}
+            </Button>
+          </div>
+        </div>
       </div>
-      <Button type="submit" variant="default" size="sm">
-        Search
-      </Button>
-    </form>
-  );
-};
+    );
+  }
+);
 
-export default function SessionListView({
-  onSessionSelect,
-}: {
-  onSessionSelect?: (sessionId: string) => void;
-}) {
+EditSessionModal.displayName = 'EditSessionModal';
+
+// Debounce hook for search
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      window.clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+interface SearchContainerElement extends HTMLDivElement {
+  _searchHighlighter: SearchHighlighter | null;
+}
+
+interface SessionListViewProps {
+  setView: (view: View, viewOptions?: ViewOptions) => void;
+  onSelectSession: (sessionId: string) => void;
+}
+
+const SessionListView: React.FC<SessionListViewProps> = React.memo(({ onSelectSession }) => {
   const [sessions, setSessions] = useState<Session[]>([]);
+  const [filteredSessions, setFilteredSessions] = useState<Session[]>([]);
   const [dateGroups, setDateGroups] = useState<DateGroup[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [showSkeleton, setShowSkeleton] = useState(true);
+  const [showContent, setShowContent] = useState(false);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [editingSession, setEditingSession] = useState<Session | null>(null);
+  const [searchResults, setSearchResults] = useState<{
+    count: number;
+    currentIndex: number;
+  } | null>(null);
+
+  // Edit modal state
   const [showEditModal, setShowEditModal] = useState(false);
-  const [newDescription, setNewDescription] = useState('');
-  const [searchResults, setSearchResults] = useState<Session[] | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const [editingSession, setEditingSession] = useState<Session | null>(null);
 
-  // Load sessions on mount
-  useEffect(() => {
-    loadSessions();
-  }, []);
+  // Search state for debouncing
+  const [searchTerm, setSearchTerm] = useState('');
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const debouncedSearchTerm = useDebounce(searchTerm, 300); // 300ms debounce
+
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  const loadSessions = async () => {
+  const loadSessions = useCallback(async () => {
     setIsLoading(true);
+    setShowSkeleton(true);
+    setShowContent(false);
     setError(null);
-
     try {
-      // Use the fetchSessions function from sessions.ts instead of window.electron.getSessions
-      const result = await fetchSessions();
-      setSessions(result);
-      groupSessionsByDate(result);
+      const sessions = await fetchSessions();
+      // Use startTransition to make state updates non-blocking
+      startTransition(() => {
+        setSessions(sessions);
+        setFilteredSessions(sessions);
+      });
     } catch (err) {
       console.error('Failed to load sessions:', err);
-      setError('Failed to load sessions. Please try again.');
+      setError('Failed to load sessions. Please try again later.');
+      setSessions([]);
+      setFilteredSessions([]);
     } finally {
-      // Set loading to false after a short delay to ensure smooth transition
-      setTimeout(() => {
-        setIsLoading(false);
-      }, 300);
+      setIsLoading(false);
     }
-  };
+  }, []);
 
-  const groupSessionsByDate = (sessionsToGroup: Session[]) => {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-
-    const yesterday = new Date(today);
-    yesterday.setDate(yesterday.getDate() - 1);
-
-    const lastWeek = new Date(today);
-    lastWeek.setDate(lastWeek.getDate() - 7);
-
-    const lastMonth = new Date(today);
-    lastMonth.setMonth(lastMonth.getMonth() - 1);
-
-    const groups: DateGroup[] = [
-      { label: 'Today', sessions: [] },
-      { label: 'Yesterday', sessions: [] },
-      { label: 'This Week', sessions: [] },
-      { label: 'This Month', sessions: [] },
-      { label: 'Earlier', sessions: [] },
-    ];
-
-    sessionsToGroup.forEach((session) => {
-      const sessionDate = new Date(session.modified);
-      sessionDate.setHours(0, 0, 0, 0);
-
-      if (sessionDate.getTime() === today.getTime()) {
-        groups[0].sessions.push(session);
-      } else if (sessionDate.getTime() === yesterday.getTime()) {
-        groups[1].sessions.push(session);
-      } else if (sessionDate > lastWeek) {
-        groups[2].sessions.push(session);
-      } else if (sessionDate > lastMonth) {
-        groups[3].sessions.push(session);
-      } else {
-        groups[4].sessions.push(session);
-      }
-    });
+  useEffect(() => {
+    loadSessions();
+  }, [loadSessions]);
 
-    // Filter out empty groups
-    const filteredGroups = groups.filter((group) => group.sessions.length > 0);
-    setDateGroups(filteredGroups);
-  };
+  // Timing logic to prevent flicker between skeleton and content on initial load
+  useEffect(() => {
+    if (!isLoading && showSkeleton) {
+      setShowSkeleton(false);
+      // Use startTransition for non-blocking content show
+      startTransition(() => {
+        setTimeout(() => {
+          setShowContent(true);
+          if (isInitialLoad) {
+            setIsInitialLoad(false);
+          }
+        }, 10);
+      });
+    }
+    return () => void 0;
+  }, [isLoading, showSkeleton, isInitialLoad]);
 
-  const handleSearch = (query: string) => {
-    if (!query.trim()) {
-      setSearchResults(null);
-      groupSessionsByDate(sessions);
+  // Memoize date groups calculation to prevent unnecessary recalculations
+  const memoizedDateGroups = useMemo(() => {
+    if (filteredSessions.length > 0) {
+      return groupSessionsByDate(filteredSessions);
+    }
+    return [];
+  }, [filteredSessions]);
+
+  // Update date groups when filtered sessions change
+  useEffect(() => {
+    startTransition(() => {
+      setDateGroups(memoizedDateGroups);
+    });
+  }, [memoizedDateGroups]);
+
+  // Debounced search effect - performs actual filtering
+  useEffect(() => {
+    if (!debouncedSearchTerm) {
+      startTransition(() => {
+        setFilteredSessions(sessions);
+        setSearchResults(null);
+      });
       return;
     }
 
-    const lowerQuery = query.toLowerCase();
-    const results = sessions.filter((session) => {
-      const description = (session.metadata.description || session.id).toLowerCase();
-      const workingDir = (session.metadata.working_dir || '').toLowerCase();
-      
-      return description.includes(lowerQuery) || workingDir.includes(lowerQuery);
+    // Use startTransition to make search non-blocking
+    startTransition(() => {
+      const searchTerm = caseSensitive ? debouncedSearchTerm : debouncedSearchTerm.toLowerCase();
+      const filtered = sessions.filter((session) => {
+        const description = session.metadata.description || session.id;
+        const path = session.path;
+        const workingDir = session.metadata.working_dir;
+
+        if (caseSensitive) {
+          return (
+            description.includes(searchTerm) ||
+            path.includes(searchTerm) ||
+            workingDir.includes(searchTerm)
+          );
+        } else {
+          return (
+            description.toLowerCase().includes(searchTerm) ||
+            path.toLowerCase().includes(searchTerm) ||
+            workingDir.toLowerCase().includes(searchTerm)
+          );
+        }
+      });
+
+      setFilteredSessions(filtered);
+      setSearchResults(filtered.length > 0 ? { count: filtered.length, currentIndex: 1 } : null);
     });
+  }, [debouncedSearchTerm, caseSensitive, sessions]);
 
-    setSearchResults(results);
-    groupSessionsByDate(results);
-  };
+  // Handle immediate search input (updates search term for debouncing)
+  const handleSearch = useCallback((term: string, caseSensitive: boolean) => {
+    setSearchTerm(term);
+    setCaseSensitive(caseSensitive);
+  }, []);
 
-  const handleSaveDescription = useCallback(async () => {
-    if (!editingSession) return;
+  // Handle search result navigation
+  const handleSearchNavigation = (direction: 'next' | 'prev') => {
+    if (!searchResults || filteredSessions.length === 0) return;
 
-    const sessionId = editingSession.id;
-    try {
-      // Use the updateSessionMetadata function from sessions.ts
-      await updateSessionMetadata(sessionId, newDescription);
-      setShowEditModal(false);
-      setEditingSession(null);
-
-      // Update session in state
-      setSessions((prevSessions) =>
-        prevSessions.map((s) =>
-          s.id === sessionId ? { ...s, metadata: { ...s.metadata, description: newDescription } } : s
-        )
-      );
-    } catch (error) {
-      console.error('Failed to update session description:', error);
+    let newIndex: number;
+    if (direction === 'next') {
+      newIndex = (searchResults.currentIndex % filteredSessions.length) + 1;
+    } else {
+      newIndex =
+        searchResults.currentIndex === 1 ? filteredSessions.length : searchResults.currentIndex - 1;
     }
-  }, [editingSession, newDescription]);
 
-  useEffect(() => {
-    if (editingSession) {
-      setNewDescription(editingSession.metadata.description || '');
+    setSearchResults({ ...searchResults, currentIndex: newIndex });
+
+    // Find the SearchView's container element
+    const searchContainer =
+      containerRef.current?.querySelector<SearchContainerElement>('.search-container');
+    if (searchContainer?._searchHighlighter) {
+      // Update the current match in the highlighter
+      searchContainer._searchHighlighter.setCurrentMatch(newIndex - 1, true);
     }
-  }, [editingSession]);
+  };
 
-  const handleCancelEdit = useCallback(() => {
+  // Handle modal close
+  const handleModalClose = useCallback(() => {
     setShowEditModal(false);
     setEditingSession(null);
   }, []);
 
-  const updateSessionDescription = useCallback((sessionId: string, newDescription: string) => {
+  const handleModalSave = useCallback(async (sessionId: string, newDescription: string) => {
+    // Update state immediately for optimistic UI
     setSessions((prevSessions) =>
       prevSessions.map((s) =>
         s.id === sessionId ? { ...s, metadata: { ...s.metadata, description: newDescription } } : s
@@ -208,7 +327,110 @@ export default function SessionListView({
     setShowEditModal(true);
   }, []);
 
-  const renderContent = () => {
+  const SessionItem = React.memo(function SessionItem({
+    session,
+    onEditClick,
+  }: {
+    session: Session;
+    onEditClick: (session: Session) => void;
+  }) {
+    const handleEditClick = useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation(); // Prevent card click
+        onEditClick(session);
+      },
+      [onEditClick, session]
+    );
+
+    const handleCardClick = useCallback(() => {
+      onSelectSession(session.id);
+    }, [session.id]);
+
+    return (
+      <Card
+        onClick={handleCardClick}
+        className="session-item h-full py-3 px-4 hover:shadow-default cursor-pointer transition-all duration-150 flex flex-col justify-between relative group"
+      >
+        <button
+          onClick={handleEditClick}
+          className="absolute top-3 right-4 p-2 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+          title="Edit session name"
+        >
+          <Edit2 className="w-3 h-3 text-textSubtle hover:text-textStandard" />
+        </button>
+
+        <div className="flex-1">
+          <h3 className="text-base mb-1 pr-6 break-words">
+            {session.metadata.description || session.id}
+          </h3>
+
+          <div className="flex items-center text-text-muted text-xs mb-1">
+            <Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
+            <span>{formatMessageTimestamp(Date.parse(session.modified) / 1000)}</span>
+          </div>
+          <div className="flex items-center text-text-muted text-xs mb-1">
+            <Folder className="w-3 h-3 mr-1 flex-shrink-0" />
+            <span className="truncate">{session.metadata.working_dir}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between mt-1 pt-2">
+          <div className="flex items-center space-x-3 text-xs text-text-muted">
+            <div className="flex items-center">
+              <MessageSquareText className="w-3 h-3 mr-1" />
+              <span className="font-mono">{session.metadata.message_count}</span>
+            </div>
+            {session.metadata.total_tokens !== null && (
+              <div className="flex items-center">
+                <Target className="w-3 h-3 mr-1" />
+                <span className="font-mono">{session.metadata.total_tokens.toLocaleString()}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </Card>
+    );
+  });
+
+  // Render skeleton loader for session items with variations
+  const SessionSkeleton = React.memo(({ variant = 0 }: { variant?: number }) => {
+    const titleWidths = ['w-3/4', 'w-2/3', 'w-4/5', 'w-1/2'];
+    const pathWidths = ['w-32', 'w-28', 'w-36', 'w-24'];
+    const tokenWidths = ['w-12', 'w-10', 'w-14', 'w-8'];
+
+    return (
+      <Card className="session-skeleton h-full py-3 px-4 flex flex-col justify-between">
+        <div className="flex-1">
+          <Skeleton className={`h-5 ${titleWidths[variant % titleWidths.length]} mb-2`} />
+          <div className="flex items-center mb-1">
+            <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
+            <Skeleton className="h-4 w-20" />
+          </div>
+          <div className="flex items-center mb-1">
+            <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
+            <Skeleton className={`h-4 ${pathWidths[variant % pathWidths.length]}`} />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between mt-1 pt-2">
+          <div className="flex items-center space-x-3">
+            <div className="flex items-center">
+              <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
+              <Skeleton className="h-4 w-8" />
+            </div>
+            <div className="flex items-center">
+              <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
+              <Skeleton className={`h-4 ${tokenWidths[variant % tokenWidths.length]}`} />
+            </div>
+          </div>
+        </div>
+      </Card>
+    );
+  });
+
+  SessionSkeleton.displayName = 'SessionSkeleton';
+
+  const renderActualContent = () => {
     if (error) {
       return (
         <div className="flex flex-col items-center justify-center h-full text-text-muted">
@@ -222,20 +444,6 @@ export default function SessionListView({
       );
     }
 
-    if (isLoading) {
-      // Show a minimal loading state instead of skeletons
-      return (
-        <div className="flex flex-col items-center justify-center h-full text-text-muted">
-          <div className="animate-pulse flex space-x-2 items-center">
-            <div className="h-2 w-2 bg-text-muted rounded-full"></div>
-            <div className="h-2 w-2 bg-text-muted rounded-full animation-delay-200"></div>
-            <div className="h-2 w-2 bg-text-muted rounded-full animation-delay-400"></div>
-          </div>
-          <p className="mt-4 text-sm">Loading sessions...</p>
-        </div>
-      );
-    }
-
     if (sessions.length === 0) {
       return (
         <div className="flex flex-col justify-center h-full text-text-muted">
@@ -256,23 +464,17 @@ export default function SessionListView({
       );
     }
 
-    // For regular rendering in grid layout with staggered animation
+    // For regular rendering in grid layout
     return (
       <div className="space-y-8">
-        {dateGroups.map((group, groupIndex) => (
+        {dateGroups.map((group) => (
           <div key={group.label} className="space-y-4">
-            <div className="sticky top-0 z-10 bg-background-default/80 backdrop-blur-md py-2">
+            <div className="sticky top-0 z-10 bg-background-default/95 backdrop-blur-sm">
               <h2 className="text-text-muted">{group.label}</h2>
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-              {group.sessions.map((session, index) => (
-                <StaggeredSessionItem 
-                  key={session.id} 
-                  session={session} 
-                  onEditClick={handleEditSession}
-                  index={index}
-                  groupIndex={groupIndex} 
-                />
+              {group.sessions.map((session) => (
+                <SessionItem key={session.id} session={session} onEditClick={handleEditSession} />
               ))}
             </div>
           </div>
@@ -281,16 +483,11 @@ export default function SessionListView({
     );
   };
 
-  // Custom main layout props to override background completely
-  const customMainLayoutProps = {
-    backgroundColor: 'transparent', // Force transparent background with inline style
-  };
-
   return (
     <>
-      <MainPanelLayout {...customMainLayoutProps}>
+      <MainPanelLayout>
         <div className="flex-1 flex flex-col min-h-0">
-          <div className="bg-background-default/80 backdrop-blur-md px-8 pb-8 pt-16">
+          <div className="bg-background-default px-8 pb-8 pt-16">
             <div className="flex flex-col page-transition">
               <div className="flex justify-between items-center mb-1">
                 <h1 className="text-4xl font-light">Chat history</h1>
@@ -304,35 +501,83 @@ export default function SessionListView({
           <div className="flex-1 min-h-0 relative px-8">
             <ScrollArea className="h-full" data-search-scroll-area>
               <div ref={containerRef} className="h-full relative">
-                <SearchView onSearch={handleSearch} />
-                {renderContent()}
+                <SearchView
+                  onSearch={handleSearch}
+                  onNavigate={handleSearchNavigation}
+                  searchResults={searchResults}
+                  className="relative"
+                >
+                  {/* Skeleton layer - always rendered but conditionally visible */}
+                  <div
+                    className={`absolute inset-0 transition-opacity duration-300 ${
+                      isLoading || showSkeleton
+                        ? 'opacity-100 z-10'
+                        : 'opacity-0 z-0 pointer-events-none'
+                    }`}
+                  >
+                    <div className="space-y-8">
+                      {/* Today section */}
+                      <div className="space-y-4">
+                        <Skeleton className="h-6 w-16" />
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                          <SessionSkeleton variant={0} />
+                          <SessionSkeleton variant={1} />
+                          <SessionSkeleton variant={2} />
+                          <SessionSkeleton variant={3} />
+                          <SessionSkeleton variant={0} />
+                        </div>
+                      </div>
+
+                      {/* Yesterday section */}
+                      <div className="space-y-4">
+                        <Skeleton className="h-6 w-20" />
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                          <SessionSkeleton variant={1} />
+                          <SessionSkeleton variant={2} />
+                          <SessionSkeleton variant={3} />
+                          <SessionSkeleton variant={0} />
+                          <SessionSkeleton variant={1} />
+                          <SessionSkeleton variant={2} />
+                        </div>
+                      </div>
+
+                      {/* Additional section */}
+                      <div className="space-y-4">
+                        <Skeleton className="h-6 w-24" />
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                          <SessionSkeleton variant={3} />
+                          <SessionSkeleton variant={0} />
+                          <SessionSkeleton variant={1} />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Content layer - always rendered but conditionally visible */}
+                  <div
+                    className={`relative transition-opacity duration-300 ${
+                      showContent ? 'opacity-100 z-10' : 'opacity-0 z-0'
+                    }`}
+                  >
+                    {renderActualContent()}
+                  </div>
+                </SearchView>
               </div>
             </ScrollArea>
           </div>
         </div>
       </MainPanelLayout>
 
-      {/* Edit Session Modal */}
-      {showEditModal && editingSession && (
-        <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/50">
-          <div className="bg-background-default border border-borderSubtle rounded-lg p-6 w-96 max-w-[90vw]">
-            <h3 className="text-lg font-medium text-text-standard mb-4">Edit Session Description</h3>
-            <Input
-              value={newDescription}
-              onChange={(e) => setNewDescription(e.target.value)}
-              placeholder="Enter a description for this session"
-              className="mb-6"
-              autoFocus
-            />
-            <div className="flex justify-end space-x-2">
-              <Button variant="outline" onClick={handleCancelEdit}>
-                Cancel
-              </Button>
-              <Button onClick={handleSaveDescription}>Save</Button>
-            </div>
-          </div>
-        </div>
-      )}
+      <EditSessionModal
+        session={editingSession}
+        isOpen={showEditModal}
+        onClose={handleModalClose}
+        onSave={handleModalSave}
+      />
     </>
   );
-}
+});
+
+SessionListView.displayName = 'SessionListView';
+
+export default SessionListView;
diff --git a/ui/desktop/src/components/sessions/SessionsView.tsx b/ui/desktop/src/components/sessions/SessionsView.tsx
index 9fa3eb1848e6..603a330e5b90 100644
--- a/ui/desktop/src/components/sessions/SessionsView.tsx
+++ b/ui/desktop/src/components/sessions/SessionsView.tsx
@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, ViewOptions } from '../../App';
+import { View, ViewOptions } from '../../utils/navigationUtils';
 import { fetchSessionDetails, type SessionDetails } from '../../sessions';
 import SessionListView from './SessionListView';
 import SessionHistoryView from './SessionHistoryView';
 import { toastError } from '../../toasts';
 import { useLocation } from 'react-router-dom';
+import BackgroundImageFix from '../BackgroundImageFix';
 
 interface SessionsViewProps {
   setView: (view: View, viewOptions?: ViewOptions) => void;
@@ -17,6 +18,56 @@ const SessionsView: React.FC<SessionsViewProps> = ({ setView }) => {
   const [initialSessionId, setInitialSessionId] = useState<string | null>(null);
   const location = useLocation();
 
+  // Use BackgroundImageFix for consistent background across the app
+  useEffect(() => {
+    // Override any background colors that might be covering our background
+    const mainPanels = document.querySelectorAll('.bg-background-default, .bg-background-muted') as NodeListOf<HTMLElement>;
+    mainPanels.forEach(panel => {
+      if (panel) {
+        panel.style.background = 'transparent';
+        panel.style.backgroundColor = 'transparent';
+      }
+    });
+
+    // Make session list transparent
+    const sessionList = document.querySelector('.sessions-list-container') as HTMLElement;
+    if (sessionList) {
+      sessionList.style.background = 'transparent';
+      sessionList.style.backgroundColor = 'transparent';
+    }
+
+    // Make session items transparent but with glass effect
+    const sessionItems = document.querySelectorAll('.session-item') as NodeListOf<HTMLElement>;
+    sessionItems.forEach(item => {
+      if (item) {
+        item.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+        item.style.backdropFilter = 'blur(10px)';
+      }
+    });
+
+    return () => {
+      // Cleanup styles
+      mainPanels.forEach(panel => {
+        if (panel) {
+          panel.style.background = '';
+          panel.style.backgroundColor = '';
+        }
+      });
+      
+      if (sessionList) {
+        sessionList.style.background = '';
+        sessionList.style.backgroundColor = '';
+      }
+      
+      sessionItems.forEach(item => {
+        if (item) {
+          item.style.backgroundColor = '';
+          item.style.backdropFilter = '';
+        }
+      });
+    };
+  }, []);
+
   const loadSessionDetails = async (sessionId: string) => {
     setIsLoadingSession(true);
     setError(null);
@@ -69,29 +120,37 @@ const SessionsView: React.FC<SessionsViewProps> = ({ setView }) => {
     }
   };
 
-  // If we're loading an initial session or have a selected session, show the session history view
-  // Otherwise, show the sessions list view
-  return selectedSession || (isLoadingSession && initialSessionId) ? (
-    <SessionHistoryView
-      session={
-        selectedSession || {
-          session_id: initialSessionId || '',
-          messages: [],
-          metadata: {
-            description: 'Loading...',
-            working_dir: '',
-            message_count: 0,
-            total_tokens: 0,
-          },
-        }
-      }
-      isLoading={isLoadingSession}
-      error={error}
-      onBack={handleBackToSessions}
-      onRetry={handleRetryLoadSession}
-    />
-  ) : (
-    <SessionListView setView={setView} onSelectSession={handleSelectSession} />
+  return (
+    <div className="relative h-full">
+      {/* Use the global BackgroundImageFix component */}
+      <BackgroundImageFix />
+      
+      {/* Content layer with transparent background */}
+      <div className="relative z-10 h-full bg-transparent">
+        {selectedSession || (isLoadingSession && initialSessionId) ? (
+          <SessionHistoryView
+            session={
+              selectedSession || {
+                session_id: initialSessionId || '',
+                messages: [],
+                metadata: {
+                  description: 'Loading...',
+                  working_dir: '',
+                  message_count: 0,
+                  total_tokens: 0,
+                },
+              }
+            }
+            isLoading={isLoadingSession}
+            error={error}
+            onBack={handleBackToSessions}
+            onRetry={handleRetryLoadSession}
+          />
+        ) : (
+          <SessionListView setView={setView} onSelectSession={handleSelectSession} />
+        )}
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/desktop/src/components/settings/app/BackgroundSelector.tsx b/ui/desktop/src/components/settings/app/BackgroundSelector.tsx
index 654e206b278e..81c941b7e733 100644
--- a/ui/desktop/src/components/settings/app/BackgroundSelector.tsx
+++ b/ui/desktop/src/components/settings/app/BackgroundSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Button } from '../../ui/button';
 import { Card } from '../../ui/card';
 import { Upload, X, RotateCcw } from 'lucide-react';
@@ -98,73 +98,177 @@ const DEFAULT_BACKGROUNDS: BackgroundOption[] = [
 const STORAGE_KEY = 'dashboard-background';
 const CUSTOM_IMAGE_KEY = 'dashboard-custom-image';
 const DOT_OVERLAY_KEY = 'dashboard-dot-overlay';
+const MAX_IMAGE_SIZE_MB = 5; // 5MB limit for images
 
 export default function BackgroundSelector() {
   const [selectedBackground, setSelectedBackground] = useState<string>('default-gradient');
   const [customImage, setCustomImage] = useState<string | null>(null);
   const [showDotOverlay, setShowDotOverlay] = useState(true);
   const [isDragging, setIsDragging] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  // Load saved settings
-  useEffect(() => {
-    const savedBackground = localStorage.getItem(STORAGE_KEY);
-    const savedCustomImage = localStorage.getItem(CUSTOM_IMAGE_KEY);
-    const savedDotOverlay = localStorage.getItem(DOT_OVERLAY_KEY);
-
-    if (savedBackground) {
-      setSelectedBackground(savedBackground);
-    }
-    if (savedCustomImage) {
-      setCustomImage(savedCustomImage);
-    }
-    if (savedDotOverlay !== null) {
-      setShowDotOverlay(savedDotOverlay === 'true');
+  // Safe event dispatch function
+  const safeDispatchEvent = useCallback((eventName: string, detail: any) => {
+    try {
+      // Use requestAnimationFrame to ensure UI updates before dispatching event
+      requestAnimationFrame(() => {
+        window.dispatchEvent(new CustomEvent(eventName, { detail }));
+      });
+      return true;
+    } catch (error) {
+      console.error(`Error dispatching ${eventName} event:`, error);
+      setError(`Failed to update background. Please try again.`);
+      return false;
     }
   }, []);
 
-  // Save settings and trigger update
-  const saveAndApplyBackground = (backgroundId: string, imageData?: string | null) => {
-    setSelectedBackground(backgroundId);
-    localStorage.setItem(STORAGE_KEY, backgroundId);
+  // Load saved settings with error handling
+  useEffect(() => {
+    try {
+      const savedBackground = localStorage.getItem(STORAGE_KEY);
+      const savedCustomImage = localStorage.getItem(CUSTOM_IMAGE_KEY);
+      const savedDotOverlay = localStorage.getItem(DOT_OVERLAY_KEY);
 
-    if (imageData !== undefined) {
-      if (imageData) {
-        localStorage.setItem(CUSTOM_IMAGE_KEY, imageData);
-      } else {
-        localStorage.removeItem(CUSTOM_IMAGE_KEY);
+      if (savedBackground) {
+        setSelectedBackground(savedBackground);
       }
-      setCustomImage(imageData);
+      if (savedCustomImage) {
+        setCustomImage(savedCustomImage);
+      }
+      if (savedDotOverlay !== null) {
+        setShowDotOverlay(savedDotOverlay === 'true');
+      }
+    } catch (error) {
+      console.error('Error loading background settings:', error);
+      // Continue with defaults if loading fails
     }
+  }, []);
+
+  // Save settings and trigger update with improved async handling
+  const saveAndApplyBackground = useCallback((backgroundId: string, imageData?: string | null) => {
+    // Clear any previous errors
+    setError(null);
+    
+    // Set updating state to show loading indicator
+    setIsUpdating(true);
+
+    // Use requestAnimationFrame to ensure UI updates before potentially intensive operations
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        try {
+          // Update state first
+          setSelectedBackground(backgroundId);
+          
+          // Then update storage
+          localStorage.setItem(STORAGE_KEY, backgroundId);
 
-    // Trigger a custom event to notify the dashboard to update
-    window.dispatchEvent(new CustomEvent('dashboard-background-changed', {
-      detail: { backgroundId, customImage: imageData !== undefined ? imageData : customImage }
-    }));
-  };
+          if (imageData !== undefined) {
+            if (imageData) {
+              localStorage.setItem(CUSTOM_IMAGE_KEY, imageData);
+            } else {
+              localStorage.removeItem(CUSTOM_IMAGE_KEY);
+            }
+            setCustomImage(imageData);
+          }
 
-  const handleDotOverlayToggle = (enabled: boolean) => {
-    setShowDotOverlay(enabled);
-    localStorage.setItem(DOT_OVERLAY_KEY, String(enabled));
-    window.dispatchEvent(new CustomEvent('dashboard-dot-overlay-changed', {
-      detail: { enabled }
-    }));
-  };
+          // Dispatch event after state and storage are updated
+          safeDispatchEvent('dashboard-background-changed', {
+            backgroundId, 
+            customImage: imageData !== undefined ? imageData : customImage
+          });
+        } catch (error) {
+          console.error('Error saving background settings:', error);
+          setError('Failed to save background settings. Please try again.');
+        } finally {
+          // Clear updating state after a short delay
+          setTimeout(() => {
+            setIsUpdating(false);
+          }, 300);
+        }
+      }, 0);
+    });
+  }, [customImage, safeDispatchEvent]);
 
-  const handleFileUpload = (file: File) => {
+  const handleDotOverlayToggle = useCallback((enabled: boolean) => {
+    setIsUpdating(true);
+    setError(null);
+    
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        try {
+          setShowDotOverlay(enabled);
+          localStorage.setItem(DOT_OVERLAY_KEY, String(enabled));
+          
+          safeDispatchEvent('dashboard-dot-overlay-changed', { enabled });
+        } catch (error) {
+          console.error('Error toggling dot overlay:', error);
+          setError('Failed to update overlay settings. Please try again.');
+        } finally {
+          setTimeout(() => {
+            setIsUpdating(false);
+          }, 300);
+        }
+      }, 0);
+    });
+  }, [safeDispatchEvent]);
+
+  // Validate and process image with size limits
+  const handleFileUpload = useCallback((file: File) => {
     if (!file.type.startsWith('image/')) {
-      alert('Please select an image file');
+      setError('Please select a valid image file');
       return;
     }
 
+    // Check file size (limit to 5MB)
+    if (file.size > MAX_IMAGE_SIZE_MB * 1024 * 1024) {
+      setError(`Image size exceeds ${MAX_IMAGE_SIZE_MB}MB limit. Please choose a smaller file.`);
+      return;
+    }
+
+    setIsUpdating(true);
+    setError(null);
+
+    // Process image in a non-blocking way
     const reader = new FileReader();
+    
     reader.onload = (e) => {
-      const imageData = e.target?.result as string;
-      saveAndApplyBackground('custom-image', imageData);
+      try {
+        const imageData = e.target?.result as string;
+        
+        // Validate image data
+        if (!imageData || !imageData.startsWith('data:image/')) {
+          throw new Error('Invalid image data');
+        }
+        
+        // Create an image to verify it loads correctly
+        const img = new Image();
+        img.onload = () => {
+          // Image loaded successfully, now safe to use
+          saveAndApplyBackground('custom-image', imageData);
+        };
+        img.onerror = () => {
+          setError('Failed to process image. The file may be corrupted.');
+          setIsUpdating(false);
+        };
+        img.src = imageData;
+      } catch (error) {
+        console.error('Error processing image:', error);
+        setError('Failed to process image. Please try another file.');
+        setIsUpdating(false);
+      }
+    };
+    
+    reader.onerror = () => {
+      console.error('Error reading file');
+      setError('Failed to read image file. Please try again.');
+      setIsUpdating(false);
     };
+    
     reader.readAsDataURL(file);
-  };
+  }, [saveAndApplyBackground]);
 
-  const handleDrop = (e: React.DragEvent) => {
+  const handleDrop = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     setIsDragging(false);
 
@@ -173,41 +277,88 @@ export default function BackgroundSelector() {
     
     if (imageFile) {
       handleFileUpload(imageFile);
+    } else if (files.length > 0) {
+      setError('Please drop an image file (JPG, PNG, GIF, etc.)');
     }
-  };
+  }, [handleFileUpload]);
 
-  const handleDragOver = (e: React.DragEvent) => {
+  const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     setIsDragging(true);
-  };
+  }, []);
 
-  const handleDragLeave = (e: React.DragEvent) => {
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     setIsDragging(false);
-  };
+  }, []);
 
-  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       handleFileUpload(file);
     }
-  };
+  }, [handleFileUpload]);
 
-  const removeCustomImage = () => {
+  const removeCustomImage = useCallback(() => {
     saveAndApplyBackground('default-gradient', null);
-  };
+  }, [saveAndApplyBackground]);
 
-  const resetToDefault = () => {
-    saveAndApplyBackground('default-gradient', null);
-    setShowDotOverlay(true);
-    localStorage.setItem(DOT_OVERLAY_KEY, 'true');
-    window.dispatchEvent(new CustomEvent('dashboard-dot-overlay-changed', {
-      detail: { enabled: true }
-    }));
-  };
+  const resetToDefault = useCallback(() => {
+    setIsUpdating(true);
+    setError(null);
+    
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        try {
+          // Update background
+          saveAndApplyBackground('default-gradient', null);
+          
+          // Update overlay
+          setShowDotOverlay(true);
+          localStorage.setItem(DOT_OVERLAY_KEY, 'true');
+          
+          safeDispatchEvent('dashboard-dot-overlay-changed', { enabled: true });
+        } catch (error) {
+          console.error('Error resetting to default:', error);
+          setError('Failed to reset settings. Please try again.');
+        } finally {
+          setTimeout(() => {
+            setIsUpdating(false);
+          }, 300);
+        }
+      }, 0);
+    });
+  }, [saveAndApplyBackground, safeDispatchEvent]);
+
+  // Loading overlay that blocks interaction during updates
+  const LoadingOverlay = () => (
+    isUpdating ? (
+      <div className="fixed inset-0 bg-background-default/50 backdrop-blur-sm flex items-center justify-center z-50">
+        <div className="bg-background-default p-4 rounded-lg shadow-lg flex flex-col items-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-textStandard mb-2"></div>
+          <p className="text-sm text-textStandard">Updating background...</p>
+        </div>
+      </div>
+    ) : null
+  );
+
+  // Error message display
+  const ErrorMessage = () => (
+    error ? (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-3 mb-4">
+        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+      </div>
+    ) : null
+  );
 
   return (
     <div className="space-y-6">
+      {/* Loading overlay */}
+      <LoadingOverlay />
+      
+      {/* Error message */}
+      <ErrorMessage />
+      
       {/* Dot Overlay Toggle */}
       <div className="flex items-center justify-between">
         <div>
@@ -220,6 +371,7 @@ export default function BackgroundSelector() {
           checked={showDotOverlay}
           onCheckedChange={handleDotOverlayToggle}
           variant="mono"
+          disabled={isUpdating}
         />
       </div>
 
@@ -234,8 +386,8 @@ export default function BackgroundSelector() {
                 selectedBackground === bg.id
                   ? 'ring-2 ring-blue-500 shadow-lg'
                   : 'hover:shadow-md'
-              }`}
-              onClick={() => saveAndApplyBackground(bg.id)}
+              } ${isUpdating ? 'pointer-events-none opacity-50' : ''}`}
+              onClick={() => !isUpdating && saveAndApplyBackground(bg.id)}
             >
               <div className="aspect-video relative">
                 <div
@@ -278,8 +430,8 @@ export default function BackgroundSelector() {
                 selectedBackground === 'custom-image'
                   ? 'ring-2 ring-blue-500 shadow-lg'
                   : 'hover:shadow-md'
-              }`}
-              onClick={() => saveAndApplyBackground('custom-image')}
+              } ${isUpdating ? 'pointer-events-none opacity-50' : ''}`}
+              onClick={() => !isUpdating && saveAndApplyBackground('custom-image')}
             >
               <div className="aspect-video relative">
                 <img
@@ -312,16 +464,18 @@ export default function BackgroundSelector() {
                 size="sm"
                 onClick={removeCustomImage}
                 className="flex items-center gap-2"
+                disabled={isUpdating}
               >
                 <X size={14} />
                 Remove
               </Button>
-              <label>
+              <label className={isUpdating ? 'pointer-events-none opacity-50' : ''}>
                 <Button
                   variant="outline"
                   size="sm"
                   className="flex items-center gap-2 cursor-pointer"
                   asChild
+                  disabled={isUpdating}
                 >
                   <span>
                     <Upload size={14} />
@@ -333,6 +487,7 @@ export default function BackgroundSelector() {
                   accept="image/*"
                   onChange={handleFileInputChange}
                   className="hidden"
+                  disabled={isUpdating}
                 />
               </label>
             </div>
@@ -343,7 +498,7 @@ export default function BackgroundSelector() {
               isDragging
                 ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/20'
                 : 'border-borderSubtle hover:border-borderStandard'
-            }`}
+            } ${isUpdating ? 'pointer-events-none opacity-50' : ''}`}
             onDrop={handleDrop}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
@@ -353,10 +508,16 @@ export default function BackgroundSelector() {
               Drop an image here or click to upload
             </p>
             <p className="text-xs text-textSubtle mb-4">
-              Supports JPG, PNG, GIF, WebP
+              Supports JPG, PNG, GIF, WebP (max {MAX_IMAGE_SIZE_MB}MB)
             </p>
-            <label>
-              <Button variant="outline" size="sm" className="cursor-pointer" asChild>
+            <label className={isUpdating ? 'pointer-events-none opacity-50' : ''}>
+              <Button 
+                variant="outline" 
+                size="sm" 
+                className="cursor-pointer" 
+                asChild
+                disabled={isUpdating}
+              >
                 <span>Choose File</span>
               </Button>
               <input
@@ -364,6 +525,7 @@ export default function BackgroundSelector() {
                 accept="image/*"
                 onChange={handleFileInputChange}
                 className="hidden"
+                disabled={isUpdating}
               />
             </label>
           </div>
@@ -377,6 +539,7 @@ export default function BackgroundSelector() {
           size="sm"
           onClick={resetToDefault}
           className="flex items-center gap-2"
+          disabled={isUpdating}
         >
           <RotateCcw size={14} />
           Reset to Default