diff --git a/components/404View.vue b/components/404View.vue
index 648fb29..8e936bb 100644
--- a/components/404View.vue
+++ b/components/404View.vue
@@ -4,99 +4,116 @@
       <span class="glitch" data-text="404">404</span>
       <h1>Not Found!</h1>
       <p>
-        Hmm, Sorry... The page you are looking for could not be found, maybe
-        something went wrong?
+        Oops! We couldn't find the page you're looking for. It seems like
+        something went wrong. It might not be our fault. If you believe it is,
+        please let us know by filing an issue.
       </p>
     </section>
+    <p class="dialog-buttons">
+      <a onclick="window.history.go(-1)">← Go Back</a>
+      <a id="file-an-issue" v-bind:href="theme.nav.git + '/issues/new'"
+        >File an issue</a
+      >
+    </p>
   </main>
 </template>
 
+<script setup lang="ts">
+import { useData } from "vitepress";
+
+const { theme } = useData();
+</script>
+
 <style lang="scss">
 #NotFound {
-    background-color: var(--color-background-second);
-    border-radius: 10px;
-    padding: 30px 20px;
-    box-shadow: var(--base-shadow);
-    margin-bottom: 20px;
-    color: var(--color-text-secondary);
-    width: 100%;
-    text-align: center;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border-radius: 10px;
+  padding: 30px 20px;
+  margin-bottom: 20px;
+  color: var(--color-text-secondary);
+  width: 100%;
+  text-align: center;
 
-    h1 {
-        font-size: 2em;
-        margin-top: 0 !important;
-        font-weight: 800;
-        margin-bottom: 0 !important;
-    }
+  h1 {
+    font-size: 2em;
+    margin-top: 0 !important;
+    color: var(--color-accent);
+    font-weight: 800;
+    margin-bottom: 0 !important;
+  }
 
-    span {
-        font-size: 7em;
-        font-weight: 800;
-        letter-spacing: -12.2px;
-        line-height: -2px;
-        color: var(--color-text);
-        position: relative;
-        display: inline-block;
-        animation: notfoundblink .8s infinite alternate;
+  span {
+    font-size: 7em;
+    font-weight: 800;
+    letter-spacing: -12.2px;
+    line-height: -2px;
+    color: var(--color-text);
+    position: relative;
+    display: inline-block;
+    animation: notfoundblink 0.8s infinite alternate;
 
-        @keyframes notfoundblink {
-            from {
-                opacity: 1;
-            }
+    @keyframes notfoundblink {
+      from {
+        opacity: 1;
+      }
 
-            to {
-                opacity: 0;
-            }
-        }
-
-        @media (prefers-reduced-motion: no-preference) {
+      to {
+        opacity: 0;
+      }
+    }
 
-            &::before,
-            &::after {
-                content: attr(data-text);
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-            }
+    @media (prefers-reduced-motion: no-preference) {
+      &::before,
+      &::after {
+        content: attr(data-text);
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
 
-            &::before {
-                left: 2px;
-                text-shadow: -3px 0 var(--color-accent), 0 3px var(--color-accent), 3px 0 var(--color-accent), 0 -3px var(--color-accent);
-                opacity: 0.8;
-                animation: glitch 1s infinite linear alternate-reverse;
-            }
+      &::before {
+        left: 2px;
+        text-shadow: -3px 0 var(--color-accent), 0 3px var(--color-accent),
+          3px 0 var(--color-accent), 0 -3px var(--color-accent);
+        opacity: 0.8;
+        animation: glitch 1s infinite linear alternate-reverse;
+      }
 
-            &::after {
-                left: -2px;
-                text-shadow: 3px 0 var(--color-background-mute), 0 -3px var(--color-background-mute), -3px 0 var(--color-background-mute), 0 3px var(--color-background-mute);
-                opacity: 0.8;
-                animation: glitch 1.5s infinite linear alternate-reverse;
-            }
-        }
+      &::after {
+        left: -2px;
+        text-shadow: 3px 0 var(--color-background-mute),
+          0 -3px var(--color-background-mute),
+          -3px 0 var(--color-background-mute),
+          0 3px var(--color-background-mute);
+        opacity: 0.8;
+        animation: glitch 1.5s infinite linear alternate-reverse;
+      }
     }
+  }
 
-    @keyframes glitch {
-        0% {
-            transform: translate(0);
-        }
+  @keyframes glitch {
+    0% {
+      transform: translate(0);
+    }
 
-        25% {
-            transform: translate(4px, -4px);
-        }
+    25% {
+      transform: translate(4px, -4px);
+    }
 
-        50% {
-            transform: translate(-4px, 4px);
-        }
+    50% {
+      transform: translate(-4px, 4px);
+    }
 
-        75% {
-            transform: translate(4px, 0);
-        }
+    75% {
+      transform: translate(4px, 0);
+    }
 
-        100% {
-            transform: translate(0);
-        }
+    100% {
+      transform: translate(0);
     }
+  }
 }
 </style>
diff --git a/components/BlogFooter.vue b/components/BlogFooter.vue
index 8e4d459..864fbba 100644
--- a/components/BlogFooter.vue
+++ b/components/BlogFooter.vue
@@ -6,10 +6,35 @@
       If you have any questions or comments about this post, please feel free to
       leave a comment below.
     </p>
+
+    <noscript
+      ><small
+        >Heads Up! You <i>need</i> JavaScript to view/write comments or to react
+        to the post. So you can't do anything unless you turn on
+        JavaScript.</small
+      ></noscript
+    >
     <div id="giscusContainer"></div>
-    <a href="/blog/">
-      <span>← Go back to the blog's home</span>
-    </a>
+    <br />
+    <hr />
+    <p class="dialog-buttons" v-if="frontmatter.prev || frontmatter.next">
+      <a
+        :href="`${frontmatter.prev.toLowerCase().replace(/\s+/g, '-')}.html`"
+        target="_self"
+        v-if="frontmatter.prev"
+      >
+        <span><small>← Previous</small></span>
+        <br /><span>{{ frontmatter.prev }}</span>
+      </a>
+      <a
+        :href="`${frontmatter.next.toLowerCase().replace(/\s+/g, '-')}.html`"
+        target="_self"
+        v-if="frontmatter.next"
+      >
+        <span><small>Next →</small></span>
+        <br /><span>{{ frontmatter.next }}</span>
+      </a>
+    </p>
   </section>
 </template>
 
@@ -17,11 +42,9 @@
 import { useData } from "vitepress";
 import { onMounted } from "vue";
 
-const { theme } = useData();
+const { theme, frontmatter } = useData();
 
 onMounted(() => {
-  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
   // Load GitHub Comments script dynamically
   const script = document.createElement("script");
   script.src = "https://giscus.app/client.js";
@@ -35,12 +58,8 @@ onMounted(() => {
   script.setAttribute("data-reactions-enabled", "1");
   script.setAttribute("data-emit-metadata", "0");
   script.setAttribute("data-input-position", "bottom");
-  
-  // Apply different theme attributes based on color mode
-  script.setAttribute("data-theme", isDarkMode ? "transparent_dark" : "light");
-  
+  script.setAttribute("data-theme", "preferred_color_scheme");
   script.setAttribute("data-lang", "en");
-  script.setAttribute("data-loading", "lazy");
   script.setAttribute("crossorigin", "anonymous");
 
   // Append the script to the document
@@ -55,17 +74,25 @@ onMounted(() => {
   a {
     display: block;
     padding: 20px;
-    border-radius: 10px;
-    color: var(--color-text-secondary);
-    width: 100%;
+    color: var(--color-accent);
+    margin: 0 0.2rem;
     text-align: center;
     text-decoration: none;
+    background-color: transparent;
     transition: all 0.3s ease;
-    margin-top: 30px;
+
+    &:first-child {
+      border-radius: 10px;
+      text-align: left;
+    }
+
+    &:last-child {
+      border-radius: 10px;
+      text-align: right;
+    }
 
     &:hover {
       transform: translateY(-5px);
-      background-color: var(--color-background-second);
     }
 
     &:active {
@@ -74,7 +101,6 @@ onMounted(() => {
 
     span {
       font-size: 1em;
-      font-weight: 800;
       margin-bottom: 0 !important;
     }
   }
diff --git a/components/BlogHead.vue b/components/BlogHead.vue
index 2bd99fb..69ddc10 100644
--- a/components/BlogHead.vue
+++ b/components/BlogHead.vue
@@ -1,43 +1,62 @@
 <template>
-    <div id="blog-head">
-        <h1>{{ frontmatter.title }}</h1>
-        <small>
-            {{ formatDate(frontmatter.date) }} &middot;
-            <span class="tags">
-                <span v-for="(tag, index) in frontmatter.tags" :key="index">#{{ tag }}</span>
-            </span>
-        </small>
-        <br>
-        <p>{{ frontmatter.description }}</p>
-        <hr />
-    </div>
+  <div id="blog-head">
+    <h1>{{ frontmatter.title }}</h1>
+    <small>
+      {{
+        // Blog Post Published Date
+        new Date(frontmatter.date).toLocaleDateString("en-GB", {
+          day: "2-digit",
+          month: "long",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+        })
+      }}
+      &middot;
+      <span v-if="theme.blog.author">
+        Author:
+        {{ frontmatter.author }}
+        &middot;
+      </span>
+      <span class="tags">
+        <span v-for="(tag, index) in frontmatter.tags" :key="index"
+          >#{{ tag }}</span
+        >
+      </span>
+    </small>
+    <br />
+    <p>{{ frontmatter.description }}</p>
+    <hr />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { useData } from 'vitepress';
-
-const { frontmatter } = useData();
-
-const formatDate = (dateString) => {
-    const options = { day: '2-digit', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' };
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-GB', options);
-};
+import { useData } from "vitepress";
+const { frontmatter, theme } = useData();
 </script>
 
 <style lang="scss">
 #blog-head {
-    .tags span {
-        margin-right: 5px;
-        color: var(--color-text-secondary);
-        background-color: var(--color-background-second);
-        padding: 0.15rem 0.45rem;
-        border-radius: 20px;
-        font-size: 12px;
-    }
+  .tags span {
+    margin-right: 5px;
+    color: var(--color-text-secondary);
+    background-color: var(--color-background-second);
+    padding: 0.15rem 0.45rem;
+    border-radius: 20px;
+    font-size: 12px;
+    transition: all 0.3s ease;
+    cursor: default;
 
-    p {
-        color: var(--color-text-secondary);
+    &:hover {
+      background-color: var(--color-accent-alpha);
+      color: var(--color-accent);
+      transform: scale(1.05) !important;
     }
+  }
+
+  p {
+    color: var(--color-text-secondary);
+    font-style: italic;
+  }
 }
 </style>
diff --git a/components/BlogList.vue b/components/BlogList.vue
new file mode 100644
index 0000000..3455988
--- /dev/null
+++ b/components/BlogList.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="blog-posts">
+    <noscript>
+      <small>To use the filter you need JavaScript to be enabled.</small>
+    </noscript>
+    <div class="filter-tags">
+      <button @click="filterPosts('')" id="all-tags">All</button>
+      <button v-for="tag in uniqueTags" :key="tag" @click="filterPosts(tag)">
+        <span class="hashtag">#</span>{{ tag }}
+      </button>
+    </div>
+    <div class="post-container">
+      <a
+        v-for="post in filteredPosts"
+        :key="post.title"
+        :href="`posts/${post.title.toLowerCase().replace(/\s+/g, '-')}.html`"
+        class="post"
+      >
+        <h3>{{ post.title }}</h3>
+        <p class="date">{{ post.date }}</p>
+        <p>{{ post.description }}</p>
+        <div class="tags">
+          <span v-if="typeof post.tags === 'string'" :key="post.tags"
+            >#{{ post.tags }}</span
+          >
+          <span v-else v-for="tag in post.tags" :key="tag">#{{ tag }}</span>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { data as posts } from "./posts.data";
+import { ref, computed } from "vue";
+
+const selectedTag = ref(null);
+
+const allTags = computed(() => {
+  return posts.reduce((tags, post) => {
+    return tags.concat(Array.isArray(post.tags) ? post.tags : [post.tags]);
+  }, []);
+});
+
+const uniqueTags = computed(() => {
+  const tags = [...new Set(allTags.value)];
+  return tags.filter((tag) => tag !== "");
+});
+
+const filteredPosts = computed(() => {
+  return selectedTag.value === null
+    ? posts
+    : posts.filter((post) =>
+        Array.isArray(post.tags)
+          ? post.tags.includes(selectedTag.value)
+          : post.tags === selectedTag.value
+      );
+});
+
+function filterPosts(tag: string) {
+  selectedTag.value = tag === "" ? null : tag;
+}
+</script>
+
+<style lang="scss">
+.blog-posts {
+  margin: 0 auto;
+}
+
+.post-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+  gap: 10px;
+
+  @media screen and (max-width: 600px) {
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
+
+  .post {
+    background-color: var(--color-background-second);
+    text-decoration: none;
+    padding: 20px;
+    border-radius: 8px;
+    transition: transform 0.3s ease;
+
+    &:first-child {
+      background-color: var(--color-background-mute);
+    }
+
+    &:hover {
+      transform: scale(1.05);
+    }
+
+    &:active {
+      transform: scale(0.9);
+    }
+
+    h3 {
+      margin: 0 !important;
+      font-weight: 900;
+      font-size: 24px;
+    }
+
+    p {
+      margin: 0;
+      color: var(--color-text);
+      font-weight: 500;
+    }
+
+    .date {
+      margin: 5px 0;
+      font-size: 0.9rem;
+      color: var(--color-text-secondary);
+      font-weight: 600;
+      font-feature-settings: "zero", "tnum", "cv03", "cv02";
+    }
+  }
+}
+
+.filter-tags {
+  margin-bottom: 20px;
+
+  #all-tags {
+    background-color: var(--color-accent-alpha);
+    color: var(--color-accent)
+  }
+
+  button {
+    margin-right: 10px;
+    margin-bottom: 3px;
+    background-color: var(--color-background-second);
+    border-radius: 20px;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: var(--color-accent);
+      background-color: var(--color-accent-alpha);
+    }
+
+    &:active {
+      transform: scale(0.8);
+    }
+  }
+}
+
+.tags {
+  text-align: right;
+  margin-top: 10px;
+
+  span {
+    font-weight: 500;
+    margin-right: 5px;
+    color: var(--color-text-accent);
+    background-color: var(--color-background);
+    padding: 0.15rem 0.45rem;
+    border-radius: 20px;
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/components/Footer.vue b/components/Footer.vue
index 764cc33..0768068 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,32 +1,30 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
 import { useData } from "vitepress";
-const currentYear = ref<string>("");
-
 const { theme } = useData();
-
-onMounted(() => {
-  const now = new Date();
-  const options = { year: "numeric", timeZone: "Europe/Chisinau" };
-  currentYear.value = now.toLocaleDateString(
-    undefined,
-    options as Intl.DateTimeFormatOptions
-  );
-});
 </script>
 
 <template>
   <footer>
+    <a
+      style="margin: 16px; display: block"
+      v-if="theme.footer.sourcecode?.show"
+      :href="theme.footer.sourcecode.link"
+      ><mark>Source Code</mark></a
+    >
     <p v-if="theme.footer.madeby.show">
       Made with ❤️ by
       <a :href="theme.footer.madeby.link" id="author"
         ><mark>{{ theme.footer.madeby.name }}</mark></a
       >
     </p>
-    <p id="copyright" v-if="theme.footer.copyright">
-      &copy; {{ theme.author }},
-      <span v-if="theme.footer.startYear">{{ theme.footer.startYear }}-</span
-      >{{ currentYear }}.
+    <p
+      id="copyright"
+      v-if="theme.footer.copyright"
+      :title="'Last Updated At: ' + new Date().toLocaleString()"
+    >
+      &copy; <b>{{ theme.author }}</b
+      >, <span v-if="theme.footer.startYear">{{ theme.footer.startYear }}-</span
+      >{{ new Date().getFullYear() }}.
     </p>
     <p id="copyleft" v-if="theme.footer.copyleft?.show">
       &#127279; Licensed under the
@@ -35,9 +33,9 @@ onMounted(() => {
       }}</a
       >.
     </p>
-    <p id="powered" v-if="theme.footer.poweredBy">
+    <small id="powered" v-if="theme.footer.poweredBy">
       Powered by <a href="https://vitepress.dev/">VitePress</a> and
       <a href="https://aplos.gxbs.me">Aplós</a>
-    </p>
+    </small>
   </footer>
 </template>
diff --git a/components/SimpleLayout.vue b/components/SimpleLayout.vue
index 64280ba..6c01cd9 100644
--- a/components/SimpleLayout.vue
+++ b/components/SimpleLayout.vue
@@ -2,7 +2,7 @@
   <section id="simple-layout">
     <hr />
     <p class="dialog-buttons">
-      <a href="#top">↑ Go to top</a>
+      <a href="#top" target="_top">↑ Go to top</a>
       <a id="file-an-issue" v-bind:href="theme.nav.git + '/issues/new'"
         >File an issue</a
       >
@@ -18,37 +18,38 @@ const { theme } = useData();
 
 <style lang="scss">
 #simple-layout {
-  margin-top: 6rem;
-
-  .dialog-buttons {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-top: 2rem;
-
-    a {
-      padding: 0.5rem 1rem;
-      border-radius: 0.5rem;
-      text-decoration: none;
-      color: var(--color-accent);
-      background-color: var(--color-background-second);
-      transition: all 0.3s ease;
-
-      &:hover {
-        background-color: var(--color-background-mute);
-      }
+  margin-top: 3rem;
+}
+
+.dialog-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-top: 2rem;
+
+  a {
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    color: var(--color-accent);
+    cursor: pointer;
+    background-color: var(--color-background-second);
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: var(--color-background-mute);
     }
+  }
+}
 
-    #file-an-issue {
-      background-color: transparent;
-      color: var(--color-accent);
+#file-an-issue {
+  background-color: transparent;
+  color: var(--color-accent);
 
-      &:hover {
-        background-color: var(--color-accent);
-        color: var(--color-background-second);
-      }
-    }
+  &:hover {
+    background-color: var(--color-accent);
+    color: var(--color-background-second);
   }
 }
 </style>
diff --git a/components/posts.data.ts b/components/posts.data.ts
new file mode 100644
index 0000000..95c0ac3
--- /dev/null
+++ b/components/posts.data.ts
@@ -0,0 +1,34 @@
+import { createContentLoader } from "vitepress";
+
+interface Post {
+  title: string;
+  description: string;
+  tags: string[];
+}
+
+declare const data: Post[];
+export { data };
+
+export default createContentLoader("blog/posts/*.md", {
+  excerpt: true,
+  transform(raw): Post[] {
+    return raw
+      .map(({ frontmatter }) => ({
+        title: frontmatter.title,
+        description: frontmatter.description,
+        tags: frontmatter.tags,
+        date: formatDate(frontmatter.date),
+      }))
+      .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  },
+});
+
+function formatDate(raw: string): string {
+  const date = new Date(raw);
+  date.setUTCHours(12);
+  return date.toLocaleDateString("en-GB", {
+    year: "numeric",
+    month: "long",
+    day: "2-digit",
+  });
+}
diff --git a/icons/RSSFeed.vue b/icons/RSSFeed.vue
index a25aa43..960eb0f 100644
--- a/icons/RSSFeed.vue
+++ b/icons/RSSFeed.vue
@@ -1,8 +1,15 @@
 <template>
-    <div class="svg-link">
-        <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="16" alt="An Icon that represents an RSS Feed">
-            <path
-                d="M200-120q-33 0-56.5-23.5T120-200q0-33 23.5-56.5T200-280q33 0 56.5 23.5T280-200q0 33-23.5 56.5T200-120Zm540 0q-26 0-43.5-19T676-184q-11-97-52.5-181.5T516-516q-66-66-150.5-107.5T184-676q-26-3-45-20.5T120-740q0-26 18-42.5t43-14.5q123 11 230.5 62.5T601-601q82 82 133.5 189.5T797-181q2 25-14.5 43T740-120Zm-240 0q-25 0-43-17.5T434-180q-9-49-31.5-90.5T346-346q-34-34-75.5-56.5T180-434q-25-5-42.5-23T120-500q0-26 18-43t43-13q73 10 136.5 42.5T431-431q50 50 82.5 113.5T556-181q4 25-13 43t-43 18Z" />
-        </svg>
-    </div>
-</template>
\ No newline at end of file
+  <div class="svg-link">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="16"
+      viewBox="0 -960 960 960"
+      width="16"
+      alt="An Icon that represents an RSS Feed"
+    >
+      <path
+        d="M200-120q-33 0-56.5-23.5T120-200q0-33 23.5-56.5T200-280q33 0 56.5 23.5T280-200q0 33-23.5 56.5T200-120Zm540 0q-26 0-43.5-19T676-184q-11-97-52.5-181.5T516-516q-66-66-150.5-107.5T184-676q-26-3-45-20.5T120-740q0-26 18-42.5t43-14.5q123 11 230.5 62.5T601-601q82 82 133.5 189.5T797-181q2 25-14.5 43T740-120Zm-240 0q-25 0-43-17.5T434-180q-9-49-31.5-90.5T346-346q-34-34-75.5-56.5T180-434q-25-5-42.5-23T120-500q0-26 18-43t43-13q73 10 136.5 42.5T431-431q50 50 82.5 113.5T556-181q4 25-13 43t-43 18Z"
+      />
+    </svg>
+  </div>
+</template>
diff --git a/icons/SourceCode.vue b/icons/SourceCode.vue
index b1f99a0..7186b9a 100644
--- a/icons/SourceCode.vue
+++ b/icons/SourceCode.vue
@@ -1,18 +1,26 @@
 <template>
-    <div class="svg-link">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" height="16" width="16" alt="An Icon that represents code">
-            <path
-                d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" />
-        </svg>
-    </div>
+  <div class="svg-link">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 640 512"
+      height="16"
+      width="16"
+      alt="An Icon that represents code"
+    >
+      <path
+        d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"
+      />
+    </svg>
+  </div>
 </template>
 
 <style lang="scss">
 .svg-link {
-    transition: fill 0.2s ease;
-    fill: var(--color-text-secondary);
+  transition: fill 0.2s ease;
+  fill: var(--color-text-secondary);
 
-    &:hover {
-        fill: var(--color-accent);
-    }
-}</style>
\ No newline at end of file
+  &:hover {
+    fill: var(--color-accent);
+  }
+}
+</style>
diff --git a/index.ts b/index.ts
index e1e0cf4..de029bf 100644
--- a/index.ts
+++ b/index.ts
@@ -2,5 +2,4 @@ import "./Layout.vue";
 import "./styles/index.scss";
 import "inter-ui/inter.css";
 import "inter-ui/inter-variable.css";
-import "inter-ui/inter-display.css";
-import "@fontsource/source-code-pro/500.css";
\ No newline at end of file
+import "non.geist/mono"
diff --git a/package.json b/package.json
index 1148518..daa78df 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "aplos",
-  "version": "0.0.1",
-  "description": "The Aplos VitePress theme as an NPM package.",
+  "version": "1.2.0",
+  "description": "The Aplos VitePress theme",
   "main": "index.ts",
   "keywords": [
     "VitePress",
@@ -11,16 +11,9 @@
   "author": "Gabriel Cozma",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/source-code-pro": "^5.0.16",
     "inter-ui": "^4.0.2",
-    "sass": "^1.71.1"
-  },
-  "directories": {
-    "test": "test"
-  },
-  "devDependencies": {},
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "non.geist": "^1.0.2",
+    "sass": "^1.74.1"
   },
   "repository": {
     "type": "git",
@@ -29,5 +22,5 @@
   "bugs": {
     "url": "https://github.com/GabsEdits/aplos-npm/issues"
   },
-  "homepage": "https://github.com/GabsEdits/aplos-npm#readme"
+  "homepage": "https://aplos.gxbs.me"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1658317..6f5a082 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,22 +5,18 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  '@fontsource/source-code-pro':
-    specifier: ^5.0.16
-    version: 5.0.16
   inter-ui:
     specifier: ^4.0.2
     version: 4.0.2
+  non.geist:
+    specifier: ^1.0.2
+    version: 1.0.2
   sass:
-    specifier: ^1.71.1
-    version: 1.71.1
+    specifier: ^1.74.1
+    version: 1.74.1
 
 packages:
 
-  /@fontsource/source-code-pro@5.0.16:
-    resolution: {integrity: sha512-ErErGXjKo9/fAJE49fyU8M6DuJUpdqR5YLM8jGJOC5ZcKIDSTQ5m+R3DTa0VYHAGGFbk2qLWVWD/r5sfCLA/jQ==}
-    dev: false
-
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -29,8 +25,8 @@ packages:
       picomatch: 2.3.1
     dev: false
 
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+  /binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
     dev: false
 
@@ -91,7 +87,7 @@ packages:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
     dependencies:
-      binary-extensions: 2.2.0
+      binary-extensions: 2.3.0
     dev: false
 
   /is-extglob@2.1.1:
@@ -111,6 +107,10 @@ packages:
     engines: {node: '>=0.12.0'}
     dev: false
 
+  /non.geist@1.0.2:
+    resolution: {integrity: sha512-oGCfo7Ub5bJmCOAt4CMAsCrVal/JXkQtxgBcpXzdU3lQib9c5hHdr62I8vI6TtdlsLcaYAPD/HRfZNdBUobwFg==}
+    dev: false
+
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -128,18 +128,18 @@ packages:
       picomatch: 2.3.1
     dev: false
 
-  /sass@1.71.1:
-    resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
+  /sass@1.74.1:
+    resolution: {integrity: sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
       chokidar: 3.6.0
       immutable: 4.3.5
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
     dev: false
 
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+  /source-map-js@1.2.0:
+    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
     dev: false
 
diff --git a/styles/cards.scss b/styles/cards.scss
index 07cf8f2..657a693 100644
--- a/styles/cards.scss
+++ b/styles/cards.scss
@@ -1,58 +1,74 @@
-.tip,
-.danger,
-.info,
-.warning {
-  margin: 20px 0;
-  width: 50%;
-  border-radius: 10px;
-  padding: 30px 20px;
+.custom-block:not(.details) {
+  margin: 1.25rem 0;
+  width: max-content;
+  max-width: 70%;
+  min-width: 45%;
+  border-radius: 0.625rem;
+  padding: 1.8rem 1.25rem;
+  line-height: 24px;
 
   p {
-    margin-bottom: 0 !important;
-    color: var(--color-text) !important;
+    color: var(--color-text);
+  }
+
+  p:not(.custom-block-title) {
+    margin: 0;
+    font-size: 0.9rem;
+  }
+
+  .custom-block-title {
+    font-size: 1.8rem;
+    margin-top: 0;
+    font-weight: 800;
+    margin-bottom: 10px;
   }
 }
 
-.tip .custom-block-title {
-  font-size: 2em !important;
-  margin-top: 0 !important;
-  font-weight: 800;
-  margin-bottom: 10px !important;
+.danger {
+  background-color: #ff001936;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: #39181b;
+  }
 }
 
-.danger .custom-block-title {
-  font-size: 2em !important;
-  margin-top: 0 !important;
-  font-weight: 800;
-  margin-bottom: 10px !important;
+.warning {
+  background-color: #ffcc007e;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: #372a1a;
+  }
 }
 
-.details {
-  border-radius: 10px !important;
-  margin: 20px 0 !important;
-  width: 50%;
+.tip {
+  background-color: #00ff006a;
 
-  summary {
-    font-size: 1.2em !important;
-    margin-top: 0 !important;
-    font-weight: 800;
+  @media (prefers-color-scheme: dark) {
+    background-color: #1f3f1f;
   }
+
 }
 
-.info .custom-block-title {
-  font-size: 2em !important;
-  margin-top: 0 !important;
-  font-weight: 800;
-  margin-bottom: 10px !important;
+.info {
+  background-color: var(--color-background-mute);
 }
 
-.warning {
-  color: var(--vp-c-text-2);
+.details {
+  border-radius: 0.625rem;
+  background-color: var(--color-background-second);
+  padding: 16px;
+  margin: 1.25rem 0;
+  min-width: 45%;
+  max-width: max-content;
 
-  .custom-block-title {
-    font-size: 2em !important;
-    margin-top: 0 !important;
-    font-weight: 800;
-    margin-bottom: 10px !important;
+  summary {
+    margin-top: 0;
+    cursor: pointer;
+    font-weight: 700;
+  }
+
+  p {
+    font-size: 15px;
+    margin: 10px 0 0 0;
   }
 }
diff --git a/styles/color.scss b/styles/color.scss
index 15c5d32..ef5e7b0 100644
--- a/styles/color.scss
+++ b/styles/color.scss
@@ -30,6 +30,9 @@ $bg-color-s-d: color.scale(
 $bg-color-m-l: color.scale($bg-color-s-l, $lightness: -5%) !default;
 $bg-color-m-d: color.scale($bg-color-s-d, $lightness: 5%) !default;
 
+$bg-color-accent-alpha-l: color.scale($color-accent-l, $alpha: -60%) !default;
+$bg-color-accent-alpha-d: color.scale($color-accent, $alpha: -60%) !default;
+
 $bg-color-code-l: color.scale($bg-color-l, $lightness: -5%) !default;
 $bg-color-code-d: mix($bg-color-d, $bg-color-s-d, 60%);
 
@@ -46,7 +49,8 @@ $text-color-secondary-d: color.scale(
 
 :root {
   --color-accent: #{$color-accent-l};
-  --base-shadow: 0px 10px 34px 0px rgba(0, 0, 0, 0.15);
+  --color-accent-alpha: #{$bg-color-accent-alpha-l};
+  --base-shadow: 0 0.625rem 2.125rem 0 rgba(0, 0, 0, 0.15);
   --color-text-secondary: #{$text-color-secondary-l};
   --color-border: #75757560;
 
@@ -56,11 +60,10 @@ $text-color-secondary-d: color.scale(
   --color-background-code: #{$bg-color-code-l};
   --color-header: #{$nav-bg-l};
   --color-text: #{color.scale($bg-color-l, $lightness: -90%)};
-}
 
-@media (prefers-color-scheme: dark) {
-  :root {
+  @media (prefers-color-scheme: dark) {
     --color-accent: #{$color-accent-d};
+    --color-accent-alpha: #{$bg-color-accent-alpha-d};
     --color-background: #{$bg-color-d};
     --color-background-second: #{$bg-color-s-d};
     --color-background-mute: #{$bg-color-m-d};
diff --git a/styles/common.scss b/styles/common.scss
index 862c8b7..efc66e6 100644
--- a/styles/common.scss
+++ b/styles/common.scss
@@ -17,34 +17,56 @@ h1 {
   font-weight: 900;
   line-height: normal;
   letter-spacing: -0.075rem;
-  margin: 2.0938rem 0 !important;
+  margin: 2.0938rem 0;
 }
 
 h2 {
-  font-size: 35px;
+  font-size: 2.1875rem;
   font-style: normal;
   font-weight: 800;
   line-height: normal;
   letter-spacing: -0.075rem;
-  margin: 1.575rem 0 !important;
 }
 
 h3 {
-  font-size: 25px;
+  font-size: 1.5625rem;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   letter-spacing: -0.075rem;
 }
 
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li,
+p {
+  overflow-wrap: break-word;
+}
+
 pre {
-  font-family: "Source Code Pro", monospace;
+  font-family: "Geist Mono", monospace;
+  font-weight: 500;
   background-color: var(--color-background-code);
-  border-right: var(--color-accent) 5px solid;
-  padding: 0.625rem 1.25rem !important;
+  border-right: var(--color-accent) 0.3125rem solid;
+  padding: 0.625rem 1.25rem;
   overflow: auto;
   max-width: 100%;
-  border-radius: 20px;
+  border-radius: 1.25rem;
   margin: 1.25rem 0;
 
   code {
@@ -52,11 +74,32 @@ pre {
     color: var(--color-text);
     border-radius: 0;
     padding: 0;
-    border: 0px;
+    border: 0;
+
+    span {
+      color: var(--shiki-light, inherit);
+
+      @media (prefers-color-scheme: dark) {
+        color: var(--shiki-dark, inherit);
+      }
+
+      .line .highlighted {
+        background-color: rgba(142, 150, 170, 0.14);
+
+        @media (prefers-color-scheme: dark) {
+          background-color: rgba(101, 117, 133, 0.16);
+        }
+      }
+    }
   }
 
   .highlighted {
-    background-color: var(--vp-code-line-highlight-color);
+    background-color: rgba(142, 150, 170, 0.14);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: rgba(101, 117, 133, 0.16);
+    }
+
     transition: background-color 0.5s;
     margin: 0 -1.5rem;
     padding: 0 1.5rem;
@@ -72,17 +115,17 @@ pre {
 }
 
 blockquote {
-  border-left: var(--color-accent) 5px solid;
-  border-radius: 0.5rem 3.125rem 3.125rem 0.5rem;
+  border-left: var(--color-accent) 0.3125rem solid;
+  border-radius: 0.5rem 1.5rem 1.5rem 0.5rem;
   background-color: var(--color-background-second);
-  padding: 10px 19px;
+  padding: 0.625rem 1.1875rem;
   margin: 0;
   width: max-content;
   max-width: 97%;
 
   blockquote {
-    margin: 5px 0;
-    padding: 5px 10px;
+    margin: 0.3125rem 0;
+    padding: 0.3125rem 0.625rem;
   }
 
   p {
@@ -93,15 +136,15 @@ blockquote {
 
 img,
 video {
-  border-radius: 10px;
-  margin: 10px 0;
+  border-radius: 0.625rem;
+  margin: 0.625rem 0;
   width: 100%;
-  transition: transform 0.4s, border-radius 0.4s, border 1.5s ease;
+  transition: transform 0.4s, border-radius 0.4s, box-shadow 1.5s ease;
 
   &:hover {
     transform: scale(1.1);
-    border: var(--color-border) 2px solid;
-    border-radius: 20px;
+    box-shadow: var(--base-shadow);
+    border-radius: 1.25rem;
     cursor: zoom-in;
   }
 }
@@ -134,39 +177,49 @@ main a {
   color: var(--color-accent);
   text-decoration: underline;
   font-weight: 700;
+  transition: text-decoration 0.3s ease transform 0.3s ease;
+
+  &:hover {
+    text-decoration: dotted underline;
+  }
+
+  &:active {
+    transform: scale(0.9);
+  }
 }
 
 hr {
-  border-radius: 20px;
-  border: var(--color-border) 2px solid;
-  margin: 20px 5%;
+  border-radius: 1.25rem;
+  border: var(--color-border) 0.125rem solid;
+  margin: 1.25rem 5%;
 }
 
 code {
-  font-family: "Source Code Pro", monospace;
+  font-family: "Geist Mono", monospace;
+  font-weight: 500;
   background-color: var(--color-background-second);
-  border-radius: 7px;
+  border-radius: 0.45rem;
   color: var(--color-accent);
-  padding: 1px 6px;
-  font-size: 14px;
-  border: 1px solid var(--color-border);
+  padding: 0.125rem 0.25rem;
+  font-size: 0.83rem;
 }
 
 kbd {
   background-color: var(--color-background-second);
-  border-radius: 5px;
-  border: 1px solid var(--color-border);
-  border-bottom: 2px solid var(--color-border);
-  padding: 3px;
-  font-size: 14px;
+  border-radius: 0.3125rem;
+  border: 0.0625rem solid var(--color-border);
+  border-bottom: 0.125rem solid var(--color-border);
+  font-family: "Geist Mono", monospace;
+  padding: 0.1875rem;
+  font-size: 0.875rem;
   cursor: pointer;
 
   &:active {
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 0.0625rem solid var(--color-border);
     background-color: var(--color-border);
-    border-left: 2px solid var(--color-border);
-    padding-bottom: 4px;
-    padding-left: 4px;
+    border-left: 0.125rem solid var(--color-border);
+    padding-bottom: 0.25rem;
+    padding-left: 0.25rem;
   }
 }
 
@@ -174,11 +227,11 @@ time {
   background-color: var(--color-background-second);
   color: var(--color-accent);
   font-weight: 700;
-  border-radius: 5px;
-  border: 1px solid var(--color-border);
-  border-bottom: 2px solid var(--color-border);
-  padding: 3px;
-  font-size: 14px;
+  border-radius: 0.3125rem;
+  border: 0.0625rem solid var(--color-border);
+  border-bottom: 0.125rem solid var(--color-border);
+  padding: 0.1875rem;
+  font-size: 0.875rem;
   cursor: pointer;
 
   span {
@@ -196,10 +249,10 @@ time {
   }
 
   &:active {
-    border-bottom: 1px solid var(--color-border);
-    border-top: 2px solid var(--color-border);
+    border-bottom: 0.0625rem solid var(--color-border);
+    border-top: 0.125rem solid var(--color-border);
     font-weight: 800;
-    padding-top: 4px;
+    padding-top: 0.25rem;
 
     span {
       animation: none;
@@ -211,13 +264,13 @@ mark {
   background-color: var(--color-background-second);
   color: var(--color-accent);
   margin: 0;
-  padding: 2px 6px 3px 6px;
-  border-radius: 10px;
+  padding: 0.125rem 0.375rem 0.1875rem 0.375rem;
+  border-radius: 0.625rem;
 }
 
 table {
   border-collapse: collapse;
-  border-radius: 10px;
+  border-radius: 0.625rem;
   overflow: hidden;
   table-layout: fixed;
   width: 100%;
@@ -226,13 +279,13 @@ table {
     background-color: var(--color-background-mute);
     color: var(--color-accent);
     font-weight: 700;
-    padding: 10px 20px;
+    padding: 0.625rem 1.25rem;
     text-align: center;
   }
 
   td {
     color: var(--color-text);
-    padding: 10px 20px;
+    padding: 0.625rem 1.25rem;
   }
 
   tr {
@@ -243,64 +296,16 @@ table {
     }
 
     &:first-child {
-      border-bottom: 0px solid var(--color-border);
+      border-bottom: 0 solid var(--color-border);
     }
   }
 }
 
 /* Others */
 
-#coming-soon {
-  background-color: #ffec1faf;
-  border-radius: 10px;
-  padding: 30px 20px;
-  box-shadow: var(--base-shadow);
-  margin-bottom: 20px;
-  color: #291d00f1;
-  width: 100%;
-  text-align: center;
-
-  h1 {
-    font-size: 2em;
-    margin-top: 0 !important;
-    font-weight: 800;
-    margin-bottom: 0 !important;
-  }
-
-  p {
-    margin-top: 0 !important;
-  }
-}
-
-#NotFound {
-  background-color: var(--color-background-second);
-  border-radius: 10px;
-  padding: 30px 20px;
-  box-shadow: var(--base-shadow);
-  margin-bottom: 20px;
-  color: var(--color-text-secondary);
-  width: 100%;
-  text-align: center;
-
-  h1 {
-    font-size: 2em;
-    margin-top: 0 !important;
-    font-weight: 800;
-    margin-bottom: 0 !important;
-  }
-
-  span {
-    font-size: 7em;
-    font-weight: 800;
-    letter-spacing: -12.2px;
-    line-height: -2px;
-    color: var(--color-text);
-  }
-}
-
 ul,
 ol {
-  margin: 10px 0px 10px 50px;
+  margin: 0;
 }
 
 ul {
@@ -317,6 +322,28 @@ a mark {
   transition: transform 0.3s ease;
 
   &:hover {
-    transform: scale(1.2);
+    transform: scale(1.2) rotate(10deg);
   }
 }
+
+aside {
+  background-color: var(--color-background-second);
+  border-radius: 1rem;
+  float: right;
+  margin-inline-start: 1rem;
+  padding: 1rem;
+  width: 30%;
+}
+
+button {
+  padding: 0;
+  background-color: transparent;
+  background-image: none;
+  border: 0;
+  cursor: pointer;
+}
+
+abbr {
+  cursor: help;
+  text-decoration: 1px dotted underline;
+}
diff --git a/styles/index.scss b/styles/index.scss
index 0a67042..71f0e29 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,9 +1,9 @@
 /*
- * Aplos version 1.0.0 (https://aplos.gxbs.me/)
+ * Aplos (https://aplos.gxbs.me/)
  * Copyright 2023-2024 Gabriel Cozma/Gabs
  * Licensed under MIT (https://github.com/GabsEdits/aplos/src/branch/main/LICENSE)
  
- * Based on Vitepress (https://vitepress.dev) & inspired Duckquill (https://daudix.codeberg.page/duckquill)
+ * Based on VitePress (https://vitepress.dev) & inspired Duckquill (https://daudix.codeberg.page/duckquill)
 */
 
 @import "common.scss";
@@ -14,6 +14,7 @@
 :root {
   font-family: Inter, sans-serif;
   font-feature-settings: "liga" 1, "calt" 1, "cv05" 1;
+  scroll-behavior: smooth;
   /* fix for Chrome */
 }
 
@@ -27,22 +28,32 @@
   }
 }
 
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+
 body {
-  font-family: Inter, sans-serif, "Noto Color Emoji";
+  font-family: Inter, sans-serif;
   scroll-behavior: smooth;
   background-color: var(--color-background);
   color: var(--color-text);
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 400;
+  font-synthesis: style;
+  text-rendering: optimizeLegibility;
 }
 
 main {
   width: 60vw;
+  scroll-behavior: smooth;
   margin-top: 7%;
   margin-bottom: 4%;
   font-size: 1rem;
   line-height: 1.5;
   margin-left: auto;
   margin-right: auto;
-  max-width: 60.1875rem;
+  max-width: 60rem;
 }
 
 ::selection {
@@ -52,9 +63,10 @@ main {
 
 :target {
   scroll-margin-top: 15vh;
-  animation: highlight-in-out 800ms .4s;
+  animation: highlight-in-out 800ms 0.4s;
   color: var(--color-accent);
-  text-shadow: var(--color-background-second) 0 0 4px,var(--color-accent) 0 0 12px;
+  text-shadow: var(--color-background-second) 0 0 0.25rem,
+    var(--color-accent) 0 0 0.75rem;
 
   @keyframes highlight-in-out {
     50% {
@@ -67,62 +79,63 @@ main {
 }
 
 html {
-  scrollbar-color: var(--color-accent) rgba(0, 0, 0, 0);
   accent-color: var(--color-accent);
+  scroll-behavior: smooth;
 }
 
-nav {
-  background-color: none;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  overflow: hidden;
-  position: fixed;
-  top: 3rem;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 2.5rem;
-  background-color: var(--color-header);
-  border: 0.4px solid var(--color-border);
-  z-index: 9999;
-  padding: 0.0625rem 1.5625rem;
-  text-align: center;
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+header {
+  nav {
+    background-color: none;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
     overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    li {
-      display: inline-block;
-
-      a {
-        display: block;
-        text-align: center;
-        color: var(--color-text-secondary);
-        text-decoration: none;
-        font-weight: 600;
-        font-size: 14px;
-        letter-spacing: -0.045rem;
-        margin: 0 0.3125rem;
-        transform: scale(1);
-        font-size: 14px;
-        transition: color 0.7s ease, transform 100ms ease;
-
-        &:hover {
-          color: var(--color-accent);
-        }
-
-        &:active {
-          color: var(--color-accent);
-          transform: scale(0.9);
-        }
-
-        &.active {
-          color: var(--color-accent);
+    position: fixed;
+    top: 3rem;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 2.5rem;
+    background-color: var(--color-header);
+    border: 0.4px solid var(--color-border);
+    z-index: 9999;
+    padding: 0.0625rem 1.5625rem;
+    text-align: center;
+
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      li {
+        display: inline-block;
+
+        a {
+          display: block;
+          text-align: center;
+          color: var(--color-text-secondary);
+          text-decoration: none;
+          font-weight: 600;
+          font-size: 14px;
+          letter-spacing: -0.015rem;
+          margin: 0 0.3125rem;
+          transform: scale(1);
+          transition: color 0.7s ease, transform 100ms ease;
+
+          &:hover {
+            color: var(--color-accent);
+          }
+
+          &:active {
+            color: var(--color-accent);
+            transform: scale(0.9);
+          }
+
+          &.active {
+            color: var(--color-accent);
+          }
         }
       }
     }
@@ -134,7 +147,7 @@ nav {
 
     * {
       font-size: 16px;
-      letter-spacing: -0.0625rem;
+      letter-spacing: -0.0325rem;
       font-weight: 800;
       color: var(--color-text);
       margin: 0.5rem 0.3125rem 0.5rem 0.3125rem;
@@ -154,6 +167,7 @@ nav {
       content: "";
       position: absolute;
       height: 110%;
+      margin: 0;
       width: 0.0625rem;
       background-color: var(--color-border);
       top: 0;
@@ -195,9 +209,21 @@ footer {
 
   #copyright,
   #copyleft,
+  #powered {
+    font-weight: 500;
+
+    b {
+      font-weight: 700;
+    }
+  }
+
   #powered {
     color: var(--color-text-secondary);
-    font-weight: 600;
+    font-weight: 500;
+  }
+
+  small {
+    margin-top: 0.625rem;
   }
 
   #author {
@@ -207,7 +233,7 @@ footer {
 
 .lang {
   color: var(--color-text-secondary);
-  font-family: "Source Code Pro", monospace;
+  font-family: "Geist Mono", monospace;
   font-size: 14px;
   position: absolute;
   right: 20px;
@@ -216,9 +242,67 @@ footer {
 
 /* Other */
 
+.table-of-contents {
+  background-color: none;
+  backdrop-filter: blur(0.625rem);
+  -webkit-backdrop-filter: blur(0.625rem);
+  overflow: hidden;
+  position: fixed;
+  top: 9.375rem;
+  left: 10%;
+  border-radius: 1rem;
+  z-index: 9999;
+  padding: 0.625rem 1.5625rem;
+  text-align: left;
+
+  ul {
+    list-style-type: decimal;
+    color: var(--color-text-secondary);
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin: 0 0 0 0.9375rem;
+    padding: 0;
+
+    li {
+      text-align: left;
+
+      ul li {
+        list-style-type: disc;
+      }
+
+      a {
+        display: block;
+        text-align: left;
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 0.875rem;
+        letter-spacing: -0.045rem;
+        margin: 0 0.3125rem;
+        transform: scale(1);
+        font-size: 0.875rem;
+        transition: color 0.7s ease, transform 100ms ease;
+
+        &:hover {
+          color: var(--color-accent);
+        }
+
+        &:active {
+          color: var(--color-accent);
+          transform: scale(0.9);
+        }
+
+        &.active {
+          color: var(--color-accent);
+        }
+      }
+    }
+  }
+}
+
 button.copy {
   direction: ltr;
   position: absolute;
+  display: none;
   top: 12px;
   right: 12px;
   z-index: 3;
@@ -239,3 +323,18 @@ button.copy {
 .header-anchor {
   display: none; // I will hide it for now
 }
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+  font-family: inherit;
+  font-feature-settings: inherit;
+  color: var(--color-text);
+}
diff --git a/styles/medias.scss b/styles/medias.scss
index 08c00dd..32d3f27 100644
--- a/styles/medias.scss
+++ b/styles/medias.scss
@@ -1,25 +1,26 @@
-@media screen and (max-width: 1414px) {
+@media screen and (max-width: 88.375rem) {
   main {
-    margin-top: 150px !important;
-    margin-bottom: 150px !important;
+    margin-top: 9.375rem !important;
+    margin-bottom: 9.375rem !important;
     width: 90vw !important;
   }
+
   nav {
-    padding: 5px 20px !important;
+    padding: 0.3125rem 1.25rem !important;
 
     h1,
     ul li a {
-      font-size: 16px !important;
+      font-size: 1rem !important;
     }
 
     .fa-brands {
-      font-size: 16px !important;
+      font-size: 1rem !important;
     }
   }
 
   code {
-    padding: 3px 10px !important;
-    margin-top: 15px;
+    padding: 0.1875rem 0.625rem !important;
+    margin-top: 0.9375rem;
     line-height: 1.2;
   }
 
@@ -34,9 +35,32 @@
   .lang {
     display: none;
   }
+
+  .table-of-contents {
+    left: 6% !important;
+  }
+}
+
+@media screen and (max-width: 1828px) {
+  .table-of-contents {
+    display: none;
+  }
 }
 
-@media screen and (min-width: 1414px) and (max-width: 1902px) {
+@media screen and (max-width: 37.5rem){
+  ul, ol {
+    margin: 0 0 0 10px;
+  }
+
+  aside {
+    float: none;
+    width: 100%;
+    margin-inline-start: 0;
+  }
+}
+
+
+@media screen and (min-width: 88.375rem) and (max-width: 118.875rem) {
   main {
     margin: 7% 20%;
   }