edgeware-network
diff --git a/‎app/layout.tsx‎
Lines changed: 34 additions & 41 deletions b/‎app/layout.tsx‎
Lines changed: 34 additions & 41 deletions
diff --git a/‎app/page.tsx‎
Lines changed: 5 additions & 7 deletions b/‎app/page.tsx‎
Lines changed: 5 additions & 7 deletions
@@ -1,54 +1,47 @@
+import Background from "@/components/ui/background";
 import { Footer } from "@/app/footer";
 import { Header } from "@/app/header";
-import {
-	geist,
-	manrope,
-	montserrat,
-	poppins,
-	unbounded,
-	work,
-} from "@/lib/fonts";
-
+import { geist } from "@/lib/fonts";
 import { cn } from "@/lib/utils";
 import { Providers } from "@/providers";
 import type { Metadata } from "next";
 import { Toaster } from "sonner";
 import "./globals.css";
 
 export const metadata: Metadata = {
-	title: "Universal Hybrid Substrate Faucet",
-	description: "A one-stop testnet faucet for all the substrate chains.",
+  title: "Universal Hybrid Substrate Faucet",
+  description: "A one-stop testnet faucet for all the substrate chains.",
 };
 
 export default function RootLayout({
-	children,
-}: Readonly<{
-	children: React.ReactNode;
-}>) {
-	return (
-		<html lang="en">
-			<body
-				className={cn(
-					geist.variable,
-					manrope.variable,
-					montserrat.variable,
-					poppins.variable,
-					unbounded.variable,
-					work.variable,
-					"antialiased bg-background text-foreground"
-				)}
-			>
-				<Providers>
-					<div className="flex flex-col place-items-center min-h-dvh w-full px-2 pt-1 pb-2">
-						<Header />
-						<main className="flex flex-col flex-1 items-center justify-items-center font-geist-sans w-full p-2 text-center gap-2">
-							{children}
-						</main>
-						<Footer />
-					</div>
-					<Toaster richColors theme="dark" position="bottom-right" />
-				</Providers>
-			</body>
-		</html>
-	);
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body
+        className={cn(
+          geist.variable,
+          "antialiased bg-background text-foreground"
+        )}
+      >
+        <Providers>
+          <Background />
+          <div className="relative z-10 flex flex-col min-h-dvh w-full px-2 pt-1 pb-2 pointer-events-none">
+            <div className="w-full pointer-events-auto">
+              <Header />
+            </div>
+            <main className="flex flex-col flex-1 items-center justify-center font-geist-sans w-full p-2 text-center gap-2">
+              {children}
+            </main>
+            <div className="w-full pointer-events-auto">
+              <Footer />
+            </div>
+          </div>
+          <Toaster richColors theme="dark" position="bottom-right" />
+        </Providers>
+      </body>
+    </html>
+  );
 }
@@ -1,11 +1,9 @@
 import { RequestTokensForm } from "@/app/request-tokens-form";
 
 export default async function Home() {
-	return (
-		<>
-			<section className="flex flex-col items-center p-2 justify-items-center w-full max-w-2xl">
-				<RequestTokensForm />
-			</section>
-		</>
-	);
+  return (
+    <div className="pointer-events-auto flex h-full">
+      <RequestTokensForm />
+    </div>
+  );
 }