diff --git a/packages/frontend/src/layouts/BaseLayout.astro b/packages/frontend/src/layouts/BaseLayout.astro
index ea65b21..08066eb 100644
--- a/packages/frontend/src/layouts/BaseLayout.astro
+++ b/packages/frontend/src/layouts/BaseLayout.astro
@@ -11,15 +11,24 @@ const { title } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <title>{title}</title>
   </head>
   <body>
     <a id="preview-banner" style="display:none" target="_blank" rel="noopener"></a>
     <div id="webview-warning" style="display:none">
-      <p>Passkeys are not supported in in-app browsers.</p>
+      <p>PASSKEYS NOT SUPPORTED IN IN-APP BROWSERS.</p>
       <p>Tap the menu (<strong>&middot;&middot;&middot;</strong>) and choose <strong>"Open in Safari"</strong> or <strong>"Open in Browser"</strong>.</p>
     </div>
-    <slot />
+    <div class="brutalist-container">
+      <slot />
+      <footer class="brutalist-footer">
+        <div class="footer-grid"></div>
+        <div class="footer-text">G2C // STELLAR TESTNET // RAW CRYPTOGRAPHIC OWNERSHIP</div>
+      </footer>
+    </div>
   </body>
 </html>
 
@@ -32,37 +41,62 @@ const { title } = Astro.props;
     left: 0;
     right: 0;
     display: none;
-    background: #e11d48;
-    color: #fff;
-    font-size: 0.95rem;
+    background: #ff0000;
+    color: #ffffff;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    font-size: 0.85rem;
     font-weight: 700;
     padding: 0.5rem 1rem;
     text-align: center;
     text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
     z-index: 9999;
+    border-bottom: 4px solid #000000;
   }
-
   #preview-banner:hover {
-    background: #be123c;
+    background: #000000;
+    color: #ffff00;
   }
-
   body:has(#preview-banner[style*="display: block"]) {
-    padding-top: 2.2rem;
+    padding-top: 2.5rem;
   }
 
   #webview-warning {
-    background: #78350f;
-    border: 1px solid #a16207;
-    border-radius: 6px;
-    color: #fef3c7;
-    padding: 0.75rem 1rem;
-    margin-bottom: 1rem;
-    font-size: 0.9rem;
-    line-height: 1.5;
+    background: #ffff00;
+    border: 4px solid #000000;
+    color: #000000;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    font-size: 0.8rem;
+    font-weight: 700;
+    line-height: 1.6;
+    text-transform: uppercase;
   }
+  #webview-warning p { margin: 0.25rem 0; }
 
-  #webview-warning p {
-    margin: 0.25rem 0;
+  .brutalist-footer {
+    margin-top: 4rem;
+    border-top: 4px solid #000000;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+  }
+  .footer-grid {
+    width: 100%;
+    height: 2rem;
+    background:
+      repeating-linear-gradient(90deg, #000 0, #000 1px, transparent 1px, transparent 2rem);
+    opacity: 0.08;
+    margin-bottom: 1rem;
+  }
+  .footer-text {
+    font-family: 'Space Mono', 'Courier New', monospace;
+    font-size: 0.6rem;
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: #888888;
   }
 </style>
 
diff --git a/packages/frontend/src/pages/account/index.astro b/packages/frontend/src/pages/account/index.astro
index 8d5d8b1..fbc698f 100644
--- a/packages/frontend/src/pages/account/index.astro
+++ b/packages/frontend/src/pages/account/index.astro
@@ -4,8 +4,8 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 
 <BaseLayout title="Contract Account Wallet">
   <div class="page-header">
-    <h1>Contract Account Wallet</h1>
-    <a id="home-link" class="home-btn">Home</a>
+    <h1>Wallet</h1>
+    <a id="home-link" class="home-btn">&larr; Home</a>
   </div>
 
   <div id="error-box" class="error" style="display:none"></div>
@@ -13,13 +13,13 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
   <!-- Signing mode UI -->
   <div id="signing-mode" class="hidden">
     <div class="signing-request">
-      <h2>Signature Request</h2>
-      <div>From: <span class="origin" id="sign-origin"></span></div>
-      <div class="hash">Hash: <code id="sign-hash"></code></div>
+      <h2>// Signature Request</h2>
+      <div class="sign-field"><span class="sign-label">FROM:</span> <span class="origin" id="sign-origin"></span></div>
+      <div class="sign-field"><span class="sign-label">HASH:</span> <code id="sign-hash"></code></div>
     </div>
 
     <div id="sign-needs-register">
-      <p class="info">No passkey registered yet. Register one first, then you can approve the request.</p>
+      <p class="info">No passkey registered. Register one first, then approve the request.</p>
       <div class="field">
         <button id="sign-register-btn">Register Passkey</button>
       </div>
@@ -38,42 +38,39 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
   <!-- Home mode UI -->
   <div id="home-mode" class="hidden">
     <section id="account-section">
-      <h2>Account</h2>
+      <h2>// Account</h2>
       <div class="account-card">
         <div class="account-field">
-          <span class="account-label">Address</span>
+          <span class="account-label">ADDRESS</span>
           <div class="address-row">
             <code id="contract-id" class="account-address"></code>
             <button id="copy-btn" class="copy-btn" title="Copy address">Copy</button>
           </div>
         </div>
         <div class="account-field">
-          <span class="account-label">Balance</span>
+          <span class="account-label">BALANCE</span>
           <span id="xlm-balance" class="balance-value">loading...</span>
         </div>
         <div class="account-links">
-          <a id="explorer-link" class="explorer-link" target="_blank" rel="noopener" style="display:none">View on Stellar Expert</a>
+          <a id="explorer-link" class="explorer-link" target="_blank" rel="noopener" style="display:none">View on Stellar Expert &rarr;</a>
         </div>
       </div>
     </section>
 
     <!-- Name section -->
     <section id="name-section" class="hidden">
-      <h2>Account Name</h2>
+      <h2>// Account Name</h2>
       <div id="name-display" class="hidden">
-        <div class="account-card">
-          <div class="account-field">
-            <span class="account-label">Name</span>
-            <code id="account-name" class="account-address"></code>
-          </div>
-          <div class="account-field">
-            <span class="account-label">Shareable URL</span>
+        <div class="name-card">
+          <div class="name-big" id="account-name"></div>
+          <div class="name-url-box">
+            <span class="account-label">SHAREABLE URL</span>
             <a id="name-url" class="name-link"></a>
           </div>
         </div>
       </div>
       <div id="name-claim" class="hidden">
-        <p class="info">Claim a human-readable name for your account. Names are 1-15 characters, lowercase letters and digits only.</p>
+        <p class="info">Claim a human-readable name. 1-15 characters, lowercase letters and digits only.</p>
         <div class="field">
           <label for="name-input">Name</label>
           <input id="name-input" placeholder="e.g. alice" maxlength="15" pattern="[a-z][a-z0-9]*" />
@@ -87,15 +84,15 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 
     <!-- Shown when a passkey is already registered -->
     <section id="passkey-info-section" class="hidden">
-      <h2>Passkey</h2>
+      <h2>// Passkey</h2>
       <div class="passkey-details">
-        <div class="passkey-status">Registered</div>
+        <div class="passkey-status">REGISTERED</div>
         <div class="passkey-field">
-          <span class="passkey-label">Public Key</span>
+          <span class="passkey-label">PUBLIC KEY</span>
           <code id="passkey-pubkey" class="passkey-value"></code>
         </div>
         <div class="passkey-field">
-          <span class="passkey-label">Credential ID</span>
+          <span class="passkey-label">CREDENTIAL ID</span>
           <code id="passkey-cred-id" class="passkey-value"></code>
         </div>
         <div class="passkey-field">
@@ -112,7 +109,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 
     <!-- Shown when no passkey is registered -->
     <section id="register-section" class="hidden">
-      <h2>Register Passkey</h2>
+      <h2>// Register Passkey</h2>
       <p class="info">Creates a new passkey bound to this contract's subdomain.</p>
       <div class="field">
         <button id="register-btn">Register Passkey</button>
@@ -121,25 +118,25 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
     </section>
 
     <section id="sign-section">
-      <h2>Try It out</h2>
+      <h2>// Try It Out</h2>
       <p class="info">Want to see how it works?
           Eventually, other stellar dApps will redirect to this domain when you need to sign a transaction.
           For now you can invoke a contract or sign arbitrary data below.
      </p>
-      <h3>Invoke a contract</h3>
+      <h3>Invoke a Contract</h3>
       <p class="info">Set a status message on-chain via your smart account.</p>
       <div class="field">
-        <a id="status-message-link" class="button-link">Status Message</a>
+        <a id="status-message-link" class="button-link">Status Message &rarr;</a>
       </div>
       <h3>Sign a Hash</h3>
       <p class="info">Authenticate with your passkey to sign a 32-byte hash (e.g. a transaction hash).</p>
       <div class="field">
         <label for="hash-input">Hash to sign (64 hex chars)</label>
-        <input id="hash-input" placeholder="e.g. a1b2c3d...64 hex characters" maxlength="64" />
+        <input id="hash-input" placeholder="a1b2c3d...64 hex characters" maxlength="64" />
       </div>
       <div class="field" style="margin-top:0.5rem">
         <button id="sign-btn" disabled>Sign</button>
-        <button id="random-hash-btn" style="margin-left:0.5rem; font-size:0.8rem">Random hash</button>
+        <button id="random-hash-btn" style="margin-left:0.5rem; font-size:0.75rem">Random Hash</button>
       </div>
       <pre id="sign-result" style="display:none"></pre>
     </section>
@@ -147,37 +144,41 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 </BaseLayout>
 
 <style>
-  body {
-    background: #1a1a2e;
-  }
-
   .page-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
   }
 
+  .page-header h1 {
+    font-size: clamp(2.5rem, 7vw, 5rem);
+    line-height: 0.9;
+    letter-spacing: -0.04em;
+    border-bottom: 4px solid #000000;
+    padding-bottom: 0.5rem;
+  }
 
   button.primary {
-    background: #1a6b3a;
-    border-color: #1a8b4a;
-    font-size: 1.1rem;
-    padding: 0.7rem 2rem;
+    background: #ffff00;
+    color: #000000;
+    border: 4px solid #000000;
+    font-size: 1rem;
+    padding: 1rem 2.5rem;
   }
 
   button.primary:hover {
-    background: #1a8b4a;
+    background: #000000;
+    color: #ffff00;
   }
 
   .account-card {
-    background: #0a2040;
-    border: 1px solid #1a3060;
-    border-radius: 6px;
-    padding: 1rem;
+    background: #ffffff;
+    border: 4px solid #000000;
+    padding: 1.5rem;
   }
 
   .account-field {
-    margin-bottom: 0.75rem;
+    margin-bottom: 1.25rem;
   }
 
   .account-field:last-of-type {
@@ -185,144 +186,230 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
   }
 
   .account-label {
-    color: #8899aa;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    color: #000000;
     display: block;
-    font-size: 0.8rem;
-    margin-bottom: 0.25rem;
+    font-size: 0.6rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    margin-bottom: 0.4rem;
+    border-bottom: 2px solid #000000;
+    padding-bottom: 0.25rem;
   }
 
   .address-row {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
   }
 
   .account-address {
-    color: #c0d0e0;
+    color: #ffffff;
     word-break: break-all;
-    font-size: 0.85rem;
+    font-size: 0.75rem;
   }
 
   .copy-btn {
-    background: #1a3060;
-    color: #8899aa;
-    border: 1px solid #2a4070;
-    padding: 0.2rem 0.5rem;
-    border-radius: 3px;
+    background: #ffffff;
+    color: #000000;
+    border: 4px solid #000000;
+    padding: 0.35rem 0.75rem;
     cursor: pointer;
-    font-size: 0.75rem;
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
     white-space: nowrap;
     flex-shrink: 0;
+    border-radius: 0;
   }
 
   .copy-btn:hover {
-    background: #2a4070;
-    color: #c0d0e0;
+    background: #ffff00;
+    color: #000000;
   }
 
   .balance-value {
-    font-family: monospace;
-    font-size: 1.3rem;
-    color: #e0e0e0;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    font-size: clamp(1.5rem, 4vw, 3rem);
+    font-weight: 700;
+    color: #000000;
+    line-height: 1;
   }
 
   .account-links {
-    margin-top: 0.75rem;
+    margin-top: 1.25rem;
+    padding-top: 1rem;
+    border-top: 3px solid #000000;
   }
 
   .explorer-link {
-    color: #5bc0de;
+    color: #000000;
     text-decoration: underline;
+    text-decoration-thickness: 3px;
+    text-underline-offset: 3px;
     font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
   }
 
   .explorer-link:hover {
-    color: #7dd4ed;
+    background: #ffff00;
   }
 
   .signing-request {
-    background: #1a2a1a;
-    border: 1px solid #2a4a2a;
-    border-radius: 6px;
-    padding: 1rem;
-    margin: 1rem 0;
+    background: #000000;
+    color: #ffffff;
+    border: 4px solid #000000;
+    padding: 1.5rem;
+    margin: 1.5rem 0;
   }
 
-  .signing-request .origin {
-    color: #80b0e0;
-    font-size: 0.9rem;
+  .signing-request h2 {
+    color: #ffff00;
+    margin-bottom: 1rem;
+    border-bottom-color: #ffff00;
   }
 
-  .signing-request .hash {
-    font-family: monospace;
+  .sign-field {
+    font-family: 'Space Mono', 'Courier New', monospace;
     font-size: 0.8rem;
-    color: #c0c0c0;
-    margin: 0.75rem 0;
+    margin: 0.5rem 0;
     word-break: break-all;
   }
 
+  .sign-label {
+    font-weight: 700;
+    color: #ffff00;
+    letter-spacing: 0.1em;
+  }
+
+  .signing-request .origin {
+    color: #ffffff;
+    font-size: 0.85rem;
+  }
+
+  .signing-request code {
+    background: transparent;
+    color: #ffffff;
+    padding: 0;
+    font-size: 0.7rem;
+  }
+
   .passkey-details {
-    background: #0a2040;
-    border: 1px solid #1a3060;
-    border-radius: 6px;
-    padding: 0.75rem 1rem;
+    background: #ffffff;
+    border: 4px solid #000000;
+    padding: 1.25rem 1.5rem;
   }
 
   .passkey-status {
-    color: #6fcf97;
-    font-weight: 600;
-    margin-bottom: 0.5rem;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    color: #000000;
+    background: #ffff00;
+    display: inline-block;
+    padding: 0.3rem 0.85rem;
+    font-weight: 700;
+    font-size: 0.7rem;
+    letter-spacing: 0.15em;
+    margin-bottom: 1rem;
+    border: 3px solid #000000;
   }
 
   .passkey-field {
-    margin: 0.4rem 0;
+    margin: 0.75rem 0;
     font-size: 0.85rem;
   }
 
   .passkey-label {
-    color: #8899aa;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    color: #000000;
     display: block;
-    margin-bottom: 0.15rem;
+    font-size: 0.6rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    margin-bottom: 0.25rem;
   }
 
   .passkey-value {
-    color: #c0d0e0;
+    color: #ffffff;
     word-break: break-all;
-    font-size: 0.8rem;
+    font-size: 0.7rem;
   }
 
   .rp-explainer {
-    margin-top: 0.75rem;
+    margin-top: 1rem;
     margin-bottom: 0;
-    font-size: 0.8rem;
+    font-size: 0.75rem;
+    border-top: 3px solid #000000;
+    padding-top: 0.75rem;
   }
 
   .button-link {
     display: inline-block;
-    background: #4a1a6b;
-    color: #e0e0e0;
-    border: 1px solid #6a2a8b;
-    padding: 0.5rem 1.2rem;
-    border-radius: 4px;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    background: #ffff00;
+    color: #000000;
+    border: 4px solid #000000;
+    padding: 1rem 2rem;
     cursor: pointer;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
     text-decoration: none;
+    border-radius: 0;
   }
 
   .button-link:hover {
-    background: #5a2a7b;
+    background: #000000;
+    color: #ffff00;
+  }
+
+  .name-card {
+    background: #ffffff;
+    border: 4px solid #000000;
+    padding: 1.5rem;
+  }
+
+  .name-big {
+    font-family: 'Space Mono', 'Courier New', monospace;
+    font-size: clamp(2.5rem, 8vw, 5rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #000000;
+    line-height: 0.9;
+    margin-bottom: 1.25rem;
+    word-break: break-all;
+    letter-spacing: -0.03em;
+  }
+
+  .name-url-box {
+    background: #ffff00;
+    border: 4px solid #000000;
+    padding: 1rem 1.25rem;
+  }
+
+  .name-url-box .account-label {
+    margin-bottom: 0.3rem;
+    border-bottom-color: #000000;
   }
 
   .name-link {
-    color: #5bc0de;
-    font-family: monospace;
-    font-size: 0.85rem;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    color: #000000;
+    font-size: 0.8rem;
     word-break: break-all;
     text-decoration: underline;
+    text-decoration-thickness: 3px;
+    text-underline-offset: 3px;
+    font-weight: 700;
   }
 
   .name-link:hover {
-    color: #7dd4ed;
+    background: #000000;
+    color: #ffff00;
   }
 </style>
 
@@ -786,7 +873,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
       document.getElementById("xlm-balance")!.textContent = "unavailable";
     });
   } else {
-    document.getElementById("xlm-balance")!.textContent = "—";
+    document.getElementById("xlm-balance")!.textContent = "\u2014";
   }
 
   // --- Name section ---
diff --git a/packages/frontend/src/pages/index.astro b/packages/frontend/src/pages/index.astro
index f845dd6..2570df3 100644
--- a/packages/frontend/src/pages/index.astro
+++ b/packages/frontend/src/pages/index.astro
@@ -4,28 +4,29 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 
 <BaseLayout title="G2C — Smart Accounts">
   <div class="page-header">
-    <h1>G2C Smart Accounts</h1>
+    <div class="title-block">
+      <h1>G2C</h1>
+      <div class="title-rule"></div>
+      <div class="subtitle">Smart Accounts on Stellar</div>
+    </div>
     <a href="https://github.com/theahaco/g2c" target="_blank" rel="noopener" class="github-link" title="View on GitHub">
-      <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+      <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
     </a>
   </div>
-  <p class="info">
-    Create a Stellar smart account secured by your device's passkey (fingerprint, face, or security key).
-    No seed phrases or private keys to manage — your passkey <em>is</em> your wallet.
-  </p>
+  <div class="manifesto-block">
+    <p class="manifesto">Your passkey is your wallet. No seed phrases. No private keys. Raw cryptographic ownership via WebAuthn.</p>
+  </div>
 
   <div id="error-box" class="error" style="display:none"></div>
 
   <section id="accounts-section" class="hidden">
-    <h2>Your Accounts</h2>
+    <h2>// Your Accounts</h2>
     <div id="accounts-list"></div>
   </section>
 
   <section>
-    <h2>Create New Account</h2>
-    <p class="info">
-      Prepares a new smart account on Stellar testnet. You'll register a passkey in the next step to secure it.
-    </p>
+    <h2>// Create New Account</h2>
+    <p class="info">Deploys a passkey-secured smart account on Stellar testnet. One button. One passkey. Done.</p>
     <div class="field">
       <button id="create-btn">Create Account</button>
     </div>
@@ -33,89 +34,128 @@ import BaseLayout from "../layouts/BaseLayout.astro";
   </section>
 
   <section id="passkey-section" class="hidden">
-    <h2>Set Up Passkey</h2>
-    <p class="info">
-      Your account address is ready. Continue to register a passkey and activate your account on-chain.
-    </p>
+    <h2>// Passkey Setup Required</h2>
+    <p class="info">Account address generated. Register a passkey to activate it on-chain.</p>
     <pre id="c-address-result"></pre>
     <div class="field">
-      <a id="setup-link" class="button-link">Register Passkey & Deploy</a>
+      <a id="setup-link" class="button-link">Register Passkey & Deploy &rarr;</a>
     </div>
   </section>
 </BaseLayout>
 
 <style>
-  body {
-    background: #1a1a2e;
-  }
-
   .page-header {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
+    margin-bottom: 0;
+  }
+
+  .title-block {
+    flex: 1;
   }
 
   .page-header h1 {
     margin: 0;
+    font-size: clamp(4rem, 12vw, 9rem);
+    line-height: 0.85;
+    letter-spacing: -0.06em;
+  }
+
+  .title-rule {
+    width: 100%;
+    height: 0;
+    border-top: 4px solid #000000;
+    margin: 0.75rem 0;
   }
 
   .github-link {
-    color: #8899aa;
-    transition: color 0.15s;
+    color: #000000;
+    border: 4px solid #000000;
+    padding: 0.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    background: #ffffff;
+    flex-shrink: 0;
+    margin-top: 0.25rem;
   }
 
   .github-link:hover {
-    color: #e0e0e0;
+    background: #ffff00;
+    color: #000000;
+  }
+
+  .subtitle {
+    font-family: 'Space Mono', 'Courier New', monospace;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.25em;
+    color: #000000;
+  }
+
+  .manifesto-block {
+    border-bottom: 4px solid #000000;
+    padding: 1.25rem 0;
+    margin-bottom: 0;
+  }
+
+  .manifesto {
+    font-size: 0.9rem;
+    color: #000000;
+    line-height: 1.6;
+    font-weight: 400;
+    max-width: 60ch;
   }
 
   .button-link {
     display: inline-block;
-    background: #1a6b3a;
-    color: #e0e0e0;
-    border: 1px solid #1a8b4a;
-    padding: 0.5rem 1.2rem;
-    border-radius: 4px;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    background: #ffff00;
+    color: #000000;
+    border: 4px solid #000000;
+    padding: 1rem 2rem;
     cursor: pointer;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
     text-decoration: none;
+    border-radius: 0;
   }
 
   .button-link:hover {
-    background: #1a8b4a;
-  }
-
-  .progress {
-    background: #0a2040;
-    border: 1px solid #1a3060;
-    border-radius: 4px;
-    padding: 0.5rem 0.75rem;
-    margin-top: 0.5rem;
-    font-size: 0.85rem;
-    color: #8899aa;
+    background: #000000;
+    color: #ffff00;
   }
 
   #accounts-list {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    margin: 0.75rem 0;
+    gap: 0;
+    margin: 1rem 0;
   }
 
   .account-row {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    background: #0a2040;
-    border: 1px solid #1a3060;
-    border-radius: 6px;
-    padding: 0.6rem 0.85rem;
+    gap: 1rem;
+    background: #ffffff;
+    border: 4px solid #000000;
+    border-bottom: none;
+    padding: 1.25rem;
     text-decoration: none;
-    transition: border-color 0.15s, background 0.15s;
+    color: #000000;
+  }
+
+  .account-row:last-child {
+    border-bottom: 4px solid #000000;
   }
 
   .account-row:hover {
-    background: #0d2850;
-    border-color: #2a5090;
+    background: #ffff00;
   }
 
   .account-info {
@@ -124,21 +164,28 @@ import BaseLayout from "../layouts/BaseLayout.astro";
   }
 
   .account-name {
-    font-size: 0.95rem;
-    font-weight: 600;
-    color: #e0e0e0;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    font-size: clamp(1.5rem, 4vw, 2.5rem);
+    font-weight: 700;
+    color: #000000;
+    text-transform: uppercase;
+    line-height: 1;
   }
 
   .account-address {
-    font-family: monospace;
-    font-size: 0.72rem;
-    color: #8899aa;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    font-size: 0.6rem;
+    color: #555555;
     min-width: 0;
+    word-break: break-all;
+    margin-top: 0.35rem;
+    letter-spacing: 0.02em;
   }
 
   .account-arrow {
-    color: #5bc0de;
-    font-size: 1rem;
+    color: #000000;
+    font-size: 2rem;
+    font-weight: 700;
     flex-shrink: 0;
   }
 </style>
diff --git a/packages/frontend/src/pages/new-account/index.astro b/packages/frontend/src/pages/new-account/index.astro
index 1c925fc..09f3695 100644
--- a/packages/frontend/src/pages/new-account/index.astro
+++ b/packages/frontend/src/pages/new-account/index.astro
@@ -3,24 +3,18 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 ---
 
 <BaseLayout title="G2C — Set Up Passkey">
-  <h1>Set Up Your Account</h1>
-  <p class="info">
-    Register a passkey to secure your smart account, then deploy it on-chain.
-    Your passkey (fingerprint, face, or security key) will be the only way to authorize transactions.
-  </p>
+  <h1>Set Up Account</h1>
+  <p class="info">Register a passkey. Deploy on-chain. Your passkey is the only key. No recovery. No compromise.</p>
 
   <div id="status-bar">
-    <div>Account: <code id="contract-id"></code></div>
+    <span class="status-label">CONTRACT:</span> <code id="contract-id"></code>
   </div>
 
   <div id="error-box" class="error" style="display:none"></div>
 
   <section>
-    <h2>1. Register Passkey</h2>
-    <p class="info">
-      Your browser will prompt you to create a passkey.
-      This passkey is bound to your account and will be used to sign all future transactions.
-    </p>
+    <h2>01 // Register Passkey</h2>
+    <p class="info">Your browser will prompt you to create a passkey bound to your account.</p>
     <div class="field">
       <button id="register-btn">Register Passkey</button>
     </div>
@@ -28,7 +22,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
   </section>
 
   <section id="deploy-section" class="hidden">
-    <h2>2. Deploy Account</h2>
+    <h2>02 // Deploy Account</h2>
     <p class="info">Publish your passkey-secured smart account to the Stellar network.</p>
     <div class="field">
       <button id="deploy-btn" class="primary">Deploy Account</button>
@@ -37,62 +31,94 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
   </section>
 
   <section id="done-section" class="hidden">
-    <h2>Account Ready</h2>
-    <p class="info">Your smart account is live. Use your passkey to sign transactions.</p>
+    <h2>// Account Live</h2>
+    <p class="info">Your smart account is deployed. Use your passkey to sign transactions.</p>
     <div class="field">
-      <a id="account-link" class="button-link">Go to Account</a>
+      <a id="account-link" class="button-link">Go to Account &rarr;</a>
     </div>
   </section>
 </BaseLayout>
 
 <style>
-  body {
-    background: #1a1a2e;
+  h1 {
+    font-size: clamp(2rem, 6vw, 4.5rem);
+    letter-spacing: -0.04em;
+    border-bottom: 4px solid #000000;
+    padding-bottom: 0.75rem;
+    margin-bottom: 0.5rem;
   }
 
   button.primary {
-    background: #1a6b3a;
-    border-color: #1a8b4a;
-    font-size: 1.1rem;
-    padding: 0.7rem 2rem;
+    background: #ffff00;
+    color: #000000;
+    border: 4px solid #000000;
+    font-size: 1rem;
+    padding: 1rem 2.5rem;
   }
 
   button.primary:hover {
-    background: #1a8b4a;
+    background: #000000;
+    color: #ffff00;
   }
 
   #status-bar {
-    background: #0a2040;
-    border: 1px solid #1a3060;
-    border-radius: 4px;
-    padding: 0.5rem 0.75rem;
-    margin: 1rem 0;
-    font-size: 0.85rem;
+    background: #000000;
+    color: #ffffff;
+    border: 4px solid #000000;
+    padding: 1rem 1.25rem;
+    margin: 1.5rem 0;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    font-size: 0.75rem;
+    word-break: break-all;
+    line-height: 1.6;
+  }
+
+  .status-label {
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: #ffff00;
+  }
+
+  #status-bar code {
+    background: transparent;
+    color: #ffffff;
+    padding: 0;
+    font-size: 0.75rem;
   }
 
   .button-link {
     display: inline-block;
-    background: #1a6b3a;
-    color: #e0e0e0;
-    border: 1px solid #1a8b4a;
-    padding: 0.5rem 1.2rem;
-    border-radius: 4px;
+    font-family: 'Space Mono', 'Courier New', monospace;
+    background: #ffff00;
+    color: #000000;
+    border: 4px solid #000000;
+    padding: 1rem 2rem;
     cursor: pointer;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
     text-decoration: none;
+    border-radius: 0;
   }
 
   .button-link:hover {
-    background: #1a8b4a;
+    background: #000000;
+    color: #ffff00;
   }
 
   #deploy-result a {
-    color: #5bc0de;
+    color: #ffffff;
     text-decoration: underline;
+    text-decoration-thickness: 3px;
+    text-underline-offset: 3px;
+    font-weight: 700;
   }
 
   #deploy-result a:hover {
-    color: #7dd4ed;
+    background: #ffff00;
+    color: #000000;
   }
 </style>
 
diff --git a/packages/frontend/src/styles/global.css b/packages/frontend/src/styles/global.css
index 372cbf2..074e74a 100644
--- a/packages/frontend/src/styles/global.css
+++ b/packages/frontend/src/styles/global.css
@@ -1,115 +1,290 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
+/* ===================================
+   G2C BRUTALIST DESIGN SYSTEM
+   Raw. Bold. Unapologetic.
+   Nothing is hidden. Everything is exposed.
+   =================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
+
+/* --- RESET --- */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 16px; -webkit-text-size-adjust: 100%; }
+
+/* --- BASE --- */
+body {
+  font-family: 'Space Mono', 'Courier New', Courier, monospace;
+  background: #ffffff;
+  color: #000000;
   padding: 0;
+  margin: 0;
+  line-height: 1.35;
+  min-height: 100vh;
 }
 
-body {
-  font-family: system-ui, sans-serif;
-  max-width: 640px;
-  margin: 2rem auto;
-  padding: 0 1rem;
-  color: #e0e0e0;
+/* --- GRID CONTAINER --- */
+.brutalist-container {
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 2rem;
+  border-left: 4px solid #000000;
+  border-right: 4px solid #000000;
+  min-height: 100vh;
 }
 
-code {
-  background: #16213e;
-  padding: 0.15rem 0.4rem;
-  border-radius: 3px;
+@media (min-width: 768px) {
+  .brutalist-container {
+    padding: 3rem 4rem;
+  }
+}
+
+/* --- TYPOGRAPHY --- */
+h1 {
+  font-family: 'Space Mono', 'Courier New', monospace;
+  font-size: clamp(2.5rem, 8vw, 6rem);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
+  line-height: 0.9;
+  color: #000000;
+  margin: 0;
+}
+
+h2 {
+  font-family: 'Space Mono', 'Courier New', monospace;
+  font-size: clamp(1rem, 2.5vw, 1.5rem);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #000000;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 3px solid #000000;
+  display: inline-block;
+}
+
+h3 {
+  font-family: 'Space Mono', 'Courier New', monospace;
   font-size: 0.85rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: #000000;
+  margin-bottom: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+p {
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+/* --- LINKS --- */
+a {
+  color: #000000;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 3px;
+}
+
+a:hover {
+  background: #ffff00;
+  color: #000000;
+}
+
+/* --- CODE --- */
+code {
+  font-family: 'Space Mono', 'Courier New', monospace;
+  background: #000000;
+  color: #ffffff;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.75rem;
+  word-break: break-all;
+  border: none;
+  border-radius: 0;
+  display: inline;
+}
+
+pre {
+  font-family: 'Space Mono', 'Courier New', monospace;
+  background: #000000;
+  color: #ffffff;
+  padding: 1.25rem;
+  overflow-x: auto;
+  font-size: 0.7rem;
+  margin-top: 0.75rem;
+  white-space: pre-wrap;
   word-break: break-all;
+  border: 4px solid #000000;
+  border-radius: 0;
+  line-height: 1.6;
 }
 
+/* --- BUTTONS --- */
 button {
-  background: #0f3460;
-  color: #e0e0e0;
-  border: 1px solid #1a1a5e;
-  padding: 0.5rem 1.2rem;
-  border-radius: 4px;
+  font-family: 'Space Mono', 'Courier New', monospace;
+  background: #000000;
+  color: #ffffff;
+  border: 4px solid #000000;
+  padding: 1rem 2rem;
   cursor: pointer;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  border-radius: 0;
+  transition: none;
+  position: relative;
 }
 
 button:hover {
-  background: #1a4a80;
+  background: #ffff00;
+  color: #000000;
+  border-color: #000000;
+}
+
+button:active {
+  background: #000000;
+  color: #ffff00;
 }
 
 button:disabled {
-  opacity: 0.4;
+  opacity: 0.25;
   cursor: not-allowed;
+  background: #000000;
+  color: #ffffff;
+}
+
+button:disabled:hover {
+  background: #000000;
+  color: #ffffff;
 }
 
+/* --- INPUTS --- */
 input {
-  background: #16213e;
-  color: #e0e0e0;
-  border: 1px solid #333;
-  padding: 0.5rem;
-  border-radius: 4px;
+  font-family: 'Space Mono', 'Courier New', monospace;
+  background: #ffffff;
+  color: #000000;
+  border: 4px solid #000000;
+  padding: 0.85rem 1rem;
   width: 100%;
-  font-family: monospace;
   font-size: 0.85rem;
+  border-radius: 0;
+  outline: none;
 }
 
-pre {
-  background: #16213e;
-  padding: 0.75rem;
-  border-radius: 4px;
-  overflow-x: auto;
-  font-size: 0.8rem;
-  margin-top: 0.5rem;
-  white-space: pre-wrap;
-  word-break: break-all;
-  color: #a0d0a0;
+input:focus {
+  background: #ffff00;
+  color: #000000;
+  border-color: #000000;
+}
+
+input::placeholder {
+  color: #888888;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+}
+
+/* --- SECTIONS --- */
+section {
+  border-top: 4px solid #000000;
+  padding-top: 2rem;
+  margin-top: 2rem;
 }
 
+/* --- FORM FIELDS --- */
 .field {
-  margin: 0.5rem 0;
+  margin: 1rem 0;
 }
 
 .field label {
   display: block;
-  font-size: 0.85rem;
-  color: #999;
-  margin-bottom: 0.25rem;
+  font-family: 'Space Mono', 'Courier New', monospace;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: #000000;
+  margin-bottom: 0.5rem;
+  padding: 0.25rem 0;
+  border-bottom: 2px solid #000000;
 }
 
+/* --- ERROR --- */
 .error {
-  color: #ff6b6b;
+  font-family: 'Space Mono', 'Courier New', monospace;
+  color: #ff0000;
+  font-weight: 700;
+  font-size: 0.8rem;
+  border: 4px solid #ff0000;
+  padding: 1rem;
+  margin: 1rem 0;
+  text-transform: uppercase;
+  background: #ffffff;
+  letter-spacing: 0.05em;
+  line-height: 1.5;
 }
 
+/* --- INFO TEXT --- */
 .info {
-  color: #999;
-  font-size: 0.85rem;
+  color: #444444;
+  font-size: 0.8rem;
   margin: 0.5rem 0;
+  line-height: 1.6;
+  max-width: 65ch;
 }
 
-section {
-  border-top: 1px solid #333;
-  padding-top: 1rem;
-}
-
-.hidden {
-  display: none;
-}
+/* --- UTILITY --- */
+.hidden { display: none; }
 
+/* --- HOME BUTTON --- */
 .home-btn {
-  background: #2a3a4a;
-  color: #e0e0e0;
-  border: 1px solid #3a4a5a;
-  padding: 0.4rem 1rem;
-  border-radius: 4px;
+  font-family: 'Space Mono', 'Courier New', monospace;
+  background: #ffffff;
+  color: #000000;
+  border: 4px solid #000000;
+  padding: 0.6rem 1.25rem;
   cursor: pointer;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
   text-decoration: none;
   white-space: nowrap;
+  border-radius: 0;
+  display: inline-block;
 }
 
 .home-btn:hover {
-  background: #3a4a5a;
+  background: #ffff00;
+  color: #000000;
 }
 
+/* --- PAGE HEADER --- */
 .page-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 0;
+}
+
+/* --- PROGRESS --- */
+.progress {
+  font-family: 'Space Mono', 'Courier New', monospace;
+  background: #ffff00;
+  border: 4px solid #000000;
+  padding: 1rem;
+  margin-top: 1rem;
+  font-size: 0.8rem;
+  color: #000000;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* --- SELECTION --- */
+::selection {
+  background: #ffff00;
+  color: #000000;
 }
