diff --git a/public/assets/book-club.png b/public/assets/book-club.png
new file mode 100644
index 0000000..700d350
Binary files /dev/null and b/public/assets/book-club.png differ
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 6c88410..07df1c6 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -50,7 +50,7 @@ export default function Navbar({ activePage = "" }: NavbarProps) {
               title="computer icons"
             >
               <img
-                src="../public/assets/computer.png"
+                src="/assets/computer.png"
                 alt="computer icon"
                 width="30"
                 height="30"
@@ -62,7 +62,7 @@ export default function Navbar({ activePage = "" }: NavbarProps) {
               title="people icons"
             >
               <img
-                src="../public/assets/people.png"
+                src="/assets/people.png"
                 alt="people icon"
                 width="30"
                 height="30"
diff --git a/src/pages/BookClub.astro b/src/pages/BookClub.astro
new file mode 100644
index 0000000..466f898
--- /dev/null
+++ b/src/pages/BookClub.astro
@@ -0,0 +1,35 @@
+---
+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="BookClub" />
+      <div class="pl-4 pr-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Book Club</h1>
+        <div class="flex flex-col gap-4">
+          <p class="mb-4">
+            Join our book club where we read and discuss books about technology, power, and resistance.
+          </p>
+          <div class="flex flex-col gap-8">
+            <!-- Book entries will go here -->
+            <div class="border p-4 rounded-lg">
+              <h2 class="text-xl font-semibold mb-2">Current Book</h2>
+              <p class="italic">Coming soon...</p>
+            </div>
+            
+            <div class="border p-4 rounded-lg">
+              <h2 class="text-xl font-semibold mb-2">Past Books</h2>
+              <p class="italic">Coming soon...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout> 
\ No newline at end of file
diff --git a/src/pages/WhatWereWorkingOn.astro b/src/pages/WhatWereWorkingOn.astro
index 00ba05a..076dc72 100644
--- a/src/pages/WhatWereWorkingOn.astro
+++ b/src/pages/WhatWereWorkingOn.astro
@@ -14,7 +14,7 @@ import "../styles/globals.css";
         <div class="flex flex-row gap-8">
           <div class="justify-items-center">
             <img
-              src="../public/assets/pihole.jpeg"
+              src="/assets/pihole.jpeg"
               alt="pihole parts"
               width="250"
               class="border pb-4"
@@ -27,7 +27,7 @@ import "../styles/globals.css";
 
           <div class="justify-items-center">
             <img
-              src="../public/assets/this-website.png"
+              src="/assets/this-website.png"
               alt="screenshot of this website including screenshot of this website including screenshot of this website..."
               width="250"
               class="border pb-4"
@@ -35,6 +35,18 @@ import "../styles/globals.css";
 
             <a href="/" class="underline decoration-solid">This website!</a>
           </div>
+
+          <div class="justify-items-center">
+            <img
+              src="/assets/book-club.png"
+              alt="stack of books"
+              width="250"
+              class="border pb-4"
+            />
+
+            <a href="/WhatWereWorkingOnPages/BookClub/" class="underline decoration-solid">Book Club</a>
+          </div>
+
         </div>
       </div>
     </div>
diff --git a/src/pages/WhatWereWorkingOnPages/BookClub.astro b/src/pages/WhatWereWorkingOnPages/BookClub.astro
new file mode 100644
index 0000000..68822d3
--- /dev/null
+++ b/src/pages/WhatWereWorkingOnPages/BookClub.astro
@@ -0,0 +1,42 @@
+---
+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="WhatWereWorkingOn" />
+      <div class="pl-4 pr-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Book Club</h1>
+        
+        <div class="flex flex-col gap-8">
+          <div class="border p-6 rounded-lg">
+            <h2 class="text-2xl font-semibold mb-4">Current Book</h2>
+            <div class="flex flex-col gap-4">
+              <p class="italic">Common Circuits</p>
+            </div>
+          </div>
+
+          <div class="border p-6 rounded-lg">
+            <h2 class="text-2xl font-semibold mb-4">Past Books</h2>
+            <div class="flex flex-col gap-4">
+              <ul class="list-disc pl-6">
+                <li>Internet for the People</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="border p-6 rounded-lg">
+            <a href="/" class="text-blue-500 hover:text-blue-700">
+              <h2 class="text-2xl font-semibold mb-4">Join Us</h2>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout> 
\ No newline at end of file