magic-peach · yuvraj-k-singh · May 19, 2026 · May 19, 2026
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -4,11 +4,11 @@
 
 /* ── Light mode tokens ── */
 :root {
-  --bg: #F7F4F0;
-  --surface: #ffffff;
-  --border: #E8E3DC;
-  --text: #181412;
-  --muted: #5C5550;
+  --bg: #F7F4F0;         /* Soft light background */
+  --surface: #ffffff;    /* Pure white for cards/buttons */
+  --border: #E8E3DC;     /* Muted light border */
+  --text: #181412;       /* Near-black text */
+  --muted: #5C5550;      /* Secondary dark gray text */
   --accent: #2563eb;
   --accent-hover: #1d4ed8;
   --film-600: #e63946;
@@ -22,11 +22,11 @@
 
 /* ── Dark mode tokens ── */
 .dark {
-  --bg: #0f172a;
-  --surface: #1e293b;
-  --border: #334155;
-  --text: #f1f5f9;
-  --muted: #94a3b8;
+  --bg: #0f172a;         /* Deep slate-blue background */
+  --surface: #1e293b;    /* Slate container background */
+  --border: #334155;     /* Dark accent border */
+  --text: #f1f5f9;       /* Crisp white/light text */
+  --muted: #94a3b8;      /* Secondary light gray text */
   --accent: #3b82f6;
   --accent-hover: #2563eb;
   --warning: #fbbf24;
@@ -41,16 +41,12 @@
   --bg: #000000;
   --surface: #000000;
   --border: #FFFFFF;
-
   --text: #FFFFFF;
   --muted: #FFFFFF;
-
   --accent: #FFFF00;
   --accent-hover: #FFFF00;
-
   --error: #FF6666;
   --success: #66FF66;
-
   --film-600: #FF6666;
   --film-400: #66FF66;
 }
@@ -69,10 +65,4 @@ body {
   transition-property: background-color, border-color, color, fill, stroke;
   transition-timing-function: ease;
   transition-duration: 200ms;
-}
-
-:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import { Bebas_Neue, Syne, DM_Sans } from "next/font/google";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import "./globals.css";
 import { ThemeProvider } from "@/components/ThemeProvider";
-import { ThemeToggle } from "@/components/ThemeToggle";
+import Navbar from "@/components/Navbar"; 
 import ScrollToTop from "@/components/ScrollToTop";
 
 export const metadata: Metadata = {
@@ -46,7 +46,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-<html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning>
       <head>
         <link rel="preconnect" href="https://cdn.jsdelivr.net" />
         <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
@@ -77,22 +77,22 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className="min-h-screen bg-[var(--bg)] text-[var(--text)] antialiased">
-
-      <a href="#main-content"
+      {/* Added suppressHydrationWarning here to stop extension injection warnings */}
+      <body 
+        className="min-h-screen bg-[var(--bg)] text-[var(--text)] antialiased"
+        suppressHydrationWarning
+      >
+        <a 
+          href="#main-content"
           className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-white focus:text-black"
         >
           Skip to main content
         </a>
         <ThemeProvider>
           <ErrorBoundary>
-            <header
-              role="banner"
-              className="sticky top-0 z-50 flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--bg)]"
-            >
-              <h1 className="text-lg font-semibold">Reframe</h1>
-              <ThemeToggle />
-            </header>
+
+            <Navbar />
+
             <main id="main-content" tabIndex={-1}>
               {children}
             </main>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,20 +4,11 @@ import Footer from "@/components/Footer";
 export default function Home() {
   return (
     <>
-      <a
-        href="https://github.com/magic-peach/reframe"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="hidden min-[300px]:flex fixed top-4 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 hover:bg-opacity-90 transition-all"      >
-        ⭐ Star on GitHub
-      </a>
-
       <main id="main-content" tabIndex={-1}>
         <VideoEditor />
       </main>
 
       <Footer />
     </>
   );
-}
-
+}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import React from 'react';
+import { Github } from 'lucide-react';
+import { ThemeToggle } from "@/components/ThemeToggle";
+
+export default function Navbar() {
+  return (
+    <header
+      className="
+        sticky top-0 z-50 w-full
+        border-b border-[var(--border)]
+        bg-[var(--bg)]
+        shadow-sm
+        transition-colors duration-300
+      "
+    >
+      <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-4 sm:px-6">
+
+        {/* Left Section - Logo */}
+        <div 
+          onClick={() => window.location.reload()} 
+          className="group flex cursor-pointer items-center gap-2 sm:gap-3"
+        >
+          {/* Logo Icon */}
+          <div
+            className="
+              flex h-9 w-9 sm:h-10 sm:w-10 items-center justify-center
+              rounded-xl sm:rounded-2xl
+              bg-gradient-to-br from-blue-500 to-cyan-400
+              shadow-lg shadow-blue-500/20
+              transition-transform duration-300
+              group-hover:scale-110
+            "
+          >
+            <span className="text-base sm:text-lg font-bold text-white">
+              R
+            </span>
+          </div>
+
+          {/* Logo Text */}
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold tracking-tight text-[var(--text)] leading-none">
+              Reframe
+            </h1>
+            <p className="hidden text-[10px] sm:text-xs text-[var(--muted)] sm:block mt-0.5">
+              In-Browser Video Editor
+            </p>
+          </div>
+        </div>
+
+        {/* Right Section */}
+        <div className="flex items-center gap-2 sm:gap-4">
+
+          {/* Fully Responsive GitHub Button */}
+          <a
+            href="https://github.com/magic-peach/reframe"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="
+              inline-flex items-center justify-center gap-2
+              rounded-xl
+              border border-[var(--border)]
+              bg-[var(--surface)]
+              p-2.5 sm:px-5 sm:py-2.5
+              text-xs sm:text-sm font-semibold uppercase tracking-wider
+              text-[var(--text)]
+              transition-all duration-300
+              hover:opacity-90
+            "
+          >
+            <Github size={16} className="text-[var(--text)] transition-transform duration-300 hover:rotate-12" />
+
+            {/* Mobile: Shows only ⭐ | Desktop: Shows full text */}
+            <span className="sm:hidden">⭐</span>
+            <span className="hidden sm:inline">⭐ Star on GitHub</span>
+          </a>
+
+          {/* Divider */}
+          <div className="h-8 w-px bg-[var(--border)]" />
+
+          {/* Theme Toggle Container */}
+          <div className="rounded-xl border border-[var(--border)] bg-[var(--surface)] p-1 transition-all duration-300">
+            <div className="flex items-center justify-center">
+              <ThemeToggle />
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </header>
+  );
+}