diff --git a/packages/ui/src/apps/MobileSessionsSheet.tsx b/packages/ui/src/apps/MobileSessionsSheet.tsx
index fb85e607..5f93651b 100644
--- a/packages/ui/src/apps/MobileSessionsSheet.tsx
+++ b/packages/ui/src/apps/MobileSessionsSheet.tsx
@@ -1800,26 +1800,28 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
             style={{ paddingBottom: 'calc(0.375rem + var(--oc-safe-area-bottom, 0px))' }}
           >
             {footer.instanceLabel && footer.onOpenInstances ? (
-              <button
+              <Button
                 type="button"
-                className="flex h-10 min-w-0 flex-1 items-center gap-2 rounded-xl px-2 text-left transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+                variant="info"
+                size="lg"
+                className="min-w-0 shrink justify-start"
                 onClick={footer.onOpenInstances}
                 aria-label={t('mobile.menu.instances')}
                 style={{ touchAction: 'manipulation' }}
               >
-                <Icon name="server" className="size-[18px] shrink-0 text-muted-foreground" />
-                <span className="block min-w-0 truncate typography-ui-label text-foreground">
-                  {footer.instanceLabel}
-                </span>
-              </button>
+                <Icon name="server" className="size-[18px]" />
+                <span className="block min-w-0 truncate">{footer.instanceLabel}</span>
+              </Button>
             ) : (
               <div className="min-w-0 flex-1" />
             )}
             <div className="flex shrink-0 items-center gap-1">
               {footer.onOpenUpdate ? (
-                <button
+                <Button
                   type="button"
-                  className="relative flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-interactive-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                  variant="default"
+                  size="lg"
+                  className="w-10 px-0"
                   onClick={footer.onOpenUpdate}
                   aria-label={t('mobile.menu.update')}
                   title={t('mobile.menu.update')}
@@ -1827,18 +1829,20 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
                 >
                   <Icon name="download" className="size-5" />
                   <span className="absolute right-2 top-2 inline-flex size-2 rounded-full bg-primary" aria-hidden />
-                </button>
+                </Button>
               ) : null}
-              <button
+              <Button
                 type="button"
-                className="flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-interactive-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                variant="default"
+                size="lg"
+                className="w-10 px-0"
                 onClick={footer.onOpenSettings}
                 aria-label={t('mobile.menu.settings')}
                 title={t('mobile.menu.settings')}
                 style={{ touchAction: 'manipulation' }}
               >
                 <Icon name="settings-3" className="size-5" />
-              </button>
+              </Button>
             </div>
           </div>
         ) : null}
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index dd79e144..e38fd187 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -32,6 +32,18 @@ const TINT_DESTRUCTIVE = [
   "dark:active:bg-[color-mix(in_srgb,var(--status-error)_20%,transparent)]",
 ].join(" ")
 
+const TINT_INFO = [
+  "bg-[color-mix(in_srgb,var(--status-info)_4%,var(--background))]",
+  "text-[var(--status-info)]",
+  "border border-[color-mix(in_srgb,var(--status-info)_8%,transparent)]",
+  "hover:bg-[color-mix(in_srgb,var(--status-info)_7%,var(--background))]",
+  "active:bg-[color-mix(in_srgb,var(--status-info)_10%,var(--background))]",
+  "dark:bg-[color-mix(in_srgb,var(--status-info)_7%,transparent)]",
+  "dark:border-[color-mix(in_srgb,var(--status-info)_12%,transparent)]",
+  "dark:hover:bg-[color-mix(in_srgb,var(--status-info)_10%,transparent)]",
+  "dark:active:bg-[color-mix(in_srgb,var(--status-info)_14%,transparent)]",
+].join(" ")
+
 const buttonVariants = cva(
   [
     "group relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[10px] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[50px] typography-ui-label font-medium lowercase tracking-[0.01em] shrink-0 select-none",
@@ -49,6 +61,7 @@ const buttonVariants = cva(
           TINT_DESTRUCTIVE,
           "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
         ),
+        info: TINT_INFO,
         neutral:
           "bg-interactive-hover text-foreground border border-border/60 hover:bg-interactive-active",
         outline: