diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss
index 1fb935fa3..5f64da3dd 100644
--- a/svelte-app/src/app.scss
+++ b/svelte-app/src/app.scss
@@ -30,23 +30,11 @@ img {
 body {
   @apply h-full w-full overflow-x-hidden;
 
-  @media (min-width: 0px) {
     background-color: $dark;
-  }
-  @media (min-width: 768px) {
-    background-color: $black;
-  }
-
   --textColour: $light;
 
   &.light {
-    @media (min-width: 0px) {
-      background-color: $white;
-    }
-    @media (min-width: 768px) {
-      background-color: $light;
-    }
-
+    background-color: $light;
     --textColour: $dark;
   }
   &:not(.is-loaded) {
diff --git a/svelte-app/src/components/about/timeline.svelte b/svelte-app/src/components/about/timeline.svelte
index b8dc857c3..a1ad326f9 100644
--- a/svelte-app/src/components/about/timeline.svelte
+++ b/svelte-app/src/components/about/timeline.svelte
@@ -75,22 +75,24 @@
               icon="ChevronDown"
               class="{selected === i ? 'rotate-0' : '-rotate-90'} transition-all"
             />
-            <p
-              class="min-w-[10rem] select-none font-code text-base text-dark/90 dark:text-light/90"
-            >
-              {dateDisplay(item.range.start, item.range.end)}
-            </p>
-            <div class="flex flex-row items-center justify-start">
-              <h1
-                class="text-lg font-bold decoration-accent-light decoration-[3px] underline-offset-4 dark:decoration-accent-dark"
-                class:underline={data[i].hovered}
+            <div class="flex flex-row flex-wrap items-center justify-start gap-x-4">
+              <p
+                class="min-w-[10rem] select-none font-code text-base text-dark/90 dark:text-light/90"
               >
-                {item.title}
-              </h1>
-              {#if item.subtitle}
-                <BulletPoint />
-                <p class="text-base">{item.subtitle}</p>
-              {/if}
+                {dateDisplay(item.range.start, item.range.end)}
+              </p>
+              <div class="flex flex-row items-center justify-start">
+                <h1
+                  class="text-lg font-bold decoration-accent-light decoration-[3px] underline-offset-4 dark:decoration-accent-dark"
+                  class:underline={data[i].hovered}
+                >
+                  {item.title}
+                </h1>
+                {#if item.subtitle}
+                  <BulletPoint />
+                  <p class="text-base">{item.subtitle}</p>
+                {/if}
+              </div>
             </div>
           </div>
           {#if selected === i && item.body}
diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte
index ac2c8958c..d14fb8e06 100644
--- a/svelte-app/src/components/controls/language-toggle.svelte
+++ b/svelte-app/src/components/controls/language-toggle.svelte
@@ -10,11 +10,6 @@
   import Icon from '$components/icon.svelte';
   import Tooltip from '$components/tooltip.svelte';
 
-  export let langs = [
-    { lang: 'en', name: 'English' },
-    { lang: 'fr', name: 'Français' }
-  ];
-
   let modalOpen = false;
 
   const handleClick = (event: Event, lang: string) => {
@@ -40,106 +35,43 @@
       modalOpen = false;
       navOpen.set(false);
     };
-
-  $: _langs = langs as ((typeof langs)[0] & { active: boolean })[];
 </script>
 
-<Dialog
-  title="{$t('Change language')}?"
-  description={$t(
-    'French translations are incomplete, and hilariously broken in places :)'
-  )}
-  confirmText={$t('Continue')}
-  open={modalOpen}
-  on:close={() => (modalOpen = false)}
-  on:confirm={modalConfirm}
-/>
-
-<Hoverable>
-  <Tooltip
-    text={$t(
-      $currentLang === 'en' ? 'Switch language to French' : 'Switch language to English'
+<div class="flex items-center justify-center">
+  <Dialog
+    title="{$t('Change language')}?"
+    description={$t(
+      'French translations are incomplete, and hilariously broken in places :)'
     )}
-    delay={150}
-    fixed
-  >
-    <button
-      class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
-        ''}"
-      aria-label={$t(
-        $currentLang === 'en' ? 'Switch language to French' : 'Switch language to English'
-      )}
-      tabindex="0"
-      on:click={(e) => {
-        handleClick(e, $currentLang === 'en' ? 'fr' : 'en');
-      }}
-    >
-      <Icon icon="script" />
-    </button>
-  </Tooltip>
-</Hoverable>
+    confirmText={$t('Continue')}
+    open={modalOpen}
+    on:close={() => (modalOpen = false)}
+    on:confirm={modalConfirm}
+  />
 
-<!-- <div class={$$props.class || ''}>
-  <span class="cursor-default select-none">{$t('Language')} (</span>
-  {#each _langs as lang, i}
-    <Hoverable bind:hovered={lang.active}>
-      <a
-        class="focusOutline-sm rounded-sm"
-        class:active={lang.active}
-        class:forNav
-        aria-label={$t('Switch language to {lang}', {
-          lang: lang.name
-        })}
-        href={$linkTo($page.url.pathname, lang.lang)}
-        target="_self"
-        role="button"
+  <Hoverable>
+    <Tooltip
+      text={$t('Switch language to {language}', {
+        language: $currentLang === 'en' ? $t('French') : $t('English')
+      })}
+      delay={150}
+      fixed
+    >
+      <button
+        class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
+          ''}"
+        aria-label={$t(
+          $currentLang === 'en'
+            ? 'Switch language to French'
+            : 'Switch language to English'
+        )}
         tabindex="0"
         on:click={(e) => {
-          handleClick(e, lang.lang);
-        }}
-        on:keydown={(e) => {
-          if (e.code === 'Enter' || e.code === 'Space') {
-            handleClick(e, lang.lang);
-          }
+          handleClick(e, $currentLang === 'en' ? 'fr' : 'en');
         }}
       >
-        {lang.lang}
-      </a>
-    </Hoverable>
-    {#if i < _langs.length - 1}
-      <span class="cursor-default select-none">/</span>
-    {/if}
-  {/each}
-  <span class="cursor-default select-none">)</span>
-</div> -->
-<style lang="scss">
-  a {
-    &.forNav {
-      @apply px-1;
-
-      &.active {
-        @apply text-dark;
-      }
-    }
-    &:not(.forNav) {
-      @apply decoration-accent-light decoration-2;
-
-      &.active {
-        @apply underline;
-      }
-    }
-  }
-
-  :global(.dark) {
-    a {
-      &.forNav {
-        &.active {
-          @apply text-light;
-        }
-      }
-      &:not(.forNav) {
-        @apply decoration-accent-dark;
-      }
-    }
-  }
-</style>
+        <Icon icon="script" />
+      </button>
+    </Tooltip>
+  </Hoverable>
+</div>
diff --git a/svelte-app/src/components/controls/menu-toggle.svelte b/svelte-app/src/components/controls/menu-toggle.svelte
index f4f631c71..3a3ba39b6 100644
--- a/svelte-app/src/components/controls/menu-toggle.svelte
+++ b/svelte-app/src/components/controls/menu-toggle.svelte
@@ -8,7 +8,8 @@
 
 <Hoverable>
   <button
-    class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark"
+    class="focusOutline h-[20px] w-[20px] rounded-sm hover:text-accent-light dark:hover:text-accent-dark {$$props.class ||
+      ''}"
     aria-label="Toggle navigation"
     data-test-id="nav-toggle"
     on:click={() => navOpen.set(!$navOpen)}
diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte
index fd82d6d65..b67008746 100644
--- a/svelte-app/src/components/document/route.svelte
+++ b/svelte-app/src/components/document/route.svelte
@@ -65,9 +65,6 @@
   });
 
   $: $page?.url && scrollTo($page.url);
-  $: pageName = `${isPost ? $t('Blog') : $t('My work')}${
-    !isAtTop && data?.title ? ` | ${data.title}` : ''
-  }`;
   $: pageTitle = `kio.dev${data?.title ? ` | ${data.title}` : ''}`;
   $: pageDescription = data?.desc
     ? data.desc
@@ -79,7 +76,9 @@
   <meta name="description" content={pageDescription} />
   <meta
     name="keywords"
-    content="{allTags}blog, {isPost ? 'post' : 'project'}, kio.dev, kio, kiosion"
+    content="{allTags}blog, {isPost
+      ? 'post, blog post'
+      : 'project'}, kio.dev, kio, kiosion"
   />
   <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
diff --git a/svelte-app/src/components/nav.svelte b/svelte-app/src/components/nav.svelte
index f22b2b8aa..545a70c71 100644
--- a/svelte-app/src/components/nav.svelte
+++ b/svelte-app/src/components/nav.svelte
@@ -2,7 +2,6 @@
   import { circInOut } from 'svelte/easing';
   import { slide } from 'svelte/transition';
 
-  import { goto } from '$app/navigation';
   import { linkTo } from '$i18n';
   import { BASE_ANIMATION_DURATION, TOP_LEVEL_ROUTES } from '$lib/consts';
   import { navOpen } from '$stores/navigation';
@@ -10,7 +9,6 @@
   import LanguageControls from '$components/controls/language-toggle.svelte';
   import MenuToggle from '$components/controls/menu-toggle.svelte';
   import ThemeToggle from '$components/controls/theme-toggle.svelte';
-  import Hoverable from '$components/hoverable.svelte';
   import NavLink from '$components/nav/nav-link.svelte';
 
   const navLinks = TOP_LEVEL_ROUTES.filter((route) => !route.hidden)?.map((route) => ({
@@ -19,69 +17,61 @@
   }));
 </script>
 
-<div class="fixed left-6 right-6 top-4 z-10 hidden items-center justify-center md:flex">
+<div class="fixed left-6 right-6 top-4 z-10 flex items-center justify-center">
   <nav
-    class="flex w-full max-w-6xl flex-row items-center justify-between rounded-lg border border-dark/40 bg-light/40 px-6 py-2 backdrop-blur-lg transition-[background-color,border-color] hover:border-dark/60 hover:bg-light/60
+    class="flex w-full max-w-6xl flex-col items-center justify-center rounded-lg border border-dark/40 bg-light/40 px-6 py-2 backdrop-blur-lg transition-[background-color,border-color] hover:border-dark/60 hover:bg-light/60
     focus-visible:border-dark/60 focus-visible:bg-light/60 dark:border-light/40 dark:bg-dark/50 dark:hover:border-light/60 dark:hover:bg-dark/70 dark:focus-visible:border-light/60 dark:focus-visible:bg-dark/70"
     aria-label="Main navigation"
     role="group"
     data-test-id="navBar"
   >
-    <div class="flex flex-row items-center justify-start gap-5">
-      <a
-        class="focusOutline no-select h-12 w-fit rounded-sm py-3 font-code text-xl font-black leading-none"
-        href={$linkTo('/')}
-        aria-label="Home"
+    <div class="flex w-full flex-row items-center justify-between">
+      <div class="hidden flex-row items-center justify-start gap-5 md:flex">
+        <a
+          class="focusOutline no-select h-12 w-fit rounded-sm py-3 font-code text-xl font-black leading-none"
+          href={$linkTo('/')}
+          aria-label="Home"
+        >
+          kio.dev
+        </a>
+        <span class="block h-[24px] w-[2px] bg-accent-light/60 dark:bg-accent-dark/60" />
+        <div class="flex flex-row items-center justify-start gap-5">
+          {#each navLinks as link}
+            <NavLink {link} />
+          {/each}
+        </div>
+      </div>
+      <div class="relative flex flex-row items-center justify-start gap-4 md:hidden">
+        <MenuToggle />
+        <span class="block h-[24px] w-[2px] bg-accent-light/60 dark:bg-accent-dark/60" />
+        <a
+          class="focusOutline no-select h-12 w-fit rounded-sm py-3 font-code text-xl font-black leading-none"
+          href={$linkTo('/')}
+          aria-label="Home"
+          on:click={() => {
+            navOpen.set(false);
+          }}
+        >
+          kio.dev
+        </a>
+      </div>
+      <div class="flex flex-row items-center justify-end gap-4">
+        <ThemeToggle />
+        <LanguageControls />
+      </div>
+    </div>
+    {#if $navOpen}
+      <div
+        class="my-2 flex w-full flex-col items-start justify-start gap-y-2 text-2xl"
+        transition:slide|local={{
+          duration: BASE_ANIMATION_DURATION,
+          easing: circInOut
+        }}
       >
-        kio.dev
-      </a>
-      <span class="block h-[24px] w-[2px] bg-accent-light/60 dark:bg-accent-dark/60" />
-      <div class="flex flex-row items-center justify-start gap-5">
-        {#each navLinks as link, index}
-          <NavLink {link} links={navLinks} {index} />
+        {#each navLinks as link}
+          <NavLink {link} mobile />
         {/each}
       </div>
-    </div>
-    <div class="flex flex-row items-center justify-end gap-4">
-      <ThemeToggle />
-      <LanguageControls />
-    </div>
+    {/if}
   </nav>
 </div>
-
-<nav class="block md:hidden" data-test-id="navBar">
-  <div
-    class="relative m-4 flex flex-row flex-wrap items-center justify-between gap-4 px-3"
-  >
-    <MenuToggle />
-    <Hoverable>
-      <button
-        class="logo-text -mr-6 h-8 transition-[filter] dark:invert"
-        data-test-id="nav-logo"
-        on:click={() => {
-          navOpen.set(false);
-          goto($linkTo('/'));
-        }}
-      >
-        <img class="h-full" src="/assets/logo-text--short.webp" alt="Kiosion" />
-      </button>
-    </Hoverable>
-    <div class="align-center flex w-fit flex-row justify-start gap-4 pt-1">
-      <ThemeToggle />
-      <LanguageControls />
-    </div>
-  </div>
-  {#if $navOpen}
-    <div
-      class="mb-[10px] flex flex-col items-center justify-center gap-3 text-2xl"
-      transition:slide|local={{
-        duration: BASE_ANIMATION_DURATION,
-        easing: circInOut
-      }}
-    >
-      {#each navLinks as link, index}
-        <NavLink {link} links={navLinks} {index} mobile />
-      {/each}
-    </div>
-  {/if}
-</nav>
diff --git a/svelte-app/src/components/nav/nav-link.svelte b/svelte-app/src/components/nav/nav-link.svelte
index 54577b29a..3a7af1d18 100644
--- a/svelte-app/src/components/nav/nav-link.svelte
+++ b/svelte-app/src/components/nav/nav-link.svelte
@@ -4,6 +4,7 @@
   import { goto } from '$app/navigation';
   import { navigating, page } from '$app/stores';
   import { isLocalized, linkTo, t } from '$i18n';
+  import { BASE_ANIMATION_DURATION } from '$lib/consts';
   import { navOpen } from '$stores/navigation';
 
   import Hoverable from '$components/hoverable.svelte';
@@ -12,11 +13,6 @@
       name: string;
       url: string;
     },
-    links: {
-      name: string;
-      url: string;
-    }[],
-    index: number,
     mobile = false,
     navigatingIsActive = false;
 
@@ -31,11 +27,10 @@
     if (mobile) {
       navOpen.set(false);
     }
-    goto(link.url).catch(() => undefined);
+    goto($linkTo(link.url)).catch(() => undefined);
   };
 
   $: splitPath = $page?.url.pathname.split('/') || [];
-  $: truePath = link.url.slice($isLocalized ? 4 : 1);
   $: (isActive = (() => {
     let urlIncludesLink = $page?.url.pathname === link.url;
 
@@ -43,17 +38,18 @@
       urlIncludesLink ||= $navigating?.to?.url.pathname === link.url;
     }
 
-    return urlIncludesLink || (splitPath?.length > 1 && splitPath.indexOf(truePath) > 0);
+    return (
+      urlIncludesLink ||
+      (splitPath?.length > 1 && splitPath.indexOf(link.url.slice(1)) > 0)
+    );
   })()),
     navOpen;
 </script>
 
 <Hoverable bind:hovered={isHovered}>
   <a
-    class="focusOutline-sm no-select"
+    class="focusOutline-sm no-select relative"
     class:mobile
-    class:first={index === 0}
-    class:last={index === links.length - 1}
     class:active={isActive || isHovered}
     aria-current={isActive ? 'page' : undefined}
     aria-label={$t(link.name)}
@@ -70,11 +66,19 @@
     }}
   >
     <span>{$t(link.name)}</span>
+    {#if !mobile && (isActive || isHovered)}
+      <span
+        class="absolute block rounded-md {isHovered
+          ? 'bg-accent-light/60 dark:bg-accent-dark/60'
+          : 'bg-accent-light dark:bg-accent-dark'} bottom-1 left-0 right-0 h-[2px] transition-[background-color]"
+        transition:fade={{ duration: BASE_ANIMATION_DURATION / 3 }}
+      />
+    {/if}
     {#if mobile && (isActive || isHovered)}
       <span
         class="indicator"
         class:hovered={isHovered}
-        transition:fade={{ duration: 100 }}
+        transition:fade={{ duration: BASE_ANIMATION_DURATION / 3 }}
       />
     {/if}
   </a>
@@ -82,25 +86,14 @@
 
 <style lang="scss">
   a {
-    @apply relative w-full whitespace-nowrap rounded-[0.1rem] py-3 font-mono text-base text-dark/80 transition-[color];
+    @apply w-full whitespace-nowrap rounded-[0.1rem] py-3 font-mono text-base text-dark/80 transition-[color];
 
     &.active {
       @apply text-dark;
     }
     &.mobile {
-      @apply -ml-1 w-fit;
-
-      &.first {
-        @apply mt-4;
-      }
-      &.last {
-        @apply mb-4;
-      }
+      @apply ml-14 w-full;
     }
-
-    // span {
-    //   @apply ml-9;
-    // }
   }
 
   .indicator {
diff --git a/svelte-app/src/languages/en.json b/svelte-app/src/languages/en.json
index db760d877..15689f569 100644
--- a/svelte-app/src/languages/en.json
+++ b/svelte-app/src/languages/en.json
@@ -26,13 +26,16 @@
   "Copy to clipboard": "Copy to clipboard",
   "Disable sounds": "Disable sounds",
   "Enable sounds": "Enable sounds",
+  "English": "English",
   "Error": "Error",
   "Features": "Features",
   "Footnotes": "Footnotes",
   "Forward": "Forward",
+  "French": "French",
   "Go to": "Go to",
   "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",
+  "Home": "Home",
   "Index": "Index",
   "Just now": "Just now",
   "Language": "Language",
@@ -58,20 +61,25 @@
   "Please try again.": "Please try again.",
   "Post": "Post",
   "Project": "Project",
+  "Projects & Talks": "Projects & Talks",
   "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",
   "Redirecting": "Redirecting",
   "Reload": "Reload",
   "Save image": "Save image",
   "Say hello": "Say hello",
   "Scroll to top": "Scroll to top",
   "Secret & work-in-progress features": "Secret & work-in-progress features",
+  "See more": "See more",
   "Sorry, something went wrong handling your login.": "Sorry, something went wrong handling your login.",
   "Sorry, something went wrong while logging you out.": "Sorry, something went wrong while logging you out.",
   "Summary": "Summary",
   "Switch language": "Switch language",
+  "Switch language to {language}": "Switch language to {language}",
   "Switch language to {lang}": "Switch language to {lang}",
   "Tag": "Tag",
   "Tags": "Tags",
diff --git a/svelte-app/src/languages/fr.json b/svelte-app/src/languages/fr.json
index 2accabcc8..7e75ae506 100644
--- a/svelte-app/src/languages/fr.json
+++ b/svelte-app/src/languages/fr.json
@@ -26,13 +26,16 @@
   "Copy to clipboard": "Copier dans le presse-papier",
   "Disable sounds": "Désactiver les effets sonores",
   "Enable sounds": "Activer les effets sonores",
+  "English": "Anglais",
   "Error": "Erreur",
   "Features": "Fonctionnalités",
   "Footnotes": "Notes de bas de page",
   "Forward": "Vers l'avant",
+  "French": "Français",
   "Go to": "Aller à",
   "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",
+  "Home": "Accueil",
   "Index": "Page d'accueil",
   "Just now": "À l'instant",
   "Language": "Langue",
@@ -58,20 +61,25 @@
   "Please try again.": "Veuillez réessayer.",
   "Post": "Article",
   "Project": "Projet",
+  "Projects & Talks": "Projets & Conférences",
   "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",
   "Redirecting": "Redirection",
   "Reload": "Rafraîchir la page",
   "Save image": "Enregistrer l'image",
   "Say hello": "Dire bonjour",
   "Scroll to top": "Défiler vers le haut",
   "Secret & work-in-progress features": "Fonctionnalités secrètes et en cours de développement",
+  "See more": "Voir plus",
   "Sorry, something went wrong handling your login.": "Désolé, quelque chose s'est mal passé lors de votre connexion.",
   "Sorry, something went wrong while logging you out.": "Désolé, quelque chose s'est mal passé lors de votre déconnexion.",
   "Summary": "Sommaire",
   "Switch language": "Changer de langue",
+  "Switch language to {language}": "Changer de langue en {language}",
   "Switch language to {lang}": "Changer de langue en {lang}",
   "Tag": "Tag",
   "Tags": "Tags",
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index b92fbb2c4..06133b3a5 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -12,7 +12,7 @@
   import { navigating, page } from '$app/stores';
   import { isDesktop } from '$helpers/responsive';
   import { check as checkTranslations, currentLang, isLocalized } from '$i18n';
-  import { APP_LANGS, BASE_ANIMATION_DURATION, DEFAULT_APP_LANG } from '$lib/consts';
+  import { APP_LANGS, DEFAULT_APP_LANG } from '$lib/consts';
   import { setState as setMenuState, state as menuState } from '$lib/helpers/menu';
   import { createExponentialBackoffStrategy } from '$lib/try-fetch';
   import Settings, { loading } from '$stores/settings';
@@ -21,7 +21,6 @@
   import PageTransition from '$components/layouts/page-transition.svelte';
   import ScrollContainer from '$components/layouts/scroll-container.svelte';
   import BarLoader from '$components/loading/bar.svelte';
-  import Spinner from '$components/loading/spinner.svelte';
   import Nav from '$components/nav.svelte';
 
   import type { Navigation } from '@sveltejs/kit';
@@ -135,7 +134,7 @@
   on:keydown={skipToContent}>Skip to content</span
 >
 
-{#if !appLoaded}
+<!-- {#if !appLoaded}
   <div
     class="absolute left-0 top-0 z-50 flex h-[100vh] w-[100vw] items-center justify-center bg-light dark:bg-black"
     out:fade={{ duration: BASE_ANIMATION_DURATION }}
@@ -143,7 +142,7 @@
   >
     <Spinner />
   </div>
-{/if}
+{/if} -->
 
 <div
   class="main relative flex h-full w-full flex-col overflow-x-hidden rounded-xl text-dark dark:text-light lg:flex-row lg:text-lg"
@@ -152,7 +151,7 @@
 >
   <Nav />
   <ScrollContainer bind:element={scrollContainer}>
-    <div class="relative max-h-full w-full md:mt-16 md:h-[calc(100%_-_4rem)]">
+    <div class="relative mt-16 h-[calc(100%_-_4rem)] max-h-full w-full">
       <PageTransition pathname={data.pathname}>
         <slot />
       </PageTransition>
diff --git a/svelte-app/src/routes/+layout.ts b/svelte-app/src/routes/+layout.ts
index 28121c4c3..5c2788fff 100644
--- a/svelte-app/src/routes/+layout.ts
+++ b/svelte-app/src/routes/+layout.ts
@@ -14,7 +14,6 @@ export const load = (async ({ params, url, fetch }) => {
   ]);
 
   return {
-    // theme,
     pathname: url.pathname,
     author: promises[0],
     config: promises[1]
diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
index 1b9807540..39fb8ac64 100644
--- a/svelte-app/src/routes/[[lang=lang]]/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
@@ -10,14 +10,14 @@
 
   export let data;
 
-  $: pageTitle = `kio.dev | ${$t('Index')}`;
+  $: pageTitle = `kio.dev | ${$t('Home')}`;
   $: description = $t('A bit about me, my work, and what I do');
 </script>
 
 <svelte:head>
   <title>{pageTitle}</title>
   <meta name="description" content={description} />
-  <meta name="keywords" content="About, kio.dev, kio, kiosion" />
+  <meta name="keywords" content="about, index, homepage, home, kio.dev, kio, kiosion" />
   <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content={$page.url.href} />
diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
index af30be3d3..3666b19df 100644
--- a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
@@ -18,11 +18,11 @@
 <svelte:head>
   <title>{pageTitle}</title>
   <meta name="description" content={description} />
-  <meta name="keywords" content="blog, posts, kio.dev, kio, kiosion" />
+  <meta name="keywords" content="blog, posts, blog posts, kio.dev, kio, kiosion" />
   <meta name="author" content="Kio" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content={$page?.url?.href} />
-  <meta property="og:title" content="kio.dev | blog" />
+  <meta property="og:title" content={pageTitle} />
   <meta property="og:description" content={description} />
   <meta property="twitter:url" content={$page?.url?.href} />
   <meta property="twitter:title" content="kio.dev | blog" />
@@ -33,10 +33,10 @@
 {#if posts?.length}
   <div class="mt-12 flex flex-col gap-14">
     {#each sortedPosts as yearObj}
-      <div class="flex flex-row items-start justify-start">
+      <div class="flex flex-col items-start justify-start gap-y-2 md:flex-row">
         <h1 class="min-w-[6rem] font-code text-4xl font-black">{yearObj.year}</h1>
         {#if yearObj.items.length}
-          <div class="mt-2 flex flex-col items-start justify-start gap-4">
+          <div class="ml-1 mt-2 flex flex-col items-start justify-start gap-4 md:ml-0">
             {#each yearObj.items as item}
               <ListItem document={item} />
             {/each}
diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
index 5c9c3052d..b8a4a5a70 100644
--- a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
@@ -9,12 +9,12 @@
 
   export let data;
 
-  const pageTitle = `kio.dev | ${$t('My work')}`,
-    description = $t(
-      'A collection of my work, open-source contributions, and personal projects'
-    ),
-    sortedProjects = data.projects?.length ? sortDocumentsByYear(data.projects) : [];
+  const sortedProjects = data.projects?.length ? sortDocumentsByYear(data.projects) : [];
 
+  $: pageTitle = `kio.dev | ${$t('My work')}`;
+  $: description = $t(
+    'A collection of my work, open-source contributions, and personal projects'
+  );
   $: ({ about, projects } = data);
 </script>
 
@@ -45,10 +45,10 @@
 {#if projects?.length}
   <div class="flex flex-col gap-14">
     {#each sortedProjects as yearObj}
-      <div class="flex flex-row items-start justify-start">
+      <div class="flex flex-col items-start justify-start gap-y-2 md:flex-row">
         <h1 class="min-w-[6rem] font-code text-4xl font-black">{yearObj.year}</h1>
         {#if yearObj.items.length}
-          <div class="mt-2 flex flex-col items-start justify-start gap-4">
+          <div class="ml-1 mt-2 flex flex-col items-start justify-start gap-4 md:ml-0">
             {#each yearObj.items as item}
               <ListItem document={item} />
             {/each}