diff --git a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
index a04855b..21e9e96 100644
--- a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
+++ b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
@@ -1,6 +1,14 @@
-<nb-card *ngIf="!hero">
-    <nb-card-body>
-        <button nbButton hero status="primary" fullWidth (click)="initHero()">Choose Hero</button>
+<!-- Hero Selection Screen -->
+<nb-card *ngIf="!hero" class="hero-selection-card">
+    <nb-card-body class="hero-selection-body">
+        <div class="hero-selection-content">
+            <h2 class="hero-selection-title">Choose Your Hero</h2>
+            <p class="hero-selection-subtitle">Begin your epic adventure</p>
+            <button nbButton hero status="primary" size="large" class="hero-selection-btn" (click)="initHero()">
+                <nb-icon icon="star-outline" class="mr-2"></nb-icon>
+                Select Hero
+            </button>
+        </div>
     </nb-card-body>
 </nb-card>
 <div *ngIf="hero">
diff --git a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
index d6ab450..ad2e151 100644
--- a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
+++ b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
@@ -1,3 +1,70 @@
+// Hero Selection Screen
+.hero-selection-card {
+    border-radius: 16px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    overflow: hidden;
+}
+
+.hero-selection-body {
+    padding: 3rem 2rem;
+    text-align: center;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        padding: 2rem 1.5rem;
+    }
+}
+
+.hero-selection-content {
+    max-width: 500px;
+    margin: 0 auto;
+}
+
+.hero-selection-title {
+    color: white;
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        font-size: 1.5rem;
+        margin-bottom: 0.5rem;
+    }
+}
+
+.hero-selection-subtitle {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        font-size: 0.85rem;
+        margin-bottom: 1rem;
+    }
+}
+
+.hero-selection-btn {
+    padding: 0.75rem 2rem;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: 50px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    }
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        padding: 0.6rem 1.5rem;
+        font-size: 0.9rem;
+    }
+}
+
 .MD2Hp {
     font-size: xx-large;
     position: fixed;