diff --git a/apps/hub/app/(app)/layout.tsx b/apps/hub/app/(app)/layout.tsx
index e38a592a..681f8320 100644
--- a/apps/hub/app/(app)/layout.tsx
+++ b/apps/hub/app/(app)/layout.tsx
@@ -24,15 +24,16 @@ export default async function RootLayout({
 
 	return (
 		<div
-			className="hero min-h-screen"
+			className="min-h-screen"
 			style={{
 				backgroundImage: "url('/bg.png')",
+				backgroundSize: "cover",
 			}}
 		>
-			<div className="hero-overlay bg-opacity-30"></div>
+			<div className="absolute h-screen w-screen bg-opacity-30"></div>
 			{/* Card */}
-			<div className="hero-content text-neutral-content m-10 h-full w-full max-w-full text-center">
-				<div className="card bg-base-100 ml-24 mr-24 flex h-full max-h-[calc(100vh-13rem)] min-h-full w-full flex-col p-4 shadow-2xl">
+			<div className="text-neutral-content flex h-screen w-full max-w-full items-center justify-center text-center">
+				<div className="bg-base-100 mx-5 flex max-h-full max-w-[1600px] flex-col rounded-xl p-4 shadow-2xl xl:mx-12">
 					{/* Top Navbar */}
 					<HorizontalNav />