From d741cc928be7bde731fd84ec07756393352e7a97 Mon Sep 17 00:00:00 2001
From: Lee Jackson <130007945+Imagineer99@users.noreply.github.com>
Date: Tue, 5 May 2026 13:11:52 +0100
Subject: [PATCH] fix: developer to api (#5281)

---
 studio/frontend/src/components/app-sidebar.tsx              | 6 +++---
 studio/frontend/src/features/settings/settings-dialog.tsx   | 4 ++--
 studio/frontend/src/features/settings/tabs/api-keys-tab.tsx | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/studio/frontend/src/components/app-sidebar.tsx b/studio/frontend/src/components/app-sidebar.tsx
index 171b4eb92d..433e04b3e5 100644
--- a/studio/frontend/src/components/app-sidebar.tsx
+++ b/studio/frontend/src/components/app-sidebar.tsx
@@ -37,12 +37,12 @@ import {
   Delete02Icon,
   Download03Icon,
   GemIcon,
+  Globe02Icon,
   Search01Icon,
   PowerIcon,
   PencilEdit02Icon,
   LayoutAlignLeftIcon,
   Settings02Icon,
-  SourceCodeSquareIcon,
   ZapIcon,
 } from "@hugeicons/core-free-icons";
 import {
@@ -548,8 +548,8 @@ export function AppSidebar() {
                   <DropdownMenuItem
                     onSelect={() => useSettingsDialogStore.getState().openDialog("api-keys")}
                   >
-                    <HugeiconsIcon icon={SourceCodeSquareIcon} strokeWidth={1.75} className="size-[18px]" />
-                    <span>Developer</span>
+                    <HugeiconsIcon icon={Globe02Icon} strokeWidth={1.75} className="size-[18px]" />
+                    <span>API</span>
                     <span className="ml-auto rounded-[6px] border border-emerald-500/25 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] leading-none font-semibold text-emerald-700 dark:text-emerald-300">
                       New
                     </span>
diff --git a/studio/frontend/src/features/settings/settings-dialog.tsx b/studio/frontend/src/features/settings/settings-dialog.tsx
index 376af06e9d..d33069edbb 100644
--- a/studio/frontend/src/features/settings/settings-dialog.tsx
+++ b/studio/frontend/src/features/settings/settings-dialog.tsx
@@ -10,10 +10,10 @@ import {
 import { cn } from "@/lib/utils";
 import {
   Cancel01Icon,
+  Globe02Icon,
   Message01Icon,
   PaintBrush02Icon,
   Settings02Icon,
-  SourceCodeSquareIcon,
   SparklesIcon,
   UserIcon,
 } from "@hugeicons/core-free-icons";
@@ -40,7 +40,7 @@ const TABS: TabDef[] = [
   { id: "profile", label: "Profile", icon: UserIcon },
   { id: "appearance", label: "Appearance", icon: PaintBrush02Icon },
   { id: "chat", label: "Chat", icon: Message01Icon },
-  { id: "api-keys", label: "Developer", icon: SourceCodeSquareIcon, badge: "New" },
+  { id: "api-keys", label: "API", icon: Globe02Icon, badge: "New" },
   { id: "about", label: "Help", icon: SparklesIcon },
 ];
 
diff --git a/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx b/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
index 64c6f520c0..ac9ec40543 100644
--- a/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
@@ -63,7 +63,7 @@ export function ApiKeysTab() {
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-1">
-        <h1 className="text-lg font-semibold font-heading">Developer</h1>
+        <h1 className="text-lg font-semibold font-heading">API</h1>
         <p className="text-xs text-muted-foreground">
           Access Unsloth programmatically via the OpenAI-compatible API.{" "}
           <a