diff --git a/src/theme/NotFound/Content/index.tsx b/src/theme/NotFound/Content/index.tsx
index 6d1fa37f59d..8600f218a57 100644
--- a/src/theme/NotFound/Content/index.tsx
+++ b/src/theme/NotFound/Content/index.tsx
@@ -12,16 +12,19 @@ import type { Props } from '@theme/NotFound/Content';
 import Heading from '@theme/Heading';
 import { Content, Section } from '@site/src/css/SharedStyling';
 import { useLocation } from '@docusaurus/router';
+import styled from 'styled-components';
 
 // Internal Components
 import Footer from '@site/src/segments/Footer';
 
 export default function NotFoundContent({ className }: Props): JSX.Element {
   const location = useLocation();
-  const pathname = location.pathname;
+
+  // Determine if the pathname starts with '/docs'
+  const isDocsPage = location.pathname.startsWith('/docs');
 
   return (
-    <>
+    <PageContainer isDocsPage={isDocsPage!}>
       <Section>
         <Content>
           <main className={clsx('container margin-vert--xl', className)}>
@@ -58,7 +61,13 @@ export default function NotFoundContent({ className }: Props): JSX.Element {
         </Content>
       </Section>
 
-      {location.pathname.startsWith('/docs') && <Footer />}
-    </>
+      {isDocsPage && <Footer />}
+    </PageContainer>
   );
 }
+
+const PageContainer = styled.div<{ isDocsPage?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  ${({ isDocsPage }) => isDocsPage && 'min-height: 100vh;'};
+`;
diff --git a/src/theme/NotFound/index.tsx b/src/theme/NotFound/index.tsx
index d7187dc722c..4dabce5990f 100644
--- a/src/theme/NotFound/index.tsx
+++ b/src/theme/NotFound/index.tsx
@@ -5,19 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// External Components
 import React from 'react';
+
+// Internal Components
 import { translate } from '@docusaurus/Translate';
 import { PageMetadata } from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 import NotFoundContent from '@theme/NotFound/Content';
 import { useLocation } from '@docusaurus/router';
 
-// Internal Components
-import Footer from '@site/src/segments/Footer';
-
 export default function Index(): JSX.Element {
   const location = useLocation();
-  const pathname = location.pathname;
 
   const title = translate({
     id: 'theme.NotFound.title',
diff --git a/src/theme/Root.js b/src/theme/Root.js
index c1ac2d49f2c..aefebed85b2 100644
--- a/src/theme/Root.js
+++ b/src/theme/Root.js
@@ -4,6 +4,7 @@ import React from 'react';
 
 // External Components
 import i18nInitialize from '@site/src/utils/i18n';
+import styled from 'styled-components';
 
 // Internal Components
 import Footer from '@site/src/segments/Footer';
@@ -60,7 +61,7 @@ export default function Root({ children }) {
   }
 
   // check if location path exists
-  function locationPathExists(pathname, condition, comingfrom = null) {
+  function locationPathExists(pathname, condition) {
     let result = false;
     pathname = pathname.toUpperCase();
 
@@ -98,11 +99,11 @@ export default function Root({ children }) {
   }
 
   return (
-    <div className={returnAdditionalClasses(superimposedConditions)}>
+    <PageContainer className={returnAdditionalClasses(superimposedConditions)}>
       <ServerStyle from={children} />
 
       {/* Main react children */}
-      {children}
+      <Content>{children}</Content>
 
       {excludeDefaultConfigAt('/BRB') &&
         excludeDefaultConfigAt('/DOCS') &&
@@ -112,6 +113,17 @@ export default function Root({ children }) {
             <CookieComponent />
           </>
         )}
-    </div>
+    </PageContainer>
   );
 }
+
+const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+
+// The main content should take up all remaining space
+const Content = styled.div`
+  flex: 1;
+`;