diff --git a/src/components/Back/Back.scss b/src/components/Back/Back.scss
index 892426d0..2937feaf 100644
--- a/src/components/Back/Back.scss
+++ b/src/components/Back/Back.scss
@@ -1,7 +1,7 @@
 .Back {
   display: flex;
   align-items: center;
-  color: #3a3a3a;
+  color: inherit;
   transition: all 0.15s;
   font-weight: 600;
   font-size: 0.85rem;
@@ -15,6 +15,6 @@
   }
 
   &:hover {
-    background-color: #f0f0f0;
+    background-color: inherit;
   }
 }
diff --git a/src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.scss b/src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.scss
index 9e44a39e..839e05fd 100644
--- a/src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.scss
+++ b/src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.scss
@@ -6,7 +6,7 @@
   border-style: solid;
   border-radius: 0.6rem;
   border-width: 0.1rem;
-  border-color: #c0c0c07f;
+  border-color: #4e4e4e7f;
   margin: 1rem 0rem;
   transition: all 0.15s;
 
@@ -16,16 +16,16 @@
 
   &:hover {
     &[data-interactive="true"] {
-      background-color: #ededed;
-      &[data-selected="false"] {
-        cursor: pointer;
-      }
+      background-color: #474747;
+    }
+    &[data-selected="false"] {
+      cursor: pointer;
     }
   }
 
   &[data-revealed="false"] {
     &[data-selected="true"] {
-      background-color: #eaeaea;
+      background-color: #474747;
     }
   }
 
diff --git a/src/components/Page/Page.astro b/src/components/Page/Page.astro
index b9cfe89a..3fbcfd72 100644
--- a/src/components/Page/Page.astro
+++ b/src/components/Page/Page.astro
@@ -1,7 +1,43 @@
 ---
 import "./Page.scss";
+import ThemeIcon from "../ThemeIcon/ThemeIcon.astro";
 ---
 
 <div class="Page">
+  <ThemeIcon />
   <slot />
 </div>
+
+<script type="module">
+  document.addEventListener("DOMContentLoaded", () => {
+    const toggleButton = document.getElementById("theme-toggle");
+
+    // Check if dark mode is already set in localStorage
+    const isDarkMode = localStorage.getItem("theme") === "dark";
+    if (isDarkMode) {
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.add("light-mode");
+    }
+
+    // Update icon based on the theme
+    const updateIcon = () => {
+      const isDarkMode = document.body.classList.contains("dark-mode");
+      document.querySelector(".sun").style.fill = isDarkMode
+        ? "transparent"
+        : "black";
+      document.querySelector(".moon").style.fill = isDarkMode
+        ? "white"
+        : "transparent";
+    };
+
+    updateIcon();
+
+    toggleButton.addEventListener("click", () => {
+      const isDarkMode = document.body.classList.toggle("dark-mode");
+      document.body.classList.toggle("light-mode", !isDarkMode);
+      localStorage.setItem("theme", isDarkMode ? "dark" : "light");
+      updateIcon();
+    });
+  });
+</script>
diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
index ce0bb4a6..a81264e9 100644
--- a/src/components/Page/Page.scss
+++ b/src/components/Page/Page.scss
@@ -10,3 +10,21 @@ $layout-width-inner-spacing-base: 1rem;
       $layout-width-inner-spacing-base
   );
 }
+
+#themeToggle {
+  border: 0;
+  background: none;
+}
+.sun {
+  fill: black;
+}
+.moon {
+  fill: transparent;
+}
+
+:global(.dark) .sun {
+  fill: transparent;
+}
+:global(.dark) .moon {
+  fill: white;
+}
diff --git a/src/components/Pagination/Pagination.astro b/src/components/Pagination/Pagination.astro
new file mode 100644
index 00000000..e92e0277
--- /dev/null
+++ b/src/components/Pagination/Pagination.astro
@@ -0,0 +1,94 @@
+---
+import { Fragment } from "astro/jsx-runtime";
+import "./Pagination.scss";
+const { pagination } = Astro.props;
+
+const adjacentLinks = 2;
+const maxLinks = adjacentLinks * 2 + 1;
+const lowerLimit = adjacentLinks + 1;
+const upperLimit = pagination.totalPages - adjacentLinks;
+---
+
+{
+  pagination.totalPages > 1 && (
+    <ul class="pagination">
+      {/* First page */}
+      {pagination.pageNumber !== 1 && (
+        <li class="pagination__item pagination__item--first">
+          <a class="pagination__link pagination__link--first" href={1}>
+            ««
+          </a>
+        </li>
+      )}
+
+      {/* Previous page */}
+      {pagination.hasPrev && (
+        <li class="pagination__item pagination__item--previous">
+          <a
+            href={pagination.prev.url}
+            class="pagination__link pagination__link--previous"
+          >
+            «
+          </a>
+        </li>
+      )}
+
+      {/* Page numbers */}
+      {pagination.pagers.map((page) => {
+        return (
+          <Fragment>
+            {(() => {
+              const isInRange =
+                pagination.totalPages > maxLinks
+                  ? pagination.pageNumber < lowerLimit + 1
+                    ? page.pageNumber < maxLinks + 1
+                    : pagination.pageNumber >= upperLimit
+                      ? page.pageNumber > pagination.totalPages - maxLinks
+                      : page.pageNumber >=
+                          pagination.pageNumber - adjacentLinks &&
+                        page.pageNumber <
+                          pagination.pageNumber + adjacentLinks + 1
+                  : true;
+
+              return (
+                isInRange && (
+                  <li
+                    class={`pagination__item${page.pageNumber === pagination.pageNumber ? " pagination__item--current" : ""}`}
+                  >
+                    <a href={page.url} class="pagination__link">
+                      {page.pageNumber}
+                    </a>
+                  </li>
+                )
+              );
+            })()}
+          </Fragment>
+        );
+      })}
+
+      {/* Next page */}
+      {pagination.hasNext && (
+        <li class="pagination__item pagination__item--next">
+          <a
+            href={pagination.next.url}
+            class="pagination__link pagination__link--next"
+          >
+            »
+          </a>
+        </li>
+      )}
+
+      {/* Last page */}
+      {pagination.pageNumber !== pagination.totalPages && (
+        <li class="pagination__item pagination__item--last">
+          <a
+            class="pagination__link pagination__link--last"
+            href={pagination.last.url}
+          >
+            »»
+          </a>
+        </li>
+      )}
+    </ul>
+  )
+}
diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss
new file mode 100644
index 00000000..9e667c11
--- /dev/null
+++ b/src/components/Pagination/Pagination.scss
@@ -0,0 +1,22 @@
+.pagination {
+  text-align: center;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+  max-width: 10rem;
+  margin: auto;
+  padding: 0;
+
+  li {
+    display: inline;
+    text-align: center;
+  }
+
+  a {
+    text-decoration: auto;
+  }
+
+  .pagination__item--current {
+    color: black;
+  }
+}
diff --git a/src/components/RowCard/RowCard.scss b/src/components/RowCard/RowCard.scss
index e2cdf107..e5b052fa 100644
--- a/src/components/RowCard/RowCard.scss
+++ b/src/components/RowCard/RowCard.scss
@@ -3,10 +3,10 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  color: black;
+  color: inherit;
   border-radius: 0.6rem;
   border-width: 0.1rem;
-  border-color: #f1f1f1;
+  border-color: inherit;
   border-style: solid;
   padding: 0.2rem 0.6rem;
   transition: all 0.2s;
@@ -15,7 +15,7 @@
   cursor: grab;
 
   &:hover {
-    background-color: rgba(248, 248, 248, 0.753);
+    background-color: rgba(107, 107, 107, 0.753);
     .RowCard__icon {
       color: #e30614;
     }
@@ -28,7 +28,7 @@
   }
 
   &__icon {
-    background-color: #f2f2f2;
+    background-color: inherit;
     padding: 0.3rem 0.6rem;
     border-radius: 0.5rem;
     font-size: 1.4rem;
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index e0c32a97..7805bb6d 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -4,7 +4,7 @@
   width: 14rem;
   height: 100vh;
   overflow: hidden;
-  background-color: #fafafa;
+  background-color: inherit;
   border-right: 0.1rem solid #f3f3f3;
   display: flex;
   padding: 0.5rem;
@@ -26,7 +26,7 @@
     padding-top: -0.3rem;
     font-size: 0.9rem;
     font-weight: 600;
-    color: #000000;
+    color: inherit;
   }
 
   &__sections {
@@ -48,7 +48,7 @@
     &--enabled {
       cursor: pointer;
       &:hover {
-        background-color: #f0f0f0;
+        background-color: inherit;
         .Sidebar__item__icon {
           color: #e30614;
         }
@@ -61,19 +61,19 @@
     }
 
     &--active {
-      background-color: #f3f3f3;
+      background-color: inherit;
     }
 
     &__icon {
       font-size: 1.5rem;
-      color: #000000;
+      color: inherit;
     }
 
     &__title {
       padding-left: 0.75rem;
       font-size: 1rem;
       font-weight: 500;
-      color: #000000;
+      color: inherit;
     }
   }
 
@@ -97,38 +97,9 @@
   width: 100vw;
   z-index: 1;
   position: fixed;
-  background-color: #ffffff;
+  background-color: inherit;
   bottom: 0;
   justify-content: center;
   border-top-width: 0.1rem;
   border-color: #f1f1f1;
-  border-style: solid;
-  @media (max-width: 768px) {
-    display: flex;
-  }
-
-  &__inner {
-    display: flex;
-    justify-content: space-between;
-    min-width: 14rem;
-    padding: 0.5rem;
-    gap: 1rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .Sidebar__item {
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.3rem;
-    min-width: 3rem;
-  }
-  .Sidebar__item__icon {
-    font-size: 2rem;
-  }
-  .Sidebar__item__title {
-    font-size: 0.6rem;
-    padding-left: 0rem;
-    text-align: center;
-  }
 }
diff --git a/src/components/Them b/src/components/Them
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/ThemeIcon/ThemeIcon.astro b/src/components/ThemeIcon/ThemeIcon.astro
new file mode 100644
index 00000000..4646bcd9
--- /dev/null
+++ b/src/components/ThemeIcon/ThemeIcon.astro
@@ -0,0 +1,18 @@
+---
+import "./ThemeIcon.scss";
+---
+
+<div id="theme-toggle">
+  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      class="sun"
+      fill-rule="evenodd"
+      d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+    ></path>
+    <path
+      class="moon"
+      fill-rule="evenodd"
+      d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+    ></path>
+  </svg>
+</div>
diff --git a/src/components/ThemeIcon/ThemeIcon.scss b/src/components/ThemeIcon/ThemeIcon.scss
new file mode 100644
index 00000000..2cbca430
--- /dev/null
+++ b/src/components/ThemeIcon/ThemeIcon.scss
@@ -0,0 +1,17 @@
+#themeToggle {
+  border: 0;
+  background: none;
+}
+.sun {
+  fill: black;
+}
+.moon {
+  fill: transparent;
+}
+
+:global(.light-mode) .sun {
+  fill: transparent;
+}
+:global(.dark-mode) .moon {
+  fill: white;
+}
diff --git a/src/content/questions/comp2804/2019-fall-final/1/index.md b/src/content/questions/comp2804/2019-fall-final/1/index.md
index 3e9b982e..05ac20d4 100644
--- a/src/content/questions/comp2804/2019-fall-final/1/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/1/index.md
@@ -8,4 +8,7 @@ solution: comp2804/2019-fall-final/1/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-counting-bitstrings-of-length-n-(3.1.1)
+  - comp2804-permutations-and-binomial-coefficients-(3.6.2)
+  - comp2804-the-product-rule-(3.1)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/10/index.md b/src/content/questions/comp2804/2019-fall-final/10/index.md
index 77d7758a..7f983f34 100644
--- a/src/content/questions/comp2804/2019-fall-final/10/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/10/index.md
@@ -8,4 +8,5 @@ solution: comp2804/2019-fall-final/10/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-a-recursively-defined-set-(4.3)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/11/index.md b/src/content/questions/comp2804/2019-fall-final/11/index.md
index 9fac2365..fa21788a 100644
--- a/src/content/questions/comp2804/2019-fall-final/11/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/11/index.md
@@ -8,4 +8,8 @@ solution: comp2804/2019-fall-final/11/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-permutations-and-binomial-coefficients-(3.6.2)
+  - comp2804-the-product-rule-(3.1)
+  - comp2804-basic-rules-of-probability-(5.3)
+  - comp2804-independent-events-(5.11)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/2/index.md b/src/content/questions/comp2804/2019-fall-final/2/index.md
index 0e369b0f..6705695a 100644
--- a/src/content/questions/comp2804/2019-fall-final/2/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/2/index.md
@@ -8,4 +8,7 @@ solution: comp2804/2019-fall-final/2/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-counting-bitstrings-of-length-n-(3.1.1)
+  - comp2804-permutations-and-binomial-coefficients-(3.6.2)
+  - comp2804-the-product-rule-(3.1)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/21/index.md b/src/content/questions/comp2804/2019-fall-final/21/index.md
index 6a045330..831adc81 100644
--- a/src/content/questions/comp2804/2019-fall-final/21/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/21/index.md
@@ -8,4 +8,6 @@ solution: comp2804/2019-fall-final/21/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-independent-events-(5.11)
+  - comp2804-indicator-random-variables-(6.8)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/22/index.md b/src/content/questions/comp2804/2019-fall-final/22/index.md
index ca461bd2..6aa4cfcb 100644
--- a/src/content/questions/comp2804/2019-fall-final/22/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/22/index.md
@@ -8,4 +8,6 @@ solution: comp2804/2019-fall-final/22/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-determining-the-expected-value-(6.6.1)
+  - comp2804-indicator-random-variables-(6.8)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/24/index.md b/src/content/questions/comp2804/2019-fall-final/24/index.md
index ce0f2a90..27755aab 100644
--- a/src/content/questions/comp2804/2019-fall-final/24/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/24/index.md
@@ -8,4 +8,6 @@ solution: comp2804/2019-fall-final/24/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-permutations-and-binomial-coefficients-(3.6.2)
+  - comp2804-indicator-random-variables-(6.8)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/3/index.md b/src/content/questions/comp2804/2019-fall-final/3/index.md
index dedc7ade..053310b3 100644
--- a/src/content/questions/comp2804/2019-fall-final/3/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/3/index.md
@@ -8,4 +8,8 @@ solution: comp2804/2019-fall-final/3/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-counting-bitstrings-of-length-n-(3.1.1)
+  - comp2804-permutations-and-binomial-coefficients-(3.6.2)
+  - comp2804-the-product-rule-(3.1)
+  - comp2804-the-principle-of-inclusion-and-exclusion-(3.5)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/4/index.md b/src/content/questions/comp2804/2019-fall-final/4/index.md
index 00b23abd..0fedd426 100644
--- a/src/content/questions/comp2804/2019-fall-final/4/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/4/index.md
@@ -8,4 +8,8 @@ solution: comp2804/2019-fall-final/4/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-counting-bitstrings-of-length-n-(3.1.1)
+  - comp2804-permutations-and-binomial-coefficients-(3.6.2)
+  - comp2804-the-product-rule-(3.1)
+  - comp2804-the-principle-of-inclusion-and-exclusion-(3.5)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/5/index.md b/src/content/questions/comp2804/2019-fall-final/5/index.md
index fbe28d57..c5c8412f 100644
--- a/src/content/questions/comp2804/2019-fall-final/5/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/5/index.md
@@ -8,4 +8,8 @@ solution: comp2804/2019-fall-final/5/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-permutations-and-binomial-coefficients-(3.6.2)
+  - comp2804-the-product-rule-(3.1)
+  - comp2804-the-bijection-rule-(3.2.1)
+  - comp2804-the-complement-rule-(3.3)
 ---
diff --git a/src/content/questions/comp2804/2019-fall-final/9/index.md b/src/content/questions/comp2804/2019-fall-final/9/index.md
index db8e1fe1..4c434601 100644
--- a/src/content/questions/comp2804/2019-fall-final/9/index.md
+++ b/src/content/questions/comp2804/2019-fall-final/9/index.md
@@ -8,4 +8,5 @@ solution: comp2804/2019-fall-final/9/solution.md
 tags:
   - comp2804
   - comp2804-final
+  - comp2804-a-recursively-defined-set-(4.3)
 ---
diff --git a/src/layouts/Base/Base.scss b/src/layouts/Base/Base.scss
index f0729ddb..b321b259 100644
--- a/src/layouts/Base/Base.scss
+++ b/src/layouts/Base/Base.scss
@@ -5,25 +5,29 @@ body {
 
 a {
   text-decoration: none;
-  color: #e30614;
+  color: inherit;
 }
 
 :root {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 
-  /* color-scheme: light dark; */
-  // background-color: #1f2023; // var(--color-background);
-  // color: #1f2023; //var(--color-foreground);
+.light-mode {
+  --color: #000000;
+  --color-background: #ffffff;
+  --color-foreground: #000000;
+  --color-accent: #5c6ac4;
+}
 
-  // --color-background: #ffffff;
-  // --color-foreground: #1f2023;
-  // --color-accent: #5c6ac4;
+.dark-mode {
+  --color: #ffffff;
+  --color-background: #000000;
+  --color-foreground: #ffffff;
+  --color-accent: #5c6ac4;
 }
 
-// @media (prefers-color-scheme: light) {
-//   :root {
-//     --color-background: #1f2023;
-//     --color-foreground: #ffffff;
-//   }
-// }
+body {
+  background-color: var(--color-background);
+  color: var(--color);
+}
diff --git a/src/pages/evaluations.astro b/src/pages/evaluations.astro
index 1a21c304..eaba5cff 100644
--- a/src/pages/evaluations.astro
+++ b/src/pages/evaluations.astro
@@ -3,6 +3,7 @@ import Back from "@components/Back/Back.astro";
 import RowCard from "@components/RowCard/RowCard.astro";
 import { getCollection } from "astro:content";
 import { default as Layout } from "src/layouts/Content/Content.astro";
+import Pagination from "@components/Pagination/Pagination.astro";
 const evaluations = await getCollection("evaluations");
 
 const courseCodes = {
@@ -11,7 +12,10 @@ const courseCodes = {
 
 const comp2804Evaluations = evaluations
   .filter((evaluation) => evaluation.data.course === "comp2804")
-  .sort((a, b) => Number(b.data.created_at) - Number(a.data.created_at));
+  .sort((a, b) => Number(b.data.created_at) - Number(a.data.created_at))
+  .slice(0, 8);
+
+const numberOfPages = Math.ceil(comp2804Evaluations.length / 8);
 ---
 
 <Layout title="Evaluations">
@@ -45,6 +49,22 @@ const comp2804Evaluations = evaluations
       ))
     }
   </div>
+  <Pagination
+    pagination={{
+      pageNumber: 1,
+      totalPages: numberOfPages,
+      hasPrev: false,
+      prev: { url: "" },
+      hasNext: numberOfPages > 1,
+      next: { url: "/evaluations/2" },
+      first: { url: "/evaluations/1" },
+      last: { url: `/evaluations/${numberOfPages}` },
+      pagers: Array.from({ length: numberOfPages }, (_, i) => ({
+        pageNumber: i + 1,
+        url: `/evaluations/${i + 1}`,
+      })),
+    }}
+  />
 </Layout>
 
 <style>
diff --git a/src/pages/evaluations/[page].astro b/src/pages/evaluations/[page].astro
new file mode 100644
index 00000000..82b4c8ac
--- /dev/null
+++ b/src/pages/evaluations/[page].astro
@@ -0,0 +1,95 @@
+---
+import Back from "@components/Back/Back.astro";
+import RowCard from "@components/RowCard/RowCard.astro";
+import { getCollection } from "astro:content";
+import { default as Layout } from "src/layouts/Content/Content.astro";
+import Pagination from "@components/Pagination/Pagination.astro";
+const evaluations = await getCollection("evaluations");
+
+const courseCodes = {
+  comp2804: "COMP 2804",
+};
+
+const comp2804Evaluations = evaluations
+  .filter((evaluation) => evaluation.data.course === "comp2804")
+  .sort((a, b) => Number(b.data.created_at) - Number(a.data.created_at));
+
+export async function getStaticPaths({ paginate }) {
+  const evaluations = await getCollection("evaluations");
+
+  const comp2804Evaluations = evaluations
+    .filter((evaluation) => evaluation.data.course === "comp2804")
+    .sort((a, b) => Number(b.data.created_at) - Number(a.data.created_at));
+
+  // turn the above into a list
+  const evaluationPages = comp2804Evaluations.map((evaluation) => ({
+    evaluation,
+  }));
+
+  // Generate pages from our array of evaluations, with 5 to a page
+  return paginate(evaluationPages, { pageSize: 8 });
+}
+// All paginated data is passed on the "page" prop
+const { page } = Astro.props;
+---
+
+<Layout title="Evaluations">
+  <div class="Question__bar">
+    <div><Back href={`/`} label="Home" /></div>
+  </div>
+  <h1>Evaluations</h1>
+  <p>
+    Practice previous evaluations from Carleton University's Computer Science
+    courses.
+  </p>
+  <div style="margin-top:2.5rem"></div>
+  <!-- <h2>COMP 2804: Discrete Structures II</h2>
+  <p>
+    Topics include: counting, sequences and sums, discrete probability, basic
+    statistics, recurrence relations, randomized algorithms. Material is
+    illustrated through examples from computing.
+  </p>
+  <br /> -->
+  <div class="Evaluations__list" style="margin-bottom:0.75rem">
+    {
+      page.data.map(({ evaluation }) => (
+        <div>
+          <a href={`/evaluations/${evaluation.slug}`}>
+            <RowCard
+              title={`${courseCodes.comp2804}: ${evaluation.data.title}`}
+              icon="mdi mdi-book-open-variant"
+            />
+          </a>
+        </div>
+      ))
+    }
+  </div>
+  <Pagination
+    pagination={{
+      pageNumber: page.currentPage,
+      totalPages: page.lastPage,
+      hasPrev: !!page.url.prev,
+      prev: { url: page.url.prev || "" },
+      hasNext: !!page.url.next,
+      next: { url: page.url.next || "" },
+      first: { url: "/evaluations/1" },
+      last: { url: page.lastPage ? `/evaluations/${page.lastPage}` : "" },
+      pagers: Array.from({ length: page.lastPage }, (_, i) => ({
+        pageNumber: i + 1,
+        url: `/evaluations/${i + 1}`,
+      })),
+    }}
+  />
+</Layout>
+
+<style>
+  p {
+    color: gray;
+  }
+
+  .Evaluations__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+</style>