diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 5a26cce..60ad4c1 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -9,10 +9,12 @@ import Footer from '../components/Footer/Footer';
 // Debounce hook
 function useDebouncedValue(value, delay = 250) {
   const [debounced, setDebounced] = useState(value);
+
   useEffect(() => {
     const handler = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(handler);
   }, [value, delay]);
+
   return debounced;
 }
 
@@ -51,13 +53,14 @@ function HomePage() {
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div style={{ position: 'relative', minHeight: '100vh', paddingBottom: '60px' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
       {/* Main content scrollable area */}
-      <div style={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
+      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
         {/* Left panel: card list */}
         <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', overflowY: 'auto' }}>
           <h2>Card List</h2>
           <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+
           <Virtuoso
             style={{ height: '100%' }}
             data={filteredCards}
@@ -84,10 +87,8 @@ function HomePage() {
         </div>
       </div>
 
-      {/* Footer fixed at the bottom */}
-      <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0 }}>
-        <Footer />
-      </div>
+      {/* Footer at the bottom */}
+      <Footer />
     </div>
   );
 }