diff --git a/public/assets/mastodon.png b/public/assets/mastodon.png
new file mode 100644
index 0000000..1d0b582
Binary files /dev/null and b/public/assets/mastodon.png differ
diff --git a/public/assets/zines/de-monopoly-discotech-101-japanese/page-8.jpg b/public/assets/zines/de-monopoly-discotech-101-japanese/page-8.jpg
index 5275a73..34855d5 100644
Binary files a/public/assets/zines/de-monopoly-discotech-101-japanese/page-8.jpg and b/public/assets/zines/de-monopoly-discotech-101-japanese/page-8.jpg differ
diff --git a/public/assets/zines/de-monopoly-discotech-101-japanese/printable.pdf b/public/assets/zines/de-monopoly-discotech-101-japanese/printable.pdf
index 0bd1017..8121e8c 100644
Binary files a/public/assets/zines/de-monopoly-discotech-101-japanese/printable.pdf and b/public/assets/zines/de-monopoly-discotech-101-japanese/printable.pdf differ
diff --git a/public/assets/zines/de-monopoly-discotech-101/page-8.jpg b/public/assets/zines/de-monopoly-discotech-101/page-8.jpg
index 3dcf8ba..5d0f2f5 100644
Binary files a/public/assets/zines/de-monopoly-discotech-101/page-8.jpg and b/public/assets/zines/de-monopoly-discotech-101/page-8.jpg differ
diff --git a/public/assets/zines/de-monopoly-discotech-101/printable.pdf b/public/assets/zines/de-monopoly-discotech-101/printable.pdf
index 9d66ff6..a624507 100644
Binary files a/public/assets/zines/de-monopoly-discotech-101/printable.pdf and b/public/assets/zines/de-monopoly-discotech-101/printable.pdf differ
diff --git a/public/assets/zines/signal-101/printable.pdf b/public/assets/zines/signal-101/printable.pdf
index e992477..f1f2193 100644
Binary files a/public/assets/zines/signal-101/printable.pdf and b/public/assets/zines/signal-101/printable.pdf differ
diff --git a/src/components/BigTechAlternatives.astro b/src/components/BigTechAlternatives.astro
new file mode 100644
index 0000000..642f964
--- /dev/null
+++ b/src/components/BigTechAlternatives.astro
@@ -0,0 +1,122 @@
+---
+import Card from "./Card.astro";
+---
+
+<div class="pl-4 pr-4">
+  <h1 class="pb-4 pt-4 text-3xl font-semibold">Big Tech Alternatives</h1>
+  <p class="mb-4">
+    Explore open-source and privacy-focused alternatives to popular big tech
+    software.
+  </p>
+
+  <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+    <Card
+      title="Browsers"
+      bigTech="Chrome (Google)"
+      alternatives={[
+        {
+          name: "Firefox",
+          description: "Privacy-focused browser.",
+          url: "https://www.mozilla.org/firefox",
+        },
+      ]}
+      bgClass="bg-blue-50"
+    />
+
+    <Card
+      title="Cloud Storage"
+      bigTech="Google Drive"
+      alternatives={[
+        {
+          name: "Nextcloud",
+          description: "Self-hosted file sync and share.",
+          url: "https://nextcloud.com",
+        },
+      ]}
+      bgClass="bg-indigo-50"
+    />
+
+    <Card
+      title="Email"
+      bigTech="Gmail (Google)"
+      alternatives={[
+        {
+          name: "ProtonMail",
+          description: "Encrypted email.",
+          url: "https://protonmail.com",
+        },
+      ]}
+      bgClass="bg-yellow-50"
+    />
+
+    <Card
+      title="Maps"
+      bigTech="Google Maps"
+      alternatives={[
+        {
+          name: "OpenStreetMap",
+          description: "Community-driven maps.",
+          url: "https://www.openstreetmap.org",
+        },
+      ]}
+      bgClass="bg-teal-50"
+    />
+
+    <Card
+      title="Messaging"
+      bigTech="WhatsApp (Meta), Slack"
+      alternatives={[
+        {
+          name: "Signal",
+          description: "Encrypted messaging (alternative to WhatsApp).",
+          url: "https://signal.org",
+        },
+        {
+          name: "Element",
+          description: "Matrix-based chat (alternative to Slack).",
+          url: "https://element.io",
+        },
+      ]}
+      bgClass="bg-red-50"
+    />
+
+    <Card
+      title="Search Engines"
+      bigTech="Google Search"
+      alternatives={[
+        {
+          name: "DuckDuckGo",
+          description: "Privacy-protecting search.",
+          url: "https://duckduckgo.com",
+        },
+      ]}
+      bgClass="bg-green-50"
+    />
+
+    <Card
+      title="Social Media"
+      bigTech="Twitter (X), Facebook (Meta)"
+      alternatives={[
+        {
+          name: "Mastodon",
+          description: "Decentralized social network (alternative to Twitter).",
+          url: "https://joinmastodon.org",
+        },
+      ]}
+      bgClass="bg-purple-50"
+    />
+
+    <Card
+      title="Video Platforms"
+      bigTech="YouTube (Google)"
+      alternatives={[
+        {
+          name: "PeerTube",
+          description: "Decentralized video hosting.",
+          url: "https://joinpeertube.org",
+        },
+      ]}
+      bgClass="bg-pink-50"
+    />
+  </div>
+</div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5974ce2..800571e 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,10 +4,20 @@ export default function Footer() {
   return (
     <div
       className={cn(
-        "flex h-12 w-screen flex-col place-items-center justify-center bg-white dark:bg-black dark:text-white",
+        "flex h-12 gap-4 mt-8 w-screen place-items-center justify-center bg-[#dfd9ffff] text-black",
       )}
     >
-      <h2>Copyleft {new Date().getFullYear()}</h2>
+
+      <h2>Resist Tech Monopolies - Copyleft {new Date().getFullYear()}</h2>
+
+      <a href="https://social.coop/@rtm" rel="noopener noreferrer" target="_blank"
+      >
+        <img
+          src={"/assets/mastodon.png"}
+          alt={"the logo for Mastodon (a purple text bubble with the letter M)"}
+          width="30"
+          height="30"
+        /></a>
     </div>
   );
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 54b889e..ca044ae 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,63 +1,91 @@
 import { cn } from "@/lib/utils";
+import { useState } from "react";
 
 interface NavbarProps {
   activePage?: string;
 }
 
-export default function Navbar({ activePage = "" }: NavbarProps) {
+const NAV_ITEMS = [
+  { href: "/#aboutus", label: "About Us", activeKey: "AboutUs", text: "text-red-400", darkText: "dark:text-red-400" },
+  { href: "/#whatwereupto", label: "What We're Up To", activeKey: "WhatWereUpTo", text: "text-orange-400", darkText: "dark:text-orange-400" },
+  { href: "/#bigtechalternatives", label: "Big Tech Alternatives", activeKey: "BigTechAlternatives", text: "text-purple-400", darkText: "dark:text-purple-400" },
+  // TODO once we have these sections done!
+  // { href: "", label: "Services", activeKey: "Services", text: "text-green-400", darkText: "dark:text-green-400" },
+  // { href: "", label: "Calendar", activeKey: "Calendar", text: "text-blue-400", darkText: "dark:text-blue-400" },
+];
+
+export default function Navbar(navbarProps: NavbarProps) {
+  const [activePage, setActivePage] = useState(navbarProps.activePage);
+  const [isShowingHamburgerFullMenu, setIsShowingHamburgerFullMenu] = useState(false);
+
   return (
-    <>
-      <div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
-        <div>
-          <strong className={cn("sm:text-2xl md:text-4xl")}>
+    <div className={cn("bg-white dark:bg-black")}>
+      <div className={cn("flex flex-row items-center justify-between pb-4 pt-4")}>
+        <a href="/" onClick={() => { setActivePage("Home") }}>
+          <div className={cn("flex items-center gap-3")}>
+            {/* 
+            TODO: uncomment once we have a logo!
+            <img
+              src={"/assets/logo.png"}
+              alt={"the logo for RTM (a cat in graffiti style with the RTM written in red and Resist Tech Monopolies written in black)"}
+              width="50"
+              height="50"
+            /> */}
+
+            <h1 className={cn(
+              "text-2xl md:text-4xl font-bold",
+              activePage === "Home" && "underline",
+            )}>Resist Tech Monopolies</h1>
+          </div>
+        </a>
+
+        <div className={cn("items-center gap-4 hidden md:flex")}>
+          {NAV_ITEMS.map(({ href, label, activeKey, text, darkText }) => (
             <a
+              key={href}
+              href={href}
+              onClick={() => {
+                setActivePage(activeKey)
+              }}
               className={cn(
-                activePage === "Home" && "border-b-2 border-black-500",
+                "transition-colors text-xl md:text-2xl font-bold",
+                text,
+                darkText,
+                activePage == activeKey && "underline",
               )}
-              href="/">Resist Tech Monopolies</a>
-          </strong>
-        </div>
-        <strong className={cn("sm:text-1xl flex gap-10 md:text-4xl")}>
-
-          <a
-            href="/PointsOfUnity/"
-            className={cn(
-              "rounded-full px-6 py-2 transition-colors",
-              "bg-gray-200 text-green-700 hover:bg-gray-300",
-              "dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700",
-              activePage === "PointsOfUnity" && "ring-2 ring-green-500 ring-offset-2",
-            )}
-          >
-            Points of Unity
-          </a>
-          <a
-            href="/projects/"
-            className={cn(
-              "rounded-full px-6 py-2 transition-colors",
-              "bg-gray-200 text-red-700 hover:bg-gray-300",
-              "dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700",
-              activePage === "OurProjects" && "ring-2 ring-red-500 ring-offset-2",
-            )}
-          >
-            Our Projects
-          </a>
-        </strong>
-      </div>
-
-      <div className={cn("flex flex-row justify-between pb-8")}>
-        <div className="w-full grid grid-flow-col">
-          {Array.from({ length: 12 }).map((_, index) => (
-            <div key={index} className="flex justify-center">
-              <img
-                src={index % 2 === 0 ? "/assets/computer.png" : "/assets/people.png"}
-                alt={index % 2 === 0 ? "computer icon" : "people icon"}
-                width="30"
-                height="30"
-              />
-            </div>
+            >
+              {label}
+            </a>
           ))}
         </div>
+
+        <div className={cn("hamburger block md:hidden")} onClick={() => { setIsShowingHamburgerFullMenu(!isShowingHamburgerFullMenu) }}>
+          <span className={cn("bg-black dark:bg-white line")}></span>
+          <span className={cn("bg-black dark:bg-white line")}></span>
+          <span className={cn("bg-black dark:bg-white line")}></span>
+        </div>
       </div>
-    </>
+
+      {isShowingHamburgerFullMenu && <div className={cn("flex md:hidden flex-col gap-4 bg-[#ece8fc] p-2 mb-2")}>
+        {NAV_ITEMS.map(({ href, label, activeKey, text, darkText }) => (
+          <a
+            key={href}
+            href={href}
+            onClick={() => {
+              setActivePage(activeKey)
+              setIsShowingHamburgerFullMenu(false)
+            }}
+            className={cn(
+              "transition-colors text-xl md:text-2xl font-bold",
+              text,
+              darkText,
+              activePage == activeKey && "underline",
+            )}
+          >
+            {label}
+          </a>
+        ))}
+      </div>}
+    </div>
   );
 }
diff --git a/src/components/NewLookNavbar.tsx b/src/components/NewLookNavbar.tsx
deleted file mode 100644
index de449a0..0000000
--- a/src/components/NewLookNavbar.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { cn } from "@/lib/utils";
-
-interface NavbarProps {
-  activePage?: string;
-}
-
-const NAV_PILLS = [
-  { href: "/newlook#projects", label: "Our Projects", activeKey: "OurProjects", text: "text-red-700", darkText: "dark:text-red-400", ring: "ring-red-500" },
-  { href: "/newlook#points-of-unity", label: "Points of Unity", activeKey: "PointsOfUnity", text: "text-green-700", darkText: "dark:text-green-400", ring: "ring-green-500" },
-  { href: "/newlook#get-involved", label: "Get Involved", activeKey: "GetInvolved", text: "text-blue-700", darkText: "dark:text-blue-400", ring: "ring-blue-500" },
-];
-
-export default function NewLookNavbar({ activePage = "" }: NavbarProps) {
-  return (
-    <>
-      <div className={cn("flex flex-row items-center justify-between pb-3 pl-4 pr-4 pt-4")}>
-        <div>
-          <strong className={cn("sm:text-2xl md:text-4xl")}>
-            <a
-              className={cn(
-                activePage === "Home" && "border-b-2 border-black-500",
-              )}
-              href="/newlook">Resist Tech Monopolies</a>
-          </strong>
-        </div>
-        <strong className={cn("flex items-center gap-3")}>
-          {NAV_PILLS.map(({ href, label, activeKey, text, darkText, ring }) => (
-            <a
-              key={href}
-              href={href}
-              className={cn(
-                "rounded-full px-3 py-1 text-sm transition-colors",
-                "bg-gray-200 hover:bg-gray-300",
-                "dark:bg-gray-800 dark:hover:bg-gray-700",
-                text,
-                darkText,
-                activePage === activeKey && `ring-2 ${ring} ring-offset-2`,
-              )}
-            >
-              {label}
-            </a>
-          ))}
-        </strong>
-      </div>
-
-      <div className={cn("flex flex-row justify-between pb-3")}>
-        <div className="w-full grid grid-flow-col">
-          {Array.from({ length: 12 }).map((_, index) => (
-            <div key={index} className="flex justify-center">
-              <img
-                src={index % 2 === 0 ? "/assets/computer.png" : "/assets/people.png"}
-                alt={index % 2 === 0 ? "computer icon" : "people icon"}
-                width="30"
-                height="30"
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-}
-
-
diff --git a/src/components/OurProjects.astro b/src/components/WhatWereUpTo.astro
similarity index 54%
rename from src/components/OurProjects.astro
rename to src/components/WhatWereUpTo.astro
index 87b161a..57033a3 100644
--- a/src/components/OurProjects.astro
+++ b/src/components/WhatWereUpTo.astro
@@ -1,6 +1,6 @@
-<h1 class="pb-4 text-3xl font-semibold">Our Projects</h1>
-<div class="flex gap-8">
-  <div class="justify-items-center">
+<h1 class="pb-4 text-3xl font-semibold">What We're Up To</h1>
+<div class="grid grid-cols-1 gap-8 xl:grid-cols-3">
+  <div class="grid justify-items-center gap-8">
     <a href="/projects/bookclub/" class="underline decoration-solid">
       <img
         src="/assets/book-club.png"
@@ -8,11 +8,17 @@
         loading="lazy"
         class="h-[250px] border"
       />
-      Book Club</a
+    </a>
+
+    <a
+      href="/projects/bookclub/"
+      class="max-w-[240px] rounded-sm bg-[#fb923c] px-6 py-3 text-center font-semibold text-white transition-colors"
     >
+      What We're Reading
+    </a>
   </div>
 
-  <div class="justify-items-center">
+  <div class="grid justify-items-center gap-8">
     <a href="/projects/PetCalendar/" class="underline decoration-solid">
       <img
         src="/assets/pet-calendar-2026-cover.jpg"
@@ -20,11 +26,17 @@
         loading="lazy"
         class="h-[250px] border"
       />
-      Pet Calendar</a
+    </a>
+
+    <a
+      href="/projects/petcalendar/"
+      class="max-w-[240px] rounded-sm bg-[#fb923c] px-6 py-3 text-center font-semibold text-white transition-colors"
     >
+      Pet Calendar
+    </a>
   </div>
 
-  <div class="justify-items-center">
+  <div class="grid justify-items-center gap-8">
     <a href="/projects/zines/" class="underline decoration-solid">
       <img
         src="/assets/zines-thumbnail.png"
@@ -32,7 +44,13 @@
         loading="lazy"
         class="h-[250px] border"
       />
-      Zines</a
+    </a>
+
+    <a
+      href="/projects/zines/"
+      class="max-w-[240px] rounded-sm bg-[#fb923c] px-6 py-3 text-center font-semibold text-white transition-colors"
     >
+      Zines
+    </a>
   </div>
 </div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1558644..b858978 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 const title =
   "Resist Tech Monopolies";
 const description =
-  "Copyleft 2025";
+ `Copyleft ${new Date().getFullYear()}`;
 const url = "https://placeholder.com";
 const image = "/public/preview.webp";
 ---
@@ -40,7 +40,7 @@ const image = "/public/preview.webp";
         "@type": "WebSite",
         "url": "https://placeholder.com",
         "name":   "Resist Tech Monopolies",
-        "description": "Copyleft 2025"
+        "description": `Copyleft ${new Date().getFullYear()}`
       }
     </script>
 
diff --git a/src/pages/GetInvolved.astro b/src/pages/GetInvolved.astro
deleted file mode 100644
index fa1cf46..0000000
--- a/src/pages/GetInvolved.astro
+++ /dev/null
@@ -1,20 +0,0 @@
----
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
-import Layout from "../layouts/Layout.astro";
-import "../styles/globals.css";
----
-
-<Layout>
-  <main class="flex min-h-screen flex-col justify-between">
-    <div>
-      <Navbar client:load activePage="GetInvolved" />
-      <div class="pl-4 pr-4">
-        <h1 class="text-3xl font-semibold">Get Involved</h1>
-        
-        
-      </div>
-    </div>
-    <Footer />
-  </main>
-</Layout>
diff --git a/src/pages/PointsOfUnity.astro b/src/pages/aboutus.astro
similarity index 68%
rename from src/pages/PointsOfUnity.astro
rename to src/pages/aboutus.astro
index cec3d0d..47d706a 100644
--- a/src/pages/PointsOfUnity.astro
+++ b/src/pages/aboutus.astro
@@ -7,9 +7,11 @@ import "../styles/globals.css";
 ---
 
 <Layout>
-  <main class="flex min-h-screen flex-col justify-between">
+  <main class="px-4 flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar client:load activePage="PointsOfUnity" />
+      <section class="sticky top-0">
+        <Navbar client:load activePage="AboutUs" />
+      </section>
       <div class="pl-4 pr-4">
         <PointsOfUnity />
       </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b286e83..93f7205 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,16 +1,40 @@
 ---
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
+import BigTechAlternatives from "@/components/BigTechAlternatives.astro";
+import WhatWereUpTo from "@/components/WhatWereUpTo.astro";
 import Layout from "@/layouts/Layout.astro";
 import "@/styles/globals.css";
 ---
 
 <Layout>
-  <main class="flex min-h-screen flex-col justify-between">
-    <div>
-      <Navbar client:load activePage="Home" />
+  <main class="px-4">
+    <section class="sticky top-0">
+      <Navbar client:load activePage="Home"/>
+    </section>
+
+    <section id="aboutus" class="scroll-m-20">
+      <section>
+        <h1 class="pb-4 text-3xl font-semibold">About Us</h1>
+
+        <p>
+          We situate ourselves in our context - as Seattle residents and as
+          users and creators of the technologies we aim to resist.
+        </p>
+
+        <div class="my-8">
+          <a
+            href="/aboutus/"
+            class="rounded-sm bg-[#fe4f60FF] px-6 py-3 font-semibold text-white transition-colors"
+          >
+            Read More
+          </a>
+        </div>
+      </section>
+
+      <section>
+        <h2 class="pb-4 text-3xl font-semibold">Get Involved</h2>
 
-      <div class="pl-4 pr-4 text-xl leading-[2]">
         <p>
           Do you believe technology can and should be used for good? Do you
           think a democratic internet could liberate us? Join us!
@@ -19,18 +43,34 @@ import "@/styles/globals.css";
         <p>We share this vision, and we want to work together to achieve it.</p>
 
         <div class="my-8">
-          <a 
-            href="https://shlink.resisttechmonopolies.online/HNrZG" 
-            class="px-6 py-3 bg-[#80aaff] text-white font-semibold rounded-md hover:bg-[#6090e0] transition-colors"
+          <a
+            href="https://shlink.resisttechmonopolies.online/HNrZG"
+            class="rounded-sm bg-[#80aaff] px-6 py-3 font-semibold text-white transition-colors"
             target="_blank"
             rel="noopener noreferrer"
           >
             Fill Out Our Interest Form!
           </a>
         </div>
-      </div>
-    </div>
+      </section>
+    </section>
+
+    <section id="whatwereupto" class="scroll-m-20 ">
+      <WhatWereUpTo />
+    </section>
+
+    <!-- <section id="services" class="scroll-m-20 my-8">
+      TODO services
+    </section> -->
+
+    <!-- <section id="calendar" class="scroll-m-20 my-8">
+      TODO calendar
+    </section> -->
+
+    <section id="bigtechalternatives" class="scroll-m-20 my-8">
+      <BigTechAlternatives />
+    </section>
 
     <Footer />
-  </main></Layout
->
+  </main>
+</Layout>
diff --git a/src/pages/newlook.astro b/src/pages/newlook.astro
deleted file mode 100644
index ef5ee5f..0000000
--- a/src/pages/newlook.astro
+++ /dev/null
@@ -1,50 +0,0 @@
----
-import NewLookNavbar from "@/components/NewLookNavbar";
-import Footer from "@/components/Footer";
-import PointsOfUnity from "@/components/PointsOfUnity.astro";
-import OurProjects from "@/components/OurProjects.astro";
-import Layout from "@/layouts/Layout.astro";
-import "@/styles/globals.css";
----
-
-<Layout>
-  <main>
-    <section id="home" class="bg-[#FFF8E7] text-gray-900 px-4 pb-2">
-      <NewLookNavbar client:load activePage="Home" />
-    </section>
-
-    <section id="projects" class="bg-[#FFE5D9] text-gray-900 px-4 py-16">
-      <OurProjects />
-    </section>
-
-    <section id="points-of-unity" class="bg-[#D8F3DC] text-gray-900 px-4 py-16">
-      <PointsOfUnity />
-    </section>
-
-    <section id="get-involved" class="bg-[#D4E4F7] text-gray-900 px-4 py-16">
-      <h1 class="text-3xl font-semibold">Get Involved</h1>
-
-      <div class="text-xl leading-[2]">
-        <p>
-          Do you believe technology can and should be used for good? Do you
-          think a democratic internet could liberate us? Join us!
-        </p>
-
-        <p>We share this vision, and we want to work together to achieve it.</p>
-
-        <div class="my-8">
-          <a
-            href="https://shlink.resisttechmonopolies.online/HNrZG"
-            class="px-6 py-3 bg-[#80aaff] text-white font-semibold rounded-md hover:bg-[#6090e0] transition-colors"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Fill Out Our Interest Form!
-          </a>
-        </div>
-      </div>
-    </section>
-
-    <Footer />
-  </main>
-</Layout>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
deleted file mode 100644
index fc6a310..0000000
--- a/src/pages/projects.astro
+++ /dev/null
@@ -1,19 +0,0 @@
----
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
-import OurProjects from "../components/OurProjects.astro";
-import Layout from "../layouts/Layout.astro";
-import "../styles/globals.css";
----
-
-<Layout>
-  <main class="flex min-h-screen flex-col justify-between">
-    <div>
-      <Navbar client:load activePage="OurProjects" />
-      <div class="pl-4 pr-4">
-        <OurProjects />
-      </div>
-    </div>
-    <Footer />
-  </main>
-</Layout>
diff --git a/src/pages/projects/PetCalendar.astro b/src/pages/projects/PetCalendar.astro
index a466ff8..3ee3e13 100644
--- a/src/pages/projects/PetCalendar.astro
+++ b/src/pages/projects/PetCalendar.astro
@@ -6,16 +6,25 @@ import "../../styles/globals.css";
 ---
 
 <Layout>
-  <main class="flex min-h-screen flex-col justify-between">
+  <main class="px-4 flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar client:load activePage="WhatWereWorkingOn" />
+      <section class="sticky top-0">
+        <Navbar client:load activePage="WhatWereUpTo" />
+      </section>
+
       <div class="pl-4 pr-4">
-        <h1 class="pb-4 pt-4 text-3xl font-semibold">Pet Calendar</h1>          
-          <div>We created a pet calendar with 12 beautiful pictures of RTM's 
-          animal friends. 
-          <p class="pb-2">Each month, our pets will share with you with a different way you can 
-          Resist Big Tech Monopolies!</p>          
-          <p class="pb-2"> If you'd like to request a calendar, email us at besties@resisttechmonopolies.online</p>
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Pet Calendar</h1>
+        <div>
+          We created a pet calendar with 12 beautiful pictures of RTM's animal
+          friends.
+          <p class="pb-2">
+            Each month, our pets will share with you with a different way you
+            can Resist Big Tech Monopolies!
+          </p>
+          <p class="pb-2">
+            If you'd like to request a calendar, email us at
+            besties@resisttechmonopolies.online
+          </p>
           <div class="justify-items-center">
             <img
               src="/assets/pet-calendar-2026-cover.jpg"
@@ -23,321 +32,260 @@ import "../../styles/globals.css";
               width="500"
               class="border"
             />
-            
           </div>
-          <div> 
+          <div></div>
         </div>
-         
-        </div>
-        <h1 class="pb-4 pt-4 text-2xl font-semibold">2026 Monthly RTM Tutorials</h1>     
+        <h1 class="pb-4 pt-4 text-2xl font-semibold">
+          2026 Monthly RTM Tutorials
+        </h1>
 
         <div class="flex flex-col gap-8">
           <div class="rounded-lg border p-6">
             <h2 class="mb-4 text-2xl font-semibold" id="January">January</h2>
-            <div>  
-           <p class="mb-2"> Try out Mastadon for algorithmless social media that won't sell your data!</p>
-                <a
-                class="underline mb-2"
-                href="https://joinmastodon.org/"
+            <div>
+              <p class="mb-2">
+                Try out Mastadon for algorithmless social media that won't sell
+                your data!
+              </p>
+              <a class="mb-2 underline" href="https://joinmastodon.org/"
                 >Join Mastadon!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️/5 
-                </p>
-            </div>    
-            
-          </div> 
+              </a>
 
+              <p class="mb-2">Difficulty rating: 🌶️/5</p>
+            </div>
+          </div>
         </div>
         <div class="flex flex-col gap-8">
           <div class="rounded-lg border p-6">
             <h2 class="mb-4 text-2xl font-semibold" id="February">February</h2>
             <div>
-              
-            
-               <p class="mb-2"> Learn about hosting your own instances of tech services to protect your data!</p>
-                <a
-                class="underline mb-2"
+              <p class="mb-2">
+                Learn about hosting your own instances of tech services to
+                protect your data!
+              </p>
+              <a
+                class="mb-2 underline"
                 href="https://www.xda-developers.com/tips-for-self-hosting-beginners/"
                 >Beginner's Guide to Self-Hosting!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️/5 
-                </p>
-            
-               
-            </div>
-            
-          </div>
+              </a>
 
+              <p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️/5</p>
+            </div>
+          </div>
         </div>
         <div class="flex flex-col gap-8">
           <div class="rounded-lg border p-6">
             <h2 class="mb-4 text-2xl font-semibold" id="March">March</h2>
             <div>
-               <p class="mb-2"> Try out Calibre to read Amazon-free e-books!</p>
-                <a
-                class="underline mb-2"
+              <p class="mb-2">Try out Calibre to read Amazon-free e-books!</p>
+              <a
+                class="mb-2 underline"
                 href="https://tutorials.mediaket.net/software-tutorials/calibre-how-to-use-it.html"
                 >Get Started with Calibre!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️🌶️/5 
-                </p>
-            
-            
-               
-            </div>
-            
-          </div>
+              </a>
 
+              <p class="mb-2">Difficulty rating: 🌶️🌶️/5</p>
+            </div>
+          </div>
         </div>
         <div class="flex flex-col gap-8">
           <div class="rounded-lg border p-6">
             <h2 class="mb-4 text-2xl font-semibold" id="April">April</h2>
             <div>
-               <p class="mb-2"> Thinking of switching off Windows or MacOS? Try Linux 
-                for a super customizable, privacy-first operating system!
-</p>
-                <a
-                class="underline mb-2"
+              <p class="mb-2">
+                Thinking of switching off Windows or MacOS? Try Linux for a
+                super customizable, privacy-first operating system!
+              </p>
+              <a
+                class="mb-2 underline"
                 href="https://www.geeksforgeeks.org/linux-unix/30-days-of-linux/"
                 >30 Days of Linux for Beginners!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️/5 
-                </p>
+              </a>
 
-               
-            
-            
-            
-               
+              <p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️/5</p>
             </div>
-            
           </div>
-
         </div>
         <div class="flex flex-col gap-8">
           <div class="rounded-lg border p-6">
             <h2 class="mb-4 text-2xl font-semibold" id="May">May</h2>
             <div>
-               <p class="mb-2"> Try going outside and repping some protest fashion this Spring!</p>
-                <a
-                class="underline mb-2"
+              <p class="mb-2">
+                Try going outside and repping some protest fashion this Spring!
+              </p>
+              <a
+                class="mb-2 underline"
                 href="https://graziamagazine.com/me/articles/history-keffiyeh-palestine/"
                 >Learn the history and meaning of the keffiyeh!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️/5 
-                </p>
-            
-            
-            
-               
-            </div>
-            
-          </div>
+              </a>
 
+              <p class="mb-2">Difficulty rating: 🌶️/5</p>
+            </div>
+          </div>
         </div>
         <div class="flex flex-col gap-8">
           <div class="rounded-lg border p-6">
             <h2 class="mb-4 text-2xl font-semibold" id="June">June</h2>
             <div>
-               <p class="mb-2"> Try out Ente for a privacy-friendly, open-source photos hosting platform!</p>
-                <a
-                class="underline mb-2"
+              <p class="mb-2">
+                Try out Ente for a privacy-friendly, open-source photos hosting
+                platform!
+              </p>
+              <a
+                class="mb-2 underline"
                 href="https://web.archive.org/web/20260108185516/https://www.androidauthority.com/ente-photos-hands-on-3542198/"
                 >In-depth overeview of Ente Photos migration!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️/5 
-                </p>
+              </a>
 
+              <p class="mb-2">Difficulty rating: 🌶️/5</p>
             </div>
-            
           </div>
-
         </div>
         <div class="flex flex-col gap-8">
           <div class="rounded-lg border p-6">
             <h2 class="mb-4 text-2xl font-semibold" id="July">July</h2>
             <div>
-               <p class="mb-2"> Try installing your own Pi Hole on your home wifi network to block ad and malware servers!</p>
-                <a
-                class="underline mb-2"
+              <p class="mb-2">
+                Try installing your own Pi Hole on your home wifi network to
+                block ad and malware servers!
+              </p>
+              <a
+                class="mb-2 underline"
                 href="https://protasm.com/blogs/news/an-extensive-tutorial-on-how-to-setup-a-pi-hole"
                 >Extensive PiHole Tutorial!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5 
-                </p>
-  
-            </div>
-            <hr class="mb-4">
-             <p class="mb-2"> Alternative: Install an adblocker!</p>
-                <a
-                class="underline mb-2"
-                href="https://adblockplus.org/"
-                >Install Adblock Plus!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️/5 
-                </p>
-          </div>
+              </a>
 
+              <p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5</p>
+            </div>
+            <hr class="mb-4" />
+            <p class="mb-2">Alternative: Install an adblocker!</p>
+            <a class="mb-2 underline" href="https://adblockplus.org/"
+              >Install Adblock Plus!
+            </a>
+
+            <p class="mb-2">Difficulty rating: 🌶️/5</p>
+          </div>
         </div>
         <div class="flex flex-col gap-8">
           <div class="rounded-lg border p-6">
             <h2 class="mb-4 text-2xl font-semibold" id="August">August</h2>
             <div>
-               <p class="mb-2"> Try out DuckDuckGo as a privacy-friendly alternative to Google search and Chrome!</p>
-                <a
-                class="underline mb-2"
-                href="https://duckduckgo.com/"
+              <p class="mb-2">
+                Try out DuckDuckGo as a privacy-friendly alternative to Google
+                search and Chrome!
+              </p>
+              <a class="mb-2 underline" href="https://duckduckgo.com/"
                 >Download Duck Duck Go!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️/5 
-                </p>
-            
-            
-            
-               
-            </div>
-            
-          </div>
+              </a>
 
+              <p class="mb-2">Difficulty rating: 🌶️/5</p>
+            </div>
+          </div>
         </div>
         <div class="flex flex-col gap-8">
           <div class="rounded-lg border p-6">
-            <h2 class="mb-4 text-2xl font-semibold" id="September">September</h2>
+            <h2 class="mb-4 text-2xl font-semibold" id="September">
+              September
+            </h2>
             <div>
-               <p class="mb-2"> Instead of relying on surveillance for safety, try making friends with your neighbors!</p>
-                <a
-                class="underline mb-2"
+              <p class="mb-2">
+                Instead of relying on surveillance for safety, try making
+                friends with your neighbors!
+              </p>
+              <a
+                class="mb-2 underline"
                 href="https://www.youtube.com/watch?v=1-Xl6dhDV3Q"
-                > How to Build Radical Community!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️/5
-      
+              >
+                How to Build Radical Community!
+              </a>
+
+              <p class="mb-2">Difficulty rating: 🌶️🌶️🌶️/5</p>
+              (hey making friends in Seattle is hard, okay?)
+            </div>
+            <hr class="mb-4" />
+            <p class="mb-2">
+              Alternative: Neighbor Unions (buliding community power!)
             </p>
-            (hey making friends in Seattle is hard, okay?)
+            <a
+              class="mb-2 underline"
+              href="https://social-ecology.org/wp/neighbor-union-cohort/"
+              >Learn about Neighbor Unions!
+            </a>
 
-            </div>
-            <hr class="mb-4">
-             <p class="mb-2"> Alternative: Neighbor Unions (buliding community power!)</p>
-                <a
-                class="underline mb-2"
-                href="https://social-ecology.org/wp/neighbor-union-cohort/"
-                >Learn about Neighbor Unions!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️/5 
-                </p>
+            <p class="mb-2">Difficulty rating: 🌶️🌶️🌶️/5</p>
           </div>
-            
-               
-            </div>
-            
-          </div>
-
-        </div>
-        <div class="flex flex-col gap-8">
-          <div class="rounded-lg border p-6">
-            <h2 class="mb-4 text-2xl font-semibold" id="October">October</h2>
-            <div>
-               <p class="mb-2"> Try out JellyFin to host your own media server 
-                and share with friends. You can break up with Netflix, Hulu, Disney+, and more!
-</p>
-                <a
-                class="underline mb-2"
-                href="https://jellyfin.org/docs/general/quick-start/"
-                >Quickstart for JellyFin!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️/5 
-                </p>
-                
-            
-            
-            
-               
-            </div>
-            
-          </div>
-
-        </div>
-        <div class="flex flex-col gap-8">
-          <div class="rounded-lg border p-6">
-            <h2 class="mb-4 text-2xl font-semibold" id="November">November</h2>
-            <div>
-               <p class="mb-2"> Try out Meet.coop as an open-source, privacy-friendly, and renewable energy-powered alternative to Zoom and Hangouts!  </p>
-                <a
-                class="underline mb-2"
-                href="https://www.meet.coop/"
-                >Make a Meet.coop account!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️🌶️/5 
-                </p>
-            </div>
-        <hr class="mb-4">
-
-             <p class="mb-2"> Free alternative: Jitsi</p>
-                <a
-                class="underline mb-2"
-                href="https://meet.jit.si/"
-                >Start a Meeting with Jitsi!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️/5 
-                </p>
-          </div>
-            
-            
-               
-            </div>
-            
-          </div>
-
-        </div>
-        <div class="flex flex-col gap-8">
-          <div class="rounded-lg border p-6">
-            <h2 class="mb-4 text-2xl font-semibold" id="December">December</h2>
-            <div>
-               <p class="mb-2"> Try out Radicale as a privacy-friendly, open-source alternative to Google Calendar and Outlook!</p>
-                <a
-                class="underline mb-2"
-                href="https://radicale.org/master.html#simple-5-minute-setup"
-                >Setting up Radicale Tutorial!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5 
-                </p>
-              
-               </div>
-              
-            <hr class="mb-4">
-             <p class="mb-2"> Alternative: Proton Calendar</p>
-                <a
-                class="underline mb-2"
-                href="https://calendar.proton.me/"
-                >Switch to Proton Calendar!
-                </a              >
-            
-               <p class="mb-2"> Difficulty rating: 🌶️/5 
-                </p>
-          </div>
-          </div>
-            </div>
-            
-          </div>
-
         </div>
       </div>
     </div>
-    <Footer />
+    <div class="flex flex-col gap-8">
+      <div class="rounded-lg border p-6">
+        <h2 class="mb-4 text-2xl font-semibold" id="October">October</h2>
+        <div>
+          <p class="mb-2">
+            Try out JellyFin to host your own media server and share with
+            friends. You can break up with Netflix, Hulu, Disney+, and more!
+          </p>
+          <a
+            class="mb-2 underline"
+            href="https://jellyfin.org/docs/general/quick-start/"
+            >Quickstart for JellyFin!
+          </a>
+
+          <p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️/5</p>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-8">
+      <div class="rounded-lg border p-6">
+        <h2 class="mb-4 text-2xl font-semibold" id="November">November</h2>
+        <div>
+          <p class="mb-2">
+            Try out Meet.coop as an open-source, privacy-friendly, and renewable
+            energy-powered alternative to Zoom and Hangouts!
+          </p>
+          <a class="mb-2 underline" href="https://www.meet.coop/"
+            >Make a Meet.coop account!
+          </a>
+
+          <p class="mb-2">Difficulty rating: 🌶️🌶️/5</p>
+        </div>
+        <hr class="mb-4" />
+
+        <p class="mb-2">Free alternative: Jitsi</p>
+        <a class="mb-2 underline" href="https://meet.jit.si/"
+          >Start a Meeting with Jitsi!
+        </a>
+
+        <p class="mb-2">Difficulty rating: 🌶️/5</p>
+      </div>
+    </div>
   </main>
 </Layout>
+<div class="flex flex-col gap-8">
+  <div class="rounded-lg border p-6">
+    <h2 class="mb-4 text-2xl font-semibold" id="December">December</h2>
+    <div>
+      <p class="mb-2">
+        Try out Radicale as a privacy-friendly, open-source alternative to
+        Google Calendar and Outlook!
+      </p>
+      <a
+        class="mb-2 underline"
+        href="https://radicale.org/master.html#simple-5-minute-setup"
+        >Setting up Radicale Tutorial!
+      </a>
+
+      <p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5</p>
+    </div>
+
+    <hr class="mb-4" />
+    <p class="mb-2">Alternative: Proton Calendar</p>
+    <a class="mb-2 underline" href="https://calendar.proton.me/"
+      >Switch to Proton Calendar!
+    </a>
+
+    <p class="mb-2">Difficulty rating: 🌶️/5</p>
+  </div>
+</div>
+
+<Footer />
diff --git a/src/pages/projects/alternatives.astro b/src/pages/projects/alternatives.astro
deleted file mode 100644
index 759390d..0000000
--- a/src/pages/projects/alternatives.astro
+++ /dev/null
@@ -1,99 +0,0 @@
----
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Layout from "../../layouts/Layout.astro";
-import "../../styles/globals.css";
-
-
-import Card from "../../components/Card.astro";
-
----
-
-<Layout>
-  <main class="flex min-h-screen flex-col justify-between">
-    <div>
-      <Navbar client:load activePage="OurProjects" />
-      <div class="pl-4 pr-4">
-        <h1 class="pb-4 pt-4 text-3xl font-semibold">Big Tech Alternatives</h1>
-        <p class="mb-4">Explore open-source and privacy-focused alternatives to popular big tech software.</p>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <Card
-            title="Browsers"
-            bigTech="Chrome (Google)"
-            alternatives={[
-              { name: 'Firefox', description: 'Privacy-focused browser.', url: 'https://www.mozilla.org/firefox' },
-            ]}
-            bgClass="bg-blue-50"
-          />
-
-          <Card
-            title="Cloud Storage"
-            bigTech="Google Drive"
-            alternatives={[
-              { name: 'Nextcloud', description: 'Self-hosted file sync and share.', url: 'https://nextcloud.com' }
-            ]}
-            bgClass="bg-indigo-50"
-          />
-
-          <Card
-            title="Email"
-            bigTech="Gmail (Google)"
-            alternatives={[
-              { name: 'ProtonMail', description: 'Encrypted email.', url: 'https://protonmail.com' },
-            ]}
-            bgClass="bg-yellow-50"
-          />
-
-          <Card
-            title="Maps"
-            bigTech="Google Maps"
-            alternatives={[
-              { name: 'OpenStreetMap', description: 'Community-driven maps.', url: 'https://www.openstreetmap.org' }
-            ]}
-            bgClass="bg-teal-50"
-          />
-
-          <Card
-            title="Messaging"
-            bigTech="WhatsApp (Meta), Slack"
-            alternatives={[
-              { name: 'Signal', description: 'Encrypted messaging (alternative to WhatsApp).', url: 'https://signal.org' },
-              { name: 'Element', description: 'Matrix-based chat (alternative to Slack).', url: 'https://element.io' }
-            ]}
-            bgClass="bg-red-50"
-          />
-
-          <Card
-            title="Search Engines"
-            bigTech="Google Search"
-            alternatives={[
-              { name: 'DuckDuckGo', description: 'Privacy-protecting search.', url: 'https://duckduckgo.com' },
-            ]}
-            bgClass="bg-green-50"
-          />
-
-          <Card
-            title="Social Media"
-            bigTech="Twitter (X), Facebook (Meta)"
-            alternatives={[
-              { name: 'Mastodon', description: 'Decentralized social network (alternative to Twitter).', url: 'https://joinmastodon.org' },
-            ]}
-            bgClass="bg-purple-50"
-          />
-
-          <Card
-            title="Video Platforms"
-            bigTech="YouTube (Google)"
-            alternatives={[
-              { name: 'PeerTube', description: 'Decentralized video hosting.', url: 'https://joinpeertube.org' },
-            ]}
-            bgClass="bg-pink-50"
-          />
-
-        </div>
-      </div>
-    </div>
-    <Footer />
-  </main>
-</Layout>
diff --git a/src/pages/projects/bookclub.astro b/src/pages/projects/bookclub.astro
index 3f857c3..1f3ca1c 100644
--- a/src/pages/projects/bookclub.astro
+++ b/src/pages/projects/bookclub.astro
@@ -6,9 +6,12 @@ import "../../styles/globals.css";
 ---
 
 <Layout>
-  <main class="flex min-h-screen flex-col justify-between">
+  <main class="flex min-h-screen flex-col justify-between px-4">
     <div>
-      <Navbar client:load activePage="OurProjects" />
+      <section class="sticky top-0">
+        <Navbar client:load activePage="WhatWereUpTo" />
+      </section>
+
       <div class="px-4">
         <h1 class="pb-4 pt-4 text-3xl font-semibold">Book Club</h1>
         <p class="mb-4">
@@ -23,10 +26,11 @@ import "../../styles/globals.css";
           <div class="rounded-lg border p-6">
             <h2 class="mb-4 text-2xl font-semibold">Current Book</h2>
             <div>
-              Race After Technology - Ruha Benjamin (see <a
+              Teaching Community Technology Handbook - Detroit Community Technology
+              Project (read for free <a
                 class="underline"
-                href="https://www.dropbox.com/scl/fi/jnzvtiry7jn3xrts2n703/RAT-Discussion-Guide.pdf?rlkey=pq6ovaeydhcm8yi2u7lzzmiuj&e=2&dl=0"
-                >discussion guide
+                href="https://detroitcommunitytech.org/?q=teachcommtech"
+                >here
               </a>)
             </div>
           </div>
diff --git a/src/pages/projects/calendar.astro b/src/pages/projects/calendar.astro
deleted file mode 100644
index 0831127..0000000
--- a/src/pages/projects/calendar.astro
+++ /dev/null
@@ -1,21 +0,0 @@
----
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Layout from "../../layouts/Layout.astro";
-import "../../styles/globals.css";
----
-
-<Layout>
-  <main class="flex min-h-screen flex-col justify-between">
-    <div>
-      <Navbar client:load activePage="Calendar" />
-      <div class="pl-4 pr-4">
-        <h1 class="pb-4 pt-4 text-3xl font-semibold">Calendar</h1>
-        <div class="flex flex-col gap-4">
-          <p class="mb-4">See what we're doing next!</p>
-        </div>
-      </div>
-    </div>
-    <Footer />
-  </main>
-</Layout>
diff --git a/src/pages/projects/pihole.astro b/src/pages/projects/pihole.astro
deleted file mode 100644
index c10da01..0000000
--- a/src/pages/projects/pihole.astro
+++ /dev/null
@@ -1,19 +0,0 @@
----
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Layout from "../../layouts/Layout.astro";
-import "../../styles/globals.css";
----
-
-<Layout>
-  <main class="flex min-h-screen flex-col justify-between">
-    <div>
-      <Navbar />
-      <div class="pl-4 pr-4">
-        <h1 class="text-3xl font-semibold">Pihole</h1>
-
-      </div>
-    </div>
-    <Footer />
-  </main>
-</Layout>
diff --git a/src/pages/projects/zines.astro b/src/pages/projects/zines.astro
index f766b28..62ca82f 100644
--- a/src/pages/projects/zines.astro
+++ b/src/pages/projects/zines.astro
@@ -7,13 +7,16 @@ import "../../styles/globals.css";
 ---
 
 <Layout>
-  <main class="flex min-h-screen flex-col justify-between">
+  <main class="px-4 flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar client:load activePage="OurProjects" />
+      <section class="sticky top-0">
+        <Navbar client:load activePage="WhatWereUpTo" />
+      </section>
       <div class="px-4">
         <h1 class="pb-4 pt-4 text-3xl font-semibold">Zines</h1>
         <p class="mb-6">
-          We create and share zines about technology, power, and resistance. You are welcome to download the printable version to fold and distribute!
+          We create and share zines about technology, power, and resistance. You
+          are welcome to download the printable version to fold and distribute!
         </p>
 
         <ZineGrid client:load />
diff --git a/src/pages/projects/zines/[id].astro b/src/pages/projects/zines/[id].astro
index 7c427e1..4498475 100644
--- a/src/pages/projects/zines/[id].astro
+++ b/src/pages/projects/zines/[id].astro
@@ -23,9 +23,12 @@ const { zine } = Astro.props;
 ---
 
 <Layout>
-  <main class="flex min-h-screen flex-col justify-between">
+  <main class="px-4 flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar client:load activePage="OurProjects" />
+      <section class="sticky top-0">
+        <Navbar client:load activePage="OurProjects" />
+      </section>
+
       <div class="px-4">
         <a
           href="/projects/zines"
@@ -36,9 +39,13 @@ const { zine } = Astro.props;
 
         <div class="mx-auto max-w-3xl">
           <h1 class="text-2xl font-semibold">{zine.title}</h1>
-          {zine.description && (
-            <p class="mt-1 text-sm text-muted-foreground">{zine.description}</p>
-          )}
+          {
+            zine.description && (
+              <p class="mt-1 text-sm text-muted-foreground">
+                {zine.description}
+              </p>
+            )
+          }
 
           <div class="mt-4 flex gap-2">
             <ShareZineButton client:load zineId={zine.id} />
@@ -53,14 +60,16 @@ const { zine } = Astro.props;
           </div>
 
           <div class="flex flex-col gap-4 py-6">
-            {zine.pages.map((page, i) => (
-              <img
-                src={page}
-                alt={`Page ${i + 1} of ${zine.title}`}
-                loading={i === 0 ? "eager" : "lazy"}
-                class="w-full h-auto rounded shadow-sm bg-white"
-              />
-            ))}
+            {
+              zine.pages.map((page, i) => (
+                <img
+                  src={page}
+                  alt={`Page ${i + 1} of ${zine.title}`}
+                  loading={i === 0 ? "eager" : "lazy"}
+                  class="h-auto w-full rounded bg-white shadow-sm"
+                />
+              ))
+            }
           </div>
         </div>
       </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 5091561..6331c83 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -29,6 +30,7 @@
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
   }
+
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
@@ -56,10 +58,12 @@
     --chart-5: 340 75% 55%;
   }
 }
+
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
@@ -70,8 +74,20 @@
   src: url("/fonts/Geist[wght].ttf") format("truetype");
   font-display: swap;
 }
+
 @font-face {
   font-family: "GeistMono";
   src: url("/fonts/GeistMono[wght].ttf") format("truetype");
   font-display: swap;
 }
+
+.hamburger {
+  cursor: pointer;
+}
+
+.hamburger .line {
+  display: block;
+  width: 36px;
+  height: 2px;
+  margin-bottom: 8px;
+}
\ No newline at end of file