diff --git a/src/components/FilePicker.optimized.tsx b/src/components/FilePicker.optimized.tsx
new file mode 100644
index 0000000..4169e79
--- /dev/null
+++ b/src/components/FilePicker.optimized.tsx
@@ -0,0 +1,416 @@
+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { motion } from "framer-motion";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Button } from "@/components/ui/button";
+import { api } from "@/lib/api";
+import { 
+  X, 
+  Folder, 
+  File, 
+  ArrowLeft,
+  FileCode,
+  FileText,
+  FileImage,
+  Search,
+  ChevronRight
+} from "lucide-react";
+import type { FileEntry } from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+// Global caches that persist across component instances
+const globalDirectoryCache = new Map<string, FileEntry[]>();
+const globalSearchCache = new Map<string, FileEntry[]>();
+
+interface FilePickerProps {
+  basePath: string;
+  onSelect: (entry: FileEntry) => void;
+  onClose: () => void;
+  initialQuery?: string;
+  className?: string;
+  allowDirectorySelection?: boolean;
+}
+
+// Memoized file icon selector
+const getFileIcon = (entry: FileEntry) => {
+  if (entry.is_directory) return Folder;
+  
+  const ext = entry.name.split('.').pop()?.toLowerCase();
+  switch (ext) {
+    case 'js':
+    case 'jsx':
+    case 'ts':
+    case 'tsx':
+    case 'py':
+    case 'java':
+    case 'cpp':
+    case 'c':
+    case 'go':
+    case 'rs':
+      return FileCode;
+    case 'md':
+    case 'txt':
+    case 'json':
+    case 'xml':
+    case 'yaml':
+    case 'yml':
+      return FileText;
+    case 'png':
+    case 'jpg':
+    case 'jpeg':
+    case 'gif':
+    case 'svg':
+    case 'webp':
+      return FileImage;
+    default:
+      return File;
+  }
+};
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+};
+
+export const FilePicker: React.FC<FilePickerProps> = React.memo(({
+  basePath,
+  onSelect,
+  onClose,
+  initialQuery = "",
+  className,
+  allowDirectorySelection = false
+}) => {
+  const [currentPath, setCurrentPath] = useState(basePath);
+  const [entries, setEntries] = useState<FileEntry[]>([]);
+  const [searchQuery, setSearchQuery] = useState(initialQuery);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const searchDebounceRef = useRef<NodeJS.Timeout>();
+
+  // Filter and sort entries
+  const displayEntries = useMemo(() => {
+    const filtered = searchQuery.trim()
+      ? entries.filter(entry => 
+          entry.name.toLowerCase().includes(searchQuery.toLowerCase())
+        )
+      : entries;
+    
+    return filtered.sort((a, b) => {
+      if (a.is_directory !== b.is_directory) {
+        return a.is_directory ? -1 : 1;
+      }
+      return a.name.localeCompare(b.name);
+    });
+  }, [entries, searchQuery]);
+
+  // Virtual scrolling setup
+  const virtualizer = useVirtualizer({
+    count: displayEntries.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => 32, // Height of each item
+    overscan: 10, // Number of items to render outside viewport
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  // Load directory contents
+  const loadDirectory = useCallback(async (path: string) => {
+    const cacheKey = path;
+    
+    // Check cache first
+    if (globalDirectoryCache.has(cacheKey)) {
+      setEntries(globalDirectoryCache.get(cacheKey)!);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const result = await api.listDirectoryContents(path);
+      globalDirectoryCache.set(cacheKey, result);
+      setEntries(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load directory');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Search functionality
+  const performSearch = useCallback(async (query: string) => {
+    if (!query.trim()) {
+      loadDirectory(currentPath);
+      return;
+    }
+
+    const cacheKey = `${currentPath}:${query}`;
+    
+    if (globalSearchCache.has(cacheKey)) {
+      setEntries(globalSearchCache.get(cacheKey)!);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const result = await api.searchFiles(currentPath, query);
+      globalSearchCache.set(cacheKey, result);
+      setEntries(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Search failed');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [currentPath, loadDirectory]);
+
+  // Handle entry click
+  const handleEntryClick = useCallback((entry: FileEntry) => {
+    if (!entry.is_directory || allowDirectorySelection) {
+      onSelect(entry);
+    }
+  }, [onSelect, allowDirectorySelection]);
+
+  // Handle entry double click
+  const handleEntryDoubleClick = useCallback((entry: FileEntry) => {
+    if (entry.is_directory) {
+      setCurrentPath(entry.path);
+      setSearchQuery("");
+      setSelectedIndex(0);
+    } else {
+      onSelect(entry);
+    }
+  }, [onSelect]);
+
+  // Keyboard navigation
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (displayEntries.length === 0) return;
+
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.max(0, prev - 1));
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.min(displayEntries.length - 1, prev + 1));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        const selectedEntry = displayEntries[selectedIndex];
+        if (selectedEntry) {
+          if (e.shiftKey || !selectedEntry.is_directory) {
+            handleEntryClick(selectedEntry);
+          } else {
+            handleEntryDoubleClick(selectedEntry);
+          }
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        onClose();
+        break;
+    }
+  }, [displayEntries, selectedIndex, handleEntryClick, handleEntryDoubleClick, onClose]);
+
+  // Debounced search
+  useEffect(() => {
+    if (searchDebounceRef.current) {
+      clearTimeout(searchDebounceRef.current);
+    }
+
+    searchDebounceRef.current = setTimeout(() => {
+      performSearch(searchQuery);
+    }, 300);
+
+    return () => {
+      if (searchDebounceRef.current) {
+        clearTimeout(searchDebounceRef.current);
+      }
+    };
+  }, [searchQuery, performSearch]);
+
+  // Load initial directory
+  useEffect(() => {
+    loadDirectory(currentPath);
+  }, [currentPath, loadDirectory]);
+
+  // Focus search input on mount
+  useEffect(() => {
+    searchInputRef.current?.focus();
+  }, []);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    const item = virtualizer.getVirtualItems().find(
+      vItem => vItem.index === selectedIndex
+    );
+    if (item) {
+      virtualizer.scrollToIndex(selectedIndex, { align: 'center' });
+    }
+  }, [selectedIndex, virtualizer]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      className={cn("flex flex-col bg-background rounded-lg shadow-lg", className)}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-2 p-4 border-b">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => {
+            const parentPath = currentPath.split('/').slice(0, -1).join('/') || '/';
+            setCurrentPath(parentPath);
+            setSearchQuery("");
+          }}
+          disabled={currentPath === '/' || currentPath === basePath}
+          className="h-8 w-8"
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+
+        <div className="flex-1 flex items-center gap-2">
+          <Search className="h-4 w-4 text-muted-foreground" />
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search files..."
+            className="flex-1 bg-transparent outline-none text-sm"
+          />
+        </div>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClose}
+          className="h-8 w-8"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Current path */}
+      <div className="px-4 py-2 border-b">
+        <div className="text-xs text-muted-foreground truncate">
+          {currentPath}
+        </div>
+      </div>
+
+      {/* File list with virtual scrolling */}
+      <div 
+        ref={scrollContainerRef}
+        className="flex-1 overflow-auto"
+        style={{ height: '400px' }}
+      >
+        {isLoading && (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-sm text-muted-foreground">Loading...</div>
+          </div>
+        )}
+
+        {error && (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-sm text-destructive">{error}</div>
+          </div>
+        )}
+
+        {!isLoading && !error && displayEntries.length === 0 && (
+          <div className="flex flex-col items-center justify-center h-full">
+            <Search className="h-8 w-8 text-muted-foreground mb-2" />
+            <span className="text-sm text-muted-foreground">
+              {searchQuery.trim() ? 'No files found' : 'Empty directory'}
+            </span>
+          </div>
+        )}
+
+        {displayEntries.length > 0 && (
+          <div
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            {virtualItems.map((virtualRow) => {
+              const entry = displayEntries[virtualRow.index];
+              const Icon = getFileIcon(entry);
+              const isSelected = virtualRow.index === selectedIndex;
+              
+              return (
+                <div
+                  key={virtualRow.key}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: `${virtualRow.size}px`,
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }}
+                >
+                  <button
+                    onClick={() => handleEntryClick(entry)}
+                    onDoubleClick={() => handleEntryDoubleClick(entry)}
+                    onMouseEnter={() => setSelectedIndex(virtualRow.index)}
+                    className={cn(
+                      "w-full flex items-center gap-2 px-2 py-1.5",
+                      "hover:bg-accent transition-colors",
+                      "text-left text-sm h-8",
+                      isSelected && "bg-accent"
+                    )}
+                    title={entry.is_directory ? "Click to select • Double-click to enter" : "Click to select"}
+                  >
+                    <Icon className={cn(
+                      "h-4 w-4 flex-shrink-0",
+                      entry.is_directory ? "text-blue-500" : "text-muted-foreground"
+                    )} />
+                    
+                    <span className="flex-1 truncate">
+                      {entry.name}
+                    </span>
+                    
+                    {!entry.is_directory && entry.size > 0 && (
+                      <span className="text-xs text-muted-foreground">
+                        {formatFileSize(entry.size)}
+                      </span>
+                    )}
+                    
+                    {entry.is_directory && (
+                      <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                    )}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between p-4 border-t">
+        <div className="text-xs text-muted-foreground">
+          {displayEntries.length} {displayEntries.length === 1 ? 'item' : 'items'}
+        </div>
+        {allowDirectorySelection && (
+          <div className="text-xs text-muted-foreground">
+            Shift+Enter to select directory
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+});
\ No newline at end of file
diff --git a/src/components/SessionList.optimized.tsx b/src/components/SessionList.optimized.tsx
new file mode 100644
index 0000000..89a1daf
--- /dev/null
+++ b/src/components/SessionList.optimized.tsx
@@ -0,0 +1,209 @@
+import React, { useMemo, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { FileText, ArrowLeft, Calendar, Clock } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Pagination } from "@/components/ui/pagination";
+import { ClaudeMemoriesDropdown } from "@/components/ClaudeMemoriesDropdown";
+import { cn } from "@/lib/utils";
+import { formatUnixTimestamp, formatISOTimestamp } from "@/lib/date-utils";
+import { usePagination } from "@/hooks/usePagination";
+import type { Session, ClaudeMdFile } from "@/lib/api";
+
+interface SessionListProps {
+  sessions: Session[];
+  projectPath: string;
+  onBack: () => void;
+  onSessionClick?: (session: Session) => void;
+  onEditClaudeFile?: (file: ClaudeMdFile) => void;
+  className?: string;
+}
+
+// Memoized session card component to prevent unnecessary re-renders
+const SessionCard = React.memo<{
+  session: Session;
+  projectPath: string;
+  onClick?: () => void;
+  onEditClaudeFile?: (file: ClaudeMdFile) => void;
+}>(({ session, projectPath, onClick, onEditClaudeFile }) => {
+  const formatTime = useCallback((timestamp: string | number | undefined) => {
+    if (!timestamp) return "Unknown time";
+    
+    if (typeof timestamp === "string") {
+      return formatISOTimestamp(timestamp);
+    } else {
+      return formatUnixTimestamp(timestamp);
+    }
+  }, []);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      whileHover={{ scale: 1.01 }}
+      whileTap={{ scale: 0.99 }}
+    >
+      <Card 
+        className={cn(
+          "cursor-pointer transition-all",
+          "hover:shadow-lg hover:border-primary/20",
+          "bg-card/50 backdrop-blur-sm"
+        )}
+        onClick={onClick}
+      >
+        <CardContent className="p-6">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 space-y-3">
+              {/* Session title */}
+              <div className="flex items-start gap-3">
+                <FileText className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-lg truncate">
+                    {`Session ${session.id.slice(0, 8)}`}
+                  </h3>
+                </div>
+              </div>
+
+              {/* Session metadata */}
+              <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-3.5 w-3.5" />
+                  <span>{formatTime(session.created_at)}</span>
+                </div>
+                {session.message_timestamp && (
+                  <div className="flex items-center gap-1">
+                    <Clock className="h-3.5 w-3.5" />
+                    <span>{formatTime(session.message_timestamp)}</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Session ID */}
+              <div className="text-xs text-muted-foreground/60 font-mono">
+                ID: {session.id}
+              </div>
+            </div>
+
+            {/* Claude memories dropdown */}
+            <div className="ml-4">
+              <ClaudeMemoriesDropdown
+                projectPath={projectPath}
+                onEditFile={onEditClaudeFile || (() => {})}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+});
+
+SessionCard.displayName = 'SessionCard';
+
+export const SessionList: React.FC<SessionListProps> = React.memo(({
+  sessions,
+  projectPath,
+  onBack,
+  onSessionClick,
+  onEditClaudeFile,
+  className
+}) => {
+  // Sort sessions by created_at in descending order
+  const sortedSessions = useMemo(() => {
+    return [...sessions].sort((a, b) => {
+      const timeA = a.created_at || 0;
+      const timeB = b.created_at || 0;
+      return timeB > timeA ? 1 : -1;
+    });
+  }, [sessions]);
+
+  // Use custom pagination hook
+  const {
+    currentPage,
+    totalPages,
+    paginatedData,
+    goToPage,
+    canGoNext: _canGoNext,
+    canGoPrevious: _canGoPrevious
+  } = usePagination(sortedSessions, {
+    initialPage: 1,
+    initialPageSize: 5
+  });
+
+  const handleSessionClick = useCallback((session: Session) => {
+    onSessionClick?.(session);
+  }, [onSessionClick]);
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onBack}
+            className="h-8 w-8"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h2 className="text-2xl font-bold">Sessions</h2>
+            <p className="text-sm text-muted-foreground">
+              {projectPath}
+            </p>
+          </div>
+        </div>
+        <div className="text-sm text-muted-foreground">
+          {sessions.length} {sessions.length === 1 ? 'session' : 'sessions'}
+        </div>
+      </div>
+
+      {/* Sessions list */}
+      {sessions.length === 0 ? (
+        <Card className="bg-muted/20">
+          <CardContent className="p-12 text-center">
+            <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+            <p className="text-muted-foreground">
+              No sessions found for this project
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <>
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentPage}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 20 }}
+              className="space-y-4"
+            >
+              {paginatedData.map((session) => (
+                <SessionCard
+                  key={session.id}
+                  session={session}
+                  projectPath={projectPath}
+                  onClick={() => handleSessionClick(session)}
+                  onEditClaudeFile={onEditClaudeFile}
+                />
+              ))}
+            </motion.div>
+          </AnimatePresence>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex justify-center">
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={goToPage}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});
\ No newline at end of file