diff --git a/src/app/(app)/library/page.tsx b/src/app/(app)/library/page.tsx
index ba1ba62..6452b46 100644
--- a/src/app/(app)/library/page.tsx
+++ b/src/app/(app)/library/page.tsx
@@ -147,11 +147,14 @@ 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] animate-fade-in">
+        <Card className="w-full max-w-md shadow-xl border-muted">
+          <CardContent className="p-16 text-center">
+            <div className="relative inline-flex mb-6">
+              <div className="absolute inset-0 bg-primary/20 rounded-full blur-xl"></div>
+              <div className="relative animate-spin rounded-full h-12 w-12 border-4 border-primary/20 border-t-primary"></div>
+            </div>
+            <p className="text-lg text-muted-foreground font-medium">{loadingMessage}</p>
           </CardContent>
         </Card>
       </div>
@@ -160,12 +163,24 @@ 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 animate-fade-in">
+        <Card className="w-full max-w-md mx-auto shadow-xl border-muted">
+          <CardContent className="p-16 text-center space-y-6">
+            <div className="relative inline-flex">
+              <div className="absolute inset-0 bg-primary/20 rounded-full blur-xl"></div>
+              <div className="relative bg-primary/10 p-6 rounded-2xl border border-primary/20">
+                <BookOpen className="h-16 w-16 text-primary" strokeWidth={1.5} />
+              </div>
+            </div>
+            <div className="space-y-3">
+              <h1 className="text-2xl font-bold">Sign in required</h1>
+              <p className="text-muted-foreground">Please sign in to view your library</p>
+            </div>
+            <Button 
+              onClick={() => router.push("/sign-in")} 
+              size="lg"
+              className="h-11 px-8 shadow-lg hover:shadow-xl smooth-transition"
+            >
               Sign In
             </Button>
           </CardContent>
@@ -175,10 +190,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 animate-fade-in">
+      <div className="space-y-2">
+        <h1 className="text-4xl font-bold tracking-tight">My Library</h1>
+        <p className="text-lg text-muted-foreground">Manage and read your digital book collection</p>
       </div>
       
       <UploadForm onUploaded={refreshBooks} />
@@ -191,54 +206,69 @@ 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 border-2 animate-fade-in-up animation-delay-200">
+        <CardContent className="p-16 text-center">
+          <div className="relative inline-flex mb-6">
+            <div className="absolute inset-0 bg-primary/10 rounded-full blur-xl"></div>
+            <div className="relative bg-muted p-6 rounded-full">
+              <BookOpen className="h-16 w-16 text-muted-foreground" strokeWidth={1.5} />
+            </div>
+          </div>
+          <h3 className="text-xl font-semibold mb-2">Your library is empty</h3>
+          <p className="text-muted-foreground max-w-md mx-auto">
+            Upload a PDF to get started with your digital library. EPUB support coming soon!
+          </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">
-      {books.map((b) => (
-        <Card key={b.id} className="group hover:shadow-lg transition-all duration-200 hover:-translate-y-1">
+    <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 lg:gap-6">
+      {books.map((b, index) => (
+        <Card 
+          key={b.id} 
+          className="group hover:shadow-2xl smooth-transition hover:-translate-y-2 border-muted hover:border-primary/20 animate-scale-in" 
+          style={{ animationDelay: `${index * 50}ms` }}
+        >
           <CardContent className="p-0">
-            <div className="aspect-[3/4] bg-muted rounded-t-lg relative overflow-hidden">
+            <div className="aspect-[2/3] 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 smooth-transition"
                   />
                 ) : (
-                  <div className="w-full h-full flex items-center justify-center">
+                  <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/5 to-accent/5">
                     {b.format === 'pdf' ? (
-                      <FileText className="h-12 w-12 text-muted-foreground" />
+                      <FileText className="h-16 w-16 text-muted-foreground/40 group-hover:text-primary/60 smooth-transition" strokeWidth={1.5} />
                     ) : (
-                      <FileImage className="h-12 w-12 text-muted-foreground" />
+                      <FileImage className="h-16 w-16 text-muted-foreground/40 group-hover:text-primary/60 smooth-transition" strokeWidth={1.5} />
                     )}
                   </div>
                 )}
+                
+                {/* Overlay gradient on hover */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 smooth-transition"></div>
               </Link>
+              
               <Badge 
                 variant="secondary" 
-                className="absolute top-2 right-2 text-[10px] sm:text-xs"
+                className="absolute top-2 right-2 text-[10px] sm:text-xs backdrop-blur-sm bg-background/80 border-0 shadow-lg"
               >
                 {b.format?.toUpperCase()}
               </Badge>
               
-              {/* Delete button - always visible */}
-              <div className="absolute top-2 left-2">
+              {/* Delete button */}
+              <div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 smooth-transition">
                 <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 hover:shadow-xl"
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
@@ -264,9 +294,9 @@ function BookList({ books, onDeleteBook }: { books: BookRow[]; onDeleteBook: (id
                 </AlertDialog>
               </div>
             </div>
-            <div className="p-2 sm:p-3">
-              <Link href={`/read/${b.id}`} className="block cursor-pointer">
-                <h3 className="font-medium truncate text-sm mb-1 hover:text-primary transition-colors">
+            <div className="p-3 sm:p-4">
+              <Link href={`/read/${b.id}`} className="block cursor-pointer space-y-1">
+                <h3 className="font-semibold truncate text-sm group-hover:text-primary smooth-transition">
                   {b.title ?? "Untitled"}
                 </h3>
                 <p className="text-xs text-muted-foreground truncate">
@@ -319,21 +349,23 @@ 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="border-muted shadow-lg animate-fade-in-up">
+      <CardHeader className="space-y-3">
+        <CardTitle className="flex items-center gap-2 text-2xl">
+          <div className="p-2 bg-primary/10 rounded-lg">
+            <Upload className="h-5 w-5 text-primary" />
+          </div>
           <span>Upload a Book</span>
         </CardTitle>
-        <CardDescription>
-          Upload PDF files to add them to your library. EPUB support coming soon!
+        <CardDescription className="text-base">
+          Add PDF files to your library. EPUB support coming soon!
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor={fileInputId}>Choose file</Label>
-            <div className="flex items-center gap-3">
+        <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 flex-col sm:flex-row items-start sm:items-center gap-3">
               <Input 
                 id={fileInputId} 
                 type="file" 
@@ -345,20 +377,36 @@ function UploadForm({ onUploaded }: { onUploaded: () => void }) {
                 type="button" 
                 variant="outline" 
                 onClick={() => document.getElementById(fileInputId)?.click()}
-                className="flex items-center space-x-2 cursor-pointer"
+                className="flex items-center gap-2 cursor-pointer h-11 border-2 border-dashed hover:border-primary smooth-transition hover:bg-primary/5"
               >
                 <Upload className="h-4 w-4" />
-                <span>Choose file</span>
+                <span className="font-medium">Choose file</span>
               </Button>
-              <span className="text-sm text-muted-foreground truncate max-w-[50%]">
-                {file?.name ?? "No file selected"}
-              </span>
+              <div className="flex items-center gap-2 min-w-0 flex-1">
+                {file ? (
+                  <div className="flex items-center gap-2 px-3 py-2 bg-primary/10 rounded-lg border border-primary/20 min-w-0 flex-1">
+                    <FileText className="h-4 w-4 text-primary flex-shrink-0" />
+                    <span className="text-sm font-medium truncate">{file.name}</span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setFile(null)}
+                      className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive ml-auto flex-shrink-0"
+                    >
+                      ×
+                    </Button>
+                  </div>
+                ) : (
+                  <span className="text-sm text-muted-foreground">No file selected</span>
+                )}
+              </div>
             </div>
           </div>
           <Button 
             disabled={!file || busy} 
             type="submit" 
-            className="w-full cursor-pointer"
+            className="w-full cursor-pointer h-11 text-base font-medium shadow-lg hover:shadow-xl smooth-transition"
           >
             {busy ? (
               <>
@@ -367,7 +415,7 @@ function UploadForm({ onUploaded }: { onUploaded: () => void }) {
               </>
             ) : (
               <>
-                <Upload className="h-4 w-4 mr-2" />
+                <Upload className="h-5 w-5 mr-2" />
                 Upload Book
               </>
             )}
diff --git a/src/app/(auth)/sign-in/page.tsx b/src/app/(auth)/sign-in/page.tsx
index d7955a7..6f09f25 100644
--- a/src/app/(auth)/sign-in/page.tsx
+++ b/src/app/(auth)/sign-in/page.tsx
@@ -70,26 +70,39 @@ 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-8rem)] flex items-center justify-center py-8 relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl"></div>
+      </div>
+
+      <Card className="w-full max-w-md shadow-xl border-muted animate-scale-in">
+        <CardHeader className="text-center space-y-4 pb-8">
+          <div className="flex justify-center">
+            <div className="relative">
+              <div className="absolute inset-0 bg-primary/20 rounded-full blur-xl"></div>
+              <div className="relative bg-primary/10 p-4 rounded-2xl border border-primary/20">
+                <BookOpen className="h-12 w-12 text-primary" strokeWidth={1.5} />
+              </div>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <CardTitle className="text-3xl font-bold">
+              {mode === "sign-in" ? "Welcome back" : "Get started"}
+            </CardTitle>
+            <CardDescription className="text-base">
+              {mode === "sign-in" 
+                ? "Sign in to access your library" 
+                : "Create an account to start your reading journey"
+              }
+            </CardDescription>
           </div>
-          <CardTitle className="text-2xl">
-            {mode === "sign-in" ? "Welcome back" : "Create account"}
-          </CardTitle>
-          <CardDescription>
-            {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="space-y-6">
+          <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 +110,11 @@ export default function SignInPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="you@example.com"
+                className="h-11 smooth-transition focus:border-primary"
               />
             </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 +122,19 @@ export default function SignInPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Enter your password"
+                className="h-11 smooth-transition focus:border-primary"
               />
               {mode === "sign-up" && (
-                <p className="text-xs text-muted-foreground">
+                <p className="text-xs text-muted-foreground leading-relaxed">
                   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 font-medium shadow-lg hover:shadow-xl smooth-transition" 
+              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>
@@ -125,12 +144,12 @@ export default function SignInPage() {
                 <>
                   {mode === "sign-in" ? (
                     <>
-                      <LogIn className="h-4 w-4 mr-2" />
+                      <LogIn className="h-5 w-5 mr-2" />
                       Sign in
                     </>
                   ) : (
                     <>
-                      <UserPlus className="h-4 w-4 mr-2" />
+                      <UserPlus className="h-5 w-5 mr-2" />
                       Create account
                     </>
                   )}
@@ -139,30 +158,50 @@ export default function SignInPage() {
             </Button>
           </form>
           
-          <div className="mt-6">
-            <Separator />
-            <div className="mt-4 text-center">
-              {mode === "sign-in" ? (
-                <Button variant="link" onClick={() => setMode("sign-up")} className="text-sm">
-                  Don&apos;t have an account? Create one
-                </Button>
-              ) : (
-                <Button variant="link" onClick={() => setMode("sign-in")} className="text-sm">
-                  Already have an account? Sign in
-                </Button>
-              )}
+          <div className="relative">
+            <Separator className="my-6" />
+            <div className="absolute inset-0 flex items-center justify-center">
+              <span className="bg-card px-2 text-xs text-muted-foreground">OR</span>
             </div>
           </div>
           
+          <div className="text-center">
+            {mode === "sign-in" ? (
+              <Button 
+                variant="ghost" 
+                onClick={() => {
+                  setMode("sign-up");
+                  setStatus(null);
+                }} 
+                className="text-sm font-medium smooth-transition hover:bg-primary/10"
+              >
+                Don&apos;t have an account? <span className="text-primary ml-1">Create one</span>
+              </Button>
+            ) : (
+              <Button 
+                variant="ghost" 
+                onClick={() => {
+                  setMode("sign-in");
+                  setStatus(null);
+                }} 
+                className="text-sm font-medium smooth-transition hover:bg-primary/10"
+              >
+                Already have an account? <span className="text-primary ml-1">Sign in</span>
+              </Button>
+            )}
+          </div>
+          
           {status && (
-            <div className="mt-4 p-3 rounded-md bg-muted">
-              <p className="text-sm text-muted-foreground">{status}</p>
+            <div className="p-4 rounded-lg bg-muted/50 border border-muted animate-fade-in">
+              <p className="text-sm text-center">{status}</p>
             </div>
           )}
           
-          <div className="mt-6 text-center">
-            <Button variant="ghost" asChild>
-              <Link href="/">← Back to home</Link>
+          <div className="text-center pt-2">
+            <Button variant="ghost" asChild className="smooth-transition">
+              <Link href="/" className="text-sm">
+                ← Back to home
+              </Link>
             </Button>
           </div>
         </CardContent>
diff --git a/src/app/(auth)/sign-up/page.tsx b/src/app/(auth)/sign-up/page.tsx
index 33655ed..0b0d5b2 100644
--- a/src/app/(auth)/sign-up/page.tsx
+++ b/src/app/(auth)/sign-up/page.tsx
@@ -34,21 +34,34 @@ 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-8rem)] flex items-center justify-center py-8 relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl"></div>
+      </div>
+
+      <Card className="w-full max-w-md shadow-xl border-muted animate-scale-in">
+        <CardHeader className="text-center space-y-4 pb-8">
+          <div className="flex justify-center">
+            <div className="relative">
+              <div className="absolute inset-0 bg-primary/20 rounded-full blur-xl"></div>
+              <div className="relative bg-primary/10 p-4 rounded-2xl border border-primary/20">
+                <BookOpen className="h-12 w-12 text-primary" strokeWidth={1.5} />
+              </div>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <CardTitle className="text-3xl font-bold">Get started</CardTitle>
+            <CardDescription className="text-base">
+              Create an account to start your reading journey
+            </CardDescription>
           </div>
-          <CardTitle className="text-2xl">Create account</CardTitle>
-          <CardDescription>
-            Sign up to start your reading journey with BookMarked
-          </CardDescription>
         </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
+        <CardContent className="space-y-6">
+          <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 +69,11 @@ export default function SignUpPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="you@example.com"
+                className="h-11 smooth-transition focus:border-primary"
               />
             </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 +81,17 @@ export default function SignUpPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Create a password"
+                className="h-11 smooth-transition focus:border-primary"
               />
-              <p className="text-xs text-muted-foreground">
+              <p className="text-xs text-muted-foreground leading-relaxed">
                 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" 
+              className="w-full h-11 text-base font-medium shadow-lg hover:shadow-xl smooth-transition" 
+              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>
@@ -80,34 +99,43 @@ export default function SignUpPage() {
                 </>
               ) : (
                 <>
-                  <UserPlus className="h-4 w-4 mr-2" />
+                  <UserPlus className="h-5 w-5 mr-2" />
                   Create account
                 </>
               )}
             </Button>
           </form>
           
-          <div className="mt-6">
-            <Separator />
-            <div className="mt-4 text-center">
-              <Button variant="link" asChild className="text-sm">
-                <Link href="/sign-in">
-                  <LogIn className="h-4 w-4 mr-2" />
-                  Already have an account? Sign in
-                </Link>
-              </Button>
+          <div className="relative">
+            <Separator className="my-6" />
+            <div className="absolute inset-0 flex items-center justify-center">
+              <span className="bg-card px-2 text-xs text-muted-foreground">OR</span>
             </div>
           </div>
           
+          <div className="text-center">
+            <Button 
+              variant="ghost" 
+              asChild 
+              className="text-sm font-medium smooth-transition hover:bg-primary/10"
+            >
+              <Link href="/sign-in" className="cursor-pointer">
+                Already have an account? <span className="text-primary ml-1">Sign in</span>
+              </Link>
+            </Button>
+          </div>
+          
           {status && (
-            <div className="mt-4 p-3 rounded-md bg-muted">
-              <p className="text-sm text-muted-foreground">{status}</p>
+            <div className="p-4 rounded-lg bg-muted/50 border border-muted animate-fade-in">
+              <p className="text-sm text-center">{status}</p>
             </div>
           )}
           
-          <div className="mt-6 text-center">
-            <Button variant="ghost" asChild>
-              <Link href="/">← Back to home</Link>
+          <div className="text-center pt-2">
+            <Button variant="ghost" asChild className="smooth-transition">
+              <Link href="/" className="text-sm">
+                ← Back to home
+              </Link>
             </Button>
           </div>
         </CardContent>
diff --git a/src/app/globals.css b/src/app/globals.css
index bc9b743..4aa971d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -37,9 +37,9 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
+  --font-sans: var(--font-instrument-sans);
+  --font-serif: var(--font-playfair);
+  --font-mono: ui-monospace, monospace;
 
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -57,121 +57,168 @@
 }
 
 :root {
-  --background: oklch(0.9777 0.0041 301.4256);
-  --foreground: oklch(0.3651 0.0325 287.0807);
-  --card: oklch(1.0000 0 0);
-  --card-foreground: oklch(0.3651 0.0325 287.0807);
-  --popover: oklch(1.0000 0 0);
-  --popover-foreground: oklch(0.3651 0.0325 287.0807);
-  --primary: oklch(0.6104 0.0767 299.7335);
-  --primary-foreground: oklch(0.9777 0.0041 301.4256);
-  --secondary: oklch(0.8957 0.0265 300.2416);
-  --secondary-foreground: oklch(0.3651 0.0325 287.0807);
-  --muted: oklch(0.8906 0.0139 299.7754);
-  --muted-foreground: oklch(0.5288 0.0375 290.7895);
-  --accent: oklch(0.7889 0.0802 359.9375);
-  --accent-foreground: oklch(0.3394 0.0441 1.7583);
-  --destructive: oklch(0.6332 0.1578 22.6734);
-  --destructive-foreground: oklch(0.9777 0.0041 301.4256);
-  --border: oklch(0.8447 0.0226 300.1421);
-  --input: oklch(0.9329 0.0124 301.2783);
-  --ring: oklch(0.6104 0.0767 299.7335);
-  --chart-1: oklch(0.6104 0.0767 299.7335);
-  --chart-2: oklch(0.7889 0.0802 359.9375);
-  --chart-3: oklch(0.7321 0.0749 169.8670);
-  --chart-4: oklch(0.8540 0.0882 76.8292);
-  --chart-5: oklch(0.7857 0.0645 258.0839);
-  --sidebar: oklch(0.9554 0.0082 301.3541);
-  --sidebar-foreground: oklch(0.3651 0.0325 287.0807);
-  --sidebar-primary: oklch(0.6104 0.0767 299.7335);
-  --sidebar-primary-foreground: oklch(0.9777 0.0041 301.4256);
-  --sidebar-accent: oklch(0.7889 0.0802 359.9375);
-  --sidebar-accent-foreground: oklch(0.3394 0.0441 1.7583);
-  --sidebar-border: oklch(0.8719 0.0198 302.1690);
-  --sidebar-ring: oklch(0.6104 0.0767 299.7335);
-  --font-sans: Geist, sans-serif;
-  --font-serif: "Lora", Georgia, serif;
-  --font-mono: "Fira Code", "Courier New", monospace;
-  --radius: 0.5rem;
-  --shadow-x: 1px;
-  --shadow-y: 2px;
-  --shadow-blur: 5px;
-  --shadow-spread: 1px;
-  --shadow-opacity: 0.06;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
-  --shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
-  --shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
-  --shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
-  --shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
-  --shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
-  --shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
-  --shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
+  /* Warm, cozy cream background */
+  --background: oklch(0.98 0.008 85);
+  --foreground: oklch(0.25 0.02 40);
+  
+  /* Soft warm white cards */
+  --card: oklch(0.995 0.005 80);
+  --card-foreground: oklch(0.25 0.02 40);
+  --popover: oklch(0.995 0.005 80);
+  --popover-foreground: oklch(0.25 0.02 40);
+  
+  /* Warm terracotta/rust primary - cozy and inviting */
+  --primary: oklch(0.58 0.15 35);
+  --primary-foreground: oklch(0.98 0.008 85);
+  
+  /* Soft peach secondary */
+  --secondary: oklch(0.88 0.04 60);
+  --secondary-foreground: oklch(0.25 0.02 40);
+  
+  /* Warm gray muted tones */
+  --muted: oklch(0.92 0.01 70);
+  --muted-foreground: oklch(0.48 0.02 50);
+  
+  /* Warm amber accent */
+  --accent: oklch(0.75 0.12 70);
+  --accent-foreground: oklch(0.98 0.008 85);
+  
+  /* Soft coral destructive */
+  --destructive: oklch(0.6 0.18 25);
+  --destructive-foreground: oklch(0.98 0.008 85);
+  
+  /* Subtle warm borders */
+  --border: oklch(0.88 0.015 75);
+  --input: oklch(0.94 0.01 75);
+  --ring: oklch(0.58 0.15 35);
+  
+  /* Chart colors - warm palette */
+  --chart-1: oklch(0.58 0.15 35);
+  --chart-2: oklch(0.75 0.12 70);
+  --chart-3: oklch(0.65 0.15 150);
+  --chart-4: oklch(0.7 0.12 280);
+  --chart-5: oklch(0.62 0.15 320);
+  
+  --sidebar: oklch(0.96 0.008 80);
+  --sidebar-foreground: oklch(0.25 0.02 40);
+  --sidebar-primary: oklch(0.58 0.15 35);
+  --sidebar-primary-foreground: oklch(0.98 0.008 85);
+  --sidebar-accent: oklch(0.75 0.12 70);
+  --sidebar-accent-foreground: oklch(0.25 0.02 40);
+  --sidebar-border: oklch(0.88 0.015 75);
+  --sidebar-ring: oklch(0.58 0.15 35);
+  
+  --radius: 0.75rem;
+  
+  /* Enhanced shadows for depth */
+  --shadow-color: 25 40% 15%;
+  --shadow-2xs: 0 1px 2px 0 hsl(var(--shadow-color) / 0.05);
+  --shadow-xs: 0 1px 3px 0 hsl(var(--shadow-color) / 0.07);
+  --shadow-sm: 0 2px 4px -1px hsl(var(--shadow-color) / 0.08), 0 1px 2px 0 hsl(var(--shadow-color) / 0.06);
+  --shadow: 0 4px 6px -1px hsl(var(--shadow-color) / 0.1), 0 2px 4px -1px hsl(var(--shadow-color) / 0.06);
+  --shadow-md: 0 6px 12px -2px hsl(var(--shadow-color) / 0.12), 0 3px 6px -1px hsl(var(--shadow-color) / 0.08);
+  --shadow-lg: 0 10px 20px -3px hsl(var(--shadow-color) / 0.15), 0 4px 8px -2px hsl(var(--shadow-color) / 0.1);
+  --shadow-xl: 0 20px 30px -5px hsl(var(--shadow-color) / 0.18), 0 8px 16px -3px hsl(var(--shadow-color) / 0.12);
+  --shadow-2xl: 0 25px 50px -12px hsl(var(--shadow-color) / 0.25);
 }
 
 .dark {
-  --background: oklch(0.2166 0.0215 292.8474);
-  --foreground: oklch(0.9053 0.0245 293.5570);
-  --card: oklch(0.2544 0.0301 292.7315);
-  --card-foreground: oklch(0.9053 0.0245 293.5570);
-  --popover: oklch(0.2544 0.0301 292.7315);
-  --popover-foreground: oklch(0.9053 0.0245 293.5570);
-  --primary: oklch(0.7058 0.0777 302.0489);
-  --primary-foreground: oklch(0.2166 0.0215 292.8474);
-  --secondary: oklch(0.4604 0.0472 295.5578);
-  --secondary-foreground: oklch(0.9053 0.0245 293.5570);
-  --muted: oklch(0.2560 0.0320 294.8380);
-  --muted-foreground: oklch(0.6974 0.0282 300.0614);
-  --accent: oklch(0.3181 0.0321 308.6149);
-  --accent-foreground: oklch(0.8391 0.0692 2.6681);
-  --destructive: oklch(0.6875 0.1420 21.4566);
-  --destructive-foreground: oklch(0.2166 0.0215 292.8474);
-  --border: oklch(0.3063 0.0359 293.3367);
-  --input: oklch(0.2847 0.0346 291.2726);
-  --ring: oklch(0.7058 0.0777 302.0489);
-  --chart-1: oklch(0.7058 0.0777 302.0489);
-  --chart-2: oklch(0.8391 0.0692 2.6681);
-  --chart-3: oklch(0.7321 0.0749 169.8670);
-  --chart-4: oklch(0.8540 0.0882 76.8292);
-  --chart-5: oklch(0.7857 0.0645 258.0839);
-  --sidebar: oklch(0.1985 0.0200 293.6639);
-  --sidebar-foreground: oklch(0.9053 0.0245 293.5570);
-  --sidebar-primary: oklch(0.7058 0.0777 302.0489);
-  --sidebar-primary-foreground: oklch(0.2166 0.0215 292.8474);
-  --sidebar-accent: oklch(0.3181 0.0321 308.6149);
-  --sidebar-accent-foreground: oklch(0.8391 0.0692 2.6681);
-  --sidebar-border: oklch(0.2847 0.0346 291.2726);
-  --sidebar-ring: oklch(0.7058 0.0777 302.0489);
-  --font-sans: Geist, sans-serif;
-  --font-serif: "Lora", Georgia, serif;
-  --font-mono: "Fira Code", "Courier New", monospace;
-  --radius: 0.5rem;
-  --shadow-x: 1px;
-  --shadow-y: 2px;
-  --shadow-blur: 5px;
-  --shadow-spread: 1px;
-  --shadow-opacity: 0.06;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
-  --shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
-  --shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
-  --shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
-  --shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
-  --shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
-  --shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
-  --shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
+  /* Deep warm charcoal background */
+  --background: oklch(0.15 0.01 40);
+  --foreground: oklch(0.95 0.005 70);
+  
+  /* Slightly lighter warm cards */
+  --card: oklch(0.19 0.015 45);
+  --card-foreground: oklch(0.95 0.005 70);
+  --popover: oklch(0.19 0.015 45);
+  --popover-foreground: oklch(0.95 0.005 70);
+  
+  /* Softer warm coral primary */
+  --primary: oklch(0.62 0.13 35);
+  --primary-foreground: oklch(0.98 0.005 85);
+  
+  /* Warm muted orange secondary */
+  --secondary: oklch(0.35 0.05 50);
+  --secondary-foreground: oklch(0.95 0.005 70);
+  
+  /* Dark warm muted tones */
+  --muted: oklch(0.25 0.015 45);
+  --muted-foreground: oklch(0.6 0.01 60);
+  
+  /* Softer amber accent */
+  --accent: oklch(0.65 0.10 70);
+  --accent-foreground: oklch(0.98 0.005 85);
+  
+  /* Softer coral destructive */
+  --destructive: oklch(0.60 0.15 25);
+  --destructive-foreground: oklch(0.98 0.005 85);
+  
+  /* Subtle warm borders */
+  --border: oklch(0.28 0.015 45);
+  --input: oklch(0.25 0.015 45);
+  --ring: oklch(0.62 0.13 35);
+  
+  /* Chart colors - warm dark palette */
+  --chart-1: oklch(0.62 0.13 35);
+  --chart-2: oklch(0.65 0.10 70);
+  --chart-3: oklch(0.65 0.12 150);
+  --chart-4: oklch(0.65 0.10 280);
+  --chart-5: oklch(0.62 0.12 320);
+  
+  --sidebar: oklch(0.16 0.01 40);
+  --sidebar-foreground: oklch(0.95 0.005 70);
+  --sidebar-primary: oklch(0.62 0.13 35);
+  --sidebar-primary-foreground: oklch(0.98 0.005 85);
+  --sidebar-accent: oklch(0.65 0.10 70);
+  --sidebar-accent-foreground: oklch(0.98 0.005 85);
+  --sidebar-border: oklch(0.25 0.015 45);
+  --sidebar-ring: oklch(0.62 0.13 35);
+  
+  --radius: 0.75rem;
+  
+  /* Enhanced shadows for dark mode depth */
+  --shadow-color: 0 0% 0%;
+  --shadow-2xs: 0 1px 2px 0 hsl(var(--shadow-color) / 0.3);
+  --shadow-xs: 0 1px 3px 0 hsl(var(--shadow-color) / 0.35);
+  --shadow-sm: 0 2px 4px -1px hsl(var(--shadow-color) / 0.4), 0 1px 2px 0 hsl(var(--shadow-color) / 0.3);
+  --shadow: 0 4px 6px -1px hsl(var(--shadow-color) / 0.45), 0 2px 4px -1px hsl(var(--shadow-color) / 0.35);
+  --shadow-md: 0 6px 12px -2px hsl(var(--shadow-color) / 0.5), 0 3px 6px -1px hsl(var(--shadow-color) / 0.4);
+  --shadow-lg: 0 10px 20px -3px hsl(var(--shadow-color) / 0.55), 0 4px 8px -2px hsl(var(--shadow-color) / 0.45);
+  --shadow-xl: 0 20px 30px -5px hsl(var(--shadow-color) / 0.6), 0 8px 16px -3px hsl(var(--shadow-color) / 0.5);
+  --shadow-2xl: 0 25px 50px -12px hsl(var(--shadow-color) / 0.7);
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+  
   body {
     @apply bg-background text-foreground;
     font-family: var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;
   }
+  
+  /* Headings use Playfair Display */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-playfair), Georgia, serif;
+    letter-spacing: -0.025em;
+  }
+  
+  /* Ensure all other text elements use Instrument Sans */
+  p, span, a, button, input, textarea, select, label, div, li, td, th {
+    font-family: var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;
+  }
+  
+  /* Override for elements that should use Playfair */
+  .font-serif,
+  [class*="font-playfair"] {
+    font-family: var(--font-playfair), Georgia, serif;
+  }
+  
+  /* Ensure font-sans utility works */
+  .font-sans {
+    font-family: var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif !important;
+  }
 }
 
 /* Custom Scrollbar */
@@ -204,3 +251,213 @@
   scrollbar-width: thin;
   scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--muted));
 }
+
+/* Modern Animations */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Utility classes */
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out forwards;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.6s ease-out forwards;
+}
+
+.animate-scale-in {
+  animation: scale-in 0.5s ease-out forwards;
+}
+
+.animate-slide-in-left {
+  animation: slide-in-left 0.6s ease-out forwards;
+}
+
+.animate-slide-down {
+  animation: slide-down 0.3s ease-out forwards;
+}
+
+.animation-delay-200 {
+  animation-delay: 0.2s;
+}
+
+.animation-delay-400 {
+  animation-delay: 0.4s;
+}
+
+.animation-delay-600 {
+  animation-delay: 0.6s;
+}
+
+.animation-delay-800 {
+  animation-delay: 0.8s;
+}
+
+/* Glassmorphism effect */
+.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.dark .glass {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Smooth transitions */
+.smooth-transition {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Gradient text - fixed for visibility */
+.gradient-text {
+  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  /* Fallback for browsers that don't support background-clip */
+  color: hsl(var(--primary));
+}
+
+/* Visible text - no gradient issues */
+.brand-text {
+  color: hsl(var(--foreground));
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+/* Cozy card effect */
+.cozy-card {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border) / 0.5);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.cozy-card:hover {
+  box-shadow: var(--shadow-xl);
+  transform: translateY(-4px);
+  border-color: hsl(var(--primary) / 0.2);
+}
+
+/* Warm glow effect */
+.warm-glow {
+  position: relative;
+}
+
+.warm-glow::before {
+  content: '';
+  position: absolute;
+  inset: -20px;
+  background: radial-gradient(circle at center, hsl(var(--primary) / 0.15) 0%, transparent 70%);
+  border-radius: 50%;
+  filter: blur(30px);
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.warm-glow:hover::before {
+  opacity: 1;
+}
+
+/* Subtle pattern background */
+.pattern-bg {
+  background-image: 
+    radial-gradient(circle at 20px 20px, hsl(var(--primary) / 0.03) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+/* Frosted glass effect - enhanced */
+.frosted-glass {
+  background: hsl(var(--card) / 0.95);
+  backdrop-filter: blur(12px) saturate(150%);
+  -webkit-backdrop-filter: blur(12px) saturate(150%);
+  border: 1px solid hsl(var(--border) / 0.5);
+  box-shadow: 
+    0 4px 24px 0 hsl(var(--shadow-color) / 0.1),
+    inset 0 1px 0 0 hsl(255 255 255 / 0.05);
+}
+
+/* Responsive text sizes */
+@media (max-width: 640px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1024px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+/* Better focus states */
+*:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Smooth hover transitions for interactive elements */
+button, a, input, select, textarea {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Enhanced button styles */
+button:active {
+  transform: scale(0.98);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3b4a37c..84f33cc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Instrument_Sans } from "next/font/google";
+import { Instrument_Sans, Playfair_Display } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Header } from "@/components/header";
@@ -12,6 +12,13 @@ const instrumentSans = Instrument_Sans({
   display: "swap",
 });
 
+const playfair = Playfair_Display({
+  variable: "--font-playfair",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800", "900"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: process.env.NEXT_PUBLIC_APP_NAME ?? "BookMarked",
   description:
@@ -32,12 +39,15 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${instrumentSans.className} ${instrumentSans.variable} antialiased`} suppressHydrationWarning>
+      <body 
+        className={`${instrumentSans.className} ${instrumentSans.variable} ${playfair.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="px-3 sm:px-6 lg:px-8 py-4 sm:py-6 md:py-8 lg:py-10">
                 {children}
               </main>
             </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5d4d3a0..2a64a03 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,13 +3,16 @@
 import { useEffect, useState } from "react";
 import { supabase } from "@/lib/supabase";
 import { Button } from "@/components/ui/button";
-import { BookOpen, ArrowRight } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { BookOpen, ArrowRight, Sparkles, Cloud, Lock, Zap, Library, Bookmark, Star } from "lucide-react";
 import Link from "next/link";
 
 export default function Home() {
   const [signedIn, setSignedIn] = useState<boolean | null>(null);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
     let active = true;
     (async () => {
       const { data: { user } } = await supabase.auth.getUser();
@@ -27,37 +30,245 @@ 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>
-        
-        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center space-y-8">
-            <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>
-            
-            <div className="space-y-4">
-              <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight">
-                BookMarked
+      {/* Hero Section - Asymmetric Modern Layout */}
+      <section className="relative overflow-hidden">
+        {/* Modern gradient mesh background */}
+        <div className="absolute inset-0 -z-10">
+          <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-gradient-to-br from-primary/20 via-accent/10 to-transparent rounded-full blur-3xl"></div>
+          <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-gradient-to-tr from-accent/15 via-primary/10 to-transparent rounded-full blur-3xl"></div>
+        </div>
+
+        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-20 lg:py-32">
+          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+            {/* Left Content */}
+            <div className={`space-y-8 ${mounted ? 'animate-fade-in-up' : 'opacity-0'}`}>
+              <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 border border-primary/20 rounded-full">
+                <Star className="w-4 h-4 text-primary fill-primary" />
+                <span className="text-sm font-semibold text-primary">Your Digital Reading Companion</span>
+              </div>
+              
+              <h1 className="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold leading-[1.1] tracking-tight">
+                <span className="text-foreground">Read</span>
+                <br />
+                <span className="text-primary">Anywhere,</span>
+                <br />
+                <span className="text-foreground">Anytime</span>
               </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 lg:text-2xl text-muted-foreground leading-relaxed max-w-xl font-sans">
+                Your personal library in the cloud. Organize, read, and sync your books seamlessly across all devices.
               </p>
+
+              <div className="flex flex-col sm:flex-row gap-4 pt-4">
+                <Button 
+                  asChild 
+                  size="lg" 
+                  className="text-lg px-8 h-14 shadow-xl hover:shadow-2xl hover:shadow-primary/20 smooth-transition group font-bold rounded-2xl"
+                >
+                  <Link href={signedIn ? "/library" : "/sign-in"}>
+                    {signedIn ? "Open Library" : "Start Reading Free"}
+                    <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-2 smooth-transition" />
+                  </Link>
+                </Button>
+                <Button 
+                  asChild 
+                  variant="outline" 
+                  size="lg" 
+                  className="text-lg px-8 h-14 border-2 hover:bg-muted/50 smooth-transition font-semibold rounded-2xl"
+                >
+                  <Link href="#features">
+                    Learn More
+                  </Link>
+                </Button>
+              </div>
+
+              {/* Features List */}
+              <div className="flex flex-wrap gap-6 pt-8 border-t border-border/50">
+                <div className="flex items-center gap-2">
+                  <div className="w-2 h-2 rounded-full bg-primary"></div>
+                  <span className="text-sm font-medium text-muted-foreground">Cloud Syncing</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-2 h-2 rounded-full bg-primary"></div>
+                  <span className="text-sm font-medium text-muted-foreground">Offline Reading</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-2 h-2 rounded-full bg-primary"></div>
+                  <span className="text-sm font-medium text-muted-foreground">Progress Tracking</span>
+                </div>
+              </div>
             </div>
 
-            <div className="flex justify-center pt-4">
-              <Button asChild size="lg" className="text-base px-8 h-12">
-                <Link href={signedIn ? "/library" : "/sign-in"}>
-                  {signedIn ? "Open Library" : "Get Started"}
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </Link>
-              </Button>
+            {/* Right Visual */}
+            <div className={`relative ${mounted ? 'animate-fade-in animation-delay-200' : 'opacity-0'}`}>
+              <div className="relative aspect-square max-w-[600px] mx-auto">
+                {/* Decorative cards */}
+                <div className="absolute inset-0">
+                  <Card className="absolute top-0 right-0 w-3/5 rotate-6 shadow-2xl border-2 hover:rotate-12 smooth-transition">
+                    <CardContent className="p-8 space-y-4">
+                      <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
+                        <BookOpen className="w-8 h-8 text-white" strokeWidth={2.5} />
+                      </div>
+                      <div className="space-y-2">
+                        <div className="h-4 w-3/4 bg-muted rounded"></div>
+                        <div className="h-3 w-full bg-muted/50 rounded"></div>
+                        <div className="h-3 w-2/3 bg-muted/50 rounded"></div>
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  <Card className="absolute bottom-12 left-0 w-3/5 -rotate-6 shadow-2xl border-2 hover:-rotate-12 smooth-transition">
+                    <CardContent className="p-8 space-y-4">
+                      <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-accent to-primary flex items-center justify-center">
+                        <Library className="w-8 h-8 text-white" strokeWidth={2.5} />
+                      </div>
+                      <div className="space-y-2">
+                        <div className="h-4 w-3/4 bg-muted rounded"></div>
+                        <div className="h-3 w-full bg-muted/50 rounded"></div>
+                        <div className="h-3 w-2/3 bg-muted/50 rounded"></div>
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  <Card className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4/5 shadow-2xl border-2 z-10 hover:scale-105 smooth-transition">
+                    <CardContent className="p-10 space-y-6">
+                      <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-primary via-accent to-primary/50 flex items-center justify-center shadow-lg">
+                        <Bookmark className="w-10 h-10 text-white" strokeWidth={2.5} />
+                      </div>
+                      <div className="space-y-3">
+                        <div className="h-5 w-4/5 bg-muted rounded"></div>
+                        <div className="h-4 w-full bg-muted/50 rounded"></div>
+                        <div className="h-4 w-3/4 bg-muted/50 rounded"></div>
+                        <div className="h-4 w-5/6 bg-muted/50 rounded"></div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </section>
 
+      {/* Features Section - Bento Grid Layout */}
+      <section id="features" className="py-20 sm:py-32">
+        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16 sm:mb-24">
+            <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+              Everything You Need
+            </h2>
+            <p className="text-xl sm:text-2xl text-muted-foreground max-w-3xl mx-auto font-sans">
+              Powerful features designed for the modern reader
+            </p>
+          </div>
+          
+          {/* Bento Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
+            {/* Large Featured Card */}
+            <Card className="md:col-span-2 lg:col-span-2 lg:row-span-2 cozy-card group border-2 overflow-hidden">
+              <CardContent className="p-10 lg:p-12 h-full flex flex-col justify-between">
+                <div className="space-y-6">
+                  <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 smooth-transition shadow-xl border-2 border-primary/20">
+                    <Cloud className="h-10 w-10 text-primary" strokeWidth={2.5} />
+                  </div>
+                  <div className="space-y-4">
+                    <h3 className="text-3xl lg:text-4xl font-bold">Seamless Cloud Sync</h3>
+                    <p className="text-lg text-muted-foreground leading-relaxed">
+                      Your entire library syncs automatically across all your devices. Start reading on your phone, continue on your tablet, and finish on your desktop without missing a beat.
+                    </p>
+                  </div>
+                </div>
+                <div className="pt-8">
+                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                    <div className="flex items-center gap-2">
+                      <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                      <span>Real-time sync</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="w-2 h-2 rounded-full bg-blue-500"></div>
+                      <span>End-to-end encrypted</span>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Smaller Cards */}
+            <Card className="cozy-card group border-2">
+              <CardContent className="p-8 lg:p-10 space-y-6">
+                <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-accent/20 to-accent/10 flex items-center justify-center group-hover:scale-110 smooth-transition shadow-lg">
+                  <Sparkles className="h-8 w-8 text-accent" strokeWidth={2.5} />
+                </div>
+                <div className="space-y-3">
+                  <h3 className="text-2xl font-bold">Beautiful Reader</h3>
+                  <p className="text-base text-muted-foreground leading-relaxed">
+                    Distraction-free reading with customizable themes and layouts.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="cozy-card group border-2">
+              <CardContent className="p-8 lg:p-10 space-y-6">
+                <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 smooth-transition shadow-lg">
+                  <Zap className="h-8 w-8 text-primary" strokeWidth={2.5} />
+                </div>
+                <div className="space-y-3">
+                  <h3 className="text-2xl font-bold">Lightning Fast</h3>
+                  <p className="text-base text-muted-foreground leading-relaxed">
+                    Optimized performance with instant page loads and smooth navigation.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="md:col-span-2 lg:col-span-2 cozy-card group border-2">
+              <CardContent className="p-8 lg:p-10 flex flex-col md:flex-row gap-8 items-center">
+                <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-accent/20 to-accent/10 flex items-center justify-center group-hover:scale-110 smooth-transition shadow-xl border-2 border-accent/20 flex-shrink-0">
+                  <Lock className="h-10 w-10 text-accent" strokeWidth={2.5} />
+                </div>
+                <div className="space-y-3 flex-1">
+                  <h3 className="text-2xl lg:text-3xl font-bold">Privacy First</h3>
+                  <p className="text-base lg:text-lg text-muted-foreground leading-relaxed">
+                    Your books and data are encrypted and stored securely. We respect your privacy and never track your reading habits.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 sm:py-32">
+        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
+          <Card className="relative overflow-hidden border-2">
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/5 to-transparent"></div>
+            <CardContent className="relative p-12 lg:p-20 text-center space-y-8">
+              <div className="space-y-6 max-w-3xl mx-auto">
+                <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold">
+                  Start Your Reading Journey Today
+                </h2>
+                <p className="text-xl sm:text-2xl text-muted-foreground font-sans">
+                  Join thousands of readers who trust BookMarked for their digital library
+                </p>
+              </div>
+              <div className="pt-4">
+                <Button 
+                  asChild 
+                  size="lg" 
+                  className="text-lg px-12 h-16 shadow-2xl hover:shadow-primary/30 smooth-transition group font-bold rounded-2xl"
+                >
+                  <Link href={signedIn ? "/library" : "/sign-in"}>
+                    {signedIn ? "Go to Library" : "Get Started Free"}
+                    <ArrowRight className="ml-2 h-6 w-6 group-hover:translate-x-2 smooth-transition" />
+                  </Link>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 3106849..1b5343d 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import Link from "next/link"
-import { BookOpen, Home, Library, LogIn, LogOut } from "lucide-react"
+import { BookOpen, Home, Library, LogIn, LogOut, Menu, X } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { ThemeToggle } from "@/components/theme-toggle"
 import { Separator } from "@/components/ui/separator"
@@ -12,11 +12,11 @@ export function Header() {
   const [mounted, setMounted] = useState(false)
   const [signedIn, setSignedIn] = useState<boolean | null>(null)
   const [isOnline, setIsOnline] = useState(true)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   useEffect(() => {
     setMounted(true)
     
-    // Check auth status
     const checkAuth = async () => {
       const { data: { user } } = await supabase.auth.getUser()
       setSignedIn(!!user)
@@ -24,12 +24,10 @@ export function Header() {
     
     checkAuth()
     
-    // Listen for auth changes
     const { data: subscription } = supabase.auth.onAuthStateChange((_event, session) => {
       setSignedIn(!!session)
     })
     
-    // Online/offline listeners
     const handleOnline = () => setIsOnline(true)
     const handleOffline = () => setIsOnline(false)
     if (typeof window !== 'undefined') {
@@ -38,14 +36,31 @@ export function Header() {
       window.addEventListener('offline', handleOffline)
     }
     
+    // Close mobile menu on Escape key
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setMobileMenuOpen(false)
+      }
+    }
+    
+    if (mobileMenuOpen) {
+      document.addEventListener('keydown', handleEscape)
+      // Prevent body scroll when menu is open
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    
     return () => {
       subscription.subscription.unsubscribe()
       if (typeof window !== 'undefined') {
         window.removeEventListener('online', handleOnline)
         window.removeEventListener('offline', handleOffline)
       }
+      document.removeEventListener('keydown', handleEscape)
+      document.body.style.overflow = ''
     }
-  }, [])
+  }, [mobileMenuOpen])
 
   const handleSignOut = async () => {
     await supabase.auth.signOut()
@@ -54,81 +69,206 @@ 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 border-border bg-card/95 backdrop-blur-md shadow-sm">
+        <div className="max-w-[1400px] mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8 gap-2 sm:gap-4">
+          <div className="flex items-center gap-2 sm:gap-4 min-w-0">
+            <div className="flex items-center gap-2 sm:gap-3">
+              <div className="h-10 w-10 bg-muted rounded-xl" />
+              <span className="text-base sm:text-lg font-bold">BookMarked</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-1 sm:gap-2">
+            <div className="h-9 w-9 bg-muted rounded-lg" />
+          </div>
+        </div>
+      </header>
+    )
+  }
+
+  return (
+    <>
+      {/* Backdrop for mobile menu */}
+      {mobileMenuOpen && (
+        <div 
+          className="fixed inset-0 bg-black/40 z-40 lg:hidden animate-fade-in"
+          onClick={() => setMobileMenuOpen(false)}
+        />
+      )}
+      
+      <header className="sticky top-0 z-50 w-full border-b border-border bg-card/95 backdrop-blur-md shadow-sm">
+        <div className="max-w-[1400px] mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8 gap-2 sm:gap-4">
+          <div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
+            <Link href="/" className="flex items-center gap-2 sm:gap-3 cursor-pointer min-w-0 group">
+              <div className="relative">
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/30 to-accent/20 rounded-xl blur-lg group-hover:blur-xl smooth-transition"></div>
+                <div className="relative bg-gradient-to-br from-primary/15 to-accent/10 p-2 sm:p-2.5 rounded-xl border-2 border-primary/30 group-hover:border-primary/50 smooth-transition shadow-md">
+                  <BookOpen className="h-4 w-4 sm:h-5 sm:w-5 text-primary" strokeWidth={2.5} />
+                </div>
+              </div>
+              <span className="text-base sm:text-lg font-bold truncate text-foreground hover:text-primary smooth-transition">
+                BookMarked
+              </span>
             </Link>
-            <Separator orientation="vertical" className="h-4 hidden xs: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>
+            
+            <Separator orientation="vertical" className="h-6 hidden lg:block" />
+            
+            {/* Desktop Navigation */}
+            <nav className="hidden lg:flex items-center gap-1">
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                asChild 
+                className="smooth-transition hover:bg-primary/15 hover:text-primary rounded-xl h-10 px-4"
+              >
+                <Link href="/" className="flex items-center gap-2 cursor-pointer">
+                  <Home className="h-4 w-4" />
+                  <span className="text-sm font-semibold">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="sm" 
+                asChild 
+                className="smooth-transition hover:bg-primary/15 hover:text-primary rounded-xl h-10 px-4"
+              >
+                <Link href="/library" className="flex items-center gap-2 cursor-pointer">
+                  <Library className="h-4 w-4" />
+                  <span className="text-sm font-semibold">Library</span>
                 </Link>
               </Button>
             </nav>
           </div>
+          
           <div className="flex items-center gap-2">
-            <div className="h-8 w-8 bg-muted rounded" />
+            {!isOnline && (
+              <span className="rounded-full px-2 sm:px-3 py-1 text-[10px] sm:text-xs font-bold bg-gradient-to-r from-yellow-500/20 to-orange-500/20 text-yellow-600 dark:text-yellow-400 border-2 border-yellow-500/40 animate-pulse shadow-lg">
+                Offline
+              </span>
+            )}
+            
+            {/* Desktop Auth Buttons */}
+            <div className="hidden lg:flex items-center gap-2">
+              {signedIn ? (
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  onClick={handleSignOut} 
+                  className="flex items-center gap-1.5 cursor-pointer smooth-transition hover:bg-destructive/15 hover:text-destructive rounded-xl h-10 px-4"
+                >
+                  <LogOut className="h-4 w-4" />
+                  <span className="text-sm font-semibold">Sign Out</span>
+                </Button>
+              ) : (
+                <Button 
+                  variant="default"
+                  size="sm" 
+                  asChild 
+                  className="flex items-center gap-1.5 smooth-transition rounded-xl h-10 px-4 shadow-lg hover:shadow-xl font-semibold"
+                >
+                  <Link href="/sign-in" className="cursor-pointer">
+                    <LogIn className="h-4 w-4" />
+                    <span className="text-sm">Sign In</span>
+                  </Link>
+                </Button>
+              )}
+            </div>
+            
+            <ThemeToggle />
+            
+            {/* Mobile Menu Button */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="lg:hidden h-10 w-10 p-0"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            >
+              {mobileMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </Button>
           </div>
         </div>
+        
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <div className="lg:hidden border-t border-border bg-card/98 backdrop-blur-md animate-slide-down shadow-2xl">
+            <nav className="flex flex-col p-6 space-y-1 max-h-[calc(100vh-4rem)] overflow-y-auto">
+              {/* Navigation Links */}
+              <div className="space-y-1">
+                <Button 
+                  variant="ghost" 
+                  asChild 
+                  className="w-full justify-start h-14 rounded-2xl hover:bg-primary/10 smooth-transition group"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  <Link href="/" className="flex items-center gap-4 cursor-pointer">
+                    <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 smooth-transition">
+                      <Home className="h-5 w-5 text-primary" />
+                    </div>
+                    <div className="flex flex-col items-start">
+                      <span className="text-base font-semibold">Home</span>
+                      <span className="text-xs text-muted-foreground">Welcome page</span>
+                    </div>
+                  </Link>
+                </Button>
+                
+                <Button 
+                  variant="ghost" 
+                  asChild 
+                  className="w-full justify-start h-14 rounded-2xl hover:bg-primary/10 smooth-transition group"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  <Link href="/library" className="flex items-center gap-4 cursor-pointer">
+                    <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 smooth-transition">
+                      <Library className="h-5 w-5 text-primary" />
+                    </div>
+                    <div className="flex flex-col items-start">
+                      <span className="text-base font-semibold">Library</span>
+                      <span className="text-xs text-muted-foreground">Your books</span>
+                    </div>
+                  </Link>
+                </Button>
+              </div>
+              
+              {/* Auth Section */}
+              <div className="pt-6 mt-4 border-t border-border">
+                {signedIn ? (
+                  <Button 
+                    variant="ghost" 
+                    onClick={() => {
+                      handleSignOut()
+                      setMobileMenuOpen(false)
+                    }}
+                    className="w-full justify-start h-14 rounded-2xl hover:bg-destructive/10 smooth-transition group"
+                  >
+                    <div className="w-10 h-10 rounded-xl bg-destructive/10 flex items-center justify-center group-hover:bg-destructive/20 smooth-transition">
+                      <LogOut className="h-5 w-5 text-destructive" />
+                    </div>
+                    <div className="flex flex-col items-start ml-4">
+                      <span className="text-base font-semibold text-destructive">Sign Out</span>
+                      <span className="text-xs text-muted-foreground">End your session</span>
+                    </div>
+                  </Button>
+                ) : (
+                  <Button 
+                    variant="default"
+                    asChild 
+                    className="w-full justify-center h-14 rounded-2xl shadow-xl font-semibold text-base smooth-transition"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    <Link href="/sign-in" className="cursor-pointer flex items-center gap-2">
+                      <LogIn className="h-5 w-5" />
+                      <span>Sign In</span>
+                    </Link>
+                  </Button>
+                )}
+              </div>
+            </nav>
+          </div>
+        )}
       </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>
-          </Link>
-          <Separator orientation="vertical" className="h-4 hidden xs: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>
-              </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>
-              </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>
-          )}
-          {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>
-          ) : (
-            <Button variant="ghost" size="sm" asChild className="flex items-center space-x-1">
-              <Link href="/sign-in">
-                <LogIn className="h-3 w-3" />
-                <span className="text-sm">Sign In</span>
-              </Link>
-            </Button>
-          )}
-          <ThemeToggle />
-        </div>
-      </div>
-    </header>
+    </>
   )
 }
diff --git a/src/components/reader/PdfReader.tsx b/src/components/reader/PdfReader.tsx
index 4f47879..94da154 100644
--- a/src/components/reader/PdfReader.tsx
+++ b/src/components/reader/PdfReader.tsx
@@ -340,9 +340,17 @@ export default function PdfReader({ fileUrl, bookId }: PdfReaderProps) {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-screen bg-background">
-        <div className="text-center space-y-4">
-          <div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto" />
-          <p className="text-muted-foreground">Loading PDF... {progress > 0 ? `${progress}%` : ''}</p>
+        <div className="text-center space-y-6 animate-fade-in">
+          <div className="relative inline-flex">
+            <div className="absolute inset-0 bg-primary/20 rounded-full blur-xl"></div>
+            <div className="relative w-16 h-16 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+          </div>
+          <div className="space-y-2">
+            <p className="text-lg font-medium">Loading PDF</p>
+            {progress > 0 && (
+              <p className="text-sm text-muted-foreground">{progress}%</p>
+            )}
+          </div>
         </div>
       </div>
     );
@@ -351,13 +359,20 @@ export default function PdfReader({ fileUrl, bookId }: PdfReaderProps) {
   if (error) {
     return (
       <div className="flex items-center justify-center h-screen bg-background">
-        <div className="text-center space-y-4 max-w-md px-6">
-          <div className="text-6xl">⚠️</div>
-          <h2 className="text-2xl font-bold text-foreground">Error</h2>
-          <p className="text-muted-foreground">{error}</p>
+        <div className="text-center space-y-6 max-w-md px-6 animate-scale-in">
+          <div className="relative inline-flex">
+            <div className="absolute inset-0 bg-destructive/10 rounded-full blur-xl"></div>
+            <div className="relative bg-destructive/10 p-6 rounded-2xl border border-destructive/20">
+              <div className="text-5xl">⚠️</div>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <h2 className="text-2xl font-bold text-foreground">Error Loading PDF</h2>
+            <p className="text-muted-foreground">{error}</p>
+          </div>
           <button
             onClick={() => window.location.reload()}
-            className="px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+            className="px-8 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 smooth-transition shadow-lg hover:shadow-xl font-medium"
           >
             Retry
           </button>
@@ -369,25 +384,26 @@ export default function PdfReader({ fileUrl, bookId }: PdfReaderProps) {
   return (
     <div ref={containerRef} className="flex flex-col h-[100dvh] bg-background">
       {/* Top Toolbar */}
-      <div className="border-b border-border bg-card">
-        <div className="flex items-center justify-between px-3 sm:px-4 py-2 sm:py-3 gap-2 flex-wrap">
+      <div className="border-b border-border bg-card/80 backdrop-blur-lg supports-[backdrop-filter]:bg-card/80 shadow-sm">
+        <div className="flex items-center justify-between px-3 sm:px-4 py-3 sm:py-4 gap-3 flex-wrap">
           <div className="flex items-center gap-1 sm:gap-2 flex-wrap">
             <a
               href="/library"
-              className="p-2 rounded-lg hover:bg-accent transition-colors mr-1"
+              className="p-2 rounded-lg hover:bg-primary/10 smooth-transition mr-1 group"
               title="Back to Library"
             >
-              <ChevronLeft className="w-5 h-5" />
+              <ChevronLeft className="w-5 h-5 group-hover:text-primary smooth-transition" />
             </a>
+            <div className="w-px h-6 bg-border mx-1 hidden sm:block" />
             <button
               onClick={goToPreviousPage}
               disabled={pageNum <= 1}
-              className="p-2 rounded-lg hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="p-2 rounded-lg hover:bg-primary/10 disabled:opacity-40 disabled:cursor-not-allowed smooth-transition group"
               title="Previous page (←)"
             >
-              <ChevronLeft className="w-5 h-5" />
+              <ChevronLeft className="w-5 h-5 group-hover:text-primary smooth-transition" />
             </button>
-            <div className="flex items-center gap-2 px-2">
+            <div className="flex items-center gap-2 px-3 py-1 bg-muted/50 rounded-lg border border-border">
               <input
                 type="number"
                 value={pageNum}
@@ -395,19 +411,19 @@ export default function PdfReader({ fileUrl, bookId }: PdfReaderProps) {
                   const val = parseInt(e.target.value);
                   if (val >= 1 && val <= numPages) setPageNum(val);
                 }}
-                className="w-14 sm:w-16 px-2 py-1 text-center bg-background border border-border rounded"
+                className="w-12 sm:w-14 px-1 py-0.5 text-center bg-transparent border-0 focus:outline-none focus:ring-0 font-medium"
                 min={1}
                 max={numPages}
               />
-              <span className="text-muted-foreground">of {numPages}</span>
+              <span className="text-sm text-muted-foreground font-medium">/ {numPages}</span>
             </div>
             <button
               onClick={goToNextPage}
               disabled={pageNum >= numPages}
-              className="p-2 rounded-lg hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="p-2 rounded-lg hover:bg-primary/10 disabled:opacity-40 disabled:cursor-not-allowed smooth-transition group"
               title="Next page (→)"
             >
-              <ChevronRight className="w-5 h-5" />
+              <ChevronRight className="w-5 h-5 group-hover:text-primary smooth-transition" />
             </button>
           </div>
 
@@ -415,32 +431,32 @@ export default function PdfReader({ fileUrl, bookId }: PdfReaderProps) {
             <button
               onClick={zoomOut}
               disabled={scale <= 0.5}
-              className="p-2 rounded-lg hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="p-2 rounded-lg hover:bg-primary/10 disabled:opacity-40 disabled:cursor-not-allowed smooth-transition group"
               title="Zoom out (-)"
             >
-              <ZoomOut className="w-5 h-5" />
+              <ZoomOut className="w-5 h-5 group-hover:text-primary smooth-transition" />
             </button>
-            <span className="text-sm text-muted-foreground min-w-[3.5rem] text-center">
+            <span className="text-sm font-medium bg-muted/50 px-3 py-1 rounded-lg border border-border min-w-[4rem] text-center">
               {Math.round(scale * 100)}%
             </span>
             <button
               onClick={zoomIn}
               disabled={scale >= 3}
-              className="p-2 rounded-lg hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="p-2 rounded-lg hover:bg-primary/10 disabled:opacity-40 disabled:cursor-not-allowed smooth-transition group"
               title="Zoom in (+)"
             >
-              <ZoomIn className="w-5 h-5" />
+              <ZoomIn className="w-5 h-5 group-hover:text-primary smooth-transition" />
             </button>
             <div className="w-px h-6 bg-border mx-2 hidden sm:block" />
             <button
               onClick={toggleFullscreen}
-              className="p-2 rounded-lg hover:bg-accent transition-colors"
+              className="p-2 rounded-lg hover:bg-primary/10 smooth-transition group"
               title="Toggle fullscreen (f)"
             >
               {isFullscreen ? (
-                <Minimize2 className="w-5 h-5" />
+                <Minimize2 className="w-5 h-5 group-hover:text-primary smooth-transition" />
               ) : (
-                <Maximize2 className="w-5 h-5" />
+                <Maximize2 className="w-5 h-5 group-hover:text-primary smooth-transition" />
               )}
             </button>
           </div>
@@ -448,42 +464,46 @@ export default function PdfReader({ fileUrl, bookId }: PdfReaderProps) {
       </div>
 
       {/* Canvas Container */}
-      <div className="flex-1 overflow-auto bg-muted/20">
-        <div className="flex justify-center items-start p-3 sm:p-6 min-h-full">
+      <div className="flex-1 overflow-auto bg-gradient-to-br from-muted/20 to-muted/5">
+        <div className="flex justify-center items-start p-4 sm:p-8 min-h-full">
           <canvas
             ref={canvasRef}
-            className="shadow bg-white sm:shadow-2xl"
+            className="shadow-2xl bg-white rounded-sm"
             style={{ display: rendering ? "none" : "block" }}
           />
           {rendering && (
             <div className="flex items-center justify-center py-20">
-              <div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin" />
+              <div className="relative inline-flex">
+                <div className="absolute inset-0 bg-primary/20 rounded-full blur-lg"></div>
+                <div className="relative w-12 h-12 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+              </div>
             </div>
           )}
         </div>
       </div>
 
       {/* Performance Info & Keyboard Shortcuts */}
-      <div className="border-t border-border bg-card px-4 py-2">
-        <div className="flex justify-between items-center">
-          <div className="text-xs text-muted-foreground">
+      <div className="border-t border-border bg-card/80 backdrop-blur-lg supports-[backdrop-filter]:bg-card/80 px-4 py-3">
+        <div className="flex justify-between items-center gap-4 flex-wrap">
+          <div className="flex items-center gap-4 text-xs font-medium">
             {prefetchedPages.size > 0 && (
-              <span className="mr-4">
-                📚 {prefetchedPages.size} pages cached
+              <span className="flex items-center gap-1.5 px-2 py-1 bg-primary/10 text-primary rounded-md">
+                <span>📚</span>
+                <span>{prefetchedPages.size} cached</span>
               </span>
             )}
             {readingSpeed > 0 && (
-              <span className="mr-4">
-                ⚡ {Math.round(readingSpeed * 60)} pages/min
+              <span className="flex items-center gap-1.5 px-2 py-1 bg-accent/10 text-accent rounded-md">
+                <span>⚡</span>
+                <span>{Math.round(readingSpeed * 60)} pages/min</span>
               </span>
             )}
           </div>
-          <p className="text-xs text-muted-foreground">
-            <kbd className="px-1.5 py-0.5 bg-muted rounded">←</kbd> Previous •{" "}
-            <kbd className="px-1.5 py-0.5 bg-muted rounded">→</kbd> Next •{" "}
-            <kbd className="px-1.5 py-0.5 bg-muted rounded">+</kbd> Zoom In •{" "}
-            <kbd className="px-1.5 py-0.5 bg-muted rounded">-</kbd> Zoom Out •{" "}
-            <kbd className="px-1.5 py-0.5 bg-muted rounded">F</kbd> Fullscreen
+          <p className="text-xs text-muted-foreground hidden lg:flex items-center gap-2">
+            <kbd className="px-2 py-1 bg-muted rounded border border-border font-medium">←</kbd> Prev •{" "}
+            <kbd className="px-2 py-1 bg-muted rounded border border-border font-medium">→</kbd> Next •{" "}
+            <kbd className="px-2 py-1 bg-muted rounded border border-border font-medium">+</kbd> Zoom •{" "}
+            <kbd className="px-2 py-1 bg-muted rounded border border-border font-medium">F</kbd> Fullscreen
           </p>
         </div>
       </div>