salog0d · salog0d · Apr 10, 2026 · Apr 10, 2026
diff --git a/frontend/font/CapitalOne_Logo.png b/frontend/font/CapitalOne_Logo.png
diff --git a/frontend/font/optimist-bold-italic.ttf b/frontend/font/optimist-bold-italic.ttf
diff --git a/frontend/font/optimist-bold.ttf b/frontend/font/optimist-bold.ttf
diff --git a/frontend/font/optimist-extended-bold-italic.ttf b/frontend/font/optimist-extended-bold-italic.ttf
diff --git a/frontend/font/optimist-italic.ttf b/frontend/font/optimist-italic.ttf
diff --git a/frontend/font/optimist-normal.ttf b/frontend/font/optimist-normal.ttf
diff --git a/frontend/index.html b/frontend/index.html
@@ -6,9 +6,6 @@
     <meta name="description" content="Temis RiskControl — Secure banking with real-time fraud prevention" />
     <meta name="theme-color" content="#0a1628" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <title>Temis — Secure Banking</title>
   </head>
   <body>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "framer-motion": "^12.38.0",
+    "iconsax-react": "^0.0.8",
     "lucide-react": "^1.8.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

diff --git a/frontend/public/fonts/optimist-bold-italic.ttf b/frontend/public/fonts/optimist-bold-italic.ttf
diff --git a/frontend/public/fonts/optimist-bold.ttf b/frontend/public/fonts/optimist-bold.ttf
diff --git a/frontend/public/fonts/optimist-extended-bold-italic.ttf b/frontend/public/fonts/optimist-extended-bold-italic.ttf
diff --git a/frontend/public/fonts/optimist-italic.ttf b/frontend/public/fonts/optimist-italic.ttf
diff --git a/frontend/public/fonts/optimist-normal.ttf b/frontend/public/fonts/optimist-normal.ttf
diff --git a/frontend/public/images/CapitalOne_Logo.png b/frontend/public/images/CapitalOne_Logo.png
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -3,6 +3,34 @@
    Mobile-first, Capital One-inspired
    ================================================ */
 
+@font-face {
+  font-family: 'Optimist';
+  src: url('/fonts/optimist-normal.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Optimist';
+  src: url('/fonts/optimist-italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Optimist';
+  src: url('/fonts/optimist-bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Optimist';
+  src: url('/fonts/optimist-bold-italic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
 :root {
   /* ── Primary palette (Capital One dark navy) ── */
   --color-primary-900: #0a1628;
@@ -62,7 +90,7 @@
   --border-focus: #2980b9;
 
   /* ── Typography ── */
-  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-family: 'Optimist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-size-xs: 0.6875rem;    /* 11px */
   --font-size-sm: 0.8125rem;    /* 13px */
   --font-size-md: 0.9375rem;    /* 15px */

diff --git a/frontend/src/pages/DashboardPage/DashboardPage.css b/frontend/src/pages/DashboardPage/DashboardPage.css
@@ -3,6 +3,19 @@
   flex-direction: column;
 }
 
+.dashboard-logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--space-4) 0 var(--space-2);
+  background: var(--color-primary-900);
+}
+
+.dashboard-top-logo {
+  height: 40px;
+  width: auto;
+}
+
 .dashboard-pending {
   display: flex;
   align-items: center;

diff --git a/frontend/src/pages/DashboardPage/DashboardPage.tsx b/frontend/src/pages/DashboardPage/DashboardPage.tsx
@@ -32,6 +32,9 @@ export function DashboardPage() {
 
   return (
     <div className="dashboard-page">
+      <div className="dashboard-logo-container">
+        <img src="/images/CapitalOne_Logo.png" alt="Capital One" className="dashboard-top-logo" />
+      </div>
       <GreetingBanner name={user?.name ?? 'User'} />
 
       {/* Pending action banner */}

diff --git a/frontend/src/utils/riskLevel.ts → frontend/src/utils/riskLevel.tsx b/frontend/src/utils/riskLevel.ts → frontend/src/utils/riskLevel.tsx
@@ -1,42 +1,45 @@
+import type { ReactNode } from 'react'
+import { TickCircle, SecuritySafe, CloseCircle, Lock } from 'iconsax-react'
+
 export interface RiskDisplay {
   label: string
   color: string
   bgColor: string
-  icon: string
+  icon: ReactNode
 }
 
 const RISK_DISPLAY_MAP: Record<string, RiskDisplay> = {
   low: {
     label: 'Approved',
     color: 'var(--color-risk-low)',
     bgColor: 'var(--color-risk-low-bg)',
-    icon: '✅',
+    icon: <TickCircle size="18" variant="Bold" color="currentColor" />,
   },
   medium: {
     label: 'Verified',
     color: 'var(--color-risk-medium)',
     bgColor: 'var(--color-risk-medium-bg)',
-    icon: '🔐',
+    icon: <SecuritySafe size="18" variant="Bold" color="currentColor" />,
   },
   high: {
     label: 'Blocked',
     color: 'var(--color-risk-high)',
     bgColor: 'var(--color-risk-high-bg)',
-    icon: '🚫',
+    icon: <CloseCircle size="18" variant="Bold" color="currentColor" />,
   },
   critical: {
     label: 'Frozen',
     color: 'var(--color-risk-critical)',
     bgColor: 'var(--color-risk-critical-bg)',
-    icon: '🔒',
+    icon: <Lock size="18" variant="Bold" color="currentColor" />,
   },
 }
 
 const DEFAULT_DISPLAY: RiskDisplay = {
   label: 'Unknown',
   color: 'var(--text-secondary)',
   bgColor: 'transparent',
-  icon: '❓',
+  icon: <SecuritySafe size="18" variant="Outline" color="currentColor" />,
 }
 
 /**