diff --git a/package-lock.json b/package-lock.json
index a3642697..6a677547 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "astro": "^4.11.1",
         "axios": "^1.7.7",
         "fs": "^0.0.1-security",
+        "js-yaml": "^4.1.0",
         "katex": "^0.16.10",
         "mathjax": "^3.2.2",
         "mathjax-full": "^3.2.2",
@@ -7424,6 +7425,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
diff --git a/package.json b/package.json
index 6922cfb9..70be73e0 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "astro": "^4.11.1",
     "axios": "^1.7.7",
     "fs": "^0.0.1-security",
+    "js-yaml": "^4.1.0",
     "katex": "^0.16.10",
     "mathjax": "^3.2.2",
     "mathjax-full": "^3.2.2",
diff --git a/src/components/Sidebar/Sidebar.astro b/src/components/Sidebar/Sidebar.astro
index 9091a9c4..a89b8dca 100644
--- a/src/components/Sidebar/Sidebar.astro
+++ b/src/components/Sidebar/Sidebar.astro
@@ -28,7 +28,8 @@ const sections = [
     icon: "mdi mdi-video",
     title: "Lectures",
     disabled: false,
-    link: "https://www.youtube.com/playlist?list=PLY7TEz3ZRQHTnY56q2uJtdXg-bl-c0sDk",
+    // link: "https://www.youtube.com/playlist?list=PLY7TEz3ZRQHTnY56q2uJtdXg-bl-c0sDk",
+    link: "/lectures",
   },
   { icon: "mdi mdi-creation", title: "Sandbox", disabled: true },
   // { icon: "mdi mdi-beaker", title: "Experiments", disabled: true },
diff --git a/src/data/lectures.yml b/src/data/lectures.yml
new file mode 100644
index 00000000..f785a7db
--- /dev/null
+++ b/src/data/lectures.yml
@@ -0,0 +1,3 @@
+- course: COMP 2804
+  title: Fall 2020 Lecture
+  link: https://www.youtube.com/playlist?list=PLY7TEz3ZRQHTnY56q2uJtdXg-bl-c0sDk
diff --git a/src/pages/lectures.astro b/src/pages/lectures.astro
new file mode 100644
index 00000000..8edda97a
--- /dev/null
+++ b/src/pages/lectures.astro
@@ -0,0 +1,57 @@
+---
+import Back from "@components/Back/Back.astro";
+import { default as Layout } from "src/layouts/Content/Content.astro";
+import RowCard from "@components/RowCard/RowCard.astro";
+import fs from "fs";
+import path from "path";
+import yaml from "js-yaml";
+
+const filePath = path.resolve("src/data/lectures.yml");
+const file = fs.readFileSync(filePath, "utf8");
+const lectures = yaml.load(file);
+
+const grouped = {};
+for (const lec of lectures) {
+  if (!grouped[lec.course]) grouped[lec.course] = [];
+  grouped[lec.course].push(lec);
+}
+---
+
+<Layout title="Lectures">
+  <div class="Question__bar">
+    <Back href="/" label="Home" />
+  </div>
+
+  <h1>📚 Lectures</h1>
+  <p>Playlists of recorded lecture videos categorized by course.</p>
+
+  <div style="margin-top:2.5rem"></div>
+
+  {
+    Object.entries(grouped).map(([course, list]) => (
+      <>
+        <h2>{course}</h2>
+        <div class="Items">
+          {list.map((lec) => (
+            <a href={lec.link} target="_blank">
+              <RowCard title={lec.title} icon="mdi mdi-video" />
+            </a>
+          ))}
+        </div>
+        <div style="margin-top:2.5rem" />
+      </>
+    ))
+  }
+</Layout>
+
+<style>
+  p {
+    color: gray;
+  }
+
+  .Items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+</style>