diff --git a/frontend/src/components/pageEditor/PageEditorControls.tsx b/frontend/src/components/pageEditor/PageEditorControls.tsx
index 8855db27b..f64139228 100644
--- a/frontend/src/components/pageEditor/PageEditorControls.tsx
+++ b/frontend/src/components/pageEditor/PageEditorControls.tsx
@@ -132,12 +132,12 @@ const PageEditorControls = ({
 
         {/* Undo/Redo */}
         <Tooltip label="Undo">
-          <ActionIcon onClick={onUndo} disabled={!canUndo} size="lg">
+          <ActionIcon onClick={onUndo} disabled={!canUndo} variant="subtle" radius="md" size="lg">
             <UndoIcon />
           </ActionIcon>
         </Tooltip>
         <Tooltip label="Redo">
-          <ActionIcon onClick={onRedo} disabled={!canRedo} size="lg">
+          <ActionIcon onClick={onRedo} disabled={!canRedo} variant="subtle" radius="md" size="lg">
             <RedoIcon />
           </ActionIcon>
         </Tooltip>
@@ -149,8 +149,9 @@ const PageEditorControls = ({
           <ActionIcon
             onClick={() => onRotate('left')}
             disabled={selectionMode && selectedPages.length === 0}
-            variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
-            color={selectionMode && selectedPages.length > 0 ? "blue" : undefined}
+            variant="subtle"
+            style={{ color: 'var(--mantine-color-dimmed)' }}
+            radius="md"
             size="lg"
           >
             <RotateLeftIcon />
@@ -160,8 +161,9 @@ const PageEditorControls = ({
           <ActionIcon
             onClick={() => onRotate('right')}
             disabled={selectionMode && selectedPages.length === 0}
-            variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
-            color={selectionMode && selectedPages.length > 0 ? "blue" : undefined}
+            variant="subtle"
+            style={{ color: 'var(--mantine-color-dimmed)' }}
+            radius="md"
             size="lg"
           >
             <RotateRightIcon />
@@ -172,9 +174,9 @@ const PageEditorControls = ({
             <ActionIcon
               onClick={onDelete}
               disabled={selectedPages.length === 0}
-              color="red"
-              variant={selectedPages.length > 0 ? "light" : "default"}
-              size="lg"
+              variant={selectedPages.length > 0 ? "light" : "subtle"}
+              radius="md"
+            size="lg"
             >
               <DeleteIcon />
             </ActionIcon>
@@ -184,8 +186,9 @@ const PageEditorControls = ({
           <ActionIcon
             onClick={selectionMode ? onSplit : onSplitAll}
             disabled={selectionMode && selectedPages.length === 0}
-            variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
-            color={selectionMode && selectedPages.length > 0 ? "blue" : undefined}
+            variant="subtle"
+            style={{ color: 'var(--mantine-color-dimmed)' }}
+            radius="md"
             size="lg"
           >
             <ContentCutIcon />
@@ -195,8 +198,9 @@ const PageEditorControls = ({
           <ActionIcon
             onClick={selectionMode ? onPageBreak : onPageBreakAll}
             disabled={selectionMode && selectedPages.length === 0}
-            variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
-            color={selectionMode && selectedPages.length > 0 ? "orange" : undefined}
+            variant="subtle"
+            style={{ color: 'var(--mantine-color-dimmed)' }}
+            radius="md"
             size="lg"
           >
             <InsertPageBreakIcon />
@@ -209,9 +213,9 @@ const PageEditorControls = ({
             <ActionIcon
               onClick={onExportSelected}
               disabled={exportLoading || selectedPages.length === 0}
-              color="blue"
-              variant={selectedPages.length > 0 ? "light" : "default"}
-              size="lg"
+              variant={selectedPages.length > 0 ? "light" : "subtle"}
+              radius="md"
+            size="lg"
             >
               <DownloadIcon />
             </ActionIcon>
@@ -221,8 +225,8 @@ const PageEditorControls = ({
           <ActionIcon
             onClick={onExportAll}
             disabled={exportLoading}
-            color="green"
             variant="light"
+            radius="md"
             size="lg"
           >
             <DownloadIcon />
diff --git a/frontend/src/components/pageEditor/PageThumbnail.tsx b/frontend/src/components/pageEditor/PageThumbnail.tsx
index b35e09620..181206664 100644
--- a/frontend/src/components/pageEditor/PageThumbnail.tsx
+++ b/frontend/src/components/pageEditor/PageThumbnail.tsx
@@ -379,8 +379,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
           className={styles.pageNumber}
           size="sm"
           fw={500}
-          c="white"
           style={{
+            color: 'white', // Keep white for page numbers as they have colored backgrounds
             position: 'absolute',
             top: 5,
             left: 5,
@@ -402,7 +402,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
             bottom: 8,
             left: '50%',
             transform: 'translateX(-50%)',
-            background: 'rgba(0, 0, 0, 0.8)',
+            backgroundColor: 'var(--mantine-color-default-hover)',
+            border: '1px solid rgba(128, 128, 128, 0.3)',
             padding: '6px 12px',
             borderRadius: 20,
             opacity: 0,
@@ -421,7 +422,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
             <ActionIcon
               size="md"
               variant="subtle"
-              c="white"
+              style={{ color: 'var(--mantine-color-dimmed)' }}
               disabled={index === 0}
               onClick={(e) => {
                 e.stopPropagation();
@@ -444,7 +445,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
             <ActionIcon
               size="md"
               variant="subtle"
-              c="white"
+              style={{ color: 'var(--mantine-color-dimmed)' }}
               disabled={index === totalPages - 1}
               onClick={(e) => {
                 e.stopPropagation();
@@ -467,7 +468,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
             <ActionIcon
               size="md"
               variant="subtle"
-              c="white"
+              style={{ color: 'var(--mantine-color-dimmed)' }}
               onClick={handleRotateLeft}
             >
               <RotateLeftIcon style={{ fontSize: 20 }} />
@@ -478,7 +479,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
             <ActionIcon
               size="md"
               variant="subtle"
-              c="white"
+              style={{ color: 'var(--mantine-color-dimmed)' }}
               onClick={handleRotateRight}
             >
               <RotateRightIcon style={{ fontSize: 20 }} />
@@ -501,7 +502,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
               <ActionIcon
                 size="md"
                 variant="subtle"
-                c="white"
+                style={{ color: 'var(--mantine-color-dimmed)' }}
                 onClick={handleSplit}
               >
                 <ContentCutIcon style={{ fontSize: 20 }} />