diff --git a/styles/notion.css b/styles/notion.css
index eb23d40..e9585f9 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -1,75 +1,304 @@
-/* General settings for Notion */
+/**
+ * This file contains site-specifc style overrides for Notion elements from
+ * react-notion-x.
+ *
+ * react-notion-x's goal is to match styling as close as possible to Notion,
+ * whereas our goal with this site is to adjust Notion's styling in a few key
+ * places to add some flare.
+ */
+
 .notion {
-  --notion-max-width: 900px; /* Increasing the max width */
-  --notion-header-height: 64px; /* Taller header */
+  --notion-max-width: 720px;
+  --notion-header-height: 54px;
 }
 
-/* No padding for the frame */
 .notion-frame {
   padding: 0;
 }
 
-/* More detailed padding and line-height for notion page */
 .notion-page {
-  padding-bottom: calc(max(5vh, 48px)) !important; /* Increased padding */
-  line-height: 1.75; /* Increased line height */
+  padding-bottom: calc(max(5vh, 32px)) !important;
+  line-height: 1.65;
+}
+
+.index-page {
+  --notion-max-width: 900px;
 }
 
-/* Larger text for a more detailed look */
 .notion-text {
-  font-size: 1.2em;
   padding: 0.5em 2px;
 }
 
-/* Centered captions for assets */
 .notion-asset-caption {
   text-align: center;
 }
 
-/* Responsiveness */
-@media only screen and (max-width: 920px) {
-  .notion-page {
-    padding-left: 5vw;
-    padding-right: 5vw;
-  }
+.notion-asset-wrapper {
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
-/* Hidden search button for small devices */
-@media only screen and (max-width: 600px) {
-  .notion-search-button {
-    display: none !important;
+.notion-asset-wrapper-video > div,
+.notion-asset-wrapper-video video {
+  width: 100% !important;
+}
+
+.notion-header .notion-nav-header {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.notion-nav-header-rhs {
+  gap: 0.5rem;
+}
+
+.notion-gallery-grid {
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  grid-gap: 6vmin;
+  gap: 6vmin;
+}
+
+.notion-gallery-grid .notion-page-icon-inline {
+  display: none;
+}
+
+.notion-gallery-grid .notion-page-title-text {
+  font-size: 2em;
+  white-space: unset;
+}
+
+.notion-gallery-grid .notion-collection-card-property {
+  white-space: unset;
+  text-overflow: unset;
+}
+
+.notion-gallery-grid .notion-property-text {
+  font-size: 14px;
+}
+
+.notion-collection-card {
+  border-radius: 16px;
+  box-shadow: none;
+}
+
+.notion-collection-card-cover img {
+  border-radius: 16px;
+}
+
+.notion-collection-card {
+  overflow: visible;
+}
+
+.notion-collection-card-cover {
+  border-radius: 16px;
+  box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);
+}
+
+.notion-collection-card-cover {
+  border-bottom: 0 none;
+  transition: filter 150ms linear;
+  filter: none;
+}
+
+.notion-collection-card:hover .notion-collection-card-cover {
+  filter: brightness(120%);
+}
+
+.notion-collection-card-body {
+  padding: 10px;
+}
+
+/* only target safari */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  _::-webkit-full-page-media,
+  _:future,
+  :root,
+  .notion-collection-card-cover {
+    transition: none 0ms linear;
   }
 }
 
-/* Quotes styling */
 .notion-quote {
-  padding: 0.5em 1em;
+  padding: 0.2em 0.75em;
   line-height: 1.5;
   font-style: italic;
-  font-size: 1.5em; /* Larger font size */
+  font-size: 1.2em;
   border-left: 4px solid #67bdfc;
 }
 
-/* Headers styling */
 .notion-h1,
 .notion-h2,
 .notion-h3 {
-  margin-bottom: 1em; /* Increased margin */
+  margin-bottom: 0.25em;
+}
+
+.notion-callout {
+  margin: 0.75em 0;
+}
+
+.notion-hr {
+  margin: 2em 0;
+}
+
+@media only screen and (max-width: 920px) {
+  .index-page.notion-page {
+    padding-left: 2vw;
+    padding-right: 2vw;
+  }
+}
+
+@media only screen and (max-width: 720px) {
+  .notion-page {
+    padding-left: 2vw;
+    padding-right: 2vw;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .notion-search-button {
+    display: none !important;
+  }
+}
+
+.notion .notion-page-icon-cover {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.notion-title {
+  display: block;
+  text-align: center;
+}
+
+.notion-collection-row {
+  padding-bottom: 1em;
+}
+
+.notion-collection-page-properties .notion-collection-column-title {
+  display: none;
+}
+
+.notion-collection-row-property .notion-property {
+  display: flex;
+  justify-content: center;
+}
+
+.notion-collection-row-value {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  min-height: 23px;
+}
+
+.notion-page-cover-wrapper,
+.notion-page-cover-wrapper span,
+.notion-page-cover-wrapper img {
+  max-width: 1200px !important;
+  border-radius: 24px;
+}
+
+.notion-page-cover-wrapper {
+  box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);
+}
+
+@media only screen and (max-width: 1200px) {
+  .notion-page-cover-wrapper,
+  .notion-page-cover-wrapper span,
+  .notion-page-cover-wrapper img {
+    border-radius: 0;
+  }
+}
+
+.notion-block-ab9a258d6cf444f3bb40dc2600feae91 .notion-page-link {
+  justify-content: center;
+  padding: 2em;
+}
+
+.notion-code {
+  background: rgba(249, 250, 251, 1);
+  border: 1px solid rgba(229, 231, 235, 1);
+  border-radius: 0.375rem;
+}
+
+.notion-link {
+  position: relative;
+  transition: unset;
+  opacity: 1;
+  border-bottom-width: 0.1rem;
+  background: transparent;
+  background-origin: border-box;
+  background-repeat: no-repeat;
+  background-position: 50% 100%;
+  background-size: 0 0.1rem;
 }
 
-/* Custom link hover effects */
 .notion-link:focus,
 .notion-link:hover {
+  border-bottom-color: transparent;
+
   background-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
-  transition-duration: 500ms; /* Slower transition */
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  background-size: 100% 0.1rem;
+
+  transition-property: background-position, background-size;
+  transition-duration: 300ms;
 }
 
-/* Refined colors for background elements */
 .notion-red_background,
 .notion-pink_background,
 .notion-blue_background,
-.notion-purple_background {
-  /* Use the gradients of your choice here */
+.notion-purple_background,
+.notion-teal_background,
+.notion-yellow_background,
+.notion-orange_background,
+.notion-brown_background,
+.notion-gray_background {
+  padding: 0 0.5rem;
+  margin: 0 -0.5rem 0 -0.25rem;
+  border-radius: 0.5rem;
+  border-bottom-left-radius: 0.125rem;
+  box-decoration-break: clone;
+
+  background-color: none;
+
+  /* light yellow */
+  background-image: linear-gradient(
+    119deg,
+    var(--bg-color),
+    #fff697 10.5%,
+    #fdf59d 85.29%,
+    var(--bg-color)
+  );
+}
+
+.notion-purple_background,
+.notion-pink_background {
+  /* light pink */
+  background-image: linear-gradient(
+    119deg,
+    var(--bg-color),
+    #f5b8d1 10.5%,
+    #f9bcd3 85.29%,
+    var(--bg-color)
+  );
+}
+
+.notion-blue_background,
+.notion-gray_background {
+  /* light blue */
+  background-image: linear-gradient(
+    119deg,
+    var(--bg-color),
+    #adedfc 10.5%,
+    #adebfd 85.29%,
+    var(--bg-color)
+  );
+}
+
+.notion-red_background,
+.notion-orange_background {
+  /* light red */
   background-image: linear-gradient(
     119deg,
     var(--bg-color),
@@ -79,4 +308,81 @@
   );
 }
 
-/* Add more styles as you see fit */
+.notion-teal_background {
+  /* light green */
+  background-image: linear-gradient(
+    119deg,
+    var(--bg-color),
+    #d4eabc 10.5%,
+    #d2eabc 85.29%,
+    var(--bg-color)
+  );
+}
+
+.notion-brown_background {
+  /* dark blue */
+  background-image: linear-gradient(
+    119deg,
+    var(--bg-color),
+    #96b8ec 10.5%,
+    #a6c3f0 85.29%,
+    var(--bg-color)
+  );
+}
+
+/* disable highlighting in dark mode */
+.dark-mode .notion-red_background,
+.dark-mode .notion-pink_background,
+.dark-mode .notion-blue_background,
+.dark-mode .notion-purple_background,
+.dark-mode .notion-teal_background,
+.dark-mode .notion-yellow_background,
+.dark-mode .notion-orange_background,
+.dark-mode .notion-brown_background,
+.dark-mode .notion-gray_background {
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  background: none !important;
+}
+
+/* if you don't want rounded page icon images, remove this */
+.notion-page-icon-hero.notion-page-icon-image {
+  border-radius: 50%;
+  box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
+}
+.notion-page-icon-hero.notion-page-icon-image span,
+.notion-page-icon-hero.notion-page-icon-image img {
+  border-radius: 50%;
+}
+
+.notion-header {
+  background: hsla(0, 0%, 100%, 0.8);
+  backdrop-filter: saturate(180%) blur(16px);
+}
+
+.dark-mode .notion-header {
+  background: transparent;
+  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+  backdrop-filter: saturate(180%) blur(8px);
+}
+
+/* Workaround for Firefox not supporting backdrop-filter yet */
+@-moz-document url-prefix() {
+  .dark-mode .notion-header {
+    background: hsla(203, 8%, 20%, 0.8);
+  }
+}
+
+.notion-bookmark:hover {
+  border-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
+  border-image-slice: 1;
+}
+
+.notion-block-ab9a258d6cf444f3bb40dc2600feae91 .notion-column {
+  padding: 0;
+}
+
+.notion-block-260baa77f1e1428b97fb14ac99c7c385 {
+  display: none;
+}