diff --git a/svelte-app/src/components/experiments/gol.svelte b/svelte-app/src/components/experiments/gol.svelte
index bb608fdb..ca7b660b 100644
--- a/svelte-app/src/components/experiments/gol.svelte
+++ b/svelte-app/src/components/experiments/gol.svelte
@@ -120,25 +120,9 @@
     <Divider />
   </header>
 
-  <figure class="relative w-full overflow-clip rounded-md">
-    <div class="grid w-fit gap-0.5" style="grid-template-columns: repeat({cols}, 12px);">
-      {#each grid as row, rowIndex}
-        {#each row as cell, colIndex}
-          <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
-          <div
-            class="h-3 w-3 rounded-sm shadow-lg {cell
-              ? 'bg-violet-500/60 shadow-violet-500/30 dark:shadow-violet-500/10'
-              : 'bg-transparent shadow-transparent'}"
-            on:click={() => !running && toggleCell(rowIndex, colIndex)}
-          />
-        {/each}
-      {/each}
-    </div>
-  </figure>
-
   <Tooltip text={running ? 'Pause' : 'Resume'}>
     <button
-      class="focus-outline absolute right-4 top-4 rounded-md p-1"
+      class="focus-outline absolute right-4 top-4 rounded-md p-2"
       on:click={running ? stopGame : startGame}
     >
       {#if running}
@@ -162,4 +146,20 @@
       {/if}
     </button>
   </Tooltip>
+
+  <figure class="relative w-full overflow-clip rounded-md">
+    <div class="grid w-fit gap-0.5" style="grid-template-columns: repeat({cols}, 12px);">
+      {#each grid as row, rowIndex}
+        {#each row as cell, colIndex}
+          <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
+          <div
+            class="h-3 w-3 rounded-sm shadow-lg {cell
+              ? 'bg-violet-500/60 shadow-violet-500/30 dark:shadow-violet-500/10'
+              : 'bg-transparent shadow-transparent'}"
+            on:click={() => !running && toggleCell(rowIndex, colIndex)}
+          />
+        {/each}
+      {/each}
+    </div>
+  </figure>
 </article>
diff --git a/svelte-app/src/components/experiments/mag-cursor.svelte b/svelte-app/src/components/experiments/mag-cursor.svelte
index b3a7b4fb..35ca731f 100644
--- a/svelte-app/src/components/experiments/mag-cursor.svelte
+++ b/svelte-app/src/components/experiments/mag-cursor.svelte
@@ -1,22 +1,25 @@
 <script lang="ts">
-  import Divider from '$components/divider.svelte';
-  import MagButton from '$components/experiments/mag-cursor/button.svelte';
-  import MagCursor from '$components/experiments/mag-cursor/cursor.svelte';
+  import { onMount } from 'svelte';
+
+  import { BASE_GIT_URL } from '$lib/consts';
 
-  let container: HTMLElement,
-    containerRect: DOMRect,
-    targets: HTMLElement[] = [],
-    activeIdx: number | undefined = undefined;
+  import Divider from '$components/divider.svelte';
+  import Cursor from '$components/experiments/mag-cursor/cursor.svelte';
+  import CursorTarget from '$components/experiments/mag-cursor/target.svelte';
+  import Icon from '$components/icon.svelte';
+  import Link from '$components/link.svelte';
 
-  const register = (element: HTMLElement) => targets.push(element);
+  let container: HTMLElement, containerRect: DOMRect;
 
   const buttons = ['Button One', 'Button Two', 'Button Three'];
+
+  onMount(() => (containerRect = container?.getBoundingClientRect()));
 </script>
 
 <svelte:window on:resize={() => (containerRect = container?.getBoundingClientRect())} />
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events a11y-no-static-element-interactions -->
-<div
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<article
   class="relative my-6 block cursor-none rounded-lg bg-dark/5 px-7 py-6 shadow-2xl shadow-dark/5 transition-shadow focus-within:shadow-dark/10 hover:shadow-dark/10 dark:bg-light/5 dark:shadow-light/5"
   on:mouseover={() => (containerRect = container?.getBoundingClientRect())}
   bind:this={container}
@@ -26,13 +29,44 @@
     <p>A simple magnetic cursor effect. Hover over the buttons to try it out.</p>
     <Divider />
   </header>
+
+  <CursorTarget distance={38} let:active let:offset>
+    <Link
+      href="{BASE_GIT_URL}/blob/main/svelte-app/src/components/experiments/mag-cursor.svelte"
+      class="focus-outline absolute right-4 top-4 z-10 cursor-none rounded-sm p-2"
+      tooltipDelay={150}
+      tooltipText="View source"
+      newtab
+      style="transform: translate({offset?.[0]}px, {offset?.[1]}px)"
+    >
+      <Icon
+        name="ExternalLink"
+        size={21}
+        class="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'
+          : 'text-dark/90 dark:text-light/90'}"
+      />
+    </Link>
+  </CursorTarget>
+
   <figure class="h-fit w-full overflow-hidden">
-    <div class="flex w-full flex-row items-center justify-center pb-6 pt-5">
-      {#each buttons as label, i}
-        <MagButton {label} {register} active={i === activeIdx} />
+    <div class="flex w-full flex-row items-center justify-center gap-2 pb-10 pt-8">
+      {#each buttons as label}
+        <CursorTarget let:active let:offset
+          ><button
+            class="focus-outline-sm cursor-none select-none rounded-lg px-3 py-2 font-code text-base transition-colors active:text-accent-light/80 dark:active:text-accent-dark/80 {active
+              ? ' text-accent-light dark:text-accent-dark'
+              : ''}"
+            tabindex="0"
+          >
+            <div style="transform: translate({offset?.[0]}px, {offset?.[1]}px)">
+              {label}
+            </div></button
+          ></CursorTarget
+        >
       {/each}
     </div>
 
-    <MagCursor {targets} {containerRect} bind:activeTarget={activeIdx} />
+    <Cursor {containerRect} />
   </figure>
-</div>
+</article>
diff --git a/svelte-app/src/components/experiments/mag-cursor/button.svelte b/svelte-app/src/components/experiments/mag-cursor/button.svelte
deleted file mode 100644
index e8bf37ed..00000000
--- a/svelte-app/src/components/experiments/mag-cursor/button.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-
-  export let label: string,
-    register: (element: HTMLElement) => void,
-    active = false;
-
-  let element: HTMLElement;
-
-  onMount(() => {
-    register?.(element);
-  });
-</script>
-
-<div
-  class="focus-outline-sm cursor-none select-none rounded-lg px-3 py-2 font-code text-base transition-colors active:text-accent-light/80 dark:active:text-accent-dark/80 {active
-    ? 'text-accent-light dark:text-accent-dark'
-    : ''}"
-  data-cursor-target
-  tabindex="0"
-  role="button"
-  bind:this={element}
->
-  <span data-cursor-target-text>{label}</span>
-</div>
diff --git a/svelte-app/src/components/experiments/mag-cursor/cursor.svelte b/svelte-app/src/components/experiments/mag-cursor/cursor.svelte
index 62cabc52..718832be 100644
--- a/svelte-app/src/components/experiments/mag-cursor/cursor.svelte
+++ b/svelte-app/src/components/experiments/mag-cursor/cursor.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
   import { cubicOut } from 'svelte/easing';
   import { tweened } from 'svelte/motion';
+  import { get } from 'svelte/store';
 
-  export let targets: HTMLElement[],
-    containerRect: DOMRect,
-    activeTarget: number | undefined = undefined;
+  import { activeTarget, cursorTargets } from '$components/experiments/mag-cursor/utils';
 
-  const size = 28,
+  import type { CursorTarget } from '$components/experiments/mag-cursor/utils';
+
+  export let containerRect: DOMRect | undefined = undefined;
+
+  const size = 34,
     innerSize = 4,
-    snapDistance = 68;
+    _lastPosition = { clientX: 0, clientY: 0 };
 
   let cursor = { x: 0, y: 0, width: size, height: size, borderRadius: size / 2 },
     innerCursor = {
@@ -30,102 +33,164 @@
       easing: cubicOut
     });
 
-  const updateCursorPosition = (e: { clientX: number; clientY: number }) => {
-    const { clientX: x, clientY: y } = e;
-
-    if (
-      !containerRect ||
-      x < containerRect.left ||
-      x > containerRect.right ||
-      y < containerRect.top ||
-      y > containerRect.bottom
-    ) {
-      hide = true;
-      return;
-    }
+  const findDistance = ({ x, y }: { x: number; y: number }, rect: DOMRect) => {
+    const hd = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0,
+      vd = y < rect.top ? rect.top - y : y > rect.bottom ? y - rect.bottom : 0;
 
-    hide = false;
+    return Math.max(hd, vd);
+  };
 
-    let closestDistance = Infinity,
-      closestTarget: number | undefined = undefined;
+  const updateCursorPosition =
+    (targets: CursorTarget[]) => (e?: { clientX: number; clientY: number }) => {
+      const { clientX: x, clientY: y } = e ?? _lastPosition;
+
+      _lastPosition.clientX = x;
+      _lastPosition.clientY = y;
+
+      if (
+        containerRect &&
+        (x < containerRect.left ||
+          x > containerRect.right ||
+          y < containerRect.top ||
+          y > containerRect.bottom)
+      ) {
+        setVis(false);
+        return;
+      }
 
-    for (let i = 0; i < targets.length; ++i) {
-      const rect = targets[i]?.getBoundingClientRect();
+      let closestDistance = Infinity,
+        closestTarget: CursorTarget | undefined = undefined;
 
-      if (!rect) {
-        continue;
+      for (let i = 0; i < targets.length; ++i) {
+        const target = targets[i],
+          rect = target.element?.getBoundingClientRect();
+
+        if (!rect) {
+          continue;
+        }
+
+        const distance = findDistance({ x, y }, rect);
+
+        if (distance < closestDistance) {
+          closestDistance = distance;
+          closestTarget = target;
+        }
       }
 
-      const centerX = rect.left + rect.width / 2,
-        centerY = rect.top + rect.height / 2,
-        distance = Math.sqrt(Math.pow(centerX - x, 2) + Math.pow(centerY - y, 2));
+      if (hide) {
+        setVis(true);
+      }
 
-      if (distance < closestDistance) {
-        closestDistance = distance;
-        closestTarget = i;
+      if (closestTarget === undefined || closestDistance >= closestTarget.snapDist) {
+        get(activeTarget)?.offset?.set([0, 0]);
+        activeTarget.set(undefined);
+
+        cursorTween.set({
+          x,
+          y,
+          width: size * (mouseDown ? 0.9 : 1),
+          height: size * (mouseDown ? 0.9 : 1),
+          borderRadius: size * (mouseDown ? 0.9 : 1)
+        });
+        innerCursorTween.set({
+          x,
+          y,
+          width: innerSize * (mouseDown ? 3 : 1),
+          height: innerSize * (mouseDown ? 3 : 1),
+          borderRadius: innerSize * (mouseDown ? 3 : 1)
+        });
+
+        return;
+      }
+
+      const rect = closestTarget.element?.getBoundingClientRect();
+
+      // this fucking sucks but idrc for this proj
+      targets
+        .filter((t) => t.id !== closestTarget?.id)
+        .forEach((t) => t.offset?.set([0, 0]));
+
+      if (!rect) {
+        return;
       }
-    }
 
-    if (closestTarget === undefined || closestDistance >= snapDistance) {
-      activeTarget = undefined;
+      activeTarget.set(closestTarget);
+
+      if (closestTarget.snap !== true) {
+        cursorTween.set({
+          x,
+          y,
+          width: size * (mouseDown ? 1.2 : 1.5),
+          height: size * (mouseDown ? 1.2 : 1.5),
+          borderRadius: size * (mouseDown ? 1.2 : 1.5)
+        });
+        innerCursorTween.set({
+          x,
+          y,
+          width: innerSize * (mouseDown ? 3 : 2),
+          height: innerSize * (mouseDown ? 3 : 2),
+          borderRadius: innerSize * (mouseDown ? 3 : 2)
+        });
+        return;
+      }
 
       cursorTween.set({
-        x: e.clientX,
-        y: e.clientY,
-        width: size * (mouseDown ? 1.5 : 1),
-        height: size * (mouseDown ? 1.5 : 1),
-        borderRadius: size * (mouseDown ? 1.5 : 1)
+        x: rect.left + rect.width / 2 + (x - (rect.left + rect.width / 2)) * 0.14,
+        y: rect.top + rect.height / 2 + (y - (rect.top + rect.height / 2)) * 0.14,
+        width: rect.width + closestTarget.size + (mouseDown ? 8 : 0),
+        height: rect.height + closestTarget.size * 0.5 + (mouseDown ? 8 : 0),
+        borderRadius: 8 * (mouseDown ? 2 : 1)
       });
 
+      closestTarget.offset?.set([
+        (x - (rect.left + rect.width / 2)) * 0.075,
+        (y - (rect.top + rect.height / 2)) * 0.075
+      ]);
+
       innerCursorTween.set({
-        x: e.clientX,
-        y: e.clientY,
-        width: innerSize * (mouseDown ? 2 : 1),
-        height: innerSize * (mouseDown ? 2 : 1),
-        borderRadius: innerSize * (mouseDown ? 2 : 1)
+        x,
+        y,
+        width: innerSize * (mouseDown ? 2 : 3),
+        height: innerSize * (mouseDown ? 2 : 3),
+        borderRadius: innerSize * (mouseDown ? 1 : 3)
       });
+    };
 
-      return;
-    }
-
-    const rect = targets[closestTarget].getBoundingClientRect();
+  const handleClick = (e: MouseEvent) => {
+    const targets = $cursorTargets,
+      target = targets.find((t) => t.id === get(activeTarget)?.id);
 
-    activeTarget = closestTarget;
+    mouseDown = e.type === 'mousedown';
 
-    cursorTween.set({
-      x: rect.left + rect.width / 2,
-      y: rect.top + rect.height / 2,
-      width: rect.width + (mouseDown ? 8 : 0),
-      height: rect.height + (mouseDown ? 8 : 0),
-      borderRadius: 8 * (mouseDown ? 2 : 1)
-    });
+    if (e.type === 'mouseup') {
+      target?.element?.click();
+    }
 
-    innerCursorTween.set({
-      x: e.clientX,
-      y: e.clientY,
-      width: innerSize * (mouseDown ? 2 : 4),
-      height: innerSize * (mouseDown ? 2 : 4),
-      borderRadius: innerSize * (mouseDown ? 1 : 2)
-    });
+    updateCursorPosition(targets)(e);
   };
 
-  const handleClick = (e: MouseEvent) => {
-    mouseDown = e.type === 'mousedown';
-    updateCursorPosition(e);
+  const setVis = (visible: boolean) => {
+    hide = !visible;
+    !visible && get(activeTarget)?.offset?.set([0, 0]);
+    !visible && activeTarget.set(undefined);
   };
+
+  $: updateCursorPosition($cursorTargets)();
 </script>
 
 <svelte:window
   on:mousemove={updateCursorPosition}
+  on:mousemove={updateCursorPosition($cursorTargets)}
   on:mousedown={handleClick}
   on:mouseup={handleClick}
 />
 
 {#if !hide}
   <div
-    class="pointer-events-none fixed left-0 top-0 shadow-lg {activeTarget !== undefined
-      ? 'bg-dark/5 shadow-dark/5 dark:bg-light/5 dark:shadow-light/5'
-      : 'bg-dark/10 shadow-transparent dark:bg-light/10'} transition-colors"
+    class="pointer-events-none fixed left-0 top-0 z-10 shadow-lg {$activeTarget !==
+    undefined
+      ? 'bg-dark/10 shadow-dark/5 dark:bg-light/10 dark:shadow-light/5'
+      : 'bg-dark/15 shadow-transparent dark:bg-light/15'} transition-colors"
     style={`
 transform: translate(calc(${$cursorTween.x}px - 50%), calc(${$cursorTween.y}px - 50%));
 width: ${$cursorTween.width}px;
@@ -134,7 +199,10 @@ border-radius: ${$cursorTween.borderRadius}px;
 `}
   />
   <div
-    class="pointer-events-none fixed left-0 top-0 bg-dark/20 transition-colors dark:bg-light/20"
+    class="pointer-events-none fixed left-0 top-0 z-10 transition-colors {$activeTarget !==
+    undefined
+      ? 'bg-dark/20 dark:bg-light/20'
+      : 'bg-dark/40 dark:bg-light/40'}"
     style={`
 transform: translate(calc(${$innerCursorTween.x}px - 50%), calc(${$innerCursorTween.y}px - 50%));
 width: ${$innerCursorTween.width}px;
diff --git a/svelte-app/src/components/experiments/mag-cursor/target.svelte b/svelte-app/src/components/experiments/mag-cursor/target.svelte
new file mode 100644
index 00000000..65b61c9f
--- /dev/null
+++ b/svelte-app/src/components/experiments/mag-cursor/target.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { cubicOut } from 'svelte/easing';
+  import { tweened } from 'svelte/motion';
+
+  import {
+    activeTarget,
+    cursorTargets,
+    DEFAULT_NO_SNAP_DIST,
+    DEFAULT_SNAP_DIST,
+    getFirstPositionedChild
+  } from '$components/experiments/mag-cursor/utils';
+
+  export const id = Math.random().toString(36).slice(4);
+
+  export let snap = true,
+    size = 0,
+    distance = snap ? DEFAULT_SNAP_DIST : DEFAULT_NO_SNAP_DIST;
+
+  let element: HTMLDivElement;
+
+  onMount(() => {
+    cursorTargets.update((targets) => [
+      ...targets,
+      {
+        id,
+        element: getFirstPositionedChild(element),
+        snap,
+        snapDist: distance,
+        size,
+        offset: tweened([0, 0], {
+          duration: 275,
+          easing: cubicOut
+        })
+      }
+    ]);
+  });
+
+  onDestroy(() => {
+    cursorTargets.update((targets) => targets.filter((t) => t.id !== id));
+  });
+
+  $: active = !!($activeTarget?.id && $activeTarget.id === id);
+  $: tweenedOffset = $cursorTargets.find((t) => t.id === id)?.offset;
+</script>
+
+<div class="contents" bind:this={element}>
+  <slot {active} {id} offset={$tweenedOffset} />
+</div>
diff --git a/svelte-app/src/components/experiments/mag-cursor/utils.ts b/svelte-app/src/components/experiments/mag-cursor/utils.ts
new file mode 100644
index 00000000..fe211662
--- /dev/null
+++ b/svelte-app/src/components/experiments/mag-cursor/utils.ts
@@ -0,0 +1,40 @@
+import { writable } from 'svelte/store';
+
+import { browser } from '$app/environment';
+
+import type { Tweened } from 'svelte/motion';
+
+export type CursorTarget = {
+  element: HTMLElement | undefined;
+  id: string;
+  snapDist: number;
+  snap: boolean;
+  offset: Tweened<[number, number]>;
+  size: number;
+};
+
+export const DEFAULT_SNAP_DIST = 52;
+export const DEFAULT_NO_SNAP_DIST = 20;
+
+export const activeTarget = writable<CursorTarget | undefined>(undefined);
+export const cursorTargets = writable<CursorTarget[]>([]);
+
+export const getFirstPositionedChild = (el: HTMLElement): HTMLElement | undefined => {
+  if (!browser) {
+    return undefined;
+  }
+
+  const firstChild = el.firstElementChild as HTMLElement | null;
+
+  if (!firstChild) {
+    return undefined;
+  }
+
+  const style = window.getComputedStyle(firstChild);
+
+  if (style.display === 'none' || style.display === 'contents') {
+    return getFirstPositionedChild(firstChild);
+  }
+
+  return firstChild;
+};
diff --git a/svelte-app/src/components/experiments/toru.svelte b/svelte-app/src/components/experiments/toru.svelte
index e2d3492c..ea90945d 100644
--- a/svelte-app/src/components/experiments/toru.svelte
+++ b/svelte-app/src/components/experiments/toru.svelte
@@ -6,6 +6,7 @@
   import Divider from '$components/divider.svelte';
   import { initSync, stopSync } from '$components/experiments/toru';
   import Hoverable from '$components/hoverable.svelte';
+  import Icon from '$components/icon.svelte';
   import Link from '$components/link.svelte';
   import Spinner from '$components/loading/spinner.svelte';
 
@@ -59,6 +60,19 @@
         <Divider />
       </header>
 
+      <Link
+        href="https://github.com/kiosion/toru"
+        class="focus-outline absolute right-4 top-4 z-10 rounded-sm p-2"
+        tooltipDelay={150}
+        newtab
+      >
+        <Icon
+          name="ExternalLink"
+          size={21}
+          class="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"
+        />
+      </Link>
+
       <figure
         class="flex select-none flex-row items-center justify-start gap-5 px-1 pb-2"
       >
@@ -135,25 +149,6 @@
           />
         {/if}
       </figure>
-
-      <Link
-        href="https://github.com/kiosion/toru"
-        class="focus-outline absolute right-4 top-4 z-10 rounded-sm p-1"
-        tooltipDelay={150}
-        newtab
-      >
-        <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"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M21 11V3h-8v2h4v2h-2v2h-2v2h-2v2H9v2h2v-2h2v-2h2V9h2V7h2v4h2zM11 5H3v16h16v-8h-2v6H5V7h6V5z"
-            fill="currentColor"
-          />
-        </svg>
-      </Link>
     </article>
 
     <div
diff --git a/svelte-app/src/components/footer.svelte b/svelte-app/src/components/footer.svelte
index 129360e6..54efe060 100644
--- a/svelte-app/src/components/footer.svelte
+++ b/svelte-app/src/components/footer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { BASE_GIT_URL } from '$lib/consts';
   import { APP_VERSION } from '$lib/env';
   import { t } from '$lib/i18n';
 
@@ -62,7 +63,7 @@
           <BaseLink
             target="_blank"
             rel="noopener noreferrer"
-            href="https://github.com/kiosion/kio.dev/commit/{APP_VERSION}"
+            href="{BASE_GIT_URL}/commit/{APP_VERSION}"
           >
             {APP_VERSION.slice(0, 6)}
           </BaseLink>
diff --git a/svelte-app/src/components/icon.svelte b/svelte-app/src/components/icon.svelte
index 0294aae7..3ee9ddfe 100644
--- a/svelte-app/src/components/icon.svelte
+++ b/svelte-app/src/components/icon.svelte
@@ -12,6 +12,7 @@
     Check,
     Copy,
     Downasaur,
+    ExternalLink,
     ForwardBurger,
     GitBranch,
     GitCommit,
@@ -34,6 +35,7 @@
     check: Check,
     copy: Copy,
     downasaur: Downasaur,
+    'external-link': ExternalLink,
     'forward-burger': ForwardBurger,
     'git-branch': GitBranch,
     'git-commit': GitCommit,
diff --git a/svelte-app/src/components/link.svelte b/svelte-app/src/components/link.svelte
index 03946119..66e2e667 100644
--- a/svelte-app/src/components/link.svelte
+++ b/svelte-app/src/components/link.svelte
@@ -10,6 +10,7 @@
     type = $$props.href ? 'a' : 'button';
 
   export let tooltipDelay = 300,
+    tooltipText: string | undefined = undefined,
     newtab = false;
 
   $: link = $$props.href
@@ -21,7 +22,8 @@
 
 <Hoverable let:hovered>
   <Tooltip
-    text={link && link.length > 50 ? `${link.slice(0, 50 - 3)}...` : link ?? $t('Visit')}
+    text={tooltipText ??
+      (link && link.length > 50 ? `${link.slice(0, 50 - 3)}...` : link ?? $t('Visit'))}
     delay={tooltipDelay}
   >
     <svelte:element
diff --git a/svelte-app/src/lib/consts.ts b/svelte-app/src/lib/consts.ts
index 14d32b31..ed8a78e9 100644
--- a/svelte-app/src/lib/consts.ts
+++ b/svelte-app/src/lib/consts.ts
@@ -20,6 +20,8 @@ export const BASE_PAGE_TITLE = 'kio.dev';
 
 export const TORU_API_URL = 'https://toru.kio.dev/api/v1';
 
+export const BASE_GIT_URL = 'https://github.com/kiosion/kio.dev';
+
 interface AppRoute {
   name: string;
   path: string;
diff --git a/svelte-app/src/lib/icons/external-link.svelte b/svelte-app/src/lib/icons/external-link.svelte
new file mode 100644
index 00000000..1c6692ed
--- /dev/null
+++ b/svelte-app/src/lib/icons/external-link.svelte
@@ -0,0 +1,4 @@
+<path
+  d="M21 11V3h-8v2h4v2h-2v2h-2v2h-2v2H9v2h2v-2h2v-2h2V9h2V7h2v4h2zM11 5H3v16h16v-8h-2v6H5V7h6V5z"
+  fill="currentColor"
+/>
diff --git a/svelte-app/src/lib/icons/index.ts b/svelte-app/src/lib/icons/index.ts
index 28a31d02..8a9bcf65 100644
--- a/svelte-app/src/lib/icons/index.ts
+++ b/svelte-app/src/lib/icons/index.ts
@@ -8,6 +8,7 @@ export { default as BackBurger } from '$lib/icons/backburger.svelte';
 export { default as Check } from '$lib/icons/check.svelte';
 export { default as Copy } from '$lib/icons/copy.svelte';
 export { default as Downasaur } from '$lib/icons/downasaur.svelte';
+export { default as ExternalLink } from '$lib/icons/external-link.svelte';
 export { default as ForwardBurger } from '$lib/icons/forwardburger.svelte';
 export { default as GitBranch } from '$lib/icons/git-branch.svelte';
 export { default as GitCommit } from '$lib/icons/git-commit.svelte';