diff --git a/client/src/components/SidePanel/Agents/Tools/SkillsDialog.tsx b/client/src/components/SidePanel/Agents/Tools/SkillsDialog.tsx
index cbd0ce5d49..dd0ebd2b3a 100644
--- a/client/src/components/SidePanel/Agents/Tools/SkillsDialog.tsx
+++ b/client/src/components/SidePanel/Agents/Tools/SkillsDialog.tsx
@@ -164,10 +164,13 @@ export default function SkillsDialog({ open, onOpenChange, agentId }: SkillsDial
         </OGDialogDescription>
         <div className="flex h-[80vh] max-h-[760px] flex-col">
           <div className="flex flex-col gap-3 border-b border-border-light px-6 pb-4 pt-5">
-            <div className="flex items-center justify-between gap-2 pr-10">
+            <div className="flex items-center gap-2 pr-10">
               <OGDialogTitle className="text-base font-semibold text-text-primary">
                 {localize('com_ui_skills')}
               </OGDialogTitle>
+            </div>
+
+            <div className="flex items-center gap-2">
               {hasCreateAccess && (
                 <Button
                   type="button"
@@ -175,15 +178,11 @@ export default function SkillsDialog({ open, onOpenChange, agentId }: SkillsDial
                   size="sm"
                   onClick={() => setCreateOpen(true)}
                   aria-label={localize('com_ui_create_skill')}
-                  className="shrink-0 gap-1.5"
+                  className="h-[42px] w-[42px] shrink-0 p-0"
                 >
                   <Plus className="size-4" aria-hidden="true" />
-                  <span className="truncate">{localize('com_ui_create_skill')}</span>
                 </Button>
               )}
-            </div>
-
-            <div className="flex items-center gap-2">
               <div className="relative min-w-0 flex-1">
                 <Search
                   className="pointer-events-none absolute left-3 top-1/2 z-[1] size-4 -translate-y-1/2 text-text-tertiary"