diff --git a/apps/hub/app/layout.tsx b/apps/hub/app/layout.tsx
index 4d95903e..3912df13 100644
--- a/apps/hub/app/layout.tsx
+++ b/apps/hub/app/layout.tsx
@@ -5,7 +5,15 @@ import "./globals.css";
 import { getServerSession } from "next-auth";
 import { NextAuthSessionProvider } from "./_components/AuthSessionProvider";
 import { options } from "./api/auth/[...nextauth]/auth";
-import { ExitIcon, DiscordLogoIcon, InstagramLogoIcon, ReaderIcon, HomeIcon, PersonIcon, GearIcon } from "@radix-ui/react-icons";
+import {
+  ExitIcon,
+  DiscordLogoIcon,
+  InstagramLogoIcon,
+  ReaderIcon,
+  HomeIcon,
+  PersonIcon,
+  GearIcon,
+} from "@radix-ui/react-icons";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -38,14 +46,14 @@ export default async function RootLayout({
             className="hero min-h-screen"
             style={{
               backgroundImage:
-                "url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
+                "url(https://media.discordapp.net/attachments/1086051758461173931/1336779010109341766/d-hyan.PNG?ex=67b19238&is=67b040b8&hm=5d90bef8e44a8e620d759d1bebe0f1a3649b0f3cadc735bd9a06d5e6702f2d14&=&format=webp&quality=lossless)",
             }}
           >
-            <div className="hero-overlay bg-opacity-60"></div>
+            <div className="hero-overlay bg-opacity-30"></div>
 
             {/* Card */}
             <div className="hero-content text-neutral-content text-center w-full max-w-full h-full m-10">
-              <div className="card bg-base-100 shadow-2xl w-full h-5/6 max-h-[calc(100vh-13rem)] p-4 flex flex-col mr-24 ml-24">
+              <div className="card bg-base-100 shadow-2xl w-full min-h-full h-full max-h-[calc(100vh-13rem)] p-4 flex flex-col mr-24 ml-24">
                 {/* Top Navbar */}
                 <div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
                   <div className="flex-1">
@@ -141,7 +149,10 @@ export default async function RootLayout({
                         <InstagramLogoIcon className="w-5 h-5" />
                       </a>
                     </div>
-                    <div className="tooltip tooltip-top" data-tip="Knowledgebase">
+                    <div
+                      className="tooltip tooltip-top"
+                      data-tip="Knowledgebase"
+                    >
                       <a href="/docs" className="hover:text-primary">
                         <ReaderIcon className="w-5 h-5" />
                       </a>