From 4ab7fb1f7b4ea94a69678c20f3e17db575d5ea19 Mon Sep 17 00:00:00 2001
From: Wasim Yousef Said <wasimysdev@gmail.com>
Date: Fri, 27 Mar 2026 13:44:59 +0100
Subject: [PATCH] fix: replace navbar shutdown text button with icon-only
 button (#4655)

---
 studio/frontend/src/components/navbar.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/studio/frontend/src/components/navbar.tsx b/studio/frontend/src/components/navbar.tsx
index 5fece2b2b2..99909b80fa 100644
--- a/studio/frontend/src/components/navbar.tsx
+++ b/studio/frontend/src/components/navbar.tsx
@@ -17,7 +17,7 @@ import {
 import { cn } from "@/lib/utils";
 import {
   ArrowRight01Icon,
-  StopIcon,
+  Cancel01Icon,
   Book03Icon,
   BubbleChatIcon,
   ChefHatIcon,
@@ -239,12 +239,11 @@ export function Navbar() {
           <button
             type="button"
             onClick={() => setShutdownOpen(true)}
-            className="flex h-9 items-center gap-1.5 rounded-md px-3 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            className="-mr-1.5 flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
             title="Shut down Unsloth Studio server"
             aria-label="Shut down Unsloth Studio server"
           >
-            <HugeiconsIcon icon={StopIcon} className="size-4" />
-            <span className="text-sm font-medium">Shutdown</span>
+            <HugeiconsIcon icon={Cancel01Icon} className="size-5" />
           </button>
         </div>
 
@@ -340,7 +339,7 @@ export function Navbar() {
                     setShutdownOpen(true);
                   }}
                 >
-                  <HugeiconsIcon icon={StopIcon} className="size-4" />
+                  <HugeiconsIcon icon={Cancel01Icon} className="size-5" />
                   Quit Unsloth Studio
                 </button>
                 <div className="mt-2 flex items-center justify-between rounded-md border border-border px-3 py-2">