diff --git a/components/Layout.tsx b/components/Layout.tsx
index b2d176e..6db4efb 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -9,7 +9,7 @@ export default function Layout({ children }: LayoutProps) {
       <header className="py-5 px-20">
         <h1 className="text-2xl">Mock SAML IdP</h1>
       </header>
-      <main>{children}</main>
+      <main className="h-[calc(100%_-_76px)] overflow-auto">{children}</main>
     </>
   );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 2a8a77d..7bf759c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -23,7 +23,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
 
 const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
   return (
-    <>
+    <div className="h-full">
       <Head>
         <title>Mock SAML IdP - Metadata</title>
       </Head>
@@ -41,7 +41,7 @@ const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
           <Link href="/api/saml/metadata/download">Download Metadata</Link>
         </p>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/styles/globals.css b/styles/globals.css
index bf78f80..356f201 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -16,6 +16,10 @@ body {
   padding: 0;
   margin: 0;
   font-family: "Manrope", sans-serif;
+  height: 100%;
+}
+#__next {
+  height: 100%;
 }
 
 a {
