diff --git a/svelte-app/src/components/bullet-point.svelte b/svelte-app/src/components/bullet-point.svelte
index dcb8a1c36..c89212cf7 100644
--- a/svelte-app/src/components/bullet-point.svelte
+++ b/svelte-app/src/components/bullet-point.svelte
@@ -1,12 +1,12 @@
-<div class={$$props.class || ''} />
+<span />
 
 <style lang="scss">
-  div {
-    @apply mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-all duration-150;
+  span {
+    @apply mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-colors;
   }
 
   :global(.dark) {
-    div {
+    span {
       @apply bg-light/80;
     }
   }
diff --git a/svelte-app/src/components/context-menu.svelte b/svelte-app/src/components/context-menu.svelte
deleted file mode 100644
index 497ded1c6..000000000
--- a/svelte-app/src/components/context-menu.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-
-  import { setState, state } from '$lib/helpers/menu';
-
-  import Divider from './context-menu/divider.svelte';
-  import Menu from './context-menu/menu.svelte';
-  import Option from './context-menu/option.svelte';
-
-  const pageContainer = (getContext('getPageContainer') as () => HTMLDivElement)();
-</script>
-
-<Menu
-  {...$state.pos}
-  {pageContainer}
-  on:click={() => setState()}
-  on:clickoutside={() => setState()}
->
-  {#if $state.open}
-    {#each $state.opts as option, index}
-      {#if option.text && option.icon}
-        <Option
-          icon={option.icon}
-          text={option.text}
-          disabled={option.disabled}
-          {index}
-          on:click={option.action ? option.action : () => undefined}
-        />
-      {:else}
-        <Divider />
-      {/if}
-    {/each}
-  {/if}
-</Menu>
diff --git a/svelte-app/src/components/context-menu/divider.svelte b/svelte-app/src/components/context-menu/divider.svelte
deleted file mode 100644
index fa3dc3af3..000000000
--- a/svelte-app/src/components/context-menu/divider.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-  export let classes = '';
-</script>
-
-<span
-  class="mx-3 my-2 block h-[1px] bg-dark/40 transition-colors duration-150 dark:bg-light/40 {classes}"
-/>
diff --git a/svelte-app/src/components/context-menu/menu.svelte b/svelte-app/src/components/context-menu/menu.svelte
deleted file mode 100644
index 5e4d08fa2..000000000
--- a/svelte-app/src/components/context-menu/menu.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, setContext } from 'svelte';
-  import { circIn, circOut } from 'svelte/easing';
-  import { fade } from 'svelte/transition';
-
-  import { BASE_ANIMATION_DURATION } from '$lib/consts';
-  import { setState } from '$lib/helpers/menu';
-
-  import { key } from '$components/context-menu/menu';
-
-  export let x: number;
-  export let y: number;
-
-  let menuElement: HTMLElement;
-  export let pageContainer: HTMLElement;
-  const dispatch = createEventDispatcher();
-
-  $: (() => {
-    if (!menuElement) {
-      return;
-    }
-
-    const rect = menuElement.getBoundingClientRect();
-    const pageRect = pageContainer.getBoundingClientRect();
-
-    x = Math.min(window.innerWidth - rect.width - 18, x);
-    if (y > Math.min(window.innerHeight, pageRect.height + pageRect.top) - rect.height) {
-      y -= rect.height;
-    }
-  })();
-
-  setContext(key, {
-    dispatchClick: () => dispatch('click')
-  });
-
-  const pageClick = (e: MouseEvent) => {
-    const target = e.target as HTMLElement | undefined;
-    if (target === menuElement || (target && menuElement.contains(target))) {
-      return;
-    }
-    dispatch('clickoutside');
-  };
-
-  // TODO: Remove tab from here, need to properly handle passing focus for a11y!
-  const handleKey = (e: KeyboardEvent) => {
-    if (['Escape', 'ArrowUp', 'ArrowDown', 'Tab'].includes(e.code)) {
-      return setState();
-    }
-  };
-</script>
-
-<svelte:body
-  on:click={pageClick}
-  on:mouseleave={() => setState()}
-  on:keydown={(e) => handleKey(e)}
-/>
-
-<div
-  style="top: {y}px; left: {x}px"
-  in:fade={{
-    duration: BASE_ANIMATION_DURATION * 0.5,
-    easing: circOut
-  }}
-  out:fade={{
-    duration: BASE_ANIMATION_DURATION * 0.5,
-    easing: circIn
-  }}
-  bind:this={menuElement}
->
-  <slot />
-</div>
-
-<style lang="scss">
-  div {
-    @apply fixed z-20 grid min-w-[14rem] overflow-hidden rounded-lg border border-black/40 bg-light/50 py-2 text-dark backdrop-blur-md;
-  }
-
-  :global(.dark) {
-    div {
-      @apply border-light/40 bg-black/50 text-light;
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/context-menu/menu.ts b/svelte-app/src/components/context-menu/menu.ts
deleted file mode 100644
index 108b2fd1a..000000000
--- a/svelte-app/src/components/context-menu/menu.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-const key = {};
-
-export { key };
diff --git a/svelte-app/src/components/context-menu/option.svelte b/svelte-app/src/components/context-menu/option.svelte
deleted file mode 100644
index 030571df2..000000000
--- a/svelte-app/src/components/context-menu/option.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, getContext } from 'svelte';
-
-  import Hoverable from '$components/hoverable.svelte';
-
-  import Icon from '../icon.svelte';
-  import { key } from './menu';
-
-  export let disabled = false;
-  export let icon: string;
-  export let text = '';
-  export let index = 0;
-
-  const dispatch = createEventDispatcher();
-
-  // @ts-expect-error getContext isn't typed
-  const { dispatchClick } = getContext(key);
-
-  const handleClick = () => {
-    if (disabled) {
-      return;
-    }
-    dispatch('click');
-    dispatchClick();
-  };
-</script>
-
-<Hoverable>
-  <div
-    class="flex w-full max-w-[460px] items-center justify-start gap-4 px-4 py-2 {disabled
-      ? 'cursor-not-allowed bg-dark/10 text-stone-800 dark:bg-light/10'
-      : 'cursor-pointer hover:bg-dark/20 dark:hover:bg-light/20'}"
-    data-test-option-index={index}
-    role="button"
-    tabindex="0"
-    on:click={handleClick}
-    on:keydown={(e) => {
-      if (e.code === 'Enter' || e.code === 'Space') {
-        handleClick();
-      }
-    }}
-  >
-    {#if text !== ''}
-      <div class="mb-[2px] w-[20px]">
-        <Icon {icon} />
-      </div>
-      <p
-        class="mr-2 line-clamp-1 w-fit max-w-full overflow-ellipsis break-all font-sans text-base"
-      >
-        {text}
-      </p>
-    {:else}
-      <slot />
-    {/if}
-  </div>
-</Hoverable>
diff --git a/svelte-app/src/components/document/content/content.svelte b/svelte-app/src/components/document/content/content.svelte
index 7480a30fe..96f84948e 100644
--- a/svelte-app/src/components/document/content/content.svelte
+++ b/svelte-app/src/components/document/content/content.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import Divider from '$components/divider.svelte';
-  import Footer from '$components/document/content/common/footer.svelte';
-  import Header from '$components/document/content/common/header.svelte';
+  import Footer from '$components/document/content/footer.svelte';
+  import Header from '$components/document/content/header.svelte';
   import EmptyContent from '$components/empty-content.svelte';
   import PortableText from '$components/portable-text/portable-text.svelte';
 
   import type { PostDocument, ProjectDocument, ProjectImage, RouteFetch } from '$types';
 
   export let data: PostDocument | ProjectDocument,
-    images: ProjectImage[] | undefined,
+    images: ProjectImage[] | undefined = undefined,
     model = data._type,
     routeFetch: RouteFetch | undefined = undefined;
 </script>
diff --git a/svelte-app/src/components/document/content/common/footer.svelte b/svelte-app/src/components/document/content/footer.svelte
similarity index 90%
rename from svelte-app/src/components/document/content/common/footer.svelte
rename to svelte-app/src/components/document/content/footer.svelte
index 5a029dd26..313e2553a 100644
--- a/svelte-app/src/components/document/content/common/footer.svelte
+++ b/svelte-app/src/components/document/content/footer.svelte
@@ -17,9 +17,9 @@
   <div>
     <h1 class="my-4 font-display text-2xl font-bold">{$t('Links')}</h1>
     <span class="flex items-center justify-start gap-2 text-base">
-      <Icon icon="ExternalLink" class="mb-0.5" inline />
+      <Icon icon="GitCommit" class="mb-0.5" inline />
       <Link href={data.github}>
-        {'github/' + data.github.split('github.com/')?.[1]}
+        {'github.com/' + data.github.split('github.com/')?.[1]}
       </Link>
     </span>
   </div>
diff --git a/svelte-app/src/components/document/content/common/header.svelte b/svelte-app/src/components/document/content/header.svelte
similarity index 82%
rename from svelte-app/src/components/document/content/common/header.svelte
rename to svelte-app/src/components/document/content/header.svelte
index 1aaa7ef7d..e2745941d 100644
--- a/svelte-app/src/components/document/content/common/header.svelte
+++ b/svelte-app/src/components/document/content/header.svelte
@@ -15,7 +15,7 @@
   import type { PostDocument, ProjectDocument, ProjectImage, PTBlock } from '$types';
 
   export let data: PostDocument | ProjectDocument,
-    images: ProjectImage[] | undefined,
+    images: ProjectImage[] | undefined = undefined,
     model = data._type;
 
   const readingTime = getReadingTime(getTotalWords((data?.body ?? []) as PTBlock[]));
@@ -39,8 +39,14 @@
       </p>
       <BulletPoint />
       <p class="cursor-default font-mono text-base">
-        {$t('{views} views', { views: $parseViews(data.views) })}
+        {$t('{views} views', { views: $parseViews((data.views ?? 0) + 1) })}
       </p>
+      {#if data._type === 'project' && data.githubStars !== undefined && data.githubStars > 0}
+        <BulletPoint />
+        <p class="cursor-default font-mono text-base">
+          {$t('{stars} stars', { stars: $parseViews(data.githubStars) })}
+        </p>
+      {/if}
     </div>
     <ArrowButton
       class="focusOutline-sm -mb-1 hidden flex-1 whitespace-nowrap rounded-sm text-right sm:block"
@@ -57,9 +63,14 @@
   </div>
   {#if data._type === 'project' && (data.tags?.length || data.github)}
     <Divider />
-    <div class="flex flex-row flex-wrap items-center justify-start gap-0.5 text-base">
+    <div
+      class="flex flex-row flex-wrap items-center justify-start gap-0.5 gap-y-3 text-base"
+    >
       {#if data._type === 'project' && data.tags?.length}
-        <div class="flex flex-row flex-wrap items-center justify-start gap-2">
+        <div
+          class="flex flex-row flex-wrap items-center justify-start gap-2"
+          aria-label={$t('Tags')}
+        >
           {#each data.tags as tag}
             <span
               class="cursor-default rounded-sm bg-dark/10 px-1.5 py-0.5 font-code text-base transition-colors dark:bg-light/10"
@@ -75,7 +86,7 @@
       {#if data._type === 'project' && data.github}
         <span class="font-mono">
           <Link href={data.github}>
-            {'github/' + data.github.split('github.com/')?.[1]}
+            {'github.com/' + data.github.split('github.com/')?.[1]}
           </Link>
         </span>
       {/if}
diff --git a/svelte-app/src/components/document/content/post/header.svelte b/svelte-app/src/components/document/content/post/header.svelte
deleted file mode 100644
index f326f3449..000000000
--- a/svelte-app/src/components/document/content/post/header.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="relative z-[1]">
-  <slot name="title" />
-  <slot name="meta" />
-  <slot />
-</div>
diff --git a/svelte-app/src/components/document/content/project/header.svelte b/svelte-app/src/components/document/content/project/header.svelte
deleted file mode 100644
index f326f3449..000000000
--- a/svelte-app/src/components/document/content/project/header.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="relative z-[1]">
-  <slot name="title" />
-  <slot name="meta" />
-  <slot />
-</div>
diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte
index 42af3af41..3f7011ba2 100644
--- a/svelte-app/src/components/document/route.svelte
+++ b/svelte-app/src/components/document/route.svelte
@@ -13,7 +13,7 @@
 
   export let data: ProjectDocument | PostDocument,
     model = data._type,
-    images: ProjectImage[] | undefined;
+    images: ProjectImage[] | undefined = undefined;
 
   let pageUnsubscriber: Unsubscriber;
 
diff --git a/svelte-app/src/components/empty-content.svelte b/svelte-app/src/components/empty-content.svelte
index c59cd2087..ef613cf95 100644
--- a/svelte-app/src/components/empty-content.svelte
+++ b/svelte-app/src/components/empty-content.svelte
@@ -1,9 +1,20 @@
 <script lang="ts">
-  import IconHeader from '$components/headings/icon-header.svelte';
+  import { t } from '$i18n';
 
-  export let text = 'Hm, it seems empty around here...';
+  import Icon from '$components/icon.svelte';
 </script>
 
-<div class="my-8" data-test-id="error-text">
-  <IconHeader icon={'Downasaur'} {text} />
+<div data-test-id="error-text">
+  <Icon icon="Downasaur" />
+  <p>{$t('Hm, it seems empty around here...')}</p>
 </div>
+
+<style lang="scss">
+  div {
+    @apply my-8 mb-2 mt-8 flex h-fit w-full select-none flex-row items-center justify-start gap-3;
+  }
+
+  p {
+    @apply font-code text-lg font-bold;
+  }
+</style>
diff --git a/svelte-app/src/components/footer.svelte b/svelte-app/src/components/footer.svelte
index 3177cbe7b..8695cbf14 100644
--- a/svelte-app/src/components/footer.svelte
+++ b/svelte-app/src/components/footer.svelte
@@ -5,6 +5,8 @@
   import Divider from '$components/divider.svelte';
   import Icon from '$components/icon.svelte';
 
+  import Tooltip from './tooltip.svelte';
+
   import type { SiteConfig } from '$types';
 
   export let config: SiteConfig;
@@ -34,15 +36,17 @@
     {/if}
     {#if APP_VERSION?.length}
       <div class="version">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://github.com/kiosion/kio.dev/commit/{APP_VERSION}"
-          aria-label={$t('View latest commit on GitHub')}
-        >
-          <Icon icon="GitCommit" inline />
-          {APP_VERSION.slice(0, 6)}
-        </a>
+        <Tooltip text={$t('View latest commit on GitHub')} position="top" delay={400}>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/kiosion/kio.dev/commit/{APP_VERSION}"
+            aria-label={$t('View latest commit on GitHub')}
+          >
+            <Icon icon="GitCommit" inline />
+            {APP_VERSION.slice(0, 6)}
+          </a>
+        </Tooltip>
       </div>
     {/if}
   </div>
diff --git a/svelte-app/src/components/headings/headed-block.svelte b/svelte-app/src/components/headings/headed-block.svelte
index e5eb8f9c8..26ffce563 100644
--- a/svelte-app/src/components/headings/headed-block.svelte
+++ b/svelte-app/src/components/headings/headed-block.svelte
@@ -2,11 +2,9 @@
   export let heading: string;
 </script>
 
-<section class={$$props.class || undefined}>
+<section>
   <h1>{heading}</h1>
-  <div>
-    <slot />
-  </div>
+  <div><slot /></div>
 </section>
 
 <style lang="scss">
diff --git a/svelte-app/src/components/headings/icon-header.svelte b/svelte-app/src/components/headings/icon-header.svelte
deleted file mode 100644
index 440d6c889..000000000
--- a/svelte-app/src/components/headings/icon-header.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-  import Icon from '$components/icon.svelte';
-
-  export let text: string, icon: string;
-</script>
-
-<div class={$$props.class || 'mb-2 mt-8 h-fit w-full'}>
-  <Icon {icon} />
-  <h3>{text}</h3>
-</div>
-
-<style lang="scss">
-  div {
-    @apply flex select-none flex-row items-center justify-start gap-3;
-
-    h3 {
-      @apply font-code text-lg font-bold;
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/layouts/page-transition.svelte b/svelte-app/src/components/layouts/page-transition.svelte
index c24882250..f21c2bc4d 100644
--- a/svelte-app/src/components/layouts/page-transition.svelte
+++ b/svelte-app/src/components/layouts/page-transition.svelte
@@ -4,19 +4,12 @@
   import { BASE_ANIMATION_DURATION } from '$lib/consts';
 
   export let pathname: string | undefined;
+
+  const duration = BASE_ANIMATION_DURATION * 0.5;
 </script>
 
-<!-- TODO: This method is broken (& has been for a while), see https://github.com/sveltejs/svelte/issues/6152 -->
-<!-- For now, the alternative is to not use a Key block, and simply import this component -->
-<!-- in each individual subroute... which is Not happening, lol -->
 {#key pathname}
-  <div
-    in:fade={{
-      duration: BASE_ANIMATION_DURATION * 0.5,
-      delay: BASE_ANIMATION_DURATION * 0.5
-    }}
-    out:fade={{ duration: BASE_ANIMATION_DURATION * 0.5 }}
-  >
+  <div in:fade={{ duration, delay: duration }} out:fade={{ duration }}>
     <slot />
   </div>
 {/key}
diff --git a/svelte-app/src/components/layouts/scroll-container.svelte b/svelte-app/src/components/layouts/scroll-container.svelte
index ff9f1d451..11cf5ce34 100644
--- a/svelte-app/src/components/layouts/scroll-container.svelte
+++ b/svelte-app/src/components/layouts/scroll-container.svelte
@@ -4,9 +4,7 @@
   import { afterNavigate } from '$app/navigation';
   import { BASE_TRANSITION_DURATION } from '$lib/consts';
 
-  export let element: HTMLDivElement;
-
-  let timeout: ReturnType<typeof setTimeout> | undefined;
+  let element: HTMLDivElement, timeout: ReturnType<typeof setTimeout> | undefined;
 
   onDestroy(() => {
     if (timeout) {
diff --git a/svelte-app/src/components/lists/list-item.svelte b/svelte-app/src/components/lists/list-item.svelte
index 4bd520b80..940a2391b 100644
--- a/svelte-app/src/components/lists/list-item.svelte
+++ b/svelte-app/src/components/lists/list-item.svelte
@@ -3,7 +3,6 @@
   import { formatDate } from '$lib/helpers/date';
   import { parseViews } from '$lib/views';
 
-  import BulletPoint from '$components/bullet-point.svelte';
   import Hoverable from '$components/hoverable.svelte';
 
   import type { PostDocument, ProjectDocument } from '$types';
@@ -28,24 +27,24 @@
     data-sveltekit-preload-data
   >
     <div
-      class="mt-0.5 flex flex-row items-center justify-start font-mono text-sm text-dark/80 transition-colors dark:text-light/80 {small
+      class="mt-0.5 flex flex-row items-center justify-start gap-3 font-mono text-sm text-dark/80 transition-colors dark:text-light/80 {small
         ? 'mb-1.5'
         : 'mb-2'}"
-      class:gap-3={document.tags?.length}
-      class:gap-0.5={!document.tags?.length}
     >
       <p aria-label={$t('Date posted')}>
-        {formatDate(document.date || document._createdAt, 'dayMonth', $currentLang)}
+        {formatDate(
+          document.date || document._createdAt,
+          small ? 'med' : 'short',
+          $currentLang
+        )}
       </p>
       {#if document.tags?.length}
         <span
           class="rounded-sm bg-dark/10 px-1.5 py-0.5 font-code text-sm transition-colors dark:bg-light/10"
           >{document.tags[0].title.toLowerCase()}</span
         >
-      {:else}
-        <BulletPoint />
       {/if}
-      <p>{$t('{views} views', { views: $parseViews(document.views) })}</p>
+      <p>{$t('{views} views', { views: $parseViews((document.views ?? 0) + 1) })}</p>
     </div>
 
     <h1
diff --git a/svelte-app/src/components/lists/year-list.svelte b/svelte-app/src/components/lists/year-list.svelte
new file mode 100644
index 000000000..1b0228c7b
--- /dev/null
+++ b/svelte-app/src/components/lists/year-list.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { sortDocumentsByYear } from '$helpers/date';
+
+  import ListItem from '$components/lists/list-item.svelte';
+
+  import type { PostDocument, ProjectDocument } from '$types';
+
+  export let documents: (ProjectDocument | PostDocument)[];
+
+  const sortedDocuments = sortDocumentsByYear(documents);
+</script>
+
+<div class="year-list-wrapper">
+  {#each sortedDocuments as object}
+    <section>
+      <h1>{object.year}</h1>
+      <div>
+        {#each object.items as item}
+          <ListItem document={item} />
+        {/each}
+      </div>
+    </section>
+  {/each}
+</div>
+
+<style lang="scss">
+  @import '@styles/mixins';
+
+  .year-list-wrapper {
+    @apply mt-8 flex flex-col gap-10;
+  }
+
+  section {
+    @apply flex flex-col items-start justify-start gap-3;
+
+    h1 {
+      @apply min-w-[5rem] font-code text-3xl font-black transition-colors;
+    }
+
+    div {
+      @apply ml-1 mt-1 flex flex-col items-start justify-start gap-6;
+
+      @include media(md) {
+        @apply ml-0;
+      }
+    }
+
+    @include media(md) {
+      @apply flex-row;
+    }
+  }
+</style>
diff --git a/svelte-app/src/languages/en.json b/svelte-app/src/languages/en.json
index b3f8097d8..4f9989f98 100644
--- a/svelte-app/src/languages/en.json
+++ b/svelte-app/src/languages/en.json
@@ -3,122 +3,57 @@
   "A bit about me and what I do": "A bit about me and what I do",
   "A blog post on kio.dev": "A blog post on kio.dev",
   "A collection of my work, open-source contributions, and personal projects": "A collection of my work, open-source contributions, and personal projects",
-  "A peek into my current adventures in tech and beyond": "A peek into my current adventures in tech and beyond",
+  "A project on kio.dev": "A project on kio.dev",
   "About": "About",
   "About me": "About me",
   "Back": "Back",
-  "Back to login": "Back to login",
   "Blog": "Blog",
-  "Cancel": "Cancel",
-  "Cast": "Cast",
-  "Change language": "Change language",
   "Click here to": "Click here to",
   "Code block": "Code block",
-  "Continue": "Continue",
-  "Copy code block": "Copy code block",
-  "Copy email address": "Copy email address",
-  "Copy image address": "Copy image address",
-  "Copy link address": "Copy link address",
-  "Copy selection": "Copy selection",
-  "Copy to clipboard": "Copy to clipboard",
   "Date posted": "Date posted",
-  "Disable sounds": "Disable sounds",
-  "Enable sounds": "Enable sounds",
   "English": "English",
   "Error": "Error",
   "Etc": "Etc",
-  "Features": "Features",
   "Footnotes": "Footnotes",
-  "Forward": "Forward",
   "French": "French",
-  "Go to": "Go to",
   "Go to footnote": "Go to footnote",
   "Go to footnote source": "Go to footnote source",
-  "Hi there, welcome to my little corner of the internet! Here you'll find": "Hi there, welcome to my little corner of the internet! Here you'll find",
-  "Hide Contents": "Hide Contents",
-  "Hide Sidebar": "Hide Sidebar",
   "Hide stack trace": "Hide stack trace",
   "Home": "Home",
-  "Index": "Index",
-  "Just now": "Just now",
-  "Language": "Language",
   "Links": "Links",
-  "Log in": "Log in",
-  "Log in with {provider}": "Log in with {provider}",
-  "Logged in": "Logged in",
-  "Logged out": "Logged out",
-  "Mail": "Mail",
   "Meta": "Meta",
-  "Meta + Contact": "Meta + Contact",
   "More": "More",
-  "My thoughts on tech, design, and development things": "My thoughts on tech, design, and development things",
-  "My work": "My work",
-  "Next": "Next",
-  "Now": "Now",
-  "Open image in new tab": "Open image in new tab",
-  "Open image in new window": "Open image in new window",
-  "Open link in new tab": "Open link in new tab",
-  "Open link in new window": "Open link in new window",
   "PGP": "PGP",
   "Page content": "Page content",
-  "Pinned": "Pinned",
-  "Please try again.": "Please try again.",
   "Post": "Post",
   "Posts": "Posts",
   "Project": "Project",
   "Projects": "Projects",
-  "Projects & Talks": "Projects & Talks",
   "Read more": "Read more",
-  "Recent": "Recent",
-  "Recent '{tag}' posts": "Recent '{tag}' posts",
-  "Recent '{tag}' work": "Recent '{tag}' work",
   "Recent posts": "Recent posts",
-  "Recent posts tagged with": "Recent posts tagged with",
   "Recent projects": "Recent projects",
   "Recent thoughts": "Recent thoughts",
-  "Redirecting": "Redirecting",
-  "Reload": "Reload",
-  "Save image": "Save image",
   "Say hello": "Say hello",
-  "Scroll to top": "Scroll to top",
   "See more": "See more",
-  "Show Contents": "Show Contents",
-  "Show Sidebar": "Show Sidebar",
   "Show stack trace": "Show stack trace",
   "Skip to content": "Skip to content",
+  "Sorry, something went wrong. Please try again.": "Sorry, something went wrong. Please try again.",
   "Switch to english": "Switch to english",
   "Switch to french": "Switch to french",
-  "Switch to {language}": "Switch to {language}",
-  "Table of Contents": "Table of Contents",
-  "Tag": "Tag",
   "Tags": "Tags",
   "Thoughts": "Thoughts",
   "Thoughts about tech, design, and development": "Thoughts about tech, design, and development",
-  "Toggle theme": "Toggle theme",
   "Use dark theme": "Use dark theme",
   "Use light theme": "Use light theme",
+  "View latest commit on GitHub": "View latest commit on GitHub",
   "View more": "View more",
-  "View more posts": "View more posts",
-  "View page source": "View page source",
   "Want to send a secure message my way? Here's my main PGP key:": "Want to send a secure message my way? Here's my main PGP key:",
-  "Want to send a secure message my way? Now you can :)": "Want to send a secure message my way? Now you can :)",
-  "What I'm up to now": "What I'm up to now",
-  "What I've made": "What I've made",
-  "What I've worked on": "What I've worked on",
   "Where I've worked": "Where I've worked",
   "Work": "Work",
   "a bit about me": "a bit about me",
-  "and": "and",
-  "blog & portfolio": "blog & portfolio",
   "go back": "go back",
-  "index": "index",
-  "my blog": "my blog",
-  "my work": "my work",
-  "now": "now",
   "present": "present",
-  "to": "to",
-  "what I'm up to right now": "what I'm up to right now",
-  "{duration} ago": "{duration} ago",
   "{length} min read": "{length} min read",
+  "{stars} stars": "{stars} stars",
   "{views} views": "{views} views"
 }
\ No newline at end of file
diff --git a/svelte-app/src/languages/fr.json b/svelte-app/src/languages/fr.json
index dd9ff6da9..bd3bb649f 100644
--- a/svelte-app/src/languages/fr.json
+++ b/svelte-app/src/languages/fr.json
@@ -3,122 +3,57 @@
   "A bit about me and what I do": "Un peu à propos de moi et de ce que je fais",
   "A blog post on kio.dev": "Un article de blog sur kio.dev",
   "A collection of my work, open-source contributions, and personal projects": "Une collection de mon travail, de mes contributions open-source et de mes projets personnels",
-  "A peek into my current adventures in tech and beyond": "Un aperçu de mes aventures actuelles dans le monde de la technologie et au-delà",
+  "A project on kio.dev": "Un projet sur kio.dev",
   "About": "À propos",
   "About me": "À propos de moi",
   "Back": "Retour",
-  "Back to login": "Retour à la connexion",
   "Blog": "Blog",
-  "Cancel": "Annuler",
-  "Cast": "Cast",
-  "Change language": "Changer de langue",
   "Click here to": "Cliquez ici pour",
   "Code block": "Bloc de code",
-  "Continue": "Continuer",
-  "Copy code block": "Copier le bloc de code",
-  "Copy email address": "Copier l'adresse e-mail",
-  "Copy image address": "Copier l'adresse de l'image",
-  "Copy link address": "Copier l'adresse du lien",
-  "Copy selection": "Copier la sélection",
-  "Copy to clipboard": "Copier dans le presse-papier",
   "Date posted": "Date de publication",
-  "Disable sounds": "Désactiver les effets sonores",
-  "Enable sounds": "Activer les effets sonores",
   "English": "Anglais",
   "Error": "Erreur",
   "Etc": "Etc",
-  "Features": "Fonctionnalités",
   "Footnotes": "Notes de bas de page",
-  "Forward": "Vers l'avant",
   "French": "Français",
-  "Go to": "Aller à",
   "Go to footnote": "Aller à la note de bas de page",
   "Go to footnote source": "Aller à la source de la note de bas de page",
-  "Hi there, welcome to my little corner of the internet! Here you'll find": "Salut, bienvenue dans mon petit coin d'internet! Ici vous trouverez",
-  "Hide Contents": "Masquer le Contenu",
-  "Hide Sidebar": "Masquer la barre latérale",
   "Hide stack trace": "Masquer la trace de la pile",
   "Home": "Accueil",
-  "Index": "Page d'accueil",
-  "Just now": "À l'instant",
-  "Language": "Langue",
   "Links": "Liens",
-  "Log in": "Se connecter",
-  "Log in with {provider}": "Se connecter avec {provider}",
-  "Logged in": "Connecté",
-  "Logged out": "Déconnecté",
-  "Mail": "Envoyer un e-mail",
   "Meta": "Plus",
-  "Meta + Contact": "Plus + Contacter",
   "More": "Plus",
-  "My thoughts on tech, design, and development things": "Mes pensées sur les choses de technologie, de design et de développement",
-  "My work": "Mon travail",
-  "Next": "Suivant",
-  "Now": "Maintenant:",
-  "Open image in new tab": "Ouvrir l'image dans un nouvel onglet",
-  "Open image in new window": "Ouvrir l'image dans une nouvelle fenêtre",
-  "Open link in new tab": "Ouvrir un lien dans un nouvel onglet",
-  "Open link in new window": "Ouvre le lien dans une nouvelle fenêtre",
   "PGP": "PGP",
   "Page content": "Contenu de la page",
-  "Pinned": "Épinglé",
-  "Please try again.": "Veuillez réessayer.",
   "Post": "Article",
   "Posts": "Articles",
   "Project": "Projet",
   "Projects": "Projets",
-  "Projects & Talks": "Projets & Conférences",
   "Read more": "Lire la suite",
-  "Recent": "Récent",
-  "Recent '{tag}' posts": "Articles récents '{tag}'",
-  "Recent '{tag}' work": "Travail récent '{tag}'",
   "Recent posts": "Articles récents",
-  "Recent posts tagged with": "Articles récents avec le tag",
   "Recent projects": "Projets récents",
   "Recent thoughts": "Pensées récentes",
-  "Redirecting": "Redirection",
-  "Reload": "Rafraîchir la page",
-  "Save image": "Enregistrer l'image",
   "Say hello": "Dire bonjour",
-  "Scroll to top": "Défiler vers le haut",
   "See more": "Voir plus",
-  "Show Contents": "Afficher le Contenu",
-  "Show Sidebar": "Afficher la barre latérale",
   "Show stack trace": "Afficher la trace de la pile",
   "Skip to content": "Passer au contenu",
+  "Sorry, something went wrong. Please try again.": "Désolé, quelque chose s'est mal passé. Veuillez réessayer.",
   "Switch to english": "Passer à l'anglais",
   "Switch to french": "Passer au français",
-  "Switch to {language}": "Passer à {language}",
-  "Table of Contents": "Table des Matières",
-  "Tag": "Tag",
   "Tags": "Tags",
   "Thoughts": "Pensées",
   "Thoughts about tech, design, and development": "Pensées sur la technologie, le design et le développement",
-  "Toggle theme": "Changer de thème",
   "Use dark theme": "Utiliser le thème sombre",
   "Use light theme": "Utiliser le thème clair",
+  "View latest commit on GitHub": "Voir le dernier commit sur GitHub",
   "View more": "Voir plus",
-  "View more posts": "Voir plus d'articles",
-  "View page source": "Afficher la source de la page",
   "Want to send a secure message my way? Here's my main PGP key:": "Voulez-vous envoyer un message sécurisé à ma façon? Voici ma clé PGP principale:",
-  "Want to send a secure message my way? Now you can :)": "Voulez-vous envoyer un message sécurisé à ma façon? Maintenant vous pouvez :)",
-  "What I'm up to now": "Ce que je fais actuellement",
-  "What I've made": "Ce que j'ai fait",
-  "What I've worked on": "Sur quoi j'ai travaillé",
   "Where I've worked": "Où j'ai travaillé",
   "Work": "Travail",
   "a bit about me": "un peu à propos de moi",
-  "and": "et",
-  "blog & portfolio": "blog & portefeuille",
   "go back": "retourner",
-  "index": "page d'accueil",
-  "my blog": "mon blog",
-  "my work": "mon travail",
-  "now": "maintenant",
   "present": "présent",
-  "to": "à",
-  "what I'm up to right now": "ce que je fais a présent",
-  "{duration} ago": "il y a {duration}",
   "{length} min read": "{length} minute de lecture",
+  "{stars} stars": "{stars} étoiles",
   "{views} views": "{views} vues"
 }
\ No newline at end of file
diff --git a/svelte-app/src/lib/data.server.ts b/svelte-app/src/lib/data.server.ts
index bbf81eaa0..e27f6e6c6 100644
--- a/svelte-app/src/lib/data.server.ts
+++ b/svelte-app/src/lib/data.server.ts
@@ -5,16 +5,19 @@ export type ResponseOrError =
   | {
       code: null | undefined;
       message: never;
+      detail: never;
       data: never;
     }
   | {
       code: number;
       message: string;
+      detail: string;
       data: never;
     }
   | {
       code: number;
       message: never;
+      detail: never;
       data: ResData;
     };
 
@@ -34,16 +37,27 @@ type Normalized =
   | {
       code: number;
       error: string;
+      detail?: string;
       data?: undefined;
       meta?: undefined;
     }
   | {
       code?: undefined;
       error?: undefined;
+      detail?: undefined;
       data: ResData['result'];
       meta: ResData['meta'] & { [key: string]: unknown };
     };
 
+export const endpointResponse = (content: Record<string, unknown>, status = 200) => {
+  return new Response(JSON.stringify(content), {
+    headers: {
+      'content-type': 'application/json; charset=utf-8'
+    },
+    status
+  });
+};
+
 /**
  * Util to serialize recieved API data to common types
  */
@@ -95,7 +109,8 @@ const fetchRemote = async (endpoint: string | URL): Promise<Normalized> => {
 
       return {
         code: response.status,
-        error: jsonResponse?.message || `Failed to fetch from ${endpoint}`
+        error: jsonResponse?.message || `Failed to fetch from ${endpoint}`,
+        detail: jsonResponse?.detail || undefined
       };
     }
 
diff --git a/svelte-app/src/lib/data.ts b/svelte-app/src/lib/data.ts
index c2fc9d6c0..067cf6348 100644
--- a/svelte-app/src/lib/data.ts
+++ b/svelte-app/src/lib/data.ts
@@ -1,3 +1,5 @@
+import Logger from '$lib/logger';
+
 import { error } from '@sveltejs/kit';
 
 const GENERIC_ERROR_NO_DATA = 'Failed to load required data.',
@@ -43,3 +45,23 @@ export const handleLoadError = <T>(data?: T | Error): Clean<T> => {
 
   return data as Clean<T>;
 };
+
+export const fetchRepoStats = async (fetch: typeof window.fetch, githubUrl?: string) => {
+  try {
+    const repo = githubUrl?.split('github.com/')?.[1];
+
+    if (!repo?.length) {
+      return { stars: 0, watchers: 0 };
+    }
+
+    const res = await fetch(`https://api.github.com/repos/${repo}`),
+      json = await res.json(),
+      stars = (json?.stargazers_count as number | undefined) ?? 0,
+      watchers = (json?.subscribers_count as number | undefined) ?? 0;
+
+    return { stars, watchers };
+  } catch (e) {
+    Logger.error('Failed to fetch stars for project', e);
+    return { stars: 0, watchers: 0 };
+  }
+};
diff --git a/svelte-app/src/lib/helpers/date.ts b/svelte-app/src/lib/helpers/date.ts
index a297d8cab..bbf0008a0 100644
--- a/svelte-app/src/lib/helpers/date.ts
+++ b/svelte-app/src/lib/helpers/date.ts
@@ -2,21 +2,9 @@ import { get } from 'svelte/store';
 
 import { currentLang } from '$i18n';
 
-/**
- * Date helper to return various common human-readable date formats
- * @param dateStr ISO8601 date string
- * @param format Optional date format name, defaults to 'full'
- * @returns Date in human readable format
- * @example
- * formatDate('2020-01-02', 'full') // January 2, 2020
- * formatDate('2020-01-02', 'med') // Jan, 2020
- * formatDate('2020-01-02', 'dayMonth') // 2 Jan
- * formatDate('2020-01-02', 'short') // 1/2/20
- * formatDate('2020-01-02', 'rel') // 1 year ago
- */
 export const formatDate = (
   dateStr: string,
-  format: 'huge' | 'full' | 'med' | 'short' | 'dayMonth' | 'rel' = 'full',
+  format: 'full' | 'med' | 'short' = 'full',
   lang: string = get(currentLang) || 'en'
 ) => {
   const date = new Date(dateStr);
@@ -27,54 +15,20 @@ export const formatDate = (
         day: 'numeric',
         year: 'numeric'
       }).format(date);
-    case 'med':
-      return new Intl.DateTimeFormat(lang, {
-        month: 'short',
-        year: 'numeric'
-      }).format(date);
     case 'short':
       return new Intl.DateTimeFormat(lang, {
-        month: 'numeric',
-        day: 'numeric',
-        year: '2-digit'
+        month: 'short',
+        day: 'numeric'
       }).format(date);
-    case 'dayMonth':
+    case 'med':
       return new Intl.DateTimeFormat(lang, {
         month: 'short',
-        day: 'numeric'
+        day: 'numeric',
+        year: 'numeric'
       }).format(date);
-    case 'rel': {
-      const rtf = new Intl.RelativeTimeFormat(lang, {
-          numeric: 'auto'
-        }),
-        diff = new Date().getTime() - date.getTime(),
-        years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365)),
-        months = Math.floor(diff / (1000 * 60 * 60 * 24 * 30)),
-        days = Math.floor(diff / (1000 * 60 * 60 * 24)),
-        hours = Math.floor(diff / (1000 * 60 * 60));
-
-      let str = 'now';
-
-      if (years > 0) {
-        str = rtf.format(-years, 'year');
-      } else if (months > 0) {
-        str = rtf.format(-months, 'month');
-      } else if (days > 0) {
-        str = rtf.format(-days, 'day');
-      } else if (hours > 0) {
-        str = rtf.format(-hours, 'hour');
-      }
-
-      return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
-    }
   }
 };
 
-/**
- * Get the estimated reading time for a given text
- * @param text String or array of strings to calculate reading time for
- * @returns Estimated reading time in minutes
- */
 export const getReadingTime = (words: number): number =>
   Math.ceil(words ?? 0 / (100 / 60));
 
diff --git a/svelte-app/src/lib/helpers/menu.ts b/svelte-app/src/lib/helpers/menu.ts
deleted file mode 100644
index 04991f9d1..000000000
--- a/svelte-app/src/lib/helpers/menu.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-import { get, writable } from 'svelte/store';
-
-import { page } from '$app/stores';
-import { isLocalized, t } from '$i18n';
-import { APP_LANGS } from '$lib/consts';
-
-import type { MenuState, MenuStateOpt } from '$types';
-
-const state = writable({} as MenuState);
-
-const appLangsRegex = `(${APP_LANGS.map((lang) => lang.toLowerCase()).join(
-  '|'
-)}|${APP_LANGS.map((lang) => lang.toUpperCase()).join('|')})`;
-
-const findSourceFile = (path: string) => {
-  if (get(isLocalized)) {
-    path = path.replace(new RegExp(`^/${appLangsRegex}`), '/');
-  }
-
-  const gitHubBase = 'https://github.com/kiosion/kio.dev/blob/main/svelte-app/',
-    baseDir = gitHubBase + 'src/routes/[[lang=lang]]/',
-    srcDirs = new Map<RegExp, string>([
-      [/^\/$/, '+page.svelte'],
-      [/^\/blog\/?$/, 'blog/+page.svelte'],
-      [/^\/blog\/([^/]+)\/?$/, 'blog/[slug]/+page@.svelte'],
-      [/^\/work\/?$/, 'work/+page.svelte'],
-      [/^\/work\/([^/]+)\/?$/, 'work/[slug]/+page@.svelte'],
-      [/^\/etc\/?$/, 'etc/+page.svelte']
-    ]);
-
-  for (const [re, dir] of srcDirs) {
-    if (re.test(path)) {
-      return baseDir + dir;
-    }
-  }
-
-  return gitHubBase;
-};
-
-const setState = (e?: MouseEvent, pageContainer?: HTMLElement) => {
-  if (!e) {
-    return state.set({
-      ...get(state),
-      open: false
-    });
-  } else if (get(state).open) {
-    return state.set({
-      ...get(state),
-      open: false
-    });
-  }
-
-  e.preventDefault();
-
-  let target = e.target as HTMLElement;
-  target = target?.closest('code') || target;
-  target = (target?.closest('button') as HTMLButtonElement) || target;
-  target = (target?.closest('a') as HTMLAnchorElement) || target;
-
-  // eslint-disable-next-line @typescript-eslint/require-await
-  const opts = (() => {
-    switch (target?.tagName.toUpperCase()) {
-      case 'A':
-        if ((target as HTMLAnchorElement).href.indexOf('mailto:') >= 0) {
-          return [
-            {
-              icon: 'MailArrowRight',
-              text: `${get(t)('Mail')} ${(target as HTMLAnchorElement).href.split(
-                ':'
-              )?.[1]}`,
-              action: () => window.open((target as HTMLAnchorElement).href, '_self')
-            },
-            {},
-            {
-              icon: 'Copy',
-              text: 'Copy email address',
-              action: () =>
-                navigator.clipboard.writeText((target as HTMLAnchorElement).href)
-            }
-          ];
-        }
-        return [
-          {
-            icon: 'Open',
-            text: get(t)('Open link in new tab'),
-            action: () => window.open((target as HTMLAnchorElement).href, '_blank')
-          },
-          {
-            icon: 'Open',
-            text: get(t)('Open link in new window'),
-            action: () =>
-              window.open(
-                (target as HTMLAnchorElement).href,
-                '_blank',
-                'width=1200, height=800'
-              )
-          },
-          {},
-          {
-            icon: 'Link',
-            text: `${get(t)('Go to')} '${(target as HTMLAnchorElement).href}'`,
-            action: () => window.open((target as HTMLAnchorElement).href, '_self')
-          },
-          {},
-          {
-            icon: 'Copy',
-            text: get(t)('Copy link address'),
-            action: () =>
-              navigator.clipboard.writeText((target as HTMLAnchorElement).href)
-          }
-        ];
-      case 'IMG':
-        return [
-          {
-            icon: 'Open',
-            text: get(t)('Open image in new tab'),
-            action: () => window.open((target as HTMLImageElement).src, '_blank')
-          },
-          {
-            icon: 'Open',
-            text: get(t)('Open image in new window'),
-            action: () =>
-              window.open(
-                (target as HTMLImageElement).src,
-                '_blank',
-                'width=1200, height=800'
-              )
-          },
-          {},
-          {
-            icon: 'Save',
-            text: get(t)('Save image'),
-            action: () =>
-              window.open(`${(target as HTMLImageElement).src}&download`, '_blank')
-          },
-          {
-            icon: 'Copy',
-            text: get(t)('Copy image address'),
-            action: () => navigator.clipboard.writeText((target as HTMLImageElement).src)
-          }
-        ];
-      case 'CODE':
-        return [
-          {
-            icon: 'Copy',
-            text: get(t)('Copy code block'),
-            action: () => navigator.clipboard.writeText(target.innerText)
-          }
-        ];
-      case 'BUTTON':
-      default:
-        return [
-          {
-            icon: 'ArrowLeft',
-            text: get(t)('Back'),
-            action: () => history.back()
-          },
-          {
-            icon: 'ArrowRight',
-            text: get(t)('Forward'),
-            action: () => history.forward()
-          },
-          {
-            icon: 'Reload',
-            text: get(t)('Reload'),
-            action: () => location.reload()
-          },
-          {},
-          {
-            icon: 'Code',
-            text: get(t)('View page source'),
-            action: () => window.open(findSourceFile(get(page).url.pathname), '_blank')
-          }
-        ];
-    }
-  })() as MenuStateOpt[];
-
-  const selection = window.getSelection()?.toString();
-  if (selection && selection.trim() !== '') {
-    opts.unshift({});
-    opts.unshift({
-      icon: 'Copy',
-      text: get(t)('Copy selection'),
-      action: () => navigator.clipboard.writeText(selection)
-    });
-  }
-
-  const { left, top } = pageContainer
-    ? pageContainer.getBoundingClientRect()
-    : { left: 0, top: 0 };
-
-  const res = {
-    pos: { x: e.clientX - left, y: e.clientY - top },
-    opts,
-    target,
-    open: true
-  };
-
-  if (get(state).open) {
-    state.set({
-      ...get(state),
-      open: false
-    });
-
-    return setTimeout(() => {
-      state.set(res);
-    }, 200);
-  }
-
-  return state.set(res);
-};
-
-export { setState, state };
diff --git a/svelte-app/src/lib/helpers/navigation.ts b/svelte-app/src/lib/helpers/navigation.ts
index c4543d2e6..f14619478 100644
--- a/svelte-app/src/lib/helpers/navigation.ts
+++ b/svelte-app/src/lib/helpers/navigation.ts
@@ -2,50 +2,7 @@ import { derived } from 'svelte/store';
 
 import { page } from '$app/stores';
 import { isLocalized, t } from '$i18n';
-import { APP_LANGS, APP_ROUTES, BASE_PAGE_TITLE, ROUTE_ORDER } from '$lib/consts';
-
-const langRegex = new RegExp(`^/(${APP_LANGS.join('|')})`),
-  firstSegRegex = /^\/([^/]+)/,
-  subsequentSegRegex = /\//g;
-
-const normalizePath = (path: string) => {
-  if (path.match(langRegex)) {
-    path = path.slice(3);
-  }
-
-  if (!path || path === '/') {
-    return 'index';
-  }
-
-  const firstSegmentMatch = path.match(firstSegRegex);
-
-  if (!firstSegmentMatch) {
-    return '';
-  }
-
-  const subsequentSegmentsCount = (path.match(subsequentSegRegex) || []).length - 1;
-
-  return firstSegmentMatch[1] + '/*'.repeat(subsequentSegmentsCount);
-};
-
-const forward = new Set<string>();
-
-for (let i = 0; i < ROUTE_ORDER.length - 1; ++i) {
-  for (let j = i + 1; j < ROUTE_ORDER.length; ++j) {
-    forward.add(`${ROUTE_ORDER[i]}-${ROUTE_ORDER[j]}`);
-  }
-}
-
-let prevPath: string;
-
-export const onNav = (path: string) => {
-  const newPath = normalizePath(path),
-    oldPath = prevPath ? prevPath : newPath;
-
-  prevPath = newPath;
-
-  return forward.has(`${oldPath}-${newPath}`) ? 'forward' : 'backward';
-};
+import { APP_ROUTES, BASE_PAGE_TITLE } from '$lib/consts';
 
 export const pageTitle = derived([isLocalized, t, page], (vals) => {
   const basePathname = vals[2]?.url?.pathname ?? '/',
diff --git a/svelte-app/src/lib/icons.ts b/svelte-app/src/lib/icons.ts
index f531c4845..880f735c6 100644
--- a/svelte-app/src/lib/icons.ts
+++ b/svelte-app/src/lib/icons.ts
@@ -1,27 +1,18 @@
 import Logger from '$lib/logger';
 
 import Alert from 'pixelarticons/svg/alert.svg';
-import ArrowBarUp from 'pixelarticons/svg/arrow-bar-up.svg';
 import ArrowLeft from 'pixelarticons/svg/arrow-left.svg';
 import ArrowRight from 'pixelarticons/svg/arrow-right.svg';
 import ArrowUp from 'pixelarticons/svg/arrow-up.svg';
 import BackBurger from 'pixelarticons/svg/backburger.svg';
-import Cast from 'pixelarticons/svg/cast.svg';
 import Check from 'pixelarticons/svg/check.svg';
-import ChevronDown from 'pixelarticons/svg/chevron-down.svg';
-import Code from 'pixelarticons/svg/code.svg';
 import Copy from 'pixelarticons/svg/copy.svg';
 import Downasaur from 'pixelarticons/svg/downasaur.svg';
-import ExternalLink from 'pixelarticons/svg/external-link.svg';
 import ForwardBurger from 'pixelarticons/svg/forwardburger.svg';
 import GitCommit from 'pixelarticons/svg/git-commit.svg';
-import Label from 'pixelarticons/svg/label.svg';
 import Link from 'pixelarticons/svg/link.svg';
 import MailArrowRight from 'pixelarticons/svg/mail-arrow-right.svg';
 import MoonStars from 'pixelarticons/svg/moon-stars.svg';
-import Open from 'pixelarticons/svg/open.svg';
-import Reload from 'pixelarticons/svg/reload.svg';
-import Save from 'pixelarticons/svg/save.svg';
 import Script from 'pixelarticons/svg/script.svg';
 import Sun from 'pixelarticons/svg/sun.svg';
 
@@ -30,36 +21,26 @@ import type { ComponentType } from 'svelte';
 
 export const icons = {
   alert: Alert,
-  'arrow-bar-up': ArrowBarUp,
   'arrow-left': ArrowLeft,
   'arrow-right': ArrowRight,
   'arrow-up': ArrowUp,
   'back-burger': BackBurger,
-  cast: Cast,
   check: Check,
-  'chevron-down': ChevronDown,
-  code: Code,
   copy: Copy,
   downasaur: Downasaur,
-  'external-link': ExternalLink,
   'forward-burger': ForwardBurger,
   'git-commit': GitCommit,
-  label: Label,
   link: Link,
   'mail-arrow-right': MailArrowRight,
   'moon-stars': MoonStars,
-  open: Open,
-  reload: Reload,
-  save: Save,
   script: Script,
   sun: Sun
 };
 
-const transformName = (name: string) => {
-  return name
+const transformName = (name: string) =>
+  name
     .replace(/([a-z])([A-Z])|([A-Z])([A-Z](?=[a-z]))|([a-zA-Z])(\d)/g, '$1$3$5-$2$4$6')
     .toLowerCase();
-};
 
 const getIcon = (iconName: string) => {
   let name = transformName(iconName);
diff --git a/svelte-app/src/lib/store.ts b/svelte-app/src/lib/store.ts
index d54d840ec..543750168 100644
--- a/svelte-app/src/lib/store.ts
+++ b/svelte-app/src/lib/store.ts
@@ -91,6 +91,24 @@ const constructUrl = (
   return `${basePath}${queryParams.length ? `?${queryParams.join('&')}` : ''}`;
 };
 
+const incViews = (fetch: RouteFetch, doc: DocumentRegistry[keyof DocumentRegistry]) => {
+  if (doc._type !== 'post' && doc._type !== 'project') {
+    return;
+  }
+
+  try {
+    fetch(`${API_URL}mutate`, {
+      method: 'POST',
+      body: JSON.stringify({
+        id: doc._id,
+        action: 'inc'
+      })
+    });
+  } catch (e) {
+    Logger.error('', e);
+  }
+};
+
 const fetchData = async <T>(
   fetch: RouteFetch,
   url: string,
@@ -140,15 +158,17 @@ const findOne = async <T extends keyof DocumentRegistry>(
   model: T,
   params: PossibleParams = {}
 ): Promise<DocumentRegistry[T] | Error> => {
-  const cacheKey = JSON.stringify({ model, params, many: false });
+  const cacheKey = JSON.stringify({ model, params, many: false }),
+    url = constructUrl(model, params);
+
   if (browser && params.preview !== 'true') {
     const cachedData = cacheGet(cacheKey);
     if (cachedData) {
+      incViews(fetch, cachedData as DocumentRegistry[T]);
       return cachedData as DocumentRegistry[T];
     }
   }
 
-  const url = constructUrl(model, params);
   const response = await fetchData<DocumentRegistry[T]>(fetch, url, model);
   if (browser && params.preview !== 'true' && response && !(response instanceof Error)) {
     cacheSet(cacheKey, response);
diff --git a/svelte-app/src/routes/+error.svelte b/svelte-app/src/routes/+error.svelte
index 4587226e0..ca2a9aca1 100644
--- a/svelte-app/src/routes/+error.svelte
+++ b/svelte-app/src/routes/+error.svelte
@@ -9,7 +9,7 @@
   import Divider from '$components/divider.svelte';
   import Link from '$components/link.svelte';
 
-  let message = 'Sorry, something went wrong. Please try again later',
+  let message = 'Sorry, something went wrong. Please try again.',
     title = 'Unknown Error',
     showStack = false,
     status = $page.status;
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index e7184a5a8..b2264cc57 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import '../app.scss';
 
-  import { onDestroy, onMount, setContext } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import { get } from 'svelte/store';
   import { fly } from 'svelte/transition';
 
@@ -13,10 +13,8 @@
   import { check as checkTranslations, currentLang, isLocalized, t } from '$i18n';
   import { APP_LANGS, BASE_ANIMATION_DURATION, DEFAULT_APP_LANG } from '$lib/consts';
   import { ENV, SELF_BASE_URL } from '$lib/env';
-  import { setState as setMenuState, state as menuState } from '$lib/helpers/menu';
   import Settings, { loading } from '$stores/settings';
 
-  import ContextMenu from '$components/context-menu.svelte';
   import Footer from '$components/footer.svelte';
   import ContentWrapper from '$components/layouts/content-wrapper.svelte';
   import PageTransition from '$components/layouts/page-transition.svelte';
@@ -25,9 +23,7 @@
 
   import type { Unsubscriber } from 'svelte/store';
 
-  let scrollContainer: HTMLDivElement,
-    pageContainer: HTMLDivElement,
-    unsubscribers = [] as Unsubscriber[],
+  let unsubscribers = [] as Unsubscriber[],
     setLoadingTimer: ReturnType<typeof setTimeout> | undefined,
     appLoaded = false;
 
@@ -52,11 +48,6 @@
     })
   );
 
-  [
-    ['getScrollContainer', () => scrollContainer],
-    ['getPageContainer', () => pageContainer]
-  ].forEach(([k, v]) => setContext(k, v));
-
   onMount(() => {
     if (!browser) {
       return;
@@ -128,14 +119,7 @@
   <meta property="twitter:image" content="{SELF_BASE_URL}/assets/dark-embed.png" />
 </svelte:head>
 
-<svelte:body
-  use:classList={[$theme, $navigating ? 'is-loading' : 'is-loaded']}
-  on:contextmenu={(e) => setMenuState(e, pageContainer)}
-/>
-
-{#if $menuState.open}
-  <ContextMenu />
-{/if}
+<svelte:body use:classList={[$theme, $navigating ? 'is-loading' : 'is-loaded']} />
 
 <span
   role="button"
@@ -146,13 +130,9 @@
   on:keydown={skipToContent}>{$t('Skip to content')}</span
 >
 
-<div
-  class="main"
-  in:fly={{ delay: 100, duration: 100, y: -40 }}
-  bind:this={pageContainer}
->
+<div class="main" in:fly={{ delay: 100, duration: 100, y: -40 }}>
   <Nav loaded={appLoaded && !$loading} />
-  <ScrollContainer bind:element={scrollContainer}>
+  <ScrollContainer>
     <PageTransition pathname={data.pathname}>
       <ContentWrapper>
         <slot />
diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
index c0707c2c7..3052017e8 100644
--- a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
-  import { sortDocumentsByYear } from '$helpers/date';
   import { t } from '$helpers/i18n';
   import { pageTitle } from '$helpers/navigation';
 
   import EmptyContent from '$components/empty-content.svelte';
   import HeadedBlock from '$components/headings/headed-block.svelte';
-  import ListItem from '$components/lists/list-item.svelte';
+  import YearList from '$components/lists/year-list.svelte';
 
   export let data;
 
-  const sortedPosts = data.posts.length ? sortDocumentsByYear(data.posts) : [];
-
   $: description = $t('Thoughts about tech, design, and development');
 </script>
 
@@ -29,29 +26,8 @@
 
 <HeadedBlock heading={$t('Recent thoughts')}>
   {#if data.posts.length}
-    <div class="mt-8 flex flex-col gap-10">
-      {#each sortedPosts as yearObj}
-        <div class="flex flex-col items-start justify-start gap-3 md:flex-row">
-          <h1 class="min-w-[5rem] font-code text-3xl font-black transition-[color]">
-            {yearObj.year}
-          </h1>
-          {#if yearObj.items.length}
-            <div
-              class="ml-1 mt-1 flex w-full flex-col items-start justify-start gap-6 md:ml-0"
-            >
-              {#each yearObj.items as item}
-                <ListItem document={item} />
-              {/each}
-            </div>
-          {:else}
-            <p class="p-4 font-code">{$t('No content')}</p>
-          {/if}
-        </div>
-      {/each}
-    </div>
+    <YearList documents={data.posts} />
   {:else}
-    <div class="flex w-full flex-row items-center justify-center">
-      <EmptyContent />
-    </div>
+    <EmptyContent />
   {/if}
 </HeadedBlock>
diff --git a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
index eca59417a..be06dde33 100644
--- a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
@@ -25,13 +25,13 @@
   <meta property="twitter:description" content={description} />
 </svelte:head>
 
-<HeadedBlock icon="Message" heading={$t('Say hello')}>
+<HeadedBlock heading={$t('Say hello')}>
   <PortableText text={data.about.contact} />
 </HeadedBlock>
 
 <Divider />
 
-<HeadedBlock icon="LockOpen" heading={$t('PGP')}>
+<HeadedBlock heading={$t('PGP')}>
   <p>
     {$t("Want to send a secure message my way? Here's my main PGP key:")}
     <Link href="/pgp.txt" newtab>D1FD DE24 BB72 BFEF E045 ECE0 8A2C 67E2 2184 F162</Link>
@@ -40,7 +40,7 @@
 
 <Divider />
 
-<HeadedBlock icon="InfoBox" heading={$t('Meta')}>
+<HeadedBlock heading={$t('Meta')}>
   <PortableText text={data.about.body} />
 </HeadedBlock>
 
diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
index 50d02d3c4..999484457 100644
--- a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
   import { pageTitle } from '$helpers/navigation';
   import { t } from '$i18n';
-  import { sortDocumentsByYear } from '$lib/helpers/date';
 
   import Timeline from '$components/about/timeline.svelte';
   import Divider from '$components/divider.svelte';
   import EmptyContent from '$components/empty-content.svelte';
   import HeadedBlock from '$components/headings/headed-block.svelte';
-  import ListItem from '$components/lists/list-item.svelte';
+  import YearList from '$components/lists/year-list.svelte';
 
   export let data;
 
-  const sortedProjects = data.projects.length ? sortDocumentsByYear(data.projects) : [];
-
   $: description = $t(
     'A collection of my work, open-source contributions, and personal projects'
   );
-  $: ({ about, projects } = data);
 </script>
 
 <svelte:head>
@@ -33,8 +29,8 @@
 </svelte:head>
 
 <HeadedBlock heading={$t("Where I've worked")}>
-  {#if about.timeline?.length}
-    <Timeline data={about.timeline} />
+  {#if data.about.timeline?.length}
+    <Timeline data={data.about.timeline} />
   {:else}
     <div class="w-full">
       <EmptyContent />
@@ -45,28 +41,9 @@
 <Divider class="!-mt-2" />
 
 <HeadedBlock heading={$t('Projects')}>
-  {#if projects.length}
-    <div class="mt-8 flex flex-col gap-10">
-      {#each sortedProjects as yearObj}
-        <div class="flex flex-col items-start justify-start gap-3 md:flex-row">
-          <h1 class="min-w-[5rem] font-code text-3xl font-black transition-[color]">
-            {yearObj.year}
-          </h1>
-          {#if yearObj.items.length}
-            <div class="ml-1 mt-1 flex flex-col items-start justify-start gap-6 md:ml-0">
-              {#each yearObj.items as item}
-                <ListItem document={item} />
-              {/each}
-            </div>
-          {:else}
-            <p class="p-4 font-code">{$t('No content')}</p>
-          {/if}
-        </div>
-      {/each}
-    </div>
+  {#if data.projects.length}
+    <YearList documents={data.projects} />
   {:else}
-    <div class="w-full">
-      <EmptyContent />
-    </div>
+    <EmptyContent />
   {/if}
 </HeadedBlock>
diff --git a/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts b/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts
index 19e64ee3a..7b8042f25 100644
--- a/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts
+++ b/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts
@@ -1,5 +1,5 @@
 import { DEFAULT_APP_LANG } from '$lib/consts';
-import { handleLoadError } from '$lib/data';
+import { fetchRepoStats, handleLoadError } from '$lib/data';
 import { getCrop, urlFor } from '$lib/helpers/image';
 import Logger from '$lib/logger';
 import { findOne } from '$lib/store';
@@ -76,5 +76,10 @@ export const load = (async ({ fetch, params, url }) => {
     ) as ProjectImage[];
   }
 
+  const { stars, watchers } = await fetchRepoStats(fetch, project.github);
+
+  project.githubStars = stars;
+  project.githubWatchers = watchers;
+
   return { project, images, routeFetch: fetch };
 }) satisfies PageLoad;
diff --git a/svelte-app/src/routes/api/[[version]]/get/[[type]]/[[many]]/+server.ts b/svelte-app/src/routes/api/[[version]]/get/[[type]]/[[many]]/+server.ts
index 83c674eff..4413e51d6 100644
--- a/svelte-app/src/routes/api/[[version]]/get/[[type]]/[[many]]/+server.ts
+++ b/svelte-app/src/routes/api/[[version]]/get/[[type]]/[[many]]/+server.ts
@@ -1,5 +1,5 @@
 import { VALID_DOC_TYPES } from '$lib/consts';
-import { fetchRemote } from '$lib/data.server';
+import { endpointResponse, fetchRemote } from '$lib/data.server';
 import { REMOTE_API_URL } from '$lib/env';
 
 import type { RequestHandler } from './$types';
@@ -9,16 +9,12 @@ export const GET = (async ({ url, params }) => {
     many = !!params.many ?? false;
 
   if (!VALID_DOC_TYPES.includes(docType)) {
-    return new Response(
-      JSON.stringify({
+    return endpointResponse(
+      {
         status: 400,
         error: 'Endpoint error: Missing or invalid parameter: type'
-      }),
-      {
-        headers: {
-          'content-type': 'application/json; charset=utf-8'
-        }
-      }
+      },
+      400
     );
   }
 
@@ -45,7 +41,8 @@ export const GET = (async ({ url, params }) => {
     return endpointResponse(
       {
         status: remoteRes.code,
-        error: remoteRes.error
+        error: remoteRes.error,
+        detail: remoteRes.detail
       },
       remoteRes.code
     );
@@ -76,12 +73,3 @@ const getEndpoint = (
       return `${REMOTE_API_URL}/query/about?lang=${params.get('lang') || 'en'}`;
   }
 };
-
-const endpointResponse = (content: Record<string, unknown>, status = 200) => {
-  return new Response(JSON.stringify(content), {
-    headers: {
-      'content-type': 'application/json; charset=utf-8'
-    },
-    status
-  });
-};
diff --git a/svelte-app/src/routes/api/[[version]]/mutate/+server.ts b/svelte-app/src/routes/api/[[version]]/mutate/+server.ts
new file mode 100644
index 000000000..1d7e2eef9
--- /dev/null
+++ b/svelte-app/src/routes/api/[[version]]/mutate/+server.ts
@@ -0,0 +1,44 @@
+import { endpointResponse } from '$lib/data.server';
+import { REMOTE_API_URL } from '$lib/env';
+import { REMOTE_API_TOKEN } from '$lib/env.server';
+
+import type { RequestHandler } from './$types';
+
+export const POST = (async ({ request }) => {
+  const body = await request.json();
+
+  switch (body.action) {
+    case 'inc': {
+      const { id } = body,
+        remoteUrl = `${REMOTE_API_URL}/inc/${id}`,
+        remoteRes = await fetch(remoteUrl, {
+          method: 'POST',
+          headers: {
+            authorization: `Bearer ${REMOTE_API_TOKEN}`,
+            'content-type': 'application/json'
+          },
+          body: JSON.stringify({ target: 'views' })
+        })
+          .then((res) => res.json())
+          .catch((e) => ({ error: e }));
+
+      if (remoteRes.message || remoteRes.error) {
+        return endpointResponse(
+          {
+            status: remoteRes.code ?? 500,
+            error: remoteRes.message ?? remoteRes.error,
+            detail: remoteRes.detail
+          },
+          remoteRes.code ?? 500
+        );
+      }
+
+      return endpointResponse({
+        status: 200
+      });
+    }
+    default: {
+      return endpointResponse({ status: 400, error: 'Invalid action' }, 400);
+    }
+  }
+}) satisfies RequestHandler;
diff --git a/svelte-app/types/app/documents/project.d.ts b/svelte-app/types/app/documents/project.d.ts
index e8d335953..4a0f56fb0 100644
--- a/svelte-app/types/app/documents/project.d.ts
+++ b/svelte-app/types/app/documents/project.d.ts
@@ -16,6 +16,8 @@ export interface ProjectDocument extends Document {
   tags?: DocumentTags[];
   title: string;
   github?: string;
+  githubStars?: number;
+  githubWatchers?: number;
   links?: {
     _key: string;
     title: string;