diff --git a/docs/index.html b/docs/index.html
index 1233678..9570f89 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,6 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SquareMCP Docs — AI Social Media Gateway</title>
 <meta name="description" content="Connect Claude, Codex CLI, and opencode to LinkedIn, TikTok, WhatsApp, and more via the Model Context Protocol.">
+<link rel="icon" type="image/svg+xml" href="squaremcp-logo.svg">
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
@@ -18,31 +19,31 @@
       <a href="agent-tutorial.html">Agent tutorial</a>
       <a href="https://hermes.squaremcp.com/openapi-social.json" target="_blank">API reference ↗</a>
     </div>
-    <a href="https://squaremcp.com" class="nav-cta" target="_blank">Open app</a>
+    <a href="https://app.squaremcp.com" class="nav-cta" target="_blank">Open app</a>
   </div>
 </nav>
 
 <div class="page">
   <div class="hero">
-    <h1>Build AI agents that<br>talk to the world</h1>
+    <h1>Build AI agents that talk to the world</h1>
     <p>SquareMCP connects Claude, Codex CLI, and opencode to LinkedIn, TikTok, WhatsApp, Instagram, Twitter, and more — through a single MCP server.</p>
   </div>
 
   <div class="card-grid">
     <a href="getting-started.html" class="card" style="text-decoration:none;color:inherit;">
-      <h4>🚀 Getting started</h4>
+      <h3>Getting started</h3>
       <p>Add SquareMCP to Claude Desktop, Codex CLI, or opencode in five minutes.</p>
     </a>
     <a href="platforms.html" class="card" style="text-decoration:none;color:inherit;">
-      <h4>🔌 Platform guides</h4>
+      <h3>Platform guides</h3>
       <p>Connect LinkedIn, TikTok, and WhatsApp. Step-by-step setup for each platform.</p>
     </a>
     <a href="agent-tutorial.html" class="card" style="text-decoration:none;color:inherit;">
-      <h4>🤖 Agent tutorial</h4>
+      <h3>Agent tutorial</h3>
       <p>Real code: a Claude agent that researches news and posts to LinkedIn automatically.</p>
     </a>
     <a href="https://hermes.squaremcp.com/openapi-social.json" target="_blank" class="card" style="text-decoration:none;color:inherit;">
-      <h4>📖 API reference ↗</h4>
+      <h3>API reference ↗</h3>
       <p>Full OpenAPI spec for every social tool. Mail API available separately.</p>
     </a>
   </div>
@@ -54,33 +55,33 @@
   <h2>Supported clients</h2>
   <div class="card-grid">
     <div class="card">
-      <h4>Claude Desktop</h4>
+      <h3>Claude Desktop</h3>
       <p>Add a <code>mcpServers</code> entry to <code>claude_desktop_config.json</code>. No extra software needed.</p>
     </div>
     <div class="card">
-      <h4>Codex CLI</h4>
+      <h3>Codex CLI</h3>
       <p>Pass <code>--mcp-server</code> or configure in <code>~/.codex/config.json</code>. Full PKCE OAuth flow supported.</p>
     </div>
     <div class="card">
-      <h4>opencode</h4>
+      <h3>opencode</h3>
       <p>Add SquareMCP to your opencode MCP providers list. HTTP Bearer transport.</p>
     </div>
     <div class="card">
-      <h4>Custom agents</h4>
+      <h3>Custom agents</h3>
       <p>Any MCP client that supports Streamable HTTP transport works. See the agent tutorial for a from-scratch example.</p>
     </div>
   </div>
 
   <h2>Supported platforms</h2>
   <div class="card-grid">
-    <div class="card"><h4><span class="icon" style="background:#0a66c2;">in</span> LinkedIn</h4><p>Post text, images, and video. Search connections, send messages.</p></div>
-    <div class="card"><h4><span class="icon" style="background:#000;">🎵</span> TikTok</h4><p>Upload and publish videos. View creator analytics.</p></div>
-    <div class="card"><h4><span class="icon" style="background:#25d366;">💬</span> WhatsApp</h4><p>Send messages and templates. Receive inbound via webhook.</p></div>
-    <div class="card"><h4><span class="icon" style="background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);">📷</span> Instagram</h4><p>Publish reels and image posts via Business API.</p></div>
-    <div class="card"><h4><span class="icon" style="background:#000;">𝕏</span> Twitter / X</h4><p>Tweet with media. Search and read timeline.</p></div>
-    <div class="card"><h4><span class="icon" style="background:#1877f2;">f</span> Facebook</h4><p>Post to pages, share photos and video.</p></div>
-    <div class="card"><h4><span class="icon" style="background:#0088cc;">✈️</span> Telegram</h4><p>Send messages and photos via bot token.</p></div>
-    <div class="card"><h4><span class="icon" style="background:#5865f2;">🎮</span> Discord</h4><p>Send messages to channels via bot.</p></div>
+    <div class="card"><h3><span class="icon" style="background:#0a66c2;">in</span> LinkedIn</h3><p>Post text, images, and video. Search connections, send messages.</p></div>
+    <div class="card"><h3><span class="icon" style="background:#000;font-size:11px;letter-spacing:-0.5px;">Tk</span> TikTok</h3><p>Upload and publish videos. View creator analytics.</p></div>
+    <div class="card"><h3><span class="icon" style="background:#25d366;color:#fff;font-size:11px;">WA</span> WhatsApp</h3><p>Send messages and templates. Receive inbound via webhook.</p></div>
+    <div class="card"><h3><span class="icon" style="background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff;font-size:11px;">Ig</span> Instagram</h3><p>Publish reels and image posts via Business API.</p></div>
+    <div class="card"><h3><span class="icon" style="background:#000;">𝕏</span> Twitter / X</h3><p>Tweet with media. Search and read timeline.</p></div>
+    <div class="card"><h3><span class="icon" style="background:#1877f2;">f</span> Facebook</h3><p>Post to pages, share photos and video.</p></div>
+    <div class="card"><h3><span class="icon" style="background:#0088cc;font-size:11px;">Tg</span> Telegram</h3><p>Send messages and photos via bot token.</p></div>
+    <div class="card"><h3><span class="icon" style="background:#5865f2;font-size:11px;">Dc</span> Discord</h3><p>Send messages to channels via bot.</p></div>
   </div>
 </div>
 
diff --git a/docs/squaremcp-logo.svg b/docs/squaremcp-logo.svg
new file mode 100644
index 0000000..84c53f8
--- /dev/null
+++ b/docs/squaremcp-logo.svg
@@ -0,0 +1,18 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>SquareMCP logo</title>
+  <defs>
+    <linearGradient id="squaremcp-logo-gradient" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7DB6FF"/>
+      <stop offset="1" stop-color="#0E63F6"/>
+    </linearGradient>
+  </defs>
+  <path
+    d="M10 12C10 10.8954 10.8954 10 12 10H31V17H17V31H10V12ZM33 10H52C53.1046 10 54 10.8954 54 12V31H47V17H33V10ZM10 33H17V47H31V54H12C10.8954 54 10 53.1046 10 52V33ZM47 33H54V52C54 53.1046 53.1046 54 52 54H33V47H47V33Z"
+    fill="url(#squaremcp-logo-gradient)"
+  />
+  <path
+    d="M24 24H33V31H40V40H31V33H24V24Z"
+    fill="#0E63F6"
+    opacity="0.92"
+  />
+</svg>
diff --git a/docs/styles.css b/docs/styles.css
index df422a7..a590500 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -87,11 +87,15 @@ a:hover { text-decoration: underline; }
 .nav-cta {
   background: var(--accent);
   color: #fff !important;
-  padding: 7px 16px;
+  padding: 10px 16px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 600;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
   transition: background 0.15s;
+  white-space: nowrap;
 }
 .nav-cta:hover { background: var(--accent-hover) !important; text-decoration: none !important; }
 
@@ -111,6 +115,7 @@ a:hover { text-decoration: underline; }
   font-weight: 700;
   line-height: 1.25;
   margin-bottom: 12px;
+  text-wrap: balance;
 }
 
 .hero p {
@@ -247,7 +252,7 @@ p code, li code {
 }
 
 .card:hover { border-color: #3a3a3b; }
-.card h4 { font-size: 15px; margin-bottom: 6px; }
+.card h3, .card h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
 .card p { font-size: 13px; color: var(--text-secondary); margin: 0; }
 
 /* ── Tab switcher ── */
