diff --git a/app/layout.tsx b/app/layout.tsx
index cd81be3..18a2e74 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import "leaflet/dist/leaflet.css";
+import { SidebarProvider } from "@/components/ui/sidebar";
 
 const questrial = Questrial({
   weight: "400",
@@ -34,13 +35,17 @@ export default function RootLayout({
       <body
         className={`${questrial.variable} ${bitter.variable} antialiased flex flex-col min-h-screen `}
       >
-        <Header />
+        <SidebarProvider className="flex-col">
+          <Header />
 
-        <main className="flex-1 flex justify-center px-4 bg-gray-lighter">
-          <div className="w-full max-w-6xl flex flex-col p-4">{children}</div>
-        </main>
+          <main className="flex-1 flex justify-center px-4 bg-gray-lighter">
+            <div className="w-full max-w-6xl flex flex-col p-4">
+              {children}
+            </div>
+          </main>
 
-        <Footer />
+          <Footer />
+        </SidebarProvider>
       </body>
     </html>
   );
diff --git a/app/page.tsx b/app/page.tsx
index d160165..16ccfa8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -62,7 +62,7 @@ export default async function Home() {
           className="object-cover"
           priority
         />
-        <div className="absolute inset-0 bg-black/15 flex items-center px-6">
+        <div className="absolute inset-0 bg-black/5 flex items-center px-6">
           <h2 className="text-3xl font-bold text-white leading-tight">
             Welcome to the ASSU Website.
           </h2>
diff --git a/app/services-and-resources/handbook/page.tsx b/app/services-and-resources/handbook/page.tsx
index 7d5e414..ebdc690 100644
--- a/app/services-and-resources/handbook/page.tsx
+++ b/app/services-and-resources/handbook/page.tsx
@@ -1,7 +1,6 @@
 import Divider from "@/components/common/Divider";
 import Text from "@/components/common/Text";
 import Link from "@/components/common/Link";
-import Image from "next/image";
 import HeroText from "@/components/sections/HeroText";
 
 export default function Handbook() {
@@ -16,32 +15,13 @@ export default function Handbook() {
       <Text as="p" className="text-lg">
         You can find paper copies of the handbook in our office at Room 1068 in
         Sidney Smith. You can also download the .pdf of the handbook here:{" "}
-        <Link href="https://f69d17aa-c996-4c07-84e8-5658e41b3090.filesusr.com/ugd/82c36b_0fc2556ac71749e0976805440b15d9dd.pdf">
-          Academic Handbook
-        </Link>
+        <Link href="/assu_academic_handbook.pdf">Academic Handbook</Link>
       </Text>
-      <Divider />
-      <div className="flex flex-wrap justify-around gap-4 mb-6">
-        <Image
-          src="/images/handbook-1.avif"
-          alt="ASSU Academic Handbook"
-          width={200}
-          height={200}
-          className="flex-1"
-        />
-        <Image
-          src="/images/handbook-2.avif"
-          alt="ASSU Academic Handbook"
-          width={200}
-          height={200}
-          className="flex-1"
-        />
-        <Image
-          src="/images/handbook-3.avif"
-          alt="ASSU Academic Handbook"
-          width={200}
-          height={200}
-          className="flex-1"
+      <div className="mt-6 mb-6 w-full">
+        <iframe
+          src="/assu_academic_handbook.pdf"
+          title="ASSU Academic Handbook PDF"
+          className="h-[80vh] w-full rounded border border-gray-300 bg-white"
         />
       </div>
       <Divider />
diff --git a/app/services-and-resources/page.tsx b/app/services-and-resources/page.tsx
index aefd255..a5ff22b 100644
--- a/app/services-and-resources/page.tsx
+++ b/app/services-and-resources/page.tsx
@@ -1,6 +1,5 @@
 import Text from "@/components/common/Text";
 import HeroText from "@/components/sections/HeroText";
-import ContentGrid from "@/components/layout/ContentGrid";
 import Link from "next/link";
 import Divider from "@/components/common/Divider";
 import Button from "@/components/common/Button";
@@ -134,39 +133,48 @@ export default function ServicesAndResources() {
         ASSU has going on or to take a break between classes and chat with our
         friendly executive and staff!
       </Text>
-      <Divider margin="0" />
+      <Divider />
+
       {/* Services Grid*/}
-      <ContentGrid
-        ariaLabel="Services and resources"
-        columns={3}
-        mergeAdjacentOnMobile={false}
-        className="w-full mx-auto"
-        cellClassName="flex flex-col px-8 py-10 md:px-10 md:py-12 min-h-[380px] md:min-h-[450px]"
-        items={services.map((service) => ({
-          id: service.id,
-          node: (
-            <div className="flex w-full flex-1 flex-col items-center justify-between text-center">
-              <div className="flex flex-col items-center gap-6">
-                <div className="w-16 h-16 flex items-center justify-center">
-                  {service.icon}
-                </div>
-                <div className="space-y-4">
-                  <h3 className="text-xl font-bold text-black">
+      {[services.slice(0, 3), services.slice(3, 6)].map((row, rowIndex) => (
+        <div key={`service-row-${rowIndex}`} className="w-full">
+          <div
+            className="grid grid-cols-1 md:grid-cols-3"
+            role="list"
+            aria-label="Services and resources"
+          >
+            {row.map((service, index) => (
+              <div
+                key={service.id}
+                role="listitem"
+                className={`relative bg-[rgb(243,243,243)] px-8 py-10 md:px-10 md:py-12 min-h-[380px] md:min-h-[450px] ${
+                  index < row.length - 1
+                    ? "md:after:absolute md:after:top-8 md:after:bottom-8 md:after:right-0 md:after:w-px md:after:bg-gray-900 md:after:content-['']"
+                    : ""
+                }`}
+              >
+                <div className="grid h-full grid-rows-[auto_auto_1fr_auto] items-start text-center">
+                  <div className="flex h-16 items-center justify-center">
+                    {service.icon}
+                  </div>
+                  <h3 className="mt-6 text-xl font-bold text-black">
                     {service.title}
                   </h3>
-                  <p className="text-gray-700 leading-relaxed">
+                  <p className="mt-4 text-gray-700 leading-relaxed">
                     {service.description}
                   </p>
+                  <div className="mt-8 flex justify-center">
+                    <Button>
+                      <Link href={service.href}>EXPLORE →</Link>
+                    </Button>
+                  </div>
                 </div>
               </div>
-
-              <Button>
-                <Link href={service.href}>EXPLORE →</Link>
-              </Button>
-            </div>
-          ),
-        }))}
-      />
+            ))}
+          </div>
+          {rowIndex === 0 ? <Divider /> : null}
+        </div>
+      ))}
       <Divider />
     </div>
   );
diff --git a/app/services-and-resources/resources/page.tsx b/app/services-and-resources/resources/page.tsx
index abcdb23..ed14284 100644
--- a/app/services-and-resources/resources/page.tsx
+++ b/app/services-and-resources/resources/page.tsx
@@ -175,7 +175,7 @@ const collegeResources = [
 export default function Resources() {
   return (
     <div>
-      <HeroText text="Frequently Asked Questions" />
+      <HeroText text="Free Academic Resources" />
       <Accordion items={faqItems} />
       <HeroText text="College Specific Resources" />
       <Divider margin="0"></Divider>
@@ -230,10 +230,10 @@ export default function Resources() {
                   viewBox="0 0 64 64"
                   fill="rgb(201,8,111)"
                 >
-                    <polygon
-                      points="22.89,10 41.11,10 54,22.89 54,41.11 41.11,54 22.89,54 10,41.11 10,22.89"
-                      fill="rgb(201,8,111)"
-                    />
+                  <polygon
+                    points="22.89,10 41.11,10 54,22.89 54,41.11 41.11,54 22.89,54 10,41.11 10,22.89"
+                    fill="rgb(201,8,111)"
+                  />
                 </svg>
               </div>
             ),
diff --git a/components/common/DropdownMenu.tsx b/components/common/DropdownMenu.tsx
index 66c5f08..acc9e97 100644
--- a/components/common/DropdownMenu.tsx
+++ b/components/common/DropdownMenu.tsx
@@ -47,6 +47,8 @@ export default function DropdownMenu({
         mt-2 
         bg-[rgb(243,243,243)] 
         py-2 
+        pl-3 
+        -ml-3 
         min-w-[200px] 
         z-50 
         opacity-0 
@@ -68,11 +70,7 @@ export default function DropdownMenu({
                 hover:text-pink 
                 transition-colors 
                 duration-200
-                ${
-                  isSubrouteActive(item.href)
-                    ? "text-pink"
-                    : ""
-                }
+                ${isSubrouteActive(item.href) ? "text-pink" : ""}
               `}
             >
               {item.label}
diff --git a/components/common/ImageCarousel.tsx b/components/common/ImageCarousel.tsx
index 52ba64f..a1d69e4 100644
--- a/components/common/ImageCarousel.tsx
+++ b/components/common/ImageCarousel.tsx
@@ -48,7 +48,7 @@ export function ImageCarousel() {
               key={index}
               className={`pl-4 ${index === currentSlide ? "block" : "hidden"}`}
             >
-              <div className="relative h-[500px] w-full">
+              <div className="relative h-[560px] w-full">
                 <Image
                   data-testid={`carousel-image-${index}`}
                   src={slide.src}
@@ -57,7 +57,7 @@ export function ImageCarousel() {
                   className="object-cover rounded-lg"
                   priority
                 />
-                <div className="absolute inset-0 bg-black/15 flex items-center px-8">
+                <div className="absolute inset-0 bg-black/5 flex items-center px-8">
                   <div className="ml-12 max-w-sm text-left text-white">
                     <h2
                       data-testid={`carousel-heading-${index}`}
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 7d550f8..df7923b 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -3,10 +3,11 @@
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import DropdownMenu from "../common/DropdownMenu";
 import MobileSidebar from "./MobileSidebar";
 import type { NavGroup } from "./nav";
+import { useSidebar } from "@/components/ui/sidebar";
 
 // --- small hooks -------------------------------------------------------------
 
@@ -35,23 +36,6 @@ function useBodyLock(locked: boolean) {
   }, [locked]);
 }
 
-function useClickOutside<T extends HTMLElement>(
-  enabled: boolean,
-  onOutside: () => void
-) {
-  const ref = useRef<T | null>(null);
-  useEffect(() => {
-    if (!enabled) return;
-    const handler = (e: MouseEvent) => {
-      const t = e.target as Node | null;
-      if (ref.current && t && !ref.current.contains(t)) onOutside();
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [enabled, onOutside]);
-  return ref;
-}
-
 // --- data --------------------------------------------------------------------
 
 const NAV: NavGroup[] = [
@@ -122,11 +106,12 @@ const NAV: NavGroup[] = [
 export default function Header() {
   const pathname = usePathname();
   const isScrolled = useScrolled(0);
-  const [open, setOpen] = useState(false);
-  useBodyLock(open);
+  const { setOpenMobile, openMobile } = useSidebar();
+  useBodyLock(openMobile);
 
-  const onClose = useCallback(() => setOpen(false), []);
-  const onToggle = useCallback(() => setOpen((v) => !v), []);
+  const onToggle = useCallback(() => {
+    setOpenMobile(!openMobile);
+  }, [setOpenMobile, openMobile]);
 
   // unified active checker
   const isActive = useCallback(
@@ -139,9 +124,6 @@ export default function Header() {
     [pathname]
   );
 
-  // for click-outside on the icon + any wrapper you choose
-  const buttonWrapRef = useClickOutside<HTMLDivElement>(open, onClose);
-
   const navItemClasses = "hover:text-pink transition-colors duration-300";
   const activeNavItemClasses = "text-pink";
 
@@ -176,12 +158,12 @@ export default function Header() {
         </Link>
 
         {/* Mobile button */}
-        <div ref={buttonWrapRef} className="mobile-menu-button">
+        <div className="mobile-menu-button">
           <button
             onClick={onToggle}
             className="p-2 text-gray-darker hover:text-pink"
             aria-label="Toggle mobile navigation menu"
-            aria-expanded={open}
+            aria-expanded={openMobile}
             aria-controls="mobile-navigation"
             aria-haspopup="true"
           >
@@ -232,15 +214,11 @@ export default function Header() {
         </ul>
       </nav>
 
-      {open && (
-        <MobileSidebar
-          nav={nav}
-          isOpen={open}
-          onClose={onClose}
-          isRouteActive={(href: string) => isActive(href)}
-          isSubrouteActive={(href: string) => isActive(href, true)}
-        />
-      )}
+      <MobileSidebar
+        nav={nav}
+        isRouteActive={(href: string) => isActive(href)}
+        isSubrouteActive={(href: string) => isActive(href, true)}
+      />
     </header>
   );
 }
diff --git a/components/layout/MobileSidebar.tsx b/components/layout/MobileSidebar.tsx
index 63a2a62..fb16eb6 100644
--- a/components/layout/MobileSidebar.tsx
+++ b/components/layout/MobileSidebar.tsx
@@ -1,171 +1,91 @@
+"use client";
+
 import Link from "next/link";
+import { X } from "lucide-react";
 import type { NavGroup } from "./nav";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarSeparator,
+  useSidebar,
+} from "@/components/ui/sidebar";
 
 interface MobileSidebarProps {
   nav: NavGroup[];
-  isOpen: boolean;
-  onClose: () => void;
-  isRouteActive: (href: string) => boolean;
-  isSubrouteActive: (href: string) => boolean;
-}
-
-interface MobileSectionProps {
-  label: string;
-  href: string;
-  items?: Array<{ label: string; href: string }>;
-  onClose: () => void;
   isRouteActive: (href: string) => boolean;
   isSubrouteActive: (href: string) => boolean;
 }
 
-function MobileSection({
-  label,
-  href,
-  items,
-  onClose,
-  isRouteActive,
-  isSubrouteActive,
-}: MobileSectionProps) {
-  const hasItems = !!items?.length;
-  const sectionId =
-    "mobile-section-" + (href.replace(/[^a-z0-9]+/gi, "-") || "root");
-  const headingClass = `text-lg font-sans text-gray-darker${
-    hasItems ? " mb-2" : ""
-  }`;
-
-  return (
-    <section
-      className={`pb-4 ${hasItems ? "border-b border-gray-200" : ""}`}
-      aria-labelledby={sectionId}
-    >
-      <h3 className={headingClass} id={sectionId}>
-        <Link
-          href={href}
-          onClick={onClose}
-          className={`py-2 hover:text-pink transition-colors min-h-11 flex items-center ${
-            isRouteActive(href) ? "text-pink" : "text-gray-darker"
-          }`}
-          aria-current={isRouteActive(href) ? "page" : undefined}
-        >
-          {label}
-        </Link>
-      </h3>
-
-      {hasItems ? (
-        <div className="space-y-2 ml-4">
-          {items!.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              onClick={onClose}
-              className={`text-sm hover:text-pink transition-colors py-2 min-h-11 flex items-center ${
-                isSubrouteActive(item.href) ? "text-pink" : "text-gray-dark"
-              }`}
-              aria-current={
-                isSubrouteActive(item.href) ? "page" : undefined
-              }
-            >
-              {item.label}
-            </Link>
-          ))}
-        </div>
-      ) : null}
-    </section>
-  );
-}
-
 export default function MobileSidebar({
   nav,
-  isOpen,
-  onClose,
   isRouteActive,
   isSubrouteActive,
 }: MobileSidebarProps) {
-  if (!isOpen) return null;
+  const { setOpenMobile, isMobile } = useSidebar();
 
-  return (
-    <div
-      className="mobile-menu absolute inset-0 z-[9999]"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Mobile navigation menu"
-      id="mobile-navigation"
-    >
-      {/* Darkened background overlay */}
-      <div
-        className="absolute inset-0 opacity-75 bg-black transition-opacity duration-300 z-[9998]"
-        onClick={onClose}
-        aria-hidden="true"
-      />
+  if (!isMobile) return null;
 
-      {/* Sidebar panel */}
-      <aside
-        className="absolute right-0 top-0 h-full w-80 bg-gray-lighter shadow-xl transform transition-transform duration-300 ease-in-out overflow-y-auto will-change-transform z-[10000]"
-        role="complementary"
-        aria-label="Mobile navigation sidebar"
-      >
-        <div className="p-6 min-h-full">
-          <div className="flex justify-between items-center mb-8">
-            <h2
-              className="text-xl font-sans text-gray-darker"
-              id="mobile-menu-title"
-            >
-              Menu
-            </h2>
-            <button
-              onClick={onClose}
-              className="p-3 text-gray-darker hover:text-pink transition-colors min-w-11 min-h-11 flex items-center justify-center"
-              aria-label="Close mobile navigation menu"
-              aria-controls="mobile-navigation"
-            >
-              <svg
-                className="w-6 h-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
+  return (
+    <Sidebar side="right" collapsible="offcanvas">
+      <SidebarHeader className="flex flex-row items-center justify-between p-4">
+        <h2 className="text-base font-semibold text-sidebar-foreground">
+          Menu
+        </h2>
+        <button
+          type="button"
+          onClick={() => setOpenMobile(false)}
+          className="inline-flex h-9 w-9 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
+          aria-label="Close mobile navigation menu"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </SidebarHeader>
+      <SidebarSeparator />
+      <SidebarContent className="p-2">
+        <SidebarMenu>
+          {nav.map((group) => (
+            <SidebarMenuItem key={group.href}>
+              <SidebarMenuButton
+                asChild
+                isActive={isRouteActive(group.href)}
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
-
-          {/* Mobile navigation items */}
-          <nav
-            className="space-y-4"
-            role="navigation"
-            aria-labelledby="mobile-menu-title"
-          >
-            {nav.map((group) =>
-              group.type === "dropdown" ? (
-                <MobileSection
-                  key={group.href}
-                  label={group.label}
+                <Link
                   href={group.href}
-                  items={group.items}
-                  onClose={onClose}
-                  isRouteActive={isRouteActive}
-                  isSubrouteActive={isSubrouteActive}
-                />
-              ) : (
-                <MobileSection
-                  key={group.href}
-                  label={group.label}
-                  href={group.href}
-                  onClose={onClose}
-                  isRouteActive={isRouteActive}
-                  isSubrouteActive={isSubrouteActive}
-                />
-              )
-            )}
-          </nav>
-        </div>
-      </aside>
-    </div>
+                  onClick={() => setOpenMobile(false)}
+                >
+                  {group.label}
+                </Link>
+              </SidebarMenuButton>
+              {group.type === "dropdown" ? (
+                <SidebarMenuSub>
+                  {group.items.map((item) => (
+                    <SidebarMenuSubItem key={item.href}>
+                      <SidebarMenuSubButton
+                        asChild
+                        isActive={isSubrouteActive(item.href)}
+                      >
+                        <Link
+                          href={item.href}
+                          onClick={() => setOpenMobile(false)}
+                        >
+                          {item.label}
+                        </Link>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              ) : null}
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarContent>
+    </Sidebar>
   );
 }
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..69b64fb
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..6d7f122
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
new file mode 100644
index 0000000..272cb72
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
new file mode 100644
index 0000000..58656ad
--- /dev/null
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,770 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContextProps>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>Sidebar</SheetTitle>
+              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  const width = "70%"
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..d7e45f7
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 0000000..99ad630
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/hooks/use-mobile.tsx b/hooks/use-mobile.tsx
new file mode 100644
index 0000000..029616f
--- /dev/null
+++ b/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 910
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/info/links.ts b/info/links.ts
new file mode 100644
index 0000000..f6dff61
--- /dev/null
+++ b/info/links.ts
@@ -0,0 +1,41 @@
+export const WP_BASE_URL = "https://assu.ca";
+export const WP_API_BASE = `${WP_BASE_URL}/wp/wp-json/wp/v2`;
+
+export function wpPostsCategoryUrl(categoryId: number): string {
+  return `${WP_API_BASE}/posts?categories=${categoryId}`;
+}
+
+export function wpMediaUrl(mediaId: number): string {
+  return `${WP_API_BASE}/media/${mediaId}`;
+}
+
+export function wpPageBySlugUrl(slug: string): string {
+  return `${WP_API_BASE}/pages?slug=${encodeURIComponent(slug)}`;
+}
+
+export const CONSTITUTION_DOCUMENTS = [
+  {
+    documentName: "ASSU Constitution and Bylaws 2024",
+    link: "https://assu.ca/wp/wp-content/uploads/2024/04/ASSU-Constitution-Bylaws-2024.pdf",
+    documentType: "ASSU Constitution",
+  },
+  {
+    documentName: "ASSU Bylaws 2016",
+    link: "https://assu.ca/wp/wp-content/uploads/2008/12/BYLAWS.2016.pdf",
+    documentType: "ASSU Constitution",
+  },
+];
+
+export const FALLBACK_DOCUMENTS = [
+  {
+    documentName: "Summer Budget 2025",
+    link: "https://assu.ca/wp/wp-content/uploads/2025/05/Summer-Budget-2025.pdf",
+    documentType: "Budgets and Financial Statements",
+  },
+  {
+    documentName: "Financial Statement April 30th 2025",
+    link: "https://assu.ca/wp/wp-content/uploads/2025/05/Financial-Statement-FINAL.pdf",
+    documentType: "Budgets and Financial Statements",
+  },
+  ...CONSTITUTION_DOCUMENTS,
+];
diff --git a/lib/documents.ts b/lib/documents.ts
index bce1f90..f1dd852 100644
--- a/lib/documents.ts
+++ b/lib/documents.ts
@@ -1,5 +1,8 @@
 // Import cheerio only on server side
 import * as cheerio from "cheerio";
+import { cleanText } from "@/lib/text";
+import { fetchWpPageBySlug, requireServerOnly } from "@/lib/wp";
+import { CONSTITUTION_DOCUMENTS, FALLBACK_DOCUMENTS } from "@/info/links";
 
 // Define the data shape for documents
 export interface Document {
@@ -8,20 +11,6 @@ export interface Document {
   documentType: string;
 }
 
-// Define the WordPress API response structure
-interface WordPressPage {
-  id: number;
-  date: string;
-  slug: string;
-  status: string;
-  title: {
-    rendered: string;
-  };
-  content: {
-    rendered: string;
-  };
-}
-
 // Function to determine document type based on content or link
 function determineDocumentType(documentName: string, link: string): string {
   const name = documentName.toLowerCase();
@@ -79,20 +68,6 @@ function determineDocumentType(documentName: string, link: string): string {
   return "Other Documents";
 }
 
-// Function to clean and normalize text
-function cleanText(text: string): string {
-  return text
-    .trim()
-    .replace(/\s+/g, " ") // Replace multiple spaces with single space
-    .replace(/\n+/g, " ") // Replace newlines with spaces
-    .replace(/&nbsp;/g, " ") // Replace HTML non-breaking spaces
-    .replace(/&amp;/g, "&") // Replace HTML entities
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&quot;/g, '"')
-    .replace(/&#039;/g, "'");
-}
-
 // Function to clean and normalize URL
 function cleanUrl(url: string): string {
   if (!url) return "";
@@ -126,41 +101,21 @@ function cleanUrl(url: string): string {
 export async function fetchDocumentsData(): Promise<Document[]> {
   try {
     // Only run on server side
-    if (typeof window !== "undefined") {
-      console.warn("fetchDocumentsData should only be called on server side");
-      return getFallbackDocuments();
-    }
-
-    console.log("Fetching documents data from WordPress API...");
-
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 10000);
-
-    const response = await fetch(
-      "https://assu.ca/wp/wp-json/wp/v2/pages?slug=documents",
-      {
-        signal: controller.signal,
-        headers: {
-          "User-Agent": "ASSU-Website/1.0",
-        },
-      }
+    const serverFallback = requireServerOnly(
+      "fetchDocumentsData",
+      getFallbackDocuments
     );
+    if (serverFallback !== undefined) return serverFallback;
 
-    clearTimeout(timeoutId);
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
+    console.log("Fetching documents data from WordPress API...");
 
-    const data: WordPressPage[] = await response.json();
-    console.log("WordPress API response received:", data.length, "pages found");
+    const page = await fetchWpPageBySlug("documents");
+    console.log("WordPress API response received:", page ? 1 : 0, "pages found");
 
-    if (!data || data.length === 0) {
+    if (!page) {
       console.warn("No documents page found");
       return getFallbackDocuments();
     }
-
-    const page = data[0];
     const content = page.content.rendered;
 
     if (!content) {
@@ -214,21 +169,8 @@ export async function fetchDocumentsData(): Promise<Document[]> {
     );
 
     // Ensure constitution documents are always included
-    const constitutionDocuments = [
-      {
-        documentName: "ASSU Constitution and Bylaws 2024",
-        link: "https://assu.ca/wp/wp-content/uploads/2024/04/ASSU-Constitution-Bylaws-2024.pdf",
-        documentType: "ASSU Constitution",
-      },
-      {
-        documentName: "ASSU Bylaws 2016",
-        link: "https://assu.ca/wp/wp-content/uploads/2008/12/BYLAWS.2016.pdf",
-        documentType: "ASSU Constitution",
-      },
-    ];
-
     // Add constitution documents if they're not already present
-    constitutionDocuments.forEach((constitutionDoc) => {
+    CONSTITUTION_DOCUMENTS.forEach((constitutionDoc) => {
       const exists = uniqueDocuments.some(
         (doc) =>
           doc.link === constitutionDoc.link ||
@@ -254,28 +196,7 @@ export async function fetchDocumentsData(): Promise<Document[]> {
 
 // Helper function to get fallback documents
 function getFallbackDocuments(): Document[] {
-  return [
-    {
-      documentName: "Summer Budget 2025",
-      link: "https://assu.ca/wp/wp-content/uploads/2025/05/Summer-Budget-2025.pdf",
-      documentType: "Budgets and Financial Statements",
-    },
-    {
-      documentName: "Financial Statement April 30th 2025",
-      link: "https://assu.ca/wp/wp-content/uploads/2025/05/Financial-Statement-FINAL.pdf",
-      documentType: "Budgets and Financial Statements",
-    },
-    {
-      documentName: "ASSU Constitution and Bylaws 2024",
-      link: "https://assu.ca/wp/wp-content/uploads/2024/04/ASSU-Constitution-Bylaws-2024.pdf",
-      documentType: "ASSU Constitution",
-    },
-    {
-      documentName: "ASSU Bylaws 2016",
-      link: "https://assu.ca/wp/wp-content/uploads/2008/12/BYLAWS.2016.pdf",
-      documentType: "ASSU Constitution",
-    },
-  ];
+  return FALLBACK_DOCUMENTS;
 }
 
 // Function to group documents by type for display
diff --git a/lib/posts.ts b/lib/posts.ts
index a81570c..5e54ba9 100644
--- a/lib/posts.ts
+++ b/lib/posts.ts
@@ -1,5 +1,8 @@
 // Import cheerio only on server side
 import * as cheerio from "cheerio";
+import { cleanText, extractTextFromHtml } from "@/lib/text";
+import { fetchJsonWithTimeout, requireServerOnly } from "@/lib/wp";
+import { wpMediaUrl, wpPostsCategoryUrl } from "@/info/links";
 
 // Define the data shape for blog posts
 export interface BlogPost {
@@ -58,25 +61,6 @@ interface WordPressMedia {
   };
 }
 
-// Function to clean and normalize text
-function cleanText(text: string): string {
-  return text
-    .trim()
-    .replace(/\s+/g, " ") // Replace multiple spaces with single space
-    .replace(/\n+/g, "\n") // Preserve intentional newlines
-    .replace(/&nbsp;/g, " ") // Replace HTML non-breaking spaces
-    .replace(/&amp;/g, "&") // Replace HTML entities
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&quot;/g, '"')
-    .replace(/&#039;/g, "'")
-    .replace(/&#8217;/g, "'") // Right single quotation mark
-    .replace(/&#8211;/g, "-") // En dash
-    .replace(/&#8212;/g, "--") // Em dash
-    .replace(/&apos;/g, "'")
-    .replace(/&#038;/g, "&");
-}
-
 // Function to format date from ISO string to readable format
 function formatDate(dateString: string): string {
   try {
@@ -93,20 +77,6 @@ function formatDate(dateString: string): string {
   }
 }
 
-// Function to extract text from HTML
-function extractTextFromHtml(html: string): string {
-  const $ = cheerio.load(html);
-  // Remove script and style tags
-  $("script, style").remove();
-  // Get text content
-  let text = $("body").text() || $.text();
-  // Clean up the text
-  text = cleanText(text);
-  // Replace multiple newlines with double newline
-  text = text.replace(/\n\s*\n\s*\n/g, "\n\n");
-  return text.trim();
-}
-
 // Function to extract image from content HTML
 function extractImageFromContent(html: string): string | null {
   const $ = cheerio.load(html);
@@ -145,45 +115,20 @@ async function fetchFeaturedMediaUrl(
 
     // If we have a direct link, use it
     if (mediaUrl && mediaUrl.includes("/wp/v2/media/")) {
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 5000);
-
-      const response = await fetch(mediaUrl, {
-        signal: controller.signal,
-        headers: {
-          "User-Agent": "ASSU-Website/1.0",
-        },
+      const media = await fetchJsonWithTimeout<WordPressMedia>(mediaUrl, {
+        timeoutMs: 5000,
+        revalidateSeconds: 86400,
       });
-
-      clearTimeout(timeoutId);
-
-      if (response.ok) {
-        const media: WordPressMedia = await response.json();
-        return media.source_url;
-      }
+      return media.source_url;
     }
 
     // Fallback: try direct media endpoint
     if (mediaId > 0) {
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 5000);
-
-      const response = await fetch(
-        `https://assu.ca/wp/wp-json/wp/v2/media/${mediaId}`,
-        {
-          signal: controller.signal,
-          headers: {
-            "User-Agent": "ASSU-Website/1.0",
-          },
-        }
+      const media = await fetchJsonWithTimeout<WordPressMedia>(
+        wpMediaUrl(mediaId),
+        { timeoutMs: 5000, revalidateSeconds: 86400 }
       );
-
-      clearTimeout(timeoutId);
-
-      if (response.ok) {
-        const media: WordPressMedia = await response.json();
-        return media.source_url;
-      }
+      return media.source_url;
     }
   } catch (error) {
     console.error("Error fetching featured media:", error);
@@ -196,33 +141,18 @@ async function fetchFeaturedMediaUrl(
 export async function fetchUpcomingPosts(): Promise<BlogPost[]> {
   try {
     // Only run on server side
-    if (typeof window !== "undefined") {
-      console.warn("fetchUpcomingPosts should only be called on server side");
-      return getFallbackPosts();
-    }
+    const serverFallback = requireServerOnly(
+      "fetchUpcomingPosts",
+      getFallbackPosts
+    );
+    if (serverFallback !== undefined) return serverFallback;
 
     console.log("Fetching upcoming posts from WordPress API...");
 
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 10000);
-
-    const response = await fetch(
-      "https://assu.ca/wp/wp-json/wp/v2/posts?categories=28",
-      {
-        signal: controller.signal,
-        headers: {
-          "User-Agent": "ASSU-Website/1.0",
-        },
-      }
+    const data = await fetchJsonWithTimeout<WordPressPost[]>(
+      wpPostsCategoryUrl(28),
+      { revalidateSeconds: 86400 }
     );
-
-    clearTimeout(timeoutId);
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const data: WordPressPost[] = await response.json();
     console.log("WordPress API response received:", data.length, "posts found");
 
     if (!data || data.length === 0) {
@@ -247,11 +177,17 @@ export async function fetchUpcomingPosts(): Promise<BlogPost[]> {
         const date = formatDate(post.date);
 
         // Extract description from excerpt
-        let description = extractTextFromHtml(post.excerpt.rendered);
+        let description = extractTextFromHtml(post.excerpt.rendered, {
+          preserveNewlines: true,
+          collapseBlankLines: true,
+        });
 
         // If excerpt is empty or too short, try content
         if (!description || description.length < 50) {
-          description = extractTextFromHtml(post.content.rendered);
+          description = extractTextFromHtml(post.content.rendered, {
+            preserveNewlines: true,
+            collapseBlankLines: true,
+          });
           // Limit description length
           if (description.length > 500) {
             description = description.substring(0, 500) + "...";
@@ -320,34 +256,18 @@ function getFallbackPosts(): BlogPost[] {
 export async function getEventBySlug(slug: string): Promise<EventPost> {
   try {
     // Only run on server side
-    if (typeof window !== "undefined") {
-      console.warn("getEventBySlug should only be called on server side");
+    const serverFallback = requireServerOnly("getEventBySlug", () => {
       throw new Error("getEventBySlug can only be called on server side");
-    }
+    });
+    if (serverFallback !== undefined) return serverFallback;
 
     console.log(`Fetching event with slug: ${slug} from WordPress API...`);
 
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 10000);
-
-    const response = await fetch(
-      "https://assu.ca/wp/wp-json/wp/v2/posts?categories=28",
-      {
-        signal: controller.signal,
-        headers: {
-          "User-Agent": "ASSU-Website/1.0",
-        },
-      }
+    const data = await fetchJsonWithTimeout<WordPressPost[]>(
+      wpPostsCategoryUrl(28),
+      { revalidateSeconds: 86400 }
     );
 
-    clearTimeout(timeoutId);
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const data: WordPressPost[] = await response.json();
-
     // Find the post with matching slug
     const post = data.find((p) => p.slug === slug);
 
@@ -362,11 +282,17 @@ export async function getEventBySlug(slug: string): Promise<EventPost> {
     const date = formatDate(post.date);
 
     // Extract description from excerpt
-    let description = extractTextFromHtml(post.excerpt.rendered);
+    let description = extractTextFromHtml(post.excerpt.rendered, {
+      preserveNewlines: true,
+      collapseBlankLines: true,
+    });
 
     // If excerpt is empty or too short, try content
     if (!description || description.length < 50) {
-      description = extractTextFromHtml(post.content.rendered);
+      description = extractTextFromHtml(post.content.rendered, {
+        preserveNewlines: true,
+        collapseBlankLines: true,
+      });
       // Limit description length
       if (description.length > 500) {
         description = description.substring(0, 500) + "...";
diff --git a/lib/tests.ts b/lib/tests.ts
index 9a06a53..7f92747 100644
--- a/lib/tests.ts
+++ b/lib/tests.ts
@@ -1,5 +1,7 @@
 // Import cheerio only on server side
 import * as cheerio from "cheerio";
+import { cleanText } from "@/lib/text";
+import { fetchWpPageBySlug, requireServerOnly } from "@/lib/wp";
 
 // Define the data shape for test courses
 export interface TestCourse {
@@ -7,34 +9,6 @@ export interface TestCourse {
   values: string[];
 }
 
-// Define the WordPress API response structure
-interface WordPressPage {
-  id: number;
-  date: string;
-  slug: string;
-  status: string;
-  title: {
-    rendered: string;
-  };
-  content: {
-    rendered: string;
-  };
-}
-
-// Function to clean and normalize text
-function cleanText(text: string): string {
-  return text
-    .trim()
-    .replace(/\s+/g, " ") // Replace multiple spaces with single space
-    .replace(/\n+/g, " ") // Replace newlines with spaces
-    .replace(/&nbsp;/g, " ") // Replace HTML non-breaking spaces
-    .replace(/&amp;/g, "&") // Replace HTML entities
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&quot;/g, '"')
-    .replace(/&#039;/g, "'");
-}
-
 // Function to parse course numbers from text
 function parseCourseNumbers(text: string): string[] {
   // Split by commas first
@@ -64,41 +38,21 @@ function parseCourseNumbers(text: string): string[] {
 export async function fetchTestsData(): Promise<TestCourse[]> {
   try {
     // Only run on server side
-    if (typeof window !== "undefined") {
-      console.warn("fetchTestsData should only be called on server side");
-      return getFallbackTests();
-    }
-
-    console.log("Fetching tests data from WordPress API...");
-
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 10000);
-
-    const response = await fetch(
-      "https://assu.ca/wp/wp-json/wp/v2/pages?slug=past-test-library",
-      {
-        signal: controller.signal,
-        headers: {
-          "User-Agent": "ASSU-Website/1.0",
-        },
-      }
+    const serverFallback = requireServerOnly(
+      "fetchTestsData",
+      getFallbackTests
     );
+    if (serverFallback !== undefined) return serverFallback;
 
-    clearTimeout(timeoutId);
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
+    console.log("Fetching tests data from WordPress API...");
 
-    const data: WordPressPage[] = await response.json();
-    console.log("WordPress API response received:", data.length, "pages found");
+    const page = await fetchWpPageBySlug("past-test-library");
+    console.log("WordPress API response received:", page ? 1 : 0, "pages found");
 
-    if (!data || data.length === 0) {
+    if (!page) {
       console.warn("No past test library page found");
       return getFallbackTests();
     }
-
-    const page = data[0];
     const content = page.content.rendered;
 
     if (!content) {
diff --git a/lib/text.ts b/lib/text.ts
new file mode 100644
index 0000000..9eb7063
--- /dev/null
+++ b/lib/text.ts
@@ -0,0 +1,59 @@
+import * as cheerio from "cheerio";
+
+export interface CleanTextOptions {
+  preserveNewlines?: boolean;
+}
+
+export interface ExtractTextOptions extends CleanTextOptions {
+  collapseBlankLines?: boolean;
+}
+
+const entityReplacements: Array<[RegExp, string]> = [
+  [/&nbsp;/g, " "],
+  [/&amp;/g, "&"],
+  [/&lt;/g, "<"],
+  [/&gt;/g, ">"],
+  [/&quot;/g, '"'],
+  [/&#039;/g, "'"],
+  [/&#8217;/g, "'"],
+  [/&#8211;/g, "-"],
+  [/&#8212;/g, "--"],
+  [/&apos;/g, "'"],
+  [/&#038;/g, "&"],
+];
+
+export function cleanText(
+  text: string,
+  { preserveNewlines = false }: CleanTextOptions = {}
+): string {
+  let cleaned = text.trim().replace(/\r\n/g, "\n");
+
+  if (preserveNewlines) {
+    cleaned = cleaned.replace(/[ \t]+/g, " ").replace(/\n+/g, "\n");
+  } else {
+    cleaned = cleaned.replace(/\s+/g, " ");
+  }
+
+  for (const [pattern, replacement] of entityReplacements) {
+    cleaned = cleaned.replace(pattern, replacement);
+  }
+
+  return cleaned;
+}
+
+export function extractTextFromHtml(
+  html: string,
+  { preserveNewlines = false, collapseBlankLines = false }: ExtractTextOptions = {}
+): string {
+  const $ = cheerio.load(html);
+  $("script, style").remove();
+
+  let text = $("body").text() || $.text();
+  text = cleanText(text, { preserveNewlines });
+
+  if (collapseBlankLines && preserveNewlines) {
+    text = text.replace(/\n\s*\n\s*\n/g, "\n\n");
+  }
+
+  return text.trim();
+}
diff --git a/lib/wp.ts b/lib/wp.ts
new file mode 100644
index 0000000..b50ee3d
--- /dev/null
+++ b/lib/wp.ts
@@ -0,0 +1,67 @@
+import { wpPageBySlugUrl } from "@/info/links";
+
+export interface WordPressPage {
+  id: number;
+  date: string;
+  slug: string;
+  status: string;
+  title: {
+    rendered: string;
+  };
+  content: {
+    rendered: string;
+  };
+}
+
+export interface FetchJsonOptions {
+  timeoutMs?: number;
+  headers?: Record<string, string>;
+  revalidateSeconds?: number;
+}
+
+export async function fetchJsonWithTimeout<T>(
+  url: string,
+  { timeoutMs = 10000, headers = {}, revalidateSeconds }: FetchJsonOptions = {}
+): Promise<T> {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+  const response = await fetch(url, {
+    signal: controller.signal,
+    headers: {
+      "User-Agent": "ASSU-Website/1.0",
+      ...headers,
+    },
+    ...(revalidateSeconds
+      ? { next: { revalidate: revalidateSeconds } }
+      : {}),
+  });
+
+  clearTimeout(timeoutId);
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+export async function fetchWpPageBySlug(
+  slug: string
+): Promise<WordPressPage | null> {
+  const data = await fetchJsonWithTimeout<WordPressPage[]>(
+    wpPageBySlugUrl(slug),
+    { revalidateSeconds: 86400 }
+  );
+
+  return data[0] ?? null;
+}
+
+export function requireServerOnly<T>(
+  fnName: string,
+  fallback: () => T
+): T | undefined {
+  if (typeof window === "undefined") return undefined;
+  console.warn(`${fnName} should only be called on server side`);
+  return fallback();
+}
diff --git a/package-lock.json b/package-lock.json
index 34ffaa9..f18c23d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,14 @@
       "dependencies": {
         "@googlemaps/js-api-loader": "^1.16.10",
         "@radix-ui/react-accordion": "^1.2.11",
-        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@types/cheerio": "^0.22.35",
         "cheerio": "^1.1.2",
-        "class-variance-authority": "^0.7.0",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.6.0",
         "gray-matter": "^4.0.3",
@@ -965,6 +968,44 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
     "node_modules/@googlemaps/js-api-loader": {
       "version": "1.16.10",
       "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.10.tgz",
@@ -2374,6 +2415,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collapsible": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
@@ -2430,6 +2494,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -2460,6 +2542,60 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -2475,6 +2611,73 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -2493,6 +2696,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-presence": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
@@ -2540,6 +2799,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -2571,10 +2848,56 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
+      "integrity": "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2"
@@ -2619,6 +2942,58 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -2671,6 +3046,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -2686,6 +3079,71 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@react-leaflet/core": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
@@ -4373,6 +4831,18 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -5489,6 +5959,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -6742,6 +7218,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -11033,6 +11518,75 @@
         "react-dom": "^19.0.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -12821,6 +13375,49 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
diff --git a/package.json b/package.json
index c30de3f..c87115b 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,14 @@
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.16.10",
     "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@types/cheerio": "^0.22.35",
     "cheerio": "^1.1.2",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "gray-matter": "^4.0.3",
diff --git a/public/assu_academic_handbook.pdf b/public/assu_academic_handbook.pdf
new file mode 100644
index 0000000..eef78c9
Binary files /dev/null and b/public/assu_academic_handbook.pdf differ
