diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
new file mode 100644
index 0000000..634a9fa
--- /dev/null
+++ b/docs/assets/css/style.scss
@@ -0,0 +1,454 @@
+---
+---
+
+@import "{{ site.theme }}";
+
+:root {
+  --sg-primary: #2347a5;
+  --sg-primary-dark: #182f70;
+  --sg-teal: #087f83;
+  --sg-ink: #172033;
+  --sg-muted: #526071;
+  --sg-border: rgba(37, 55, 80, 0.16);
+  --sg-surface: #ffffff;
+  --sg-soft: #f6f8fb;
+  --sg-code-bg: #101827;
+}
+
+.container-lg {
+  max-width: 1160px;
+}
+
+.container-lg > h1:first-child {
+  display: none;
+}
+
+.markdown-body {
+  color: var(--sg-ink);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.markdown-body .sg-page a {
+  color: inherit;
+}
+
+.sg-page {
+  padding: 0.2rem 0 2rem;
+}
+
+.sg-product-nav {
+  align-items: center;
+  border-bottom: 1px solid var(--sg-border);
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 0 0 1.8rem;
+  padding: 0.25rem 0 1rem;
+}
+
+.sg-brand {
+  align-items: center;
+  color: var(--sg-ink) !important;
+  display: inline-flex;
+  font-size: 0.95rem;
+  font-weight: 800;
+  gap: 0.55rem;
+  text-decoration: none !important;
+}
+
+.sg-brand-logo {
+  display: block;
+  height: 1.9rem;
+  width: 1.9rem;
+}
+
+.sg-nav-links {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+  justify-content: flex-end;
+}
+
+.sg-nav-links a:not(.github-button) {
+  color: var(--sg-muted) !important;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-decoration: none !important;
+}
+
+.sg-nav-links a:hover {
+  color: var(--sg-primary) !important;
+}
+
+.sg-hero {
+  align-items: center;
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
+  margin: 0 0 2rem;
+  min-height: 430px;
+}
+
+.sg-hero-copy h1 {
+  border-bottom: 0;
+  color: var(--sg-ink);
+  font-size: clamp(2.1rem, 5vw, 3.7rem);
+  font-weight: 850;
+  letter-spacing: 0;
+  line-height: 1.04;
+  margin: 0 0 1rem;
+  padding: 0;
+}
+
+.sg-lede {
+  color: var(--sg-muted);
+  font-size: 1.05rem;
+  line-height: 1.75;
+  margin: 0;
+  max-width: 45rem;
+}
+
+.sg-eyebrow {
+  color: var(--sg-teal) !important;
+  font-size: 0.75rem !important;
+  font-weight: 850;
+  letter-spacing: 0.08em;
+  margin: 0 0 0.65rem;
+  text-transform: uppercase;
+}
+
+.sg-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem;
+  margin-top: 1.35rem;
+}
+
+.sg-button {
+  align-items: center;
+  border-radius: 7px;
+  display: inline-flex;
+  font-size: 0.83rem;
+  font-weight: 800;
+  min-height: 2.45rem;
+  padding: 0.68rem 0.9rem;
+  text-decoration: none !important;
+  transition: border-color 140ms ease, color 140ms ease, transform 140ms ease;
+}
+
+.sg-button:hover {
+  transform: translateY(-1px);
+}
+
+.sg-button-primary {
+  background: var(--sg-primary);
+  border: 1px solid var(--sg-primary);
+  color: #ffffff !important;
+}
+
+.sg-button-secondary {
+  background: var(--sg-surface);
+  border: 1px solid var(--sg-border);
+  color: var(--sg-ink) !important;
+}
+
+.sg-button-secondary:hover {
+  border-color: var(--sg-primary);
+  color: var(--sg-primary) !important;
+}
+
+.sg-proof-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+  margin-top: 1.35rem;
+}
+
+.sg-proof-row span {
+  background: var(--sg-soft);
+  border: 1px solid var(--sg-border);
+  border-radius: 999px;
+  color: var(--sg-muted);
+  font-size: 0.72rem;
+  font-weight: 750;
+  padding: 0.3rem 0.58rem;
+}
+
+.sg-terminal {
+  background: var(--sg-code-bg);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 8px;
+  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.2);
+  color: #d8e2f3;
+  overflow: hidden;
+  padding: 1rem;
+}
+
+.sg-terminal-bar {
+  display: flex;
+  gap: 0.38rem;
+  margin-bottom: 0.9rem;
+}
+
+.sg-terminal-bar span {
+  border-radius: 50%;
+  display: block;
+  height: 0.62rem;
+  width: 0.62rem;
+}
+
+.sg-terminal-bar span:nth-child(1) {
+  background: #ef5f57;
+}
+
+.sg-terminal-bar span:nth-child(2) {
+  background: #f6bd4f;
+}
+
+.sg-terminal-bar span:nth-child(3) {
+  background: #5fcf7d;
+}
+
+.sg-panel-title {
+  color: #ffffff !important;
+  font-size: 0.76rem !important;
+  font-weight: 850;
+  letter-spacing: 0.04em;
+  margin: 0 0 0.7rem;
+  text-transform: uppercase;
+}
+
+.sg-terminal pre,
+.sg-split pre {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  margin: 0;
+  padding: 0 !important;
+}
+
+.sg-terminal code,
+.sg-split pre code {
+  background: transparent !important;
+  color: inherit !important;
+  display: block;
+  font-size: 0.74rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.sg-muted {
+  color: var(--sg-muted);
+  font-size: 0.82rem;
+  line-height: 1.55;
+  margin-bottom: 0;
+}
+
+.sg-terminal .sg-muted {
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  color: #b9c7dc;
+  margin-top: 1rem;
+  padding-top: 0.85rem;
+}
+
+.sg-terminal .sg-muted code {
+  color: #ffffff !important;
+  display: inline;
+}
+
+.sg-metrics {
+  border-bottom: 1px solid var(--sg-border);
+  border-top: 1px solid var(--sg-border);
+  display: grid;
+  gap: 0;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 1rem 0 2.7rem;
+}
+
+.sg-metrics div {
+  border-right: 1px solid var(--sg-border);
+  padding: 1rem;
+}
+
+.sg-metrics div:last-child {
+  border-right: 0;
+}
+
+.sg-metrics strong {
+  color: var(--sg-primary);
+  display: block;
+  font-size: 1.35rem;
+  line-height: 1.2;
+}
+
+.sg-metrics span {
+  color: var(--sg-muted);
+  display: block;
+  font-size: 0.76rem;
+  font-weight: 700;
+  margin-top: 0.2rem;
+}
+
+.sg-section {
+  margin: 2.7rem 0;
+}
+
+.sg-section-heading {
+  max-width: 48rem;
+}
+
+.sg-section-heading h2 {
+  border-bottom: 0;
+  color: var(--sg-ink);
+  font-size: clamp(1.45rem, 3vw, 2rem);
+  font-weight: 850;
+  letter-spacing: 0;
+  line-height: 1.15;
+  margin: 0 0 1.15rem;
+  padding: 0;
+}
+
+.sg-card-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 1.2rem 0 0;
+}
+
+.sg-card,
+.sg-split article,
+.sg-doc-list a {
+  background: var(--sg-surface);
+  border: 1px solid var(--sg-border);
+  border-radius: 8px;
+}
+
+.sg-card {
+  padding: 1rem;
+}
+
+.sg-card h3,
+.sg-split h3 {
+  color: var(--sg-ink);
+  font-size: 1rem;
+  font-weight: 850;
+  letter-spacing: 0;
+  line-height: 1.25;
+  margin: 0 0 0.55rem;
+}
+
+.sg-card p,
+.sg-split p {
+  color: var(--sg-muted);
+  font-size: 0.84rem;
+  line-height: 1.65;
+  margin: 0;
+}
+
+.sg-split {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.sg-split article {
+  padding: 1rem;
+}
+
+.sg-split pre {
+  background: var(--sg-code-bg) !important;
+  border-radius: 7px;
+  color: #d8e2f3;
+  margin-top: 0.9rem;
+  padding: 0.85rem !important;
+}
+
+.sg-doc-list {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.sg-doc-list a {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  padding: 0.9rem 1rem;
+  text-decoration: none !important;
+  transition: border-color 140ms ease, transform 140ms ease;
+}
+
+.sg-doc-list a:hover {
+  border-color: var(--sg-primary);
+  transform: translateY(-1px);
+}
+
+.sg-doc-list span {
+  color: var(--sg-muted);
+  font-size: 0.76rem;
+}
+
+.sg-doc-list strong {
+  color: var(--sg-primary);
+  font-size: 0.95rem;
+}
+
+@media screen and (max-width: 920px) {
+  .sg-hero,
+  .sg-card-grid,
+  .sg-split,
+  .sg-doc-list {
+    grid-template-columns: 1fr;
+  }
+
+  .sg-hero {
+    min-height: 0;
+  }
+
+  .sg-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .sg-metrics div:nth-child(2) {
+    border-right: 0;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .sg-product-nav {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .sg-nav-links {
+    justify-content: flex-start;
+  }
+
+  .sg-hero-copy h1 {
+    font-size: 2rem;
+  }
+
+  .sg-actions {
+    flex-direction: column;
+  }
+
+  .sg-button {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .sg-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .sg-metrics div,
+  .sg-metrics div:nth-child(2) {
+    border-bottom: 1px solid var(--sg-border);
+    border-right: 0;
+  }
+
+  .sg-metrics div:last-child {
+    border-bottom: 0;
+  }
+}
diff --git a/docs/assets/images/sentinelguard-logo.svg b/docs/assets/images/sentinelguard-logo.svg
new file mode 100644
index 0000000..1cdef21
--- /dev/null
+++ b/docs/assets/images/sentinelguard-logo.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title desc">
+  <title id="title">SentinelGuard logo</title>
+  <desc id="desc">A shield with gateway routing lines for LLM security.</desc>
+  <defs>
+    <linearGradient id="shield" x1="12" y1="8" x2="52" y2="58" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2d5be3"/>
+      <stop offset="1" stop-color="#0b8f8f"/>
+    </linearGradient>
+    <linearGradient id="route" x1="21" y1="23" x2="46" y2="42" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffffff"/>
+      <stop offset="1" stop-color="#d8fff7"/>
+    </linearGradient>
+  </defs>
+  <path
+    fill="url(#shield)"
+    d="M32 5.5 53 13v15.3c0 14.5-8.2 25.2-21 30.2C19.2 53.5 11 42.8 11 28.3V13l21-7.5Z"
+  />
+  <path
+    fill="none"
+    stroke="#ffffff"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="3"
+    d="M22 23.5h15.5c4.4 0 7.5 3 7.5 7.1 0 4.2-3.1 7.2-7.5 7.2H25.7"
+    opacity=".92"
+  />
+  <path
+    fill="none"
+    stroke="url(#route)"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="3"
+    d="m31 17 7 6.5-7 6.5M33 31.5l-7.2 6.3 7.2 6.7"
+  />
+  <circle cx="21.5" cy="23.5" r="4.2" fill="#ffffff"/>
+  <circle cx="21.5" cy="23.5" r="2" fill="#2347a5"/>
+  <circle cx="24.8" cy="37.8" r="4.2" fill="#ffffff"/>
+  <circle cx="24.8" cy="37.8" r="2" fill="#087f83"/>
+</svg>
diff --git a/docs/index.md b/docs/index.md
index 34b79b0..f45a7be 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -6,21 +6,13 @@ description: Security-first LLM gateway and guardrails framework for AI applicat
 <div class="sg-page">
   <nav class="sg-product-nav" aria-label="SentinelGuard links">
     <a class="sg-brand" href="index.html" aria-label="SentinelGuard home">
-      <span class="sg-brand-mark">SG</span>
+      <img class="sg-brand-logo" src="assets/images/sentinelguard-logo.svg" alt="" />
       <span>SentinelGuard</span>
     </a>
     <div class="sg-nav-links">
       <a href="getting-started.html">Docs</a>
       <a href="gateway.html">Gateway</a>
       <a href="deployment.html">Deploy</a>
-      <a
-        class="github-button"
-        href="https://github.com/aitechnav/Sentinel_Guard"
-        data-icon="octicon-star"
-        data-size="large"
-        data-show-count="true"
-        aria-label="Star aitechnav/Sentinel_Guard on GitHub"
-      >Star</a>
     </div>
   </nav>
 
@@ -80,7 +72,7 @@ sentinelguard gateway \
     </div>
     <div>
       <strong>2 modes</strong>
-      <span>library and proxy</span>
+      <span>package and proxy</span>
     </div>
     <div>
       <strong>local</strong>
@@ -174,5 +166,3 @@ print(result.is_valid, result.failed_scanners)</code></pre>
     </div>
   </section>
 </div>
-
-<script async defer src="https://buttons.github.io/buttons.js"></script>
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 3b15122..e574130 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -59,17 +59,10 @@
   text-decoration: none !important;
 }
 
-.sg-brand-mark {
-  align-items: center;
-  background: var(--sg-primary);
-  border-radius: 0.35rem;
-  color: #ffffff;
-  display: inline-flex;
-  font-size: 0.72rem;
-  height: 1.7rem;
-  justify-content: center;
-  letter-spacing: 0;
-  width: 1.7rem;
+.sg-brand-logo {
+  display: block;
+  height: 1.9rem;
+  width: 1.9rem;
 }
 
 .sg-nav-links {
diff --git a/mkdocs.yml b/mkdocs.yml
index 61dbe8f..a8890a2 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -2,18 +2,13 @@ site_name: SentinelGuard
 site_description: Security guardrails, LLM gateway controls, and observability for AI applications
 site_url: https://aitechnav.github.io/Sentinel_Guard/
 use_directory_urls: false
-repo_url: https://github.com/aitechnav/Sentinel_Guard
-repo_name: aitechnav/Sentinel_Guard
-edit_uri: edit/main/docs/
 copyright: Copyright &copy; SentinelGuard Contributors
 
 theme:
   name: material
   custom_dir: overrides
-  logo: material/shield-check
-  favicon: material/shield-check
-  icon:
-    repo: fontawesome/brands/github
+  logo: assets/images/sentinelguard-logo.svg
+  favicon: assets/images/sentinelguard-logo.svg
   features:
     - announce.dismiss
     - content.code.copy