diff --git a/docs/👨🏼‍💻 Self Hosting/docker.mdx b/docs/Self Hosting/docker.mdx
similarity index 84%
rename from docs/👨🏼‍💻 Self Hosting/docker.mdx
rename to docs/Self Hosting/docker.mdx
index f6298db..80cfe64 100644
--- a/docs/👨🏼‍💻 Self Hosting/docker.mdx	
+++ b/docs/Self Hosting/docker.mdx	
@@ -1,6 +1,6 @@
 ---
 title: '🐋 Docker'
-published: '2024-10-07'
+updated: '2024-10-07'
 summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 order: 4
 ---
diff --git a/docs/🖥️ Service Monitoring/components.mdx b/docs/Service Monitoring/components.mdx
similarity index 84%
rename from docs/🖥️ Service Monitoring/components.mdx
rename to docs/Service Monitoring/components.mdx
index 6588b11..70191f7 100644
--- a/docs/🖥️ Service Monitoring/components.mdx	
+++ b/docs/Service Monitoring/components.mdx	
@@ -1,6 +1,6 @@
 ---
 title: '🧩 Components'
-published: '2024-10-07'
+updated: '2024-10-07'
 summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 order: 2
 ---
diff --git a/docs/🖥️ Service Monitoring/supported-services.mdx b/docs/Service Monitoring/supported-services.mdx
similarity index 93%
rename from docs/🖥️ Service Monitoring/supported-services.mdx
rename to docs/Service Monitoring/supported-services.mdx
index 70c0077..6dcac3d 100644
--- a/docs/🖥️ Service Monitoring/supported-services.mdx	
+++ b/docs/Service Monitoring/supported-services.mdx	
@@ -1,6 +1,6 @@
 ---
 title: '✔️ Supported Services'
-published: '2024-10-07'
+updated: '2024-10-07'
 summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 order: 3
 ---
diff --git a/docs/intro.mdx b/docs/intro.mdx
index bb3d7bf..6eb2d70 100644
--- a/docs/intro.mdx
+++ b/docs/intro.mdx
@@ -1,6 +1,6 @@
 ---
 title: '🚀 Introduction'
-published: '2024-10-06'
+updated: '2024-10-06'
 summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 order: 1
 ---
@@ -8,10 +8,8 @@ order: 1
 > [!IMPORTANT]
 > These docs are currently a work in progress and are subject to change.
 
-# Pulse App
-<span className="flex gap-2 items-center select-none">
-    <Activity className="w-4 h-4 text-primary" /> <span>A lightweight service monitoring solution for tracking the availability of whatever service your heart desires!</span>
-</span>
+# <span className="flex gap-2.5 items-center"><Activity className="w-6 h-6 text-primary" /> Pulse App</span>
+A lightweight service monitoring solution for tracking the availability of whatever service your heart desires!
 
 ## Getting Started
 Let's get you up and running—this will only take a few minutes! Start by [creating your account](#creating-your-account) and
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9a33869..33aeacb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import Navbar from "@/components/navbar/navbar";
 import Sidebar from "@/components/sidebar/sidebar";
 import Footer from "@/components/footer";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { getDocsContent } from "@/lib/mdx";
 
 /**
  * The metadata for this app.
@@ -41,29 +42,32 @@ const RootLayout = ({
     children,
 }: Readonly<{
     children: ReactNode;
-}>): ReactElement => (
-    <html lang="en">
-        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-            <body
-                className="scroll-smooth antialiased"
-                style={{
-                    background: "var(--background-gradient)",
-                }}
-            >
-                <TooltipProvider delayDuration={100}>
-                    <div className="px-3 md:px-7 max-w-screen-2xl min-h-screen mx-auto flex flex-col transition-all">
-                        <Navbar />
-                        <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
-                            <div className="relative hidden xs:flex">
-                                <Sidebar />
+}>): ReactElement => {
+    const pages: DocsContentMetadata[] = getDocsContent();
+    return (
+        <html lang="en">
+            <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+                <body
+                    className="scroll-smooth antialiased"
+                    style={{
+                        background: "var(--background-gradient)",
+                    }}
+                >
+                    <TooltipProvider delayDuration={100}>
+                        <div className="px-3 md:px-7 max-w-screen-2xl min-h-screen mx-auto flex flex-col transition-all">
+                            <Navbar pages={pages} />
+                            <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5 sm:gap-8 transition-all transform-gpu">
+                                <div className="relative hidden xs:flex">
+                                    <Sidebar pages={pages} />
+                                </div>
+                                {children}
                             </div>
-                            {children}
                         </div>
-                    </div>
-                    <Footer />
-                </TooltipProvider>
-            </body>
-        </ThemeProvider>
-    </html>
-);
+                        <Footer />
+                    </TooltipProvider>
+                </body>
+            </ThemeProvider>
+        </html>
+    );
+};
 export default RootLayout;
diff --git a/src/app/types/mdx.ts b/src/app/types/mdx.ts
index c2ddd48..01d547f 100644
--- a/src/app/types/mdx.ts
+++ b/src/app/types/mdx.ts
@@ -8,9 +8,9 @@ type DocsContentMetadata = MDXMetadata & {
     title: string;
 
     /**
-     * The date this content was published.
+     * The date this content was updated.
      */
-    published: string;
+    updated: string;
 
     /**
      * The summary of this content.
diff --git a/src/components/docs-footer.tsx b/src/components/docs-footer.tsx
index 7983063..b20c47a 100644
--- a/src/components/docs-footer.tsx
+++ b/src/components/docs-footer.tsx
@@ -24,14 +24,14 @@ const DocsFooter = ({
     const next: DocsContentMetadata | undefined =
         current < pages.length - 1 ? pages[current + 1] : undefined;
 
-    const [publicationDate, setPublicationDate] = useState<string | null>(
-        DateTime.fromISO(pages[current]?.published).toRelative()
+    const [updatedDate, setUpdatedDate] = useState<string | null>(
+        DateTime.fromISO(pages[current]?.updated).toRelative()
     );
 
     useEffect(() => {
         const interval = setInterval(() => {
-            setPublicationDate(
-                DateTime.fromISO(pages[current]?.published).toRelative()
+            setUpdatedDate(
+                DateTime.fromISO(pages[current]?.updated).toRelative()
             );
         }, 1000);
         return () => clearInterval(interval);
@@ -39,15 +39,15 @@ const DocsFooter = ({
 
     return (
         <footer className="xs:mx-5 sm:mx-10 my-2 flex flex-col select-none transition-all transform-gpu">
-            {/* Publish Date */}
+            {/* updated Date */}
             <div className="ml-auto pt-4">
                 <SimpleTooltip
-                    content={DateTime.fromISO(
-                        pages[current]?.published
-                    ).toLocaleString(DateTime.DATETIME_MED)}
+                    content={`Last updated on ${DateTime.fromISO(
+                        pages[current]?.updated
+                    ).toLocaleString(DateTime.DATETIME_MED)}`}
                 >
                     <span className="text-xs sm:text-sm opacity-75 transition-all transform-gpu">
-                        Published {publicationDate}
+                        Updated {updatedDate}
                     </span>
                 </SimpleTooltip>
             </div>
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index 27c6aab..f8bb9e8 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -1,61 +1,59 @@
+"use client";
+
 import { ReactElement } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import QuickSearchDialog from "@/components/navbar/search-dialog";
-import { getDocsContent } from "@/lib/mdx";
 import Sidebar from "@/components/sidebar/sidebar";
 
-const Navbar = (): ReactElement => {
-    const pages: DocsContentMetadata[] = getDocsContent();
-    return (
-        <nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50">
-            <div className="px-3 md:px-7 max-w-screen-2xl mx-auto py-4 flex justify-between items-center transition-all transform-gpu">
-                {/* Branding */}
-                <Link
-                    className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
-                    href="/"
+const Navbar = ({ pages }: { pages: DocsContentMetadata[] }): ReactElement => (
+    <nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50">
+        <div className="px-3 md:px-7 max-w-screen-2xl mx-auto py-4 flex justify-between items-center transition-all transform-gpu">
+            {/* Branding */}
+            <Link
+                className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
+                href="/"
+                draggable={false}
+            >
+                <h1 className="text-lg font-semibold">docs.</h1>
+                <Image
+                    src="/media/logo.png"
+                    alt="Pulse App Logo"
+                    width={36}
+                    height={36}
                     draggable={false}
-                >
-                    <h1 className="text-lg font-semibold">docs.</h1>
-                    <Image
-                        src="/media/logo.png"
-                        alt="Pulse App Logo"
-                        width={36}
-                        height={36}
-                        draggable={false}
+                />
+            </Link>
+
+            {/* Right */}
+            <div className="flex gap-5 sm:gap-7 items-center transition-all transform-gpu">
+                {/* Search */}
+                <div className="hidden xs:flex">
+                    <QuickSearchDialog pages={pages} bindKeybind />
+                </div>
+
+                {/* Social */}
+                <div className="flex gap-5 items-center">
+                    <SocialLink
+                        name="GitHub"
+                        link="https://github.com/PulseAppCC"
+                        icon="/media/github.svg"
                     />
-                </Link>
+                    <SocialLink
+                        name="Discord"
+                        link="https://discord.pulseapp.cc"
+                        icon="/media/discord.svg"
+                    />
+                </div>
 
-                {/* Right */}
-                <div className="flex gap-5 sm:gap-7 items-center transition-all transform-gpu">
-                    {/* Search */}
-                    <div className="hidden xs:flex">
-                        <QuickSearchDialog pages={pages} bindKeybind />
-                    </div>
-
-                    {/* Social */}
-                    <div className="flex gap-5 items-center">
-                        <SocialLink
-                            name="GitHub"
-                            link="https://github.com/PulseAppCC"
-                            icon="/media/github.svg"
-                        />
-                        <SocialLink
-                            name="Discord"
-                            link="https://discord.pulseapp.cc"
-                            icon="/media/discord.svg"
-                        />
-                    </div>
-
-                    {/* Mobile Sidebar */}
-                    <div className="flex xs:hidden">
-                        <Sidebar />
-                    </div>
+                {/* Mobile Sidebar */}
+                <div className="flex xs:hidden">
+                    <Sidebar pages={pages} />
                 </div>
             </div>
-        </nav>
-    );
-};
+        </div>
+    </nav>
+);
 
 const SocialLink = ({
     name,
diff --git a/src/components/on-this-page.tsx b/src/components/on-this-page.tsx
index 322f2aa..92233c5 100644
--- a/src/components/on-this-page.tsx
+++ b/src/components/on-this-page.tsx
@@ -33,7 +33,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
         let match;
         while ((match = headerRegex.exec(page.content)) !== null) {
             const level: number = match[1].length; // The number of # symbols determines the header level
-            const text: string = match[2].trim();
+            const text: string = match[2].trim().replace(/<[^>]*>/g, "");
             const id: string = text
                 .toLowerCase()
                 .replace(/\s+/g, "-")
@@ -79,7 +79,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
     return (
         <motion.div
             ref={ref}
-            className="sticky top-[7rem] w-44 max-h-[calc(100vh-3.5rem)] flex flex-col gap-2 text-sm select-none"
+            className="sticky top-[7.5rem] w-44 max-h-[calc(100vh-3.5rem)] flex flex-col gap-2 text-sm select-none"
             initial={{ opacity: 0 }}
             animate={{ opacity: inView ? 1 : 0 }}
             transition={{ duration: 0.2 }}
@@ -119,7 +119,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
                             draggable={false}
                             className="block py-1"
                         >
-                            {truncateText(header.text, 24)}
+                            {truncateText(header.text, 20)}
                         </Link>
                     </li>
                 ))}
diff --git a/src/components/sidebar/sidebar-links.tsx b/src/components/sidebar/sidebar-links.tsx
index 2d45b17..6f35b31 100644
--- a/src/components/sidebar/sidebar-links.tsx
+++ b/src/components/sidebar/sidebar-links.tsx
@@ -51,7 +51,7 @@ const CategoryItem = ({
     const hasChildren = Object.keys(node.children).length > 0;
 
     return (
-        <div className={cn(`relative select-none`, depth > 0 && "ml-4")}>
+        <div className={cn(`relative select-none`, depth > 0 && "ml-3")}>
             {/* Indentation */}
             {depth > 0 && (
                 <div
@@ -72,10 +72,13 @@ const CategoryItem = ({
                     >
                         <Button
                             className={cn(
-                                `relative w-full px-1.5 h-8 lg:text-base justify-between hover:bg-accent/20`,
+                                `relative w-full px-1.5 h-8 justify-between hover:bg-accent/35`,
+                                node.isFolder
+                                    ? "mb-0.5 text-sm font-semibold"
+                                    : "lg:text-base",
                                 depth > 0 && "pl-4",
                                 active &&
-                                    "text-primary/95 font-bold hover:text-primary"
+                                    "text-primary/95 font-semibold hover:text-primary"
                             )}
                             variant="ghost"
                         >
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 70e1520..932cea5 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -1,13 +1,12 @@
 import { ReactElement } from "react";
 import { Separator } from "@/components/ui/separator";
-import { getDocsContent } from "@/lib/mdx";
 import SidebarLinks from "@/components/sidebar/sidebar-links";
 import ThemeSwitcher from "@/components/theme-switcher";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import QuickSearchDialog from "@/components/navbar/search-dialog";
 import { AlignRightIcon } from "lucide-react";
 
-const Sidebar = (): ReactElement => (
+const Sidebar = ({ pages }: { pages: DocsContentMetadata[] }): ReactElement => (
     <>
         {/* Mobile */}
         <div className="xs:hidden">
@@ -16,37 +15,38 @@ const Sidebar = (): ReactElement => (
                     <AlignRightIcon className="w-6 h-6" />
                 </SheetTrigger>
                 <SheetContent className="h-full px-5 pt-11" side="right">
-                    <SidebarContent />
+                    <SidebarContent pages={pages} />
                 </SheetContent>
             </Sheet>
         </div>
 
         {/* Desktop */}
         <div className="hidden xs:flex sticky top-[4.5rem] max-h-[calc(100vh-3.5rem)] overflow-y-auto min-w-32 w-40 lg:w-52 py-5 flex-col justify-between transition-all transform-gpu">
-            <SidebarContent />
+            <SidebarContent pages={pages} />
         </div>
     </>
 );
 
-const SidebarContent = (): ReactElement => {
-    const pages: DocsContentMetadata[] = getDocsContent();
-    return (
-        <div className="h-full flex flex-col justify-between">
-            {/* Top */}
-            <div className="flex flex-col">
-                <div className="xs:hidden pb-3">
-                    <QuickSearchDialog pages={pages} />
-                </div>
-                <SidebarLinks pages={pages} />
-            </div>
-
-            {/* Theme Switcher */}
-            <div className="flex flex-col items-center">
-                <Separator className="mb-3 bg-separator-gradient" />
-                <ThemeSwitcher />
+const SidebarContent = ({
+    pages,
+}: {
+    pages: DocsContentMetadata[];
+}): ReactElement => (
+    <div className="h-full flex flex-col justify-between">
+        {/* Top */}
+        <div className="flex flex-col">
+            <div className="xs:hidden pb-3">
+                <QuickSearchDialog pages={pages} />
             </div>
+            <SidebarLinks pages={pages} />
         </div>
-    );
-};
+
+        {/* Theme Switcher */}
+        <div className="flex flex-col items-center">
+            <Separator className="mb-3 bg-separator-gradient" />
+            <ThemeSwitcher />
+        </div>
+    </div>
+);
 
 export default Sidebar;
