diff --git a/elixir-api/lib/routes/api/v1/tag.ex b/elixir-api/lib/routes/api/v1/tag.ex
index 8675e0da7..478de8c3f 100644
--- a/elixir-api/lib/routes/api/v1/tag.ex
+++ b/elixir-api/lib/routes/api/v1/tag.ex
@@ -35,10 +35,10 @@ defmodule Router.Api.V1.Tag do
         ])
         |> Query.project([
           "_id",
-          ["'objectID'", "_id"],
           "_rev",
           "_type",
           "title",
+          "views",
           "publishedAt",
           %{
             "tags[]" => [
@@ -46,7 +46,7 @@ defmodule Router.Api.V1.Tag do
               "title",
               "slug"
             ],
-            :follow => true
+            :join => "->"
           },
           "slug",
           "body",
@@ -74,17 +74,34 @@ defmodule Router.Api.V1.Tag do
         parsed_counts = Task.await(counts)
 
         {transformed_result, meta, code} =
-          transform_result_document(query, result, :tag, params, %{
-            "total" => parsed_counts["result"]["total"],
-            "count" => parsed_counts["result"]["count"],
-            "id" => id,
-            "type" => params["type"]
-          })
+          transform_result_document(
+            query,
+            result,
+            String.to_atom(params["type"] <> "s"),
+            params,
+            %{
+              "total" => parsed_counts["result"]["total"],
+              "count" => parsed_counts["result"]["count"]
+            }
+          )
+
+        # parsed_counts = Task.await(counts)
+
+        # {transformed_result, meta, code} =
+        #   transform_result_document(query, result, :tag, params, %{
+        #     "total" => parsed_counts["result"]["total"],
+        #     "count" => parsed_counts["result"]["count"],
+        #     "id" => id,
+        #     "type" => params["type"]
+        #   })
 
         update_meta_and_send_response(conn, code, transformed_result, meta, duration)
       end)
     else
       false ->
+        {:ok, params} = validate_query_params(conn, %{"type" => nil})
+        Logger.info("type param: #{inspect(params["type"])}")
+        Logger.info("ID: #{inspect(id)}")
         conn |> error_res(400, "Invalid request", [%{message: "Missing ID or invalid type"}])
 
       {:error, reason} ->
diff --git a/elixir-api/lib/routes/api/v1/tags.ex b/elixir-api/lib/routes/api/v1/tags.ex
index ca8979938..f29549dbf 100644
--- a/elixir-api/lib/routes/api/v1/tags.ex
+++ b/elixir-api/lib/routes/api/v1/tags.ex
@@ -28,8 +28,9 @@ defmodule Router.Api.V1.Tags do
         |> Query.project([
           "_id",
           "_rev",
-          ["'objectID'", "_id"],
           "_type",
+          "_createdAt",
+          "_updatedAt",
           "title",
           "slug"
         ])
diff --git a/svelte-app/src/components/about/timeline-item.svelte b/svelte-app/src/components/about/timeline-item.svelte
index 60b32e708..612be3a0f 100644
--- a/svelte-app/src/components/about/timeline-item.svelte
+++ b/svelte-app/src/components/about/timeline-item.svelte
@@ -18,10 +18,11 @@
   class:pb-4={!last}
 >
   <span
-    class="bullet block flex-shrink-0 rounded-full bg-accent-light/80 dark:bg-accent-dark/80"
-  ></span>
+    class="bullet block flex-shrink-0 rounded-xs text-orange-dark dark:text-orange-light"
+    >&rarr;</span
+  >
   <div class="content">
-    <h3 class="pb-2 pt-1 text-base font-bold text-dark transition-colors dark:text-white">
+    <h3 class="pb-1 pt-1 text-base font-bold text-dark transition-colors dark:text-white">
       {title}
     </h3>
     <p class="font-mono text-sm text-dark/80 transition-colors dark:text-light/80">
@@ -43,13 +44,14 @@
 
   $bulletTopMargin: 13px;
   $bulletSize: 6px;
-  $lineWidth: 2px;
+  $lineWidth: 1px;
   $lineGap: 14px;
 
   .bullet {
     margin-top: $bulletTopMargin;
     width: $bulletSize;
     height: $bulletSize;
+    line-height: $bulletSize;
   }
 
   .content {
@@ -60,18 +62,18 @@
     }
 
     &:before {
-      @apply absolute bg-dark/20;
+      @apply absolute border-l border-dashed border-neutral-200 transition-colors;
 
       $baseSpaceFromTop: $bulletTopMargin + $bulletSize;
 
       content: '';
       top: #{$bulletTopMargin + $bulletSize + $lineGap};
       bottom: #{0px + $lineGap - $bulletTopMargin};
-      left: #{$bulletSize * 2 + $lineWidth};
+      left: #{$bulletSize * 2};
       width: $lineWidth;
 
       @include dark {
-        @apply bg-white/20;
+        @apply border-neutral-400;
       }
     }
   }
diff --git a/svelte-app/src/components/about/timeline-section.svelte b/svelte-app/src/components/about/timeline-section.svelte
index 0356ba87d..22c33e68d 100644
--- a/svelte-app/src/components/about/timeline-section.svelte
+++ b/svelte-app/src/components/about/timeline-section.svelte
@@ -15,7 +15,7 @@
 <section class="my-6" role="group" aria-labelledby="{id}-heading">
   <div class="pb-3">
     <h2
-      class="pb-2 text-xl font-bold text-dark transition-colors dark:text-white"
+      class="pb-1 text-xl font-bold text-dark transition-colors dark:text-white"
       id="{id}-heading"
     >
       {title}
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
index e3f1874b3..8aace20c3 100644
--- a/svelte-app/src/components/code-block.svelte
+++ b/svelte-app/src/components/code-block.svelte
@@ -7,9 +7,8 @@
 
   import { genericAsyncImport, getLangType } from '$components/code-block/imports';
   import Divider from '$components/divider.svelte';
-  import Icon from '$components/icon.svelte';
+  import Hoverable from '$components/hoverable.svelte';
   import Spinner from '$components/loading/spinner.svelte';
-  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   import type { ResolvedComponentType } from '$components/code-block/imports';
   import type { LanguageType as _LanguageType } from 'svelte-highlight/languages';
@@ -79,20 +78,17 @@
 >
   {#if filename}
     <div
-      class="bg-dark/5 py-4 pl-14 font-mono text-sm transition-[background-color] dark:bg-light/5 print:bg-transparent"
+      class="bg-neutral-0 py-4 pl-14 font-mono text-sm transition-[background-color] dark:bg-neutral-800/5 print:bg-transparent"
       id="{id}-filename"
     >
       {filename}
     </div>
     <Divider margin="my-0"></Divider>
   {/if}
-  <Tooltip
-    text={copied !== undefined ? $t('Copied') : $t('Copy to clipboard')}
-    delay={200}
-    offset={[0, 2]}
-  >
+
+  <Hoverable let:hovered>
     <button
-      class="focus-outline-sm absolute right-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark/80 dark:text-light/60 dark:hover:text-light/80"
+      class="focus-outline-sm absolute right-0 z-[2] cursor-pointer rounded-xs pb-3 pl-3 pr-4 pt-4 font-mono text-xs text-dark/80 dark:text-light/80"
       class:top-1={!filename}
       class:top-12={filename}
       on:click={() => copy()}
@@ -100,17 +96,23 @@
       aria-label={copied !== undefined ? $t('Copied') : $t('Copy to clipboard')}
       type="button"
     >
-      {#key copied}
-        <Icon name={copied !== undefined ? 'Check' : 'Copy'}></Icon>
-      {/key}
+      <span
+        class="-mx-2 -my-1.5 px-2 py-1.5"
+        class:bg-neutral-100={hovered}
+        class:text-dark={hovered}
+        class:dark:bg-neutral-500={hovered}
+        class:dark:text-light={hovered}
+      >
+        [{$t(copied !== undefined ? 'Copied' : 'Copy').toLowerCase()}]
+      </span>
     </button>
-  </Tooltip>
+  </Hoverable>
   <div
     class="focus-outline relative h-fit w-full overflow-hidden rounded-sm text-lg transition-[height,color]"
     bind:this={codeContainer}
   >
     <div
-      class="h-fit w-full min-w-full rounded-sm bg-dark/5 p-1 pl-10 transition-all dark:bg-light/5 print:bg-transparent"
+      class="h-fit w-full min-w-full rounded-sm bg-neutral-0 p-1 pl-10 transition-all dark:bg-neutral-100/5 print:bg-transparent"
       id="hljs-container"
       aria-hidden="true"
       bind:clientHeight={innerHeight}
diff --git a/svelte-app/src/components/controls/arrow-button.svelte b/svelte-app/src/components/controls/arrow-button.svelte
index 571d9fedb..af67f9c5f 100644
--- a/svelte-app/src/components/controls/arrow-button.svelte
+++ b/svelte-app/src/components/controls/arrow-button.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  export let fullWidth = false,
+  import Hoverable from '$components/hoverable.svelte';
+
+  export let text: string,
+    placement: 'before' | 'after' = 'before',
+    dir: 'left' | 'right' | 'up' | 'down' = 'right',
     align: 'left' | 'right' = 'left';
 
   const dispatch = createEventDispatcher(),
@@ -15,21 +19,60 @@
     };
 </script>
 
-<svelte:element
-  this={self}
-  href={$$props.href || undefined}
-  class:w-full={fullWidth}
-  class:text-right={align === 'right'}
-  class:text-left={align === 'left'}
-  class="focus-outline font-code inline-block rounded-sm text-accent-light hover:text-dark focus-visible:text-dark dark:text-accent-dark dark:hover:text-light dark:focus-visible:text-light {$$props.class ??
-    ''}"
-  aria-label={$$props['aria-label'] || undefined}
-  role="button"
-  tabindex="0"
-  on:click={handleClick}
-  on:keydown={handleClick}
-  data-sveltekit-preload-code={$$props.preload ? 'hover' : 'off'}
-  data-sveltekit-preload-data={$$props.preload ? 'hover' : 'off'}
->
-  <slot />
-</svelte:element>
+<Hoverable let:hovered>
+  <svelte:element
+    this={self}
+    href={$$props.href || undefined}
+    class:text-right={align === 'right'}
+    class:text-left={align === 'left'}
+    class="focus-outline-sm -mx-2 -my-1 inline-block select-none whitespace-nowrap rounded-xs py-1 font-mono text-sm transition-colors hover:bg-neutral-100 hover:text-orange-light focus-visible:bg-neutral-100 focus-visible:text-orange-light dark:hover:bg-neutral-600 dark:focus-visible:bg-neutral-600 {$$props.class ??
+      ''}"
+    class:pr-2={placement === 'before'}
+    class:pl-3={placement === 'before'}
+    class:pr-3={placement === 'after'}
+    class:pl-2={placement === 'after'}
+    aria-label={$$props['aria-label'] || undefined}
+    role="button"
+    tabindex="0"
+    on:click={handleClick}
+    on:keydown={handleClick}
+    data-sveltekit-preload-code={$$props.preload ? 'hover' : 'off'}
+    data-sveltekit-preload-data={$$props.preload ? 'hover' : 'off'}
+  >
+    <div
+      class="flex items-center gap-2"
+      class:justify-start={align === 'left'}
+      class:justify-end={align === 'right'}
+    >
+      {#if placement === 'after'}
+        {#if $$slots.default}
+          <slot />
+        {:else}
+          {text}
+        {/if}
+      {/if}
+      <div
+        class="mt-px transition-transform"
+        class:-translate-x-1={hovered && dir === 'left'}
+        class:translate-x-1={hovered && dir === 'right'}
+      >
+        {#if dir === 'left'}
+          &larr;
+        {:else if dir === 'right'}
+          &rarr;
+        {:else if dir === 'up'}
+          &uarr;
+        {:else if dir === 'down'}
+          &darr;
+        {/if}
+      </div>
+      {#if placement === 'before'}
+        {#if $$slots.default}
+          <slot />
+        {:else}
+          {text}
+        {/if}
+      {/if}
+    </div>
+  </svelte:element>
+</Hoverable>
diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte
index c9971a409..9d7a2f616 100644
--- a/svelte-app/src/components/controls/language-toggle.svelte
+++ b/svelte-app/src/components/controls/language-toggle.svelte
@@ -1,20 +1,26 @@
 <script lang="ts">
+  import { circInOut } from 'svelte/easing';
+  import { get } from 'svelte/store';
+  import { slide } from 'svelte/transition';
+
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { APP_LANGS } from '$lib/consts';
   import { currentLang, linkTo, t } from '$lib/i18n';
+  import { isMobile } from '$lib/responsive';
 
   import Hoverable from '$components/hoverable.svelte';
-  import Icon from '$components/icon.svelte';
-  import Tooltip from '$components/tooltips/tooltip.svelte';
+
+  const BASE_TIMEOUT_MS = 25;
 
   const handleClick = (event: Event, lang: (typeof APP_LANGS)[number]) => {
     event.preventDefault();
-    if ($page?.url?.pathname?.startsWith(`/${lang}`)) {
-      return;
+
+    if ($page?.url?.pathname?.startsWith(`/${lang}`) || !get(isMobile)) {
+      return Promise.resolve();
     }
 
-    goto(
+    return goto(
       $linkTo(`${$page.url.pathname}${$page.url.hash}`, $page.url.searchParams, lang),
       {
         invalidateAll: true,
@@ -22,25 +28,97 @@
       }
     ).catch(() => undefined);
   };
+
+  let showDropdown = false,
+    dropdown: HTMLDivElement | undefined,
+    dropdownTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  const handleShow = () => {
+    clearTimeout(dropdownTimeout);
+    if (get(isMobile)) {
+      return;
+    }
+
+    dropdownTimeout = setTimeout(() => (showDropdown = true), BASE_TIMEOUT_MS * 2);
+  };
+
+  const handleHide = () => {
+    clearTimeout(dropdownTimeout);
+    dropdownTimeout = setTimeout(() => (showDropdown = false), BASE_TIMEOUT_MS);
+  };
+
+  const handleBlur = () => {
+    setTimeout(() => {
+      if (
+        dropdown !== document?.activeElement &&
+        !dropdown?.contains(document?.activeElement)
+      ) {
+        showDropdown = false;
+      }
+    }, 0);
+  };
+
+  const dropdownOptions = [
+    {
+      label: 'English',
+      value: APP_LANGS[0]
+    },
+    {
+      label: 'French',
+      value: APP_LANGS[1]
+    }
+  ] as const;
 </script>
 
-<Hoverable>
-  <Tooltip
-    text={$t($currentLang === APP_LANGS[0] ? 'Switch to French' : 'Switch to English')}
-  >
-    <button
-      class="focus-outline -m-2 rounded-sm p-2 hover:text-accent-light focus-visible:text-accent-light dark:hover:text-accent-dark dark:focus-visible:text-accent-dark"
-      aria-label={$t(
-        $currentLang === APP_LANGS[0] ? 'Switch to French' : 'Switch to English'
-      )}
-      tabindex="0"
-      data-test-id="language-toggle"
-      on:click={(e) => {
-        handleClick(e, $currentLang === APP_LANGS[0] ? APP_LANGS[1] : APP_LANGS[0]);
-      }}
-      type="button"
+<svelte:window on:click={handleBlur} />
+
+<div
+  class="focus-outline relative z-10 -m-1 cursor-pointer select-none rounded-xs px-2 py-1 font-mono text-xs hover:bg-neutral-100 focus-visible:bg-neutral-100 dark:hover:bg-neutral-600 dark:focus-visible:bg-neutral-600"
+  on:mouseenter={handleShow}
+  on:focus={handleShow}
+  on:mouseleave={handleHide}
+  on:blur={handleBlur}
+  on:click={(e) =>
+    handleClick(e, $currentLang === APP_LANGS[0] ? APP_LANGS[1] : APP_LANGS[0])}
+  on:keyup={(e) =>
+    e.key === 'Enter' &&
+    handleClick(e, $currentLang === APP_LANGS[0] ? APP_LANGS[1] : APP_LANGS[0])}
+  role="menu"
+  aria-label="Change language"
+  tabindex="0"
+>
+  <span class="z-10">
+    [{$currentLang === APP_LANGS[0] ? 'en' : 'fr'}]<span class="hidden md:inline-block"
+      >&nbsp;{$t('Language').toLowerCase()}</span
+    >
+  </span>
+  {#if showDropdown}
+    <div
+      class="absolute left-0 right-0 top-0 -z-[1] flex flex-col items-start rounded-xs bg-neutral-100 pt-6 font-mono text-xs dark:bg-neutral-600"
+      bind:this={dropdown}
+      transition:slide={{ axis: 'y', duration: 125, easing: circInOut }}
     >
-      <Icon name="script" size={20}></Icon>
-    </button>
-  </Tooltip>
-</Hoverable>
+      {#each dropdownOptions as opt}
+        <Hoverable let:hovered>
+          <button
+            class="focus-outline w-full px-2 py-2.5 text-left disabled:cursor-not-allowed disabled:opacity-50"
+            class:bg-neutral-200={hovered}
+            class:dark:bg-neutral-500={hovered}
+            on:click={(e) => {
+              handleClick(e, opt.value).finally(() => {
+                clearTimeout(dropdownTimeout);
+                showDropdown = false;
+              });
+            }}
+            on:blur={handleBlur}
+            type="button"
+            role="menuitem"
+            disabled={$currentLang === opt.value}
+          >
+            {$t(opt.label).toLowerCase()}
+          </button>
+        </Hoverable>
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/svelte-app/src/components/controls/theme-toggle.svelte b/svelte-app/src/components/controls/theme-toggle.svelte
index d30fb9665..2dbe43a1a 100644
--- a/svelte-app/src/components/controls/theme-toggle.svelte
+++ b/svelte-app/src/components/controls/theme-toggle.svelte
@@ -4,29 +4,25 @@
   import Settings from '$lib/settings';
 
   import Hoverable from '$components/hoverable.svelte';
-  import Icon from '$components/icon.svelte';
-  import Tooltip from '$components/tooltips/tooltip.svelte';
 
   const { theme, modified } = Settings;
 </script>
 
-<Hoverable>
-  <Tooltip text={$t($theme === APP_THEMES.LIGHT ? 'Use dark mode' : 'Use light mode')}>
-    <button
-      class="focus-outline -m-2 rounded-sm p-2 hover:text-accent-light focus-visible:text-accent-light dark:hover:text-accent-dark dark:focus-visible:text-accent-dark"
-      aria-label={$t($theme === APP_THEMES.LIGHT ? 'Use dark mode' : 'Use light mode')}
-      data-test-id="theme-toggle"
-      data-test-state={$theme}
-      tabindex="0"
-      on:click={() => {
-        modified.set(true);
-        theme.set($theme === APP_THEMES.LIGHT ? APP_THEMES.DARK : APP_THEMES.LIGHT);
-      }}
-      type="button"
+<Hoverable let:hovered>
+  <button
+    class="focus-outline -m-1 rounded-xs px-2 py-1 font-mono text-xs text-dark hover:bg-neutral-100 focus-visible:bg-neutral-100 dark:text-light dark:hover:bg-neutral-600 dark:focus-visible:bg-neutral-600"
+    aria-label={$t($theme === APP_THEMES.LIGHT ? 'Use dark mode' : 'Use light mode')}
+    data-test-id="theme-toggle"
+    data-test-state={$theme}
+    tabindex="0"
+    on:click={() => {
+      modified.set(true);
+      theme.set($theme === APP_THEMES.LIGHT ? APP_THEMES.DARK : APP_THEMES.LIGHT);
+    }}
+    type="button"
+  >
+    [{#if $theme === APP_THEMES.DARK}dark{:else}light{/if}]<span
+      class="hidden md:inline-block">&nbsp;{$t('Theme').toLowerCase()}</span
     >
-      {#key $theme}
-        <Icon name={$theme === APP_THEMES.LIGHT ? 'MoonStars' : 'Sun'} size={20}></Icon>
-      {/key}
-    </button>
-  </Tooltip>
+  </button>
 </Hoverable>
diff --git a/svelte-app/src/components/document/content/footer.svelte b/svelte-app/src/components/document/content/footer.svelte
index cc0d4d660..76d41b852 100644
--- a/svelte-app/src/components/document/content/footer.svelte
+++ b/svelte-app/src/components/document/content/footer.svelte
@@ -25,19 +25,12 @@
 {/if}
 
 <div
-  class="border-t border-dark/80 px-6 pb-5 pt-6 dark:border-light/60 md:px-10 print:hidden"
+  class="border-t border-dark/80 px-6 pb-5 pt-4 dark:border-light/60 md:px-10 print:hidden"
 >
   <ArrowButton
     href={model === 'post' ? $linkTo('/thoughts') : $linkTo('/work')}
-    align="left"
-    fullWidth
+    dir={$isMobile ? 'up' : 'left'}
+    text={$t('Read more')}
     preload
-  >
-    <span class="flex items-center justify-start gap-2 font-mono text-sm">
-      {#key $isMobile}
-        <Icon name={$isMobile ? 'ArrowUp' : 'ArrowLeft'} inline></Icon>
-      {/key}
-      <p>{$t('Read more')}</p>
-    </span>
-  </ArrowButton>
+  />
 </div>
diff --git a/svelte-app/src/components/document/content/header.svelte b/svelte-app/src/components/document/content/header.svelte
index 66de42c0e..7cab77bd0 100644
--- a/svelte-app/src/components/document/content/header.svelte
+++ b/svelte-app/src/components/document/content/header.svelte
@@ -5,7 +5,6 @@
 
   import BulletPoint from '$components/bullet-point.svelte';
   import ArrowButton from '$components/controls/arrow-button.svelte';
-  import Icon from '$components/icon.svelte';
   import Image from '$components/images/image.svelte';
   import Link from '$components/link.svelte';
   import ImageCarousel from '$components/portable-text/image-carousel.svelte';
@@ -62,17 +61,13 @@
     </div>
     {#if !data.tags?.length}
       <ArrowButton
-        class="focus-outline-sm hidden flex-1 select-none whitespace-nowrap sm:block print:hidden"
+        class="hidden whitespace-nowrap sm:block print:hidden"
         href={model === 'post' ? $linkTo('/thoughts') : $linkTo('/work')}
         align="right"
-        fullWidth
+        dir="left"
+        text={$t('Read more')}
         preload
-      >
-        <span class="flex items-center justify-end gap-2 font-mono text-sm">
-          <Icon name="ArrowLeft" inline></Icon>
-          <p>{$t('Read more')}</p>
-        </span>
-      </ArrowButton>
+      />
     {/if}
   </div>
 
@@ -83,25 +78,26 @@
         aria-label={$t('Tags')}
       >
         {#each data.tags as tag}
-          <span
-            class="cursor-pointer select-none rounded-sm border border-dark/80 bg-dark/5 px-1.5 py-1 font-mono text-xs transition-colors dark:border-light/60 dark:bg-light/5"
+          <a
+            class="focus-outline-sm select-none rounded-xs bg-neutral-100 px-1.5 py-1 font-mono text-xs hover:bg-orange-light focus-visible:bg-orange-light dark:bg-neutral-500 dark:hover:bg-orange-dark dark:focus-visible:bg-orange-dark"
+            href={$linkTo(
+              `/${model === 'post' ? 'thoughts' : 'work'}/+/${tag.slug.current}`
+            )}
+            data-sveltekit-preload-code
+            aria-label={$t('Topic') + ': ' + tag.title}
           >
             {tag.title.toLowerCase()}
-          </span>
+          </a>
         {/each}
       </div>
       <ArrowButton
-        class="focus-outline-sm hidden flex-1 select-none whitespace-nowrap sm:block print:hidden"
+        class="hidden whitespace-nowrap sm:block print:hidden"
         href={model === 'post' ? $linkTo('/thoughts') : $linkTo('/work')}
         align="right"
-        fullWidth
+        dir="left"
+        text={$t('Read more')}
         preload
-      >
-        <span class="flex items-center justify-end gap-2 font-mono text-sm">
-          <Icon name="ArrowLeft" inline></Icon>
-          <p>{$t('Read more')}</p>
-        </span>
-      </ArrowButton>
+      />
     </div>
   {/if}
 </div>
@@ -110,7 +106,10 @@
   <div
     class="flex w-full flex-row items-center justify-start gap-3 border-b border-dark/80 px-6 py-6 text-base dark:border-light/60 md:px-10"
   >
-    <Icon name="GitCommit"></Icon>
+    <span
+      class="cursor-default select-none font-mono text-sm text-dark/80 dark:text-light/80"
+      >url /</span
+    >
     <span class="font-mono text-sm">
       <Link href={data.github}>
         {'github.com/' + data.github.split('github.com/')?.[1]}
diff --git a/svelte-app/src/components/empty-content.svelte b/svelte-app/src/components/empty-content.svelte
index 445b8cb42..887ecc82e 100644
--- a/svelte-app/src/components/empty-content.svelte
+++ b/svelte-app/src/components/empty-content.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
   import { t } from '$lib/i18n';
-
-  import Icon from '$components/icon.svelte';
 </script>
 
-<div
-  class="my-8 mb-2 mt-8 flex h-fit w-full select-none flex-row items-center justify-start gap-3"
-  data-test-id="error-text"
->
-  <Icon name="Downasaur"></Icon>
-  <p class="font-code text-lg font-bold">{$t('Hm, it seems empty around here...')}</p>
+<div class="mb-2 mt-8 w-full select-none px-8" data-test-id="error-text">
+  <p class="font-mono text-base">
+    <span class="text-sm">[!]</span>
+    {$t('errors.no-content.message')}
+  </p>
 </div>
diff --git a/svelte-app/src/components/experiments/gol.svelte b/svelte-app/src/components/experiments/gol.svelte
index ea69c7f4a..0c3ccbd7b 100644
--- a/svelte-app/src/components/experiments/gol.svelte
+++ b/svelte-app/src/components/experiments/gol.svelte
@@ -143,7 +143,7 @@
     >
       {#if running}
         <svg
-          class="h-5 w-5 text-dark/90 hover:text-accent-light/90 focus-visible:text-accent-light/90 dark:text-light/90 hover:dark:text-accent-dark/90 focus-visible:dark:text-accent-dark/90"
+          class="h-5 w-5 text-dark/90 hover:text-orange-light/90 focus-visible:text-orange-light/90 dark:text-light/90 hover:dark:text-orange-light/90 focus-visible:dark:text-orange-light/90"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
@@ -152,7 +152,7 @@
         </svg>
       {:else}
         <svg
-          class="h-5 w-5 text-dark/90 hover:text-accent-light/90 focus-visible:text-accent-light/90 dark:text-light/90 hover:dark:text-accent-dark/90 focus-visible:dark:text-accent-dark/90"
+          class="h-5 w-5 text-dark/90 hover:text-orange-light/90 focus-visible:text-orange-light/90 dark:text-light/90 hover:dark:text-orange-light/90 focus-visible:dark:text-orange-light/90"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
diff --git a/svelte-app/src/components/experiments/mag-cursor.svelte b/svelte-app/src/components/experiments/mag-cursor.svelte
index 3d9272c15..f0b15c962 100644
--- a/svelte-app/src/components/experiments/mag-cursor.svelte
+++ b/svelte-app/src/components/experiments/mag-cursor.svelte
@@ -39,8 +39,8 @@
             text={useOffset ? "Disable 'pulling' targets" : "Enable 'pulling' targets"}
           >
             <button
-              class="-m-2 h-fit w-fit cursor-none p-2 hover:text-accent-light/90 focus-visible:text-accent-light/90 hover:dark:text-accent-dark/90 focus-visible:dark:text-accent-dark/90 {active
-                ? 'text-accent-light/90 dark:text-accent-dark/90'
+              class="-m-2 h-fit w-fit cursor-none p-2 hover:text-orange-light/90 focus-visible:text-orange-light/90 hover:dark:text-orange-light/90 focus-visible:dark:text-orange-light/90 {active
+                ? 'text-orange-light/90 dark:text-orange-light/90'
                 : 'text-dark/80 dark:text-light/80'}"
               on:click={() => (useOffset = !useOffset)}
               on:keyup={(e) => e.key === 'Enter' && (useOffset = !useOffset)}
@@ -100,8 +100,8 @@
       {#each buttons as label}
         <CursorTarget let:active let:offset
           ><button
-            class="focus-outline-sm cursor-none select-none rounded-lg px-4 py-3 font-mono text-sm transition-colors active:text-accent-light/80 dark:active:text-accent-dark/80 {active
-              ? ' text-accent-light dark:text-accent-dark'
+            class="focus-outline-sm cursor-none select-none rounded-lg px-4 py-3 font-mono text-sm transition-colors active:text-orange-light/80 dark:active:text-orange-light/80 {active
+              ? ' text-orange-light dark:text-orange-light'
               : ''}"
             tabindex="0"
             type="button"
diff --git a/svelte-app/src/components/experiments/toru.svelte b/svelte-app/src/components/experiments/toru.svelte
index 10ffb9f75..bafc2aff7 100644
--- a/svelte-app/src/components/experiments/toru.svelte
+++ b/svelte-app/src/components/experiments/toru.svelte
@@ -94,8 +94,7 @@
                   class="relative flex h-3 w-fit justify-between gap-1 pt-0.5"
                 >
                   {#each Array(4) as _}
-                    <span class="h-full w-[2px] rounded-full bg-light dark:bg-accent-dark"
-                    ></span>
+                    <span class="h-full w-[2px] rounded-full bg-orange-light"></span>
                   {/each}
                 </div>
               </div>
@@ -106,13 +105,13 @@
             class="z-10 flex flex-col items-start justify-center gap-1 text-dark/90 transition-[color] dark:text-light/90"
           >
             <h4
-              class="line-clamp-2 text-xl font-black decoration-accent-light decoration-2 underline-offset-4 dark:decoration-accent-dark"
+              class="line-clamp-2 text-xl font-black decoration-orange-light decoration-2 underline-offset-4 dark:decoration-orange-light"
               class:underline={data.url && hovered}
             >
               {data.title ?? 'Unknown title'}
             </h4>
             <p
-              class="line-clamp-2 text-base decoration-accent-light decoration-2 underline-offset-4 dark:decoration-accent-dark"
+              class="line-clamp-2 text-base decoration-orange-light decoration-2 underline-offset-4 dark:decoration-orange-light"
               class:underline={data.artist && hovered}
             >
               {data.artist ?? ''}
diff --git a/svelte-app/src/components/footer.svelte b/svelte-app/src/components/footer.svelte
index c005dfe4e..4726a69a2 100644
--- a/svelte-app/src/components/footer.svelte
+++ b/svelte-app/src/components/footer.svelte
@@ -3,8 +3,6 @@
   import { APP_VERSION } from '$lib/env';
   import { t } from '$lib/i18n';
 
-  import Hoverable from '$components/hoverable.svelte';
-  import Icon from '$components/icon.svelte';
   import BaseLink from '$components/nav/base-link.svelte';
   import Tooltip from '$components/tooltips/tooltip.svelte';
 
@@ -22,56 +20,65 @@
 
 {#if socials?.length || APP_VERSION?.length}
   <footer
-    class="flex flex-row items-center justify-between border-t border-dark/80 px-7 py-5 font-mono text-[13.5px] transition-[border-color] dark:border-light/60 print:hidden"
+    class="flex flex-row flex-wrap items-center justify-between gap-x-6 gap-y-2 overflow-hidden border-t border-dark/80 px-6 py-4 font-mono text-[13.5px] transition-[border-color] dark:border-light/60 print:hidden"
   >
     {#if socials?.length}
-      <Hoverable setPointer={false} let:hovered>
-        <div class="flex select-none flex-row items-center justify-start gap-x-4">
-          <Icon name="At" interactive active={hovered} size={20}></Icon>
-          <div
-            class="flex flex-row items-center justify-between gap-x-1.5 text-dark/90 dark:text-light/90"
-            role="group"
-            aria-label={$t('Social links')}
-          >
-            {#each socials as social, i}
-              <Tooltip text={social.url} position="top">
-                <BaseLink
-                  text={social.name}
-                  href={social.url}
-                  target={social.target}
-                  rel={social.rel}
-                ></BaseLink>
-              </Tooltip>
-              {#if i < socials.length - 1}
-                <span
-                  class="cursor-default select-none text-dark/60 dark:text-light/60"
-                  aria-hidden="true">/</span
-                >
-              {/if}
-            {/each}
-          </div>
-        </div>
-      </Hoverable>
-    {/if}
-    {#if APP_VERSION?.length}
-      <Hoverable setPointer={false} let:hovered>
+      <div class="flex select-none flex-row items-center justify-start gap-x-2">
+        <span class="text-dark/60 dark:text-light/60">{$t('Social').toLowerCase()}</span>
+        <span
+          class="cursor-default select-none text-dark/60 dark:text-light/60"
+          aria-hidden="true">/</span
+        >
         <div
-          class="flex select-none flex-row items-center justify-start gap-x-4 text-dark/90 dark:text-light/90"
-          aria-label={$t('View latest commit on GitHub')}
+          class="flex flex-row items-center justify-between text-dark/90 dark:text-light/90"
+          role="group"
+          aria-label={$t('Social links')}
         >
-          <Icon name="GitBranch" active={hovered} size={20} interactive></Icon>
-          <Tooltip text={$t('View latest commit on GitHub')} position="top">
-            <BaseLink
-              target="_blank"
-              rel="noopener noreferrer"
-              href="{BASE_GIT_URL}/commit/{APP_VERSION}"
-              aria-label={$t('View latest commit on GitHub')}
+          {#each socials as social, i}
+            <Tooltip
+              text={social.url.includes('mailto:')
+                ? social.url.split('mailto:')[1]
+                : social.url}
+              position="top"
             >
-              {APP_VERSION.slice(0, 6)}
-            </BaseLink>
-          </Tooltip>
+              <BaseLink
+                text={social.name}
+                href={social.url}
+                target={social.target}
+                rel={social.rel}
+              />
+            </Tooltip>
+            {#if i < socials.length - 1}
+              <span
+                class="cursor-default select-none text-dark/60 dark:text-light/60"
+                aria-hidden="true">,&nbsp;</span
+              >
+            {/if}
+          {/each}
         </div>
-      </Hoverable>
+      </div>
+    {/if}
+    {#if APP_VERSION?.length}
+      <div
+        class="flex select-none flex-row items-center justify-start gap-x-2 text-dark/90 dark:text-light/90"
+        aria-label={$t('View latest commit on GitHub')}
+      >
+        <span class="text-dark/60 dark:text-light/60">git</span>
+        <span
+          class="cursor-default select-none text-dark/60 dark:text-light/60"
+          aria-hidden="true">/</span
+        >
+        <Tooltip text={$t('View latest commit on GitHub')} position="top">
+          <BaseLink
+            target="_blank"
+            rel="noopener noreferrer"
+            href="{BASE_GIT_URL}/commit/{APP_VERSION}"
+            aria-label={$t('View latest commit on GitHub')}
+          >
+            {APP_VERSION.slice(0, 6)}
+          </BaseLink>
+        </Tooltip>
+      </div>
     {/if}
   </footer>
 {/if}
diff --git a/svelte-app/src/components/header.svelte b/svelte-app/src/components/header.svelte
index e33a271ed..e9707017a 100644
--- a/svelte-app/src/components/header.svelte
+++ b/svelte-app/src/components/header.svelte
@@ -4,42 +4,49 @@
   import LanguageControls from '$components/controls/language-toggle.svelte';
   import ThemeToggle from '$components/controls/theme-toggle.svelte';
   import NavLink from '$components/nav/header-link.svelte';
-  import HeaderLogo from '$components/nav/header-logo.svelte';
 </script>
 
 <header
-  class="flex flex-row flex-wrap items-center justify-between border-b border-dark/80 px-7 py-5 transition-[border-color] dark:border-light/60"
+  class="flex flex-row flex-wrap items-center justify-start gap-x-6 border-b border-dark/80 px-6 py-4 transition-[border-color] dark:border-light/60"
 >
-  <nav
-    class="flex flex-row items-center justify-start gap-4 text-base transition-[color]"
-    aria-label="Main navigation"
+  <div
+    class="flex flex-1 flex-row flex-wrap items-center justify-between gap-x-3 gap-y-4"
   >
-    <HeaderLogo></HeaderLogo>
-    <div class="flex flex-col items-start justify-start gap-y-0.5 font-mono">
-      <span class="select-none text-base font-bold text-dark dark:text-light"
-        >kio.dev</span
-      >
-      <div
-        class="flex select-none flex-row items-center justify-start gap-x-1.5 text-[13.5px] text-dark/80 dark:text-light/80 print:hidden"
-      >
-        {#each NAV_LINKS as link, i}
-          <NavLink {link}></NavLink>
-          {#if i < NAV_LINKS.length - 1}
-            <span
-              class="cursor-default select-none text-dark/60 dark:text-light/60"
-              aria-hidden="true">/</span
-            >
-          {/if}
-        {/each}
+    <nav
+      class="flex flex-col items-start justify-center gap-y-3 text-base transition-[color]"
+      aria-label="Main navigation"
+    >
+      <div class="flex flex-row items-center justify-start gap-x-2.5 gap-y-1 font-mono">
+        <span
+          class="flex-shrink-0 select-none whitespace-nowrap text-base font-bold text-dark transition-colors dark:text-light"
+          >kio.dev <span
+            class="cursor-default select-none text-dark/60 dark:text-light/60"
+            aria-hidden="true">/</span
+          ></span
+        >
+
+        <span
+          class="inline-flex select-none flex-row flex-wrap items-center justify-start gap-y-1 text-[13.5px] text-dark/80 dark:text-light/80 print:hidden"
+        >
+          {#each NAV_LINKS as link, i}
+            <span>
+              <NavLink {link} />{#if i < NAV_LINKS.length - 1}<span
+                  class="cursor-default select-none text-dark/60 dark:text-light/60"
+                  aria-hidden="true">,&nbsp;</span
+                >
+              {/if}
+            </span>
+          {/each}
+        </span>
       </div>
+    </nav>
+    <div
+      class="flex flex-row items-center justify-start gap-2 text-right text-dark dark:text-light md:gap-3 print:hidden"
+      aria-label="Page controls"
+      role="group"
+    >
+      <ThemeToggle />
+      <LanguageControls />
     </div>
-  </nav>
-  <div
-    class="flex flex-row items-center justify-end gap-x-4 text-dark dark:text-light print:hidden"
-    aria-label="Page controls"
-    role="group"
-  >
-    <ThemeToggle></ThemeToggle>
-    <LanguageControls></LanguageControls>
   </div>
 </header>
diff --git a/svelte-app/src/components/headings/headed-block.svelte b/svelte-app/src/components/headings/headed-block.svelte
index 972921fa6..016b6ad23 100644
--- a/svelte-app/src/components/headings/headed-block.svelte
+++ b/svelte-app/src/components/headings/headed-block.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import ConstrainWidth from '$components/layouts/constrain-width.svelte';
 
-  export let heading: string,
+  export let heading: string | undefined = undefined,
+    constrainWidth = true,
     testId: string | undefined = undefined;
 
   export const id = Math.random().toString(36).substring(2);
@@ -9,11 +10,21 @@
 
 <section class="mb-6 w-full transition-colors" {id} data-test-id={testId}>
   <div class="mb-5 mt-6 w-full px-8">
-    <h1 class="font-display text-3xl font-black" id="{id}-heading">{heading}</h1>
+    {#if $$slots.heading}
+      <slot name="heading" {id} />
+    {:else}
+      <h1 class="font-display text-3xl font-black" id="{id}-heading">{heading}</h1>
+    {/if}
   </div>
-  <ConstrainWidth class="px-8">
+  {#if constrainWidth}
+    <ConstrainWidth class="px-8">
+      <div class="mx-1 font-sans text-base text-dark/90 dark:text-light/90">
+        <slot {id} />
+      </div>
+    </ConstrainWidth>
+  {:else}
     <div class="mx-1 font-sans text-base text-dark/90 dark:text-light/90">
       <slot {id} />
     </div>
-  </ConstrainWidth>
+  {/if}
 </section>
diff --git a/svelte-app/src/components/hoverable.svelte b/svelte-app/src/components/hoverable.svelte
index 068ccc3ec..74f5e46b3 100644
--- a/svelte-app/src/components/hoverable.svelte
+++ b/svelte-app/src/components/hoverable.svelte
@@ -4,14 +4,22 @@
   export let hovered = false,
     setPointer = true;
 
+  let debounce: ReturnType<typeof setTimeout> | undefined;
+
   const dispatch = createEventDispatcher(),
     handleHoverIn = () => {
-      hovered = true;
-      dispatch('update', { state: true });
+      clearTimeout(debounce);
+      debounce = setTimeout(() => {
+        hovered = true;
+        dispatch('update', { state: true });
+      }, 0);
     },
     handleHoverOut = () => {
-      hovered = false;
-      dispatch('update', { state: false });
+      clearTimeout(debounce);
+      debounce = setTimeout(() => {
+        hovered = false;
+        dispatch('update', { state: false });
+      }, 0);
     };
 
   onDestroy(handleHoverOut);
diff --git a/svelte-app/src/components/icon.svelte b/svelte-app/src/components/icon.svelte
index 21468414a..95938ba39 100644
--- a/svelte-app/src/components/icon.svelte
+++ b/svelte-app/src/components/icon.svelte
@@ -77,13 +77,13 @@
 <div
   class={interactive
     ? active
-      ? 'text-accent-light/90 dark:text-accent-dark/90'
+      ? 'text-orange-light'
       : 'text-dark/90 dark:text-light/90'
     : undefined}
-  class:hover:text-accent-light={interactive}
-  class:focus-visible:text-accent-light={interactive}
-  class:dark:hover:text-accent-dark={interactive}
-  class:dark:focus-visible:text-accent-dark={interactive}
+  class:hover:text-orange-light={interactive}
+  class:focus-visible:text-orange-light={interactive}
+  class:dark:hover:text-orange-light={interactive}
+  class:dark:focus-visible:text-orange-light={interactive}
   class:inline
   style="width: {size}px; height: {size}px;"
 >
diff --git a/svelte-app/src/components/layouts/scroll-container.svelte b/svelte-app/src/components/layouts/scroll-container.svelte
index 4452b2b7b..53fe2ec79 100644
--- a/svelte-app/src/components/layouts/scroll-container.svelte
+++ b/svelte-app/src/components/layouts/scroll-container.svelte
@@ -4,7 +4,9 @@
   import { afterNavigate } from '$app/navigation';
   import { BASE_TRANSITION_DURATION } from '$lib/consts';
 
-  let element: HTMLDivElement, timeout: ReturnType<typeof setTimeout> | undefined;
+  let element: HTMLDivElement,
+    elementContainer: HTMLDivElement,
+    timeout: ReturnType<typeof setTimeout> | undefined;
 
   onDestroy(() => {
     if (timeout) {
@@ -27,13 +29,15 @@
 </script>
 
 <div
-  class="relative mx-auto flex h-full w-full max-w-[82rem] flex-col rounded-sm border border-dark/80 bg-white shadow-lg shadow-dark/10 transition-colors dark:border-light/60 dark:bg-black dark:shadow-black/40"
+  class="relative mx-auto flex h-full w-full max-w-[76rem] flex-col rounded-sm border border-dark/80 bg-neutral-50 shadow-lg shadow-dark/10 transition-colors dark:border-light/60 dark:bg-black dark:shadow-black/40"
+  bind:this={elementContainer}
 >
   <slot name="before" />
   <div
     class="h-full flex-1 overflow-visible overflow-x-clip overflow-y-scroll"
     tabindex="-1"
     role="none"
+    id="scroll-container"
     data-test-id="scroll-container"
     bind:this={element}
     on:scroll={(e) => {
@@ -45,3 +49,16 @@
   </div>
   <slot name="after" />
 </div>
+
+<style lang="scss">
+  @import '@styles/colors';
+  @import '@styles/mixins';
+
+  #scroll-container {
+    scrollbar-color: $neutral-100 $white;
+
+    @include dark {
+      scrollbar-color: $neutral-400 $black;
+    }
+  }
+</style>
diff --git a/svelte-app/src/components/link.svelte b/svelte-app/src/components/link.svelte
index 5aa5e56ab..fbc15ba1a 100644
--- a/svelte-app/src/components/link.svelte
+++ b/svelte-app/src/components/link.svelte
@@ -25,13 +25,15 @@
     text={tooltipText ??
       (link && link.length > 50 ? `${link.slice(0, 50 - 3)}...` : link ?? $t('Visit'))}
     position={tooltipPosition}
-    inDelay={250}
+    inDelay={500}
   >
     <svelte:element
       this={type}
       target={newtab ? '_blank' : undefined}
       rel={newtab ? 'noopener noreferrer' : undefined}
-      class="focus-outline-sm rounded-sm from-accent-light underline decoration-accent-light underline-offset-[2px] transition-[text-decoration-color] dark:decoration-accent-dark"
+      class="focus-outline-sm rounded-xs font-semibold text-black underline decoration-neutral-200 underline-offset-[3px] transition-[text-decoration-color,color] dark:text-white dark:decoration-neutral-400"
+      class:decoration-orange-light={hovered}
+      class:dark:decoration-orange-light={hovered}
       class:decoration-[3px]={hovered}
       class:decoration-2={!hovered}
       tabindex="0"
diff --git a/svelte-app/src/components/lists/document-list.svelte b/svelte-app/src/components/lists/document-list.svelte
index 9b781e921..1cd1b4bb2 100644
--- a/svelte-app/src/components/lists/document-list.svelte
+++ b/svelte-app/src/components/lists/document-list.svelte
@@ -6,8 +6,13 @@
   export let documents: (ProjectDocument | PostDocument)[];
 </script>
 
-<div class="mb-6 flex w-full flex-col gap-8" role="group" {...$$restProps}>
-  {#each documents as document}
+<div class="mb-6 flex w-full flex-col gap-8 px-8" role="group" {...$$restProps}>
+  {#each documents as document, idx}
     <ListItem {document}></ListItem>
+    {#if idx < documents.length - 1}
+      <span
+        class="-my-4 block w-full min-w-0 border-b border-dashed border-neutral-200 transition-colors dark:border-neutral-400"
+      ></span>
+    {/if}
   {/each}
 </div>
diff --git a/svelte-app/src/components/lists/list-item.svelte b/svelte-app/src/components/lists/list-item.svelte
index b1df9150d..aef8cc44d 100644
--- a/svelte-app/src/components/lists/list-item.svelte
+++ b/svelte-app/src/components/lists/list-item.svelte
@@ -19,13 +19,13 @@
 <Hoverable let:hovered>
   <a
     href={$linkTo(link)}
-    class="focus-outline w-full rounded-md"
+    class="focus-outline relative -mx-3 -my-2.5 w-[calc(100%+24px)] px-3 py-2.5 transition-[color] duration-75 hover:bg-neutral-0 focus-visible:bg-neutral-0 dark:hover:bg-neutral-700 dark:focus-visible:bg-neutral-700"
     tabindex="0"
     data-sveltekit-preload-code
     data-sveltekit-preload-data
   >
     <div
-      class="flex flex-row items-center justify-start pb-1 pt-0.5 font-mono text-sm leading-[1.2] text-dark/80 transition-colors dark:text-light/80"
+      class="flex flex-row items-center justify-start pb-1 pt-0.5 font-mono text-sm leading-[1.2] text-neutral-700 transition-colors dark:text-neutral-200"
       class:gap-3={document.tags?.length}
     >
       <p class="line-clamp-1" aria-label={$t('Date posted')}>
@@ -33,8 +33,8 @@
       </p>
       {#if document.tags?.length}
         <span
-          class="font-code rounded-sm border border-dark/80 bg-dark/5 px-1.5 py-1 text-xs transition-colors dark:border-light/60 dark:bg-light/5"
-          >{document.tags[0].title.toLowerCase()}</span
+          class="font-code rounded-xs bg-neutral-100 px-1.5 py-1 text-xs transition-colors dark:bg-neutral-500"
+          class:dark:bg-neutral-400={hovered}>{document.tags[0].title.toLowerCase()}</span
         >
       {:else}
         <BulletPoint></BulletPoint>
@@ -43,7 +43,7 @@
     </div>
 
     <h1
-      class="line-clamp-2 font-sans text-2xl font-bold leading-9 decoration-accent-light decoration-[3px] underline-offset-4 transition-colors dark:decoration-accent-dark lg:max-w-[60rem]"
+      class="line-clamp-2 font-sans text-2xl font-bold leading-9 decoration-orange-light decoration-[3px] underline-offset-4 transition-colors lg:max-w-[60rem]"
       class:pb-1={document.desc?.length}
       class:underline={hovered}
     >
@@ -51,7 +51,17 @@
     </h1>
 
     {#if document.desc?.length}
-      <p class="line-clamp-2 lg:max-w-[60rem]">{document.desc}</p>
+      <p
+        class="line-clamp-2 text-neutral-700 transition-colors dark:text-neutral-200 lg:max-w-[60rem]"
+      >
+        {document.desc}
+      </p>
     {/if}
+
+    <span
+      class="absolute right-6 top-1/2 block -translate-y-1/2 text-orange-light opacity-0 transition-[opacity,transform]"
+      class:opacity-100={hovered}
+      class:translate-x-1.5={hovered}>&rarr;</span
+    >
   </a>
 </Hoverable>
diff --git a/svelte-app/src/components/loading/spinner.svelte b/svelte-app/src/components/loading/spinner.svelte
index a1f70d69a..eea0beb2e 100644
--- a/svelte-app/src/components/loading/spinner.svelte
+++ b/svelte-app/src/components/loading/spinner.svelte
@@ -1,5 +1,5 @@
 <svg
-  class="-ml-1 mt-0.5 h-5 w-5 animate-spin text-accent-light !opacity-100 dark:text-accent-dark {$$props.class ||
+  class="-ml-1 mt-0.5 h-5 w-5 animate-spin text-orange-light !opacity-100 {$$props.class ||
     ''}"
   style="opacity:0"
   xmlns="http://www.w3.org/2000/svg"
diff --git a/svelte-app/src/components/nav/base-link.svelte b/svelte-app/src/components/nav/base-link.svelte
index a08747f71..5548e03bb 100644
--- a/svelte-app/src/components/nav/base-link.svelte
+++ b/svelte-app/src/components/nav/base-link.svelte
@@ -14,14 +14,16 @@
 
 <Hoverable let:hovered>
   <a
-    class="focus-outline-sm rounded-sm text-dark/80 dark:text-light/80"
+    class="focus-outline-sm text-dark/80 underline-offset-4 transition-colors dark:text-light/80"
     class:active={active || hovered}
+    class:underline={active || hovered}
     class:slotted={$$slots.default !== undefined}
     class:flex={$$slots.default !== undefined}
     class:flex-row={$$slots.default !== undefined}
     class:items-center={$$slots.default !== undefined}
     class:justify-start={$$slots.default !== undefined}
     class:gap-x-1.5={$$slots.default !== undefined}
+    class:dark:text-neutral-100={active || hovered}
     href={$linkTo(href)}
     tabindex="0"
     role={$$props.role || undefined}
@@ -41,17 +43,3 @@
     {/if}
   </a>
 </Hoverable>
-
-<style lang="scss">
-  @import '@styles/mixins';
-
-  a {
-    @include focused('.active') {
-      @apply text-accent-light;
-
-      @include dark {
-        @apply text-accent-dark;
-      }
-    }
-  }
-</style>
diff --git a/svelte-app/src/components/nav/header-link.svelte b/svelte-app/src/components/nav/header-link.svelte
index d0ab3c7db..2b0689072 100644
--- a/svelte-app/src/components/nav/header-link.svelte
+++ b/svelte-app/src/components/nav/header-link.svelte
@@ -37,5 +37,9 @@
   })();
 </script>
 
-<BaseLink text={$t(link.name)} href={link.url} active={isActive} on:click={handleAction}
-></BaseLink>
+<BaseLink
+  text={$t(link.name)}
+  href={link.url}
+  active={isActive}
+  on:click={handleAction}
+/>
diff --git a/svelte-app/src/components/nav/header-logo.svelte b/svelte-app/src/components/nav/header-logo.svelte
index d900b9774..a1db37d95 100644
--- a/svelte-app/src/components/nav/header-logo.svelte
+++ b/svelte-app/src/components/nav/header-logo.svelte
@@ -21,7 +21,7 @@
 
 <span class="relative h-fit w-fit">
   <a
-    class="focus-outline-sm block w-10 select-none rounded-sm invert-0 transition-[filter] dark:invert"
+    class="focus-outline-sm block w-11 select-none rounded-xs invert-0 transition-[filter] dark:invert"
     href={$linkTo(clicks < 3 ? '/' : '/experiments')}
     aria-label={$t('Home')}
     on:click={handleClick}
diff --git a/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte b/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte
index ed1a336fc..48dd81635 100644
--- a/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte
+++ b/svelte-app/src/components/portable-text/image-carousel/scroll-button.svelte
@@ -1,23 +1,36 @@
 <script lang="ts">
-  import Icon from '$components/icon.svelte';
+  import Hoverable from '$components/hoverable.svelte';
 
   export let dir: 'left' | 'right',
     onClick: () => void,
     disabled = false;
 </script>
 
-<button
-  class="focus-outline-sm mt-4 flex flex-grow items-center rounded-md text-accent-light hover:text-dark focus-visible:text-dark disabled:cursor-not-allowed disabled:text-dark/60 dark:text-accent-dark dark:hover:text-light dark:focus-visible:text-light dark:disabled:text-light/60"
-  class:justify-end={dir === 'right'}
-  class:justify-start={dir === 'left'}
-  on:click={onClick}
-  on:keydown={(e) => {
-    if (e.key === 'Enter') {
-      onClick();
-    }
-  }}
-  type="button"
-  {disabled}
->
-  <Icon name={dir === 'left' ? 'ArrowLeft' : 'ArrowRight'} size={22}></Icon>
-</button>
+<Hoverable let:hovered>
+  <button
+    class="focus-outline mt-4 flex flex-grow items-center font-mono text-xs text-dark/90 disabled:cursor-not-allowed disabled:text-dark/60 dark:text-light/90 dark:disabled:text-light/60"
+    class:justify-end={dir === 'right'}
+    class:justify-start={dir === 'left'}
+    on:click={onClick}
+    on:keydown={(e) => {
+      if (e.key === 'Enter') {
+        onClick();
+      }
+    }}
+    type="button"
+    {disabled}
+  >
+    <span
+      class="-mx-2 -my-1.5 px-2 py-1.5"
+      class:bg-neutral-100={hovered}
+      class:dark:bg-neutral-500={hovered}
+    >
+      {#if dir === 'left'}
+        [prev]
+      {:else}
+        [next]
+      {/if}
+    </span>
+    <!-- <Icon name={dir === 'left' ? 'ArrowLeft' : 'ArrowRight'} size={22}></Icon> -->
+  </button>
+</Hoverable>
diff --git a/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte b/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte
index e69408998..abc0bc7cc 100644
--- a/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte
+++ b/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte
@@ -7,10 +7,10 @@
 </script>
 
 <span class="relative p-0.5">
-  <span class="relative z-[1] text-light transition-colors dark:text-dark">
+  <span class="relative z-[1] text-dark transition-colors">
     <slot />
   </span>
   <span
-    class="absolute bottom-0 left-0 right-0 top-0 z-[0] rounded-[1px] bg-accent-light/90 transition-colors dark:bg-accent-dark/90"
+    class="absolute bottom-0 left-0 right-0 top-0 z-[0] bg-orange-light/90 transition-colors"
   ></span>
 </span>
diff --git a/svelte-app/src/components/tooltips/inner.svelte b/svelte-app/src/components/tooltips/inner.svelte
index ae9f17563..2b9189b54 100644
--- a/svelte-app/src/components/tooltips/inner.svelte
+++ b/svelte-app/src/components/tooltips/inner.svelte
@@ -149,7 +149,7 @@
   aria-hidden="true"
 >
   <span
-    class="block whitespace-nowrap rounded-sm bg-black px-2 py-1.5 font-mono text-xs text-light dark:bg-light dark:text-dark"
+    class="block whitespace-nowrap rounded-sm bg-neutral-600 px-2 py-1.5 font-mono text-xs text-light dark:bg-neutral-100 dark:text-dark"
     in:maybeTransition={{ duration, easing: cubicInOut }}
     out:maybeTransition={{ duration, easing: cubicInOut, delay }}
   >
diff --git a/svelte-app/src/languages/en.json b/svelte-app/src/languages/en.json
index d05836f2c..711b283cd 100644
--- a/svelte-app/src/languages/en.json
+++ b/svelte-app/src/languages/en.json
@@ -4,12 +4,15 @@
   "A project on kio.dev": "A project on kio.dev",
   "About": "About",
   "About me": "About me",
+  "All posts": "All posts",
+  "All topics": "All topics",
   "Back": "Back",
   "Blog": "Blog",
   "Click here to": "Click here to",
   "Code block": "Code block",
   "Code content": "Code content",
   "Copied": "Copied",
+  "Copy": "Copy",
   "Copy to clipboard": "Copy to clipboard",
   "Date posted": "Date posted",
   "Duration": "Duration",
@@ -25,6 +28,9 @@
   "Home": "Home",
   "Internal Error": "Internal Error",
   "Invalid date": "Invalid date",
+  "Language": "Language",
+  "Lights off": "Lights off",
+  "Lights on": "Lights on",
   "Links": "Links",
   "Meta": "Meta",
   "More": "More",
@@ -43,12 +49,16 @@
   "See more": "See more",
   "Show stack trace": "Show stack trace",
   "Skip to content": "Skip to content",
+  "Social": "Social",
   "Social links": "Social links",
   "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",
   "Tags": "Tags",
+  "Theme": "Theme",
   "Thoughts": "Thoughts",
+  "Topic": "Topic",
+  "Topics": "Topics",
   "Unknown date": "Unknown date",
   "Use dark mode": "Use dark mode",
   "Use light mode": "Use light mode",
@@ -82,6 +92,9 @@
     "unauthorized": {
       "message": "Sorry, you don't have permission to access that resource.",
       "title": "Unauthorized"
+    },
+    "no-content": {
+      "message": "No content."
     }
   },
   "go back": "go back",
@@ -101,7 +114,11 @@
     },
     "thoughts": {
       "description": "Thoughts about tech, design, and development",
-      "title": "Thoughts"
+      "title": "Thoughts",
+      "sections": {
+        "topics": "Topics",
+        "posts": "Recent thoughts"
+      }
     },
     "work": {
       "description": "An overview of my work, prior roles, and open-source contributions",
diff --git a/svelte-app/src/languages/fr.json b/svelte-app/src/languages/fr.json
index 6d1a26607..467e6a3ef 100644
--- a/svelte-app/src/languages/fr.json
+++ b/svelte-app/src/languages/fr.json
@@ -4,12 +4,15 @@
   "A project on kio.dev": "Un projet sur kio.dev",
   "About": "À propos",
   "About me": "À propos de moi",
+  "All posts": "Tous les articles",
+  "All topics": "Tous les sujets",
   "Back": "Retour",
   "Blog": "Blog",
   "Click here to": "Cliquez ici pour",
   "Code block": "Bloc de code",
   "Code content": "Contenu du code",
   "Copied": "Copié",
+  "Copy": "Copier",
   "Copy to clipboard": "Copier dans le presse-papiers",
   "Date posted": "Date de publication",
   "Duration": "Durée",
@@ -25,6 +28,9 @@
   "Home": "Accueil",
   "Internal Error": "Erreur interne",
   "Invalid date": "Date invalide",
+  "Language": "Langue",
+  "Lights off": "Lumières éteintes",
+  "Lights on": "Lumières allumées",
   "Links": "Liens",
   "Meta": "Plus",
   "More": "Plus",
@@ -43,12 +49,16 @@
   "See more": "Voir plus",
   "Show stack trace": "Afficher la trace de la pile",
   "Skip to content": "Passer au contenu",
+  "Social": "Social",
   "Social links": "Liens sociaux",
   "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",
   "Tags": "Tags",
+  "Theme": "Thème",
   "Thoughts": "Pensées",
+  "Topic": "Sujet",
+  "Topics": "Sujets",
   "Unknown date": "Date inconnue",
   "Use dark mode": "Utiliser le mode sombre",
   "Use light mode": "Utiliser le mode clair",
@@ -82,6 +92,9 @@
     "unauthorized": {
       "message": "Désolé, vous n'êtes pas autorisé à accéder à cette ressource.",
       "title": "Non Autorisé"
+    },
+    "no-content": {
+      "message": "Pas de contenu."
     }
   },
   "go back": "retourner",
@@ -101,7 +114,11 @@
     },
     "thoughts": {
       "description": "Pensées sur la technologie, le design et le développement",
-      "title": "Pensées"
+      "title": "Pensées",
+      "sections": {
+        "topics": "Sujets",
+        "posts": "Articles récents"
+      }
     },
     "work": {
       "description": "Un aperçu de mon travail, de mes rôles précédents et de mes contributions open-source",
diff --git a/svelte-app/src/lib/consts.ts b/svelte-app/src/lib/consts.ts
index ed8a78e9f..9e7b6b8cc 100644
--- a/svelte-app/src/lib/consts.ts
+++ b/svelte-app/src/lib/consts.ts
@@ -12,7 +12,7 @@ export const MEDIA_QUERIES = {
 export const APP_LANGS = ['en', 'fr'];
 export const DEFAULT_APP_LANG = APP_LANGS[0];
 
-export const VALID_DOC_TYPES = ['post', 'project', 'config'] as const;
+export const VALID_DOC_TYPES = ['post', 'project', 'config', 'tag'] as const;
 
 export const LOCAL_SETTINGS_KEY = 'kio-dev-settings';
 
diff --git a/svelte-app/src/lib/settings.ts b/svelte-app/src/lib/settings.ts
index fcc728a23..ee04aa394 100644
--- a/svelte-app/src/lib/settings.ts
+++ b/svelte-app/src/lib/settings.ts
@@ -52,17 +52,6 @@ const useStoredSettings = (settings?: string) => {
           }
           break;
       }
-      // if (
-      //   key === 'theme' &&
-      //   typeof savedSetting === 'string' &&
-      //   Object.values(APP_THEMES).includes(
-      //     savedSetting as (typeof APP_THEMES)[keyof typeof APP_THEMES]
-      //   )
-      // ) {
-      //   themeSetting = savedSetting as (typeof APP_THEMES)[keyof typeof APP_THEMES];
-      // } else if (key === 'reduce_motion' && typeof savedSetting === 'boolean') {
-      //   reduceMotionSetting = savedSetting;
-      // }
     });
 
     return true;
@@ -83,12 +72,6 @@ if (browser) {
 
 useStoredSettings(storedSettings);
 
-// if (!useStoredSettings(storedSettings)) {
-//   themeSetting = APP_THEMES.DARK;
-//   reduceMotionSetting = false;
-//   modifiedSetting = false;
-// }
-
 const settings = {
   theme: writable<Settings['theme']>(themeSetting),
   reduce_motion: writable(reduceMotionSetting),
diff --git a/svelte-app/src/lib/store.ts b/svelte-app/src/lib/store.ts
index 7a9a61c02..a4f69aa51 100644
--- a/svelte-app/src/lib/store.ts
+++ b/svelte-app/src/lib/store.ts
@@ -90,7 +90,7 @@ const constructUrl = (
   return `${basePath}${queryParams.length ? `?${queryParams.join('&')}` : ''}`;
 };
 
-export const incViews = (
+export const incViews = async (
   fetch: RouteFetch,
   doc: DocumentRegistry[keyof DocumentRegistry]
 ) => {
@@ -99,7 +99,7 @@ export const incViews = (
   }
 
   try {
-    fetch(`${API_URL}mutate`, {
+    const res = await fetch(`${API_URL}mutate`, {
       method: 'POST',
       body: JSON.stringify({
         id: doc._id,
@@ -107,8 +107,15 @@ export const incViews = (
         field: 'views'
       })
     });
+
+    if (!res.ok) {
+      Logger.error(`Failed to increment views for ${doc._type} ${doc._id}`, {
+        status: res.status,
+        statusText: res.statusText
+      });
+    }
   } catch (e) {
-    Logger.error('', e);
+    Logger.error('Error incrementing views', e);
   }
 };
 
@@ -131,7 +138,8 @@ const fetchData = async <T>(
 
     if (
       !(fetchResponse?.meta && fetchResponse?.data) ||
-      (typeof fetchResponse?.data === 'object' &&
+      (!Array.isArray(fetchResponse?.data) &&
+        typeof fetchResponse?.data === 'object' &&
         Object.keys(fetchResponse.data).length === 0) ||
       (Array.isArray(fetchResponse?.data) &&
         !fetchResponse?.meta &&
@@ -177,6 +185,7 @@ const find = async <T extends keyof DocumentRegistry>(
   return response;
 };
 
+// TODO: These types are a fucking mess and desperately need a refactor but honestly it _works_ and I can't be fucked
 const findOne = async <T extends keyof DocumentRegistry>(
   fetch: RouteFetch,
   model: T,
diff --git a/svelte-app/src/routes/+error.svelte b/svelte-app/src/routes/+error.svelte
index 6845611c7..bcfdbad54 100644
--- a/svelte-app/src/routes/+error.svelte
+++ b/svelte-app/src/routes/+error.svelte
@@ -6,10 +6,8 @@
   import { t } from '$lib/i18n';
 
   import ArrowButton from '$components/controls/arrow-button.svelte';
-  import Divider from '$components/divider.svelte';
   import HeadedBlock from '$components/headings/headed-block.svelte';
-  import Icon from '$components/icon.svelte';
-  import ConstrainWidth from '$components/layouts/constrain-width.svelte';
+  import Divider from '$components/divider.svelte';
   import Link from '$components/link.svelte';
 
   import type { LocaleKey } from '$generated';
@@ -88,41 +86,43 @@
   <meta name="robots" content="none" />
 </svelte:head>
 
-<ConstrainWidth class="px-8 pt-5">
-  <div data-test-id="error-page">
-    <HeadedBlock {heading}>
-      <p class="my-4 text-base">
-        <!-- eslint-disable-next-line svelte/prefer-destructured-store-props -->
-        {$page.error?.message && $page.status !== 404 ? $page.error.message : $t(message)}
-      </p>
-      <p class="my-4 text-base">
-        {$t('Please')}
-        <Link on:click={() => window.history.back()}>{$t('go back')}</Link>, or <Link
-          on:click={() => window.location.reload()}>{$t('refresh the page')}</Link
-        >.
-      </p>
-    </HeadedBlock>
+<div data-test-id="error-page">
+  <HeadedBlock {heading}>
+    <p class="my-4 text-base">
+      <!-- eslint-disable-next-line svelte/prefer-destructured-store-props -->
+      {$page.error?.message && $page.status !== 404 ? $page.error.message : $t(message)}
+    </p>
+    <p class="my-4 text-base">
+      {$t('Please')}
+      <Link on:click={() => window.history.back()}>{$t('go back')}</Link>, or <Link
+        on:click={() => window.location.reload()}>{$t('refresh the page')}</Link
+      >.
+    </p>
+  </HeadedBlock>
 
-    {#if causes?.length}
-      <Divider></Divider>
-      <ArrowButton align="left" on:click={() => (showStack = !showStack)} fullWidth>
-        <span class="flex items-center justify-start gap-2">
-          <p class="font-mono text-base">{$t('See more')}</p>
-          <Icon
-            name="ArrowUp"
-            size={18}
-            inline
-            style="transform: {showStack ? 'rotate(0deg)' : 'rotate(180deg)'};"
-          ></Icon>
-        </span>
-      </ArrowButton>
-      {#if showStack}
-        <div class="pt-4" transition:slide={{ duration: BASE_ANIMATION_DURATION }}>
+  {#if causes?.length}
+    <div class="px-8">
+      <span
+        class="my-4 block w-full border-b border-dashed border-neutral-200 transition-colors dark:border-neutral-400"
+      ></span>
+      <ArrowButton
+        align="left"
+        placement="after"
+        text={$t('See more')}
+        dir={showStack ? 'up' : 'down'}
+        on:click={() => (showStack = !showStack)}
+      />
+    </div>
+    {#if showStack}
+      <div class="px-8 pt-5" transition:slide={{ duration: BASE_ANIMATION_DURATION }}>
+        <div
+          class="border-b border-t border-dashed border-neutral-200 py-4 transition-[border-color] dark:border-neutral-400"
+        >
           <pre
-            class="font-code whitespace-pre-wrap break-all rounded-md border border-dark/40 p-4 text-sm dark:border-light/40">{#each causes as cause, i}{cause?.trim?.()}{#if i < causes.length - 1}<br
+            class="font-code whitespace-pre-wrap break-all bg-neutral-0 px-4 py-2 text-sm transition-colors dark:bg-neutral-700">{#each causes as cause, i}{cause?.trim?.()}{#if i < causes.length - 1}<br
                 />{/if}{/each}</pre>
         </div>
-      {/if}
+      </div>
     {/if}
-  </div>
-</ConstrainWidth>
+  {/if}
+</div>
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index 5475d822f..b0e869ffc 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -52,7 +52,7 @@
     clearTimeout(setLoadingTimer);
 
     if (event.from !== event.to) {
-      setLoadingTimer = setTimeout(() => loading.set(true), 100);
+      setLoadingTimer = setTimeout(() => loading.set(true), 50);
     }
   });
 
@@ -89,8 +89,8 @@
         async (res) =>
           (HighlightStyles =
             res === APP_THEMES.LIGHT
-              ? (await import('svelte-highlight/styles/nnfx-light')).default
-              : (await import('svelte-highlight/styles/night-owl')).default)
+              ? (await import('svelte-highlight/styles/stackoverflow-light')).default
+              : (await import('svelte-highlight/styles/stackoverflow-dark')).default)
       )
     );
 
@@ -139,7 +139,7 @@
 <svelte:body use:classList={[$theme, $loading ? 'is-loading' : 'is-loaded']} />
 
 <span
-  class="focus-outline-sm absolute left-1/2 top-0 z-50 -mt-14 -translate-x-1/2 cursor-pointer rounded-md bg-light px-4 py-2 text-sm font-bold text-dark transition-[margin-top,background-color,color] focus-visible:mt-4 dark:bg-black dark:text-light print:hidden"
+  class="focus-outline-sm absolute left-1/2 top-0 z-50 -mt-14 -translate-x-1/2 cursor-pointer rounded-xs bg-neutral-100 px-4 py-2 text-sm font-bold text-dark transition-[margin-top,background-color,color] focus-visible:mt-4 dark:bg-neutral-600 dark:text-light print:hidden"
   role="button"
   aria-label={$t('Skip to content')}
   tabindex="0"
@@ -153,7 +153,7 @@
 >
   <ScrollContainer>
     <svelte:fragment slot="before">
-      <Header></Header>
+      <Header />
     </svelte:fragment>
 
     <PageTransition pathname={data.pathname} id="content-wrapper">
@@ -161,7 +161,7 @@
     </PageTransition>
 
     <svelte:fragment slot="after">
-      <Footer config={data.config}></Footer>
+      <Footer config={data.config} />
     </svelte:fragment>
   </ScrollContainer>
 
diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
index d79eeec51..ba15414f4 100644
--- a/svelte-app/src/routes/[[lang=lang]]/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { linkTo, t } from '$lib/i18n.js';
+  import { ENV } from '$lib/env';
+  import { linkTo, t } from '$lib/i18n';
   import { pageTitle } from '$lib/navigation';
 
   import ArrowButton from '$components/controls/arrow-button.svelte';
   import Divider from '$components/divider.svelte';
   import EmptyContent from '$components/empty-content.svelte';
   import HeadedBlock from '$components/headings/headed-block.svelte';
-  import Icon from '$components/icon.svelte';
   import ListItem from '$components/lists/list-item.svelte';
   import PortableText from '$components/portable-text/portable-text.svelte';
 
@@ -42,21 +42,40 @@
   <Divider></Divider>
 {/if}
 
-<HeadedBlock heading={$t('Recent thoughts')} let:id>
+<HeadedBlock heading={$t('Recent thoughts')} let:id constrainWidth={false}>
   {#if data.posts.length}
-    <div class="mb-6 flex flex-col gap-y-5" role="group" aria-labelledby="{id}-heading">
+    <div
+      class="mx-8 mb-6 flex flex-col gap-y-5"
+      role="group"
+      aria-labelledby="{id}-heading"
+    >
       {#each data.posts as post}
-        <ListItem document={post}></ListItem>
+        <ListItem document={post} />
+        <span
+          class="-my-1 block w-full min-w-0 flex-1 border-b border-dashed border-neutral-200 transition-colors dark:border-neutral-400"
+        ></span>
       {/each}
     </div>
-    <ArrowButton href={$linkTo('/thoughts')} fullWidth preload>
-      <span class="flex items-center justify-start gap-2">
-        <p class="font-mono text-sm">{$t('See more')}</p>
-        <Icon name="ArrowRight" size={18} inline></Icon>
-      </span>
-    </ArrowButton>
+    <div class="mx-8 flex flex-row items-center justify-start gap-x-6">
+      <ArrowButton
+        href={$linkTo('/thoughts')}
+        dir="right"
+        placement="after"
+        text={$t('All posts')}
+        preload
+      />
+      {#if ENV !== 'production'}
+        <ArrowButton
+          href={$linkTo('/thoughts/+')}
+          dir="right"
+          placement="after"
+          text={$t('Topics')}
+          preload
+        />
+      {/if}
+    </div>
   {:else}
-    <div class="mb-6 flex flex-col gap-y-5">
+    <div class="mx-8 mb-6 flex flex-col gap-y-5">
       <p class="font-code p-4">{$t('No content')}</p>
     </div>
   {/if}
diff --git a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
index 6134969b7..057f7c507 100644
--- a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '$lib/i18n.js';
+  import { t } from '$lib/i18n';
   import { pageTitle } from '$lib/navigation';
 
   import Divider from '$components/divider.svelte';
diff --git a/svelte-app/src/routes/[[lang=lang]]/experiments/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/experiments/+page.svelte
index 3572030c0..ca0d838c2 100644
--- a/svelte-app/src/routes/[[lang=lang]]/experiments/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/experiments/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '$lib/i18n.js';
+  import { t } from '$lib/i18n';
   import { pageTitle } from '$lib/navigation';
 
   import Divider from '$components/divider.svelte';
diff --git a/svelte-app/src/routes/[[lang=lang]]/thoughts/+/+layout.ts b/svelte-app/src/routes/[[lang=lang]]/thoughts/+/+layout.ts
new file mode 100644
index 000000000..8324c6a9c
--- /dev/null
+++ b/svelte-app/src/routes/[[lang=lang]]/thoughts/+/+layout.ts
@@ -0,0 +1,41 @@
+import type { LayoutLoad } from './$types';
+import type { DocumentTags, PostDocument } from '$types';
+
+const UNCATEGORIZED_TAG = {
+  _id: 'uncategorized',
+  title: 'Uncategorized',
+  slug: { _id: 'uncategorized', current: 'uncategorized' }
+} satisfies Pick<DocumentTags, '_id' | 'slug' | 'title'>;
+
+export const load = (async ({ parent }) => {
+  const _parent = await parent(),
+    tags: Pick<DocumentTags, '_id' | 'slug' | 'title'>[] = [],
+    postsByTag = new Map<Pick<DocumentTags, '_id' | 'slug' | 'title'>, PostDocument[]>();
+
+  for (const post of _parent.posts ?? []) {
+    if (!post.tags?.length) {
+      !tags.includes(UNCATEGORIZED_TAG) && tags.push(UNCATEGORIZED_TAG);
+      postsByTag.set(UNCATEGORIZED_TAG, [
+        ...(postsByTag.get(UNCATEGORIZED_TAG) ?? []),
+        post
+      ]);
+      continue;
+    }
+
+    for (const tag of post.tags) {
+      !tags.includes(tag) && tags.push(tag);
+      postsByTag.set(tag, [...(postsByTag.get(tag) ?? []), post]);
+    }
+  }
+
+  return {
+    tags: tags.sort((a, b) =>
+      a._id === UNCATEGORIZED_TAG._id
+        ? -1
+        : b._id === UNCATEGORIZED_TAG._id
+          ? 1
+          : a.title.localeCompare(b.title)
+    ),
+    postsByTag
+  };
+}) satisfies LayoutLoad;
diff --git a/svelte-app/src/routes/[[lang=lang]]/thoughts/+/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/thoughts/+/+page.svelte
new file mode 100644
index 000000000..90a081c88
--- /dev/null
+++ b/svelte-app/src/routes/[[lang=lang]]/thoughts/+/+page.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { linkTo, t } from '$lib/i18n';
+
+  import ArrowButton from '$components/controls/arrow-button.svelte';
+  import EmptyContent from '$components/empty-content.svelte';
+  import HeadedBlock from '$components/headings/headed-block.svelte';
+  import Hoverable from '$components/hoverable.svelte';
+
+  export let data;
+</script>
+
+<HeadedBlock constrainWidth={false}>
+  <svelte:fragment slot="heading">
+    <div class="flex w-full flex-row items-center justify-between">
+      <h1 class="font-display text-3xl font-black text-dark dark:text-light">
+        {$t('Topics')}
+      </h1>
+      <ArrowButton
+        href={$linkTo('/thoughts')}
+        dir="left"
+        placement="before"
+        text={$t('All posts')}
+        preload
+      />
+    </div>
+  </svelte:fragment>
+
+  {#if data.tags?.length}
+    <div class="flex flex-col gap-5 px-8 pt-3">
+      {#each data.tags as tag}
+        {@const posts = data.postsByTag.get(tag)}
+        <Hoverable let:hovered>
+          <a
+            href={$linkTo(`/thoughts/+/${tag.slug.current}`)}
+            class="focus-outline -mx-3 -my-2 flex flex-row items-center justify-between gap-x-4 border-neutral-100 px-3 py-2 transition-[border-color,color] hover:bg-neutral-0 focus-visible:bg-neutral-0 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:focus-visible:bg-neutral-700"
+            data-sveltekit-preload-code
+          >
+            <h2
+              class="font-mono text-md text-dark dark:text-light"
+              class:text-orange-light={hovered}
+              class:dark:text-orange-light={hovered}
+              class:italic={hovered}
+            >
+              {tag.title}
+            </h2>
+            <span
+              class="transiton-colors inline h-full w-full min-w-0 flex-1 border-b border-dashed border-neutral-200 dark:border-neutral-400"
+            ></span>
+            <span class="text-sm text-neutral-500 dark:text-neutral-200">
+              {posts?.length ?? 0}
+              {$t((posts?.length ?? 0) === 1 ? 'Post' : 'Posts').toLowerCase()}
+            </span>
+          </a>
+        </Hoverable>
+      {/each}
+    </div>
+  {:else}
+    <EmptyContent />
+  {/if}
+</HeadedBlock>
diff --git a/svelte-app/src/routes/[[lang=lang]]/thoughts/+/[slug]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/thoughts/+/[slug]/+page.svelte
new file mode 100644
index 000000000..7e7e5f3c4
--- /dev/null
+++ b/svelte-app/src/routes/[[lang=lang]]/thoughts/+/[slug]/+page.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { linkTo, t } from '$lib/i18n';
+
+  import ArrowButton from '$components/controls/arrow-button.svelte';
+  import EmptyContent from '$components/empty-content.svelte';
+  import HeadedBlock from '$components/headings/headed-block.svelte';
+  import DocumentList from '$components/lists/document-list.svelte';
+
+  export let data;
+</script>
+
+<HeadedBlock heading={data.tag.title} let:id constrainWidth={false}>
+  <svelte:fragment slot="heading">
+    <div class="flex w-full flex-row items-center justify-between">
+      <h1 class="line-clamp-1 font-mono text-md text-neutral-600 dark:text-neutral-300">
+        {$t('Topic').toLowerCase()}:
+        <span class="font-display text-3xl font-black text-dark dark:text-light"
+          >{data.tag.title}</span
+        >
+      </h1>
+      <ArrowButton
+        href={$linkTo('/thoughts')}
+        dir="left"
+        placement="before"
+        text={$t('All posts')}
+        preload
+      />
+    </div>
+  </svelte:fragment>
+
+  {#if data.posts?.length}
+    <DocumentList documents={data.posts} aria-labelledby="{id}-heading" />
+  {:else}
+    <EmptyContent />
+  {/if}
+</HeadedBlock>
diff --git a/svelte-app/src/routes/[[lang=lang]]/thoughts/+/[slug]/+page.ts b/svelte-app/src/routes/[[lang=lang]]/thoughts/+/[slug]/+page.ts
new file mode 100644
index 000000000..74f52e161
--- /dev/null
+++ b/svelte-app/src/routes/[[lang=lang]]/thoughts/+/[slug]/+page.ts
@@ -0,0 +1,14 @@
+import { error } from '@sveltejs/kit';
+
+import type { PageLoad } from './$types';
+
+export const load = (async ({ parent, params }) => {
+  const _parent = await parent(),
+    tag = _parent.tags.find((tag) => tag.slug.current === params.slug);
+
+  if (!tag) {
+    throw error(404, 'Not found');
+  }
+
+  return { posts: _parent.postsByTag.get(tag), tag };
+}) satisfies PageLoad;
diff --git a/svelte-app/src/routes/[[lang=lang]]/thoughts/+layout.ts b/svelte-app/src/routes/[[lang=lang]]/thoughts/+layout.ts
index f53bdc092..141caa2fb 100644
--- a/svelte-app/src/routes/[[lang=lang]]/thoughts/+layout.ts
+++ b/svelte-app/src/routes/[[lang=lang]]/thoughts/+layout.ts
@@ -5,6 +5,20 @@ import { find } from '$lib/store';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ fetch, params }) => {
+  // TODO: Once tags are refactored should actually fetch here instead of reducing posts to tags.
+  // const promises = [
+  //   find(fetch, 'post', {
+  //     ...DEFAULT_POST_QUERY_PARAMS,
+  //     lang: params.lang || DEFAULT_APP_LANG
+  //   }),
+  //   find(fetch, 'tag', { type: 'post' })
+  // ];
+
+  // const [posts, tags] = handleLoadError(await Promise.all(promises)) as [
+  //   PostDocument[],
+  //   DocumentTags[]
+  // ];
+
   const posts = handleLoadError(
     await find(fetch, 'post', {
       ...DEFAULT_POST_QUERY_PARAMS,
diff --git a/svelte-app/src/routes/[[lang=lang]]/thoughts/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/thoughts/+page.svelte
index 2e2f70789..6cc70972e 100644
--- a/svelte-app/src/routes/[[lang=lang]]/thoughts/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/thoughts/+page.svelte
@@ -1,14 +1,29 @@
 <script lang="ts">
-  import { t } from '$lib/i18n.js';
+  import { linkTo, t } from '$lib/i18n';
   import { pageTitle } from '$lib/navigation';
 
+  import ArrowButton from '$components/controls/arrow-button.svelte';
   import EmptyContent from '$components/empty-content.svelte';
   import HeadedBlock from '$components/headings/headed-block.svelte';
   import DocumentList from '$components/lists/document-list.svelte';
 
+  import type { DocumentTags } from '$types';
+
   export let data;
 
   $: description = $t('pages.thoughts.description');
+
+  const MAX_TAGS = 12;
+
+  const tags =
+    data.posts?.reduce((acc, post) => {
+      if (post.tags) {
+        post.tags.forEach((tag) => {
+          acc.add(tag);
+        });
+      }
+      return acc;
+    }, new Set<DocumentTags>()) ?? new Set<DocumentTags>();
 </script>
 
 <svelte:head>
@@ -24,10 +39,54 @@
   <meta property="twitter:description" content={description} />
 </svelte:head>
 
-<HeadedBlock heading={$t('pages.thoughts.title')} let:id>
+<HeadedBlock heading={$t('pages.thoughts.title')} let:id constrainWidth={false}>
   {#if data.posts.length}
+    {#if tags.size}
+      <div
+        class="mb-8 flex select-none flex-row flex-wrap items-center justify-start gap-x-1.5 gap-y-2 px-8 font-mono text-base"
+      >
+        <span
+          class="-ml-2.5 mr-1 text-lg leading-[1.5] text-neutral-200 transition-colors dark:text-neutral-500"
+          >&lpar;
+        </span>
+        {#each tags.values() as tag, i}
+          {#if i < MAX_TAGS}
+            <span class="text-md text-neutral-400 dark:text-neutral-300">
+              <a
+                class="focus-outline-sm -m-2 p-2 text-sm text-neutral-700 hover:text-orange-light focus-visible:text-orange-light dark:text-neutral-200 dark:hover:text-orange-light dark:focus-visible:text-orange-light"
+                href={$linkTo(`/thoughts/+/${tag.slug.current}`)}
+                data-sveltekit-preload-code
+                aria-label={$t('Topic') + ': ' + tag.title}
+              >
+                {tag.title.toLowerCase()}</a
+              >{#if i < MAX_TAGS && i < tags.size - 1},{/if}
+            </span>
+          {:else if i === MAX_TAGS}
+            <span class="text-md text-neutral-700 dark:text-neutral-200">...</span>
+          {/if}
+        {/each}
+        <span
+          class="-mr-2.5 ml-1 text-lg leading-[1.5] text-neutral-200 transition-colors dark:text-neutral-500"
+        >
+          &rpar;</span
+        >
+        <span class="inline-flex flex-1 items-center justify-between">
+          <span
+            class="ml-5 mr-6 block flex-1 border-b border-dashed border-neutral-200 transition-colors dark:border-neutral-400"
+          ></span>
+          <ArrowButton
+            href={$linkTo(`/thoughts/+/`)}
+            dir="right"
+            placement="after"
+            text={$t('All topics')}
+            preload
+          />
+        </span>
+      </div>
+    {/if}
+
     <DocumentList documents={data.posts} aria-labelledby="{id}-heading"></DocumentList>
   {:else}
-    <EmptyContent></EmptyContent>
+    <EmptyContent />
   {/if}
 </HeadedBlock>
diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
index 2925feeb7..11a011c57 100644
--- a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '$lib/i18n.js';
+  import { t } from '$lib/i18n';
   import { pageTitle } from '$lib/navigation';
 
   import Timeline from '$components/about/timeline.svelte';
@@ -39,7 +39,7 @@
 {#if data.projects.length}
   <Divider></Divider>
 
-  <HeadedBlock heading={$t('Projects')}>
+  <HeadedBlock heading={$t('Projects')} constrainWidth={false}>
     <DocumentList documents={data.projects}></DocumentList>
   </HeadedBlock>
 {/if}
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 38bba1ff9..557df9b53 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
@@ -55,5 +55,9 @@ const getEndpoint = (
           }${params.get('preview') === 'true' ? '&preview=true' : ''}`;
     case 'config':
       return `${REMOTE_API_URL}/config?lang=${params.get('lang') || 'en'}`;
+    case 'tag':
+      return many
+        ? `${REMOTE_API_URL}/query/${type}s?${params}`
+        : `${REMOTE_API_URL}/query/${type}/${params.get('id')}?type=${params.get('type')}`;
   }
 };
diff --git a/svelte-app/src/styles/_colors.scss b/svelte-app/src/styles/_colors.scss
index 4708f94e9..e95a56380 100644
--- a/svelte-app/src/styles/_colors.scss
+++ b/svelte-app/src/styles/_colors.scss
@@ -1,7 +1,20 @@
-$black: #17181a;
-$white: #f5f5f5;
-$dark: #292c30;
+$black: #0d0c0c;
+$white: #ffffff;
+$dark: #1e1c1b;
 $light: #f2f2f2;
 
-$accent-light: #1e65e1;
-$accent-dark: #affa71;
+$neutral-0: #f2f0ed;
+$neutral-100: #e4e0dc;
+$neutral-200: #cfc9c2;
+$neutral-300: #b5aca1;
+$neutral-400: #595650;
+$neutral-500: #383432;
+$neutral-600: #2a2726;
+$neutral-700: #1e1c1b;
+$neutral-800: #181717;
+
+$neutral-light: $neutral-100;
+$neutral-dark: $neutral-500;
+
+$orange-light: #ff4800;
+$orange-dark: #e03400;
diff --git a/svelte-app/src/styles/_tw.scss b/svelte-app/src/styles/_tw.scss
index c80377557..c4564ad36 100644
--- a/svelte-app/src/styles/_tw.scss
+++ b/svelte-app/src/styles/_tw.scss
@@ -26,10 +26,10 @@
     }
   
     body {
-      @apply bg-black/95 text-light;
+      @apply bg-neutral-800 text-light;
     
       &.light {
-        @apply bg-black/10 text-dark;
+        @apply bg-neutral-100 text-dark;
       }
 
       &:not(.is-loaded) {
@@ -54,12 +54,12 @@
     }
     
     ::selection {
-      @apply bg-accent-light/80 text-light;
+      @apply bg-orange-light/90 text-light;
     }
 
     .dark {
       ::selection {
-        @apply bg-accent-dark/80 text-dark;
+        @apply bg-orange-light/90 text-dark;
       }
     }
   }
@@ -71,7 +71,7 @@
 
     &,
     &-sm {
-      @apply focus-visible:outline outline-accent-light outline-2 dark:outline-accent-dark;
+      @apply focus-visible:outline outline-orange-light outline-2;
     }
 
     &-sm {
diff --git a/svelte-app/src/styles/components/_code-block.scss b/svelte-app/src/styles/components/_code-block.scss
index 80eb29317..18e35ba2e 100644
--- a/svelte-app/src/styles/components/_code-block.scss
+++ b/svelte-app/src/styles/components/_code-block.scss
@@ -28,12 +28,12 @@ code {
 
     & {
       &::selection {
-        background: $accent-light !important;
+        background: $orange-light !important;
         color: $light !important;
       }
       .dark & {
         &::selection {
-          background: $accent-dark !important;
+          background: $orange-light !important;
           color: $dark !important;
         }
       }
diff --git a/svelte-app/tailwind.config.cjs b/svelte-app/tailwind.config.cjs
index d8cd49577..fdae5b7e5 100644
--- a/svelte-app/tailwind.config.cjs
+++ b/svelte-app/tailwind.config.cjs
@@ -7,13 +7,30 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        black: '#17181a',
-        white: '#f5f5f5',
-        dark: '#292c30',
-        light: '#f2f2f2',
+        black: '#0d0c0c',
+        white: '#ffffff',
+        dark: '#181717',
+        light: '#f2f0ed',
         accent: {
           light: '#1e65e1',
           dark: '#affa71'
+        },
+        orange: {
+          light: '#ff4800',
+          dark: '#e03400'
+        },
+        neutral: {
+          0: '#f2f0ed',
+          100: '#e4e0dc',
+          200: '#cfc9c2',
+          300: '#b5aca1',
+          400: '#595650',
+          500: '#383432',
+          600: '#2a2726',
+          700: '#1e1c1b',
+          800: '#181717',
+          light: '#e4e0dc',
+          dark: '#383432'
         }
       },
       fontFamily: {
@@ -34,6 +51,7 @@ module.exports = {
         '5xl': ['2.5rem', '1.5']
       },
       borderRadius: {
+        xs: '0.125rem',
         sm: '0.2rem'
       },
       screens: {
diff --git a/svelte-app/types/generated/index.ts b/svelte-app/types/generated/index.ts
index 1836b6d4e..1bf362190 100644
--- a/svelte-app/types/generated/index.ts
+++ b/svelte-app/types/generated/index.ts
@@ -4,12 +4,15 @@ export type LocaleKey =
   | 'A project on kio.dev'
   | 'About'
   | 'About me'
+  | 'All posts'
+  | 'All topics'
   | 'Back'
   | 'Blog'
   | 'Click here to'
   | 'Code block'
   | 'Code content'
   | 'Copied'
+  | 'Copy'
   | 'Copy to clipboard'
   | 'Date posted'
   | 'Duration'
@@ -25,6 +28,9 @@ export type LocaleKey =
   | 'Home'
   | 'Internal Error'
   | 'Invalid date'
+  | 'Language'
+  | 'Lights off'
+  | 'Lights on'
   | 'Links'
   | 'Meta'
   | 'More'
@@ -43,12 +49,16 @@ export type LocaleKey =
   | 'See more'
   | 'Show stack trace'
   | 'Skip to content'
+  | 'Social'
   | 'Social links'
   | 'Sorry, something went wrong. Please try again.'
   | 'Switch to English'
   | 'Switch to French'
   | 'Tags'
+  | 'Theme'
   | 'Thoughts'
+  | 'Topic'
+  | 'Topics'
   | 'Unknown date'
   | 'Use dark mode'
   | 'Use light mode'
@@ -70,6 +80,7 @@ export type LocaleKey =
   | 'errors.not-found.title'
   | 'errors.unauthorized.message'
   | 'errors.unauthorized.title'
+  | 'errors.no-content.message'
   | 'go back'
   | 'now'
   | 'pages.about.description'
@@ -80,6 +91,8 @@ export type LocaleKey =
   | 'pages.experiments.title'
   | 'pages.thoughts.description'
   | 'pages.thoughts.title'
+  | 'pages.thoughts.sections.topics'
+  | 'pages.thoughts.sections.posts'
   | 'pages.work.description'
   | 'pages.work.title'
   | 'present'