diff --git a/frontend/index.html b/frontend/index.html
index 9002319..0faf0a9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,16 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="theme-color" content="#1a1814" />
+    <meta name="theme-color" content="#09090f" />
     <meta name="description" content="Write your stories, anywhere." />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Special+Elite&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Special+Elite&display=swap" rel="stylesheet" />
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
     <link rel="manifest" href="/manifest.json" />
-    <title>Story Writer</title>
+    <title>Grimoire</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/public/icon.svg b/frontend/public/icon.svg
index 487f59d..34396eb 100644
--- a/frontend/public/icon.svg
+++ b/frontend/public/icon.svg
@@ -1,4 +1,42 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <rect width="100" height="100" fill="#1a1814"/>
-  <text x="50" y="70" font-size="60" text-anchor="middle" fill="#c8941a" font-family="serif">✍</text>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!-- Background -->
+  <rect width="512" height="512" rx="96" fill="#09090f"/>
+
+  <!-- Book depth shadow -->
+  <rect x="124" y="88" width="276" height="348" rx="14" fill="#060408"/>
+
+  <!-- Book back cover -->
+  <rect x="120" y="82" width="276" height="348" rx="14" fill="#110e24"/>
+
+  <!-- Book spine -->
+  <rect x="120" y="82" width="30" height="348" rx="13" fill="#090716"/>
+
+  <!-- Spine binding rings -->
+  <rect x="126" y="148" width="14" height="4" rx="2" fill="#c8941a" opacity="0.55"/>
+  <rect x="126" y="254" width="14" height="4" rx="2" fill="#c8941a" opacity="0.55"/>
+  <rect x="126" y="360" width="14" height="4" rx="2" fill="#c8941a" opacity="0.55"/>
+
+  <!-- Cover border inset -->
+  <rect x="162" y="110" width="216" height="292" rx="6" fill="none" stroke="#c8941a" stroke-width="1.5" opacity="0.22"/>
+
+  <!-- Crescent moon emblem -->
+  <defs>
+    <clipPath id="mc">
+      <circle cx="264" cy="240" r="84"/>
+    </clipPath>
+  </defs>
+  <circle cx="264" cy="240" r="84" fill="#c8941a" opacity="0.92"/>
+  <circle cx="295" cy="210" r="67" fill="#110e24" clip-path="url(#mc)"/>
+
+  <!-- Stars on cover -->
+  <circle cx="186" cy="142" r="5.5" fill="#c8941a" opacity="0.95"/>
+  <circle cx="356" cy="134" r="3.5" fill="#c8941a" opacity="0.85"/>
+  <circle cx="372" cy="156" r="2.5" fill="#c8941a" opacity="0.55"/>
+  <circle cx="178" cy="356" r="4"   fill="#c8941a" opacity="0.75"/>
+  <circle cx="362" cy="346" r="4.5" fill="#c8941a" opacity="0.85"/>
+  <circle cx="348" cy="370" r="2.5" fill="#c8941a" opacity="0.50"/>
+
+  <!-- Title rule lines -->
+  <rect x="172" y="370" width="172" height="4"   rx="2"   fill="#c8941a" opacity="0.40"/>
+  <rect x="196" y="382" width="124" height="2.5" rx="1.5" fill="#c8941a" opacity="0.22"/>
 </svg>
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
index b8eed1f..418bd9d 100644
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -1,11 +1,11 @@
 {
-  "name": "Story Writer",
-  "short_name": "Stories",
+  "name": "Grimoire",
+  "short_name": "Grimoire",
   "description": "Write your stories, anywhere.",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#1a1814",
-  "theme_color": "#1a1814",
+  "background_color": "#09090f",
+  "theme_color": "#09090f",
   "icons": [
     {
       "src": "/icon.svg",
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 1e8ce06..a37adef 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -25,8 +25,8 @@ export default function Login({ onLogin }) {
     <div className="login-page">
       <div className="login-box">
         <div className="login-quill">✍</div>
-        <h1 className="login-title">Story Writer</h1>
-        <p className="login-sub">Your stories, your world</p>
+        <h1 className="login-title">Grimoire</h1>
+        <p className="login-sub">Your stories, your magic</p>
         <form onSubmit={handleSubmit} className="login-form">
           <input
             type="text"
