diff --git a/packages/app/src/components/tools-menu.tsx b/packages/app/src/components/tools-menu.tsx
index 16a4a33a34..f4924f0a58 100644
--- a/packages/app/src/components/tools-menu.tsx
+++ b/packages/app/src/components/tools-menu.tsx
@@ -57,7 +57,7 @@ export function ToolsMenu(props: ToolsMenuProps) {
   const [state, setState] = createStore({ tab: props.defaultTab ?? ("mcp" as ToolsMenuTab) })
 
   return (
-    <div class="w-[360px] max-w-[calc(100vw-40px)] rounded-xl bg-v2-background-bg-base p-4 shadow-[var(--v2-elevation-floating)]">
+    <div class="w-[360px] max-w-[calc(100vw-40px)] rounded-xl bg-v2-background-bg-base p-4 [font-family:var(--v2-font-family-sans)] shadow-[var(--v2-elevation-floating)]">
       <SegmentedControlV2
         value={state.tab}
         onChange={(value) => value && setState("tab", value as ToolsMenuTab)}
@@ -79,7 +79,7 @@ export function ToolsMenu(props: ToolsMenuProps) {
               {(item) => (
                 <div class="flex h-8 items-center gap-2 px-2">
                   <StatusDot status={item().status} />
-                  <span class="min-w-0 flex-1 truncate text-[13px] font-[440] leading-4 tracking-[-0.04px] text-v2-text-text-base">
+                  <span class="min-w-0 flex-1 truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base">
                     {item().name}
                   </span>
                   <Show
@@ -134,7 +134,7 @@ export function ToolsMenu(props: ToolsMenuProps) {
               {(item) => (
                 <div class="flex h-8 items-center gap-2 px-2">
                   <StatusDot status={item.status} />
-                  <span class="min-w-0 flex-1 truncate text-[13px] font-[440] leading-4 tracking-[-0.04px] text-v2-text-text-base">
+                  <span class="min-w-0 flex-1 truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base">
                     {item.name}
                   </span>
                 </div>
@@ -154,7 +154,7 @@ export function ToolsMenu(props: ToolsMenuProps) {
               {(plugin) => (
                 <div class="flex h-8 items-center gap-2 px-2">
                   <StatusDot status="connected" />
-                  <span class="min-w-0 flex-1 truncate text-[13px] font-[440] leading-4 tracking-[-0.04px] text-v2-text-text-base">
+                  <span class="min-w-0 flex-1 truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base">
                     {plugin}
                   </span>
                 </div>
@@ -181,7 +181,7 @@ function ToolsList(props: { description: string; children: JSXElement }) {
 function ToolsEmpty(props: { title: JSXElement; description: string }) {
   return (
     <div class="mt-4 flex flex-col gap-2 text-center text-[13px] leading-4 tracking-[-0.04px]">
-      <div class="h-4 font-[500] text-v2-text-text-muted">{props.title}</div>
+      <div class="h-4 font-[530] text-v2-text-text-muted">{props.title}</div>
       <div class="h-4 font-[440] text-v2-text-text-faint">{props.description}</div>
     </div>
   )
diff --git a/packages/storybook/.storybook/preview.css b/packages/storybook/.storybook/preview.css
new file mode 100644
index 0000000000..5092e3c6f0
--- /dev/null
+++ b/packages/storybook/.storybook/preview.css
@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Inter";
+  src: url("@opencode-ai/ui/fonts/Inter.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+}
diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
index 7c13eb979d..f227427c9a 100644
--- a/packages/storybook/.storybook/preview.tsx
+++ b/packages/storybook/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import "@opencode-ai/ui/styles/tailwind"
 import "@opencode-ai/session-ui/styles"
 import "@opencode-ai/ui/v2/styles/tailwind.css"
+import "./preview.css"
 
 import { createEffect, onCleanup, onMount } from "solid-js"
 import addonA11y from "@storybook/addon-a11y"