diff --git a/frontend/src/components/pageEditor/DragDropGrid.tsx b/frontend/src/components/pageEditor/DragDropGrid.tsx
index 38e0f8227..078aefc5b 100644
--- a/frontend/src/components/pageEditor/DragDropGrid.tsx
+++ b/frontend/src/components/pageEditor/DragDropGrid.tsx
@@ -513,6 +513,7 @@ const DragDropGrid = <T extends DragDropItem>({
           width: '100%',
           height: '100%',
           position: 'relative',
+          overflow: 'hidden',
         }}
       >
         {/* Selection box overlay */}
@@ -525,9 +526,9 @@ const DragDropGrid = <T extends DragDropItem>({
         style={{
           height: `${rowVirtualizer.getTotalSize()}px`,
           width: '100%',
+          maxWidth: `${gridWidth}px`,
           position: 'relative',
           margin: '0 auto',
-          maxWidth: `${gridWidth}px`,
         }}
       >
         {rowVirtualizer.getVirtualItems().map((virtualRow) => {
diff --git a/frontend/src/components/pageEditor/PageEditorControls.tsx b/frontend/src/components/pageEditor/PageEditorControls.tsx
index 3e36b06b6..7e16064a9 100644
--- a/frontend/src/components/pageEditor/PageEditorControls.tsx
+++ b/frontend/src/components/pageEditor/PageEditorControls.tsx
@@ -138,12 +138,12 @@ const PageEditorControls = ({
 
         {/* Undo/Redo */}
         <Tooltip label="Undo">
-          <ActionIcon onClick={onUndo} disabled={!canUndo} variant="subtle" radius="md" size="lg">
+          <ActionIcon onClick={onUndo} disabled={!canUndo} variant="subtle" style={{ color: canUndo ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }} radius="md" size="lg">
             <UndoIcon />
           </ActionIcon>
         </Tooltip>
         <Tooltip label="Redo">
-          <ActionIcon onClick={onRedo} disabled={!canRedo} variant="subtle" radius="md" size="lg">
+          <ActionIcon onClick={onRedo} disabled={!canRedo} variant="subtle" style={{ color: canRedo ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }} radius="md" size="lg">
             <RedoIcon />
           </ActionIcon>
         </Tooltip>
@@ -156,7 +156,7 @@ const PageEditorControls = ({
             onClick={() => onRotate('left')}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: 'var(--mantine-color-dimmed)' }}
+            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
             radius="md"
             size="lg"
           >
@@ -168,7 +168,7 @@ const PageEditorControls = ({
             onClick={() => onRotate('right')}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: 'var(--mantine-color-dimmed)' }}
+            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
             radius="md"
             size="lg"
           >
@@ -180,7 +180,7 @@ const PageEditorControls = ({
             onClick={onDelete}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: 'var(--mantine-color-dimmed)' }}
+            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
             radius="md"
             size="lg"
           >
@@ -192,7 +192,7 @@ const PageEditorControls = ({
             onClick={onSplit}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: 'var(--mantine-color-dimmed)' }}
+            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
             radius="md"
             size="lg"
           >
@@ -204,7 +204,7 @@ const PageEditorControls = ({
             onClick={onPageBreak}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: 'var(--mantine-color-dimmed)' }}
+            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
             radius="md"
             size="lg"
           >
diff --git a/frontend/src/components/shared/HoverActionMenu.tsx b/frontend/src/components/shared/HoverActionMenu.tsx
index 1c55f5f0a..72119ec6f 100644
--- a/frontend/src/components/shared/HoverActionMenu.tsx
+++ b/frontend/src/components/shared/HoverActionMenu.tsx
@@ -44,10 +44,10 @@ const HoverActionMenu: React.FC<HoverActionMenuProps> = ({
           <ActionIcon
             size="md"
             variant="subtle"
-            style={{ color: action.color || 'var(--mantine-color-dimmed)' }}
             disabled={action.disabled}
             onClick={action.onClick}
             c={action.color}
+            style={{ color: action.color || 'var(--right-rail-icon)' }}
           >
             {action.icon}
           </ActionIcon>