diff --git a/apps/hub/app/layout.tsx b/apps/hub/app/layout.tsx
index 5d3dea17..4d95903e 100644
--- a/apps/hub/app/layout.tsx
+++ b/apps/hub/app/layout.tsx
@@ -1,23 +1,25 @@
-import type { Metadata } from 'next';
-import { Geist, Geist_Mono } from 'next/font/google';
-import './globals.css';
-import { getServerSession } from 'next-auth';
-import { NextAuthSessionProvider } from './_components/AuthSessionProvider';
-import { options } from './api/auth/[...nextauth]/auth';
+import Link from "next/link";
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+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";
 
 const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
 });
 
 const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
 export default async function RootLayout({
@@ -36,13 +38,116 @@ 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://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
             }}
           >
             <div className="hero-overlay bg-opacity-60"></div>
-            <div className="hero-content text-neutral-content text-center w-full max-w-full h-full m-52">
-              <div className="card bg-base-100 shadow-2xl w-full h-5/6 m-52">
-                {children}
+
+            {/* 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">
+                {/* Top Navbar */}
+                <div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
+                  <div className="flex-1">
+                    <a className="btn btn-ghost normal-case text-xl">
+                      Virtual Air Rescue - HUB
+                    </a>
+                  </div>
+                  <div className="flex-none">
+                    <ul className="flex space-x-2 px-1">
+                      <li>
+                        <Link href="/">
+                          <button className="btn btn-sm btn-outline btn-info">
+                            Zum Dispatch
+                          </button>
+                        </Link>
+                      </li>
+                      <li>
+                        <Link href="/logout">
+                          <button className="btn btn-sm">
+                            <ExitIcon /> Logout
+                          </button>
+                        </Link>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                {/* Hauptlayout: Sidebar + Content (nimmt Resthöhe ein) */}
+                <div className="flex flex-grow overflow-hidden">
+                  {/* Linke Sidebar */}
+                  <div className="w-64 bg-base-300 p-4 rounded-lg shadow-md">
+                    <ul className="menu">
+                      <li>
+                        <a>
+                          <HomeIcon /> Dashboard
+                        </a>
+                      </li>
+                      <li>
+                        <a>
+                          <PersonIcon /> Profile
+                        </a>
+                      </li>
+                      <li>
+                        <a>
+                          <GearIcon /> Settings
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+
+                  {/* Scrollbarer Content-Bereich */}
+                  <div className="flex-grow bg-base-100 p-6 rounded-lg shadow-md ml-4 overflow-auto h-full">
+                    {children}
+                  </div>
+                </div>
+
+                {/* Footer */}
+                <footer className="footer flex justify-between items-center p-4 bg-base-200 mt-4 rounded-lg shadow-md">
+                  {/* Left: Impressum & Datenschutz */}
+                  <div className="flex gap-4 text-sm">
+                    <a href="/impressum" className="hover:text-primary">
+                      Impressum
+                    </a>
+                    <a href="/datenschutz" className="hover:text-primary">
+                      Datenschutzerklärung
+                    </a>
+                  </div>
+
+                  {/* Center: Copyright */}
+                  <p className="text-sm">
+                    Copyright © {new Date().getFullYear()} - VAR Luftretung
+                  </p>
+
+                  {/* Right: Social Icons */}
+                  <div className="flex gap-4">
+                    <div className="tooltip tooltip-top" data-tip="Discord">
+                      <a
+                        href="https://discord.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="hover:text-primary"
+                      >
+                        <DiscordLogoIcon className="w-5 h-5" />
+                      </a>
+                    </div>
+                    <div className="tooltip tooltip-top" data-tip="Instagram">
+                      <a
+                        href="https://instagram.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="hover:text-primary"
+                      >
+                        <InstagramLogoIcon className="w-5 h-5" />
+                      </a>
+                    </div>
+                    <div className="tooltip tooltip-top" data-tip="Knowledgebase">
+                      <a href="/docs" className="hover:text-primary">
+                        <ReaderIcon className="w-5 h-5" />
+                      </a>
+                    </div>
+                  </div>
+                </footer>
               </div>
             </div>
           </div>
diff --git a/apps/hub/app/page.tsx b/apps/hub/app/page.tsx
index bc16e11f..4ced77b5 100644
--- a/apps/hub/app/page.tsx
+++ b/apps/hub/app/page.tsx
@@ -1,143 +1,57 @@
-import Link from 'next/link';
-import { PrismaClient } from '@repo/db';
-import { PaginatedTable } from './_components/PaginatedTable';
-import { ExitIcon } from "@radix-ui/react-icons"
+import { PrismaClient } from "@repo/db";
+import { PaginatedTable } from "./_components/PaginatedTable";
 
 export default async function Home() {
   const prisma = new PrismaClient();
 
   return (
-    <div className='flex flex-col min-h-full'>
-      <div className="navbar">
-        <div className="flex-1">
-          <a className="btn btn-ghost text-xl">Virtual Air Rescue - HUB</a>
-        </div>
-        <div className="flex-none">
-          <ul className="menu menu-horizontal px-1">
-            <li><Link href="/"><button className="btn btn-sm btn-outline btn-info">Zum Dispatch</button></Link></li>
-            <li><Link href="/logout"><button className="btn btn-sm"><ExitIcon /> Logout</button></Link></li>
-          </ul>
-        </div>
-      </div>
-      <div className='flex'>
-        <ul className="menu bg-base-200 rounded-box w-56 ml-5 h-full">
-          <li>
-            <a>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-              </svg>
-              Item 2
-            </a>
-          </li>
-          <li>
-            <a>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              Item 1
-            </a>
-          </li>
-          <li>
-            <a>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-              </svg>
-              Item 3
-            </a>
-          </li>
-        </ul>
-
-        <PaginatedTable
-          rowsPerPage={10}
-          prismaModel={'user'}
-          columns={[
-            {
-              header: 'ID',
-              accessorKey: 'id',
-            },
-            {
-              header: 'Email',
-              accessorKey: 'email',
-            },
-            {
-              header: 'First Name',
-              accessorKey: 'firstname',
-            },
-            {
-              header: 'Last Name',
-              accessorKey: 'lastname',
-              footer: 'Total',
-            },
-          ]}
-        />
-      </div>
-      <footer className="footer footer-center bg-base-300 text-base-content p-4 gap-y-2 mt-auto rounded-b-xl">
-        <aside>
-          <p>Copyright © {new Date().getFullYear()} - VAR Luftretung</p>
-        </aside>
-        <nav className="grid-flow-col gap-4 md:place-self-center">
-          <a>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              className="fill-current">
-              <path
-                d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
-            </svg>
-          </a>
-          <a>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              className="fill-current">
-              <path
-                d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
-            </svg>
-          </a>
-          <a>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              className="fill-current">
-              <path
-                d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
-            </svg>
-          </a>
-        </nav>
-      </footer>
+    <div>
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
+      gd
+      <br />
     </div>
   );
 }