diff --git a/public/branding/banner.png b/public/branding/banner.png
new file mode 100644
index 0000000..3401431
Binary files /dev/null and b/public/branding/banner.png differ
diff --git a/public/branding/logo.png b/public/branding/logo.png
new file mode 100644
index 0000000..a76dec6
Binary files /dev/null and b/public/branding/logo.png differ
diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
index fd76fda..b2893c8 100644
--- a/src/components/Breadcrumbs.astro
+++ b/src/components/Breadcrumbs.astro
@@ -6,7 +6,10 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
 
 {
   items.length > 0 && (
-    <nav aria-label="Breadcrumb" class="mb-4 flex space-x-2 text-sm">
+    <nav
+      aria-label="Breadcrumb"
+      class="flex flex-wrap items-center gap-1.5 rounded md:px-3 text-[13px] leading-none text-gray-600"
+    >
       {items.map((item, index) => {
         const isCurrent = index === items.length - 1;
 
@@ -17,11 +20,14 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
                 {item.label}
               </a>
             ) : (
-              <span aria-current={isCurrent ? "page" : undefined}>
+              <span
+                aria-current={isCurrent ? "page" : undefined}
+                class={isCurrent ? "font-bold text-black" : undefined}
+              >
                 {item.label}
               </span>
             )}
-            {index < items.length - 1 && <span class="text-[#999]">/</span>}
+            {index < items.length - 1 && <span class="text-gray-400">/</span>}
           </>
         );
       })}
diff --git a/src/config/content.ts b/src/config/content.ts
index 4384eff..50e4d0e 100644
--- a/src/config/content.ts
+++ b/src/config/content.ts
@@ -1,7 +1,4 @@
 export const contentSections = {
-  website: {
-    dir: "website",
-  },
   avatarItems: {
     dir: "avatar-items",
   },
diff --git a/src/content/website/index.mdx b/src/content/website/index.mdx
deleted file mode 100644
index a629166..0000000
--- a/src/content/website/index.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Website
-description: Learn about the Radium website
----
-import ContentTOC from '../../components/ContentTOC.astro';
-
-The Radium website is the central hub for all things Radium. It includes the following sections:
-- [Home](https://radium.live/): The main landing page for Radium, where you can learn about the project and its features.
-- [Documentation](https://docs.radium.live/): The official documentation for Radium, which includes guides, API references, and tutorials.
-- [Community Forum](https://forum.radium.live/): A place to ask questions, share ideas, and connect with other Radium users.
-- [Blog](https://blog.radium.live/): A collection of articles and updates about Radium, including release notes, feature announcements, and community highlights.
-
-
-## Table of Contents
-<ContentTOC sectionName="website" />
\ No newline at end of file
diff --git a/src/content/website/registration.mdx b/src/content/website/registration.mdx
deleted file mode 100644
index f3c6183..0000000
--- a/src/content/website/registration.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Registration
-description: Learn how to register for Radium
----
-# Registration
-To register for Radium, follow these steps:
-1. Go to the [Radium website](https://radium.live/).
-2. Click on the "Sign Up" button in the top right corner of the homepage.
-3. Fill out the registration form with your email address, username, and password.
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4d02859..ef8cb8f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -16,11 +16,18 @@ const { title, breadcrumbs = [] } = Astro.props as {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Radium Help - {title}</title>
     </head>
-    <body class="min-h-screen flex items-center justify-center">
-        <main
-            class="flex flex-col bg-white p-5 rounded w-full md:w-3/4 shadow min-h-200"
-        >
-            <Breadcrumbs items={breadcrumbs} />
+    <body class="site-shell min-h-screen sm:flex sm:items-center sm:justify-center">
+        <main class="flex min-h-screen w-full flex-col bg-white p-4 sm:min-h-200 sm:w-11/12 md:w-3/4 sm:rounded sm:p-5 sm:shadow">
+            <header class="mb-5 flex flex-col gap-3 border-b border-gray-200 pb-4 sm:mb-6 sm:flex-row sm:items-center sm:justify-between">
+                <a href="/" class="inline-flex w-fit items-center">
+                    <img
+                        src="/branding/logo.png"
+                        alt="Radium Logo"
+                        class="h-auto w-42.5"
+                    />
+                </a>
+                <Breadcrumbs items={breadcrumbs} />
+            </header>
             <slot />
             <footer class="text-gray-600 flex-1 flex items-end">
                 <p>
diff --git a/src/pages/[collection]/[...slug].astro b/src/pages/[collection]/[...slug].astro
index 245df4b..58dc675 100644
--- a/src/pages/[collection]/[...slug].astro
+++ b/src/pages/[collection]/[...slug].astro
@@ -35,7 +35,7 @@ const collectionIndex = entries.find((item) => item.id === "index");
 const entryUrl =
   entry.id === "index" ? `/${collection}` : `/${collection}/${entry.id}`;
 const breadcrumbs = [
-  { label: "Radium Help", href: "/" },
+  { label: "Help", href: "/" },
   {
     label: collectionIndex?.data.title ?? collection,
     href: entry.id === "index" ? undefined : `/${collection}`,
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 37716b3..c719ddc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,68 @@
 ---
+import { getCollection } from "astro:content";
 import Layout from "../layouts/Layout.astro";
 import TOC from "../components/TOC.astro";
+import { collectionNames } from "../config/content";
 
-const breadcrumbs = [{ label: "Radium Help" }];
+const breadcrumbs = [{ label: "Help" }];
+
+const sections = await Promise.all(
+    collectionNames.map(async (name) => {
+        const entries = await getCollection(name);
+        const indexEntry = entries.find((entry) => entry.id === "index");
+        const articles = entries.filter((entry) => entry.id !== "index");
+
+        return {
+            name,
+            title: indexEntry?.data.title ?? name,
+            description:
+                indexEntry?.data.description ??
+                "Browse help articles for this section.",
+            articleCount: articles.length,
+        };
+    }),
+);
 ---
 
-<Layout title="Home" breadcrumbs={breadcrumbs}>
-  <TOC />
+<Layout title="Help Home" breadcrumbs={breadcrumbs}>
+    <section class="prose-radium mb-6">
+        <h1>Welcome to Radium's Official Help Page!</h1>
+        <p>
+            Find quick answers, setup guidance, and reference information for
+            Radium. Choose a section below to get started!
+        </p>
+    </section>
+
+    <section class="mb-7">
+        <h2 class="mb-3 text-sm font-bold">Start here</h2>
+        <div class="grid gap-3 md:grid-cols-2">
+            {
+                sections.map((section) => (
+                    <a
+                        href={`/${section.name}`}
+                        class="block rounded border border-gray-200 hover:bg-gray-50 p-4 text-black bg-white"
+                    >
+                        <span class="mb-1 block text-sm font-bold text-link">
+                            {section.title}
+                        </span>
+                        <span class="mb-2 block text-[12px] leading-5 text-gray-700">
+                            {section.description}
+                        </span>
+                        {section.articleCount !== 0 && (
+                          <span class="text-[11px] text-gray-500">
+                              {section.articleCount === 1
+                                  ? "1 article"
+                                  : `${section.articleCount} articles`}
+                          </span>
+                        )}
+                    </a>
+                ))
+            }
+        </div>
+    </section>
+
+    <!-- <section>
+        <h2 class="mb-2 text-sm font-bold">All help topics</h2>
+        <TOC />
+    </section> -->
 </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
index b5be7a8..1b63d95 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,17 +2,35 @@
 @plugin "@tailwindcss/typography";
 
 :root {
-    --background: gray;
+    --background: #ffffff;
     --foreground: #000000;
 }
 
 body {
-    background: var(--background);
+    background: greenyellow;
     color: var(--foreground);
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
 }
 
+/* @media (prefers-color-scheme: dark) {
+	:root {
+		--background: #000000;
+		--foreground: #ffffff;
+	}
+} */
+
+@media (min-width: 640px) {
+    body.site-shell {
+        background-image:
+            linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)),
+            url("/branding/banner.png");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+}
+
 @theme inline {
     --color-background: var(--background);
     --color-foreground: var(--foreground);
@@ -21,4 +39,4 @@ body {
 
 @utility prose-radium {
     @apply prose prose-sm max-w-none prose-headings:font-bold prose-headings:mb-1 prose-headings:mt-0 prose-hr:mt-2 prose-hr:mb-6 prose-hr:border-gray-300 text-[12px] prose-li:marker:text-black prose-a:text-link prose-a:no-underline prose-a:hover:underline;
-}
\ No newline at end of file
+}
