diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 46651aba..efbf97a1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -79,13 +79,25 @@ export default function RootLayout({
           <ErrorBoundary>
             <header
               role="banner"
-              className="sticky top-0 z-50 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg)]/95 px-6 py-3 backdrop-blur"
+              className="sticky top-0 z-50 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg)]/95 px-4 sm:px-6 py-3 backdrop-blur"
             >
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 flex-shrink-0">
                 <BrandLogo size={24} />
-                <h1 className="text-lg font-semibold">Reframe</h1>
+                <h1 className="text-lg font-semibold tracking-tight">Reframe</h1>
+              </div>
+              
+              <div className="flex items-center gap-2 sm:gap-4 flex-shrink-0">
+                <a
+                  href="https://github.com/magic-peach/reframe"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="View Reframe on GitHub"
+                  className="flex items-center gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:shadow-[var(--shadow)]"
+                >
+                  ⭐ <span className="hidden sm:inline">Star on GitHub</span>
+                </a>
+                <ThemeToggle />
               </div>
-              <ThemeToggle />
             </header>
             <main id="main-content" tabIndex={-1}>
               {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0421f0ba..490aecfc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,15 +4,15 @@ import Footer from "@/components/Footer";
 export default function Home() {
   return (
     <>
-      <a
-        href="https://github.com/reframe-oss/reframe"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="View Reframe on GitHub"
-        className="hidden sm:flex fixed top-4 right-4 md:right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:shadow-[var(--shadow)]"
-      >
-        ⭐ Star on GitHub
-      </a>
+<a
+  href="https://github.com/reframe-oss/reframe"
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label="View Reframe on GitHub"
+  className="hidden sm:flex fixed top-4 right-4 md:right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:shadow-[var(--shadow)]"
+>
+  ⭐ Star on GitHub
+</a>
 
       <main id="main-content" tabIndex={-1}>
         <VideoEditor />