diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 60ad4c1..5a26cce 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -9,12 +9,10 @@ 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;
 }
 
@@ -53,14 +51,13 @@ function HomePage() {
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+    <div style={{ position: 'relative', minHeight: '100vh', paddingBottom: '60px' }}>
       {/* Main content scrollable area */}
-      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+      <div style={{ display: 'flex', height: '100%', 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}
@@ -87,8 +84,10 @@ function HomePage() {
         </div>
       </div>
 
-      {/* Footer at the bottom */}
-      <Footer />
+      {/* Footer fixed at the bottom */}
+      <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0 }}>
+        <Footer />
+      </div>
     </div>
   );
 }