diff --git a/app/api/stories/route.ts b/app/api/stories/route.ts
index 1f25faf..11364a1 100644
--- a/app/api/stories/route.ts
+++ b/app/api/stories/route.ts
@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 import { auth } from "@clerk/nextjs/server";
 import { db } from "@/lib/db";
 import { stories, pages } from "@/lib/schema";
-import { eq } from "drizzle-orm";
+import { eq, desc, sql } from "drizzle-orm";
 
 export async function GET() {
   try {
@@ -15,7 +15,7 @@ export async function GET() {
       );
     }
 
-    // Get all stories for the user with their first page
+    // Get all stories for the user with their pages
     const userStories = await db
       .select({
         id: stories.id,
@@ -24,13 +24,14 @@ export async function GET() {
         createdAt: stories.createdAt,
         pageCount: pages.pageNumber,
         coverImage: pages.generatedImageUrl,
+        pageCreatedAt: pages.createdAt,
+        pageUpdatedAt: pages.updatedAt,
       })
       .from(stories)
       .leftJoin(pages, eq(stories.id, pages.storyId))
-      .where(eq(stories.userId, userId))
-      .orderBy(stories.createdAt);
+      .where(eq(stories.userId, userId));
 
-    // Group by story and find the max page number and first page image
+    // Group by story and find the max page number, first page image, and most recent update
     const storyMap = new Map();
 
     userStories.forEach((row) => {
@@ -43,6 +44,7 @@ export async function GET() {
           createdAt: row.createdAt,
           pageCount: 0,
           coverImage: null,
+          lastUpdated: row.createdAt, // Default to story creation date
         });
       }
 
@@ -53,10 +55,23 @@ export async function GET() {
       if (row.pageCount === 1 && row.coverImage) {
         story.coverImage = row.coverImage;
       }
+      // Track the most recent page update
+      if (row.pageUpdatedAt && row.pageUpdatedAt > story.lastUpdated) {
+        story.lastUpdated = row.pageUpdatedAt;
+      } else if (row.pageCreatedAt && row.pageCreatedAt > story.lastUpdated) {
+        story.lastUpdated = row.pageCreatedAt;
+      }
     });
 
     const storiesWithCovers = Array.from(storyMap.values());
 
+    // Sort by most recently updated (stories with newest pages first)
+    storiesWithCovers.sort((a, b) => {
+      const aTime = new Date(a.lastUpdated).getTime();
+      const bTime = new Date(b.lastUpdated).getTime();
+      return bTime - aTime; // Most recent first
+    });
+
     return NextResponse.json({
       stories: storiesWithCovers
     });
diff --git a/app/stories/page.tsx b/app/stories/page.tsx
index 18ecabb..b50ed79 100644
--- a/app/stories/page.tsx
+++ b/app/stories/page.tsx
@@ -14,6 +14,7 @@ interface Story {
   createdAt: string;
   pageCount: number;
   coverImage: string | null;
+  lastUpdated?: string;
 }
 
 export default function StoriesPage() {
@@ -83,78 +84,107 @@ export default function StoriesPage() {
       <div className="fixed inset-0 overflow-hidden pointer-events-none -z-10">
         <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-indigo/10 rounded-full blur-[120px]" />
         <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-900/10 rounded-full blur-[120px]" />
+        <div className="absolute top-[20%] right-[20%] w-[30%] h-[30%] bg-emerald/5 rounded-full blur-[100px]" />
+        <div className="absolute bottom-[30%] left-[15%] w-[25%] h-[25%] bg-purple-500/5 rounded-full blur-[80px]" />
       </div>
 
       <Navbar />
 
-      <main className="flex-1 flex flex-col min-h-[calc(100vh-4rem)]">
-        <div className="w-full px-4 sm:px-6 lg:px-12 xl:px-20 py-4 sm:py-6 relative">
-          <div className="max-w-7xl mx-auto w-full z-10 py-8">
-            {stories.length === 0 ? (
-              <div className="text-center py-20">
-                <div className="inline-flex items-center justify-center w-32 h-40 mb-6 bg-white/5 border-2 border-dashed border-border rounded-sm">
-                  <Plus className="w-16 h-16 text-muted-foreground/50" />
-                </div>
-                <h2 className="text-xl font-semibold mb-2">No comics yet</h2>
-                <p className="text-muted-foreground mb-6">
-                  Create your first comic story to build your library!
-                </p>
-              </div>
-            ) : (
-              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
-                {stories.map((story) => (
-                  <button
-                    key={story.id}
-                    onClick={() => router.push(`/editor/${story.slug}`)}
-                    className="group relative bg-white aspect-[3/4] p-2 shadow-2xl rounded-sm hover:shadow-indigo/20 hover:shadow-3xl transition-all duration-300 hover:scale-[1.02] hover:-translate-y-1"
-                  >
-                    <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative">
-                      {story.coverImage ? (
-                        <>
-                          <img
-                            src={story.coverImage}
-                            alt={story.title}
-                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 opacity-80"
-                          />
+       <main className="flex-1 flex flex-col min-h-[calc(100vh-4rem)]">
+         <div className="w-full px-4 sm:px-6 lg:px-12 xl:px-20 py-4 sm:py-6 relative">
+           <div className="max-w-7xl mx-auto w-full z-10 py-8">
+             {stories.length === 0 ? (
+               <div className="opacity-0 animate-fade-in-up animation-delay-100 text-center py-20">
+                 <div className="relative mb-8">
+                   <div className="inline-flex items-center justify-center w-40 h-52 glass-panel border-2 border-dashed border-border rounded-lg hover:border-indigo/30 hover:shadow-indigo/10 hover:shadow-lg transition-all duration-300 group">
+                     <Plus className="w-20 h-20 text-muted-foreground/50 group-hover:text-indigo/40 transition-colors duration-300" />
+                   </div>
+                   <div className="absolute -inset-1 bg-gradient-to-r from-indigo/20 to-emerald/20 rounded-lg blur opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10" />
+                 </div>
+                 <h2 className="text-4xl font-heading font-semibold mb-4 text-foreground tracking-tight">
+                   Your Comic Library Awaits
+                 </h2>
+                 <p className="text-muted-foreground mb-10 max-w-lg mx-auto leading-relaxed text-lg">
+                   Start crafting your first visual story. Every great comic begins with a single panel.
+                 </p>
+                 <Button
+                   onClick={() => router.push('/')}
+                   className="glass-panel glass-panel-hover px-8 py-4 text-base font-medium hover:scale-105 transition-all duration-300 hover:shadow-indigo/20 hover:shadow-lg"
+                 >
+                   <Plus className="w-5 h-5 mr-3" />
+                   Create Your First Comic
+                 </Button>
+               </div>
+             ) : (
+               <>
+                 <div className="opacity-0 animate-fade-in-up animation-delay-100 mb-12">
+                   <h1 className="text-4xl sm:text-5xl lg:text-6xl font-heading font-semibold text-foreground mb-4 tracking-tight">
+                     Your Comic Library
+                   </h1>
+                   <p className="text-muted-foreground text-base sm:text-lg max-w-3xl leading-relaxed">
+                     Browse and continue your comic creations. Each story is a unique visual narrative waiting to unfold.
+                   </p>
+                 </div>
 
-                          {story.pageCount > 1 && (
-                            <div className="absolute inset-0 pointer-events-none">
-                              <div className="absolute top-0 left-0 right-0 bottom-0 translate-x-1 translate-y-1 bg-black/20" />
-                              {story.pageCount > 2 && (
-                                <div className="absolute top-0 left-0 right-0 bottom-0 translate-x-2 translate-y-2 bg-black/10" />
-                              )}
-                            </div>
-                          )}
+                 <div className="opacity-0 animate-fade-in-up animation-delay-200 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-6">
+                   {stories.map((story, index) => (
+                     <button
+                       key={story.id}
+                       onClick={() => router.push(`/editor/${story.slug}`)}
+                       className={`opacity-0 animate-fade-in-up group relative glass-panel p-3 rounded-lg hover:shadow-indigo/20 hover:shadow-2xl transition-all duration-500 hover:scale-[1.05] hover:-translate-y-2 border border-border/50 hover:border-indigo/30 hover:bg-white/[0.02] backdrop-blur-sm`}
+                       style={{ animationDelay: `${200 + index * 100}ms` }}
+                     >
+                       <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative group-hover:border-indigo/30 transition-colors duration-300">
+                         {story.coverImage ? (
+                           <>
+                             <img
+                               src={story.coverImage}
+                               alt={story.title}
+                               className="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:brightness-110 opacity-90"
+                             />
 
-                          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent" />
+                             {story.pageCount > 1 && (
+                               <div className="absolute inset-0 pointer-events-none">
+                                 <div className="absolute top-0 left-0 right-0 bottom-0 translate-x-1 translate-y-1 bg-black/20 group-hover:bg-indigo/10 transition-colors duration-300" />
+                                 {story.pageCount > 2 && (
+                                   <div className="absolute top-0 left-0 right-0 bottom-0 translate-x-2 translate-y-2 bg-black/10 group-hover:bg-indigo/5 transition-colors duration-300" />
+                                 )}
+                               </div>
+                             )}
 
-                          <div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/70 text-white text-[9px] font-mono uppercase tracking-widest border border-white/10">
-                            {story.pageCount}p
-                          </div>
+                             <div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/30 to-transparent group-hover:from-black/90 transition-all duration-300" />
 
-                          <div className="absolute bottom-0 left-0 right-0 p-2 text-left">
-                            <h3 className="font-display text-xs text-white leading-tight line-clamp-2 mb-0.5">
-                              {story.title}
-                            </h3>
-                            <p className="text-[9px] text-white/50 font-mono uppercase tracking-wider">
-                              {new Date(story.createdAt).toLocaleDateString()}
-                            </p>
-                          </div>
-                        </>
-                      ) : (
-                        <div className="w-full h-full flex items-center justify-center">
-                          <div className="text-center">
-                            <Loader2 className="w-6 h-6 animate-spin text-white/40 mx-auto mb-2" />
-                            <p className="text-[9px] text-white/50 font-mono uppercase tracking-wider">Generating...</p>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
+                             {/* Subtle glow effect on hover */}
+                             <div className="absolute inset-0 opacity-0 group-hover:opacity-20 bg-gradient-to-r from-indigo/20 via-transparent to-emerald/20 transition-opacity duration-500" />
+
+                             <div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/80 text-white text-[9px] font-mono uppercase tracking-widest border border-white/20 group-hover:bg-indigo/80 group-hover:border-indigo/40 transition-colors duration-300">
+                               {story.pageCount}p
+                             </div>
+
+                             <div className="absolute bottom-0 left-0 right-0 p-3 text-left">
+                               <h3 className="font-display text-sm text-white leading-tight line-clamp-2 mb-1 group-hover:text-indigo-100 transition-colors duration-300">
+                                 {story.title}
+                               </h3>
+                               <p className="text-[10px] text-white/60 font-mono uppercase tracking-wider group-hover:text-white/80 transition-colors duration-300">
+                                 {new Date(story.createdAt).toLocaleDateString()}
+                               </p>
+                             </div>
+                           </>
+                         ) : (
+                           <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-neutral-800 to-neutral-900">
+                             <div className="text-center">
+                               <Loader2 className="w-8 h-8 animate-spin text-indigo/60 mx-auto mb-3" />
+                               <p className="text-xs text-white/70 font-mono uppercase tracking-wider">Generating...</p>
+                             </div>
+                           </div>
+                         )}
+                       </div>
+                     </button>
+                   ))}
+                 </div>
+               </>
+             )}
+           </div>
         </div>
       </main>
     </div>