diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx
index 8c2ee0ba..ba9a2712 100644
--- a/src/frontend/apps/impress/src/components/DropButton.tsx
+++ b/src/frontend/apps/impress/src/components/DropButton.tsx
@@ -14,7 +14,7 @@ import { useFocusStore } from '@/stores';
 import { BoxProps } from './Box';
 
 const StyledPopover = styled(Popover)`
-  background-color: white;
+  background-color: var(--c--contextuals--background--surface--primary);
   border-radius: var(--c--globals--spacings--st);
   box-shadow: 0 0 6px 0 rgba(0, 0, 145, 0.1);
   border: 1px solid var(--c--contextuals--border--surface--primary);
diff --git a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
index 629e6e43..05cba790 100644
--- a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
+++ b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
@@ -193,7 +193,7 @@ export const DropdownMenu = ({
                 key={option.label}
                 $align="center"
                 $justify="space-between"
-                $background={colorsTokens['gray-000']}
+                $background="var(--c--contextuals--background--surface--primary)"
                 $color={colorsTokens['brand-600']}
                 $padding={{ vertical: 'xs', horizontal: 'base' }}
                 $width="100%"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
index 0f72bfbd..7ad43e04 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -59,7 +59,7 @@ export const DocEditorContainer = ({
           <Box $css="flex:1;" $position="relative" $width="100%">
             <Box
               $padding={{ top: 'md', bottom: '2rem' }}
-              $background="white"
+              $background="var(--c--contextuals--background--surface--primary)"
               className={clsx('--docs--editor-container', {
                 '--docs--doc-readonly': readOnly,
                 '--docs--doc-deleted': isDeletedDoc,
diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
index bef06b54..db201f63 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
@@ -58,7 +58,11 @@ export const Heading = ({
         });
       }}
       $radius="var(--c--globals--spacings--st)"
-      $background={isActive ? `${colorsTokens['gray-100']}` : 'none'}
+      $background={
+        isActive
+          ? 'var(--c--contextuals--background--semantic--neutral--secondary)'
+          : 'none'
+      }
       $css={css`
         text-align: left;
         &:focus-visible {
diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
index 309ebc30..d2c33981 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
@@ -72,7 +72,7 @@ export const TableContent = () => {
           border: 1px solid ${colorsTokens['brand-100']};
           overflow: hidden;
           border-radius: ${spacingsTokens['3xs']};
-          background: ${colorsTokens['gray-000']};
+          background: var(--c--contextuals--background--surface--primary);
           ${isOpen &&
           css`
             display: flex;
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
index cedf7059..9d9856ff 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
@@ -135,7 +135,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
       aria-disabled={isDisabled}
       onKeyDown={handleKeyDown}
       $css={css`
-        background-color: var(--c--globals--colors--gray-000);
+        background-color: var(--c--contextuals--background--surface--primary);
         .light-doc-item-actions {
           display: ${menuOpen || !isDesktop ? 'flex' : 'none'};
           right: var(--c--globals--spacings--0);
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
index caca04d3..4ff92237 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
@@ -44,7 +44,9 @@ export const LeftPanel = () => {
             height: calc(100vh - ${HEADER_HEIGHT}px);
             width: 100%;
             overflow: hidden;
-            background-color: var(--c--globals--colors--gray-000);
+            background-color: var(
+              --c--contextuals--background--surface--primary
+            );
           `}
           className="--docs--left-panel-desktop"
           as="nav"
@@ -73,7 +75,9 @@ export const LeftPanel = () => {
               border-right: 1px solid var(--c--globals--colors--gray-200);
               position: fixed;
               transform: translateX(${isPanelOpenState ? '0' : '-100dvw'});
-              background-color: var(--c--globals--colors--gray-000);
+              background-color: var(
+                --c--contextuals--background--surface--primary
+              );
               overflow-y: auto;
               overflow-x: hidden;
             `}