diff --git a/app/globals.css b/app/globals.css
index 92a8651..aabc354 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -47,6 +47,7 @@ html[data-theme="dark"] {
   --rah-bg-elevated: #161616;
   --rah-bg-active: #1a1a1a;
   --rah-bg-modal: #141414;
+  --rah-bg-folder: #222222;
   --rah-border: #1a1a1a;
   --rah-border-strong: #2a2a2a;
   --rah-border-stronger: #3a3a3a;
@@ -77,6 +78,7 @@ html[data-theme="light"] {
   --rah-bg-elevated: #ececec;
   --rah-bg-active: #e8e8e8;
   --rah-bg-modal: #ffffff;
+  --rah-bg-folder: #dfdfdf;
   --rah-border: #e5e5e5;
   --rah-border-strong: #d4d4d4;
   --rah-border-stronger: #bdbdbd;
diff --git a/src/components/nodes/FolderViewOverlay.tsx b/src/components/nodes/FolderViewOverlay.tsx
index a3617cb..0a76059 100644
--- a/src/components/nodes/FolderViewOverlay.tsx
+++ b/src/components/nodes/FolderViewOverlay.tsx
@@ -1,21 +1,21 @@
 "use client";
 
-import { useEffect, useMemo, useState, useRef, type DragEvent } from 'react';
+import { useEffect, useMemo, useRef, useState, type DragEvent } from 'react';
 import { createPortal } from 'react-dom';
-import { X, ArrowLeft, Plus, Trash2, Edit2 } from 'lucide-react';
+import { ArrowLeft, Edit2, FolderPlus, Plus, Trash2, X } from 'lucide-react';
 import type { Node } from '@/types/database';
 import ConfirmDialog from '../common/ConfirmDialog';
 import InputDialog from '../common/InputDialog';
-import { getNodeIcon } from '@/utils/nodeIcons';
 import LucideIconPicker, { DynamicIcon } from '../common/LucideIconPicker';
+import { getNodeIcon } from '@/utils/nodeIcons';
 import { useDimensionIcons } from '@/context/DimensionIconsContext';
-import { usePersistentState } from '@/hooks/usePersistentState';
 
 interface DimensionSummary {
   dimension: string;
   count: number;
   isPriority: boolean;
   description?: string | null;
+  icon?: string | null;
 }
 
 interface FolderViewOverlayProps {
@@ -27,9 +27,41 @@ interface FolderViewOverlayProps {
   toolbarHost?: HTMLDivElement | null;
 }
 
-const PAGE_SIZE = 100;
+const PAGE_SIZE = 50;
+const CARD_BG = 'var(--rah-bg-card)';
+const CARD_TEXT = 'var(--rah-text-primary)';
 
-export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, onDataChanged, onDimensionSelect, toolbarHost }: FolderViewOverlayProps) {
+function formatRelativeTime(dateStr: string | null | undefined): string {
+  if (!dateStr) return 'now';
+
+  const now = Date.now();
+  const then = new Date(dateStr).getTime();
+  const diff = now - then;
+
+  const minutes = Math.floor(diff / 60000);
+  if (minutes < 1) return 'now';
+  if (minutes < 60) return `${minutes}m`;
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d`;
+
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo`;
+
+  return `${Math.floor(months / 12)}y`;
+}
+
+export default function FolderViewOverlay({
+  onClose,
+  onNodeOpen,
+  refreshToken,
+  onDataChanged,
+  onDimensionSelect,
+  toolbarHost,
+}: FolderViewOverlayProps) {
   const [view, setView] = useState<'dimensions' | 'nodes'>('dimensions');
   const [dimensions, setDimensions] = useState<DimensionSummary[]>([]);
   const [dimensionsLoading, setDimensionsLoading] = useState(true);
@@ -40,138 +72,64 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
   const [nodesError, setNodesError] = useState<string | null>(null);
   const [hasMoreNodes, setHasMoreNodes] = useState(false);
   const [nodeOffset, setNodeOffset] = useState(0);
-  const [deletingDimension, setDeletingDimension] = useState<string | null>(null);
-  const [dimensionPendingDelete, setDimensionPendingDelete] = useState<string | null>(null);
-  const [dragHoverDimension, setDragHoverDimension] = useState<string | null>(null);
-  const [editingDescription, setEditingDescription] = useState<boolean>(false);
-  const [editDescriptionText, setEditDescriptionText] = useState('');
-  const [editingDimensionName, setEditingDimensionName] = useState<boolean>(false);
-  const [editDimensionNameText, setEditDimensionNameText] = useState('');
   const [showAddDimensionDialog, setShowAddDimensionDialog] = useState(false);
-  const draggedNodeRef = useRef<{ id: number; title?: string; dimensions?: string[] } | null>(null);
+  const [dimensionPendingDelete, setDimensionPendingDelete] = useState<string | null>(null);
+  const [deletingDimension, setDeletingDimension] = useState<string | null>(null);
+  const [dragHoverDimension, setDragHoverDimension] = useState<string | null>(null);
+  const [editingDescription, setEditingDescription] = useState(false);
+  const [editDescriptionText, setEditDescriptionText] = useState('');
 
-  // Kanban columns state (global, persisted)
-  const [kanbanColumns, setKanbanColumns] = usePersistentState<{ dimension: string; order: number }[]>(
-    'ui.kanbanColumns.global',
-    []
-  );
+  const [hoveredDimension, setHoveredDimension] = useState<string | null>(null);
 
-  // Kanban-specific drag states
-  const [draggedNodeId, setDraggedNodeId] = useState<number | null>(null);
-  const [draggedFromColumn, setDraggedFromColumn] = useState<string | null>(null);
-  const [dragOverColumn, setDragOverColumn] = useState<string | null>(null);
-  const [showKanbanColumnPicker, setShowKanbanColumnPicker] = useState(false);
-  const [kanbanSearchQuery, setKanbanSearchQuery] = useState('');
-
-  // Kanban drag-and-drop state
-  const [draggedNode, setDraggedNode] = useState<{ id: number; fromDimension: string } | null>(null);
-  const [dropTargetDimension, setDropTargetDimension] = useState<string | null>(null);
-
-  // Kanban column reordering state
-  const [draggedColumn, setDraggedColumn] = useState<string | null>(null);
-  const [columnDropTarget, setColumnDropTarget] = useState<string | null>(null);
-
-  // Node priority ordering within dimensions (persisted)
-  const [dimensionOrders, setDimensionOrders] = usePersistentState<Record<string, number[]>>('ui.dimensionOrders', {});
-
-  // Dimension icons from shared context
-  const { dimensionIcons, setDimensionIcons } = useDimensionIcons();
-
-  // Dimension edit modal state
   const [editingDimensionModal, setEditingDimensionModal] = useState<DimensionSummary | null>(null);
   const [editModalName, setEditModalName] = useState('');
   const [editModalDescription, setEditModalDescription] = useState('');
   const [editModalIcon, setEditModalIcon] = useState('Folder');
-  const [savingDimensionEdit, setSavingDimensionEdit] = useState(false);
   const [editModalNameError, setEditModalNameError] = useState('');
+  const [savingDimensionEdit, setSavingDimensionEdit] = useState(false);
 
-  // Within-dimension reorder drag state
-  const [reorderDrag, setReorderDrag] = useState<{ nodeId: number; dimension: string; index: number } | null>(null);
-  const [reorderDropIndex, setReorderDropIndex] = useState<number | null>(null);
+  const draggedNodeRef = useRef<{ id: number; title?: string; dimensions?: string[] } | null>(null);
+  const { dimensionIcons, setDimensionIcons } = useDimensionIcons();
+
+  const sortedDimensions = useMemo(
+    () => [...dimensions].sort((a, b) => a.dimension.localeCompare(b.dimension)),
+    [dimensions],
+  );
 
   useEffect(() => {
-    fetchDimensions();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    void fetchDimensions();
   }, []);
 
   useEffect(() => {
     if (view === 'dimensions') {
-      fetchDimensions();
-    } else if (selectedDimension) {
-      fetchNodes(true);
+      void fetchDimensions();
+      return;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [refreshToken]);
 
-  useEffect(() => {
-    if (!selectedDimension) return;
-    fetchNodes(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedDimension?.dimension]);
-
-  // Sort nodes by their priority order within a dimension
-  const sortNodesByDimensionOrder = (nodes: Node[], dimension: string): Node[] => {
-    const order = dimensionOrders[dimension] || [];
-    return [...nodes].sort((a, b) => {
-      const aIndex = order.indexOf(a.id);
-      const bIndex = order.indexOf(b.id);
-      // Nodes in order array come first, sorted by their position
-      // Nodes not in order array go to end, sorted by ID
-      if (aIndex === -1 && bIndex === -1) return a.id - b.id;
-      if (aIndex === -1) return 1;
-      if (bIndex === -1) return -1;
-      return aIndex - bIndex;
-    });
-  };
-
-  // Handle reordering a node within a dimension
-  const handleReorderDrop = (dimension: string, fromIndex: number, toIndex: number, nodes: Node[]) => {
-    if (fromIndex === toIndex) return;
-
-    // Get current order or create from current node order
-    const currentOrder = dimensionOrders[dimension] || nodes.map(n => n.id);
-    const nodeIds = [...currentOrder];
-
-    // Ensure all nodes are in the order array
-    nodes.forEach(n => {
-      if (!nodeIds.includes(n.id)) {
-        nodeIds.push(n.id);
-      }
-    });
-
-    // Move the node from fromIndex to toIndex
-    const [movedId] = nodeIds.splice(fromIndex, 1);
-    nodeIds.splice(toIndex, 0, movedId);
-
-    // Update the dimension orders
-    setDimensionOrders({
-      ...dimensionOrders,
-      [dimension]: nodeIds
-    });
-
-    setReorderDrag(null);
-    setReorderDropIndex(null);
-  };
-
-  const sortedDimensions = useMemo(() => {
-    return [...dimensions].sort((a, b) => {
-      if (a.isPriority !== b.isPriority) {
-        return a.isPriority ? -1 : 1;
-      }
-      return a.dimension.localeCompare(b.dimension);
-    });
-  }, [dimensions]);
+    if (selectedDimension) {
+      void fetchNodes(selectedDimension.dimension, true);
+      void fetchDimensions();
+    }
+  }, [refreshToken]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const fetchDimensions = async () => {
     setDimensionsLoading(true);
     setDimensionsError(null);
+
     try {
-      const response = await fetch('/api/dimensions/popular');
+      const response = await fetch('/api/dimensions');
       const data = await response.json();
+
       if (!response.ok || !data.success) {
         throw new Error(data.error || 'Failed to fetch dimensions');
       }
+
       setDimensions(data.data || []);
+      setSelectedDimension((current) => {
+        if (!current) return current;
+        const updated = (data.data || []).find((dim: DimensionSummary) => dim.dimension === current.dimension);
+        return updated ?? current;
+      });
     } catch (error) {
       console.error('Error fetching dimensions:', error);
       setDimensionsError('Failed to load dimensions');
@@ -180,21 +138,30 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
     }
   };
 
-  const fetchNodes = async (reset = false) => {
-    if (!selectedDimension) return;
+  const fetchNodes = async (dimensionName: string, reset = false) => {
     setNodesLoading(true);
     setNodesError(null);
+
     try {
       const offset = reset ? 0 : nodeOffset;
-      const response = await fetch(`/api/nodes?dimensions=${encodeURIComponent(selectedDimension.dimension)}&limit=${PAGE_SIZE}&offset=${offset}`);
+      const params = new URLSearchParams({
+        dimensions: dimensionName,
+        limit: String(PAGE_SIZE),
+        offset: String(offset),
+        sortBy: 'updated',
+      });
+
+      const response = await fetch(`/api/nodes?${params.toString()}`);
       const data = await response.json();
+
       if (!response.ok || !data.success) {
         throw new Error(data.error || 'Failed to fetch nodes');
       }
+
       const fetchedNodes: Node[] = data.data || [];
-      setNodes((prev) => reset ? fetchedNodes : [...prev, ...fetchedNodes]);
-      setHasMoreNodes(fetchedNodes.length === PAGE_SIZE);
+      setNodes((prev) => (reset ? fetchedNodes : [...prev, ...fetchedNodes]));
       setNodeOffset(offset + fetchedNodes.length);
+      setHasMoreNodes(fetchedNodes.length === PAGE_SIZE);
     } catch (error) {
       console.error('Error fetching nodes:', error);
       setNodesError('Failed to load nodes');
@@ -204,7 +171,15 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
   };
 
   const handleSelectDimension = (dimension: DimensionSummary) => {
+    setSelectedDimension(dimension);
+    setView('nodes');
+    setNodes([]);
+    setNodeOffset(0);
+    setHasMoreNodes(false);
+    setEditingDescription(false);
+    setEditDescriptionText('');
     onDimensionSelect?.(dimension.dimension);
+    void fetchNodes(dimension.dimension, true);
   };
 
   const handleBackToDimensions = () => {
@@ -213,44 +188,52 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
     setNodes([]);
     setNodeOffset(0);
     setHasMoreNodes(false);
+    setEditingDescription(false);
+    setEditDescriptionText('');
     onDimensionSelect?.(null);
   };
 
   const handleAddDimension = async (name: string) => {
-    if (!name || !name.trim()) return;
+    if (!name.trim()) return;
+
     try {
       const response = await fetch('/api/dimensions', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: name.trim() })
+        body: JSON.stringify({ name: name.trim() }),
       });
       const data = await response.json();
+
       if (!response.ok || !data.success) {
         throw new Error(data.error || 'Failed to create dimension');
       }
+
       await fetchDimensions();
       onDataChanged?.();
       setShowAddDimensionDialog(false);
     } catch (error) {
-      console.error('Error adding dimension:', error);
+      console.error('Error creating dimension:', error);
       alert('Failed to create dimension. Please try again.');
     }
   };
 
-
   const handleDeleteDimension = async (dimension: string) => {
     setDeletingDimension(dimension);
+
     try {
       const response = await fetch(`/api/dimensions?name=${encodeURIComponent(dimension)}`, {
-        method: 'DELETE'
+        method: 'DELETE',
       });
       const data = await response.json();
+
       if (!response.ok || !data.success) {
         throw new Error(data.error || 'Failed to delete dimension');
       }
+
       if (selectedDimension?.dimension === dimension) {
         handleBackToDimensions();
       }
+
       await fetchDimensions();
       onDataChanged?.();
     } catch (error) {
@@ -262,23 +245,19 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
     }
   };
 
-  const handleNodeTileDragStart = (event: DragEvent<HTMLDivElement>, node: Node) => {
+  const handleNodeTileDragStart = (event: DragEvent<HTMLButtonElement | HTMLDivElement>, node: Node) => {
     event.dataTransfer.effectAllowed = 'copyMove';
     const nodeData = {
       id: node.id,
       title: node.title || 'Untitled',
-      dimensions: node.dimensions || []
+      dimensions: node.dimensions || [],
     };
-    // Store in ref for webview compatibility (dataTransfer.getData can fail in Electron/Tauri)
+
     draggedNodeRef.current = nodeData;
-    // Set multiple MIME types for different drop targets
     event.dataTransfer.setData('application/node-info', JSON.stringify(nodeData));
-    // For chat input drops - includes title for [NODE:id:"title"] token
     event.dataTransfer.setData('application/x-rah-node', JSON.stringify({ id: node.id, title: node.title || 'Untitled' }));
-    // Fallback for browsers/webviews that only support text/plain
     event.dataTransfer.setData('text/plain', `[NODE:${node.id}:"${node.title || 'Untitled'}"]`);
 
-     // Provide a compact drag preview so drop targets stay visible
     const preview = document.createElement('div');
     preview.textContent = node.title || `Node #${node.id}`;
     preview.style.position = 'fixed';
@@ -293,15 +272,13 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
     preview.style.border = '1px solid #1f1f1f';
     document.body.appendChild(preview);
     event.dataTransfer.setDragImage(preview, 6, 6);
+
     setTimeout(() => {
-      if (preview.parentNode) {
-        preview.parentNode.removeChild(preview);
-      }
+      preview.parentNode?.removeChild(preview);
     }, 0);
   };
 
   const handleNodeTileDragEnd = () => {
-    // Clear ref if drag ends without a drop
     draggedNodeRef.current = null;
   };
 
@@ -318,7 +295,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
     }
   };
 
-  const handleDimensionDragLeave = (event: DragEvent<HTMLElement>, dimension: string) => {
+  const handleDimensionDragLeave = (_event: DragEvent<HTMLElement>, dimension: string) => {
     if (dragHoverDimension === dimension) {
       setDragHoverDimension(null);
     }
@@ -327,27 +304,24 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
   const handleNodeDropOnDimension = async (event: DragEvent<HTMLElement>, dimension: string) => {
     event.preventDefault();
     event.stopPropagation();
-    
-    // Try to get data from ref first (works in Electron/Tauri webviews)
+
     let payload: { id: number; dimensions?: string[] } | null = draggedNodeRef.current;
-    
-    // Fallback to dataTransfer for browser compatibility
+
     if (!payload) {
       const raw = event.dataTransfer.getData('application/node-info') || event.dataTransfer.getData('text/plain');
       if (raw) {
         try {
           payload = JSON.parse(raw);
-        } catch (e) {
-          console.error('Failed to parse drag data:', e);
+        } catch (error) {
+          console.error('Failed to parse drag data:', error);
         }
       }
     }
-    
-    // Clear the ref
+
     draggedNodeRef.current = null;
-    
+
     if (!payload?.id) {
-      console.warn('No valid node data in drop event');
+      setDragHoverDimension(null);
       return;
     }
 
@@ -362,7 +336,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
       const response = await fetch(`/api/nodes/${payload.id}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ dimensions: updatedDimensions })
+        body: JSON.stringify({ dimensions: updatedDimensions }),
       });
 
       if (!response.ok) {
@@ -370,73 +344,71 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
       }
 
       if (selectedDimension?.dimension === dimension) {
-        fetchNodes(true);
+        await fetchNodes(dimension, true);
       }
-      fetchDimensions();
+
+      await fetchDimensions();
       onDataChanged?.();
     } catch (error) {
-      console.error('Error handling node drop:', error);
+      console.error('Error assigning node to dimension:', error);
       alert('Failed to add dimension to node. Please try again.');
     } finally {
       setDragHoverDimension(null);
     }
   };
 
-  const getContentPreview = (value?: string | null): string => {
-    if (!value) return '';
-    const trimmed = value.trim();
-    if (trimmed.length <= 160) return trimmed;
-    return `${trimmed.slice(0, 160)}…`;
-  };
-
-  const handleEditDescription = () => {
+  const startDescriptionEdit = () => {
     if (!selectedDimension) return;
     setEditingDescription(true);
     setEditDescriptionText(selectedDimension.description || '');
   };
 
-  const handleSaveDescription = async () => {
+  const cancelDescriptionEdit = () => {
+    setEditingDescription(false);
+    setEditDescriptionText('');
+  };
+
+  const saveDescription = async () => {
     if (!selectedDimension) return;
 
     try {
       const response = await fetch('/api/dimensions', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ 
-          name: selectedDimension.dimension, 
-          description: editDescriptionText.trim()
-        })
+        body: JSON.stringify({
+          name: selectedDimension.dimension,
+          description: editDescriptionText.trim(),
+        }),
       });
-
       const data = await response.json();
+
       if (!response.ok || !data.success) {
         throw new Error(data.error || 'Failed to update description');
       }
 
-      // Update the local selectedDimension with new description
-      setSelectedDimension(prev => prev ? { ...prev, description: editDescriptionText.trim() } : null);
-      
-      await fetchDimensions();
-      onDataChanged?.();
+      const nextDescription = editDescriptionText.trim();
+      setSelectedDimension((current) => (current ? { ...current, description: nextDescription } : null));
+      setDimensions((current) =>
+        current.map((dimension) =>
+          dimension.dimension === selectedDimension.dimension
+            ? { ...dimension, description: nextDescription }
+            : dimension,
+        ),
+      );
       setEditingDescription(false);
       setEditDescriptionText('');
+      onDataChanged?.();
     } catch (error) {
-      console.error('Error updating description:', error);
+      console.error('Error updating dimension description:', error);
       alert('Failed to update description. Please try again.');
     }
   };
 
-  const handleCancelDescription = () => {
-    setEditingDescription(false);
-    setEditDescriptionText('');
-  };
-
-  // Dimension edit modal handlers (from folder cards)
   const openDimensionEditModal = (dimension: DimensionSummary) => {
     setEditingDimensionModal(dimension);
     setEditModalName(dimension.dimension);
     setEditModalDescription(dimension.description || '');
-    setEditModalIcon(dimensionIcons[dimension.dimension] || 'Folder');
+    setEditModalIcon(dimensionIcons[dimension.dimension] || dimension.icon || 'Folder');
     setEditModalNameError('');
   };
 
@@ -445,8 +417,8 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
     setEditModalName('');
     setEditModalDescription('');
     setEditModalIcon('Folder');
-    setSavingDimensionEdit(false);
     setEditModalNameError('');
+    setSavingDimensionEdit(false);
   };
 
   const saveDimensionEdit = async () => {
@@ -458,112 +430,295 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
       return;
     }
 
-    const isRenamed = trimmedName !== editingDimensionModal.dimension;
-    if (isRenamed) {
-      const duplicate = dimensions.some(d => d.dimension.toLowerCase() === trimmedName.toLowerCase() && d.dimension !== editingDimensionModal.dimension);
-      if (duplicate) {
-        setEditModalNameError('A dimension with this name already exists');
-        return;
-      }
+    const duplicate = dimensions.some(
+      (dimension) =>
+        dimension.dimension.toLowerCase() === trimmedName.toLowerCase()
+        && dimension.dimension !== editingDimensionModal.dimension,
+    );
+
+    if (duplicate) {
+      setEditModalNameError('A dimension with this name already exists');
+      return;
     }
 
     setSavingDimensionEdit(true);
-    setEditModalNameError('');
-    try {
-      // Save description (and optionally rename) via API
-      const body: Record<string, string> = {
-        description: editModalDescription.trim()
-      };
-      if (isRenamed) {
-        body.currentName = editingDimensionModal.dimension;
-        body.newName = trimmedName;
-      } else {
-        body.name = editingDimensionModal.dimension;
-      }
 
+    try {
+      const isRenamed = trimmedName !== editingDimensionModal.dimension;
       const response = await fetch('/api/dimensions', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body)
+        body: JSON.stringify(
+          isRenamed
+            ? {
+                currentName: editingDimensionModal.dimension,
+                newName: trimmedName,
+                description: editModalDescription.trim(),
+                icon: editModalIcon,
+              }
+            : {
+                name: editingDimensionModal.dimension,
+                description: editModalDescription.trim(),
+                icon: editModalIcon,
+              },
+        ),
       });
-
       const data = await response.json();
+
       if (!response.ok || !data.success) {
         throw new Error(data.error || 'Failed to update dimension');
       }
 
-      // Save icon — use new name if renamed
-      const iconKey = isRenamed ? trimmedName : editingDimensionModal.dimension;
-      setDimensionIcons(prev => {
-        const next = { ...prev, [iconKey]: editModalIcon };
-        if (isRenamed) delete next[editingDimensionModal.dimension];
+      setDimensionIcons((current) => {
+        const next = { ...current, [trimmedName]: editModalIcon };
+        if (isRenamed) {
+          delete next[editingDimensionModal.dimension];
+        }
         return next;
       });
 
+      if (selectedDimension?.dimension === editingDimensionModal.dimension) {
+        const nextDimension = {
+          ...selectedDimension,
+          dimension: trimmedName,
+          description: editModalDescription.trim(),
+          icon: editModalIcon,
+        };
+        setSelectedDimension(nextDimension);
+        onDimensionSelect?.(trimmedName);
+      }
+
       await fetchDimensions();
       onDataChanged?.();
       closeDimensionEditModal();
     } catch (error) {
-      console.error('Error saving dimension:', error);
+      console.error('Error saving dimension edit:', error);
       alert('Failed to save dimension. Please try again.');
       setSavingDimensionEdit(false);
     }
   };
 
-  const handleEditDimensionName = () => {
-    if (!selectedDimension) return;
-    setEditingDimensionName(true);
-    setEditDimensionNameText(selectedDimension.dimension);
+  const renderDimensionCard = (dimension: DimensionSummary) => {
+    const isDragTarget = dragHoverDimension === dimension.dimension;
+    const isHovered = hoveredDimension === dimension.dimension;
+    const iconName = dimensionIcons[dimension.dimension] || dimension.icon || 'Folder';
+    const hasCustomIcon = iconName !== 'Folder';
+
+    return (
+      <button
+        key={dimension.dimension}
+        type="button"
+        onClick={() => handleSelectDimension(dimension)}
+        onMouseEnter={() => setHoveredDimension(dimension.dimension)}
+        onMouseLeave={() => setHoveredDimension(null)}
+        onDragOver={handleDimensionDragOver}
+        onDragEnter={(event) => handleDimensionDragEnter(event, dimension.dimension)}
+        onDragLeave={(event) => handleDimensionDragLeave(event, dimension.dimension)}
+        onDrop={(event) => handleNodeDropOnDimension(event, dimension.dimension)}
+        style={{
+          minHeight: '80px',
+          borderRadius: '14px',
+          border: `1px solid ${isDragTarget ? 'var(--rah-accent-green)' : isHovered ? 'var(--rah-border-strong)' : 'var(--rah-border)'}`,
+          background: isDragTarget
+            ? 'color-mix(in srgb, var(--rah-accent-green) 8%, var(--rah-bg-folder))'
+            : 'var(--rah-bg-folder)',
+          padding: '0',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          textAlign: 'left',
+          cursor: 'pointer',
+          transition: 'border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease',
+          opacity: isHovered ? 0.85 : 1,
+          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.35)',
+          position: 'relative',
+        }}
+      >
+        {/* Hover actions */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '8px',
+            right: '8px',
+            display: 'flex',
+            gap: '4px',
+            opacity: isHovered ? 1 : 0,
+            transition: 'opacity 0.15s ease',
+            zIndex: 1,
+          }}
+        >
+          <button
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              openDimensionEditModal(dimension);
+            }}
+            title="Edit dimension"
+            style={{
+              width: '26px',
+              height: '26px',
+              borderRadius: '7px',
+              border: '1px solid var(--rah-border)',
+              background: 'var(--rah-bg-panel)',
+              color: 'var(--rah-text-muted)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+            }}
+          >
+            <Edit2 size={12} />
+          </button>
+          <button
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              setDimensionPendingDelete(dimension.dimension);
+            }}
+            title="Delete dimension"
+            disabled={deletingDimension === dimension.dimension}
+            style={{
+              width: '26px',
+              height: '26px',
+              borderRadius: '7px',
+              border: '1px solid var(--rah-border)',
+              background: 'var(--rah-bg-panel)',
+              color: 'var(--rah-text-muted)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: deletingDimension === dimension.dimension ? 'not-allowed' : 'pointer',
+              opacity: deletingDimension === dimension.dimension ? 0.35 : 1,
+            }}
+          >
+            <Trash2 size={12} />
+          </button>
+        </div>
+
+        {/* Body — empty dark space */}
+        <div style={{ flex: 1 }} />
+
+        {/* Footer */}
+        <div
+          style={{
+            padding: '8px 10px 9px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2px',
+            minWidth: 0,
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '6px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', minWidth: 0 }}>
+              <DynamicIcon
+                name={iconName}
+                size={14}
+                style={{
+                  color: isDragTarget ? 'var(--rah-accent-green)' : 'var(--rah-text-base)',
+                  opacity: isDragTarget ? 1 : 0.65,
+                  flexShrink: 0,
+                }}
+              />
+              <span
+                style={{
+                  fontSize: '13px',
+                  fontWeight: 500,
+                  color: 'var(--rah-text-base)',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                {dimension.dimension}
+              </span>
+            </div>
+            <span
+              style={{
+                fontSize: '10px',
+                fontWeight: 600,
+                color: 'var(--rah-text-inverse)',
+                background: 'var(--rah-accent-green)',
+                padding: '1px 6px',
+                borderRadius: '999px',
+                flexShrink: 0,
+                lineHeight: 1.6,
+              }}
+            >
+              {dimension.count > 0 ? dimension.count : 'New'}
+            </span>
+          </div>
+          {dimension.description?.trim() && (
+            <span
+              style={{
+                fontSize: '11px',
+                color: 'var(--rah-text-muted)',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {dimension.description.trim()}
+            </span>
+          )}
+        </div>
+      </button>
+    );
   };
 
-  const handleSaveDimensionName = async () => {
-    if (!selectedDimension || !editDimensionNameText.trim()) return;
+  const renderNewDimensionCard = () => (
+    <button
+      key="new-dimension-card"
+      type="button"
+      onClick={() => setShowAddDimensionDialog(true)}
+      style={{
+        minHeight: '80px',
+        borderRadius: '14px',
+        border: '1px dashed var(--rah-border-strong)',
+        background: 'var(--rah-bg-folder)',
+        padding: '0',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        textAlign: 'left',
+        cursor: 'pointer',
+        transition: 'border-color 0.15s ease, opacity 0.15s ease',
+        opacity: 0.6,
+      }}
+      onMouseEnter={(event) => {
+        event.currentTarget.style.opacity = '1';
+        event.currentTarget.style.borderColor = 'var(--rah-border-stronger)';
+      }}
+      onMouseLeave={(event) => {
+        event.currentTarget.style.opacity = '0.6';
+        event.currentTarget.style.borderColor = 'var(--rah-border-strong)';
+      }}
+    >
+      <div style={{ flex: 1 }} />
 
-    const newName = editDimensionNameText.trim();
-    if (newName === selectedDimension.dimension) {
-      // No change, just cancel
-      handleCancelDimensionName();
-      return;
-    }
-
-    try {
-      const response = await fetch('/api/dimensions', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ 
-          currentName: selectedDimension.dimension,
-          newName: newName,
-          description: selectedDimension.description
-        })
-      });
-
-      const data = await response.json();
-      if (!response.ok || !data.success) {
-        throw new Error(data.error || 'Failed to update dimension name');
-      }
-
-      // Update the local selectedDimension with new name
-      setSelectedDimension(prev => prev ? { ...prev, dimension: newName } : null);
-      
-      await fetchDimensions();
-      onDataChanged?.();
-      setEditingDimensionName(false);
-      setEditDimensionNameText('');
-    } catch (error) {
-      console.error('Error updating dimension name:', error);
-      alert('Failed to update dimension name. Please try again.');
-    }
-  };
-
-  const handleCancelDimensionName = () => {
-    setEditingDimensionName(false);
-    setEditDimensionNameText('');
-  };
+      <div
+        style={{
+          padding: '8px 10px 9px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: '6px',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <FolderPlus size={14} style={{ color: 'var(--rah-text-muted)', opacity: 0.65, flexShrink: 0 }} />
+          <span style={{ fontSize: '13px', fontWeight: 500, color: 'var(--rah-text-muted)' }}>
+            New Dimension
+          </span>
+        </div>
+        <Plus size={13} style={{ color: 'var(--rah-text-muted)', flexShrink: 0 }} />
+      </div>
+    </button>
+  );
 
   const renderDimensionGrid = () => {
     if (dimensionsLoading) {
       return (
-        <div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
+        <div style={{ padding: '32px 24px', color: 'var(--rah-text-muted)' }}>
           Loading dimensions...
         </div>
       );
@@ -571,944 +726,286 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
 
     if (dimensionsError) {
       return (
-        <div style={{ padding: '40px', color: '#f87171', textAlign: 'center' }}>
+        <div style={{ padding: '32px 24px', color: '#ef4444' }}>
           {dimensionsError}
         </div>
       );
     }
 
-    if (sortedDimensions.length === 0) {
-      return (
-        <div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
-          No dimensions yet. Create one to get started.
-        </div>
-      );
-    }
-
     return (
       <div
         style={{
           flex: 1,
           overflowY: 'auto',
-          padding: '24px',
+          padding: '20px 24px 24px',
           display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
-          gap: '8px',
-          alignContent: 'start'
+          gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+          gap: '16px',
+          alignContent: 'start',
         }}
       >
-        {sortedDimensions.map((dimension) => {
-          const isDragTarget = dragHoverDimension === dimension.dimension;
-
-          return (
-            <div
-              key={dimension.dimension}
-              role="button"
-              tabIndex={0}
-              onClick={() => handleSelectDimension(dimension)}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                  event.preventDefault();
-                  handleSelectDimension(dimension);
-                }
-              }}
-              onDragOver={(event) => handleDimensionDragOver(event)}
-              onDragEnter={(event) => handleDimensionDragEnter(event, dimension.dimension)}
-              onDragLeave={(event) => handleDimensionDragLeave(event, dimension.dimension)}
-              onDrop={(event) => handleNodeDropOnDimension(event, dimension.dimension)}
-              style={{
-                background: isDragTarget ? 'rgba(34, 197, 94, 0.05)' : 'transparent',
-                borderLeft: '2px solid transparent',
-                borderRadius: '6px',
-                padding: '12px 14px',
-                textAlign: 'left',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '12px',
-                cursor: 'pointer',
-                transition: 'all 0.12s ease',
-                position: 'relative'
-              }}
-              onMouseEnter={(e) => {
-                if (!isDragTarget) {
-                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.02)';
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!isDragTarget) {
-                  e.currentTarget.style.background = 'transparent';
-                }
-              }}
-            >
-              {/* Dimension icon */}
-              <div style={{
-                width: '28px',
-                height: '28px',
-                borderRadius: '6px',
-                background: 'rgba(255, 255, 255, 0.03)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexShrink: 0
-              }}>
-                <DynamicIcon
-                  name={dimensionIcons[dimension.dimension] || 'Folder'}
-                  size={14}
-                  style={{ color: '#555' }}
-                />
-              </div>
-
-              {/* Name and description */}
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{
-                  fontSize: '13px',
-                  fontWeight: 500,
-                  color: '#999',
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  letterSpacing: '-0.01em'
-                }}>
-                  {dimension.dimension}
-                </div>
-                {dimension.description && (
-                  <div style={{
-                    fontSize: '11px',
-                    color: 'var(var(--rah-text-muted))',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    marginTop: '1px'
-                  }}>
-                    {dimension.description}
-                  </div>
-                )}
-              </div>
-
-              {/* Count - minimal */}
-              <span style={{
-                fontSize: '11px',
-                fontWeight: 500,
-                color: '#444',
-                fontFamily: 'monospace',
-                flexShrink: 0
-              }}>
-                {dimension.count}
-              </span>
-
-              {/* Action buttons - subtle */}
-              <div style={{ display: 'flex', gap: '2px', flexShrink: 0, opacity: 0.4 }}
-                onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
-                onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.4'; }}
-              >
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    openDimensionEditModal(dimension);
-                  }}
-                  title="Edit"
-                  style={{
-                    background: 'transparent',
-                    border: 'none',
-                    borderRadius: '4px',
-                    width: '22px',
-                    height: '22px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    cursor: 'pointer',
-                    color: 'var(var(--rah-text-muted))',
-                    transition: 'color 0.1s ease'
-                  }}
-                  onMouseEnter={(e) => { e.currentTarget.style.color = '#999'; }}
-                  onMouseLeave={(e) => { e.currentTarget.style.color = '#666'; }}
-                >
-                  <Edit2 size={12} />
-                </button>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setDimensionPendingDelete(dimension.dimension);
-                  }}
-                  title="Delete"
-                  style={{
-                    background: 'transparent',
-                    border: 'none',
-                    borderRadius: '4px',
-                    width: '22px',
-                    height: '22px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    cursor: deletingDimension === dimension.dimension ? 'not-allowed' : 'pointer',
-                    color: 'var(var(--rah-text-muted))',
-                    opacity: deletingDimension === dimension.dimension ? 0.3 : 1,
-                    transition: 'color 0.1s ease'
-                  }}
-                  onMouseEnter={(e) => { e.currentTarget.style.color = '#ef4444'; }}
-                  onMouseLeave={(e) => { e.currentTarget.style.color = '#666'; }}
-                  disabled={deletingDimension === dimension.dimension}
-                >
-                  <Trash2 size={12} />
-                </button>
-              </div>
-            </div>
-          );
-        })}
+        {renderNewDimensionCard()}
+        {sortedDimensions.map(renderDimensionCard)}
       </div>
     );
   };
 
-  // Kanban helper functions
-  const getNodesForKanbanColumn = (dimension: string) => {
-    return nodes.filter(node => node.dimensions?.includes(dimension));
-  };
-
-  const handleAddKanbanColumn = (dimension: string) => {
-    const newColumn = {
-      dimension,
-      order: kanbanColumns.length
-    };
-    setKanbanColumns([...kanbanColumns, newColumn]);
-    setShowKanbanColumnPicker(false);
-    setKanbanSearchQuery('');
-  };
-
-  const handleRemoveKanbanColumn = (dimension: string) => {
-    setKanbanColumns(kanbanColumns.filter(c => c.dimension !== dimension));
-  };
-
-  const handleKanbanNodeDragStart = (e: DragEvent<HTMLDivElement>, nodeId: number, fromColumn: string) => {
-    setDraggedNodeId(nodeId);
-    setDraggedFromColumn(fromColumn);
-    e.dataTransfer.effectAllowed = 'copyMove';
-    // Find the node to get its title for chat drops
-    const node = nodes.find(n => n.id === nodeId);
-    const title = node?.title || 'Untitled';
-    // Set MIME types for chat input and folder drops
-    e.dataTransfer.setData('application/x-rah-node', JSON.stringify({ id: nodeId, title }));
-    e.dataTransfer.setData('application/node-info', JSON.stringify({ id: nodeId, title, dimensions: node?.dimensions || [] }));
-    e.dataTransfer.setData('text/plain', `[NODE:${nodeId}:"${title}"]`);
-    // Store in ref for webview compatibility
-    draggedNodeRef.current = { id: nodeId, title, dimensions: node?.dimensions || [] };
-  };
-
-  const handleKanbanNodeDragEnd = () => {
-    setDraggedNodeId(null);
-    setDraggedFromColumn(null);
-    setDragOverColumn(null);
-    draggedNodeRef.current = null;
-  };
-
-  const handleKanbanColumnDragOver = (e: DragEvent<HTMLDivElement>, columnDimension: string) => {
-    e.preventDefault();
-    if (draggedNodeId !== null) {
-      setDragOverColumn(columnDimension);
-    }
-  };
-
-  const handleKanbanColumnDragLeave = () => {
-    setDragOverColumn(null);
-  };
-
-  const handleKanbanNodeDrop = async (e: DragEvent<HTMLDivElement>, targetDimension: string) => {
-    e.preventDefault();
-    if (draggedNodeId === null || draggedFromColumn === targetDimension) {
-      handleKanbanNodeDragEnd();
-      return;
-    }
-
-    try {
-      const node = nodes.find(n => n.id === draggedNodeId);
-      if (!node) return;
-
-      const currentDimensions = node.dimensions || [];
-      let updatedDimensions: string[];
-
-      if (draggedFromColumn === '__uncategorized__') {
-        // Adding to a new dimension
-        updatedDimensions = [...currentDimensions, targetDimension];
-      } else {
-        // Replace old dimension with new one
-        updatedDimensions = currentDimensions.map(d =>
-          d === draggedFromColumn ? targetDimension : d
-        );
-      }
-
-      const response = await fetch(`/api/nodes/${draggedNodeId}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ dimensions: updatedDimensions })
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to update node dimensions');
-      }
-
-      fetchNodes(true);
-      onDataChanged?.();
-    } catch (error) {
-      console.error('Error updating node dimension:', error);
-      alert('Failed to move node. Please try again.');
-    } finally {
-      handleKanbanNodeDragEnd();
-    }
-  };
-
-  const filteredKanbanDimensions = dimensions.filter(d =>
-    d.dimension.toLowerCase().includes(kanbanSearchQuery.toLowerCase()) &&
-    !kanbanColumns.some(c => c.dimension === d.dimension) &&
-    d.dimension !== selectedDimension?.dimension
-  );
-
-  const sortedKanbanColumns = [...kanbanColumns].sort((a, b) => a.order - b.order);
-
-  // Render functions for each view mode
-  const renderGridContent = () => (
-    <div
-      style={{
-        flex: 1,
-        overflowY: 'auto',
-        padding: '0 24px 24px',
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
-        gap: '16px',
-        alignContent: 'start'
-      }}
-    >
-      {nodes.map((node) => (
-        <div
-          key={node.id}
-          draggable
-          onDragStart={(event) => handleNodeTileDragStart(event, node)}
-          onDragEnd={handleNodeTileDragEnd}
-          onClick={() => {
-            onNodeOpen(node.id);
-            onClose();
-          }}
-          style={{
-            background: 'var(var(--rah-bg-base))',
-            border: '1px solid #161616',
-            borderRadius: '12px',
-            padding: '14px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '6px',
-            cursor: 'pointer',
-            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-            position: 'relative',
-            minHeight: '120px',
-            boxShadow: '0 1px 4px rgba(0, 0, 0, 0.2)'
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = '#111111';
-            e.currentTarget.style.transform = 'translateY(-2px)';
-            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)';
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = '#0a0a0a';
-            e.currentTarget.style.transform = 'translateY(0px)';
-            e.currentTarget.style.boxShadow = '0 1px 4px rgba(0, 0, 0, 0.2)';
-          }}
-        >
-          {/* Header: ID | Title | Icon */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <span style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: '#22c55e',
-              color: '#0a0a0a',
-              fontSize: '9px',
-              fontWeight: 600,
-              padding: '1px 5px',
-              borderRadius: '3px',
-              flexShrink: 0,
-              fontFamily: 'monospace',
-              lineHeight: 1,
-              height: '16px'
-            }}>
-              #{node.id}
-            </span>
-            <div style={{
-              fontSize: '14px',
-              fontWeight: 600,
-              color: '#f8fafc',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              lineHeight: '1.2',
-              flex: 1
-            }}>
-              {node.title || 'Untitled'}
-            </div>
-            {node.link && (
-              <span style={{ flexShrink: 0 }}>
-                {getNodeIcon(node, dimensionIcons)}
-              </span>
-            )}
-          </div>
-          {node.notes && (
-            <div style={{
-              fontSize: '12px',
-              color: '#94a3b8',
-              lineHeight: '1.4',
-              overflow: 'hidden',
-              display: '-webkit-box',
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: 'vertical',
-              fontWeight: 400
-            }}>
-              {getContentPreview(node.notes)}
-            </div>
-          )}
-          {node.dimensions && node.dimensions.length > 0 && (
-            <div style={{ display: 'flex', gap: '6px', overflow: 'hidden', flexWrap: 'nowrap' }}>
-              {node.dimensions.slice(0, 3).map((dimension, index) => {
-                const isCurrentDimension = dimension === selectedDimension?.dimension;
-                return (
-                  <span
-                    key={`${dimension}-${index}`}
-                    style={{
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                      padding: '3px 8px',
-                      fontSize: '10px',
-                      fontWeight: 500,
-                      color: isCurrentDimension ? '#7de8a5' : '#cbd5e1',
-                      background: isCurrentDimension ? 'rgba(125, 232, 165, 0.15)' : 'rgba(148, 163, 184, 0.1)',
-                      border: isCurrentDimension ? '1px solid rgba(125, 232, 165, 0.3)' : '1px solid rgba(148, 163, 184, 0.2)',
-                      borderRadius: '8px',
-                      whiteSpace: 'nowrap',
-                      textTransform: 'uppercase',
-                      letterSpacing: '0.025em',
-                      flexShrink: 0,
-                      maxWidth: '100px',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis'
-                    }}
-                  >
-                    {dimension}
-                  </span>
-                );
-              })}
-              {node.dimensions.length > 3 && (
-                <span style={{
-                  fontSize: '10px',
-                  color: '#64748b',
-                  fontWeight: 500,
-                  padding: '3px 6px',
-                  background: 'rgba(100, 116, 139, 0.1)',
-                  borderRadius: '6px',
-                  flexShrink: 0
-                }}>
-                  +{node.dimensions.length - 3}
-                </span>
-              )}
-            </div>
-          )}
-        </div>
-      ))}
-      {nodesLoading && (
-        <div style={{ padding: '20px', color: 'var(var(--rah-text-muted))' }}>Loading...</div>
-      )}
-      {!nodesLoading && nodes.length === 0 && (
-        <div style={{ gridColumn: '1 / -1', textAlign: 'center', color: 'var(var(--rah-text-muted))', paddingTop: '40px' }}>
-          No nodes in this dimension yet.
-        </div>
-      )}
-    </div>
-  );
-
-  const renderListContent = () => (
-    <div
-      style={{
-        flex: 1,
-        overflowY: 'auto',
-        padding: '0 24px 24px'
-      }}
-    >
-      {nodes.map((node) => (
-        <button
-          key={node.id}
-          onClick={() => {
-            onNodeOpen(node.id);
-            onClose();
-          }}
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'flex-start',
-            gap: '12px',
-            padding: '12px 16px',
-            marginBottom: '4px',
-            background: 'var(var(--rah-bg-base))',
-            border: '1px solid #161616',
-            borderRadius: '10px',
-            cursor: 'pointer',
-            textAlign: 'left',
-            transition: 'all 0.2s'
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = '#111';
-            e.currentTarget.style.borderColor = '#222';
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = '#0a0a0a';
-            e.currentTarget.style.borderColor = '#161616';
-          }}
-        >
-          <div style={{
-            width: '32px',
-            height: '32px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: 'var(var(--rah-bg-active))',
-            borderRadius: '8px',
-            flexShrink: 0
-          }}>
-            {getNodeIcon(node, dimensionIcons)}
-          </div>
-
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{
-              fontSize: '13px',
-              fontWeight: 500,
-              color: '#f8fafc',
-              marginBottom: '4px',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap'
-            }}>
-              {node.title || 'Untitled'}
-            </div>
-
-            {node.notes && (
-              <div style={{
-                fontSize: '12px',
-                color: '#94a3b8',
-                marginBottom: '8px',
-                lineHeight: '1.4',
-                display: '-webkit-box',
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden'
-              }}>
-                {getContentPreview(node.notes)}
-              </div>
-            )}
-
-            <div style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '12px',
-              flexWrap: 'wrap'
-            }}>
-              {node.dimensions && node.dimensions.length > 0 && (
-                <div style={{
-                  display: 'flex',
-                  gap: '4px',
-                  flexWrap: 'wrap'
-                }}>
-                  {node.dimensions.slice(0, 3).map(dim => {
-                    const isCurrentDimension = dim === selectedDimension?.dimension;
-                    return (
-                      <span
-                        key={dim}
-                        style={{
-                          padding: '2px 6px',
-                          background: isCurrentDimension ? 'rgba(125, 232, 165, 0.15)' : '#1a1a1a',
-                          borderRadius: '4px',
-                          fontSize: '10px',
-                          color: isCurrentDimension ? '#7de8a5' : '#888',
-                          textTransform: 'uppercase'
-                        }}
-                      >
-                        {dim}
-                      </span>
-                    );
-                  })}
-                  {node.dimensions.length > 3 && (
-                    <span style={{
-                      padding: '2px 6px',
-                      fontSize: '10px',
-                      color: 'var(var(--rah-text-muted))'
-                    }}>
-                      +{node.dimensions.length - 3}
-                    </span>
-                  )}
-                </div>
-              )}
-
-              <span style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                background: '#22c55e',
-                color: '#0a0a0a',
-                fontSize: '9px',
-                fontWeight: 600,
-                padding: '1px 5px',
-                borderRadius: '3px',
-                flexShrink: 0,
-                fontFamily: 'monospace',
-                lineHeight: 1,
-                height: '16px'
-              }}>
-                #{node.id}
-              </span>
-            </div>
-          </div>
-        </button>
-      ))}
-      {nodesLoading && (
-        <div style={{ padding: '20px', color: 'var(var(--rah-text-muted))' }}>Loading...</div>
-      )}
-      {!nodesLoading && nodes.length === 0 && (
-        <div style={{ textAlign: 'center', color: 'var(var(--rah-text-muted))', paddingTop: '40px' }}>
-          No nodes in this dimension yet.
-        </div>
-      )}
-    </div>
-  );
-
-  const renderKanbanContent = () => (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-      {/* Kanban Column Setup Bar */}
-      <div style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        padding: '8px 24px',
-        borderBottom: '1px solid var(--rah-border)',
-        background: 'var(var(--rah-bg-base))',
-        flexShrink: 0
-      }}>
-        <span style={{ fontSize: '11px', color: '#64748b', fontWeight: 500 }}>
-          Group by:
-        </span>
-
-        {kanbanColumns.length === 0 && (
-          <span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))', fontStyle: 'italic' }}>
-            Add dimensions to create columns
-          </span>
-        )}
-
-        <div style={{ position: 'relative' }}>
-          <button
-            onClick={() => setShowKanbanColumnPicker(!showKanbanColumnPicker)}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '4px',
-              padding: '4px 8px',
-              background: 'var(var(--rah-bg-active))',
-              border: '1px solid #333',
-              borderRadius: '6px',
-              fontSize: '11px',
-              color: 'var(var(--rah-text-muted))',
-              cursor: 'pointer'
-            }}
-          >
-            <Plus size={12} />
-            Add Column
-          </button>
-
-          {showKanbanColumnPicker && (
-            <div style={{
-              position: 'absolute',
-              top: '100%',
-              left: 0,
-              marginTop: '4px',
-              width: '200px',
-              maxHeight: '300px',
-              background: 'var(var(--rah-bg-active))',
-              border: '1px solid #333',
-              borderRadius: '8px',
-              overflow: 'hidden',
-              zIndex: 100,
-              boxShadow: '0 4px 12px rgba(0,0,0,0.5)'
-            }}>
-              <input
-                type="text"
-                placeholder="Search dimensions..."
-                value={kanbanSearchQuery}
-                onChange={(e) => setKanbanSearchQuery(e.target.value)}
-                style={{
-                  width: '100%',
-                  padding: '8px 12px',
-                  background: 'var(var(--rah-bg-base))',
-                  border: 'none',
-                  borderBottom: '1px solid #333',
-                  color: 'var(var(--rah-text-active))',
-                  fontSize: '12px',
-                  outline: 'none'
-                }}
-                autoFocus
-              />
-              <div style={{ maxHeight: '250px', overflowY: 'auto' }}>
-                {filteredKanbanDimensions.length === 0 ? (
-                  <div style={{
-                    padding: '12px',
-                    fontSize: '12px',
-                    color: 'var(var(--rah-text-muted))',
-                    textAlign: 'center'
-                  }}>
-                    No dimensions available
-                  </div>
-                ) : (
-                  filteredKanbanDimensions.map(dim => (
-                    <button
-                      key={dim.dimension}
-                      onClick={() => handleAddKanbanColumn(dim.dimension)}
-                      style={{
-                        width: '100%',
-                        padding: '8px 12px',
-                        background: 'transparent',
-                        border: 'none',
-                        color: 'var(var(--rah-text-secondary))',
-                        fontSize: '12px',
-                        textAlign: 'left',
-                        cursor: 'pointer'
-                      }}
-                      onMouseEnter={(e) => { e.currentTarget.style.background = '#2a2a2a'; }}
-                      onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
-                    >
-                      {dim.dimension}
-                    </button>
-                  ))
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-
-        {showKanbanColumnPicker && (
-          <div
-            style={{ position: 'fixed', inset: 0, zIndex: 99 }}
-            onClick={() => setShowKanbanColumnPicker(false)}
-          />
-        )}
-      </div>
-
-      {/* Kanban Board */}
-      <div style={{
-        flex: 1,
-        display: 'flex',
-        gap: '16px',
-        padding: '16px 24px',
-        overflowX: 'auto',
-        overflowY: 'hidden'
-      }}>
-        {sortedKanbanColumns.map(column => {
-          const columnNodes = getNodesForKanbanColumn(column.dimension);
-          const isDropTarget = dragOverColumn === column.dimension && draggedFromColumn !== column.dimension;
-
-          return (
-            <div
-              key={column.dimension}
-              style={{
-                width: '280px',
-                minWidth: '280px',
-                display: 'flex',
-                flexDirection: 'column',
-                background: isDropTarget ? '#0f2417' : '#0a0a0a',
-                border: '1px solid var(--rah-border)',
-                borderRadius: '12px',
-                transition: 'all 0.2s'
-              }}
-              onDragOver={(e) => handleKanbanColumnDragOver(e, column.dimension)}
-              onDragLeave={handleKanbanColumnDragLeave}
-              onDrop={(e) => handleKanbanNodeDrop(e, column.dimension)}
-            >
-              {/* Column Header */}
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                padding: '12px',
-                borderBottom: '1px solid var(--rah-border)'
-              }}>
-                <div style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px'
-                }}>
-                  <span style={{
-                    fontSize: '12px',
-                    fontWeight: 600,
-                    color: '#f8fafc',
-                    textTransform: 'uppercase',
-                    letterSpacing: '0.05em'
-                  }}>
-                    {column.dimension}
-                  </span>
-                  <span style={{
-                    fontSize: '11px',
-                    color: 'var(var(--rah-text-muted))',
-                    background: 'var(var(--rah-bg-active))',
-                    padding: '2px 6px',
-                    borderRadius: '10px'
-                  }}>
-                    {columnNodes.length}
-                  </span>
-                </div>
-                <button
-                  onClick={() => handleRemoveKanbanColumn(column.dimension)}
-                  style={{
-                    background: 'none',
-                    border: 'none',
-                    padding: '4px',
-                    cursor: 'pointer',
-                    color: 'var(var(--rah-text-muted))',
-                    display: 'flex',
-                    alignItems: 'center'
-                  }}
-                >
-                  <X size={14} />
-                </button>
-              </div>
-
-              {/* Column Content */}
-              <div style={{
-                flex: 1,
-                overflowY: 'auto',
-                padding: '8px'
-              }}>
-                {columnNodes.map(node => (
-                  <div
-                    key={node.id}
-                    draggable
-                    onDragStart={(e) => handleKanbanNodeDragStart(e, node.id, column.dimension)}
-                    onDragEnd={handleKanbanNodeDragEnd}
-                    onClick={() => {
-                      onNodeOpen(node.id);
-                      onClose();
-                    }}
-                    style={{
-                      padding: '10px',
-                      marginBottom: '6px',
-                      background: draggedNodeId === node.id ? '#1a1a1a' : '#111',
-                      border: '1px solid var(--rah-border-strong)',
-                      borderRadius: '8px',
-                      cursor: 'pointer',
-                      opacity: draggedNodeId === node.id ? 0.5 : 1,
-                      transition: 'all 0.2s'
-                    }}
-                    onMouseEnter={(e) => {
-                      if (draggedNodeId !== node.id) {
-                        e.currentTarget.style.background = '#1a1a1a';
-                        e.currentTarget.style.borderColor = '#333';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (draggedNodeId !== node.id) {
-                        e.currentTarget.style.background = '#111';
-                        e.currentTarget.style.borderColor = '#222';
-                      }
-                    }}
-                  >
-                    <div style={{
-                      fontSize: '12px',
-                      fontWeight: 500,
-                      color: '#f8fafc',
-                      marginBottom: '4px',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap'
-                    }}>
-                      {node.title || 'Untitled'}
-                    </div>
-                    {node.dimensions && node.dimensions.length > 1 && (
-                      <div style={{
-                        display: 'flex',
-                        gap: '4px',
-                        flexWrap: 'wrap',
-                        marginTop: '6px'
-                      }}>
-                        {node.dimensions
-                          .filter(d => d !== column.dimension && d !== selectedDimension?.dimension)
-                          .slice(0, 2)
-                          .map(dim => (
-                            <span
-                              key={dim}
-                              style={{
-                                padding: '2px 6px',
-                                background: 'var(var(--rah-bg-active))',
-                                borderRadius: '4px',
-                                fontSize: '10px',
-                                color: 'var(var(--rah-text-muted))'
-                              }}
-                            >
-                              {dim}
-                            </span>
-                          ))}
-                      </div>
-                    )}
-                  </div>
-                ))}
-
-                {columnNodes.length === 0 && (
-                  <div style={{
-                    padding: '20px',
-                    textAlign: 'center',
-                    color: '#444',
-                    fontSize: '11px'
-                  }}>
-                    Drop nodes here
-                  </div>
-                )}
-              </div>
-            </div>
-          );
-        })}
-
-        {/* Empty State */}
-        {kanbanColumns.length === 0 && (
-          <div style={{
-            flex: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: 'var(var(--rah-text-muted))',
-            fontSize: '13px'
-          }}>
-            Add dimension columns to organize your nodes
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
   const renderNodeGrid = () => {
     if (!selectedDimension) return null;
 
     return (
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-        <div style={{ padding: '0 24px 12px', color: '#94a3b8', fontSize: '12px', fontWeight: 500 }}>
-          Showing <strong style={{ color: '#f8fafc' }}>{nodes.length}</strong> nodes tagged with <strong style={{ color: '#7de8a5' }}>{selectedDimension.dimension.toUpperCase()}</strong>
+      <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+        <div
+          style={{
+            padding: '20px 24px 12px',
+            borderBottom: '1px solid var(--rah-border)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+          }}
+        >
+          <button
+            type="button"
+            onClick={handleBackToDimensions}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '8px',
+              alignSelf: 'flex-start',
+              padding: '0',
+              background: 'transparent',
+              border: 'none',
+              color: 'var(--rah-text-muted)',
+              cursor: 'pointer',
+              fontSize: '13px',
+              fontWeight: 500,
+            }}
+          >
+            <ArrowLeft size={14} />
+            {selectedDimension.dimension}
+          </button>
+
+          {editingDescription ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxWidth: '720px' }}>
+              <textarea
+                value={editDescriptionText}
+                onChange={(event) => setEditDescriptionText(event.target.value)}
+                placeholder="Add a short description for this dimension..."
+                maxLength={500}
+                style={{
+                  width: '100%',
+                  minHeight: '80px',
+                  padding: '12px',
+                  background: 'var(--rah-bg-subtle)',
+                  border: '1px solid var(--rah-border)',
+                  borderRadius: '10px',
+                  color: 'var(--rah-text-primary)',
+                  fontSize: '13px',
+                  resize: 'vertical',
+                  outline: 'none',
+                }}
+              />
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <button
+                  type="button"
+                  onClick={saveDescription}
+                  style={{
+                    padding: '8px 12px',
+                    borderRadius: '8px',
+                    border: '1px solid var(--rah-border-strong)',
+                    background: 'var(--rah-bg-card)',
+                    color: 'var(--rah-text-primary)',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                  }}
+                >
+                  Save description
+                </button>
+                <button
+                  type="button"
+                  onClick={cancelDescriptionEdit}
+                  style={{
+                    padding: '8px 12px',
+                    borderRadius: '8px',
+                    border: '1px solid var(--rah-border)',
+                    background: 'transparent',
+                    color: 'var(--rah-text-muted)',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                  }}
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={startDescriptionEdit}
+              style={{
+                padding: '0',
+                border: 'none',
+                background: 'transparent',
+                color: selectedDimension.description ? 'var(--rah-text-muted)' : 'var(--rah-text-secondary)',
+                cursor: 'pointer',
+                fontSize: '13px',
+                textAlign: 'left',
+                lineHeight: 1.5,
+                maxWidth: '720px',
+              }}
+            >
+              {selectedDimension.description?.trim() || '+ Add description'}
+            </button>
+          )}
         </div>
 
-        {renderGridContent()}
-
-        {nodesError && (
-          <div style={{ padding: '12px 16px', color: '#f87171', fontSize: '12px' }}>
-            {nodesError}
-          </div>
-        )}
-        {hasMoreNodes && (
-          <div style={{ padding: '16px', textAlign: 'center' }}>
+        <div
+          style={{
+            flex: 1,
+            minHeight: 0,
+            overflowY: 'auto',
+            padding: '20px 24px 24px',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(190px, 1fr))',
+            gap: '16px',
+            alignContent: 'start',
+          }}
+        >
+          {nodes.map((node) => (
             <button
-              onClick={() => fetchNodes(false)}
+              key={node.id}
+              type="button"
+              draggable
+              onDragStart={(event) => handleNodeTileDragStart(event, node)}
+              onDragEnd={handleNodeTileDragEnd}
+              onClick={() => {
+                onNodeOpen(node.id);
+                onClose();
+              }}
+              style={{
+                minHeight: '180px',
+                borderRadius: '16px',
+                border: '1px solid var(--rah-border)',
+                background: 'var(--rah-bg-card)',
+                padding: '16px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                justifyContent: 'space-between',
+                gap: '14px',
+                textAlign: 'left',
+                cursor: 'pointer',
+                transition: 'transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease',
+                boxShadow: '0 8px 24px rgba(0, 0, 0, 0.08)',
+              }}
+              onMouseEnter={(event) => {
+                event.currentTarget.style.transform = 'translateY(-2px)';
+                event.currentTarget.style.background = 'var(--rah-bg-hover)';
+                event.currentTarget.style.borderColor = 'var(--rah-border-strong)';
+              }}
+              onMouseLeave={(event) => {
+                event.currentTarget.style.transform = 'translateY(0)';
+                event.currentTarget.style.background = 'var(--rah-bg-card)';
+                event.currentTarget.style.borderColor = 'var(--rah-border)';
+              }}
+            >
+              <div
+                style={{
+                  width: '44px',
+                  height: '44px',
+                  borderRadius: '12px',
+                  background: 'var(--rah-bg-subtle)',
+                  border: '1px solid var(--rah-border)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                }}
+              >
+                {getNodeIcon(node, dimensionIcons, 20)}
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' }}>
+                <div
+                  style={{
+                    fontSize: '14px',
+                    fontWeight: 600,
+                    color: 'var(--rah-text-primary)',
+                    lineHeight: 1.4,
+                    minHeight: '40px',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {node.title || 'Untitled'}
+                </div>
+
+                <div style={{ fontSize: '12px', color: 'var(--rah-text-muted)' }}>
+                  {formatRelativeTime(node.updated_at || node.created_at)}
+                </div>
+              </div>
+            </button>
+          ))}
+
+          {!nodesLoading && nodes.length === 0 && (
+            <div
+              style={{
+                gridColumn: '1 / -1',
+                minHeight: '220px',
+                borderRadius: '16px',
+                border: '1px dashed var(--rah-border-strong)',
+                background: 'var(--rah-bg-subtle)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '24px',
+                textAlign: 'center',
+                color: 'var(--rah-text-muted)',
+                fontSize: '14px',
+              }}
+            >
+              No nodes in this dimension yet.
+            </div>
+          )}
+
+          {nodesError && (
+            <div style={{ gridColumn: '1 / -1', color: '#ef4444', fontSize: '13px' }}>
+              {nodesError}
+            </div>
+          )}
+
+          {nodesLoading && (
+            <div style={{ gridColumn: '1 / -1', color: 'var(--rah-text-muted)', fontSize: '13px' }}>
+              Loading nodes...
+            </div>
+          )}
+        </div>
+
+        {hasMoreNodes && (
+          <div
+            style={{
+              padding: '0 24px 24px',
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
+            <button
+              type="button"
+              onClick={() => void fetchNodes(selectedDimension.dimension, false)}
               disabled={nodesLoading}
               style={{
-                padding: '10px 18px',
+                padding: '10px 16px',
                 borderRadius: '999px',
-                border: '1px solid var(--rah-bg-active)',
-                background: 'var(var(--rah-bg-surface))',
-                color: '#f1f5f9',
-                cursor: nodesLoading ? 'not-allowed' : 'pointer'
+                border: '1px solid var(--rah-border-strong)',
+                background: 'var(--rah-bg-card)',
+                color: 'var(--rah-text-primary)',
+                cursor: nodesLoading ? 'not-allowed' : 'pointer',
+                fontSize: '13px',
+                fontWeight: 600,
               }}
             >
               {nodesLoading ? 'Loading...' : 'Load more'}
@@ -1520,89 +1017,69 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
   };
 
   const toolbar = (
-    <div style={{
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: '8px',
-      minWidth: 0
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
-        {view === 'nodes' && (
-          <button
-            onClick={handleBackToDimensions}
-            style={{
-              padding: '6px',
-              borderRadius: '6px',
-              border: '1px solid var(--rah-bg-active)',
-              background: 'transparent',
-              cursor: 'pointer',
-              color: '#cbd5f5'
-            }}
-          >
-            <ArrowLeft size={16} />
-          </button>
-        )}
-        {view === 'nodes' && (
-          <div style={{
-            fontSize: '12px',
-            color: '#7de8a5',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-          }}>
-            {selectedDimension?.dimension ?? ''}
-          </div>
-        )}
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '12px',
+        minWidth: 0,
+      }}
+    >
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--rah-text-primary)' }}>
+          {view === 'dimensions' ? 'Dimensions' : selectedDimension?.dimension}
+        </div>
+        <div style={{ fontSize: '12px', color: 'var(--rah-text-muted)', marginTop: '2px' }}>
+          {view === 'dimensions'
+            ? `${sortedDimensions.length} ${sortedDimensions.length === 1 ? 'dimension' : 'dimensions'}`
+            : `${nodes.length} loaded`}
+        </div>
       </div>
 
-      <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
         {view === 'dimensions' && (
           <button
+            type="button"
             onClick={() => setShowAddDimensionDialog(true)}
             title="Add dimension"
             style={{
+              width: '32px',
+              height: '32px',
+              borderRadius: '9px',
+              border: '1px solid var(--rah-border)',
+              background: 'var(--rah-bg-subtle)',
+              color: 'var(--rah-text-muted)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              width: '28px',
-              height: '28px',
-              color: 'var(var(--rah-text-muted))',
-              background: 'transparent',
-              border: '1px solid var(--rah-bg-active)',
-              borderRadius: '6px',
               cursor: 'pointer',
-              transition: 'all 0.15s'
             }}
-            onMouseEnter={(e) => { e.currentTarget.style.color = '#22c55e'; e.currentTarget.style.borderColor = '#22c55e'; }}
-            onMouseLeave={(e) => { e.currentTarget.style.color = '#555'; e.currentTarget.style.borderColor = '#1f1f1f'; }}
           >
-            <Plus size={14} />
+            <Plus size={16} />
           </button>
         )}
 
         {!toolbarHost && (
           <button
+            type="button"
             onClick={onClose}
             title="Close"
             style={{
+              width: '32px',
+              height: '32px',
+              borderRadius: '9px',
+              border: '1px solid var(--rah-border)',
+              background: 'var(--rah-bg-subtle)',
+              color: 'var(--rah-text-muted)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              width: '28px',
-              height: '28px',
-              borderRadius: '6px',
-              border: '1px solid var(--rah-bg-active)',
-              background: 'transparent',
               cursor: 'pointer',
-              color: 'var(var(--rah-text-muted))',
-              transition: 'all 0.15s'
             }}
-            onMouseEnter={(e) => { e.currentTarget.style.color = '#888'; e.currentTarget.style.background = '#1a1a1a'; }}
-            onMouseLeave={(e) => { e.currentTarget.style.color = '#555'; e.currentTarget.style.background = 'transparent'; }}
           >
-            <X size={14} />
+            <X size={16} />
           </button>
         )}
       </div>
@@ -1611,257 +1088,290 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
 
   return (
     <>
-    <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: 'transparent',
-        display: 'flex',
-        flexDirection: 'column',
-        zIndex: 5
-      }}
-    >
-      {toolbarHost ? createPortal(toolbar, toolbarHost) : (
-        <div style={{ borderBottom: '1px solid var(--rah-border)', padding: '12px 16px' }}>
-          {toolbar}
-        </div>
-      )}
-
-      {/* Content */}
-      {view === 'nodes' ? renderNodeGrid() : renderDimensionGrid()}
-    </div>
-    <ConfirmDialog
-      open={dimensionPendingDelete !== null}
-      title="Delete this dimension?"
-      message={`This will remove "${dimensionPendingDelete ?? ''}" from every node.`}
-      confirmLabel="Delete"
-      onConfirm={() => {
-        if (dimensionPendingDelete) {
-          handleDeleteDimension(dimensionPendingDelete);
-        }
-      }}
-      onCancel={() => setDimensionPendingDelete(null)}
-    />
-    <InputDialog
-      open={showAddDimensionDialog}
-      title="Add New Dimension"
-      message="Enter a name for the new dimension:"
-      placeholder="e.g. Research, Work, Ideas"
-      confirmLabel="Create"
-      onConfirm={handleAddDimension}
-      onCancel={() => setShowAddDimensionDialog(false)}
-    />
-
-    {/* Dimension Edit Modal */}
-    {editingDimensionModal && (
       <div
         style={{
-          position: 'fixed',
+          position: 'absolute',
           inset: 0,
-          background: 'rgba(0, 0, 0, 0.7)',
+          background: 'transparent',
           display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          zIndex: 1000
-        }}
-        onClick={(e) => {
-          if (e.target === e.currentTarget) closeDimensionEditModal();
+          flexDirection: 'column',
         }}
       >
+        {toolbarHost
+          ? createPortal(toolbar, toolbarHost)
+          : (
+            <div style={{ borderBottom: '1px solid var(--rah-border)', padding: '12px 16px' }}>
+              {toolbar}
+            </div>
+            )}
+
+        {view === 'nodes' ? renderNodeGrid() : renderDimensionGrid()}
+      </div>
+
+      <ConfirmDialog
+        open={dimensionPendingDelete !== null}
+        title="Delete this dimension?"
+        message={`This will remove "${dimensionPendingDelete ?? ''}" from every node.`}
+        confirmLabel="Delete"
+        onConfirm={() => {
+          if (dimensionPendingDelete) {
+            void handleDeleteDimension(dimensionPendingDelete);
+          }
+        }}
+        onCancel={() => setDimensionPendingDelete(null)}
+      />
+
+      <InputDialog
+        open={showAddDimensionDialog}
+        title="Add New Dimension"
+        message="Enter a name for the new dimension:"
+        placeholder="e.g. Research, Work, Ideas"
+        confirmLabel="Create"
+        onConfirm={(value) => {
+          void handleAddDimension(value);
+        }}
+        onCancel={() => setShowAddDimensionDialog(false)}
+      />
+
+      {editingDimensionModal && (
         <div
           style={{
-            background: 'var(var(--rah-bg-base))',
-            border: '1px solid #333',
-            borderRadius: '12px',
-            width: '480px',
-            maxWidth: '90vw',
-            maxHeight: '90vh',
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column'
-          }}
-        >
-          {/* Header */}
-          <div style={{
-            padding: '16px 20px',
-            borderBottom: '1px solid var(--rah-border)',
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0, 0, 0, 0.7)',
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'space-between'
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-              <div style={{
-                width: '32px',
-                height: '32px',
-                borderRadius: '8px',
-                background: '#111',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center'
-              }}>
-                <DynamicIcon
-                  name={editModalIcon}
-                  size={16}
-                  style={{ color: '#888' }}
-                />
-              </div>
-              <div>
-                <div style={{
-                  fontSize: '15px',
-                  fontWeight: 600,
-                  color: 'var(var(--rah-text-base))'
-                }}>
-                  Edit Dimension
-                </div>
-                <div style={{
-                  fontSize: '13px',
-                  color: '#888'
-                }}>
-                  {editingDimensionModal.dimension}
-                </div>
-              </div>
-            </div>
-            <button
-              onClick={closeDimensionEditModal}
+            justifyContent: 'center',
+            zIndex: 1000,
+          }}
+          onClick={(event) => {
+            if (event.target === event.currentTarget) closeDimensionEditModal();
+          }}
+        >
+          <div
+            style={{
+              background: 'var(--rah-bg-card)',
+              border: '1px solid var(--rah-border)',
+              borderRadius: '16px',
+              width: '480px',
+              maxWidth: '90vw',
+              maxHeight: '90vh',
+              overflow: 'hidden',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <div
               style={{
-                background: 'transparent',
-                border: 'none',
-                borderRadius: '6px',
-                width: '28px',
-                height: '28px',
+                padding: '16px 20px',
+                borderBottom: '1px solid var(--rah-border)',
                 display: 'flex',
                 alignItems: 'center',
-                justifyContent: 'center',
-                cursor: 'pointer',
-                color: 'var(var(--rah-text-muted))'
+                justifyContent: 'space-between',
               }}
             >
-              <X size={16} />
-            </button>
-          </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <div
+                  style={{
+                    width: '36px',
+                    height: '36px',
+                    borderRadius: '10px',
+                    background: 'var(--rah-bg-subtle)',
+                    border: '1px solid var(--rah-border)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <DynamicIcon name={editModalIcon} size={18} style={{ color: 'var(--rah-text-muted)' }} />
+                </div>
+                <div>
+                  <div style={{ fontSize: '15px', fontWeight: 600, color: 'var(--rah-text-primary)' }}>
+                    Edit Dimension
+                  </div>
+                  <div style={{ fontSize: '13px', color: 'var(--rah-text-muted)' }}>
+                    {editingDimensionModal.dimension}
+                  </div>
+                </div>
+              </div>
 
-          {/* Content */}
-          <div style={{
-            padding: '20px',
-            overflowY: 'auto',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '20px'
-          }}>
-            {/* Description */}
-            <div>
-              <label style={{
-                display: 'block',
-                fontSize: '12px',
-                fontWeight: 600,
-                color: 'var(var(--rah-text-muted))',
-                marginBottom: '8px',
-                textTransform: 'uppercase',
-                letterSpacing: '0.05em'
-              }}>
-                Description
-              </label>
-              <textarea
-                value={editModalDescription}
-                onChange={(e) => setEditModalDescription(e.target.value)}
-                placeholder="Describe what this dimension is for..."
-                maxLength={500}
+              <button
+                type="button"
+                onClick={closeDimensionEditModal}
                 style={{
-                  width: '100%',
-                  minHeight: '80px',
-                  padding: '12px',
-                  background: 'var(var(--rah-bg-surface))',
-                  border: '1px solid #333',
+                  width: '30px',
+                  height: '30px',
                   borderRadius: '8px',
-                  color: 'var(var(--rah-text-base))',
-                  fontSize: '13px',
-                  resize: 'vertical',
-                  outline: 'none'
+                  border: '1px solid var(--rah-border)',
+                  background: 'var(--rah-bg-subtle)',
+                  color: 'var(--rah-text-muted)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
                 }}
-                onFocus={(e) => {
-                  e.currentTarget.style.borderColor = '#22c55e';
-                }}
-                onBlur={(e) => {
-                  e.currentTarget.style.borderColor = '#333';
-                }}
-              />
-              <div style={{
-                marginTop: '4px',
-                fontSize: '11px',
-                color: 'var(var(--rah-text-muted))',
-                textAlign: 'right'
-              }}>
-                {editModalDescription.length}/500
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            <div
+              style={{
+                padding: '20px',
+                overflowY: 'auto',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '20px',
+              }}
+            >
+              <div>
+                <label
+                  style={{
+                    display: 'block',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    color: 'var(--rah-text-muted)',
+                    marginBottom: '8px',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em',
+                  }}
+                >
+                  Name
+                </label>
+                <input
+                  type="text"
+                  value={editModalName}
+                  onChange={(event) => {
+                    setEditModalName(event.target.value);
+                    setEditModalNameError('');
+                  }}
+                  style={{
+                    width: '100%',
+                    padding: '10px 12px',
+                    background: 'var(--rah-bg-subtle)',
+                    border: `1px solid ${editModalNameError ? '#ef4444' : 'var(--rah-border)'}`,
+                    borderRadius: '10px',
+                    color: 'var(--rah-text-primary)',
+                    fontSize: '13px',
+                    outline: 'none',
+                  }}
+                />
+                {editModalNameError && (
+                  <div style={{ marginTop: '6px', fontSize: '11px', color: '#ef4444' }}>
+                    {editModalNameError}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <label
+                  style={{
+                    display: 'block',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    color: 'var(--rah-text-muted)',
+                    marginBottom: '8px',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em',
+                  }}
+                >
+                  Description
+                </label>
+                <textarea
+                  value={editModalDescription}
+                  onChange={(event) => setEditModalDescription(event.target.value)}
+                  placeholder="Describe what this dimension is for..."
+                  maxLength={500}
+                  style={{
+                    width: '100%',
+                    minHeight: '88px',
+                    padding: '12px',
+                    background: 'var(--rah-bg-subtle)',
+                    border: '1px solid var(--rah-border)',
+                    borderRadius: '10px',
+                    color: 'var(--rah-text-primary)',
+                    fontSize: '13px',
+                    resize: 'vertical',
+                    outline: 'none',
+                  }}
+                />
+                <div
+                  style={{
+                    marginTop: '6px',
+                    fontSize: '11px',
+                    color: 'var(--rah-text-muted)',
+                    textAlign: 'right',
+                  }}
+                >
+                  {editModalDescription.length}/500
+                </div>
+              </div>
+
+              <div>
+                <label
+                  style={{
+                    display: 'block',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    color: 'var(--rah-text-muted)',
+                    marginBottom: '8px',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em',
+                  }}
+                >
+                  Icon
+                </label>
+                <LucideIconPicker selectedIcon={editModalIcon} onSelect={setEditModalIcon} />
               </div>
             </div>
 
-            {/* Icon Picker */}
-            <div>
-              <label style={{
-                display: 'block',
-                fontSize: '12px',
-                fontWeight: 600,
-                color: 'var(var(--rah-text-muted))',
-                marginBottom: '8px',
-                textTransform: 'uppercase',
-                letterSpacing: '0.05em'
-              }}>
-                Icon
-              </label>
-              <LucideIconPicker
-                selectedIcon={editModalIcon}
-                onSelect={setEditModalIcon}
-              />
+            <div
+              style={{
+                padding: '16px 20px',
+                borderTop: '1px solid var(--rah-border)',
+                display: 'flex',
+                justifyContent: 'flex-end',
+                gap: '8px',
+              }}
+            >
+              <button
+                type="button"
+                onClick={closeDimensionEditModal}
+                style={{
+                  padding: '8px 16px',
+                  background: 'transparent',
+                  border: '1px solid var(--rah-border)',
+                  borderRadius: '8px',
+                  color: 'var(--rah-text-muted)',
+                  fontSize: '13px',
+                  fontWeight: 500,
+                  cursor: 'pointer',
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => void saveDimensionEdit()}
+                disabled={savingDimensionEdit}
+                style={{
+                  padding: '8px 16px',
+                  background: 'var(--rah-bg-hover)',
+                  border: '1px solid var(--rah-border-strong)',
+                  borderRadius: '8px',
+                  color: 'var(--rah-text-primary)',
+                  fontSize: '13px',
+                  fontWeight: 600,
+                  cursor: savingDimensionEdit ? 'not-allowed' : 'pointer',
+                  opacity: savingDimensionEdit ? 0.6 : 1,
+                }}
+              >
+                {savingDimensionEdit ? 'Saving...' : 'Save'}
+              </button>
             </div>
           </div>
-
-          {/* Footer */}
-          <div style={{
-            padding: '16px 20px',
-            borderTop: '1px solid var(--rah-border)',
-            display: 'flex',
-            justifyContent: 'flex-end',
-            gap: '8px'
-          }}>
-            <button
-              onClick={closeDimensionEditModal}
-              style={{
-                padding: '8px 16px',
-                background: 'transparent',
-                border: '1px solid #333',
-                borderRadius: '6px',
-                color: 'var(var(--rah-text-muted))',
-                fontSize: '13px',
-                fontWeight: 500,
-                cursor: 'pointer'
-              }}
-            >
-              Cancel
-            </button>
-            <button
-              onClick={saveDimensionEdit}
-              disabled={savingDimensionEdit}
-              style={{
-                padding: '8px 16px',
-                background: '#22c55e',
-                border: 'none',
-                borderRadius: '6px',
-                color: '#000',
-                fontSize: '13px',
-                fontWeight: 600,
-                cursor: savingDimensionEdit ? 'not-allowed' : 'pointer',
-                opacity: savingDimensionEdit ? 0.6 : 1
-              }}
-            >
-              {savingDimensionEdit ? 'Saving...' : 'Save'}
-            </button>
-          </div>
         </div>
-      </div>
-    )}
+      )}
     </>
   );
 }