diff --git a/frontend/src/features/home/pages/HomePage.vue b/frontend/src/features/home/pages/HomePage.vue
index caf99817..7bb16049 100644
--- a/frontend/src/features/home/pages/HomePage.vue
+++ b/frontend/src/features/home/pages/HomePage.vue
@@ -3,37 +3,64 @@ import { RouterLink } from 'vue-router'
 
 interface Module {
   name: string
-  screens: Array<{ label: string; path: string }>
+  icon: string
+  description: string
+  screens: Array<{ label: string; path: string; icon: string }>
 }
 
 const modules: Module[] = [
   {
     name: 'Model Operations',
+    icon: '🤖',
+    description: 'Manage models, run shadow tests, and track performance',
     screens: [
-      { label: 'Shadow Run Queue', path: '/shadow-run' },
-      { label: 'Model List', path: '/models' },
+      { label: 'Shadow Run Queue', path: '/model-ops/shadow-run-jobs', icon: '⚡' },
+      { label: 'Model List', path: '/model-ops/models-master', icon: '📊' },
     ],
   },
   {
     name: 'Governance',
-    screens: [{ label: 'Approval Queue', path: '/approvals' }],
+    icon: '⚖️',
+    description: 'Approval workflows and compliance management',
+    screens: [{ label: 'Approval Queue', path: '/governance/approvals', icon: '✅' }],
   },
 ]
 </script>
 
 <template>
   <div class="home-page">
+    <!-- Hero Section -->
     <header class="home-header">
-      <h1>K-ArtSell Aegis</h1>
-      <p>Financial Advisory System</p>
+      <div class="hero-content">
+        <h1>K-ArtSell Aegis</h1>
+        <p class="tagline">Financial Advisory System</p>
+        <p class="description">Professional portfolio analysis, model validation, and governance management</p>
+      </div>
     </header>
 
+    <!-- Modules Grid -->
     <main class="home-content">
-      <section v-for="module in modules" :key="module.name" class="module-section">
-        <h2>{{ module.name }}</h2>
+      <section v-for="module in modules" :key="module.name" class="module-card">
+        <!-- Card Header -->
+        <div class="module-header">
+          <div class="module-title">
+            <span class="module-icon">{{ module.icon }}</span>
+            <h2>{{ module.name }}</h2>
+          </div>
+          <p class="module-description">{{ module.description }}</p>
+        </div>
+
+        <!-- Screens Navigation -->
         <nav class="screen-list">
-          <RouterLink v-for="screen in module.screens" :key="screen.path" :to="screen.path" class="screen-link">
-            {{ screen.label }}
+          <RouterLink
+            v-for="screen in module.screens"
+            :key="screen.path"
+            :to="screen.path"
+            class="screen-link"
+          >
+            <span class="screen-icon">{{ screen.icon }}</span>
+            <span class="screen-label">{{ screen.label }}</span>
+            <span class="arrow">→</span>
           </RouterLink>
         </nav>
       </section>
@@ -43,59 +70,185 @@ const modules: Module[] = [
 
 <style scoped>
 .home-page {
-  padding: 2rem;
-  max-width: 1200px;
+  padding: var(--spacing-6);
+  max-width: 1280px;
   margin: 0 auto;
 }
 
+/* Hero Section */
 .home-header {
-  margin-bottom: 3rem;
+  margin-bottom: var(--spacing-8);
+  padding: var(--spacing-6);
+  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--color-border-primary);
 }
 
-.home-header h1 {
+.hero-content h1 {
   margin: 0;
-  font-size: 2.5rem;
-  font-weight: 700;
+  font-size: 3rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-600));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.home-header p {
-  margin: 0.5rem 0 0 0;
+.tagline {
+  margin: var(--spacing-2) 0 var(--spacing-1) 0;
+  font-size: var(--font-size-lg);
   color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
 }
 
+.description {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+}
+
+/* Content Grid */
 .home-content {
   display: grid;
-  gap: 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+  gap: var(--spacing-6);
 }
 
-.module-section {
+/* Module Card */
+.module-card {
+  background-color: var(--color-background-primary);
   border: 1px solid var(--color-border-primary);
-  border-radius: var(--border-radius-md);
-  padding: 1.5rem;
-  background-color: var(--color-background-secondary);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-6);
+  transition: all var(--transition-base);
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
 }
 
-.module-section h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.25rem;
+.module-card:hover {
+  border-color: var(--color-primary-300);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-4px);
 }
 
+/* Module Header */
+.module-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.module-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+.module-icon {
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+.module-title h2 {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.module-description {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+/* Screen List */
 .screen-list {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--spacing-2);
+  margin-top: auto;
 }
 
 .screen-link {
-  padding: 0.75rem 1rem;
-  border-radius: var(--border-radius-sm);
-  background-color: var(--color-background-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-background-secondary);
   color: var(--color-text-primary);
   text-decoration: none;
-  transition: background-color var(--transition-normal);
+  transition: all var(--transition-base);
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-weight: var(--font-weight-medium);
 }
 
 .screen-link:hover {
-  background-color: var(--color-background-hover);
+  background-color: var(--color-primary-50);
+  border-color: var(--color-primary-200);
+  color: var(--color-primary-600);
+}
+
+.screen-link:active {
+  transform: scale(0.98);
+}
+
+.screen-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.screen-label {
+  flex: 1;
+  font-size: var(--font-size-sm);
+}
+
+.arrow {
+  color: var(--color-primary-500);
+  opacity: 0;
+  transition: all var(--transition-base);
+  transform: translateX(-4px);
+}
+
+.screen-link:hover .arrow {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .home-page {
+    padding: var(--spacing-4);
+  }
+
+  .home-content {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-content h1 {
+    font-size: 2rem;
+  }
+
+  .module-card {
+    padding: var(--spacing-4);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .module-card,
+  .screen-link,
+  .arrow {
+    transition: none;
+  }
+
+  .screen-link:active {
+    transform: none;
+  }
 }
 </style>