diff --git a/frontend/font/CapitalOne_Logo.png b/frontend/font/CapitalOne_Logo.png
deleted file mode 100644
index 000f0ca..0000000
Binary files a/frontend/font/CapitalOne_Logo.png and /dev/null differ
diff --git a/frontend/font/optimist-bold-italic.ttf b/frontend/font/optimist-bold-italic.ttf
deleted file mode 100644
index 0b24e61..0000000
Binary files a/frontend/font/optimist-bold-italic.ttf and /dev/null differ
diff --git a/frontend/font/optimist-bold.ttf b/frontend/font/optimist-bold.ttf
deleted file mode 100644
index 538e403..0000000
Binary files a/frontend/font/optimist-bold.ttf and /dev/null differ
diff --git a/frontend/font/optimist-extended-bold-italic.ttf b/frontend/font/optimist-extended-bold-italic.ttf
deleted file mode 100644
index 7f3fbc5..0000000
Binary files a/frontend/font/optimist-extended-bold-italic.ttf and /dev/null differ
diff --git a/frontend/font/optimist-italic.ttf b/frontend/font/optimist-italic.ttf
deleted file mode 100644
index ef0b954..0000000
Binary files a/frontend/font/optimist-italic.ttf and /dev/null differ
diff --git a/frontend/font/optimist-normal.ttf b/frontend/font/optimist-normal.ttf
deleted file mode 100644
index 6d259f8..0000000
Binary files a/frontend/font/optimist-normal.ttf and /dev/null differ
diff --git a/frontend/public/fonts/optimist-bold-italic.ttf b/frontend/public/fonts/optimist-bold-italic.ttf
deleted file mode 100644
index 0b24e61..0000000
Binary files a/frontend/public/fonts/optimist-bold-italic.ttf and /dev/null differ
diff --git a/frontend/public/fonts/optimist-bold-italic.woff2 b/frontend/public/fonts/optimist-bold-italic.woff2
new file mode 100644
index 0000000..581a973
Binary files /dev/null and b/frontend/public/fonts/optimist-bold-italic.woff2 differ
diff --git a/frontend/public/fonts/optimist-bold.ttf b/frontend/public/fonts/optimist-bold.ttf
deleted file mode 100644
index 538e403..0000000
Binary files a/frontend/public/fonts/optimist-bold.ttf and /dev/null differ
diff --git a/frontend/public/fonts/optimist-bold.woff2 b/frontend/public/fonts/optimist-bold.woff2
new file mode 100644
index 0000000..a6f5d40
Binary files /dev/null and b/frontend/public/fonts/optimist-bold.woff2 differ
diff --git a/frontend/public/fonts/optimist-extended-bold-italic.ttf b/frontend/public/fonts/optimist-extended-bold-italic.ttf
deleted file mode 100644
index 7f3fbc5..0000000
Binary files a/frontend/public/fonts/optimist-extended-bold-italic.ttf and /dev/null differ
diff --git a/frontend/public/fonts/optimist-extended-bold-italic.woff2 b/frontend/public/fonts/optimist-extended-bold-italic.woff2
new file mode 100644
index 0000000..56ebfbf
Binary files /dev/null and b/frontend/public/fonts/optimist-extended-bold-italic.woff2 differ
diff --git a/frontend/public/fonts/optimist-italic.ttf b/frontend/public/fonts/optimist-italic.ttf
deleted file mode 100644
index ef0b954..0000000
Binary files a/frontend/public/fonts/optimist-italic.ttf and /dev/null differ
diff --git a/frontend/public/fonts/optimist-italic.woff2 b/frontend/public/fonts/optimist-italic.woff2
new file mode 100644
index 0000000..5a2f71b
Binary files /dev/null and b/frontend/public/fonts/optimist-italic.woff2 differ
diff --git a/frontend/public/fonts/optimist-normal.ttf b/frontend/public/fonts/optimist-normal.ttf
deleted file mode 100644
index 6d259f8..0000000
Binary files a/frontend/public/fonts/optimist-normal.ttf and /dev/null differ
diff --git a/frontend/public/fonts/optimist-normal.woff2 b/frontend/public/fonts/optimist-normal.woff2
new file mode 100644
index 0000000..98b60a8
Binary files /dev/null and b/frontend/public/fonts/optimist-normal.woff2 differ
diff --git a/frontend/src/components/shared/TransactionRow.tsx b/frontend/src/components/shared/TransactionRow.tsx
index fb3cdc5..632870b 100644
--- a/frontend/src/components/shared/TransactionRow.tsx
+++ b/frontend/src/components/shared/TransactionRow.tsx
@@ -1,6 +1,8 @@
 import { useNavigate } from 'react-router-dom'
 import { getRiskDisplay } from '../../utils/riskLevel'
 import { formatCurrency } from '../../utils/formatCurrency'
+import { Coffee, MoneySend, ShoppingCart, Refresh, GasStation, Card as CardIcon } from 'iconsax-react'
+import type { ReactNode } from 'react'
 import type { Transaction } from '../../types/transaction.types'
 import './TransactionRow.css'
 
@@ -8,18 +10,18 @@ interface TransactionRowProps {
   transaction: Transaction
 }
 
-const CATEGORY_ICONS: Record<string, string> = {
-  dining: '🍽️',
-  transfer: '💸',
-  shopping: '🛍️',
-  subscription: '🔄',
-  fuel: '⛽',
+const CATEGORY_ICONS: Record<string, ReactNode> = {
+  dining: <Coffee variant="TwoTone" size="24" color="currentColor" />,
+  transfer: <MoneySend variant="TwoTone" size="24" color="currentColor" />,
+  shopping: <ShoppingCart variant="TwoTone" size="24" color="currentColor" />,
+  subscription: <Refresh variant="TwoTone" size="24" color="currentColor" />,
+  fuel: <GasStation variant="TwoTone" size="24" color="currentColor" />,
 }
 
 export function TransactionRow({ transaction }: TransactionRowProps) {
   const navigate = useNavigate()
   const display = getRiskDisplay(transaction.riskLevel)
-  const categoryIcon = CATEGORY_ICONS[transaction.merchantCategory ?? ''] ?? '💳'
+  const categoryIcon = CATEGORY_ICONS[transaction.merchantCategory ?? ''] ?? <CardIcon variant="TwoTone" size="24" color="currentColor" />
   const isBlocked = transaction.status === 'blocked'
 
   return (
diff --git a/frontend/src/components/ui/BottomSheet.tsx b/frontend/src/components/ui/BottomSheet.tsx
index 070a5a3..4c8cb1b 100644
--- a/frontend/src/components/ui/BottomSheet.tsx
+++ b/frontend/src/components/ui/BottomSheet.tsx
@@ -37,9 +37,9 @@ export function BottomSheet({ isOpen, onClose, children, title }: BottomSheetPro
             className="bottom-sheet"
             role="dialog"
             aria-modal="true"
-            initial={{ y: '100%' }}
-            animate={{ y: 0 }}
-            exit={{ y: '100%' }}
+            initial={{ y: '100%', x: '-50%' }}
+            animate={{ y: 0, x: '-50%' }}
+            exit={{ y: '100%', x: '-50%' }}
             transition={{ type: 'spring', damping: 30, stiffness: 300 }}
           >
             <div className="bottom-sheet-handle" />
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 59c315d..fa16cd4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,32 +3,57 @@
    Mobile-first, Capital One-inspired
    ================================================ */
 
+/* Regular (400) */
 @font-face {
   font-family: 'Optimist';
-  src: url('/fonts/optimist-normal.ttf') format('truetype');
+  src: url('/fonts/optimist-normal.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Optimist';
-  src: url('/fonts/optimist-italic.ttf') format('truetype');
+  src: url('/fonts/optimist-italic.woff2') format('woff2');
   font-weight: 400;
   font-style: italic;
+  font-display: swap;
 }
 
+/* Medium (500) — maps to the normal file so the browser
+   doesn't fall back to a system font for this weight */
 @font-face {
   font-family: 'Optimist';
-  src: url('/fonts/optimist-bold.ttf') format('truetype');
+  src: url('/fonts/optimist-normal.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Semibold (600) — maps to the bold file */
+@font-face {
+  font-family: 'Optimist';
+  src: url('/fonts/optimist-bold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Bold (700) */
+@font-face {
+  font-family: 'Optimist';
+  src: url('/fonts/optimist-bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Optimist';
-  src: url('/fonts/optimist-bold-italic.ttf') format('truetype');
+  src: url('/fonts/optimist-bold-italic.woff2') format('woff2');
   font-weight: 700;
   font-style: italic;
+  font-display: swap;
 }
 
 :root {
diff --git a/frontend/src/pages/AccountDetailPage/AccountDetailPage.css b/frontend/src/pages/AccountDetailPage/AccountDetailPage.css
index a122b94..b113aec 100644
--- a/frontend/src/pages/AccountDetailPage/AccountDetailPage.css
+++ b/frontend/src/pages/AccountDetailPage/AccountDetailPage.css
@@ -5,6 +5,7 @@
 
 .account-detail-header {
   margin: var(--space-4);
+  width: auto;
   border-radius: var(--radius-xl);
 }
 
diff --git a/frontend/src/pages/LoginPage/LoginPage.css b/frontend/src/pages/LoginPage/LoginPage.css
index 211bccb..5dabca2 100644
--- a/frontend/src/pages/LoginPage/LoginPage.css
+++ b/frontend/src/pages/LoginPage/LoginPage.css
@@ -10,13 +10,14 @@
 
 .login-header {
   text-align: center;
+  margin-top: 10vh;
   margin-bottom: var(--space-10);
   color: var(--text-inverse);
 }
 
 .login-logo {
-  width: 72px;
-  height: 72px;
+  width: 88px;
+  height: 88px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-2xl);
   display: flex;
diff --git a/frontend/src/pages/LoginPage/LoginPage.tsx b/frontend/src/pages/LoginPage/LoginPage.tsx
index 3c37286..e958a36 100644
--- a/frontend/src/pages/LoginPage/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage/LoginPage.tsx
@@ -37,7 +37,7 @@ export function LoginPage() {
     <div className="login-page">
       <div className="login-header">
         <div className="login-logo">
-          <Shield size={40} strokeWidth={1.5} />
+          <Shield size={60} strokeWidth={1.5} />
         </div>
         <h1 className="login-brand">Temis</h1>
         <p className="login-tagline">Secure Banking</p>