From fa7e16aa3bea7c4f9b51569263853ee988276636 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Thu, 8 Jan 2026 01:39:38 +0100
Subject: [PATCH] Update topbar layout and styling in App.tsx

---
 client/src/App.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index e3aff5e..2d9de72 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -13,17 +13,19 @@ export default function App() {
   return (
     <div className="app-shell">
       <header className="topbar">
-        <NavLink to="/" className="brand">
-          IG Japanese Quizzer
-        </NavLink>
-        <nav>
-          <NavLink to="/" end className={({ isActive }) => (isActive ? 'link active' : 'link')}>
-            Overview
+        <div className="container topbar-inner">
+          <NavLink to="/" className="brand">
+            IG Japanese Quizzer
           </NavLink>
-          <button className="link" onClick={startRandomQuiz}>
-            New Random Quiz
-          </button>
-        </nav>
+          <nav>
+            <NavLink to="/" end className={({ isActive }) => (isActive ? 'link active' : 'link')}>
+              Overview
+            </NavLink>
+            <button className="link nav-link-btn" onClick={startRandomQuiz}>
+              New Random Quiz
+            </button>
+          </nav>
+        </div>
       </header>
 
       <main className="main">