diff --git a/landing/index.html b/landing/index.html
index 82888f7..ae38bb9 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -54,8 +54,62 @@
                     <p>By integrating with the <strong>Nostr network</strong>, SeedPass compresses your encrypted vault and publishes it in 50&#8201;KB chunks. Each chunk is sent as a parameterised replaceable event, with deltas tracking changes between snapshots and automatic rotation when deltas grow large.</p>
                     <a href="https://github.com/PR0M3TH3AN/SeedPass" class="btn-primary cta-button"><i class="fas fa-download" aria-hidden="true"></i> Get Started</a>
                 </div>
-            </section>
-            <!-- Features Section -->
+        </section>
+        <!-- Architecture Section -->
+        <section class="flow-chart" id="architecture" aria-labelledby="architecture-heading">
+            <div class="container">
+                <h2 class="section-title" id="architecture-heading">Architecture Overview</h2>
+                <pre class="mermaid">
+---
+config:
+  layout: fixed
+  theme: neo-dark
+  look: classic
+---
+flowchart TD
+ subgraph subGraph0["Local Storage"]
+    direction TB
+        V["Vault<br>(password_manager.Vault)<br>• encrypted index<br>• config"]
+  end
+ subgraph subGraph1["Backup Pipeline"]
+    direction TB
+        BK1["Incremental Backups<br>(BackupManager)"]
+        BK2["Portable Backup<br>(portable_backup.py)<br>.json.enc"]
+        BK3["Nostr Snapshot<br>(nostr.client)<br>gzip chunks"]
+  end
+ subgraph Restore["Restore"]
+    direction TB
+        R1["Local Backup File"]
+        R2["Nostr Snapshot"]
+        R3["Portable Backup"]
+        R4["Vault Restore<br>(Vault / BackupManager)"]
+  end
+    A["Parent Seed<br>(BIP-39 Mnemonic)"] --> B["Seed Bytes<br>(BIP-39 → 512-bit)"]
+    B --> C["BIP-85 Derivation<br>(local_bip85.BIP85)"]
+    C --> D1["Password Entropy<br>(password_generation)"] & D2["TOTP Secret<br>(utils.key_derivation.derive_totp_secret)"] & D3["SSH Key Entropy<br>(password_generation.derive_ssh_key)"] & D4["PGP Key Entropy<br>(entry_management.add_pgp_key)"] & D5["Child Mnemonic<br>(BIP-85 derive_mnemonic)"] & D6["Nostr Key Entropy<br>(nostr.KeyManager)"]
+    D1 --> E1["Passwords"]
+    D2 --> E2["2FA Codes"]
+    D3 --> E3["SSH Key Pair"]
+    D4 --> E4["PGP Key"]
+    D5 --> E5["Seed Phrase"]
+    D6 --> E6["Nostr Keys<br>(npub / nsec)"]
+    E1 --> V
+    E2 --> V
+    E3 --> V
+    E4 --> V
+    E5 --> V
+    E6 --> V
+    V --> BK1 & BK2 & BK3
+    R1 --> R4
+    R2 --> R4
+    R3 --> R4
+    R4 --> V
+    A -. "Same seed ⇒ re-derive any artifact on demand" .- E1
+    A -.-> E2 & E3 & E4 & E5 & E6
+                </pre>
+            </div>
+        </section>
+        <!-- Features Section -->
             <section class="features" id="features" aria-labelledby="features-heading">
                 <div class="container">
                     <h2 class="section-title" id="features-heading">Features</h2>
@@ -141,7 +195,9 @@ Enter your choice (1-7) or press Enter to exit:
             </div>
         </footer>
         <!-- JavaScript -->
-        <script src="./script.js"></script>         
+        <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+        <script>mermaid.initialize({ startOnLoad: true });</script>
+        <script src="./script.js"></script>
         <!-- Relative path to script.js -->
     </body>
 </html>
\ No newline at end of file
diff --git a/landing/style.css b/landing/style.css
index 7aef5cc..5675cc9 100644
--- a/landing/style.css
+++ b/landing/style.css
@@ -370,12 +370,30 @@ footer .social-media a:focus {
     margin-right: 20px;
 }
 
+
 .features ul li:hover,
 .features ul li:focus-within {
     transform: translateY(-5px);
     box-shadow: 0 8px 16px var(--shadow-light);
 }
 
+/* Flow Chart Section */
+.flow-chart {
+    background-color: var(--background-section);
+    padding: 80px 20px;
+    text-align: center;
+    transition: background-color 0.3s;
+}
+
+.flow-chart .mermaid {
+    margin: 0 auto;
+    max-width: 1000px;
+}
+
+body.dark-mode .flow-chart {
+    background-color: var(--background-dark-section);
+}
+
 /* How It Works Section */
 .how-it-works {
     padding: 80px 20px;