diff --git a/ui/public/logos/claudekit-logo.png b/ui/public/logos/claudekit-logo.png
new file mode 100644
index 00000000..22c9fecc
Binary files /dev/null and b/ui/public/logos/claudekit-logo.png differ
diff --git a/ui/src/components/claudekit-badge.tsx b/ui/src/components/claudekit-badge.tsx
new file mode 100644
index 00000000..a8c4308b
--- /dev/null
+++ b/ui/src/components/claudekit-badge.tsx
@@ -0,0 +1,49 @@
+/**
+ * ClaudeKit Badge Button
+ *
+ * "Powered by ClaudeKit" badge for navbar, inspired by landing page design.
+ * Compact version optimized for header placement.
+ */
+
+import { cn } from '@/lib/utils';
+
+const CLAUDEKIT_URL = 'https://claudekit.cc?ref=HMNKXOHN';
+
+export function ClaudeKitBadge() {
+  return (
+    <a
+      href={CLAUDEKIT_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        'group inline-flex items-center gap-2 px-3 py-1.5 rounded-lg',
+        'bg-accent/10 border-2 border-accent/40',
+        'hover:bg-accent hover:border-accent',
+        'transition-all duration-200 shadow-sm hover:shadow-md'
+      )}
+      title="Powered by ClaudeKit Framework"
+    >
+      <img src="/logos/claudekit-logo.png" alt="ClaudeKit" className="w-5 h-5" />
+      <span className="flex items-baseline gap-1.5 whitespace-nowrap">
+        <span
+          className={cn(
+            'text-[10px] font-medium uppercase tracking-wide',
+            'text-muted-foreground group-hover:text-accent-foreground/80',
+            'transition-colors'
+          )}
+        >
+          Powered by
+        </span>
+        <span
+          className={cn(
+            'text-xs font-bold text-foreground',
+            'group-hover:text-accent-foreground',
+            'transition-colors'
+          )}
+        >
+          ClaudeKit
+        </span>
+      </span>
+    </a>
+  );
+}
diff --git a/ui/src/components/layout.tsx b/ui/src/components/layout.tsx
index e7f841d7..a98494cc 100644
--- a/ui/src/components/layout.tsx
+++ b/ui/src/components/layout.tsx
@@ -9,6 +9,8 @@ import { DocsLink } from '@/components/docs-link';
 import { ConnectionIndicator } from '@/components/connection-indicator';
 import { LocalhostDisclaimer } from '@/components/localhost-disclaimer';
 import { Skeleton } from '@/components/ui/skeleton';
+import { ClaudeKitBadge } from '@/components/claudekit-badge';
+import { SponsorButton } from '@/components/sponsor-button';
 
 function PageLoader() {
   return (
@@ -25,7 +27,10 @@ export function Layout() {
       <AppSidebar />
       <main className="flex-1 flex flex-col min-h-0 overflow-hidden bg-background">
         <header className="flex h-14 items-center justify-between px-6 border-b shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-          <div className="font-semibold text-lg tracking-tight">CCS Config</div>
+          <div className="flex items-center gap-3">
+            <ClaudeKitBadge />
+            <SponsorButton />
+          </div>
           <div className="flex items-center gap-2">
             <ConnectionIndicator />
             <DocsLink />
diff --git a/ui/src/components/sponsor-button.tsx b/ui/src/components/sponsor-button.tsx
new file mode 100644
index 00000000..382d9afb
--- /dev/null
+++ b/ui/src/components/sponsor-button.tsx
@@ -0,0 +1,46 @@
+/**
+ * Sponsor Button
+ *
+ * GitHub Sponsors button for navbar.
+ * Heart icon with hover animation.
+ */
+
+import { Heart } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const SPONSOR_URL = 'https://github.com/sponsors/kaitranntt';
+
+export function SponsorButton() {
+  return (
+    <a
+      href={SPONSOR_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        'group inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg',
+        'bg-pink-500/10 border-2 border-pink-500/40',
+        'hover:bg-pink-400 hover:border-pink-400',
+        'transition-all duration-200 shadow-sm hover:shadow-md'
+      )}
+      title="Sponsor this project on GitHub"
+    >
+      <Heart
+        className={cn(
+          'w-4 h-4 text-pink-500',
+          'group-hover:text-white group-hover:fill-white',
+          'group-hover:animate-pulse',
+          'transition-colors'
+        )}
+      />
+      <span
+        className={cn(
+          'text-xs font-bold text-pink-600 dark:text-pink-300',
+          'group-hover:text-white dark:group-hover:text-white',
+          'transition-colors'
+        )}
+      >
+        Sponsor
+      </span>
+    </a>
+  );
+}