diff --git a/src/Components/Dial.svelte b/src/Components/Dial.svelte
new file mode 100644
index 0000000..91053cf
--- /dev/null
+++ b/src/Components/Dial.svelte
@@ -0,0 +1,74 @@
+<script context="module">
+  export const DIAL = {};
+</script>
+
+<script lang="ts">
+  import {
+    setContext,
+    onDestroy,
+    createEventDispatcher,
+    afterUpdate,
+  } from "svelte";
+  import type { NailState } from "./Nail.svelte";
+  import type { Writable } from "svelte/store";
+
+  let states: Writable<NailState>[] = [];
+
+  let visible = false;
+
+  export let dist = 82;
+
+  export let angleRange = [0, 360];
+
+  let self;
+
+  const updateNails = () => {
+    const pi = (angleRange[1] - angleRange[0]) / states.length;
+    for (let i = 0; i < states.length; ++i) {
+      states[i].set({
+        angle: pi * i + angleRange[0],
+        length: dist,
+        visible,
+      });
+    }
+  };
+
+  setContext(DIAL, {
+    registerNail(nail: Writable<NailState>) {
+      states.push(nail);
+      updateNails();
+      onDestroy(() => {
+        const i = states.indexOf(nail);
+        console.log("destroy at ", i);
+        states.splice(i, 1);
+        updateNails();
+      });
+    },
+  });
+
+  afterUpdate(() => {
+    updateNails();
+  });
+</script>
+
+<div
+  bind:this={self}
+  on:click={() => {
+    visible = !visible;
+    updateNails();
+  }}
+  class="dial"
+>
+  <slot />
+</div>
+
+<style>
+  .dial {
+    padding: 10px;
+    border: 1px solid;
+    border-radius: 99px;
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/Components/DialEmbeddings.svelte b/src/Components/DialEmbeddings.svelte
new file mode 100644
index 0000000..25e6956
--- /dev/null
+++ b/src/Components/DialEmbeddings.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { EmbeddedFile } from "../main";
+  import { createEventDispatcher } from "svelte";
+  import Embedding from "./Embedding.svelte";
+  import Dial from "./Dial.svelte";
+  import Nail from "./Nail.svelte";
+
+  export const dispatch = createEventDispatcher();
+
+  export let files: EmbeddedFile[];
+  export let id: string = "";
+
+  let children: { [k in number]: Embedding } = {};
+  export async function bepis(ev: MouseEvent) {
+    for (let child of Object.values(children)) child.bepis(ev);
+  }
+</script>
+
+<Dial dist={220}>
+  {#each files as file, i}
+    <Nail>
+      <Embedding on:fileinfo bind:this={children[i]} {id} {file} />
+    </Nail>
+  {/each}
+</Dial>
+
+<style scoped>
+</style>
diff --git a/src/Components/Nail.svelte b/src/Components/Nail.svelte
new file mode 100644
index 0000000..bb62e24
--- /dev/null
+++ b/src/Components/Nail.svelte
@@ -0,0 +1,55 @@
+<script lang="ts" context="module">
+  export type NailState = {
+    angle: number;
+    length: number;
+    visible: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { DIAL } from "./Dial.svelte";
+  import { writable } from "svelte/store";
+  import { elasticOut, elasticIn } from "svelte/easing";
+
+  const state = writable<NailState>({
+    angle: 0,
+    length: 0,
+    visible: false,
+  });
+
+  function slide(node: any, { delay = 0, duration = 1000 }) {
+    return {
+      delay,
+      easing: elasticOut,
+      duration,
+      css: (t: number) =>
+        `transform: rotate(${$state.angle}deg) translateX(${
+          t * $state.length
+        }px) scale(${t}); opacity: ${t}`,
+    };
+  }
+
+  const ctx: any = getContext(DIAL);
+  if (ctx) ctx.registerNail(state);
+</script>
+
+{#if $state.visible}
+  <div
+    transition:slide
+    style="transform: rotate({$state.angle}deg) translateX({$state.length}px);"
+    class="rel"
+  >
+    <div style="transform: rotate({-$state.angle}deg)" class="abs">
+      <slot />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .rel {
+  }
+
+  .abs {
+  }
+</style>
diff --git a/src/Components/Overlay.svelte b/src/Components/Overlay.svelte
new file mode 100644
index 0000000..acc3689
--- /dev/null
+++ b/src/Components/Overlay.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+
+</script>
+
+<div></div>
+
+<style>
+</style>
diff --git a/src/utils.ts b/src/utils.ts
index 5118c78..71479e2 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -162,12 +162,15 @@ export const getThreadDataCache = async (board: string, op: number) => {
     return threadDataCache;
 };
 
-export const getEmbedsFromCache = async (board: string, op: number, pid: string): Promise<[EmbeddedFile[], boolean][]> => {
+/*
+    Semantic difference: Empty array means there is nothing, undefined means it wasn't found in the cache
+*/
+export const getEmbedsFromCache = async (board: string, op: number, pid: string): Promise<[EmbeddedFile[], boolean][] | undefined> => {
     await getThreadDataCache(board, op);
     const target = +pid.slice(pid.match(/\d/)!.index);
     const cachedData = cthreadDataCache![target];
     if (!cachedData)
-        return [];
+        return;
     const ret: [EmbeddedFile[], boolean][] = [];
     if ('pee' in cachedData.data) {
         const files = await decodeCoom3Payload(Buffer.from(cachedData.data.pee.join(' ')));
@@ -228,7 +231,7 @@ export const decodeCoom3Payload = async (buff: Buffer) => {
             const { domain, file } = m.groups!;
             const headers = await getHeaders(pee);
             const res = await ifetch(pee, {
-                headers: { range: 'bytes=0-16383', 'user-agent': '' },
+                headers: { range: 'bytes=0-32767', 'user-agent': '' },
                 mode: 'cors',
                 referrerPolicy: 'no-referrer',
             });