diff --git a/src/app/features/plan/plan-pokemon-details/plan-pokemon-details.component.ts b/src/app/features/plan/plan-pokemon-details/plan-pokemon-details.component.ts
index 3cf5e4a..052d465 100644
--- a/src/app/features/plan/plan-pokemon-details/plan-pokemon-details.component.ts
+++ b/src/app/features/plan/plan-pokemon-details/plan-pokemon-details.component.ts
@@ -4,127 +4,125 @@ import { PokemonFamilyEntry } from '../../../core/models/plan.model';
 import { Pokemon } from '../../../core/models/pokemon.model';
 import { PokemonService } from '../../../core/services/pokemon.service';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatTabsModule } from '@angular/material/tabs';
+
 
 @Component({
 selector: 'app-plan-pokemon-details',
 standalone: true,
 imports: [
     CommonModule,
-    MatChipsModule
+    MatChipsModule,
+    MatTabsModule
 ],
 template: `
-<div class="targets-grid" *ngIf="hasTargets">
-    <ng-container *ngIf="evolve_to.length > 0">
-        <div class="target-section">
-        <h4>Evolution Targets</h4>
-        <div class="target-cards">
-            <div 
-            *ngFor="let target of evolve_to" 
-            class="target-card"
-            [class.completed]="isTargetCompleted(target.PFIC)"
-            >
-            <img 
-                lazyImg
-                [src]="pokemonService.getPokemonImageUrl(target)"
-                [alt]="target.Name"
-                class="target-image"
-                [class.grayscale]="isTargetCompleted(target.PFIC)"
-            >
-            <div class="target-details">
-                <div class="target-name">
-                {{ target.Name }}
-                <span *ngIf="target.Form">({{ target.Form }})</span>
-                </div>
-                <span *ngIf="target.EvolutionMethod">{{target?.EvolutionMethod}}</span>
-            </div>
-            </div>
-        </div>
-        </div>
-    </ng-container>
-
-    <ng-container *ngIf="pokemon_family.breed_for.length > 0">
-        <div class="target-section">
-        <h4>Breeding Targets</h4>
-        <div class="target-cards">
-            <div 
-            *ngFor="let target of breed_for" 
-            class="target-card"
-            [class.completed]="isTargetCompleted(target.PFIC)"
-            >
-            <img 
-                lazyImg
-                [src]="pokemonService.getPokemonImageUrl(target)"
-                [alt]="target.Name"
-                class="target-image"
-                [class.grayscale]="isTargetCompleted(target.PFIC)"
-            >
-            <div class="target-details">
-                <div class="target-name">
-                {{ target.Name }}
-                <span *ngIf="target.Form">({{ target.Form }})</span>
-                </div>
-                <mat-chip-listbox>
-                <mat-chip>Breed</mat-chip>
-                </mat-chip-listbox>
-            </div>
-            </div>
+<mat-tab-group>
+  <!-- Evolution Targets Tab -->
+  <mat-tab label="Evolution Targets" *ngIf="evolve_to.length > 0">
+    <div class="scrollable-content">
+      <div 
+        *ngFor="let target of evolve_to" 
+        class="target-card"
+        [class.completed]="isTargetCompleted(target.PFIC)"
+      >
+        <img 
+          lazyImg
+          [src]="pokemonService.getPokemonImageUrl(target)"
+          [alt]="target.Name"
+          class="target-image"
+          [class.grayscale]="isTargetCompleted(target.PFIC)"
+        >
+        <div class="target-details">
+          <span class="target-name">
+            {{ target.Name }}
+            <span *ngIf="target.Form">({{ target.Form }})</span>
+          </span>
+          <span *ngIf="target.EvolutionMethod">{{target?.EvolutionMethod}}</span>
         </div>
+      </div>
+    </div>
+  </mat-tab>
+
+  <!-- Breeding Targets Tab -->
+  <mat-tab label="Breeding Targets" *ngIf="breed_for.length > 0">
+    <div class="scrollable-content">
+      <div 
+        *ngFor="let target of breed_for" 
+        class="target-card"
+        [class.completed]="isTargetCompleted(target.PFIC)"
+      >
+        <img 
+          lazyImg
+          [src]="pokemonService.getPokemonImageUrl(target)"
+          [alt]="target.Name"
+          class="target-image"
+          [class.grayscale]="isTargetCompleted(target.PFIC)"
+        >
+        <div class="target-details">
+          <span class="target-name">
+            {{ target.Name }}
+            <span *ngIf="target.Form">({{ target.Form }})</span>
+          </span>
+          <mat-chip-listbox>
+            <mat-chip>Breed</mat-chip>
+          </mat-chip-listbox>
         </div>
-    </ng-container>
-</div>
+      </div>
+    </div>
+  </mat-tab>
+</mat-tab-group>
 `,
 styles: [`
-    .targets-grid {
-      padding: 16px 8px;
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-
-    .target-cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-      gap: 16px;
-    }
-
-    .target-card {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 8px;
-      border: 1px solid #eee;
-      border-radius: 8px;
-      transition: background-color 0.3s ease;
-
-      &:hover {
-        background-color: #f5f5f5;
-      }
-
-      &.completed {
-        background-color: #f0f0f0;
-      }
-    }
+.scrollable-content {
+  max-height: calc(100vh - 400px); /* Adjust as necessary for the available space */
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, auto));
+  gap: 16px;
+  padding: 16px 8px; /* Adjust padding to your liking */
+}
+
+.target-card {
+  display: flex;
+  //flex-direction: column; /* Stack image and details vertically */
+  //align-items: flex-start;
+  gap: 12px;
+  padding: 8px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+  //width: 100%; /* Keep cards from growing too wide */
+}
+
+.target-card:hover {
+  background-color: #f5f5f5;
+}
+
+.target-card.completed {
+  background-color: #f0f0f0;
+}
+
+.target-image {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+}
+
+.target-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.target-name {
+  font-weight: 500;
+}
+
+.target-name span {
+  color: #666;
+  font-size: 0.9em;
+}
 
-    .target-image {
-      width: 64px;
-      height: 64px;
-      object-fit: contain;
-    }
-
-    .target-details {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-
-    .target-name {
-      font-weight: 500;
-      
-      span {
-        color: #666;
-        font-size: 0.9em;
-      }
-    }
 `]
 })
 export class PlanPokemonDetailsComponent {
diff --git a/src/app/features/plan/planV2.component.ts b/src/app/features/plan/planV2.component.ts
index 4134245..2827b8e 100644
--- a/src/app/features/plan/planV2.component.ts
+++ b/src/app/features/plan/planV2.component.ts
@@ -76,7 +76,7 @@ import { AuthService } from '../../core/services/auth.service';
     }
 
     .games-section {
-      width: 11%;
+      width: 220px;
       padding: 20px;
       overflow-y: auto;
       background: #f5f5f5;