diff --git a/src/app/deck-list.component.html b/src/app/deck-list.component.html
index e81cde4..61613c2 100644
--- a/src/app/deck-list.component.html
+++ b/src/app/deck-list.component.html
@@ -10,7 +10,7 @@
   <div class="flex flex-col md:flex-row gap-4 mx-auto max-w-5xl">
     
     <!-- Left column: List of decks -->
-    <div class="w-full md:w-1/3">
+    <div class="w-auto">
       <div class="bg-white shadow rounded-lg p-4">
         <div class="flex">
         <h2 class="text-xl font-semibold mb-4">Decks</h2>
@@ -43,7 +43,7 @@
     </div>
 
     <!-- Right column: Active deck details -->
-    <div class="w-full md:w-2/3" *ngIf="activeDeck">
+    <div class="w-auto min-w-96" *ngIf="activeDeck">
       <div class="bg-white shadow rounded-lg p-6 border-dashed border-2 border-indigo-600">
         <!-- Deck header -->
         <div class="flex justify-between items-center mb-4">
diff --git a/src/app/deck-list.component.ts b/src/app/deck-list.component.ts
index 76455fb..08c4726 100644
--- a/src/app/deck-list.component.ts
+++ b/src/app/deck-list.component.ts
@@ -99,6 +99,7 @@ export class DeckListComponent implements OnInit {
         next: () => {
           this.loadDecks();
           this.closeDeletePopover();
+          this.activeDeck = this.decks[0];
         },
         error: (err) => console.error('Error deleting deck', err),
       });