diff --git a/web/src/layout/index.tsx b/web/src/layout/index.tsx
index ecfb3153a..c65773b27 100644
--- a/web/src/layout/index.tsx
+++ b/web/src/layout/index.tsx
@@ -9,6 +9,8 @@ import Header from "./Header";
 import Footer from "./Footer";
 
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
   min-height: 100%;
   width: 100%;
 `;
@@ -23,6 +25,11 @@ const StyledToastContainer = styled(ToastContainer)`
   padding-top: 70px;
 `;
 
+const OutletContainer = styled.div`
+  flex: 1;
+  background-color: ${({ theme }) => theme.lightBackground};
+`;
+
 const Layout: React.FC = () => {
   const containerRef = useRef(null);
 
@@ -32,7 +39,10 @@ const Layout: React.FC = () => {
         <Container>
           <Header />
           <StyledToastContainer />
-          <Outlet />
+          <OutletContainer>
+            <Outlet />
+          </OutletContainer>
+
           <Footer />
         </Container>
       </StyledOverlayScrollbarsComponent>
diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx
index 11afa992b..09473f5af 100644
--- a/web/src/pages/Cases/index.tsx
+++ b/web/src/pages/Cases/index.tsx
@@ -7,9 +7,9 @@ import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import CasesDisplay from "components/CasesDisplay";
 import CaseDetails from "./CaseDetails";
 import { useFiltersContext } from "context/FilterProvider";
+
 const Container = styled.div`
   width: 100%;
-  min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
   padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
diff --git a/web/src/pages/Courts/index.tsx b/web/src/pages/Courts/index.tsx
index fef9e6ab1..acfad33e8 100644
--- a/web/src/pages/Courts/index.tsx
+++ b/web/src/pages/Courts/index.tsx
@@ -6,7 +6,6 @@ import CourtDetails from "./CourtDetails";
 
 const Container = styled.div`
   width: 100%;
-  min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
   padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx
index 7ae82faee..db2118dbf 100644
--- a/web/src/pages/Dashboard/index.tsx
+++ b/web/src/pages/Dashboard/index.tsx
@@ -12,7 +12,6 @@ import ConnectWallet from "components/ConnectWallet";
 
 const Container = styled.div`
   width: 100%;
-  min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
   padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
index cb1168923..d3e0a99b8 100644
--- a/web/src/pages/Home/index.tsx
+++ b/web/src/pages/Home/index.tsx
@@ -9,7 +9,6 @@ import { getOneYearAgoTimestamp } from "utils/date";
 
 const Container = styled.div`
   width: 100%;
-  min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
   padding: calc(32px + (132 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (72 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);