diff --git a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx
index 70ef4b1fa0..0c6ca2522d 100644
--- a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx
+++ b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx
@@ -19,9 +19,10 @@ export type EditorModeSwitchProps = {
   style?: CSSProperties;
 };
 const TooltipContent = () => {
+  const t = useAFFiNEI18N();
   return (
     <div>
-      Switch
+      {t['Switch']()}
       <StyledKeyboardItem>
         {!environment.isServer && environment.isMacOs ? '⌥ + S' : 'Alt + S'}
       </StyledKeyboardItem>
diff --git a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
index adb7adb74e..361b9b9492 100644
--- a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
+++ b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
@@ -56,11 +56,11 @@ export const StyledSwitchItem = styled('button')<{
 
 export const StyledKeyboardItem = styled('span')(() => {
   return {
-    marginLeft: '5px',
-    fontSize: '4px',
+    marginLeft: '10px',
+    fontSize: 'var(--affine-font-xs)',
     paddingLeft: '5px',
     paddingRight: '5px',
-    backgroundColor: '#55545A',
+    backgroundColor: 'var(--affine-white-10)',
     borderRadius: '4px',
   };
 });