diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 2dbe7e9..13835c4 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -4,7 +4,7 @@ import {
   Sidebar,
   TopBar,
 } from '@cameleer/design-system';
-import { LayoutDashboard, ShieldCheck, Users, Settings, Shield, Building, ScrollText } from 'lucide-react';
+import { LayoutDashboard, ShieldCheck, Users, Settings, Shield, Building, ScrollText, Mail } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import { useAuth } from '../auth/useAuth';
 import { useScopes } from '../auth/useScopes';
@@ -125,11 +125,20 @@ export function Layout() {
           >
             Infrastructure
           </div>
+          <div
+            style={{ padding: '6px 12px 6px 36px', fontSize: 13, cursor: 'pointer',
+              fontWeight: isActive(location, '/vendor/email') ? 600 : 400,
+              color: isActive(location, '/vendor/email') ? 'var(--amber)' : 'var(--text-muted)' }}
+            onClick={() => navigate('/vendor/email')}
+          >
+            <Mail size={12} style={{ marginRight: 6, verticalAlign: -1 }} />
+            Email Connector
+          </div>
           <div
             style={{ padding: '6px 12px 6px 36px', fontSize: 13, cursor: 'pointer', color: 'var(--text-muted)' }}
             onClick={() => window.open(`${window.location.protocol}//${window.location.hostname}:3002`, '_blank', 'noopener')}
           >
-            Identity (Logto)
+            Logto Console
           </div>
         </Sidebar.Section>
       )}
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index 670b34c..0537048 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -16,6 +16,7 @@ import { VendorAuditPage } from './pages/vendor/VendorAuditPage';
 import { CertificatesPage } from './pages/vendor/CertificatesPage';
 import { InfrastructurePage } from './pages/vendor/InfrastructurePage';
 import { VendorMetricsPage } from './pages/vendor/VendorMetricsPage';
+import { EmailConfigPage } from './pages/vendor/EmailConfigPage';
 import { TenantDashboardPage } from './pages/tenant/TenantDashboardPage';
 import { TenantLicensePage } from './pages/tenant/TenantLicensePage';
 import { SsoPage } from './pages/tenant/SsoPage';
@@ -102,6 +103,11 @@ export function AppRouter() {
                 <InfrastructurePage />
               </RequireScope>
             } />
+            <Route path="/vendor/email" element={
+              <RequireScope scope="platform:admin" fallback={<Navigate to="/tenant" replace />}>
+                <EmailConfigPage />
+              </RequireScope>
+            } />
 
             {/* Tenant portal */}
             <Route path="/tenant" element={<TenantDashboardPage />} />