diff --git a/src/app-src.html b/src/app-src.html
index e22057e0..000495b3 100644
--- a/src/app-src.html
+++ b/src/app-src.html
@@ -2,76 +2,64 @@
 <html>
 
 <head>
-  <title>OnlyKey - Encrypt & sign messages in your browser using OnlyKey</title>
-  <meta name="viewport" content="width=device-width,initial-scale=0.70">
+  <title>OnlyAgent — Encrypt &amp; sign in your browser using OnlyKey</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/ShareTechMono.css" rel="stylesheet">
   <link href="css/font-awesome.min.css" rel="stylesheet">
+  <link href="css/onlyagent-theme.css" rel="stylesheet">
   <link href="css/tokenizer.css" rel="stylesheet">
 </head>
 
 <body data-page="<%= htmlWebpackPlugin.options.page %>">
-  <nav class="navbar navbar-dark bg-dark">
-    <div class="mr-auto text-center">
-      <a class="">&nbsp;Apps&nbsp;&nbsp;</a>
-      <!--
-      <a class="navbar-brand" href="./encrypt"><i class="fa fa-lock" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="./decrypt"><i class="fa fa-unlock" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="./decrypt-file"><i class="fa fa-file-text" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="./encrypt-file"><i class="fa fa-file-archive-o" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="./search"><i class="fa fa-search" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="./password-generator"><i class="fa fa-key" aria-hidden="true"></i></a>
-      -->
-
+  <header class="oa-nav"><div class="inner">
+    <a class="oa-brand" href="/"><img src="onlyagent-logo.svg" alt="OnlyAgent"></a>
+    <nav class="oa-navlinks">
       <% if(htmlWebpackPlugin.options.app_pages)
-        for(var i in htmlWebpackPlugin.options.app_pages) { 
+        for(var i in htmlWebpackPlugin.options.app_pages) {
           var ap = htmlWebpackPlugin.options.app_pages[i];
           if(ap.icon){ %>
-        <a class="navbar-brand" href="./<%= ap.name %>"><i class="fa <%= ap.icon %>" aria-hidden="true"></i></a>
+        <a href="./<%= ap.name %>"<% if(ap.name===htmlWebpackPlugin.options.page){ %> class="active"<% } %>><i class="fa <%= ap.icon %>" aria-hidden="true"></i><span><%= ap.name %></span></a>
         <% }else if(ap.title){ %>
-          <a class="navbar-brand" href="./<%= ap.name %>">
-            <%= ap.title %>
-          </a>
-          <% } } %>
-
+        <a href="./<%= ap.name %>"<% if(ap.name===htmlWebpackPlugin.options.page){ %> class="active"<% } %>><span><%= ap.title %></span></a>
+        <% } } %>
+      <span class="sep"></span>
+      <a href="/"><i class="fa fa-home" aria-hidden="true"></i><span>Home</span></a>
+      <a href="https://docs.crp.to/webcrypt.html"><i class="fa fa-question" aria-hidden="true"></i><span>Help</span></a>
+      <a href="https://onlykey.io"><i class="fa fa-shopping-cart" aria-hidden="true"></i><span>Get OnlyKey</span></a>
+    </nav>
+  </div></header>
 
-            <br class="d-block d-sm-none" />
-            <a class="">&nbsp;Links&nbsp;</a>
-            <a class="navbar-brand" href="/"><i class="fa fa-home" aria-hidden="true"></i></a>
-            <a class="navbar-brand" href="https://docs.crp.to/webcrypt.html"><i class="fa fa-question" aria-hidden="true"></i></a>
-            <a class="navbar-brand" href="https://docs.crp.to/"><i class="fa fa-book" aria-hidden="true"></i></a>
-            <a class="navbar-brand" href="https://onlykey.io"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
+  <main class="oa-main">
+    <div class="oa-page-head">
+      <h1 id="fancy-icons">
+        <i class="fi-a fa fa-paper-plane" aria-hidden="true"></i>
+        <i class="fi-b fa fa-long-arrow-right" aria-hidden="true"></i>
+        <i class="fi-c fa fa-lock" aria-hidden="true"></i>
+      </h1>
+      <div id="header_messages"></div>
     </div>
-  </nav>
-  <div class="container text-center pt-1 app-head">
-    <p class="doOverflow-x">
-      <img src="ok-plugged4.png" alt="logo" align="middle">
-    </p>
-    <h1 id="fancy-icons">
-      <i class="fi-a fa fa-paper-plane fa-2x" aria-hidden="true"></i>
-      <i class="fi-b fa fa-long-arrow-right fa-2x" aria-hidden="true"></i>
-      <i class="fi-c fa fa-lock fa-2x" aria-hidden="true"></i>
-    </h1>
-    <div id="header_messages"></div>
-  </div>
-  <div id="container">
-    <div class="text-center">
-      <h1>Loading...</h1>
-      <noscript>
+
+    <div id="container" class="oa-content">
+      <div class="text-center">
+        <h1>Loading...</h1>
+        <noscript>
           <h2 class="text-danger">This App Requires JavaScript to work.</h2>
         </noscript>
-    </div>
-  </div>
-  <div id="container">
-    <div id="terminal_messages"></div>
-  </div>
-  <div class="container">
-    <div class="row pt-4">
-      <div class="col-sm text-center">
-        <a href="https://crp.to/">CryptoTrust LLC</a> &copy; 2021
       </div>
     </div>
-  </div>
+    <div id="container">
+      <div id="terminal_messages"></div>
+    </div>
+  </main>
+
+  <footer class="oa-footer"><div class="inner">
+    <div><a href="https://crp.to/">CryptoTrust LLC</a> &copy; 2026 · OnlyAgent</div>
+    <div style="display:flex;gap:20px;flex-wrap:wrap">
+      <a href="https://onlyagent.us">onlyagent.us</a>
+      <a href="https://docs.crp.to/webcrypt.html">Help</a>
+    </div>
+  </div></footer>
 </body>
 
 </html>
diff --git a/src/assets/css/onlyagent-theme.css b/src/assets/css/onlyagent-theme.css
new file mode 100644
index 00000000..72afacf8
--- /dev/null
+++ b/src/assets/css/onlyagent-theme.css
@@ -0,0 +1,194 @@
+/* ==========================================================================
+   OnlyAgent — app design system (matches the onlyagent.us landing page)
+   src/assets/css/onlyagent-theme.css  ·  link LAST in the shells.
+   Visual only — no JS/crypto changes. Restyles the WebCrypt app into a
+   card-based, professional dark UI.
+   ========================================================================== */
+
+:root{
+  --bg:#070b10; --bg-2:#0c131c; --panel:#0f1822; --panel-2:#13202c;
+  --line:#1d2a38; --line-2:#26384a; --text:#e8eef5; --muted:#93a3b5;
+  --accent:#3ad6c4; --accent-2:#2f8fff; --danger:#ff6b6b; --ok:#3ad6c4;
+  --radius:16px; --radius-sm:11px; --max:980px;
+  --grad:linear-gradient(135deg,var(--accent),var(--accent-2));
+  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+  --mono:'Share Tech Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
+}
+
+/* ---------- base ---------- */
+*{box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{
+  margin:0;color:var(--text);font-family:var(--sans);line-height:1.6;
+  -webkit-font-smoothing:antialiased;
+  background:
+    radial-gradient(1000px 520px at 82% -8%,rgba(47,143,255,.13),transparent 60%),
+    radial-gradient(860px 520px at 4% 2%,rgba(58,214,196,.10),transparent 55%),
+    var(--bg);
+  background-attachment:fixed;min-height:100vh;
+}
+a{color:var(--accent);text-decoration:none;transition:.15s}
+a:hover{color:var(--accent-2)}
+h1,h2,h3,h4,h5,h6{margin:0;letter-spacing:-.02em;font-weight:700;line-height:1.18}
+p{margin:0 0 1rem}
+hr{border:0;border-top:1px solid var(--line);margin:28px 0}
+::selection{background:rgba(58,214,196,.28)}
+font{font-size:inherit!important}
+
+/* ---------- top nav (custom .oa-nav, replaces Bootstrap navbar) ---------- */
+.oa-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
+  background:rgba(7,11,16,.8);border-bottom:1px solid var(--line)}
+.oa-nav .inner{max-width:var(--max);margin:0 auto;height:62px;display:flex;
+  align-items:center;justify-content:space-between;padding:0 22px;gap:16px}
+.oa-brand{display:flex;align-items:center;gap:10px;font-weight:700}
+.oa-brand img{height:30px;width:auto;display:block}
+.oa-navlinks{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.oa-navlinks a{color:var(--muted);font-size:14px;font-weight:500;padding:8px 12px;border-radius:9px}
+.oa-navlinks a:hover{color:var(--text);background:var(--panel)}
+.oa-navlinks a.active{color:var(--text);background:var(--panel);border:1px solid var(--line)}
+.oa-navlinks a i{margin-right:6px;color:var(--accent)}
+.oa-navlinks .sep{width:1px;height:22px;background:var(--line);margin:0 6px}
+@media(max-width:680px){.oa-navlinks a span{display:none}.oa-navlinks a i{margin:0}}
+
+/* legacy bootstrap navbar fallback (in case a page still uses it) */
+.navbar.bg-dark{background:rgba(7,11,16,.8)!important;border-bottom:1px solid var(--line)}
+.navbar .navbar-brand,.navbar a{color:var(--muted)!important}
+.navbar .navbar-brand:hover{color:var(--text)!important}
+.navbar .fa{color:var(--accent)}
+
+/* ---------- layout ---------- */
+.oa-main{max-width:var(--max);margin:0 auto;padding:0 22px 90px}
+.oa-page-head{text-align:center;padding:46px 0 30px}
+.oa-page-head .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
+  color:var(--accent);background:rgba(58,214,196,.08);border:1px solid rgba(58,214,196,.25);
+  padding:6px 13px;border-radius:999px;margin-bottom:16px}
+.oa-page-head h1{font-size:clamp(26px,4.4vw,40px);font-weight:800}
+.oa-page-head p{color:var(--muted);max-width:56ch;margin:14px auto 0;font-size:17px}
+
+/* ---------- card (wraps tool forms + content) ---------- */
+.oa-card,#container.oa-content{
+  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
+  padding:30px;margin:0 auto;max-width:680px;
+  box-shadow:0 18px 50px rgba(0,0,0,.35);
+}
+#container.oa-content{display:block}
+#container fieldset{background:transparent;border:0;padding:0;margin:0}
+#container h4{font-size:16px;font-weight:600;color:var(--muted);text-align:center;margin:0 auto 22px;max-width:50ch}
+#container h4 font{font-size:16px!important}
+#container h3{font-size:15px;color:var(--text);margin-bottom:10px;font-weight:600}
+#container > div > h1{font-size:18px;color:var(--muted);text-align:center}
+
+/* ---------- form controls ---------- */
+label{display:block;color:var(--text);font-weight:500;font-size:14px;margin:0 0 7px}
+input[type="text"],input[type="email"],input[type="password"],input[type="search"],
+input:not([type]),textarea,select,.form-control{
+  width:100%;background:var(--bg-2)!important;color:var(--text)!important;
+  border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;
+  padding:13px 15px!important;font-family:var(--sans);font-size:15px;margin-bottom:14px;
+  transition:border-color .18s, box-shadow .18s;
+}
+textarea{min-height:54px;resize:vertical;line-height:1.5}
+#message{min-height:150px}
+input::placeholder,textarea::placeholder{color:var(--muted)!important;opacity:1}
+input:focus,textarea:focus,select:focus,.form-control:focus,input.focus,textarea.focus{
+  outline:none!important;border-color:var(--accent)!important;
+  box-shadow:0 0 0 3px rgba(58,214,196,.15)!important;background:var(--bg-2)!important;color:var(--text)!important;
+}
+select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
+  background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px!important}
+select option{background:var(--panel);color:var(--text)}
+fieldset{border:0;padding:0;margin:0}
+input[readonly]{background:var(--panel-2)!important;color:var(--accent)!important;font-family:var(--mono)}
+
+/* radio groups -> pill segment look */
+#action,form#action{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;color:var(--muted)}
+#action label,center label{display:inline-flex;align-items:center;gap:7px;margin:0;
+  background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--text);font-size:14px;cursor:pointer}
+input[type="radio"],input[type="checkbox"]{accent-color:var(--accent);width:auto;margin:0}
+center{display:block}
+
+/* file input */
+input[type="file"]{width:100%;color:var(--muted);background:var(--bg-2);border:1px dashed var(--line-2);
+  border-radius:var(--radius-sm);padding:18px;cursor:pointer;margin-bottom:14px}
+input[type="file"]::file-selector-button{background:var(--panel-2);color:var(--text);border:1px solid var(--line);
+  border-radius:9px;padding:9px 15px;margin-right:14px;cursor:pointer;font-family:var(--sans);font-weight:600}
+input[type="file"]::file-selector-button:hover{border-color:var(--accent)}
+.block,.block-inner{background:transparent;border:0;padding:0;margin:0 0 14px}
+.block .block-inner{padding:0}
+.outline{border:0!important}
+#filedetails,#results{color:var(--muted);font-size:14px}
+
+/* ---------- buttons ---------- */
+.btn,button,#onlykey_start,#submit,a.oa-btn{
+  font-family:var(--sans);font-weight:700;font-size:15px;border-radius:var(--radius-sm);
+  padding:13px 20px;cursor:pointer;transition:.15s;border:1px solid transparent;display:inline-flex;
+  align-items:center;justify-content:center;gap:8px;
+}
+/* primary submit / search */
+button[type="submit"],#onlykey_start,#submit,.btn-success,.oa-btn-primary{
+  width:100%;background:var(--grad)!important;color:#04121a!important;border:0!important;
+  box-shadow:0 10px 26px rgba(47,143,255,.22);margin-top:6px;
+}
+button[type="submit"]:hover,#onlykey_start:hover,#submit:hover,.btn-success:hover{filter:brightness(1.08);transform:translateY(-1px)}
+.btn-secondary,.btn-light,.btn-default{background:var(--panel-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;width:auto}
+.btn-danger{background:var(--danger)!important;color:#1a0606!important;border:0!important}
+/* generic non-action buttons */
+button{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
+button:hover{border-color:var(--accent)}
+
+/* ---------- home page (.oa-tools grid) ---------- */
+.oa-hero{text-align:center;padding:54px 0 8px}
+.oa-hero h1{font-size:clamp(30px,5.2vw,50px);font-weight:800;max-width:16ch;margin:0 auto}
+.oa-hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+.oa-hero p{color:var(--muted);font-size:18px;max-width:54ch;margin:18px auto 0}
+.oa-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:40px 0}
+@media(max-width:680px){.oa-tools{grid-template-columns:1fr}}
+.oa-tool{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
+  padding:26px;transition:.18s;color:var(--text)}
+.oa-tool:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.35);color:var(--text)}
+.oa-tool .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;
+  color:#04121a;background:var(--grad);margin-bottom:16px}
+.oa-tool h3{font-size:19px;margin-bottom:6px}
+.oa-tool p{color:var(--muted);font-size:14.5px;margin:0}
+.oa-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
+
+/* fancy-icons header on tool pages */
+#fancy-icons{margin:8px 0 0;font-size:22px}
+#fancy-icons .fa{color:var(--accent)}
+#fancy-icons .fi-b{color:var(--muted)}
+.app-head img{filter:drop-shadow(0 8px 30px rgba(58,214,196,.22))}
+
+/* console / code (password-generator) */
+pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;overflow:auto;margin-top:6px}
+pre code,code{color:var(--accent);font-family:var(--mono);background:transparent}
+#messages,#header_messages,#terminal_messages{color:var(--accent)}
+.xterm-viewport,.xterm-screen{background:var(--bg-2)!important;border-radius:10px}
+
+/* ---------- modals ---------- */
+.modal-content{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;color:var(--text)!important;box-shadow:0 24px 70px rgba(0,0,0,.5)}
+.modal-header,.modal-footer{border-color:var(--line)!important}
+.modal-title{color:var(--text)}
+.modal-footer button{width:auto}
+.close{color:var(--muted);text-shadow:none;opacity:.8}
+.close:hover{color:var(--text)}
+
+/* tokenizer chips */
+.tokenfield,.tokenizer{background:var(--bg-2)!important;border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;padding:6px!important;margin-bottom:14px}
+.token,.tokenfield .token{background:rgba(58,214,196,.14)!important;border:1px solid rgba(58,214,196,.35)!important;color:var(--text)!important;border-radius:8px!important}
+.token .close{color:var(--accent)}
+
+/* alerts */
+.alert-success{background:rgba(58,214,196,.1)!important;border:1px solid rgba(58,214,196,.35)!important;color:var(--text)!important;border-radius:var(--radius-sm)}
+.alert-danger,.text-danger{color:var(--danger)!important}
+.alert-warning{background:rgba(255,172,2,.08)!important;border:1px solid rgba(255,172,2,.3)!important;color:#ffce6a!important;border-radius:var(--radius-sm)}
+
+/* ---------- footer ---------- */
+.oa-footer{border-top:1px solid var(--line);padding:34px 22px;margin-top:30px}
+.oa-footer .inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px}
+.oa-footer a{color:var(--muted)}.oa-footer a:hover{color:var(--text)}
+
+/* scrollbar */
+*{scrollbar-color:var(--line) transparent}
+::-webkit-scrollbar{width:10px;height:10px}
+::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
+::-webkit-scrollbar-thumb:hover{background:var(--line-2)}
diff --git a/src/assets/onlyagent-logo.svg b/src/assets/onlyagent-logo.svg
new file mode 100644
index 00000000..355cf3a7
--- /dev/null
+++ b/src/assets/onlyagent-logo.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 84" width="360" height="84" role="img" aria-label="OnlyAgent">
+  <defs>
+    <linearGradient id="oaGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#3ad6c4"/>
+      <stop offset="1" stop-color="#2f8fff"/>
+    </linearGradient>
+  </defs>
+  <!-- mark: gradient rounded square with a screen + cursor motif -->
+  <rect x="6" y="10" width="64" height="64" rx="16" fill="url(#oaGrad)"/>
+  <rect x="20" y="26" width="36" height="26" rx="4" fill="#04121a" opacity="0.92"/>
+  <path d="M28 58 h20" stroke="#04121a" stroke-width="4" stroke-linecap="round" opacity="0.92"/>
+  <!-- cursor / hand pointer inside the screen -->
+  <path d="M31 33 l12 5 l-4.6 1.8 l-1.8 4.6 z" fill="#3ad6c4"/>
+  <!-- wordmark -->
+  <text x="86" y="54" font-family="'Share Tech Mono', ui-monospace, Menlo, monospace" font-size="34" letter-spacing="-0.5">
+    <tspan fill="#e8eef5">Only</tspan><tspan fill="url(#oaGrad)">Agent</tspan>
+  </text>
+</svg>
diff --git a/src/index-src.html b/src/index-src.html
index 4b2dbaf4..01deb51f 100644
--- a/src/index-src.html
+++ b/src/index-src.html
@@ -1,113 +1,57 @@
 <!DOCTYPE html>
 <html>
-
 <head>
-  <title>OnlyKey Apps - Tools for encrypting messages, files, and searching for users</title>
-  <meta name="viewport" content="width=device-width,initial-scale=0.75">
+  <title>OnlyAgent Apps — Encrypt, decrypt &amp; sign with your OnlyKey</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <link href="<%= htmlWebpackPlugin.options.dir_name %>/css/bootstrap.min.css" rel="stylesheet">
   <link href="<%= htmlWebpackPlugin.options.dir_name %>/css/ShareTechMono.css" rel="stylesheet">
   <link href="<%= htmlWebpackPlugin.options.dir_name %>/css/font-awesome.min.css" rel="stylesheet">
-  <style>
-  </style>
+  <link href="<%= htmlWebpackPlugin.options.dir_name %>/css/onlyagent-theme.css" rel="stylesheet">
 </head>
-
 <body data-page="index">
-  <nav class="navbar navbar-dark bg-dark">
-    <div class="mr-auto text-center">
-      <a class="">&nbsp;Apps&nbsp;&nbsp;</a>
-      <!--<a class="navbar-brand" href="/app/encrypt"><i class="fa fa-lock" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="/app/decrypt"><i class="fa fa-unlock" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="/app/decrypt-file"><i class="fa fa-file-text" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="/app/encrypt-file"><i class="fa fa-file-archive-o" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="/app/search"><i class="fa fa-search" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="/app/password-generator"><i class="fa fa-key" aria-hidden="true"></i></a>
-      -->
-      <% if(htmlWebpackPlugin.options.app_pages)
-        for(var i in htmlWebpackPlugin.options.app_pages) { 
-          var ap = htmlWebpackPlugin.options.app_pages[i];
-          if(ap.icon){ %>
-            <a class="navbar-brand" href="/app/<%= ap.name %>"><i class="fa <%= ap.icon %>" aria-hidden="true"></i></a>
-       <% }else if(ap.title){ %>
-            <a class="navbar-brand" href="/app/<%= ap.name %>"><%= ap.title %></a>
-       <% } } %>
-       
-      <br class="d-block d-sm-none" />
-      <a class="">&nbsp;Links&nbsp;</a>
-      <a class="navbar-brand" href="/"><i class="fa fa-home" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="https://docs.crp.to/webcrypt.html"><i class="fa fa-question" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="https://docs.crp.to/"><i class="fa fa-book" aria-hidden="true"></i></a>
-      <a class="navbar-brand" href="https://onlykey.io"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
-    </div>
-  </nav>
-  <div class="container text-center pt-4">
-    <p><img src="<%= htmlWebpackPlugin.options.dir_name %>/ok0.jpg" alt="logo" align="middle"></p>
-    <h1><i class="fa fa-rocket"></i> OnlyKey Apps</h1>
-  </div>
   <input id="onlykey_start" value="Encrypt and Sign" type="hidden" />
-  <div class="container">
-
-    <div class="row pt-4">
-      <div class="col-sm text-center">
-        <a id="setTime" class="btn btn-success ShareTechMono">Set Time for OTP 2FA Authentications</a>
-      </div>
-    </div>
 
-    <div class="row pt-4">
-      <div class="col-sm text-center">
-        <h2><i class="fa fa-lock" aria-hidden="true"></i> Encryption</h2>
-        <p>Securely encrypt and sign text messages or files using
-          <a href="https://onlykey.io" target="_blank">OnlyKey</a>
-        </p>
-        <div class="pt-4">
-          <a href="<%= htmlWebpackPlugin.options.dir_name %>/encrypt" class="btn btn-success ShareTechMono">Encrypt & Sign Messages</a>
-        </div>
-        <div class="pt-4">
-          <a href="<%= htmlWebpackPlugin.options.dir_name %>/encrypt-file" class="btn btn-success ShareTechMono">Encrypt & Sign Files</a>
-        </div>
+  <header class="oa-nav"><div class="inner">
+    <a class="oa-brand" href="/"><img src="<%= htmlWebpackPlugin.options.dir_name %>/onlyagent-logo.svg" alt="OnlyAgent"></a>
+    <nav class="oa-navlinks">
+      <a href="<%= htmlWebpackPlugin.options.dir_name %>/encrypt"><i class="fa fa-lock"></i><span>Encrypt</span></a>
+      <a href="<%= htmlWebpackPlugin.options.dir_name %>/decrypt"><i class="fa fa-unlock"></i><span>Decrypt</span></a>
+      <a href="<%= htmlWebpackPlugin.options.dir_name %>/search"><i class="fa fa-search"></i><span>Search</span></a>
+      <span class="sep"></span>
+      <a href="https://docs.crp.to/"><i class="fa fa-book"></i><span>Docs</span></a>
+      <a href="https://onlykey.io"><i class="fa fa-shopping-cart"></i><span>Get OnlyKey</span></a>
+    </nav>
+  </div></header>
+
+  <main class="oa-main">
+    <section class="oa-hero">
+      <h1>Encrypt anything with <span class="g">your hardware key</span>.</h1>
+      <p>Securely encrypt, sign, decrypt and verify messages and files right in your browser. Your private keys never leave your OnlyKey.</p>
+      <div class="oa-cta-row" style="margin-top:26px">
+        <a class="btn oa-btn-primary" style="max-width:260px" href="<%= htmlWebpackPlugin.options.dir_name %>/encrypt">Encrypt a message</a>
+        <a id="setTime" class="btn btn-secondary">Set Time for OTP 2FA</a>
       </div>
+    </section>
+
+    <section class="oa-tools">
+      <a class="oa-tool" href="<%= htmlWebpackPlugin.options.dir_name %>/encrypt"><div class="ic"><i class="fa fa-lock"></i></div><h3>Encrypt &amp; Sign Messages</h3><p>Compose an end-to-end encrypted, signed message for any Keybase or Protonmail user.</p></a>
+      <a class="oa-tool" href="<%= htmlWebpackPlugin.options.dir_name %>/encrypt-file"><div class="ic"><i class="fa fa-file-archive-o"></i></div><h3>Encrypt &amp; Sign Files</h3><p>Encrypt files for a recipient — or for yourself — with your OnlyKey.</p></a>
+      <a class="oa-tool" href="<%= htmlWebpackPlugin.options.dir_name %>/decrypt"><div class="ic"><i class="fa fa-unlock"></i></div><h3>Decrypt &amp; Verify Messages</h3><p>Decrypt incoming PGP messages and verify the sender's signature.</p></a>
+      <a class="oa-tool" href="<%= htmlWebpackPlugin.options.dir_name %>/decrypt-file"><div class="ic"><i class="fa fa-file-text"></i></div><h3>Decrypt &amp; Verify Files</h3><p>Decrypt .gpg files and confirm they came from who you expect.</p></a>
+      <a class="oa-tool" href="<%= htmlWebpackPlugin.options.dir_name %>/search"><div class="ic"><i class="fa fa-search"></i></div><h3>Find a Recipient</h3><p>Search Keybase and Protonmail for someone to send encrypted messages to.</p></a>
+      <a class="oa-tool" href="<%= htmlWebpackPlugin.options.dir_name %>/password-generator"><div class="ic"><i class="fa fa-key"></i></div><h3>Password Generator</h3><p>Derive strong, repeatable static passwords from your OnlyKey.</p></a>
+    </section>
+
+    <p style="text-align:center;color:var(--muted)"><a href="<%= htmlWebpackPlugin.options.dir_name %>/past_releases">Looking for older app releases?</a></p>
+  </main>
+
+  <footer class="oa-footer"><div class="inner">
+    <div>© 2026 OnlyKey · OnlyAgent</div>
+    <div style="display:flex;gap:20px;flex-wrap:wrap">
+      <a href="https://onlyagent.us">onlyagent.us</a>
+      <a href="https://docs.crp.to/webcrypt.html">Help</a>
+      <a href="https://crp.to/">CryptoTrust LLC</a>
     </div>
-
-    <div class="row pt-4">
-      <div class="col-sm text-center">
-        <h2><i class="fa fa-unlock" aria-hidden="true"></i> Decryption</h2>
-        <p>Securely decrypt and verify text messages or files using <a href="https://onlykey.io" target="_blank">OnlyKey</a>
-        </p>
-        <div class="pt-4">
-          <a href="<%= htmlWebpackPlugin.options.dir_name %>/decrypt" class="btn btn-success ShareTechMono">Decrypt & Verify Messages</a>
-        </div>
-        <div class="pt-4">
-          <a href="<%= htmlWebpackPlugin.options.dir_name %>/decrypt-file" class="btn btn-success ShareTechMono">Decrypt & Verify Files</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="row pt-4">
-      <div class="col-sm text-center">
-        <h2><i class="fa fa-search" aria-hidden="true"></i> Keybase User Search</h2>
-        <p>Find <a href="https://keybase.io/kbpgp" target="_blank">Keybase</a> user or <a href="https://protonmail.com" target="_blank">Protonmail</a> user to send encrypted messages and files using
-          <a href="https://onlykey.io" target="_blank">OnlyKey</a>
-        </p>
-        <a href="<%= htmlWebpackPlugin.options.dir_name %>/search" class="btn btn-success ShareTechMono">User Search</a>
-      </div>
-    </div>
-
-    <hr>
-
-    <div class="row pt-4">
-      <div class="col-sm text-center">
-        <h3>Looking for the <a href="<%= htmlWebpackPlugin.options.dir_name %>/past_releases">old Webcrypt app releases?</a></h3>
-        <br>
-        <a href="<%= htmlWebpackPlugin.options.dir_name %>/past_releases?version=beta7" target="_blank">Click here for Beta7 firmware compatible Webcrypt app version</a></h3>
-      </div>
-    </div>
-
-    <div class="row pt-4">
-      <div class="col-sm text-center">
-        <a href="https://crp.to/">CryptoTrust LLC</a> &copy; 2021
-      </div>
-    </div>
-
-  </div>
+  </div></footer>
 </body>
-
 </html>
