diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 306c7223..aa898111 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -51,7 +51,8 @@ import { ErrorSlime } from '@/app/components/feedback/ErrorSlime';
 
 const SIDEBAR_MIN = 160;
 const SIDEBAR_MAX = 400;
-const SIDEBAR_DEFAULT = 220;
+// 260 matches Claude.ai's nav-sidebar width: roomy enough that names don't truncate.
+const SIDEBAR_DEFAULT = 260;
 const SIDEBAR_WIDTH_KEY = 'openswarm-sidebar-width';
 const UPDATE_DISMISS_KEY = 'openswarm-update-dismissed';
 
diff --git a/frontend/src/app/pages/Skills/Skills.tsx b/frontend/src/app/pages/Skills/Skills.tsx
index aa3bb1d7..3ee42800 100644
--- a/frontend/src/app/pages/Skills/Skills.tsx
+++ b/frontend/src/app/pages/Skills/Skills.tsx
@@ -338,15 +338,16 @@ const Skills: React.FC = () => {
             fullWidth
             sx={{
               textTransform: 'none',
-              fontSize: '0.76rem',
+              fontSize: '0.86rem',
               fontWeight: 500,
               color: c.accent.primary,
-              justifyContent: 'flex-start',
-              py: 0.5,
-              px: 1,
-              borderRadius: `${c.radius.sm}px`,
-              border: `1px dashed ${c.accent.primary}40`,
-              '&:hover': { bgcolor: `${c.accent.primary}08`, borderColor: c.accent.primary },
+              justifyContent: 'center',
+              gap: 0.5,
+              py: 0.8,
+              px: 1.5,
+              borderRadius: 999,
+              border: `1px solid ${c.accent.primary}40`,
+              '&:hover': { bgcolor: `${c.accent.primary}10`, borderColor: c.accent.primary },
             }}
           >
             Build with AI