diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index 618a1d29..8510b730 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -36,7 +36,30 @@ export interface BoxProps {
   $position?: CSSProperties['position'];
   $radius?: CSSProperties['borderRadius'];
   $shrink?: CSSProperties['flexShrink'];
+  $theme?:
+    | 'primary'
+    | 'primary-text'
+    | 'secondary'
+    | 'secondary-text'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'greyscale';
   $transition?: CSSProperties['transition'];
+  $variation?:
+    | 'text'
+    | '000'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
   $width?: CSSProperties['width'];
   $wrap?: CSSProperties['flexWrap'];
   $zIndex?: CSSProperties['zIndex'];
@@ -73,6 +96,12 @@ export const Box = styled('div')<BoxProps>`
   ${({ $position }) => $position && `position: ${$position};`}
   ${({ $radius }) => $radius && `border-radius: ${$radius};`}
   ${({ $shrink }) => $shrink && `flex-shrink: ${$shrink};`}
+  ${({ $theme, $variation }) => {
+    if (!$theme || !$variation) {
+      return '';
+    }
+    return `color: var(--c--theme--colors--${$theme}-${$variation});`;
+  }}
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
diff --git a/src/frontend/apps/impress/src/components/BoxButton.tsx b/src/frontend/apps/impress/src/components/BoxButton.tsx
index 15d1b340..08715116 100644
--- a/src/frontend/apps/impress/src/components/BoxButton.tsx
+++ b/src/frontend/apps/impress/src/components/BoxButton.tsx
@@ -24,6 +24,9 @@ export type BoxButtonType = BoxType & {
  */
 const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
   ({ $css, ...props }, ref) => {
+    const theme = props.$theme || 'greyscale';
+    const variation = props.$variation || '400';
+
     return (
       <Box
         ref={ref}
@@ -37,10 +40,16 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
           border: none;
           outline: none;
           font-family: inherit;
-
           color: ${props.disabled
-            ? 'var(--c--theme--colors--greyscale-400) !important'
-            : 'inherit'};
+            ? `var(--c--theme--colors--${theme}-400) !important`
+            : `inherit`};
+
+          &:focus-visible {
+            transition: none;
+            outline: 2px solid var(--c--theme--colors--${theme}-${variation});
+            border-radius: 1px;
+            outline-offset: 4px;
+          }
           ${$css || ''}
         `}
         {...props}
diff --git a/src/frontend/apps/impress/src/components/Text.tsx b/src/frontend/apps/impress/src/components/Text.tsx
index 80f9da83..6b0f761c 100644
--- a/src/frontend/apps/impress/src/components/Text.tsx
+++ b/src/frontend/apps/impress/src/components/Text.tsx
@@ -15,29 +15,6 @@ export interface TextProps extends BoxProps {
   $textAlign?: CSSProperties['textAlign'];
   $textTransform?: CSSProperties['textTransform'];
   $size?: TextSizes | (string & {});
-  $theme?:
-    | 'primary'
-    | 'primary-text'
-    | 'secondary'
-    | 'secondary-text'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'greyscale';
-  $variation?:
-    | 'text'
-    | '000'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900'
-    | '1000';
 }
 
 export type TextType = ComponentPropsWithRef<typeof Text>;
@@ -50,8 +27,6 @@ export const TextStyled = styled(Box)<TextProps>`
   ${({ $size }) =>
     $size &&
     `font-size: ${$size in sizes ? sizes[$size as TextSizes] : $size};`}
-  ${({ $theme, $variation }) =>
-    `color: var(--c--theme--colors--${$theme}-${$variation});`}
   ${({ $color }) => $color && `color: ${$color};`}
   ${({ $ellipsis }) =>
     $ellipsis &&
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
index 33a2cfd6..c5043f37 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
@@ -80,6 +80,8 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => {
         }
         $direction="row"
         $gap="0.2rem"
+        $theme="danger"
+        $variation="600"
         $align="center"
       >
         <Icon