diff --git a/README.md b/README.md
index 14d581ff..72c2de0d 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# BMad Method
+![BMad Method](banner-bmad-method.png)
 
 [![Version](https://img.shields.io/npm/v/bmad-method?color=blue&label=version)](https://www.npmjs.com/package/bmad-method)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
diff --git a/banner-bmad-method.png b/banner-bmad-method.png
new file mode 100644
index 00000000..c0c3fc34
Binary files /dev/null and b/banner-bmad-method.png differ
diff --git a/bmad-wordmark.png b/bmad-wordmark.png
new file mode 100644
index 00000000..b596d0bc
Binary files /dev/null and b/bmad-wordmark.png differ
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 20c53b57..9f65c4ff 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -38,8 +38,9 @@ export default defineConfig({
       tagline: 'AI-driven agile development with specialized agents and workflows that scale from bug fixes to enterprise platforms.',
 
       logo: {
-        src: './public/img/logo.svg',
-        alt: 'BMAD Logo',
+        src: './public/img/bmad-wordmark.png',
+        alt: 'BMAD Method',
+        replacesTitle: true,
       },
       favicon: '/favicon.ico',
 
diff --git a/website/public/img/bmad-wordmark.png b/website/public/img/bmad-wordmark.png
new file mode 100644
index 00000000..b596d0bc
Binary files /dev/null and b/website/public/img/bmad-wordmark.png differ
diff --git a/website/src/styles/custom.css b/website/src/styles/custom.css
index a232f5ec..70688aa2 100644
--- a/website/src/styles/custom.css
+++ b/website/src/styles/custom.css
@@ -222,6 +222,8 @@ header.header .header.sl-flex {
 
 .site-title {
   font-weight: 700;
+  margin-left: 0;
+  padding-left: 0;
 }
 
 /* Logo sizing - constrain to reasonable size */
@@ -470,14 +472,14 @@ footer {
 /* Responsive padding on navbar row only - banner stays full-width */
 @media (min-width: 50rem) {
   header.header .header.sl-flex {
-    padding-left: 2.5rem;
+    padding-left: 1rem;
     padding-right: 2.5rem;
   }
 }
 
 @media (min-width: 72rem) {
   header.header .header.sl-flex {
-    padding-left: 3rem;
+    padding-left: 1rem;
     padding-right: 3rem;
   }
 }