diff --git a/packages/frontend/public/favicon.ico b/packages/frontend/public/favicon.ico
new file mode 100644
index 0000000..d416062
Binary files /dev/null and b/packages/frontend/public/favicon.ico differ
diff --git a/packages/frontend/public/layonara.png b/packages/frontend/public/layonara.png
new file mode 100644
index 0000000..2deb044
Binary files /dev/null and b/packages/frontend/public/layonara.png differ
diff --git a/packages/frontend/public/page-bg.jpg b/packages/frontend/public/page-bg.jpg
new file mode 100644
index 0000000..0b96a34
Binary files /dev/null and b/packages/frontend/public/page-bg.jpg differ
diff --git a/packages/frontend/src/layouts/IDELayout.tsx b/packages/frontend/src/layouts/IDELayout.tsx
index 5bf38c9..e06d8a0 100644
--- a/packages/frontend/src/layouts/IDELayout.tsx
+++ b/packages/frontend/src/layouts/IDELayout.tsx
@@ -41,15 +41,18 @@ export function IDELayout({ sidebar }: { sidebar?: React.ReactNode }) {
         className="flex shrink-0 items-center gap-6 px-4 py-2"
         style={{ borderBottom: "1px solid var(--forge-border)" }}
       >
-        <h1
-          className="text-lg font-bold"
-          style={{
-            fontFamily: "'Baskerville', 'Georgia', 'Palatino', serif",
-            color: "var(--forge-accent)",
-          }}
-        >
-          Layonara Forge
-        </h1>
+        <div className="flex items-center gap-2">
+          <img src="/layonara.png" alt="Layonara" style={{ width: "130px" }} />
+          <span
+            className="text-lg font-bold"
+            style={{
+              fontFamily: "'Baskerville', 'Georgia', 'Palatino', serif",
+              color: "var(--forge-accent)",
+            }}
+          >
+            Forge
+          </span>
+        </div>
         <nav className="flex flex-1 items-center gap-1">
           {NAV_ITEMS.map((item) => {
             const isActive =
diff --git a/packages/frontend/src/layouts/SetupLayout.tsx b/packages/frontend/src/layouts/SetupLayout.tsx
index a812a56..5086ce1 100644
--- a/packages/frontend/src/layouts/SetupLayout.tsx
+++ b/packages/frontend/src/layouts/SetupLayout.tsx
@@ -3,8 +3,11 @@ import { Outlet } from "react-router-dom";
 export function SetupLayout() {
   return (
     <div
-      className="flex min-h-screen items-center justify-center p-4"
-      style={{ backgroundColor: "var(--forge-bg)" }}
+      className="flex min-h-screen items-center justify-center bg-cover bg-center bg-no-repeat p-4"
+      style={{
+        backgroundColor: "var(--forge-bg)",
+        backgroundImage: "linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.85)), url('/page-bg.jpg')",
+      }}
     >
       <div className="w-full max-w-2xl">
         <h1