diff --git a/src/puter-js/src/modules/EmailConfirmationDialog.js b/src/puter-js/src/modules/EmailConfirmationDialog.js
index 8be9eaa78..e7347cfd4 100644
--- a/src/puter-js/src/modules/EmailConfirmationDialog.js
+++ b/src/puter-js/src/modules/EmailConfirmationDialog.js
@@ -5,128 +5,194 @@ class EmailConfirmationDialog extends (globalThis.HTMLElement || Object) {
 
         this.attachShadow({ mode: 'open' });
 
+        // NOTE: This dialog deliberately mirrors the design of PuterDialog
+        // (the consent dialog) so all puter.js system dialogs stay visually
+        // consistent. If you restyle one of them, restyle all three.
         this.shadowRoot.innerHTML = `
         <style>
-            dialog {
-                background: transparent;
-                border: none;
-                box-shadow: none;
-                outline: none;
-                padding: 0;
-                max-width: 90vw;
-            }
+        dialog {
+            background: transparent;
+            border: none;
+            box-shadow: none;
+            outline: none;
+            padding: 0;
+        }
 
-            dialog::backdrop {
-                background: rgba(0, 0, 0, 0.5);
-            }
+        dialog::backdrop {
+            background: rgba(0, 0, 0, 0.5);
+        }
 
-            .dialog-content {
-                border: 1px solid #e8e8e8;
-                border-radius: 12px;
-                padding: 32px;
-                background: white;
-                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-                -webkit-font-smoothing: antialiased;
-                color: #333;
-                position: relative;
-                max-width: 420px;
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            }
+        .puter-dialog-content {
+            border: 1px solid #e8e8e8;
+            border-radius: 8px;
+            padding: 50px 30px 30px;
+            background-color: #fff;
+            box-shadow: 0 0 9px 1px rgb(0 0 0 / 21%);
+            -webkit-font-smoothing: antialiased;
+            color: #575762;
+            position: relative;
+            box-sizing: border-box;
+            width: 400px;
+            max-width: 90vw;
+        }
 
-            .close-btn {
-                position: absolute;
-                right: 16px;
-                top: 12px;
-                font-size: 20px;
-                color: #999;
-                cursor: pointer;
-                width: 28px;
-                height: 28px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 50%;
-                transition: background 0.2s, color 0.2s;
-            }
+        dialog, dialog * {
+            font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
+        }
 
-            .close-btn:hover {
-                background: #f0f0f0;
-                color: #333;
-            }
+        .close-btn {
+            position: absolute;
+            right: 15px;
+            top: 10px;
+            font-size: 17px;
+            color: #8a8a8a8c;
+            cursor: pointer;
+        }
 
-            .icon-container {
-                width: 64px;
-                height: 64px;
-                margin: 0 auto 20px;
-                background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
+        .close-btn:hover {
+            color: #000;
+        }
 
-            .icon-container svg {
-                width: 32px;
-                height: 32px;
-                color: #1976d2;
+        .dialog-icon {
+            width: 70px;
+            height: 70px;
+            margin: 0 auto;
+        }
+
+        .dialog-icon svg {
+            display: block;
+            width: 70px;
+            height: 70px;
+            padding: 15px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            background-color: #088ef0;
+            color: #fff;
+        }
+
+        h2 {
+            text-align: center;
+            font-size: 19px;
+            font-weight: 500;
+            color: #1f1f2a;
+            margin: 18px 0 0;
+        }
+
+        .message {
+            text-align: center;
+            font-size: 15px;
+            font-weight: 400;
+            line-height: 1.5;
+            color: #575762;
+            padding: 10px 10px 0;
+            margin: 0;
+        }
+
+        .buttons {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            margin-top: 24px;
+        }
+
+        .button {
+            color: #666666;
+            background: linear-gradient(#f6f6f6, #e1e1e1);
+            font-size: 14px;
+            text-align: center;
+            height: 35px;
+            line-height: 35px;
+            padding: 0 30px;
+            margin: 0;
+            display: inline-block;
+            appearance: none;
+            cursor: pointer;
+            border: 1px solid #b9b9b9;
+            box-sizing: border-box;
+            border-radius: 4px;
+            outline: none;
+            width: 220px;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .button:focus-visible {
+            border-color: rgb(118 118 118);
+        }
+
+        .button-primary {
+            border-color: #088ef0;
+            background: linear-gradient(#34a5f8, #088ef0);
+            color: #fff;
+            font-weight: 500;
+            font-size: 15px;
+            margin-bottom: 10px;
+        }
+
+        .button-primary:active {
+            background: #2798eb;
+            border-color: #2798eb;
+            color: #bedef5;
+        }
+
+        .button-cancel {
+            background: none;
+        }
+
+        @media (max-width: 480px) {
+            .puter-dialog-content {
+                padding: 50px 20px 25px;
+            }
+            .button {
+                width: 100%;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .puter-dialog-content {
+                border: 1px solid #2a2a2e;
+                background-color: #1e1e22;
+                color: #d6d6dc;
+                box-shadow: 0 0 9px 1px rgb(0 0 0 / 60%);
             }
 
             h2 {
-                margin: 0 0 12px;
-                font-size: 20px;
-                font-weight: 600;
-                text-align: center;
-                color: #1a1a1a;
+                color: #e4e4ea;
             }
 
             .message {
-                text-align: center;
-                font-size: 14px;
-                line-height: 1.5;
-                color: #666;
-                margin-bottom: 24px;
+                color: #b9b9c2;
             }
 
-            .buttons {
-                display: flex;
-                gap: 12px;
-                justify-content: center;
+            .close-btn {
+                color: #8a8a90;
+            }
+
+            .close-btn:hover {
+                color: #fff;
             }
 
             .button {
-                padding: 10px 24px;
-                border-radius: 8px;
-                font-size: 14px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.2s;
-                border: none;
-                font-family: inherit;
+                color: #d6d6dc;
+                background: linear-gradient(#3f3f45, #2e2e34);
+                border-color: #4a4a50;
             }
 
-            .button-secondary {
-                background: #f5f5f5;
-                color: #666;
-            }
-
-            .button-secondary:hover {
-                background: #e8e8e8;
+            .button:focus-visible {
+                border-color: #8a8a90;
             }
 
             .button-primary {
-                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-                color: white;
-            }
-
-            .button-primary:hover {
-                background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
-                box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+                border-color: #088ef0;
+                background: linear-gradient(#34a5f8, #088ef0);
+                color: #fff;
             }
+        }
         </style>
         <dialog>
-            <div class="dialog-content">
+            <div class="puter-dialog-content">
                 <span class="close-btn">&#x2715;</span>
-                <div class="icon-container">
+                <div class="dialog-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                     </svg>
@@ -134,8 +200,8 @@ class EmailConfirmationDialog extends (globalThis.HTMLElement || Object) {
                 <h2>Confirm Your Email</h2>
                 <p class="message">${this.message}</p>
                 <div class="buttons">
-                    <button class="button button-secondary" id="close-btn">Close</button>
                     <button class="button button-primary" id="confirm-email-btn">Go to Puter.com</button>
+                    <button class="button button-cancel" id="close-btn">Close</button>
                 </div>
             </div>
         </dialog>
diff --git a/src/puter-js/src/modules/PuterDialog.js b/src/puter-js/src/modules/PuterDialog.js
index bedf2e029..9482719c6 100644
--- a/src/puter-js/src/modules/PuterDialog.js
+++ b/src/puter-js/src/modules/PuterDialog.js
@@ -35,11 +35,14 @@ class PuterDialog extends (globalThis.HTMLElement || Object) { // It will fall b
         h = `
         <style>
         dialog{
-            background: transparent; 
-            border: none; 
-            box-shadow: none; 
+            background: transparent;
+            border: none;
+            box-shadow: none;
             outline: none;
         }
+        dialog::backdrop {
+            background: rgba(0, 0, 0, 0.5);
+        }
         .puter-dialog-content {
             border: 1px solid #e8e8e8;
             border-radius: 8px;
@@ -352,6 +355,21 @@ class PuterDialog extends (globalThis.HTMLElement || Object) { // It will fall b
                 box-shadow: inset 0px 2px 3px rgb(0 0 0 / 60%), 0px 1px 0px rgb(255 255 255 / 4%);
             }
 
+            /* The dark-mode 'dialog .button' rule above has the same specificity
+               as the light-mode 'dialog .button-primary' rule, so without this
+               override source order wins and the primary button turns gray. */
+            dialog .button-primary {
+                border-color: #088ef0;
+                background: linear-gradient(#34a5f8, #088ef0);
+                color: white;
+            }
+
+            dialog .button-primary:active, dialog .button-primary.active, dialog .button-primary.is-active {
+                background-color: #2798eb;
+                border-color: #2798eb;
+                color: #bedef5;
+            }
+
             dialog .button.disabled, dialog .button.is-disabled, dialog .button:disabled {
                 background: #2a2a30 !important;
                 border: 1px solid #34343a !important;
diff --git a/src/puter-js/src/modules/UsageLimitDialog.js b/src/puter-js/src/modules/UsageLimitDialog.js
index 9af65ff35..9936160f5 100644
--- a/src/puter-js/src/modules/UsageLimitDialog.js
+++ b/src/puter-js/src/modules/UsageLimitDialog.js
@@ -2,131 +2,197 @@ class UsageLimitDialog extends (globalThis.HTMLElement || Object) {
     constructor (message) {
         super();
         this.message = message || 'You have reached your usage limit for this account.';
-        
+
         this.attachShadow({ mode: 'open' });
-        
+
+        // NOTE: This dialog deliberately mirrors the design of PuterDialog
+        // (the consent dialog) so all puter.js system dialogs stay visually
+        // consistent. If you restyle one of them, restyle all three.
         this.shadowRoot.innerHTML = `
         <style>
-            dialog {
-                background: transparent;
-                border: none;
-                box-shadow: none;
-                outline: none;
-                padding: 0;
-                max-width: 90vw;
+        dialog {
+            background: transparent;
+            border: none;
+            box-shadow: none;
+            outline: none;
+            padding: 0;
+        }
+
+        dialog::backdrop {
+            background: rgba(0, 0, 0, 0.5);
+        }
+
+        .puter-dialog-content {
+            border: 1px solid #e8e8e8;
+            border-radius: 8px;
+            padding: 50px 30px 30px;
+            background-color: #fff;
+            box-shadow: 0 0 9px 1px rgb(0 0 0 / 21%);
+            -webkit-font-smoothing: antialiased;
+            color: #575762;
+            position: relative;
+            box-sizing: border-box;
+            width: 400px;
+            max-width: 90vw;
+        }
+
+        dialog, dialog * {
+            font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
+        }
+
+        .close-btn {
+            position: absolute;
+            right: 15px;
+            top: 10px;
+            font-size: 17px;
+            color: #8a8a8a8c;
+            cursor: pointer;
+        }
+
+        .close-btn:hover {
+            color: #000;
+        }
+
+        .dialog-icon {
+            width: 70px;
+            height: 70px;
+            margin: 0 auto;
+        }
+
+        .dialog-icon svg {
+            display: block;
+            width: 70px;
+            height: 70px;
+            padding: 15px;
+            border-radius: 8px;
+            box-sizing: border-box;
+            background-color: #f59e0b;
+            color: #fff;
+        }
+
+        h2 {
+            text-align: center;
+            font-size: 19px;
+            font-weight: 500;
+            color: #1f1f2a;
+            margin: 18px 0 0;
+        }
+
+        .message {
+            text-align: center;
+            font-size: 15px;
+            font-weight: 400;
+            line-height: 1.5;
+            color: #575762;
+            padding: 10px 10px 0;
+            margin: 0;
+        }
+
+        .buttons {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            margin-top: 24px;
+        }
+
+        .button {
+            color: #666666;
+            background: linear-gradient(#f6f6f6, #e1e1e1);
+            font-size: 14px;
+            text-align: center;
+            height: 35px;
+            line-height: 35px;
+            padding: 0 30px;
+            margin: 0;
+            display: inline-block;
+            appearance: none;
+            cursor: pointer;
+            border: 1px solid #b9b9b9;
+            box-sizing: border-box;
+            border-radius: 4px;
+            outline: none;
+            width: 220px;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .button:focus-visible {
+            border-color: rgb(118 118 118);
+        }
+
+        .button-primary {
+            border-color: #088ef0;
+            background: linear-gradient(#34a5f8, #088ef0);
+            color: #fff;
+            font-weight: 500;
+            font-size: 15px;
+            margin-bottom: 10px;
+        }
+
+        .button-primary:active {
+            background: #2798eb;
+            border-color: #2798eb;
+            color: #bedef5;
+        }
+
+        .button-cancel {
+            background: none;
+        }
+
+        @media (max-width: 480px) {
+            .puter-dialog-content {
+                padding: 50px 20px 25px;
             }
-            
-            dialog::backdrop {
-                background: rgba(0, 0, 0, 0.5);
-            }
-            
-            .dialog-content {
-                border: 1px solid #e8e8e8;
-                border-radius: 12px;
-                padding: 32px;
-                background: white;
-                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-                -webkit-font-smoothing: antialiased;
-                color: #333;
-                position: relative;
-                max-width: 420px;
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            }
-            
-            .close-btn {
-                position: absolute;
-                right: 16px;
-                top: 12px;
-                font-size: 20px;
-                color: #999;
-                cursor: pointer;
-                width: 28px;
-                height: 28px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 50%;
-                transition: background 0.2s, color 0.2s;
-            }
-            
-            .close-btn:hover {
-                background: #f0f0f0;
-                color: #333;
-            }
-            
-            .icon-container {
-                width: 64px;
-                height: 64px;
-                margin: 0 auto 20px;
-                background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-            
-            .icon-container svg {
-                width: 32px;
-                height: 32px;
-                color: #f57c00;
-            }
-            
-            h2 {
-                margin: 0 0 12px;
-                font-size: 20px;
-                font-weight: 600;
-                text-align: center;
-                color: #1a1a1a;
-            }
-            
-            .message {
-                text-align: center;
-                font-size: 14px;
-                line-height: 1.5;
-                color: #666;
-                margin-bottom: 24px;
-            }
-            
-            .buttons {
-                display: flex;
-                gap: 12px;
-                justify-content: center;
-            }
-            
             .button {
-                padding: 10px 24px;
-                border-radius: 8px;
-                font-size: 14px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.2s;
-                border: none;
-                font-family: inherit;
+                width: 100%;
             }
-            
-            .button-secondary {
-                background: #f5f5f5;
-                color: #666;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .puter-dialog-content {
+                border: 1px solid #2a2a2e;
+                background-color: #1e1e22;
+                color: #d6d6dc;
+                box-shadow: 0 0 9px 1px rgb(0 0 0 / 60%);
             }
-            
-            .button-secondary:hover {
-                background: #e8e8e8;
+
+            h2 {
+                color: #e4e4ea;
             }
-            
+
+            .message {
+                color: #b9b9c2;
+            }
+
+            .close-btn {
+                color: #8a8a90;
+            }
+
+            .close-btn:hover {
+                color: #fff;
+            }
+
+            .button {
+                color: #d6d6dc;
+                background: linear-gradient(#3f3f45, #2e2e34);
+                border-color: #4a4a50;
+            }
+
+            .button:focus-visible {
+                border-color: #8a8a90;
+            }
+
             .button-primary {
-                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-                color: white;
-            }
-            
-            .button-primary:hover {
-                background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
-                box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+                border-color: #088ef0;
+                background: linear-gradient(#34a5f8, #088ef0);
+                color: #fff;
             }
+        }
         </style>
         <dialog>
-            <div class="dialog-content">
+            <div class="puter-dialog-content">
                 <span class="close-btn">&#x2715;</span>
-                <div class="icon-container">
+                <div class="dialog-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                     </svg>
@@ -134,30 +200,30 @@ class UsageLimitDialog extends (globalThis.HTMLElement || Object) {
                 <h2>Low Balance</h2>
                 <p class="message">${this.message}</p>
                 <div class="buttons">
-                    <button class="button button-secondary" id="close-btn">Close</button>
                     <button class="button button-primary" id="upgrade-btn">Upgrade Now</button>
+                    <button class="button button-cancel" id="close-btn">Close</button>
                 </div>
             </div>
         </dialog>
         `;
     }
-    
+
     connectedCallback () {
         const dialog = this.shadowRoot.querySelector('dialog');
-        
+
         this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
             this.close();
         });
-        
+
         this.shadowRoot.querySelector('#close-btn').addEventListener('click', () => {
             this.close();
         });
-        
+
         this.shadowRoot.querySelector('#upgrade-btn').addEventListener('click', () => {
             window.open('https://puter.com/dashboard', '_blank');
             this.close();
         });
-        
+
         // Close on backdrop click
         dialog.addEventListener('click', (e) => {
             if ( e.target === dialog ) {
@@ -165,11 +231,11 @@ class UsageLimitDialog extends (globalThis.HTMLElement || Object) {
             }
         });
     }
-    
+
     open () {
         this.shadowRoot.querySelector('dialog').showModal();
     }
-    
+
     close () {
         this.shadowRoot.querySelector('dialog').close();
         this.remove();
@@ -193,16 +259,15 @@ export function showUsageLimitDialog (message) {
         console.warn('[Puter]', message);
         return;
     }
-    
+
     // Check if dialog is already shown to prevent duplicates
     if ( document.querySelector('usage-limit-dialog') ) {
         return;
     }
-    
+
     const dialog = new UsageLimitDialog(message);
     document.body.appendChild(dialog);
     dialog.open();
 }
 
 export default UsageLimitDialog;
-