Index: chapterx-frontend/src/components/layout/Footer.tsx
===================================================================
--- chapterx-frontend/src/components/layout/Footer.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/components/layout/Footer.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,48 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { Feather } from 'lucide-react'
+
+export const Footer: React.FC = () => (
+  <footer className="border-t border-slate-800 mt-auto">
+    <div className="max-w-7xl mx-auto px-4 py-10">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+        <div className="col-span-1">
+          <Link to="/" className="flex items-center gap-2 mb-3">
+            <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center">
+              <Feather size={14} className="text-white" />
+            </div>
+            <span className="font-serif font-bold text-white">ChapterX</span>
+          </Link>
+          <p className="text-slate-500 text-sm">
+            A collaborative storytelling platform for writers and readers.
+          </p>
+        </div>
+        <div>
+          <h4 className="text-white text-sm font-medium mb-3">Explore</h4>
+          <ul className="space-y-2 text-slate-500 text-sm">
+            <li><Link to="/browse" className="hover:text-white transition-colors">Browse Stories</Link></li>
+            <li><Link to="/genres" className="hover:text-white transition-colors">Genres</Link></li>
+            <li><Link to="/community-lists" className="hover:text-white transition-colors">Reading Lists</Link></li>
+          </ul>
+        </div>
+        <div>
+          <h4 className="text-white text-sm font-medium mb-3">Create</h4>
+          <ul className="space-y-2 text-slate-500 text-sm">
+            <li><Link to="/register" className="hover:text-white transition-colors">Start Writing</Link></li>
+            <li><Link to="/writer" className="hover:text-white transition-colors">Writer Dashboard</Link></li>
+          </ul>
+        </div>
+        <div>
+          <h4 className="text-white text-sm font-medium mb-3">Account</h4>
+          <ul className="space-y-2 text-slate-500 text-sm">
+            <li><Link to="/login" className="hover:text-white transition-colors">Sign In</Link></li>
+            <li><Link to="/register" className="hover:text-white transition-colors">Register</Link></li>
+          </ul>
+        </div>
+      </div>
+      <div className="border-t border-slate-800 pt-6 text-center text-slate-600 text-sm">
+        &copy; {new Date().getFullYear()} ChapterX. All rights reserved.
+      </div>
+    </div>
+  </footer>
+)