diff --git a/next.config.ts b/next.config.ts
index 8586cb1..05b8c67 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -7,11 +7,15 @@ const nextConfig = {
 
 const withMDX = createMDX({
   options: {
+    // @ts-expect-error wrong types
     remarkPlugins: [["remark-gfm", { strict: true, throwOnError: true }]],
     rehypePlugins: [
+      // @ts-expect-error wrong types
       ["rehype-pretty-code", { strict: true, throwOnError: true }],
+      // @ts-expect-error wrong types
       ["rehype-slug", { strict: true, throwOnError: true }],
       [
+        // @ts-expect-error wrong types
         "rehype-autolink-headings",
         {
           strict: true,
diff --git a/src/app/lab/layout.tsx b/src/app/lab/layout.tsx
index 88c5903..024892f 100644
--- a/src/app/lab/layout.tsx
+++ b/src/app/lab/layout.tsx
@@ -11,11 +11,8 @@ const LabLayout: FC<{
   const content = await getAllLabs();
   const allLabs = content.map(({ frontmatter }) => frontmatter);
   return (
-    <Mosaic>
-      <LabNavigation
-        labs={allLabs}
-        className="md:col-span-2 md:col-start-1 lg:col-span-6 lg:col-start-1"
-      />
+    <Mosaic sidebar>
+      <LabNavigation labs={allLabs} />
       <LabInfoCard labs={allLabs} />
       <LabContent labs={allLabs}>{children}</LabContent>
     </Mosaic>
diff --git a/src/app/lab/page.tsx b/src/app/lab/page.tsx
index 0efc2a7..bece240 100644
--- a/src/app/lab/page.tsx
+++ b/src/app/lab/page.tsx
@@ -6,7 +6,7 @@ import { FC } from "react";
 const LabOverviewPage: FC = async () => {
   const allLabs = await getAllLabs();
   return (
-    <>
+    <article className="mosaic-rows col-span-full grid grid-flow-dense grid-cols-subgrid">
       {allLabs.map(({ frontmatter }) => (
         <Tile
           key={frontmatter.slug}
@@ -15,7 +15,7 @@ const LabOverviewPage: FC = async () => {
           <LabCard lab={frontmatter} asLink />
         </Tile>
       ))}
-    </>
+    </article>
   );
 };
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7bbee90..f059860 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,23 +1,13 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "@/styles/globals.css";
 import { inter, josefin_sans, roboto_mono } from "@/styles/fonts";
 
+import "@/styles/globals.css";
+
 import { Navbar } from "@/components/organism/navbar";
 import { Footer } from "@/components/organism/footer";
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "next-themes";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata = {
   title: "Lloyd Richards Design",
   description:
@@ -59,7 +49,7 @@ export default function RootLayout({
         className={cn(
           "min-h-dvh w-full lg:max-w-6xl",
           "mosaic-columns grid grid-flow-dense",
-          "justify-self-center",
+          "justify-self-center p-2",
         )}
       >
         <ThemeProvider attribute="class" enableSystem>
diff --git a/src/app/project/[slug]/page.tsx b/src/app/project/[slug]/page.tsx
index 1fcde46..185fd70 100644
--- a/src/app/project/[slug]/page.tsx
+++ b/src/app/project/[slug]/page.tsx
@@ -16,13 +16,11 @@ const ProjectPage = async ({
 
   return (
     <>
-      <section className="col-span-full row-span-2 md:col-[3/-1] lg:col-[7/-1]">
+      <section className="mosaic-rows col-span-full grid">
         <h1>{frontmatter.title}</h1>
-        <p>{frontmatter.description}</p>
+        <p className="row-span-2">{frontmatter.description}</p>
       </section>
-      <article className="col-span-full row-span-10 md:col-[3/-1] md:row-span-24 lg:col-[7/-1]">
-        {content}
-      </article>
+      <article className="col-span-full mb-16">{content}</article>
     </>
   );
 };
diff --git a/src/app/project/layout.tsx b/src/app/project/layout.tsx
index d089ac2..8a58ed9 100644
--- a/src/app/project/layout.tsx
+++ b/src/app/project/layout.tsx
@@ -9,11 +9,8 @@ const ProjectLayout: FC<{
   const content = await getAllProjects();
   const allProjects = content.map(({ frontmatter }) => frontmatter);
   return (
-    <Mosaic>
-      <ProjectNavigation
-        projects={allProjects}
-        className="md:col-span-2 md:col-start-1 lg:col-span-6 lg:col-start-1"
-      />
+    <Mosaic sidebar>
+      <ProjectNavigation projects={allProjects} />
       {children}
     </Mosaic>
   );
diff --git a/src/app/project/page.tsx b/src/app/project/page.tsx
index b813bb4..7605e97 100644
--- a/src/app/project/page.tsx
+++ b/src/app/project/page.tsx
@@ -6,7 +6,7 @@ import { FC } from "react";
 const ProjectOverviewPage: FC = async () => {
   const allProjects = await getAllProjects();
   return (
-    <>
+    <article className="mosaic-rows col-span-full grid grid-flow-dense grid-cols-subgrid">
       {allProjects.map(({ frontmatter }, idx) => (
         <Tile
           key={frontmatter.slug}
@@ -15,7 +15,7 @@ const ProjectOverviewPage: FC = async () => {
           <ProjectCard project={frontmatter} asLink />
         </Tile>
       ))}
-    </>
+    </article>
   );
 };
 
diff --git a/src/components/atom/badge.tsx b/src/components/atom/badge.tsx
index 90c557b..0a656b3 100644
--- a/src/components/atom/badge.tsx
+++ b/src/components/atom/badge.tsx
@@ -2,9 +2,10 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
+import { typefaceBody2, typefaceMeta1 } from "../tokens/typeface";
 
 const badgeVariants = cva(
-  "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
+  "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
   {
     variants: {
       variant: {
@@ -16,9 +17,14 @@ const badgeVariants = cva(
           "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
         outline: "text-foreground border-foreground",
       },
+      size: {
+        sm: typefaceMeta1(),
+        md: typefaceBody2(),
+      },
     },
     defaultVariants: {
       variant: "default",
+      size: "md",
     },
   },
 );
diff --git a/src/components/molecule/lab-info-card.tsx b/src/components/molecule/lab-info-card.tsx
index 8bf9b95..4112d05 100644
--- a/src/components/molecule/lab-info-card.tsx
+++ b/src/components/molecule/lab-info-card.tsx
@@ -29,7 +29,7 @@ export const LabInfoCard: FC<LabInfoCardProps> = ({ labs, className }) => {
     return null;
   }
   return (
-    <Tile size="unset" className="col-[3/-1] row-span-4 lg:col-[7/-1]">
+    <Tile size="unset" className="col-span-full">
       <Card className={className}>
         <CardHeader className="flex-row justify-between pb-0">
           <div className="flex items-center gap-2 opacity-60">
diff --git a/src/components/molecule/nav_list_item.tsx b/src/components/molecule/nav_list_item.tsx
index bdf6e3f..b5c3cd9 100644
--- a/src/components/molecule/nav_list_item.tsx
+++ b/src/components/molecule/nav_list_item.tsx
@@ -4,26 +4,32 @@ import {
   NavigationMenuLink,
   navigationMenuTriggerStyle,
 } from "@/components/atom/navigation-menu";
-import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { FC } from "react";
+import { usePathname } from "next/navigation";
+import { FC, ReactNode } from "react";
+import { Tile } from "../atom/tile";
 
-interface PostsListItemProps {
+export const NavListItem: FC<{
+  children: ReactNode;
   href: string;
-  children?: React.ReactNode;
+  exact?: boolean;
   className?: string;
-}
-
-export const NavListItem: FC<PostsListItemProps> = ({ children, href }) => {
+}> = ({ children, href, exact, className }) => {
+  const pathname = usePathname();
   return (
-    <NavigationMenuItem className="w-full">
-      <Link href={href} legacyBehavior passHref>
-        <NavigationMenuLink
-          className={cn(navigationMenuTriggerStyle(), "group w-full gap-1")}
-        >
-          {children}
-        </NavigationMenuLink>
-      </Link>
-    </NavigationMenuItem>
+    <Tile key={href} size="box-xxs" outline={false} className={className}>
+      <NavigationMenuItem>
+        <Link href={href} legacyBehavior passHref>
+          <NavigationMenuLink
+            className={navigationMenuTriggerStyle({
+              active: exact ? pathname == href : pathname.includes(href),
+              className: "flex gap-2 @min-[120px]:justify-start",
+            })}
+          >
+            {children}
+          </NavigationMenuLink>
+        </Link>
+      </NavigationMenuItem>
+    </Tile>
   );
 };
diff --git a/src/components/organism/lab_navigation.tsx b/src/components/organism/lab_navigation.tsx
index d27a37d..6cba7c8 100644
--- a/src/components/organism/lab_navigation.tsx
+++ b/src/components/organism/lab_navigation.tsx
@@ -1,18 +1,9 @@
-"use client";
-
-import Link from "next/link";
-import { FC, ReactNode } from "react";
+import { FC } from "react";
 import { Lab } from "@/types/domain";
-import { usePathname } from "next/navigation";
-import {
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  navigationMenuTriggerStyle,
-} from "../atom/navigation-menu";
-import { Tile } from "../atom/tile";
+import { NavigationMenu, NavigationMenuList } from "../atom/navigation-menu";
 import { cn } from "@/lib/utils";
+import { NavListItem } from "../molecule/nav_list_item";
+import { Badge } from "../atom/badge";
 
 interface LabNavigationProps {
   labs: Array<Lab>;
@@ -20,55 +11,29 @@ interface LabNavigationProps {
 }
 export const LabNavigation: FC<LabNavigationProps> = ({ labs, className }) => {
   return (
-    <aside className="hidden md:contents">
-      <NavigationMenu aria-label="Lab Navigation" orientation="vertical">
-        <NavigationMenuList className="contents">
-          <LabNavItem href="/Labs" exact className={className}>
-            All Labs
-          </LabNavItem>
-
-          {labs
-            .filter((d) => d.isPublished)
-            .map((p) => (
-              <LabNavItem
-                key={p.slug}
-                href={p.pathname}
-                className={cn("overflow-visible", className)}
-              >
-                {p.id}
-                <span className="hidden lg:line-clamp-1"> - {p.title}</span>
-              </LabNavItem>
-            ))}
-        </NavigationMenuList>
-      </NavigationMenu>
-      {labs.length % 2 == 0 ? (
-        <Tile size="box-xxs" outline={false} className={className} />
-      ) : null}
-    </aside>
-  );
-};
+    <NavigationMenu
+      aria-label="Lab Navigation"
+      orientation="vertical"
+      className="hidden md:contents"
+    >
+      <NavigationMenuList className="contents">
+        <NavListItem href="/Labs" exact className={className}>
+          All Labs
+        </NavListItem>
 
-const LabNavItem: FC<{
-  children: ReactNode;
-  href: string;
-  exact?: boolean;
-  className?: string;
-}> = ({ children, href, exact, className }) => {
-  const pathname = usePathname();
-  return (
-    <Tile key={href} size="box-xxs" outline={false} className={className}>
-      <NavigationMenuItem>
-        <Link href={href} legacyBehavior passHref>
-          <NavigationMenuLink
-            className={navigationMenuTriggerStyle({
-              active: exact ? pathname == href : pathname.includes(href),
-              className: "@min-[120px]:justify-start",
-            })}
-          >
-            {children}
-          </NavigationMenuLink>
-        </Link>
-      </NavigationMenuItem>
-    </Tile>
+        {labs
+          .filter((d) => d.isPublished)
+          .map((p) => (
+            <NavListItem
+              key={p.slug}
+              href={p.pathname}
+              className={cn("overflow-visible", className)}
+            >
+              <Badge variant="outline">{p.id}</Badge>
+              <span className="hidden lg:line-clamp-1">{p.title}</span>
+            </NavListItem>
+          ))}
+      </NavigationMenuList>
+    </NavigationMenu>
   );
 };
diff --git a/src/components/organism/project_navigation.tsx b/src/components/organism/project_navigation.tsx
index 32ddec2..f0fa115 100644
--- a/src/components/organism/project_navigation.tsx
+++ b/src/components/organism/project_navigation.tsx
@@ -1,18 +1,8 @@
-"use client";
-
-import Link from "next/link";
-import { FC, ReactNode } from "react";
+import { FC } from "react";
 import { Project } from "@/types/domain";
-import { usePathname } from "next/navigation";
-import {
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  navigationMenuTriggerStyle,
-} from "../atom/navigation-menu";
-import { Tile } from "../atom/tile";
-import { cn } from "@/lib/utils";
+import { NavigationMenu, NavigationMenuList } from "../atom/navigation-menu";
+import { NavListItem } from "../molecule/nav_list_item";
+import { Badge } from "../atom/badge";
 
 interface ProjectNavigationProps {
   projects: Array<Project>;
@@ -26,57 +16,20 @@ export const ProjectNavigation: FC<ProjectNavigationProps> = ({
     <aside className="hidden md:contents">
       <NavigationMenu aria-label="Project Navigation" orientation="vertical">
         <NavigationMenuList className="contents">
-          <ProjectNavItem href="/projects" exact className={className}>
+          <NavListItem href="/project" exact className={className}>
             All Projects
-          </ProjectNavItem>
+          </NavListItem>
 
           {projects
             .filter((d) => d.isPublished)
             .map((p) => (
-              <ProjectNavItem
-                key={p.slug}
-                href={p.pathname}
-                className={className}
-              >
-                {p.id}
-                <span className="hidden lg:line-clamp-1"> - {p.title}</span>
-              </ProjectNavItem>
+              <NavListItem key={p.slug} href={p.pathname} className={className}>
+                <Badge variant="outline">{p.id}</Badge>
+                <span className="hidden lg:line-clamp-1">{p.title}</span>
+              </NavListItem>
             ))}
         </NavigationMenuList>
       </NavigationMenu>
-      {projects.length % 2 == 0 ? (
-        <Tile size="box-xxs" outline={false} className={className} />
-      ) : null}
     </aside>
   );
 };
-
-const ProjectNavItem: FC<{
-  children: ReactNode;
-  href: string;
-  exact?: boolean;
-  className?: string;
-}> = ({ children, href, exact, className }) => {
-  const pathname = usePathname();
-  return (
-    <Tile
-      key={href}
-      size="box-xxs"
-      outline={false}
-      className={cn("overflow-visible", className)}
-    >
-      <NavigationMenuItem>
-        <Link href={href} legacyBehavior passHref>
-          <NavigationMenuLink
-            className={navigationMenuTriggerStyle({
-              active: exact ? pathname == href : pathname.includes(href),
-              className: "@min-[120px]:justify-start",
-            })}
-          >
-            {children}
-          </NavigationMenuLink>
-        </Link>
-      </NavigationMenuItem>
-    </Tile>
-  );
-};
diff --git a/src/components/template/lab-content.tsx b/src/components/template/lab-content.tsx
index 5d88720..9a04bba 100644
--- a/src/components/template/lab-content.tsx
+++ b/src/components/template/lab-content.tsx
@@ -22,12 +22,7 @@ export const LabContent: FC<LabContentProps> = ({
     return <>{children}</>;
   }
   return (
-    <article
-      className={cn(
-        "col-span-full row-span-24 *:col-span-full md:col-[3/-1] lg:col-span-18 lg:row-span-24",
-        className,
-      )}
-    >
+    <article className={cn("col-span-full mb-16", className)}>
       {children}
     </article>
   );
diff --git a/src/components/template/mosaic.tsx b/src/components/template/mosaic.tsx
index c820b53..5095bd0 100644
--- a/src/components/template/mosaic.tsx
+++ b/src/components/template/mosaic.tsx
@@ -1,7 +1,19 @@
 import { FC, ReactNode } from "react";
 
-export const Mosaic: FC<{ children: ReactNode }> = ({ children }) => {
-  return (
+export const Mosaic: FC<{ children: ReactNode[]; sidebar?: boolean }> = ({
+  children,
+  sidebar,
+}) => {
+  return sidebar ? (
+    <>
+      <aside className="mosaic-rows grid md:col-span-2 lg:col-span-6">
+        {children[0]}
+      </aside>
+      <main className="col-span-full grid grid-flow-dense grid-cols-subgrid md:col-[3/-1] lg:col-[7/-1]">
+        {...children.slice(1)}
+      </main>
+    </>
+  ) : (
     <main className="mosaic-rows col-span-full grid grid-flow-dense grid-cols-subgrid">
       {children}
     </main>