diff --git a/components/Footer.tsx b/components/Footer.tsx
index fa578a55..49d7b2cc 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -12,14 +12,17 @@ interface Props {
 const Footer: React.FC<Props> = ({ pageInfo }) => {
   const footerAttrib = pageInfo?.footer
   return (
-    <footer className="mt-4 mb-2 mx-2 p-2 bg-white rounded-lg shadow md:flex md:items-center md:justify-between dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+    <footer className="mt-4 mb-2 mx-2 p-2 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:gap-2 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
       <span className="flex flex-wrap text-sm text-gray-500 sm:text-center dark:text-gray-400">
         {footerAttrib && <Markdown markdown={"© " + new Date().getFullYear() + " " + footerAttrib} />}
       </span>
-      <p className="flex flex-wrap items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
-        For attribution and license information click the @ symbol on the top right
-      </p>
-      <ThemeButton />
+
+      <div className="flex justify-evenly gap-5 items-center mt-3 md:mt-0">
+        <p className="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
+          For attribution and license information click the @ symbol on the top right
+        </p>
+        <ThemeButton />
+      </div>
     </footer>
   )
 }
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 554b69e5..51ac05ec 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -17,6 +17,9 @@ import { PageTemplate } from "lib/pageTemplate"
 import { SectionLink } from "./ui/LinkedSection"
 import { findLinks } from "lib/findSectionLinks"
 import PlausibleProvider from "next-plausible"
+import { useTheme } from "next-themes"
+import { ThemeProvider, CssBaseline } from "@mui/material"
+import { LightTheme, DarkTheme } from "./MuiTheme"
 
 type Props = {
   material: Material
@@ -33,56 +36,61 @@ const Layout: React.FC<Props> = ({ material, theme, course, section, children, p
   const [activeEvent, setActiveEvent] = useActiveEvent()
   const router = useRouter()
   const { data: session } = useSession()
-
+  const { systemTheme, theme: currentTheme } = useTheme()
   const [showAttribution, setShowAttribution] = useState(false)
   const [sidebarOpen, setSidebarOpen] = useSidebarOpen(true)
   const sectionLinks: SectionLink[] = findLinks(material, theme, course, section, activeEvent)
+
+  const muiTheme = React.useMemo(() => (currentTheme === "light" ? LightTheme : DarkTheme), [currentTheme])
   return (
     <RecoilRoot>
-      <div className="container mx-auto">
-        <Link href="#main" className="sr-only focus:not-sr-only">
-          Skip to main content
-        </Link>
-        <Header theme={theme} course={course} pageInfo={pageInfo} />
-        <header>
-          <Navbar
-            material={material}
-            theme={theme}
-            course={course}
-            section={section}
-            activeEvent={activeEvent}
-            sidebarOpen={sidebarOpen}
-            setSidebarOpen={setSidebarOpen}
-            showAttribution={showAttribution}
-            setShowAttribution={setShowAttribution}
-            repoUrl={repoUrl}
-            excludes={excludes}
-          />
-        </header>
-        <main id="main">
-          <Overlay
-            material={material}
-            course={course}
-            theme={theme}
-            activeEvent={activeEvent}
-            section={section}
-            sidebarOpen={sidebarOpen}
-            setSidebarOpen={setSidebarOpen}
-            showAttribution={showAttribution}
-            setShowAttribution={setShowAttribution}
-            sectionLinks={sectionLinks}
-          />
-          <PlausibleProvider
-            domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN ?? ""}
-            enabled={true}
-            trackLocalhost={true}
-            trackOutboundLinks={true}
-          >
-            <div data-testid="plausible-provider">{children}</div>
-          </PlausibleProvider>
-        </main>
-        <Footer pageInfo={pageInfo} />
-      </div>
+      <ThemeProvider theme={muiTheme}>
+        <CssBaseline />
+        <div className="container mx-auto">
+          <Link href="#main" className="sr-only focus:not-sr-only">
+            Skip to main content
+          </Link>
+          <Header theme={theme} course={course} pageInfo={pageInfo} />
+          <header>
+            <Navbar
+              material={material}
+              theme={theme}
+              course={course}
+              section={section}
+              activeEvent={activeEvent}
+              sidebarOpen={sidebarOpen}
+              setSidebarOpen={setSidebarOpen}
+              showAttribution={showAttribution}
+              setShowAttribution={setShowAttribution}
+              repoUrl={repoUrl}
+              excludes={excludes}
+            />
+          </header>
+          <main id="main">
+            <Overlay
+              material={material}
+              course={course}
+              theme={theme}
+              activeEvent={activeEvent}
+              section={section}
+              sidebarOpen={sidebarOpen}
+              setSidebarOpen={setSidebarOpen}
+              showAttribution={showAttribution}
+              setShowAttribution={setShowAttribution}
+              sectionLinks={sectionLinks}
+            />
+            <PlausibleProvider
+              domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN ?? ""}
+              enabled={true}
+              trackLocalhost={true}
+              trackOutboundLinks={true}
+            >
+              <div data-testid="plausible-provider">{children}</div>
+            </PlausibleProvider>
+          </main>
+          <Footer pageInfo={pageInfo} />
+        </div>
+      </ThemeProvider>
     </RecoilRoot>
   )
 }
diff --git a/components/MuiTheme.tsx b/components/MuiTheme.tsx
new file mode 100644
index 00000000..adffc360
--- /dev/null
+++ b/components/MuiTheme.tsx
@@ -0,0 +1,57 @@
+import { createTheme } from "@mui/material"
+
+export const LightTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#000", // Primary text color
+    },
+    background: {
+      default: "#fff", // Base canvas
+      paper: "#f8fafc", // Slightly off-white like bg-slate-50
+    },
+    text: {
+      primary: "#000", // Black text
+      secondary: "#374151", // Dark gray for secondary text
+    },
+  },
+  components: {
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#f8fafc", // Similar to bg-slate-50
+          borderColor: "#e5e7eb", // border-gray-200
+          borderRadius: "8", // rounded-lg
+        },
+      },
+    },
+  },
+})
+
+export const DarkTheme = createTheme({
+  palette: {
+    mode: "dark",
+    primary: {
+      main: "#fff", // Primary text color in dark mode
+    },
+    background: {
+      default: "#1f2937", // dark:bg-slate-800
+      paper: "#374151", // dark bg-slate-800
+    },
+    text: {
+      primary: "#fff", // White text in dark mode
+      secondary: "#e5e7eb", // Lighter gray for secondary text
+    },
+  },
+  components: {
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#374151", // Similar to dark:bg-slate-800
+          borderColor: "#4b5563", // dark:border-gray-700
+          borderRadius: "8px", // rounded-lg
+        },
+      },
+    },
+  },
+})
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 958f828f..28c51f2c 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -11,6 +11,12 @@ import { useRecoilState } from "recoil"
 import { enableSearch } from "lib/search/enableSearch"
 import NavDiagramPopover from "./dialogs/navDiagramPop"
 import ThemeCardsPopover from "./dialogs/themeCardPop"
+import { Divider, IconButton } from "@mui/material"
+import MenuIcon from "@mui/icons-material/Menu"
+import Drawer from "@mui/material/Drawer"
+import CloseIcon from "@mui/icons-material/Close"
+import Box from "@mui/material/Box"
+import useWindowSize from "lib/hooks/useWindowSize"
 
 interface Props {
   material: Material
@@ -44,6 +50,12 @@ const Navbar: React.FC<Props> = ({
   const [isPopoverHovered, setIsPopoverHovered] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
   const [itemHovered, setItemHovered] = useState("")
+  const [width, setWidth] = useState<number>(0)
+  const [menu, setMenu] = useState(false)
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const windowSize = useWindowSize()
+  const breakpoint = 900
+  const burgerDrawerMaterialMargin = "ml-9"
   const { data: session } = useSession()
   const ref1 = useRef<HTMLLIElement>(null)
   const ref2 = useRef<HTMLLIElement>(null)
@@ -106,164 +118,284 @@ const Navbar: React.FC<Props> = ({
     setIsPopoverHovered(false)
   }
 
+  const toggleDrawer = (open: boolean) => {
+    setDrawerOpen(open)
+  }
+
   return (
-    <div className="z-10 flex p-2 mx-2 mt-2 mb-4 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
-      <nav className="w-full inline-flex" aria-label="Breadcrumb">
-        <ol className="z-10 list-none inline-flex items-center space-x-1 md:space-x-3">
-          {activeEvent && (
-            <>
-              <HiCalendar
-                className="pointer-events-auto cursor-pointer text-gray-500 hover:text-gray-400 w-10 h-10"
-                onClick={handleToggle}
-              />
-              <div className="h-full border-r border-gray-500"></div>
-            </>
-          )}
-          <li className="inline-flex items-center">
-            <Link
-              href="/"
-              className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-            >
-              <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
-              </svg>
-              Home
-            </Link>
-          </li>
-          {theme && (
-            <li ref={ref1} onMouseEnter={() => handleIsHovered("theme")} onMouseLeave={handleIsNotHovered}>
-              <div className="flex items-center">
+    // remove width !
+    <div className="z-10 flex p-2 mx-2 mt-2 mb-4 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700 justify-between">
+      {/* {windowSize.width} */}
+      {(windowSize.width ?? 1024) >= 1024 ? (
+        <nav className="w-full inline-flex" aria-label="Breadcrumb">
+          <ol className="z-10 list-none inline-flex items-center space-x-1 md:space-x-3">
+            {activeEvent && (
+              <>
+                <HiCalendar
+                  className="pointer-events-auto cursor-pointer text-gray-500 hover:text-gray-400 w-10 h-10"
+                  onClick={handleToggle}
+                />
+                <div className="h-full border-r border-gray-500"></div>
+              </>
+            )}
+            <li className="inline-flex items-center">
+              <Link
+                href="/"
+                className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+              >
                 <svg
-                  className="w-6 h-6 text-gray-400"
+                  className="w-4 h-4 mr-2"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
-                    className={showNavDiagram && itemHovered === "theme" ? "expanded" : "collapsed"}
-                    style={{ transformOrigin: "50% 50%" }}
-                    fillRule="evenodd"
-                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                    clipRule="evenodd"
-                  ></path>
+                  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                 </svg>
-                <Link
-                  href={`/material`}
-                  className="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white"
-                >
-                  Material
-                </Link>
-                {showNavDiagram && itemHovered === "theme" && (
-                  <ThemeCardsPopover
-                    material={material}
-                    excludes={excludes}
-                    onMouseEnter={handlePopoverHovered}
-                    onMouseLeave={handlePopoverNotHovered}
-                    target={ref1?.current || undefined}
-                  />
-                )}
-              </div>
+                Home
+              </Link>
             </li>
-          )}
-          {theme && (
-            <li ref={ref2} onMouseEnter={() => handleIsHovered("course")} onMouseLeave={handleIsNotHovered}>
-              <div className="flex items-center">
-                <svg
-                  className="w-6 h-6 text-gray-400"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    className={showNavDiagram && itemHovered === "course" ? "expanded" : "collapsed"}
-                    style={{ transformOrigin: "50% 50%" }}
-                    fillRule="evenodd"
-                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                    clipRule="evenodd"
-                  ></path>
-                </svg>
-                <Link
-                  aria-current={!course ? "page" : undefined}
-                  href={`/material/${theme.repo}/${theme.id}`}
-                  className="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white"
-                >
-                  {theme.name}
-                </Link>
-                {showNavDiagram && itemHovered === "course" && (
-                  <NavDiagramPopover
-                    material={material}
-                    theme={theme}
-                    excludes={excludes}
-                    target={ref2?.current || undefined}
-                    onMouseEnter={handlePopoverHovered}
-                    onMouseLeave={handlePopoverNotHovered}
-                  />
+            {theme && (
+              <li ref={ref1} onMouseEnter={() => handleIsHovered("theme")} onMouseLeave={handleIsNotHovered}>
+                <div className="flex items-center">
+                  <svg
+                    className="w-6 h-6 text-gray-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      className={showNavDiagram && itemHovered === "theme" ? "expanded" : "collapsed"}
+                      style={{ transformOrigin: "50% 50%" }}
+                      fillRule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
+                  <Link
+                    href={`/material`}
+                    className="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white"
+                  >
+                    Material
+                  </Link>
+                  {showNavDiagram && itemHovered === "theme" && (
+                    <ThemeCardsPopover
+                      material={material}
+                      excludes={excludes}
+                      onMouseEnter={handlePopoverHovered}
+                      onMouseLeave={handlePopoverNotHovered}
+                      target={ref1?.current || undefined}
+                    />
+                  )}
+                </div>
+              </li>
+            )}
+            {theme && (
+              <li ref={ref2} onMouseEnter={() => handleIsHovered("course")} onMouseLeave={handleIsNotHovered}>
+                <div className="flex items-center">
+                  <svg
+                    className="w-6 h-6 text-gray-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      className={showNavDiagram && itemHovered === "course" ? "expanded" : "collapsed"}
+                      style={{ transformOrigin: "50% 50%" }}
+                      fillRule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
+                  <Link
+                    aria-current={!course ? "page" : undefined}
+                    href={`/material/${theme.repo}/${theme.id}`}
+                    className="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white"
+                  >
+                    {theme.name}
+                  </Link>
+                  {showNavDiagram && itemHovered === "course" && (
+                    <NavDiagramPopover
+                      material={material}
+                      theme={theme}
+                      excludes={excludes}
+                      target={ref2?.current || undefined}
+                      onMouseEnter={handlePopoverHovered}
+                      onMouseLeave={handlePopoverNotHovered}
+                    />
+                  )}
+                </div>
+              </li>
+            )}{" "}
+            {theme && course && (
+              <li ref={ref3} onMouseEnter={() => handleIsHovered("section")} onMouseLeave={handleIsNotHovered}>
+                <div className="flex items-center">
+                  <svg
+                    className="w-6 h-6 text-gray-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      className={showNavDiagram && itemHovered === "section" ? "expanded" : "collapsed"}
+                      style={{ transformOrigin: "50% 50%" }}
+                      fillRule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
+                  <Link
+                    aria-current={!section ? "page" : undefined}
+                    href={`/material/${theme.repo}/${theme.id}/${course.id}`}
+                    className="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white"
+                  >
+                    {course.name}
+                  </Link>
+                  {showNavDiagram && itemHovered === "section" && (
+                    <NavDiagramPopover
+                      material={material}
+                      theme={theme}
+                      course={course}
+                      excludes={excludes}
+                      target={ref3?.current || undefined}
+                      onMouseEnter={handlePopoverHovered}
+                      onMouseLeave={handlePopoverNotHovered}
+                    />
+                  )}
+                </div>
+              </li>
+            )}{" "}
+            {section && (
+              <li aria-current="page">
+                <div className="flex items-center">
+                  <svg
+                    className="w-6 h-6 text-gray-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clipRule="evenodd"
+                    ></path>
+                  </svg>
+                  <span className="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">
+                    {section.name}
+                  </span>
+                </div>
+              </li>
+            )}
+          </ol>
+        </nav>
+      ) : (
+        <div>
+          <IconButton
+            onClick={() => toggleDrawer(true)}
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            className="text-gray-400 ml-1"
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Drawer
+            PaperProps={{
+              className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700",
+            }}
+            open={drawerOpen}
+          >
+            <Box sx={{ width: 250 }}>
+              <IconButton onClick={() => toggleDrawer(false)} sx={{ p: 2 }}>
+                <CloseIcon className="stroke-slate-400 fill-slate-400" />
+              </IconButton>
+              <ol className="p-5 flex flex-col gap-3">
+                <li className="inline-flex items-center">
+                  <Link
+                    href="/"
+                    className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+                  >
+                    <svg
+                      className="w-4 h-4 mr-2"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
+                    </svg>
+                    Home
+                  </Link>
+                </li>
+                {theme && (
+                  <ol>
+                    <li>
+                      <div className="flex items-center">
+                        <Link
+                          href={`/material`}
+                          className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            height="24px"
+                            viewBox="0 -960 960 960"
+                            className="w-4 h-4 mr-2 mb-2"
+                            fill="currentColor"
+                          >
+                            <path d="M260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z" />
+                          </svg>
+                          <span className="pb-2">Material</span>
+                        </Link>
+                      </div>
+                    </li>
+                    <li>
+                      <Divider variant="fullWidth" className="dark:bg-slate-400" />
+                    </li>
+                  </ol>
                 )}
-              </div>
-            </li>
-          )}{" "}
-          {theme && course && (
-            <li ref={ref3} onMouseEnter={() => handleIsHovered("section")} onMouseLeave={handleIsNotHovered}>
-              <div className="flex items-center">
-                <svg
-                  className="w-6 h-6 text-gray-400"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    className={showNavDiagram && itemHovered === "section" ? "expanded" : "collapsed"}
-                    style={{ transformOrigin: "50% 50%" }}
-                    fillRule="evenodd"
-                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                    clipRule="evenodd"
-                  ></path>
-                </svg>
-                <Link
-                  aria-current={!section ? "page" : undefined}
-                  href={`/material/${theme.repo}/${theme.id}/${course.id}`}
-                  className="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white"
-                >
-                  {course.name}
-                </Link>
-                {showNavDiagram && itemHovered === "section" && (
-                  <NavDiagramPopover
-                    material={material}
-                    theme={theme}
-                    course={course}
-                    excludes={excludes}
-                    target={ref3?.current || undefined}
-                    onMouseEnter={handlePopoverHovered}
-                    onMouseLeave={handlePopoverNotHovered}
-                  />
+                {theme && (
+                  <li ref={ref2} onMouseEnter={() => handleIsHovered("course")} onMouseLeave={handleIsNotHovered}>
+                    <div className="flex items-center">
+                      <Link
+                        aria-current={!course ? "page" : undefined}
+                        href={`/material/${theme.repo}/${theme.id}`}
+                        className={`${burgerDrawerMaterialMargin} text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white`}
+                      >
+                        {theme.name}
+                      </Link>
+                    </div>
+                  </li>
+                )}{" "}
+                {theme && course && (
+                  <li>
+                    <div className="flex items-center">
+                      <Link
+                        aria-current={!section ? "page" : undefined}
+                        href={`/material/${theme.repo}/${theme.id}/${course.id}`}
+                        className={`${burgerDrawerMaterialMargin} text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white`}
+                      >
+                        {course.name}
+                      </Link>
+                    </div>
+                  </li>
+                )}{" "}
+                {section && (
+                  <li aria-current="page">
+                    <div className="flex items-center">
+                      <span
+                        className={`${burgerDrawerMaterialMargin} text-sm font-medium text-gray-700 dark:text-gray-400 `}
+                      >
+                        {section.name}
+                      </span>
+                    </div>
+                  </li>
                 )}
-              </div>
-            </li>
-          )}{" "}
-          {section && (
-            <li aria-current="page">
-              <div className="flex items-center">
-                <svg
-                  className="w-6 h-6 text-gray-400"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                    clipRule="evenodd"
-                  ></path>
-                </svg>
-                <span className="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">
-                  {section.name}
-                </span>
-              </div>
-            </li>
-          )}
-        </ol>
-      </nav>
-      <ul aria-label="Page tools" className="gap-1 relative flex list-none items-center">
+              </ol>
+            </Box>
+          </Drawer>
+        </div>
+      )}
+      <ul aria-label="Page tools" className="gap-2 relative flex list-none items-center">
         {theme && course && section && (
           <li className="inline-flex">
             <Link
@@ -344,7 +476,7 @@ const Navbar: React.FC<Props> = ({
             )}
           </Dropdown>
         </li>
-        <li className="h-full border-l border-gray-500 ps-1">
+        <li className="h-full border-l border-gray-500 ps-1 flex items-center">
           <Tooltip content="Licensing and Attribution">
             <button
               aria-label="Licensing and Attribution"
diff --git a/components/ThemeCards.tsx b/components/ThemeCards.tsx
index cdce5539..37a48e18 100644
--- a/components/ThemeCards.tsx
+++ b/components/ThemeCards.tsx
@@ -1,6 +1,7 @@
 import { Material, Excludes } from "lib/material"
 import { basePath } from "lib/basePath"
 import { Card } from "flowbite-react"
+import useWindowSize from "lib/hooks/useWindowSize"
 
 interface Props {
   material: Material
@@ -9,7 +10,9 @@ interface Props {
 }
 
 const ThemeCards = ({ material, excludes, includeSummary = true }: Props) => {
-  const numberCols = includeSummary ? 2 : 1
+  const windowSize = useWindowSize()
+  const columnBreakpoint = 550
+  const numberCols = includeSummary && (windowSize.width ?? 1024) > columnBreakpoint ? 2 : 1
   const textSize = includeSummary ? "text-2xl" : "text-md"
   const themeCards = material?.themes
     .filter((theme) => !excludes || !excludes.themes.includes(theme.id))
diff --git a/components/content/Content.tsx b/components/content/Content.tsx
index 82614ad6..970a4570 100644
--- a/components/content/Content.tsx
+++ b/components/content/Content.tsx
@@ -20,7 +20,7 @@ import Solution from "./Solution"
 import { first } from "cypress/types/lodash"
 import remarkDirective from "remark-directive"
 import remarkDirectiveRehype from "remark-directive-rehype"
-import { CodeComponent, CodeProps, ReactMarkdownProps } from "react-markdown/lib/ast-to-react"
+import { CodeComponent, CodeProps, HeadingProps, ReactMarkdownProps } from "react-markdown/lib/ast-to-react"
 import Callout from "../Callout"
 import { Course, Section, Theme } from "lib/material"
 import Paragraph from "./Paragraph"
@@ -40,7 +40,7 @@ function reactMarkdownRemarkDirective() {
 
 const p = (sectionStr: string) => {
   function p({ node, children, ...props }: ReactMarkdownProps) {
-    return <Paragraph content={children} section={sectionStr} />
+    return <Paragraph content={children} section={sectionStr} tag="p" />
   }
   return p
 }
@@ -49,13 +49,20 @@ const list = (sectionStr: string) => {
   function list({ node, children, ...props }: ReactMarkdownProps) {
     return (
       <li className="mdli">
-        <Paragraph content={children} section={sectionStr} />
+        <Paragraph content={children} section={sectionStr} tag="p" />
       </li>
     )
   }
   return list
 }
 
+const heading = (sectionStr: string, tag: string) => {
+  function heading({ node, children, ...props }: HeadingProps) {
+    return <Paragraph content={children} section={sectionStr} tag={tag} />
+  }
+  return heading
+}
+
 let solutionCount = 0
 function solution({ node, children, ...props }: ReactMarkdownProps) {
   solutionCount++
@@ -149,7 +156,7 @@ const Content: React.FC<Props> = ({ markdown, theme, course, section }) => {
     section ? section.id : ""
   }`
   return (
-    <div className="mx-auto prose prose-base max-w-2xl prose-slate dark:prose-invert prose-pre:bg-[#263E52] prose-pre:p-0">
+    <div className="mx-auto prose prose-base max-w-2xl prose-slate dark:prose-invert prose-pre:bg-[#263E52] px-5">
       <ReactMarkdown
         remarkPlugins={[directive, reactMarkdownRemarkDirective, remarkMath, remarkGfm]}
         rehypePlugins={[rehypeKatex]}
@@ -161,6 +168,8 @@ const Content: React.FC<Props> = ({ markdown, theme, course, section }) => {
           code,
           p: p(sectionStr),
           li: list(sectionStr),
+          h2: heading(sectionStr, "h2"),
+          h3: heading(sectionStr, "h3"),
         }}
       >
         {markdown}
diff --git a/components/content/Paragraph.tsx b/components/content/Paragraph.tsx
index e64d2343..b03ed798 100644
--- a/components/content/Paragraph.tsx
+++ b/components/content/Paragraph.tsx
@@ -12,6 +12,8 @@ import useActiveEvent from "lib/hooks/useActiveEvents"
 import { Comment } from "pages/api/comment/[commentId]"
 import { CommentThread } from "pages/api/commentThread"
 import { useSession } from "next-auth/react"
+import CopyToClipboard from "react-copy-to-clipboard"
+import { FaClipboard } from "react-icons/fa"
 
 const nlp = winkNLP(model)
 const its = nlp.its
@@ -20,9 +22,10 @@ const as = nlp.as
 interface ParagraphProps {
   content: React.ReactNode
   section: string
+  tag?: string
 }
 
-const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
+const Paragraph: React.FC<ParagraphProps> = ({ content, section, tag = "p" }) => {
   const ref = useRef<HTMLDivElement>(null)
   const [activeEvent, setActiveEvent] = useActiveEvent()
   const { commentThreads, error, isLoading, mutate } = useCommentThreads(activeEvent?.id)
@@ -30,6 +33,9 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
   const [tempThread, setTempThread] = useState<CommentThread | undefined>(undefined)
   const [tempActive, setTempActive] = useState<boolean>(false)
   const email = useSession().data?.user?.email
+  const Tag = tag as keyof JSX.IntrinsicElements
+  const headingContent = content?.toString().replaceAll(" ", "-")
+  const [isCopied, setIsCopied] = useState(false)
 
   const { similarThreads, contentText } = useMemo(() => {
     let contentText = ""
@@ -133,7 +139,19 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
     }
   }
 
-  return (
+  const onCopyHandler = () => {
+    setIsCopied(true)
+    setTimeout(() => {
+      setIsCopied(false)
+    }, 1500)
+  }
+
+  const generateHeadingURL = () => {
+    const href: string = typeof window !== "undefined" ? window.location.href.split("#")[0] : ""
+    return href + "#" + headingContent ?? ""
+  }
+
+  return tag === "p" ? (
     <>
       <div data-cy="paragraph" ref={ref} className="relative pb-2">
         <p className="m-0 pb-0">{content}</p>
@@ -168,6 +186,53 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
       </div>
       {activeEvent && <Popover target={ref?.current || undefined} onCreate={handleCreateThread} />}
     </>
+  ) : (
+    <>
+      <div data-cy="paragraph" ref={ref} className="relative pb-2">
+        <Tag id={headingContent} className="flex justify-start gap-1">
+          {content}{" "}
+          <CopyToClipboard text={generateHeadingURL()}>
+            <button
+              className="bg-transparent text-xs text-transparent hover:text-white hover:bg-grey-900 px-2 py-1 rounded flex items-center space-x-1"
+              onClick={onCopyHandler}
+            >
+              <FaClipboard className="group-hover:text-white" />
+              <span className="group-hover:text-white">Share</span>
+            </button>
+          </CopyToClipboard>
+          {isCopied && <span className="text-xs text-green-500 flex items-center">Copied to clipboard!</span>}
+        </Tag>
+        {activeEvent && (
+          <div className={`absolute top-0 right-0 md:-right-6 xl:-right-[420px]`}>
+            <div className={`w-[420px]`}>
+              {similarThreads?.map((thread) => (
+                <Thread
+                  key={thread.id}
+                  thread={thread.id}
+                  active={activeThreadId === thread.id}
+                  setActive={(active: boolean) =>
+                    active ? setActiveThreadId(thread.id) : setActiveThreadId(undefined)
+                  }
+                  finaliseThread={finaliseThread}
+                  onDelete={() => handleDeleteThread(thread)}
+                />
+              ))}
+              {tempThread && (
+                <Thread
+                  key={tempThread.id}
+                  thread={tempThread}
+                  active={tempActive}
+                  setActive={setTempActive}
+                  finaliseThread={finaliseThread}
+                  onDelete={() => handleDeleteThread(tempThread)}
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      {activeEvent && <Popover target={ref?.current || undefined} onCreate={handleCreateThread} />}
+    </>
   )
 }
 
diff --git a/components/dialogs/navDiagramPop.tsx b/components/dialogs/navDiagramPop.tsx
index 4e6d93a7..aeff8567 100644
--- a/components/dialogs/navDiagramPop.tsx
+++ b/components/dialogs/navDiagramPop.tsx
@@ -1,4 +1,4 @@
-import NavDiagram from "components/NavDiagram"
+import NavDiagram from "components/navdiagram/NavDiagram"
 import React, { useEffect, useState } from "react"
 import { createPortal } from "react-dom"
 import { Material, Theme, Course, Excludes } from "lib/material"
diff --git a/components/navdiagram/CourseGrid.tsx b/components/navdiagram/CourseGrid.tsx
new file mode 100644
index 00000000..3f05645b
--- /dev/null
+++ b/components/navdiagram/CourseGrid.tsx
@@ -0,0 +1,115 @@
+import React from "react"
+import Link from "next/link"
+import { Grid, Paper, Typography, Box, Chip } from "@mui/material"
+import { Course, Theme } from "lib/material"
+
+function CourseGrid({ course, theme }: { course: Course; theme: Theme }) {
+  const files = course.files
+
+  const findSectionByName = (fileName: string) => {
+    return course.sections.find((section) => section.file === fileName)
+  }
+  const repo = theme.repo
+
+  const findCommonTag = (column: string[]) => {
+    const tagsArray = column.map((file) => {
+      const section = findSectionByName(file)
+      return section ? section.tags : []
+    })
+    if (tagsArray.length === 0) return null
+
+    const commonTags = tagsArray.reduce((a, b) => a.filter((c) => b.includes(c)))
+    return commonTags.length > 0 ? commonTags[0] : null // returns the first common tag if any
+  }
+  const chipColors = ["#FF5733", "#C70039", "#900C3F", "#581845", "#1C2833", "#17202A"]
+  let tagColorIndex = 0
+  const tagColorMap: { [key: string]: string } = {}
+
+  return (
+    <div className="mx-auto max-w-6xl prose-slate dark:prose-invert">
+      <Grid container spacing={2} sx={{ paddingBottom: "16px", justifyContent: "center" }}>
+        {files.map((column, colIndex) => {
+          const commonTag = findCommonTag(column)
+          return (
+            <Grid
+              item
+              xs={12}
+              sm={8}
+              md={6}
+              lg={6}
+              key={colIndex}
+              sx={{ maxWidth: { xs: "100%", sm: "50%", md: "50%" }, flexBasis: "auto" }}
+            >
+              {commonTag && (
+                <Box
+                  className="bg-slate-50 border-gray-200 text-black dark:bg-gray-800 dark:border-gray-700 dark:text-white p-2"
+                  sx={{ borderRadius: "8px 8px 0 0", textAlign: "center" }}
+                >
+                  <Typography variant="h6">{commonTag.toUpperCase()}</Typography>
+                </Box>
+              )}
+              <Grid container spacing={0}>
+                {column.map((file, rowIndex) => {
+                  const section = findSectionByName(file)
+                  if (!section) return null
+                  const url = `/material/${repo}/${course.theme}/${course.id}/${section.id}`
+
+                  // Determine if this is the first or last item
+                  const isFirstItem = rowIndex === 0 && !commonTag
+                  const isLastItem = rowIndex === column.length - 1
+
+                  return (
+                    <Grid item xs={12} key={rowIndex}>
+                      <Link href={url}>
+                        <Paper
+                          elevation={3}
+                          sx={{
+                            borderRadius: isFirstItem ? "8px 8px 0 0" : isLastItem ? "0 0 8px 8px" : "0px",
+                            p: 2,
+                            textAlign: "center",
+                          }}
+                        >
+                          <Box
+                            sx={{
+                              width: "100%",
+                              display: "flex",
+                              justifyContent: "space-between",
+                              alignItems: "center",
+                            }}
+                          >
+                            <Typography variant="body1" sx={{ flex: "1", textAlign: "left" }}>
+                              {section.name}
+                            </Typography>
+                            <Box sx={{ display: "flex", gap: 0.5 }}>
+                              {section.tags.map((tag) => {
+                                // If the tag doesn't have a color yet, assign it one
+                                if (!tagColorMap[tag]) {
+                                  tagColorMap[tag] = chipColors[tagColorIndex % chipColors.length]
+                                  tagColorIndex++
+                                }
+                                return (
+                                  <Chip
+                                    key={tag}
+                                    label={tag}
+                                    size="small"
+                                    sx={{ backgroundColor: tagColorMap[tag], fontSize: "0.75rem", height: "20px" }}
+                                  />
+                                )
+                              })}
+                            </Box>
+                          </Box>
+                        </Paper>
+                      </Link>
+                    </Grid>
+                  )
+                })}
+              </Grid>
+            </Grid>
+          )
+        })}
+      </Grid>
+    </div>
+  )
+}
+
+export default CourseGrid
diff --git a/components/NavDiagram.tsx b/components/navdiagram/NavDiagram.tsx
similarity index 98%
rename from components/NavDiagram.tsx
rename to components/navdiagram/NavDiagram.tsx
index 15c4bcc3..6e8285be 100644
--- a/components/NavDiagram.tsx
+++ b/components/navdiagram/NavDiagram.tsx
@@ -60,8 +60,6 @@ const layoutOptionsTheme = {
   "elk.zoomToFit": "true",
 }
 
-const padding = "[top=50.0,left=12.0,bottom=12.0,right=12.0]"
-
 const labels = [{ width: 200, height: 70 }]
 const labelsTheme = [{ width: 200, height: 90 }]
 
@@ -217,7 +215,6 @@ function generate_theme_nodes_elk(theme: Theme, includeExternalDeps: boolean = f
       .flat()
     nodes = nodes.concat(nodeDeps)
   }
-
   if (nodes.length == 0) {
     return undefined
   }
@@ -330,6 +327,15 @@ function generate_material_nodes(material: Material, graph: ElkNode, excludes: E
       height: graph.children?.[i].height,
     },
   }))
+  nodes = nodes.concat(
+    ...material.themes.map((theme, i) => {
+      if (graph.children?.[i]) {
+        return generate_theme_nodes(material, theme, graph.children?.[i], false, excludes ? excludes : blankExcludes)
+      } else {
+        return []
+      }
+    })
+  )
   return nodes
 }
 
diff --git a/components/NavDiagramCourseNode.tsx b/components/navdiagram/NavDiagramCourseNode.tsx
similarity index 100%
rename from components/NavDiagramCourseNode.tsx
rename to components/navdiagram/NavDiagramCourseNode.tsx
diff --git a/components/NavDiagramSectionNode.tsx b/components/navdiagram/NavDiagramSectionNode.tsx
similarity index 100%
rename from components/NavDiagramSectionNode.tsx
rename to components/navdiagram/NavDiagramSectionNode.tsx
diff --git a/components/NavDiagramThemeNode.tsx b/components/navdiagram/NavDiagramThemeNode.tsx
similarity index 100%
rename from components/NavDiagramThemeNode.tsx
rename to components/navdiagram/NavDiagramThemeNode.tsx
diff --git a/components/navdiagram/ThemeGrid.tsx b/components/navdiagram/ThemeGrid.tsx
new file mode 100644
index 00000000..64119044
--- /dev/null
+++ b/components/navdiagram/ThemeGrid.tsx
@@ -0,0 +1,35 @@
+import React from "react"
+import Link from "next/link"
+import { Grid, Paper, Typography, Box, Divider } from "@mui/material"
+import { Theme } from "lib/material"
+
+function ThemeGrid({ theme }: { theme: Theme }) {
+  const repo = theme.repo
+  const courses = theme.courses
+
+  return (
+    <div className="mx-auto max-w-6xl prose-slate dark:prose-invert">
+      <Grid container spacing={2} sx={{ paddingBottom: "16px" }}>
+        {courses.map((course, colIndex) => {
+          return (
+            <Grid item xs={Math.max(12 / courses.length, 4)} key={colIndex}>
+              <Link href={`/material/${repo}/${theme.id}/${course.id}`}>
+                <Paper elevation={3} sx={{ p: 2, textAlign: "center" }}>
+                  <Typography variant="h5" component="h2">
+                    {course ? course.name : "Unnamed Section"}
+                  </Typography>
+                  <Divider sx={{ my: 1, width: "90%", mx: "auto" }} />
+                  <Typography variant="body1" sx={{ mt: 1, textAlign: "left" }}>
+                    {course.summary}
+                  </Typography>
+                </Paper>
+              </Link>
+            </Grid>
+          )
+        })}
+      </Grid>
+    </div>
+  )
+}
+
+export default ThemeGrid
diff --git a/components/ui/Stack.tsx b/components/ui/Stack.tsx
index 33925999..3b16ae33 100644
--- a/components/ui/Stack.tsx
+++ b/components/ui/Stack.tsx
@@ -5,9 +5,10 @@ interface StackProps {
   children: ReactNode
   direction?: "row" | "col" | "row-reverse" | "col-reverse" | undefined
   className?: React.ComponentProps<"div">["className"]
+  style?: React.ComponentProps<"div">["style"]
 }
 
-function Stack({ spacing = 4, children, direction, className }: StackProps) {
+function Stack({ spacing = 4, children, direction, className, style }: StackProps) {
   if (direction === undefined) {
     direction = "col"
   }
@@ -34,7 +35,9 @@ function Stack({ spacing = 4, children, direction, className }: StackProps) {
 
   const axis = direction.includes("col") ? "col" : "row"
   return (
-    <div className={`flex ${flexVariants[direction]} ${spaceVariants[axis][spacing]} ${className}`}>{children}</div>
+    <div style={style} className={`flex ${flexVariants[direction]} ${spaceVariants[axis][spacing]} ${className}`}>
+      {children}
+    </div>
   )
 }
 
diff --git a/components/ui/SubTitle.tsx b/components/ui/SubTitle.tsx
index da3448f9..ecbf0261 100644
--- a/components/ui/SubTitle.tsx
+++ b/components/ui/SubTitle.tsx
@@ -2,10 +2,11 @@ import React from "react"
 
 type Props = {
   text: string
+  className?: string
 }
 
 const SubTitle: React.FC<Props> = (props) => {
-  return <p className="text-center text-lg font-bold mb-4">{props.text}</p>
+  return <p className={`text-center text-lg font-bold mb-4 ${props.className}`}>{props.text}</p>
 }
 
 export default SubTitle
diff --git a/components/ui/ThemeSwitcher.tsx b/components/ui/ThemeSwitcher.tsx
index a926eac6..f999f333 100644
--- a/components/ui/ThemeSwitcher.tsx
+++ b/components/ui/ThemeSwitcher.tsx
@@ -11,7 +11,7 @@ export const ThemeButton = () => {
     <button
       aria-label="Toggle theme"
       onClick={() => (theme == "dark" ? setTheme("light") : setTheme("dark"))}
-      className="bg-gray-800 dark:bg-gray-50 hover:bg-gray-600 dark:hover:bg-gray-300 transition-all duration-100 text-white rounded dark:text-gray-800 px-2 py-2"
+      className="bg-gray-800 dark:bg-gray-50 hover:bg-gray-600 dark:hover:bg-gray-300 transition-all duration-100 text-white rounded dark:text-gray-800 px-2 py-2 h-full"
     >
       {icon}
     </button>
diff --git a/components/ui/Title.tsx b/components/ui/Title.tsx
index 311ffb23..4e802de0 100644
--- a/components/ui/Title.tsx
+++ b/components/ui/Title.tsx
@@ -2,11 +2,13 @@ import React from "react"
 
 type Props = {
   text: string
+  className?: string
+  style?: React.CSSProperties
 }
 
 const Header: React.FC<Props> = (props) => {
   return (
-    <h1 className="text-center text-2xl font-bold mb-4" data-cy="title">
+    <h1 style={props.style} className={`text-center text-2xl font-bold mb-4 ${props.className}`} data-cy="title">
       {props.text}
     </h1>
   )
diff --git a/cypress/component/EventCommentThreads.cy.tsx b/cypress/component/EventCommentThreads.cy.tsx
index acde7875..f028114f 100644
--- a/cypress/component/EventCommentThreads.cy.tsx
+++ b/cypress/component/EventCommentThreads.cy.tsx
@@ -32,6 +32,7 @@ describe("EventCommentThreads component", () => {
           type: "theme",
           courses: [
             {
+              files: [],
               id: "course1",
               name: "Course 1",
               summary: "",
diff --git a/lib/material.ts b/lib/material.ts
index e06b94b3..315b303b 100644
--- a/lib/material.ts
+++ b/lib/material.ts
@@ -44,6 +44,7 @@ export type Course = {
   type: string
   attribution: Attribution[]
   summary: string
+  files: string[][]
 }
 
 export type Theme = {
@@ -231,16 +232,21 @@ export async function getCourse(repo: string, theme: string, course: string, no_
   const dependsOn = (courseObject.attributes.dependsOn as string[]) || []
   const markdown = no_markdown ? "" : (courseObject.body as string)
   // @ts-expect-error
-  const files = courseObject.attributes.files as [string]
+  let files = courseObject.attributes.files as string[][] | string[]
+  if (typeof files[0] === "string") {
+    files = [files] as string[][]
+  } else {
+    files = files as string[][]
+  }
   // @ts-expect-error
   const attribution = (courseObject.attributes.attribution as Attribution[]) || []
   const id = course
-  let sections = await Promise.all(files.map((file, i) => getSection(repo, theme, course, i, file)))
+  let sections = await Promise.all(files.flatMap((x) => x).map((file, i) => getSection(repo, theme, course, i, file)))
   const excludeSections = getExcludes(repo).sections
   sections = sections.filter((section) => !excludeSections.includes(section.id))
   const type = "Course"
 
-  return { id, theme, name, sections, dependsOn, markdown, type, attribution, summary }
+  return { id, theme, name, sections, dependsOn, markdown, type, attribution, summary, files }
 }
 
 // https://stackoverflow.com/questions/21792367/replace-underscores-with-spaces-and-capitalize-words
diff --git a/pages/event/[eventId].tsx b/pages/event/[eventId].tsx
index ead30a25..c6c34758 100644
--- a/pages/event/[eventId].tsx
+++ b/pages/event/[eventId].tsx
@@ -4,7 +4,7 @@ import { getMaterial, Theme, Material, removeMarkdown } from "lib/material"
 import Layout from "components/Layout"
 import { makeSerializable } from "lib/utils"
 import Content from "components/content/Content"
-import NavDiagram from "components/NavDiagram"
+import NavDiagram from "components/navdiagram/NavDiagram"
 import Title from "components/ui/Title"
 import type { Event, EventFull } from "lib/types"
 import { basePath } from "lib/basePath"
diff --git a/pages/event/[eventId]/[eventGroupId].tsx b/pages/event/[eventId]/[eventGroupId].tsx
index 31691562..fda778cc 100644
--- a/pages/event/[eventId]/[eventGroupId].tsx
+++ b/pages/event/[eventId]/[eventGroupId].tsx
@@ -5,6 +5,7 @@ import { getMaterial, Theme, Material, removeMarkdown, eventItemSplit } from "li
 import Layout from "components/Layout"
 import { makeSerializable } from "lib/utils"
 import Content from "components/content/Content"
+import NavDiagram from "components/navdiagram/NavDiagram"
 import Title from "components/ui/Title"
 import SubTitle from "components/ui/SubTitle"
 import { Event } from "lib/types"
diff --git a/pages/material/[repoId]/[themeId].tsx b/pages/material/[repoId]/[themeId].tsx
index f8d77f4c..6c556c36 100644
--- a/pages/material/[repoId]/[themeId].tsx
+++ b/pages/material/[repoId]/[themeId].tsx
@@ -4,11 +4,14 @@ import { getMaterial, Theme, Material, removeMarkdown, getExcludes, Excludes } f
 import Layout from "components/Layout"
 import { makeSerializable } from "lib/utils"
 import Content from "components/content/Content"
-import NavDiagram from "components/NavDiagram"
+import NavDiagram from "components/navdiagram/NavDiagram"
 import Title from "components/ui/Title"
+import SubTitle from "components/ui/SubTitle"
 import { Event } from "lib/types"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
 import revalidateTimeout from "lib/revalidateTimeout"
+import Link from "next/link"
+import ThemeGrid from "components/navdiagram/ThemeGrid"
 
 type ThemeComponentProps = {
   theme: Theme
@@ -21,8 +24,11 @@ type ThemeComponentProps = {
 const ThemeComponent: NextPage<ThemeComponentProps> = ({ theme, material, events, pageInfo, excludes }) => {
   return (
     <Layout material={material} theme={theme} pageInfo={pageInfo}>
-      <Title text={theme.name} />
-      <NavDiagram material={material} theme={theme} excludes={excludes} />
+      <Title text={theme.name} style={{ marginBottom: "0px" }} />
+      <Link className="text-blue-500 italic" href={`/material/${theme.repo}/${theme.id}/diagram`}>
+        <SubTitle text="View Theme Diagram" />
+      </Link>
+      <ThemeGrid theme={theme} />
       <Content markdown={theme.markdown} theme={theme} />
     </Layout>
   )
diff --git a/pages/material/[repoId]/[themeId]/[courseId].tsx b/pages/material/[repoId]/[themeId]/[courseId].tsx
index 4730521f..77c13ffb 100644
--- a/pages/material/[repoId]/[themeId]/[courseId].tsx
+++ b/pages/material/[repoId]/[themeId]/[courseId].tsx
@@ -4,11 +4,15 @@ import { getMaterial, Course, Theme, Material, removeMarkdown } from "lib/materi
 import Layout from "components/Layout"
 import { makeSerializable } from "lib/utils"
 import Content from "components/content/Content"
-import NavDiagram from "components/NavDiagram"
+import NavDiagram from "components/navdiagram/NavDiagram"
 import Title from "components/ui/Title"
 import { Event } from "lib/types"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
 import revalidateTimeout from "lib/revalidateTimeout"
+import CourseGrid from "components/navdiagram/CourseGrid"
+import Stack from "components/ui/Stack"
+import Link from "next/link"
+import SubTitle from "components/ui/SubTitle"
 
 type CourseComponentProps = {
   theme: Theme
@@ -27,8 +31,11 @@ const CourseComponent: NextPage<CourseComponentProps> = ({
 }: CourseComponentProps) => {
   return (
     <Layout theme={theme} course={course} material={material} pageInfo={pageInfo}>
-      <Title text={course.name} />
-      <NavDiagram material={material} theme={theme} course={course} />
+      <Title text={course.name} style={{ marginBottom: "0px" }} />
+      <Link className="text-blue-500 italic" href={`/material/${theme.repo}/${theme.id}/${course.id}/diagram`}>
+        <SubTitle text="View Course Diagram" />
+      </Link>
+      <CourseGrid course={course} theme={theme} />
       <Content markdown={course.markdown} theme={theme} course={course} />
     </Layout>
   )
diff --git a/pages/material/[repoId]/[themeId]/[courseId]/diagram.tsx b/pages/material/[repoId]/[themeId]/[courseId]/diagram.tsx
new file mode 100644
index 00000000..ac48cd7b
--- /dev/null
+++ b/pages/material/[repoId]/[themeId]/[courseId]/diagram.tsx
@@ -0,0 +1,84 @@
+import type { NextPage, GetStaticProps, GetStaticPaths } from "next"
+import prisma from "lib/prisma"
+import { getMaterial, Course, Theme, Material, removeMarkdown } from "lib/material"
+import Layout from "components/Layout"
+import { makeSerializable } from "lib/utils"
+import NavDiagram from "components/navdiagram/NavDiagram"
+import Title from "components/ui/Title"
+import { Event } from "lib/types"
+import { PageTemplate, pageTemplate } from "lib/pageTemplate"
+import revalidateTimeout from "lib/revalidateTimeout"
+
+type CourseComponentProps = {
+  theme: Theme
+  course: Course
+  material: Material
+  events: Event[]
+  pageInfo?: PageTemplate
+}
+
+const CourseComponent: NextPage<CourseComponentProps> = ({
+  theme,
+  course,
+  material,
+  events,
+  pageInfo,
+}: CourseComponentProps) => {
+  return (
+    <Layout theme={theme} course={course} material={material} pageInfo={pageInfo}>
+      <Title text={course.name} />
+      <NavDiagram material={material} theme={theme} course={course} />
+    </Layout>
+  )
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const material = await getMaterial()
+  let paths = []
+  for (const theme of material.themes) {
+    for (const course of theme.courses) {
+      paths.push({
+        params: { repoId: `${theme.repo}`, themeId: `${theme.id}`, courseId: `${course.id}` },
+      })
+    }
+  }
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const pageInfo = pageTemplate
+  const events = await prisma.event
+    .findMany({
+      where: { hidden: false },
+    })
+    .catch((e) => {
+      return []
+    })
+  const themeId = context?.params?.themeId
+  if (!themeId || Array.isArray(themeId)) {
+    return { notFound: true }
+  }
+  const courseId = context?.params?.courseId
+  if (!courseId || Array.isArray(courseId)) {
+    return { notFound: true }
+  }
+  const material = await getMaterial()
+  const theme = material.themes.find((t) => t.id === themeId)
+  if (!theme) {
+    return { notFound: true }
+  }
+  const course = theme.courses.find((c) => c.id === courseId)
+  if (!course) {
+    return { notFound: true }
+  }
+  removeMarkdown(material, course)
+  return {
+    props: makeSerializable({ theme, course, material, events, pageInfo }),
+    revalidate: revalidateTimeout,
+  }
+}
+
+export default CourseComponent
diff --git a/pages/material/[repoId]/[themeId]/diagram.tsx b/pages/material/[repoId]/[themeId]/diagram.tsx
new file mode 100644
index 00000000..ab30cdd4
--- /dev/null
+++ b/pages/material/[repoId]/[themeId]/diagram.tsx
@@ -0,0 +1,58 @@
+import type { NextPage, GetStaticProps, GetStaticPaths } from "next"
+import prisma from "lib/prisma"
+import Layout from "components/Layout"
+import { makeSerializable } from "lib/utils"
+import { Material, Theme, getMaterial, removeMarkdown } from "lib/material"
+import Content from "components/content/Content"
+import NavDiagram from "components/navdiagram/NavDiagram"
+
+type HomeProps = {
+  material: Material
+  theme: Theme
+}
+
+const Home: NextPage<HomeProps> = ({ material, theme }) => {
+  return (
+    <Layout material={material}>
+      <Content markdown={material.markdown} theme={theme} />
+      <NavDiagram material={material} />
+    </Layout>
+  )
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const events = await prisma.event
+    .findMany({
+      where: { hidden: false },
+    })
+    .catch((e) => {
+      return []
+    })
+  let material = await getMaterial()
+  removeMarkdown(material, material)
+
+  return {
+    props: {
+      material: makeSerializable(material),
+      events: makeSerializable(events),
+    },
+  }
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const material = await getMaterial()
+  let paths = []
+  for (const theme of material.themes) {
+    for (const course of theme.courses) {
+      paths.push({
+        params: { repoId: `${theme.repo}`, themeId: `${theme.id}`, courseId: `${course.id}` },
+      })
+    }
+  }
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+export default Home
diff --git a/pages/material/diagram.tsx b/pages/material/diagram.tsx
new file mode 100644
index 00000000..227287f5
--- /dev/null
+++ b/pages/material/diagram.tsx
@@ -0,0 +1,43 @@
+import type { NextPage, GetStaticProps, GetStaticPaths } from "next"
+import prisma from "lib/prisma"
+import Layout from "components/Layout"
+import { makeSerializable } from "lib/utils"
+import { Material, getMaterial, removeMarkdown } from "lib/material"
+import Content from "components/content/Content"
+import NavDiagram from "components/navdiagram/NavDiagram"
+import { EventFull as Event } from "lib/types"
+
+type HomeProps = {
+  material: Material
+  events: Event[]
+}
+
+const Home: NextPage<HomeProps> = ({ material, events }) => {
+  return (
+    <Layout material={material}>
+      <Content markdown={material.markdown} />
+      <NavDiagram material={material} />
+    </Layout>
+  )
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const events = await prisma.event
+    .findMany({
+      where: { hidden: false },
+    })
+    .catch((e) => {
+      return []
+    })
+  let material = await getMaterial()
+  removeMarkdown(material, material)
+
+  return {
+    props: {
+      material: makeSerializable(material),
+      events: makeSerializable(events),
+    },
+  }
+}
+
+export default Home
diff --git a/pages/material/index.tsx b/pages/material/index.tsx
index 0d5929c2..098d246d 100644
--- a/pages/material/index.tsx
+++ b/pages/material/index.tsx
@@ -7,6 +7,9 @@ import { EventFull as Event } from "lib/types"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
 import ThemeCards from "components/ThemeCards"
 import revalidateTimeout from "lib/revalidateTimeout"
+import Title from "components/ui/Title"
+import SubTitle from "components/ui/SubTitle"
+import Link from "next/link"
 
 type HomeProps = {
   material: Material
@@ -17,7 +20,10 @@ type HomeProps = {
 const Home: NextPage<HomeProps> = ({ material, events, pageInfo }) => {
   return (
     <Layout material={material} pageInfo={pageInfo}>
-      <h1 className="text-3xl font-bold text-center">Material Themes</h1>
+      <Title text="Material Themes" className="text-3xl font-bold text-center p-3" style={{ marginBottom: "0px" }} />
+      <Link className="text-blue-500 italic" href={`/material/diagram`}>
+        <SubTitle text="view full diagram" />
+      </Link>
       <ThemeCards material={material} />
     </Layout>
   )
diff --git a/scripts/table.ts b/scripts/table.ts
index 114a4622..7b39f11c 100644
--- a/scripts/table.ts
+++ b/scripts/table.ts
@@ -8,7 +8,6 @@ async function generateTable() {
   const hostname = "https://train.oxrse.uk"
   let content = `| ${headers.join(" | ")} |\n| ${headers.map(() => "---").join(" | ")} |\n`
   for (let theme of material.themes) {
-    console.log(theme.name)
     for (let course of theme.courses) {
       const courseString = `${theme.id}.${course.id}`
       const themeString = `${theme.id}`
diff --git a/styles/globals.css b/styles/globals.css
index 3865839b..73367dd6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -26,10 +26,16 @@ body {
 
 /* CSS to target the first h1 or h2 inside a Callout */
 .callout > h1:first-child,
-.callout > h2:first-child {
+.callout > h2:first-child,
+.callout > div > h1:first-child,
+.callout > div > h2:first-child {
   margin-top: 16px;
 }
 
+.prose > div:first-child > h2 {
+  margin-top: 0px;
+}
+
 /* lists in markdown Content */
 li.mdli {
   display: list-item;