From 62407ae24ad485ee237f1ce9239220801eb98cd1 Mon Sep 17 00:00:00 2001
From: "engine-labs-app[bot]"
 <140088366+engine-labs-app[bot]@users.noreply.github.com>
Date: Thu, 16 Oct 2025 06:47:31 +0000
Subject: [PATCH] feat(ui): modernize app UI with improved typography, navbar,
 and layout

This change gives the app a fresh, more modern visual feel to better support reading.
- Upgrades base fonts to Inter (UI) and Literata (reading) for superior readability
- Increases border radius and introduces improved spacing, card shadows, and larger touch targets
- Refactors header/navbar with better hierarchy, height, and button spacing
- Updates all forms, library, and auth pages for cleaner, more inviting presentation
- Enhances hover/focus states and introduces subtle accent blurs behind key icons
No breaking changes, but the user-visible look-and-feel is globally updated.
---
 package-lock.json               | 10 ++++
 src/app/(app)/library/page.tsx  | 92 +++++++++++++++++----------------
 src/app/(auth)/sign-in/page.tsx | 46 ++++++++++-------
 src/app/(auth)/sign-up/page.tsx | 44 ++++++++++------
 src/app/globals.css             | 11 ++--
 src/app/layout.tsx              | 17 +++---
 src/app/page.tsx                | 25 +++++----
 src/components/header.tsx       | 78 ++++++++++++++--------------
 src/components/theme-toggle.tsx | 17 +++---
 9 files changed, 195 insertions(+), 145 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5ed1768..6345e36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2385,6 +2385,7 @@
       "integrity": "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2395,6 +2396,7 @@
       "integrity": "sha512-brtBs0MnE9SMx7px208g39lRmC5uHZs96caOJfTjFcYSLHNamvaSMfJNagChVNkup2SdtOxKX1FDBkRSJe1ZAg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2461,6 +2463,7 @@
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -2988,6 +2991,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3973,6 +3977,7 @@
       "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4147,6 +4152,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -6446,6 +6452,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6455,6 +6462,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -7289,6 +7297,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7460,6 +7469,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/src/app/(app)/library/page.tsx b/src/app/(app)/library/page.tsx
index ba1ba62..9923228 100644
--- a/src/app/(app)/library/page.tsx
+++ b/src/app/(app)/library/page.tsx
@@ -147,11 +147,11 @@ export default function LibraryPage() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <Card className="w-full max-w-md">
-          <CardContent className="p-12 text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
-            <p className="text-muted-foreground">{loadingMessage}</p>
+      <div className="flex items-center justify-center min-h-[500px]">
+        <Card className="w-full max-w-md shadow-sm">
+          <CardContent className="p-16 text-center">
+            <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-primary mx-auto mb-6"></div>
+            <p className="text-muted-foreground text-base">{loadingMessage}</p>
           </CardContent>
         </Card>
       </div>
@@ -160,12 +160,12 @@ export default function LibraryPage() {
 
   if (!email) {
     return (
-      <div className="text-center py-12">
-        <Card className="w-full max-w-md mx-auto">
-          <CardContent className="p-12 text-center">
-            <BookOpen className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
-            <h1 className="text-2xl font-bold mb-4">Please sign in to view your library</h1>
-            <Button onClick={() => router.push("/sign-in")} size="lg">
+      <div className="text-center py-16">
+        <Card className="w-full max-w-md mx-auto shadow-lg">
+          <CardContent className="p-16 text-center">
+            <BookOpen className="h-20 w-20 text-muted-foreground/60 mx-auto mb-6" strokeWidth={1.5} />
+            <h1 className="text-3xl font-bold mb-4">Please sign in to view your library</h1>
+            <Button onClick={() => router.push("/sign-in")} size="lg" className="h-11 px-8 shadow-md">
               Sign In
             </Button>
           </CardContent>
@@ -175,10 +175,10 @@ export default function LibraryPage() {
   }
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold">My Library</h1>
-        <p className="text-muted-foreground">Manage your digital book collection</p>
+    <div className="space-y-8">
+      <div className="space-y-2">
+        <h1 className="text-4xl font-bold tracking-tight">My Library</h1>
+        <p className="text-lg text-muted-foreground">Manage your digital book collection</p>
       </div>
       
       <UploadForm onUploaded={refreshBooks} />
@@ -191,54 +191,54 @@ export default function LibraryPage() {
 function BookList({ books, onDeleteBook }: { books: BookRow[]; onDeleteBook: (id: string) => void }) {
   if (!books.length) {
     return (
-      <Card>
-        <CardContent className="p-12 text-center">
-          <BookOpen className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
-          <h3 className="text-lg font-semibold mb-2">No books yet</h3>
-          <p className="text-muted-foreground">Upload a PDF to get started with your digital library. EPUB support coming soon!</p>
+      <Card className="border-dashed">
+        <CardContent className="p-16 text-center">
+          <BookOpen className="h-20 w-20 text-muted-foreground/60 mx-auto mb-6" strokeWidth={1.5} />
+          <h3 className="text-xl font-semibold mb-3">No books yet</h3>
+          <p className="text-muted-foreground text-base">Upload a PDF to get started with your digital library.</p>
         </CardContent>
       </Card>
     );
   }
   
   return (
-    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4">
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-5">
       {books.map((b) => (
-        <Card key={b.id} className="group hover:shadow-lg transition-all duration-200 hover:-translate-y-1">
+        <Card key={b.id} className="group hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border-muted overflow-hidden">
           <CardContent className="p-0">
-            <div className="aspect-[3/4] bg-muted rounded-t-lg relative overflow-hidden">
+            <div className="aspect-[3/4] bg-gradient-to-br from-muted to-muted/50 rounded-t-lg relative overflow-hidden">
               <Link href={`/read/${b.id}`} className="block w-full h-full cursor-pointer">
                 {b.cover_url ? (
                   <img 
                     src={b.cover_url} 
                     alt={b.title ?? "Book cover"}
-                    className="w-full h-full object-cover"
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                   />
                 ) : (
                   <div className="w-full h-full flex items-center justify-center">
                     {b.format === 'pdf' ? (
-                      <FileText className="h-12 w-12 text-muted-foreground" />
+                      <FileText className="h-14 w-14 text-muted-foreground/60 group-hover:text-muted-foreground transition-colors" strokeWidth={1.5} />
                     ) : (
-                      <FileImage className="h-12 w-12 text-muted-foreground" />
+                      <FileImage className="h-14 w-14 text-muted-foreground/60 group-hover:text-muted-foreground transition-colors" strokeWidth={1.5} />
                     )}
                   </div>
                 )}
               </Link>
               <Badge 
                 variant="secondary" 
-                className="absolute top-2 right-2 text-[10px] sm:text-xs"
+                className="absolute top-2.5 right-2.5 text-[10px] sm:text-xs font-semibold shadow-sm"
               >
                 {b.format?.toUpperCase()}
               </Badge>
               
-              {/* Delete button - always visible */}
-              <div className="absolute top-2 left-2">
+              {/* Delete button */}
+              <div className="absolute top-2.5 left-2.5 opacity-0 group-hover:opacity-100 transition-opacity">
                 <AlertDialog>
                   <AlertDialogTrigger asChild>
                     <Button
                       size="sm"
                       variant="destructive"
-                      className="h-8 w-8 p-0 cursor-pointer"
+                      className="h-8 w-8 p-0 cursor-pointer shadow-lg"
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
@@ -264,12 +264,12 @@ function BookList({ books, onDeleteBook }: { books: BookRow[]; onDeleteBook: (id
                 </AlertDialog>
               </div>
             </div>
-            <div className="p-2 sm:p-3">
+            <div className="p-3 sm:p-4">
               <Link href={`/read/${b.id}`} className="block cursor-pointer">
-                <h3 className="font-medium truncate text-sm mb-1 hover:text-primary transition-colors">
+                <h3 className="font-semibold truncate text-sm sm:text-base mb-1.5 group-hover:text-primary transition-colors">
                   {b.title ?? "Untitled"}
                 </h3>
-                <p className="text-xs text-muted-foreground truncate">
+                <p className="text-xs sm:text-sm text-muted-foreground truncate">
                   {b.author ?? "Unknown Author"}
                 </p>
               </Link>
@@ -319,20 +319,20 @@ function UploadForm({ onUploaded }: { onUploaded: () => void }) {
   }, [file, onUploaded]);
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center space-x-2">
-          <Upload className="h-5 w-5" />
+    <Card className="shadow-sm">
+      <CardHeader className="pb-4">
+        <CardTitle className="flex items-center space-x-2.5 text-xl">
+          <Upload className="h-5 w-5 text-primary" />
           <span>Upload a Book</span>
         </CardTitle>
-        <CardDescription>
-          Upload PDF files to add them to your library. EPUB support coming soon!
+        <CardDescription className="text-base">
+          Upload PDF files to add them to your library.
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor={fileInputId}>Choose file</Label>
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div className="space-y-3">
+            <Label htmlFor={fileInputId} className="text-sm font-medium">Choose file</Label>
             <div className="flex items-center gap-3">
               <Input 
                 id={fileInputId} 
@@ -344,13 +344,14 @@ function UploadForm({ onUploaded }: { onUploaded: () => void }) {
               <Button 
                 type="button" 
                 variant="outline" 
+                size="default"
                 onClick={() => document.getElementById(fileInputId)?.click()}
-                className="flex items-center space-x-2 cursor-pointer"
+                className="flex items-center space-x-2 cursor-pointer h-10"
               >
                 <Upload className="h-4 w-4" />
                 <span>Choose file</span>
               </Button>
-              <span className="text-sm text-muted-foreground truncate max-w-[50%]">
+              <span className="text-sm text-muted-foreground truncate flex-1 min-w-0">
                 {file?.name ?? "No file selected"}
               </span>
             </div>
@@ -358,7 +359,8 @@ function UploadForm({ onUploaded }: { onUploaded: () => void }) {
           <Button 
             disabled={!file || busy} 
             type="submit" 
-            className="w-full cursor-pointer"
+            size="lg"
+            className="w-full cursor-pointer h-11 text-base shadow-md hover:shadow-lg transition-all"
           >
             {busy ? (
               <>
diff --git a/src/app/(auth)/sign-in/page.tsx b/src/app/(auth)/sign-in/page.tsx
index d7955a7..13966e5 100644
--- a/src/app/(auth)/sign-in/page.tsx
+++ b/src/app/(auth)/sign-in/page.tsx
@@ -70,26 +70,29 @@ export default function SignInPage() {
   }
 
   return (
-    <div className="min-h-[calc(100vh-8rem)] flex items-center justify-center">
-      <Card className="w-full max-w-md">
-        <CardHeader className="text-center">
-          <div className="flex justify-center mb-4">
-            <BookOpen className="h-12 w-12 text-primary" />
+    <div className="min-h-[calc(100vh-10rem)] flex items-center justify-center py-12">
+      <Card className="w-full max-w-md shadow-lg">
+        <CardHeader className="text-center pb-6">
+          <div className="flex justify-center mb-6">
+            <div className="relative">
+              <div className="absolute inset-0 bg-primary/20 blur-xl rounded-full"></div>
+              <BookOpen className="relative h-14 w-14 text-primary" strokeWidth={1.5} />
+            </div>
           </div>
-          <CardTitle className="text-2xl">
+          <CardTitle className="text-3xl font-bold">
             {mode === "sign-in" ? "Welcome back" : "Create account"}
           </CardTitle>
-          <CardDescription>
+          <CardDescription className="text-base mt-2">
             {mode === "sign-in" 
               ? "Sign in to access your library" 
               : "Sign up to start your reading journey"
             }
           </CardDescription>
         </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
+        <CardContent className="pt-0">
+          <form onSubmit={handleSubmit} className="space-y-5">
             <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
+              <Label htmlFor="email" className="text-sm font-medium">Email</Label>
               <Input
                 id="email"
                 type="email"
@@ -97,10 +100,11 @@ export default function SignInPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="you@example.com"
+                className="h-11"
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="password">Password</Label>
+              <Label htmlFor="password" className="text-sm font-medium">Password</Label>
               <Input
                 id="password"
                 type="password"
@@ -108,14 +112,20 @@ export default function SignInPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Enter your password"
+                className="h-11"
               />
               {mode === "sign-up" && (
-                <p className="text-xs text-muted-foreground">
+                <p className="text-xs text-muted-foreground pt-1">
                   Password must be at least 6 characters and contain both letters and digits.
                 </p>
               )}
             </div>
-            <Button type="submit" className="w-full" disabled={!!status && status.includes("Processing")}>
+            <Button 
+              type="submit" 
+              className="w-full h-11 text-base shadow-md hover:shadow-lg transition-all" 
+              size="lg"
+              disabled={!!status && status.includes("Processing")}
+            >
               {status && status.includes("Processing") ? (
                 <>
                   <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
@@ -143,11 +153,11 @@ export default function SignInPage() {
             <Separator />
             <div className="mt-4 text-center">
               {mode === "sign-in" ? (
-                <Button variant="link" onClick={() => setMode("sign-up")} className="text-sm">
+                <Button variant="link" onClick={() => setMode("sign-up")} className="text-sm font-medium">
                   Don&apos;t have an account? Create one
                 </Button>
               ) : (
-                <Button variant="link" onClick={() => setMode("sign-in")} className="text-sm">
+                <Button variant="link" onClick={() => setMode("sign-in")} className="text-sm font-medium">
                   Already have an account? Sign in
                 </Button>
               )}
@@ -155,13 +165,13 @@ export default function SignInPage() {
           </div>
           
           {status && (
-            <div className="mt-4 p-3 rounded-md bg-muted">
-              <p className="text-sm text-muted-foreground">{status}</p>
+            <div className="mt-4 p-4 rounded-lg bg-muted/50 border border-muted-foreground/20">
+              <p className="text-sm text-foreground">{status}</p>
             </div>
           )}
           
           <div className="mt-6 text-center">
-            <Button variant="ghost" asChild>
+            <Button variant="ghost" asChild className="text-sm">
               <Link href="/">← Back to home</Link>
             </Button>
           </div>
diff --git a/src/app/(auth)/sign-up/page.tsx b/src/app/(auth)/sign-up/page.tsx
index 33655ed..fecacdc 100644
--- a/src/app/(auth)/sign-up/page.tsx
+++ b/src/app/(auth)/sign-up/page.tsx
@@ -34,21 +34,24 @@ export default function SignUpPage() {
   }
 
   return (
-    <div className="min-h-[calc(100vh-8rem)] flex items-center justify-center">
-      <Card className="w-full max-w-md">
-        <CardHeader className="text-center">
-          <div className="flex justify-center mb-4">
-            <BookOpen className="h-12 w-12 text-primary" />
+    <div className="min-h-[calc(100vh-10rem)] flex items-center justify-center py-12">
+      <Card className="w-full max-w-md shadow-lg">
+        <CardHeader className="text-center pb-6">
+          <div className="flex justify-center mb-6">
+            <div className="relative">
+              <div className="absolute inset-0 bg-primary/20 blur-xl rounded-full"></div>
+              <BookOpen className="relative h-14 w-14 text-primary" strokeWidth={1.5} />
+            </div>
           </div>
-          <CardTitle className="text-2xl">Create account</CardTitle>
-          <CardDescription>
+          <CardTitle className="text-3xl font-bold">Create account</CardTitle>
+          <CardDescription className="text-base mt-2">
             Sign up to start your reading journey with BookMarked
           </CardDescription>
         </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
+        <CardContent className="pt-0">
+          <form onSubmit={handleSubmit} className="space-y-5">
             <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
+              <Label htmlFor="email" className="text-sm font-medium">Email</Label>
               <Input
                 id="email"
                 type="email"
@@ -56,10 +59,11 @@ export default function SignUpPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="you@example.com"
+                className="h-11"
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="password">Password</Label>
+              <Label htmlFor="password" className="text-sm font-medium">Password</Label>
               <Input
                 id="password"
                 type="password"
@@ -67,12 +71,18 @@ export default function SignUpPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Create a password"
+                className="h-11"
               />
-              <p className="text-xs text-muted-foreground">
+              <p className="text-xs text-muted-foreground pt-1">
                 Password must be at least 6 characters and contain both letters and digits.
               </p>
             </div>
-            <Button type="submit" className="w-full" disabled={!!status && status.includes("Creating")}>
+            <Button 
+              type="submit" 
+              size="lg"
+              className="w-full h-11 text-base shadow-md hover:shadow-lg transition-all" 
+              disabled={!!status && status.includes("Creating")}
+            >
               {status && status.includes("Creating") ? (
                 <>
                   <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
@@ -90,7 +100,7 @@ export default function SignUpPage() {
           <div className="mt-6">
             <Separator />
             <div className="mt-4 text-center">
-              <Button variant="link" asChild className="text-sm">
+              <Button variant="link" asChild className="text-sm font-medium">
                 <Link href="/sign-in">
                   <LogIn className="h-4 w-4 mr-2" />
                   Already have an account? Sign in
@@ -100,13 +110,13 @@ export default function SignUpPage() {
           </div>
           
           {status && (
-            <div className="mt-4 p-3 rounded-md bg-muted">
-              <p className="text-sm text-muted-foreground">{status}</p>
+            <div className="mt-4 p-4 rounded-lg bg-muted/50 border border-muted-foreground/20">
+              <p className="text-sm text-foreground">{status}</p>
             </div>
           )}
           
           <div className="mt-6 text-center">
-            <Button variant="ghost" asChild>
+            <Button variant="ghost" asChild className="text-sm">
               <Link href="/">← Back to home</Link>
             </Button>
           </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index bc9b743..0914817 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -92,7 +92,7 @@
   --font-sans: Geist, sans-serif;
   --font-serif: "Lora", Georgia, serif;
   --font-mono: "Fira Code", "Courier New", monospace;
-  --radius: 0.5rem;
+  --radius: 0.75rem;
   --shadow-x: 1px;
   --shadow-y: 2px;
   --shadow-blur: 5px;
@@ -147,7 +147,7 @@
   --font-sans: Geist, sans-serif;
   --font-serif: "Lora", Georgia, serif;
   --font-mono: "Fira Code", "Courier New", monospace;
-  --radius: 0.5rem;
+  --radius: 0.75rem;
   --shadow-x: 1px;
   --shadow-y: 2px;
   --shadow-blur: 5px;
@@ -170,7 +170,12 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-family: var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+    letter-spacing: -0.011em;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    letter-spacing: -0.022em;
   }
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3b4a37c..a53c21d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,14 +1,19 @@
 import type { Metadata } from "next";
-import { Instrument_Sans } from "next/font/google";
+import { Inter, Literata } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Header } from "@/components/header";
 import { ServiceWorkerProvider } from "@/components/service-worker-provider";
 
-const instrumentSans = Instrument_Sans({
-  variable: "--font-instrument-sans",
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+  display: "swap",
+});
+
+const literata = Literata({
+  variable: "--font-literata",
   subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
   display: "swap",
 });
 
@@ -32,12 +37,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${instrumentSans.className} ${instrumentSans.variable} antialiased`} suppressHydrationWarning>
+      <body className={`${inter.className} ${inter.variable} ${literata.variable} antialiased`} suppressHydrationWarning>
         <ThemeProvider>
           <ServiceWorkerProvider>
             <div className="min-h-screen bg-background">
               <Header />
-              <main className="container mx-auto px-3 sm:px-6 lg:px-8 py-3 sm:py-6">
+              <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
                 {children}
               </main>
             </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5d4d3a0..cc32a27 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,29 +28,32 @@ export default function Home() {
   return (
     <div className="min-h-screen">
       {/* Hero Section */}
-      <section className="relative py-20 md:py-32">
-        <div className="absolute inset-0 -z-10 bg-[radial-gradient(45%_45%_at_50%_50%,hsl(var(--primary)/0.1)_0%,transparent_100%)]"></div>
+      <section className="relative py-24 md:py-40">
+        <div className="absolute inset-0 -z-10 bg-[radial-gradient(50%_50%_at_50%_50%,hsl(var(--primary)/0.12)_0%,transparent_100%)]"></div>
         
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center space-y-8">
+          <div className="text-center space-y-10">
             <div className="inline-flex items-center justify-center">
-              <BookOpen className="h-16 w-16 md:h-20 md:w-20 text-primary" strokeWidth={1.5} />
+              <div className="relative">
+                <div className="absolute inset-0 bg-primary/20 blur-2xl rounded-full"></div>
+                <BookOpen className="relative h-16 w-16 md:h-24 md:w-24 text-primary" strokeWidth={1.5} />
+              </div>
             </div>
             
-            <div className="space-y-4">
-              <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight">
+            <div className="space-y-6">
+              <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight bg-gradient-to-br from-foreground to-foreground/70 bg-clip-text text-transparent">
                 BookMarked
               </h1>
-              <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto">
-                Your personal digital library. Read your EPUB and PDF books anywhere. Sync your progress across all devices seamlessly.
+              <p className="text-lg sm:text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+                Your personal digital library. Read your books anywhere, sync your progress seamlessly across all devices.
               </p>
             </div>
 
-            <div className="flex justify-center pt-4">
-              <Button asChild size="lg" className="text-base px-8 h-12">
+            <div className="flex justify-center pt-6">
+              <Button asChild size="lg" className="text-base px-10 h-12 shadow-lg hover:shadow-xl transition-all">
                 <Link href={signedIn ? "/library" : "/sign-in"}>
                   {signedIn ? "Open Library" : "Get Started"}
-                  <ArrowRight className="ml-2 h-4 w-4" />
+                  <ArrowRight className="ml-2 h-5 w-5" />
                 </Link>
               </Button>
             </div>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 3106849..2a748cf 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -54,31 +54,31 @@ export function Header() {
 
   if (!mounted) {
     return (
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container flex h-12 items-center justify-between px-3 sm:px-6 lg:px-8 gap-2">
-          <div className="flex items-center gap-2 min-w-0">
-            <Link href="/" className="flex items-center gap-2 cursor-pointer min-w-0">
-              <div className="h-5 w-5 bg-muted rounded" />
-              <span className="text-lg font-bold truncate">BookMarked</span>
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-sm">
+        <div className="container flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8 gap-3">
+          <div className="flex items-center gap-4 min-w-0">
+            <Link href="/" className="flex items-center gap-2.5 cursor-pointer min-w-0 group">
+              <div className="h-6 w-6 bg-muted rounded" />
+              <span className="text-xl font-semibold truncate">BookMarked</span>
             </Link>
-            <Separator orientation="vertical" className="h-4 hidden xs:block" />
+            <Separator orientation="vertical" className="h-5 hidden sm:block" />
             <nav className="hidden sm:flex items-center gap-1 flex-wrap">
-              <Button variant="ghost" size="sm" asChild>
-                <Link href="/" className="flex items-center space-x-1">
-                  <div className="h-3 w-3 bg-muted rounded" />
-                  <span className="text-sm">Home</span>
+              <Button variant="ghost" size="default" className="h-9" asChild>
+                <Link href="/" className="flex items-center space-x-2">
+                  <div className="h-4 w-4 bg-muted rounded" />
+                  <span>Home</span>
                 </Link>
               </Button>
-              <Button variant="ghost" size="sm" asChild>
-                <Link href="/library" className="flex items-center space-x-1">
-                  <div className="h-3 w-3 bg-muted rounded" />
-                  <span className="text-sm">Library</span>
+              <Button variant="ghost" size="default" className="h-9" asChild>
+                <Link href="/library" className="flex items-center space-x-2">
+                  <div className="h-4 w-4 bg-muted rounded" />
+                  <span>Library</span>
                 </Link>
               </Button>
             </nav>
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-8 w-8 bg-muted rounded" />
+            <div className="h-9 w-9 bg-muted rounded" />
           </div>
         </div>
       </header>
@@ -86,43 +86,45 @@ export function Header() {
   }
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-12 items-center justify-between px-3 sm:px-6 lg:px-8 gap-2">
-        <div className="flex items-center gap-2 min-w-0">
-          <Link href="/" className="flex items-center gap-2 cursor-pointer min-w-0">
-            <BookOpen className="h-5 w-5 text-primary" />
-            <span className="text-lg font-bold truncate">BookMarked</span>
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-sm">
+      <div className="container flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8 gap-3">
+        <div className="flex items-center gap-4 min-w-0">
+          <Link href="/" className="flex items-center gap-2.5 cursor-pointer min-w-0 group transition-colors">
+            <BookOpen className="h-6 w-6 text-primary group-hover:text-primary/80 transition-colors" strokeWidth={2} />
+            <span className="text-xl font-semibold truncate group-hover:text-primary/90 transition-colors">BookMarked</span>
           </Link>
-          <Separator orientation="vertical" className="h-4 hidden xs:block" />
+          <Separator orientation="vertical" className="h-5 hidden sm:block" />
           <nav className="hidden sm:flex items-center gap-1 flex-wrap">
-            <Button variant="ghost" size="sm" asChild>
-              <Link href="/" className="flex items-center space-x-1 cursor-pointer">
-                <Home className="h-3 w-3" />
-                <span className="text-sm">Home</span>
+            <Button variant="ghost" size="default" className="h-9" asChild>
+              <Link href="/" className="flex items-center space-x-2 cursor-pointer">
+                <Home className="h-4 w-4" />
+                <span>Home</span>
               </Link>
             </Button>
-            <Button variant="ghost" size="sm" asChild>
-              <Link href="/library" className="flex items-center space-x-1">
-                <Library className="h-3 w-3" />
-                <span className="text-sm">Library</span>
+            <Button variant="ghost" size="default" className="h-9" asChild>
+              <Link href="/library" className="flex items-center space-x-2">
+                <Library className="h-4 w-4" />
+                <span>Library</span>
               </Link>
             </Button>
           </nav>
         </div>
         <div className="flex items-center gap-2">
           {!isOnline && (
-            <span className="rounded px-2 py-0.5 text-xs bg-yellow-500/15 text-yellow-500 border border-yellow-500/30">Offline</span>
+            <span className="rounded-full px-3 py-1 text-xs font-medium bg-yellow-500/15 text-yellow-600 dark:text-yellow-500 border border-yellow-500/30">
+              Offline
+            </span>
           )}
           {signedIn ? (
-            <Button variant="ghost" size="sm" onClick={handleSignOut} className="flex items-center space-x-1 cursor-pointer">
-              <LogOut className="h-3 w-3" />
-              <span className="text-sm">Sign Out</span>
+            <Button variant="ghost" size="default" className="h-9" onClick={handleSignOut}>
+              <LogOut className="h-4 w-4 mr-2" />
+              <span>Sign Out</span>
             </Button>
           ) : (
-            <Button variant="ghost" size="sm" asChild className="flex items-center space-x-1">
+            <Button variant="ghost" size="default" className="h-9" asChild>
               <Link href="/sign-in">
-                <LogIn className="h-3 w-3" />
-                <span className="text-sm">Sign In</span>
+                <LogIn className="h-4 w-4 mr-2" />
+                <span>Sign In</span>
               </Link>
             </Button>
           )}
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index 202a988..2acacfb 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -18,20 +18,23 @@ export function ThemeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <Button variant="ghost" size="icon" className="h-9 w-9">
+          <Sun className="h-[1.1rem] w-[1.1rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.1rem] w-[1.1rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
+      <DropdownMenuContent align="end" className="min-w-[120px]">
+        <DropdownMenuItem onClick={() => setTheme("light")} className="cursor-pointer">
+          <Sun className="h-4 w-4 mr-2" />
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
+        <DropdownMenuItem onClick={() => setTheme("dark")} className="cursor-pointer">
+          <Moon className="h-4 w-4 mr-2" />
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
+        <DropdownMenuItem onClick={() => setTheme("system")} className="cursor-pointer">
+          <span className="h-4 w-4 mr-2 flex items-center justify-center text-xs">⚙</span>
           System
         </DropdownMenuItem>
       </DropdownMenuContent>