diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 653d142..f0566ac 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -4,6 +4,7 @@
 @theme inline {
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --font-pixel: var(--font-geist-pixel-square);
 
   /* --color-base: var(--base); */
   --color-background: var(--background);
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 288923c..d022dad 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,5 +1,6 @@
 import { Analytics } from "@vercel/analytics/next"
 import { GeistMono } from "geist/font/mono"
+import { GeistPixelSquare } from "geist/font/pixel"
 import { GeistSans } from "geist/font/sans"
 import type { Metadata, Viewport } from "next"
 import { Footer } from "@/components/footer"
@@ -52,7 +53,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}
+        className={`${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable} antialiased`}
       >
         <div className="root flex min-h-screen flex-col">
           <Providers>
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index b32aae7..9268e76 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -146,7 +146,7 @@ export default async function Home() {
             </h3>
             <div className="mt-2 flex items-center gap-1.5">
               <AsteriskIcon className="shrink-0 text-faint" size={16} />
-              <code className="font-mono text-accent">
+              <code className="font-pixel text-accent">
                 npx skills add basehub-ai/forums --skill remote-bash
               </code>
             </div>
@@ -177,7 +177,7 @@ export default async function Home() {
                       className="mt-0.5 shrink-0 text-faint"
                       size={16}
                     />
-                    <span className="font-mono text-dim">{tool.name}</span>
+                    <span className="font-pixel text-dim">{tool.name}</span>
                   </div>
                   <p className="ml-5.5 text-muted text-sm">
                     {tool.description}
diff --git a/apps/web/components/branch-selector.tsx b/apps/web/components/branch-selector.tsx
index bd46a49..e054a88 100644
--- a/apps/web/components/branch-selector.tsx
+++ b/apps/web/components/branch-selector.tsx
@@ -88,7 +88,7 @@ export function BranchSelector({
     <>
       <button
         className={cn(
-          "group flex h-9 animate-fade-in cursor-pointer items-center gap-2 bg-transparent text-faint text-sm transition-none hover:text-accent active:text-accent sm:w-auto",
+          "group flex h-9 animate-fade-in cursor-pointer items-center gap-2 bg-transparent font-pixel text-faint text-sm transition-none hover:text-accent active:text-accent sm:w-auto",
           isBranchDialogOpen && "text-accent"
         )}
         onClick={() => setIsBranchDialogOpen(true)}
diff --git a/apps/web/components/composer.tsx b/apps/web/components/composer.tsx
index f7936ef..2e55965 100644
--- a/apps/web/components/composer.tsx
+++ b/apps/web/components/composer.tsx
@@ -294,7 +294,7 @@ export const Composer = ({
               <Menu.Root onOpenChange={setIsMenuOpen}>
                 <Menu.Trigger
                   className={cn(
-                    "group h-9 justify-between bg-transparent text-faint text-sm transition-none hover:text-accent hover:no-underline active:text-accent data-popup-open:text-accent sm:w-auto"
+                    "group h-9 justify-between bg-transparent font-pixel text-faint text-sm transition-none hover:text-accent hover:no-underline active:text-accent data-popup-open:text-accent sm:w-auto"
                   )}
                 >
                   {(() => {
@@ -383,7 +383,7 @@ export const Composer = ({
                             : "Switch to ask mode"
                         }
                         className={cn(
-                          "flex items-center justify-center gap-1 text-faint text-sm transition-colors hover:text-accent"
+                          "flex items-center justify-center gap-1 font-pixel text-faint text-sm transition-colors hover:text-accent"
                         )}
                         onClick={toggleMode}
                         type="button"
diff --git a/apps/web/components/typography.tsx b/apps/web/components/typography.tsx
index 9409343..429a373 100644
--- a/apps/web/components/typography.tsx
+++ b/apps/web/components/typography.tsx
@@ -83,7 +83,7 @@ export const ListItem = ({
   className?: string
   children: React.ReactNode
 }) => {
-  return <div className={cn("flex h-4.5", className)}>{children}</div>
+  return <div className={cn("flex h-4.5 font-pixel", className)}>{children}</div>
 }
 
 export const TableColumnTitle = ({
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx
index 58b9726..b07fc49 100644
--- a/apps/web/components/ui/dialog.tsx
+++ b/apps/web/components/ui/dialog.tsx
@@ -72,7 +72,7 @@ function Popup({
       {...props}
     >
       <div className="relative">
-        <div className="relative z-10 border border-dim bg-background">
+        <div className="relative z-10 border border-dim bg-background font-pixel">
           {title && (
             <div className="absolute -top-4 right-0 left-4 flex items-center">
               <span className="bg-background px-2 font-bold text-bright text-lg tracking-normal">
diff --git a/apps/web/components/ui/menu.tsx b/apps/web/components/ui/menu.tsx
index 855047e..2944761 100644
--- a/apps/web/components/ui/menu.tsx
+++ b/apps/web/components/ui/menu.tsx
@@ -37,7 +37,7 @@ function Popup({
         <div className="relative">
           <BaseMenu.Popup
             className={cn(
-              "peer relative z-50 min-w-40 border border-dim bg-background p-1.5 text-sm",
+              "peer relative z-50 min-w-40 border border-dim bg-background p-1.5 font-pixel text-sm",
               "outline-none data-closed:pointer-events-none",
               className
             )}
diff --git a/apps/web/components/ui/tooltip.tsx b/apps/web/components/ui/tooltip.tsx
index 293bba6..5a94262 100644
--- a/apps/web/components/ui/tooltip.tsx
+++ b/apps/web/components/ui/tooltip.tsx
@@ -20,7 +20,7 @@ function Popup({
       <BaseTooltip.Positioner sideOffset={sideOffset}>
         <BaseTooltip.Popup
           className={cn(
-            "z-50 max-w-[280px] bg-bright px-2 py-1 text-background text-sm shadow-sm",
+            "z-50 max-w-[280px] bg-bright px-2 py-1 font-pixel text-background text-sm shadow-sm",
             className
           )}
           {...props}
diff --git a/apps/web/package.json b/apps/web/package.json
index ea90bbd..bbb56d7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -39,7 +39,7 @@
     "dataloader": "^2.2.3",
     "date-fns": "^4.1.0",
     "drizzle-orm": "^0.45.1",
-    "geist": "^1.5.1",
+    "geist": "^1.7.0",
     "lucide-react": "^0.562.0",
     "ms": "^2.1.3",
     "nanoid": "^5.1.6",
