diff --git a/.gitignore b/.gitignore
index 737f442c..6e14745d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,4 @@ yarn-debug.log*
 yarn-error.log*
 updated_url_mappings.json
 .claude/
+screenshots/
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index f3662435..37c14957 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -30,6 +30,7 @@ const config: Config = {
 
   onBrokenLinks: "throw",
   markdown: {
+    mermaid: true,
     hooks: {
       onBrokenMarkdownLinks: "throw",
     },
@@ -96,7 +97,7 @@ const config: Config = {
     ],
   ],
 
-  themes: ["docusaurus-theme-openapi-docs"],
+  themes: ["docusaurus-theme-openapi-docs", "@docusaurus/theme-mermaid"],
   stylesheets: [
     "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
   ],
@@ -162,6 +163,7 @@ const config: Config = {
       logo: {
         alt: "TagoIO Logo",
         src: "img/tagoio-official-logo.svg",
+        srcDark: "img/tagoio-official-logo-white.svg",
         width: 110,
         height: 26,
       },
@@ -212,6 +214,24 @@ const config: Config = {
     prism: {
       theme: prismThemes.nightOwlLight,
       darkTheme: prismThemes.nightOwl,
+      additionalLanguages: ["abnf", "yaml"],
+    },
+    mermaid: {
+      theme: {
+        light: "base",
+        dark: "dark",
+      },
+      options: {
+        themeVariables: {
+          primaryColor: "#2cb1bc",
+          primaryTextColor: "#ffffff",
+          primaryBorderColor: "transparent",
+          lineColor: "#707070",
+          edgeLabelBackground: "transparent",
+          clusterBkg: "transparent",
+          clusterBorder: "#2a2a2a",
+        },
+      },
     },
   } satisfies Preset.ThemeConfig,
 };
diff --git a/package-lock.json b/package-lock.json
index 724e4f27..514d00b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@docusaurus/core": "3.9.2",
         "@docusaurus/preset-classic": "3.9.2",
+        "@docusaurus/theme-mermaid": "^3.9.2",
         "@mdx-js/react": "^3.1.0",
         "clsx": "^2.0.0",
         "docusaurus-plugin-openapi-docs": "^4.7.1",
@@ -4236,6 +4237,34 @@
         "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@docusaurus/theme-mermaid": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-mermaid/-/theme-mermaid-3.9.2.tgz",
+      "integrity": "sha512-5vhShRDq/ntLzdInsQkTdoKWSzw8d1jB17sNPYhA/KvYYFXfuVEGHLM6nrf8MFbV8TruAHDG21Fn3W4lO8GaDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@docusaurus/core": "3.9.2",
+        "@docusaurus/module-type-aliases": "3.9.2",
+        "@docusaurus/theme-common": "3.9.2",
+        "@docusaurus/types": "3.9.2",
+        "@docusaurus/utils-validation": "3.9.2",
+        "mermaid": ">=11.6.0",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0"
+      },
+      "peerDependencies": {
+        "@mermaid-js/layout-elk": "^0.1.9",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@mermaid-js/layout-elk": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@docusaurus/theme-search-algolia": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.9.2.tgz",
diff --git a/package.json b/package.json
index ac693a41..fc185a25 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   "dependencies": {
     "@docusaurus/core": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
+    "@docusaurus/theme-mermaid": "^3.9.2",
     "@mdx-js/react": "^3.1.0",
     "clsx": "^2.0.0",
     "docusaurus-plugin-openapi-docs": "^4.7.1",
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index 25e7f557..43026330 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -1,7 +1,6 @@
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import Heading from "@theme/Heading";
-import clsx from "clsx";
 import type { ReactNode } from "react";
 import styles from "./styles.module.css";
 
@@ -14,7 +13,7 @@ type FeatureItem = {
 
 function Feature({ title, imgSrc, href, description }: FeatureItem) {
   return (
-    <div className={clsx("col col--3", styles.featureCol)}>
+    <div className={styles.featureCol}>
       <Link to={href} className={styles.featureLink}>
         <div className={styles.featureCard}>
           <div className="text--center">
@@ -103,12 +102,10 @@ export default function HomepageFeatures(): ReactNode {
 
   return (
     <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props) => (
-            <Feature key={props.title} {...props} />
-          ))}
-        </div>
+      <div className={styles.featureRow}>
+        {FeatureList.map((props) => (
+          <Feature key={props.title} {...props} />
+        ))}
       </div>
     </section>
   );
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index 31e77167..128e909c 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -24,14 +24,14 @@
   justify-content: center;
   background: linear-gradient(
     135deg,
-    rgba(0, 123, 255, 0.08) 0%,
-    rgba(0, 123, 255, 0.04) 100%
+    rgba(44, 177, 188, 0.08) 0%,
+    rgba(44, 177, 188, 0.04) 100%
   );
   border-radius: 16px;
   margin-bottom: 1.5rem;
   position: relative;
   overflow: hidden;
-  border: 1px solid rgba(0, 123, 255, 0.1);
+  border: 1px solid rgba(44, 177, 188, 0.1);
 }
 
 /* Light mode specific stronger shine effect */
@@ -45,9 +45,9 @@
   background: linear-gradient(
     135deg,
     transparent 0%,
-    rgba(0, 123, 255, 0.2) 30%,
+    rgba(44, 177, 188, 0.2) 30%,
     rgba(255, 255, 255, 0.3) 50%,
-    rgba(0, 123, 255, 0.15) 70%,
+    rgba(44, 177, 188, 0.15) 70%,
     transparent 100%
   );
   opacity: 0;
@@ -64,9 +64,20 @@ html[data-theme="dark"] .featureCard > :first-child::before {
   );
 }
 
+/* Row layout for feature cards */
+.featureRow {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
 /* Column layout for feature cards */
 .featureCol {
   display: flex;
+  flex: 0 0 20%;
 }
 
 /* Remove link styling while maintaining block behavior */
@@ -78,7 +89,7 @@ html[data-theme="dark"] .featureCard > :first-child::before {
 
 /* Card styling with stronger light mode effects */
 .featureCard {
-  background: var(--ifm-background-surface-color);
+  background: var(--surface-elevated);
   border-radius: 16px;
   padding: 2.5rem 2rem;
   margin: 1rem;
@@ -94,20 +105,39 @@ html[data-theme="dark"] .featureCard > :first-child::before {
   height: 100%;
 }
 
-/* Mobile responsive adjustments */
-@media (max-width: 768px) {
+/* Tablet responsive adjustments */
+@media (max-width: 1100px) {
+  .featureCol {
+    flex: 0 0 33.333%;
+    max-width: 33.333%;
+    margin-bottom: 1rem;
+  }
+}
+
+@media (max-width: 768px) and (min-width: 577px) {
+  .featureCol {
+    flex: 0 0 50%;
+    max-width: 50%;
+    margin-bottom: 1rem;
+  }
+}
+
+@media (max-width: 576px) {
   .featureCard {
     margin: 0.5rem;
     padding: 1.5rem;
   }
   .featureCol {
+    flex: 0 0 100%;
+    max-width: 100%;
     margin-bottom: 1rem;
   }
 }
 
 /* Dark theme specific adjustments */
 html[data-theme="dark"] .featureCard {
-  border-color: rgba(255, 255, 255, 0.06);
+  background: var(--surface-elevated);
+  border-color: #363749;
   box-shadow:
     0 2px 20px rgba(0, 0, 0, 0.3),
     0 1px 3px rgba(0, 0, 0, 0.4);
@@ -118,7 +148,7 @@ html[data-theme="dark"] .featureCard {
   box-shadow:
     0 12px 40px rgba(0, 0, 0, 0.16),
     0 8px 24px rgba(0, 0, 0, 0.12);
-  border-color: rgba(0, 123, 255, 0.25);
+  border-color: rgba(44, 177, 188, 0.25);
 }
 
 /* More visible icon shadows on hover */
@@ -135,8 +165,8 @@ html[data-theme="dark"] .featureCard {
 html[data-theme="dark"] .featureCard > :first-child {
   background: linear-gradient(
     135deg,
-    rgba(0, 123, 255, 0.08) 0%,
-    rgba(0, 123, 255, 0.03) 100%
+    rgba(44, 177, 188, 0.08) 0%,
+    rgba(44, 177, 188, 0.03) 100%
   );
 }
 
@@ -147,7 +177,7 @@ html[data-theme="dark"] .featureImg {
 
 /* Dark theme hover effects - enhanced lighting only */
 html[data-theme="dark"] .featureCard:hover {
-  border-color: rgba(0, 123, 255, 0.3);
+  border-color: rgba(44, 177, 188, 0.3);
   box-shadow:
     0 8px 32px rgba(0, 0, 0, 0.4),
     0 4px 16px rgba(0, 0, 0, 0.3);
@@ -170,7 +200,7 @@ html[data-theme="dark"] .featureCard:hover .featureImg {
 
 /* Title color change on hover */
 .featureCard:hover h3 {
-  color: #007bff;
+  color: #2cb1bc;
 }
 
 /* Card description text styling */
diff --git a/src/css/custom.css b/src/css/custom.css
index ad62a81d..cd7c8112 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,12 +1,13 @@
 @import "./api-docs.css";
 
 :root {
-  --c-blue-0: #f0f6ff;
-  --c-blue-70: #4d8dff;
-  --c-blue-90: #1b6dff;
+  /* Legacy aliases (kept for any remaining references) */
+  --c-blue-0: #e6f5f3;
+  --c-blue-70: #2cb1bc;
+  --c-blue-90: #1a9aa0;
   --c-indigo-10: #f6f8fc;
-  --c-indigo-20: #e9edf3;
-  --c-indigo-30: #dee3ea;
+  --c-indigo-20: #e8e7e0;
+  --c-indigo-30: #e8e7e0;
   --c-indigo-40: #ced6e0;
   --c-indigo-60: #92a0b3;
   --c-indigo-80: #445b78;
@@ -18,12 +19,13 @@
   --c-gray-0: #f8f9fa;
   --c-gray-90: #2f2f2f;
 
-  --ifm-color-primary: #3880ff;
-  --ifm-link-color: var(--c-blue-90);
-  --ifm-link-hover-color: #1b6dffcc;
+  /* Primary: warm teal */
+  --ifm-color-primary: #17888d;
+  --ifm-link-color: #17888d;
+  --ifm-link-hover-color: #126f73;
 
   --ifm-font-family-base:
-    -apple-system, BlinkMacSystemFont, Inter, Helvetica, Arial, sans-serif,
+    "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI emoji";
   --ifm-font-family-monospace:
     "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", Menlo,
@@ -32,25 +34,26 @@
   --ifm-font-weight-bold: 700;
 
   --ifm-navbar-height: 3.75rem;
-  --ifm-navbar-background-color: #fff;
+  --ifm-navbar-background-color: #f5f5f2;
   --ifm-navbar-link-color: var(--ifm-font-color-base);
   --ifm-navbar-link-hover-color: initial;
 
-  --ifm-background-color: #fff;
-  --ifm-background-surface-color: #fff;
-  --ifm-color-content: #1c1e21;
+  /* Light mode: warm cream */
+  --ifm-background-color: #fafaf8;
+  --ifm-background-surface-color: #f5f5f2;
+  --ifm-color-content: #1a1b26;
   --ifm-font-color-base: var(--ifm-color-content);
 
-  --home-features-bg: #f8f9fa;
+  --home-features-bg: #f5f5f2;
 
-  --ifm-code-background: var(--c-indigo-10);
+  --ifm-code-background: #f0efe8;
   --ifm-code-border-radius: 0.4rem;
   --ifm-pre-background: var(--ifm-code-background);
 
   --ifm-menu-color: var(--c-indigo-80);
   --ifm-menu-color-active: var(--ifm-link-color);
   --ifm-menu-color-background-hover: var(--ifm-hover-overlay);
-  --ifm-menu-color-background-active: var(--c-blue-0);
+  --ifm-menu-color-background-active: #e6f5f3;
   --ifm-menu-link-padding-vertical: 0.5rem;
 
   --dropdown-icon-width: 0.625rem;
@@ -59,12 +62,17 @@
   --ifm-menu-link-sublist-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiBmaWxsPSJub25lIj48cGF0aCBzdHJva2U9IiMwMzA2MEIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik05IDUgNSAxIDEgNSIvPjwvc3ZnPg==");
   --ifm-menu-link-sublist-icon-filter: none;
 
-  --sidebar-border-c: #f3f3f3;
+  --sidebar-border-c: #e8e7e0;
 
   --doc-sidebar-width: 300px;
   --doc-item-container-width: 50rem;
   --sidebar-category-c: var(--c-carbon-100);
-  --footer-border-c: var(--c-indigo-30);
+  --footer-border-c: #e8e7e0;
+
+  /* Surface hierarchy */
+  --surface-elevated: #ffffff;
+  --surface-raised: #f0efe8;
+  --border-visible: #e8e7e0;
 
   /* Animation durations */
   --animation-fast: 200ms;
@@ -76,35 +84,61 @@
 
 html[data-theme="dark"] {
   --ifm-color-scheme: dark;
-  --ifm-background-color: #1b1b1d;
-  --ifm-background-surface-color: #242526;
-  --ifm-color-content: #e3e3e3;
+
+  /* Dark mode: neutral gray (VitePress-inspired) */
+  --ifm-background-color: #121212;
+  --ifm-background-surface-color: #1a1a1a;
+  --ifm-color-content: #e0e0e0;
   --ifm-font-color-base: var(--ifm-color-content);
-  --ifm-code-background: #232a33;
-  --ifm-menu-color: #c7cbd1;
-  --ifm-menu-color-background-active: #ffffff12;
+  --ifm-heading-color: #ebebeb;
+  --ifm-code-background: #161616;
+
+  /* Surface hierarchy */
+  --surface-elevated: #1e1e1e;
+  --surface-raised: #252525;
+  --border-visible: #333333;
+
+  /* Emphasis scale overrides */
+  --ifm-color-emphasis-200: #1e1e1e;
+  --ifm-color-emphasis-300: #2a2a2a;
+  --ifm-color-emphasis-600: #707070;
+  --ifm-color-emphasis-700: #a0a0a0;
+  --ifm-color-emphasis-800: #e0e0e0;
+  --ifm-color-emphasis-900: #ebebeb;
+  --ifm-color-emphasis-1000: #ebebeb;
+
+  --ifm-menu-color: #a0a0a0;
+  --ifm-menu-color-background-active: #2cb1bc1a;
   --ifm-menu-link-sublist-icon-filter: invert(100%);
-  --sidebar-border-c: #2f2f2f;
+  --sidebar-border-c: #2a2a2a;
   --ifm-hover-overlay: #ffffff0d;
-  --ifm-link-color: var(--c-blue-70);
-  --ifm-link-hover-color: #4d8dffcc;
-  --sidebar-category-c: #fff;
-  --ifm-navbar-background-color: var(--ifm-background-surface-color);
-  --ifm-navbar-link-color: var(--c-gray-0);
-  --ifm-navbar-link-hover-color: var(--ifm-link-color);
-  --ifm-navbar-shadow: 0 1px 0 0 var(--c-gray-90);
-  --ifm-navbar-search-input-background-color: #ffffff1a;
-  --ifm-navbar-search-input-color: #fff;
-  --ifm-navbar-search-input-placeholder-color: #ffffff80;
-  --footer-border-c: var(--c-gray-90);
-  --home-features-bg: var(--ifm-background-color);
+
+  /* Primary: teal for dark mode */
+  --ifm-color-primary: #2cb1bc;
+  --ifm-link-color: #2cb1bc;
+  --ifm-link-hover-color: #36c5c9;
+
+  --sidebar-category-c: #ebebeb;
+  --ifm-navbar-background-color: #1a1a1a;
+  --ifm-navbar-link-color: #e0e0e0;
+  --ifm-navbar-link-hover-color: #2cb1bc;
+  --ifm-navbar-shadow: 0 1px 0 0 #2a2a2a;
+  --ifm-navbar-search-input-background-color: #252525;
+  --ifm-navbar-search-input-color: #e0e0e0;
+  --ifm-navbar-search-input-placeholder-color: #707070;
+  --footer-border-c: #2a2a2a;
+  --home-features-bg: #121212;
+
+  /* TOC and misc borders */
+  --ifm-toc-border-color: #2a2a2a;
+
   /* Keep right panel cards readable in dark */
-  --openapi-card-background-color: var(--ifm-background-surface-color);
+  --openapi-card-background-color: #1e1e1e;
 }
 
 /* Navbar */
 .navbar {
-  box-shadow: 0 1px 0 0 var(--c-indigo-20);
+  box-shadow: 0 1px 0 0 var(--border-visible);
   padding-top: 0; /* even top/bottom */
   padding-bottom: 0; /* even top/bottom */
 }
@@ -119,9 +153,6 @@ html[data-theme="dark"] {
   align-items: center;
   height: var(--ifm-navbar-height);
 }
-html[data-theme="dark"] .navbar__brand img {
-  filter: invert(1) brightness(1.2) contrast(1.1);
-}
 .navbar__items {
   display: flex;
   align-items: center;
@@ -134,7 +165,27 @@ html[data-theme="dark"] .navbar__brand img {
 }
 
 html[data-theme="dark"] .navbar {
-  box-shadow: 0 1px 0 0 var(--c-gray-90);
+  box-shadow: 0 1px 0 0 #2a2a2a;
+}
+
+/* Tighten navbar in narrow desktop range to prevent overlap */
+@media (min-width: 997px) and (max-width: 1200px) {
+  .navbar__link {
+    font-size: 0.78rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+  .navbar__brand {
+    margin-right: 0.25rem;
+  }
+  .navbar__title {
+    display: none !important;
+  }
+  /* Hide less essential right-side links */
+  .navbar__items--right a[href*="support.tago.io"],
+  .navbar__items--right a[href*="community.tago.io"] {
+    display: none !important;
+  }
 }
 
 /* Better Stack status badge: toggle light/dark iframes */
@@ -222,7 +273,7 @@ html[data-theme="dark"] .home-status-badge .status-badge--dark {
 
 /* Light mode-only footer background */
 html[data-theme="light"] .footer {
-  background: #f8f9fa;
+  background: #f2f2ee;
 }
 /* Light mode footer title color for better contrast */
 html[data-theme="light"] .footer__title {
@@ -267,7 +318,7 @@ html[data-theme="light"] .footer__bottom {
 /* Better contrast in dark mode */
 html[data-theme="dark"] .navbar__items:not(.navbar__items--right)
   .navbar__link--active {
-  color: #4d8dff;
+  color: #2cb1bc;
 }
 
 /* Remove active underline bar to avoid floating blue bar */
@@ -336,10 +387,10 @@ html[data-theme="dark"] .navbar__items:not(.navbar__items--right)
 /* Spacing between top-level (bold) categories like Ionic */
 .theme-doc-sidebar-item-category-level-1 > .menu__list
   > .menu__list-item:last-of-type {
-  padding-bottom: 1rem;
+  padding-bottom: 0.25rem;
 }
 .theme-doc-sidebar-item-category-level-1 {
-  margin-bottom: 1rem;
+  margin-bottom: 0.25rem;
 }
 
 /* Sidebar menu links */
@@ -347,7 +398,7 @@ html[data-theme="dark"] .navbar__items:not(.navbar__items--right)
   font-size: 0.813rem;
   font-weight: 500;
   letter-spacing: -0.01em;
-  line-height: 16px;
+  line-height: 1.5;
   color: var(--ifm-menu-color);
   padding: var(--ifm-menu-link-padding-vertical) 0.75rem;
   transition: opacity var(--animation-fast) ease-out;
@@ -452,7 +503,7 @@ html[data-theme="dark"] .navbar__items:not(.navbar__items--right)
   color: var(--sidebar-category-c);
   font-size: 0.938rem;
   font-weight: 600;
-  line-height: 100%;
+  line-height: 1.3;
 }
 
 /* Content width and headings */
@@ -623,6 +674,10 @@ code {
 }
 
 @media (max-width: 996px) {
+  /* Hide left-side nav links on mobile — they move into hamburger menu */
+  .navbar__items:not(.navbar__items--right) .navbar__link {
+    display: none !important;
+  }
   /* Ensure right-side container is visible */
   .navbar__items--right {
     display: flex !important;
@@ -691,17 +746,17 @@ code {
 
 /* Dark mode colors for better contrast */
 html[data-theme="dark"] .changelog-timeline__item a {
-  color: var(--c-gray-0) !important;
+  color: #a0a0a0 !important;
 }
 html[data-theme="dark"] .changelog-timeline__item a:hover {
-  color: #ffffff !important;
+  color: #e0e0e0 !important;
 }
 
 /* Breadcrumbs – dark mode accessibility */
 html[data-theme="dark"] {
   /* Ensure active crumb has adequate contrast without implying interactivity */
   --ifm-breadcrumb-color-active: var(--ifm-font-color-base);
-  --ifm-breadcrumb-item-background-active: #ffffff14;
+  --ifm-breadcrumb-item-background-active: #252525;
 }
 /* Only real links should look interactive */
 html[data-theme="dark"] a.breadcrumbs__link {
@@ -765,12 +820,12 @@ html[data-theme="dark"] .breadcrumbs__item--active .breadcrumbs__link {
   );
 }
 
-/* Improve contrast in dark mode with white glow and animation */
+/* Improve contrast in dark mode with teal glow and animation */
 html[data-theme="dark"] {
-  --timeline-line: rgba(255, 255, 255, 0.22);
-  --timeline-line-strong: rgba(255, 255, 255, 0.85);
-  --timeline-dot: #ffffff;
-  --timeline-dot-glow: rgba(255, 255, 255, 0.45);
+  --timeline-line: rgba(44, 177, 188, 0.22);
+  --timeline-line-strong: rgba(44, 177, 188, 0.7);
+  --timeline-dot: #2cb1bc;
+  --timeline-dot-glow: rgba(44, 177, 188, 0.35);
 }
 html[data-theme="dark"] .timeline:before {
   background: var(--timeline-line);
@@ -803,13 +858,13 @@ html[data-theme="dark"] .timeline--current-year:before {
 }
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 0 0 rgba(56, 128, 255, 0.5);
+    box-shadow: 0 0 0 0 rgba(44, 177, 188, 0.5);
   }
   70% {
-    box-shadow: 0 0 0 8px rgba(56, 128, 255, 0.05);
+    box-shadow: 0 0 0 8px rgba(44, 177, 188, 0.05);
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(56, 128, 255, 0.05);
+    box-shadow: 0 0 0 0 rgba(44, 177, 188, 0.05);
   }
 }
 
@@ -857,28 +912,19 @@ html[data-theme="dark"] .timeline--current-year:before {
   color: var(--ifm-color-emphasis-700);
 }
 
-/* Dark mode: make documentation links more distinguishable */
+/* Dark mode: teal links with semi-transparent underline */
 html[data-theme="dark"] .markdown a,
 html[data-theme="dark"] .theme-doc-markdown a {
-  color: var(--ifm-font-color-base) !important;
+  color: #2cb1bc !important;
   text-decoration: underline;
+  text-decoration-color: #2cb1bc66;
   text-underline-offset: 2px;
   text-decoration-thickness: 1.5px;
 }
 html[data-theme="dark"] .markdown a:hover,
 html[data-theme="dark"] .theme-doc-markdown a:hover {
-  color: #ffffff !important;
-}
-
-/* Prefer variable override so built-in link styles pick up neutral color */
-html[data-theme="dark"] .theme-doc-markdown {
-  --ifm-link-color: var(--ifm-font-color-base);
-  --ifm-link-hover-color: #ffffff;
-}
-/* Fallback: set for doc pages when container classes differ */
-html.docs-doc-page[data-theme="dark"] {
-  --ifm-link-color: var(--ifm-font-color-base);
-  --ifm-link-hover-color: #ffffff;
+  color: #36c5c9 !important;
+  text-decoration-color: #36c5c9;
 }
 
 /* Make whole card clickable affordance */
@@ -1022,7 +1068,7 @@ html[data-theme="dark"] .youtube-container {
 .mermaid rect.actor,
 .mermaid .node rect {
   stroke: none !important;
-  fill: black !important;
+  fill: #17888d !important;
 }
 .mermaid .actor tspan {
   fill: white !important;
@@ -1051,3 +1097,310 @@ html[data-theme="dark"] .mermaid .messageText {
 .mermaid .node div {
   color: white;
 }
+/* Allow wide diagrams to scroll instead of shrinking */
+.mermaid svg {
+  max-width: none;
+  min-width: fit-content;
+}
+
+/* ============================================================
+   Phase 5: Dark mode surface hierarchy
+   ============================================================ */
+
+/* Light mode code blocks — subtle border for distinction */
+html[data-theme="light"] pre {
+  border: 1px solid var(--border-visible);
+}
+
+/* Dark mode code blocks — inset feel */
+html[data-theme="dark"] pre {
+  background: #161616 !important;
+  border: 1px solid #2a2a2a;
+}
+
+/* Dark mode sidebar surface */
+html[data-theme="dark"] .theme-doc-sidebar-container {
+  background: #1a1a1a;
+  border-right-color: #2a2a2a;
+}
+
+/* Dark mode footer surface */
+html[data-theme="dark"] .footer {
+  background: #1a1a1a;
+}
+
+/* Dark mode cards — elevated surface */
+html[data-theme="dark"] .timeline-card {
+  background: var(--surface-elevated);
+  border-color: #2a2a2a;
+}
+html[data-theme="dark"] .changelog-chip {
+  background: var(--surface-elevated);
+  border-color: #2a2a2a;
+}
+
+/* Dark mode OpenAPI cards and forms */
+html[data-theme="dark"] .openapi-explorer__request-form {
+  background: var(--surface-elevated);
+  border-color: #2a2a2a;
+}
+html[data-theme="dark"] details.openapi-explorer__details-container {
+  background: #121212;
+  border-color: #2a2a2a;
+}
+
+/* ============================================================
+   Dark mode admonitions — elegant left-border style (VitePress-inspired)
+   ============================================================ */
+/* Light mode admonitions — clean card with left border */
+.alert {
+  border: none;
+  border-left: 4px solid var(--ifm-color-emphasis-300);
+  background: var(--ifm-background-surface-color);
+  border-radius: 0 8px 8px 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+html[data-theme="dark"] .alert {
+  border: none;
+  border-left: 4px solid #2cb1bc;
+  background: rgba(44, 177, 188, 0.06);
+  border-radius: 0 8px 8px 0;
+  box-shadow: none;
+  color: var(--ifm-font-color-base);
+}
+html[data-theme="dark"] .alert--warning {
+  border-left-color: #f0c040;
+  background: rgba(240, 192, 64, 0.06);
+}
+html[data-theme="dark"] .alert--danger {
+  border-left-color: #f38ba8;
+  background: rgba(243, 139, 168, 0.06);
+}
+/* Heading text color matches left border */
+html[data-theme="dark"] .alert--info [class*="admonitionHeading"],
+html[data-theme="dark"] .alert--success [class*="admonitionHeading"],
+html[data-theme="dark"] .alert--secondary [class*="admonitionHeading"] {
+  color: #2cb1bc;
+}
+html[data-theme="dark"] .alert--warning [class*="admonitionHeading"] {
+  color: #f0c040;
+}
+html[data-theme="dark"] .alert--danger [class*="admonitionHeading"] {
+  color: #f38ba8;
+}
+
+/* ============================================================
+   Mermaid — shared overrides (both light and dark)
+   ============================================================ */
+
+/* All node labels white — teal backgrounds need white text */
+.mermaid .nodeLabel {
+  color: #fff !important;
+  fill: #fff !important;
+}
+
+/* Light mode only: stadium/path nodes have light backgrounds — reset to dark text */
+html[data-theme="light"] .mermaid .node:has(path) .nodeLabel {
+  color: #333 !important;
+  fill: #333 !important;
+}
+
+/* Block-beta text — always white on teal blocks */
+.mermaid .block .nodeLabel {
+  color: #fff !important;
+}
+
+/* ============================================================
+   Mermaid dark mode — comprehensive overrides
+   ============================================================ */
+
+/* Default SVG text fill → light for dark backgrounds */
+html[data-theme="dark"] .mermaid svg {
+  color: #e0e0e0;
+}
+html[data-theme="dark"] .mermaid svg[id^="mermaid"] {
+  fill: #e0e0e0 !important;
+}
+
+/* Node labels — white text */
+html[data-theme="dark"] .mermaid .nodeLabel,
+html[data-theme="dark"] .mermaid .node .label,
+html[data-theme="dark"] .mermaid .label text,
+html[data-theme="dark"] .mermaid .label span {
+  color: #fff !important;
+  fill: #fff !important;
+}
+
+/* Edge labels (e.g. "TagoTiP", "TagoTiP/S") */
+html[data-theme="dark"] .mermaid .labelBkg {
+  background: #1e1e1e !important;
+  outline: 1px solid rgba(44, 177, 188, 0.35);
+  border-radius: 3px !important;
+}
+html[data-theme="dark"] .mermaid .labelBkg p,
+html[data-theme="dark"] .mermaid .edgeLabel span,
+html[data-theme="dark"] .mermaid .edgeLabel span p {
+  color: #fff !important;
+  background: transparent !important;
+}
+
+/* Edge lines/paths — visible on dark backgrounds */
+html[data-theme="dark"] .mermaid .flowchart-link,
+html[data-theme="dark"] .mermaid .edge-pattern-solid,
+html[data-theme="dark"] .mermaid .edgePath path {
+  stroke: #8a8a8a !important;
+}
+
+/* Arrowheads */
+html[data-theme="dark"] .mermaid marker path {
+  fill: #8a8a8a !important;
+  stroke: #8a8a8a !important;
+}
+
+/* Secondary/tertiary node shapes (stadium, circle, etc.) — darken light fills */
+html[data-theme="dark"] .mermaid .node path,
+html[data-theme="dark"] .mermaid .node circle {
+  fill: #1a5c60 !important;
+  stroke: #2cb1bc !important;
+}
+
+/* Block-beta text inside blocks */
+html[data-theme="dark"] .mermaid .block .nodeLabel,
+html[data-theme="dark"] .mermaid foreignObject div {
+  color: #fff !important;
+}
+
+/* ============================================================
+   Inline code dark mode — subtle border for distinction
+   ============================================================ */
+html[data-theme="light"] :not(pre) > code {
+  color: #17888d;
+  background: rgba(23, 136, 141, 0.08);
+  border: 1px solid rgba(23, 136, 141, 0.2);
+}
+html[data-theme="dark"] :not(pre) > code {
+  color: #2cb1bc;
+  background: rgba(44, 177, 188, 0.1);
+  border: 1px solid rgba(44, 177, 188, 0.25);
+}
+
+/* ============================================================
+   Blockquote — callout style (both modes)
+   ============================================================ */
+.markdown blockquote {
+  border-left: 4px solid var(--ifm-color-emphasis-300);
+  background: rgba(44, 177, 188, 0.05);
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border-radius: 0 8px 8px 0;
+  color: var(--ifm-color-emphasis-700);
+}
+.markdown blockquote > p {
+  margin: 0;
+}
+
+/* ============================================================
+   Tables — teal accent header, clean rows
+   ============================================================ */
+.markdown table {
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+}
+.markdown thead tr {
+  background: transparent;
+  border-bottom: 2px solid #2cb1bc;
+}
+.markdown thead th {
+  font-weight: 600;
+  font-size: 0.8rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ifm-color-emphasis-700);
+}
+.markdown tbody tr {
+  background: transparent;
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+}
+.markdown tbody tr:nth-child(2n) {
+  background: transparent;
+}
+.markdown tbody tr:last-child {
+  border-bottom: none;
+}
+
+/* ============================================================
+   DocSearch — light mode overrides
+   ============================================================ */
+:root {
+  --docsearch-primary-color: #17888d;
+  --docsearch-highlight-color: #17888d;
+  --docsearch-searchbox-shadow: inset 0 0 0 2px #17888d;
+}
+.DocSearch-Hit[aria-selected="true"] a {
+  background: rgba(23, 136, 141, 0.1);
+}
+.DocSearch-Button {
+  border-color: var(--border-visible);
+}
+.DocSearch-Button:hover {
+  border-color: #ced6e0;
+  box-shadow: none;
+}
+.DocSearch-Button-Key {
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--border-visible);
+  color: var(--c-indigo-60);
+  box-shadow: none;
+}
+.DocSearch-Search-Icon {
+  color: var(--c-indigo-60);
+}
+
+/* ============================================================
+   DocSearch modal — dark mode overrides
+   ============================================================ */
+html[data-theme="dark"] {
+  --docsearch-modal-background: #1a1a1a;
+  --docsearch-searchbox-background: #252525;
+  --docsearch-searchbox-focus-background: #252525;
+  --docsearch-hit-background: #1e1e1e;
+  --docsearch-hit-color: #e0e0e0;
+  --docsearch-hit-active-color: #fff;
+  --docsearch-highlight-color: #2cb1bc;
+  --docsearch-muted-color: #707070;
+  --docsearch-container-background: rgba(0, 0, 0, 0.6);
+  --docsearch-footer-background: #1a1a1a;
+  --docsearch-footer-shadow: 0 -1px 0 0 #2a2a2a;
+  --docsearch-key-gradient: linear-gradient(-225deg, #252525, #1e1e1e);
+  --docsearch-key-shadow:
+    inset 0 -2px 0 0 #333, inset 0 0 1px 1px #333,
+    0 1px 2px 1px rgba(0, 0, 0, 0.3);
+  --docsearch-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  --docsearch-text-color: #e0e0e0;
+  --docsearch-primary-color: #2cb1bc;
+  --docsearch-logo-color: #707070;
+  --docsearch-searchbox-shadow: inset 0 0 0 2px #2cb1bc;
+}
+html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a {
+  background: rgba(44, 177, 188, 0.12);
+}
+html[data-theme="dark"] .DocSearch-Button {
+  background: #252525;
+  border-color: #333;
+  color: #a0a0a0;
+}
+html[data-theme="dark"] .DocSearch-Button:hover {
+  background: #2a2a2a;
+  border-color: #444;
+  box-shadow: none;
+}
+html[data-theme="dark"] .DocSearch-Button-Key {
+  background: #333;
+  border: 1px solid #444;
+  color: #a0a0a0;
+  box-shadow: none;
+}
+html[data-theme="dark"] .DocSearch-Search-Icon {
+  color: #707070;
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 523bda2f..1fc971bb 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -22,9 +22,6 @@
 .brandLogo {
   margin-bottom: 0;
 }
-html[data-theme="dark"] .brandLogo {
-  filter: invert(1) brightness(1.2) contrast(1.1);
-}
 .brandDoc {
   font-weight: 700;
   font-size: 0.875rem;
@@ -106,3 +103,13 @@ html[data-theme="dark"] .brandLogo {
 .demoButton:active {
   opacity: 0.85;
 }
+
+.getStartedButton {
+  border: 2px solid var(--ifm-color-emphasis-700);
+  color: var(--ifm-color-emphasis-800);
+}
+.getStartedButton:hover {
+  background: var(--ifm-color-emphasis-700);
+  color: var(--ifm-color-emphasis-0);
+  border-color: var(--ifm-color-emphasis-700);
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index de3bfe04..7f420969 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,5 @@
 import Link from "@docusaurus/Link";
+import { useColorMode } from "@docusaurus/theme-common";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Heading from "@theme/Heading";
@@ -9,13 +10,18 @@ import type { ReactNode } from "react";
 import styles from "./index.module.css";
 
 function HomepageHeader() {
+  const { colorMode } = useColorMode();
+  const logoSrc =
+    colorMode === "dark"
+      ? "/img/tagoio-official-logo-white.svg"
+      : "/img/tagoio-official-logo.svg";
   return (
     <header className={clsx("hero", styles.heroBanner)}>
       <div className="container">
         <div className={styles.brandRow}>
           <span className={styles.brandDoc}>Documentation</span>
           <img
-            src={useBaseUrl("/img/tagoio-official-logo.svg")}
+            src={useBaseUrl(logoSrc)}
             alt="TagoIO"
             width={160}
             height={40}
@@ -61,7 +67,10 @@ function HomepageHeader() {
             Request a Demo
           </Link>
           <Link
-            className="button button--outline button--secondary button--lg"
+            className={clsx(
+              "button button--outline button--lg",
+              styles.getStartedButton,
+            )}
             to="https://tago.io/pricing"
           >
             Get Started
diff --git a/src/theme/Mermaid.tsx b/src/theme/Mermaid.tsx
index 049f5642..555358cd 100644
--- a/src/theme/Mermaid.tsx
+++ b/src/theme/Mermaid.tsx
@@ -5,11 +5,12 @@ mermaid.initialize({
   startOnLoad: true,
 });
 
-const Mermaid = ({ chart }) => {
+const Mermaid = ({ chart, value }: { chart?: string; value?: string }) => {
+  const code = value || chart;
   useEffect(() => {
     mermaid.contentLoaded();
   }, []);
-  return <div className="mermaid">{chart}</div>;
+  return <div className="mermaid">{code}</div>;
 };
 
 export default Mermaid;
diff --git a/static/img/tagoio-official-logo-white.svg b/static/img/tagoio-official-logo-white.svg
new file mode 100644
index 00000000..24099956
--- /dev/null
+++ b/static/img/tagoio-official-logo-white.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 98 26" overflow="visible">
+  <g>
+    <path d="M 98 5.461 L 98 20.539 C 98 23.549 95.536 26 92.509 26 L 70.44 26 C 67.413 26 64.949 23.549 64.949 20.539 L 64.949 5.461 C 64.949 2.451 67.413 0 70.44 0 L 92.509 0 C 95.536 0 98 2.451 98 5.461 Z M 74.618 5.821 L 70.601 5.821 L 70.601 20.179 L 74.618 20.179 Z M 92.335 12.987 C 92.335 11.801 92.161 10.749 91.813 9.83 C 91.465 8.924 90.956 8.152 90.313 7.526 C 89.644 6.9 88.88 6.433 87.97 6.114 C 87.072 5.794 86.068 5.634 84.957 5.634 C 83.845 5.634 82.841 5.794 81.943 6.114 C 81.046 6.433 80.256 6.9 79.613 7.526 C 78.97 8.152 78.462 8.924 78.113 9.83 C 77.765 10.736 77.591 11.788 77.591 12.987 C 77.591 14.185 77.765 15.238 78.113 16.157 C 78.462 17.076 78.97 17.848 79.613 18.474 C 80.269 19.1 81.046 19.567 81.943 19.886 C 82.841 20.206 83.858 20.366 84.957 20.366 C 86.055 20.366 87.059 20.206 87.97 19.886 C 88.88 19.567 89.67 19.1 90.313 18.474 C 90.956 17.848 91.465 17.076 91.813 16.157 C 92.161 15.238 92.335 14.172 92.335 12.987 Z" fill="rgb(255, 255, 255)"></path>
+    <path d="M 87.322 9.911 C 87.041 9.591 86.693 9.351 86.291 9.205 C 85.889 9.045 85.447 8.978 84.952 8.978 C 84.309 8.978 83.747 9.112 83.251 9.378 C 82.756 9.644 82.381 10.071 82.113 10.657 C 81.845 11.243 81.711 12.002 81.711 12.948 C 81.711 13.654 81.791 14.266 81.952 14.773 C 82.113 15.292 82.327 15.692 82.622 16.011 C 82.903 16.318 83.238 16.557 83.64 16.704 C 84.028 16.85 84.47 16.93 84.965 16.93 C 85.621 16.93 86.197 16.797 86.693 16.517 C 87.188 16.238 87.563 15.811 87.831 15.225 C 88.099 14.639 88.233 13.88 88.233 12.934 C 88.233 12.228 88.153 11.616 87.992 11.123 C 87.818 10.63 87.603 10.231 87.322 9.911 Z" fill="rgb(255, 255, 255)"></path>
+    <path d="M 5.745 20.113 L 5.745 4.316 L 0 4.316 L 0 0.733 L 15.762 0.733 L 15.762 4.316 L 9.883 4.316 L 9.883 20.113 Z M 19.846 20.352 C 18.989 20.352 18.213 20.206 17.516 19.9 C 16.82 19.607 16.204 19.14 15.695 18.514 C 15.186 17.902 14.798 17.129 14.53 16.21 C 14.262 15.291 14.128 14.225 14.128 12.987 C 14.128 11.335 14.369 9.976 14.838 8.884 C 15.307 7.792 15.976 6.98 16.847 6.42 C 17.704 5.861 18.722 5.594 19.86 5.594 C 20.61 5.594 21.279 5.714 21.882 5.941 C 22.485 6.18 22.993 6.5 23.435 6.9 C 23.877 7.299 24.199 7.792 24.413 8.338 L 24.627 8.338 L 24.788 5.874 L 28.551 5.874 L 28.551 20.126 L 24.627 20.126 L 24.627 17.622 L 24.413 17.622 C 24.092 18.461 23.529 19.114 22.726 19.607 C 21.922 20.099 20.971 20.352 19.86 20.352 Z M 21.346 17.196 C 22.069 17.196 22.672 17.023 23.154 16.69 C 23.623 16.357 23.984 15.917 24.212 15.371 C 24.453 14.838 24.56 14.265 24.56 13.653 L 24.56 12.294 C 24.56 11.681 24.44 11.095 24.212 10.562 C 23.984 10.03 23.623 9.603 23.154 9.257 C 22.672 8.924 22.083 8.751 21.346 8.751 C 20.703 8.751 20.141 8.898 19.659 9.204 C 19.177 9.497 18.802 9.963 18.534 10.589 C 18.266 11.202 18.132 12.001 18.132 12.973 C 18.132 13.946 18.266 14.692 18.534 15.331 C 18.802 15.957 19.177 16.423 19.659 16.73 C 20.141 17.023 20.703 17.182 21.346 17.182 Z M 37.738 24.801 C 36.479 24.801 35.381 24.615 34.483 24.255 C 33.586 23.895 32.863 23.389 32.341 22.737 C 31.819 22.084 31.524 21.338 31.457 20.459 L 35.22 20.459 C 35.287 20.752 35.434 21.032 35.662 21.272 C 35.876 21.511 36.184 21.698 36.546 21.831 C 36.907 21.964 37.336 22.031 37.818 22.031 C 38.581 22.031 39.211 21.924 39.679 21.698 C 40.148 21.471 40.496 21.152 40.724 20.725 C 40.938 20.299 41.059 19.766 41.059 19.1 L 41.059 16.65 L 40.845 16.65 C 40.55 17.409 40.001 18.035 39.238 18.514 C 38.474 18.994 37.564 19.234 36.532 19.234 C 35.675 19.234 34.899 19.087 34.216 18.794 C 33.533 18.501 32.943 18.075 32.448 17.489 C 31.952 16.903 31.564 16.197 31.296 15.344 C 31.028 14.492 30.895 13.519 30.895 12.401 C 30.895 10.895 31.122 9.63 31.604 8.631 C 32.073 7.619 32.729 6.86 33.586 6.34 C 34.443 5.821 35.421 5.568 36.559 5.568 C 37.59 5.568 38.501 5.807 39.264 6.274 C 40.028 6.74 40.563 7.366 40.871 8.112 L 41.086 8.112 L 41.193 5.821 L 44.996 5.821 L 44.996 18.368 C 44.996 19.553 44.822 20.552 44.474 21.378 C 44.125 22.191 43.63 22.857 42.987 23.363 C 42.344 23.869 41.581 24.228 40.697 24.455 C 39.813 24.668 38.822 24.788 37.751 24.788 Z M 37.939 16.25 C 38.621 16.25 39.184 16.103 39.626 15.824 C 40.068 15.544 40.403 15.158 40.644 14.705 C 40.885 14.239 41.005 13.759 41.045 13.266 L 41.019 11.561 C 41.005 11.069 40.871 10.589 40.644 10.136 C 40.416 9.683 40.081 9.31 39.626 9.031 C 39.184 8.751 38.621 8.605 37.965 8.605 C 37.349 8.605 36.8 8.738 36.318 9.017 C 35.849 9.297 35.488 9.71 35.233 10.283 C 34.979 10.842 34.858 11.575 34.858 12.427 C 34.858 13.28 34.992 14.012 35.247 14.572 C 35.501 15.131 35.863 15.557 36.332 15.837 C 36.8 16.117 37.349 16.25 37.939 16.25 Z M 54.316 20.352 C 53.232 20.352 52.254 20.193 51.37 19.86 C 50.5 19.54 49.737 19.047 49.094 18.408 C 48.451 17.768 47.955 16.996 47.621 16.09 C 47.286 15.171 47.112 14.145 47.112 13 C 47.112 11.535 47.393 10.243 47.969 9.137 C 48.545 8.032 49.362 7.166 50.433 6.54 C 51.504 5.927 52.79 5.608 54.316 5.608 C 55.388 5.608 56.352 5.781 57.236 6.114 C 58.106 6.447 58.87 6.94 59.499 7.579 C 60.128 8.218 60.624 8.991 60.972 9.883 C 61.32 10.789 61.494 11.828 61.494 12.987 C 61.494 14.439 61.213 15.717 60.637 16.823 C 60.075 17.928 59.245 18.794 58.187 19.42 C 57.115 20.033 55.83 20.352 54.316 20.352 Z M 54.29 17.196 C 54.933 17.196 55.495 17.036 55.977 16.73 C 56.459 16.423 56.834 15.957 57.102 15.331 C 57.356 14.718 57.49 13.932 57.49 12.987 C 57.49 12.281 57.423 11.668 57.276 11.149 C 57.129 10.629 56.914 10.19 56.633 9.83 C 56.352 9.47 56.017 9.217 55.615 9.044 C 55.227 8.884 54.785 8.791 54.303 8.791 C 53.66 8.791 53.098 8.937 52.616 9.244 C 52.134 9.55 51.745 10.003 51.477 10.629 C 51.21 11.242 51.076 12.041 51.076 13 C 51.076 13.706 51.143 14.319 51.303 14.838 C 51.451 15.358 51.678 15.797 51.96 16.143 C 52.241 16.49 52.576 16.756 52.977 16.929 C 53.379 17.089 53.808 17.182 54.29 17.196 Z" fill="rgb(255, 255, 255)"></path>
+  </g>
+</svg>