diff --git a/web/EmailList.tsx b/web/EmailList.tsx
index afe4dd2..2999737 100644
--- a/web/EmailList.tsx
+++ b/web/EmailList.tsx
@@ -219,36 +219,49 @@ export const EmailList = () => {
   const hasNoEmails = !isSearching && total === 0 && folder === 'inbox' && !allCount?.total;
   if (hasNoEmails && !isLoading && page === 1) {
     return (
-      <div className="flex h-full flex-col items-center justify-center gap-3 text-sm opacity-50">
-        <Mail className="h-8 w-8" />
-        {!hasAccounts ? (
-          <div className="flex flex-col items-center gap-2">
-            <span>Add an email account to get started</span>
-            <Button variant="outline" size="sm" onClick={() => openAccounts(true)}>
-              Add Account
-            </Button>
-          </div>
-        ) : syncableAccount ? (
-          <div className="flex flex-col items-center gap-2">
+      <>
+        {/*
+          The modal has to be mounted HERE too, not only in the main return below.
+
+          It was only down there, and the result was a catch-22 you could not get out of: with no account
+          the component takes this early return, "Add Account" flips the shared `EMAIL_ACCOUNTS_OPEN`
+          global — and nothing is listening, because `<AccountsModal />` lives in the branch that renders
+          when mail EXISTS. Clicking it did nothing at all, with no error anywhere. The only other trigger
+          is in the toolbar, which is also in that branch, so a fresh install had no reachable way to add
+          the first account.
+        */}
+        <AccountsModal />
+        <div className="flex h-full flex-col items-center justify-center gap-3 text-sm opacity-50">
+          <Mail className="h-8 w-8" />
+          {!hasAccounts ? (
+            <div className="flex flex-col items-center gap-2">
+              <span>Add an email account to get started</span>
+              <Button variant="outline" size="sm" onClick={() => openAccounts(true)}>
+                Add Account
+              </Button>
+            </div>
+          ) : syncableAccount ? (
+            <div className="flex flex-col items-center gap-2">
+              <span>No emails synced yet</span>
+              <Button variant="outline" size="sm" onClick={handleSync} disabled={syncing || isSyncing}>
+                {syncing || isSyncing ? (
+                  <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <RefreshCw className="mr-2 h-3.5 w-3.5" />
+                )}
+                Sync Now
+              </Button>
+            </div>
+          ) : isSyncing ? (
+            <div className="flex flex-col items-center gap-2">
+              <Loader2 className="h-5 w-5 animate-spin" />
+              <span>Syncing emails...</span>
+            </div>
+          ) : (
             <span>No emails synced yet</span>
-            <Button variant="outline" size="sm" onClick={handleSync} disabled={syncing || isSyncing}>
-              {syncing || isSyncing ? (
-                <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
-              ) : (
-                <RefreshCw className="mr-2 h-3.5 w-3.5" />
-              )}
-              Sync Now
-            </Button>
-          </div>
-        ) : isSyncing ? (
-          <div className="flex flex-col items-center gap-2">
-            <Loader2 className="h-5 w-5 animate-spin" />
-            <span>Syncing emails...</span>
-          </div>
-        ) : (
-          <span>No emails synced yet</span>
-        )}
-      </div>
+          )}
+        </div>
+      </>
     );
   }