diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index b7262fe..928e71e 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -58,37 +58,42 @@ function HomePage() {
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div style={{ display: 'flex', height: '100vh' }}>
-      {/* Left panel: card list */}
-      <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem' }}>
-        <h2>Card List</h2>
-        <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+      {/* Main content row */}
+      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+        {/* Left panel: card list */}
+        <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', overflow: 'hidden' }}>
+          <h2>Card List</h2>
+          <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
 
-        {/* ✅ Virtualized list */}
-        <Virtuoso
-          style={{ height: 'calc(100vh - 100px)' }} // Adjust for header/search bar
-          data={filteredCards}
-          itemContent={(index, card) => <CardRow key={card.id} card={card} />}
-        />
-      </div>
+          {/* ✅ Virtualized list */}
+          <Virtuoso
+            style={{ height: 'calc(100vh - 100px)' }}
+            data={filteredCards}
+            itemContent={(index, card) => <CardRow key={card.id} card={card} />}
+          />
+        </div>
 
-      {/* Right panel: card image */}
-      <div style={{ flex: 1, padding: '1rem' }}>
-        <h2>Card Image / Details</h2>
-        {expandedCardId && expandedCard ? (
-          cardImages[expandedCardId] ? (
-            <img
-              src={cardImages[expandedCardId]}
-              alt={expandedCard.name}
-              style={{ maxWidth: '100%', maxHeight: '80vh' }}
-            />
+        {/* Right panel: card image */}
+        <div style={{ flex: 1, padding: '1rem', overflowY: 'auto' }}>
+          <h2>Card Image / Details</h2>
+          {expandedCardId && expandedCard ? (
+            cardImages[expandedCardId] ? (
+              <img
+                src={cardImages[expandedCardId]}
+                alt={expandedCard.name}
+                style={{ maxWidth: '100%', maxHeight: '80vh' }}
+              />
+            ) : (
+              <p>Loading image...</p>
+            )
           ) : (
-            <p>Loading image...</p>
-          )
-        ) : (
-          <p>Click a card to see its image</p>
-        )}
+            <p>Click a card to see its image</p>
+          )}
+        </div>
       </div>
+
+      {/* Footer: always at the bottom */}
       <Footer />
     </div>
   );