diff --git a/svelte-app/src/components/document/content/header.svelte b/svelte-app/src/components/document/content/header.svelte
index b302ea57d..e4324f9d0 100644
--- a/svelte-app/src/components/document/content/header.svelte
+++ b/svelte-app/src/components/document/content/header.svelte
@@ -8,12 +8,14 @@
   import ArrowButton from '$components/controls/arrow-button.svelte';
   import Divider from '$components/divider.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';
 
-  import type { PostDocument, ProjectDocument, ProjectImage } from '$types';
+  import type { PostDocument, ProjectDocument, ProjectImage, RouteFetch } from '$types';
 
   export let data: PostDocument | ProjectDocument,
+    routeFetch: RouteFetch,
     images: ProjectImage[] | undefined = undefined,
     model = data._type;
 </script>
@@ -90,7 +92,17 @@
 
   {#if data._type === 'project' && images?.length}
     <Divider />
-    <ImageCarousel {images} />
+    {#if images.length > 1}
+      <ImageCarousel {images} />
+    {:else}
+      <Image
+        image={images[0].sanityAsset}
+        placeholder={images[0].placeholder}
+        crop={images[0].crop}
+        srcPromise={images[0].asset}
+        {routeFetch}
+      />
+    {/if}
   {/if}
 </div>
 
diff --git a/svelte-app/src/components/images/image-modal.svelte b/svelte-app/src/components/images/image-modal.svelte
new file mode 100644
index 000000000..0181d4b39
--- /dev/null
+++ b/svelte-app/src/components/images/image-modal.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import { BASE_ANIMATION_DURATION } from '$lib/consts';
+
+  export let dialog: HTMLDialogElement,
+    show = false;
+</script>
+
+<svelte:window
+  on:keydown={(e) => {
+    if (show) {
+      switch (e.key) {
+        case 'Escape':
+          show = false;
+          break;
+        case 'Tab':
+          e.preventDefault();
+          dialog.focus();
+          break;
+      }
+    }
+  }}
+/>
+
+{#if show}
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <dialog
+    bind:this={dialog}
+    on:click={() => (show = false)}
+    on:keydown={(e) => {
+      if (e.key === 'Escape') {
+        show = false;
+      }
+    }}
+    in:fade={{ duration: BASE_ANIMATION_DURATION }}
+    out:fade={{ duration: BASE_ANIMATION_DURATION }}
+  >
+    <div><slot /></div>
+  </dialog>
+{/if}
+
+<style lang="scss">
+  dialog {
+    @apply fixed inset-0 z-50 flex h-full w-full flex-col items-center justify-center bg-black/80;
+
+    div {
+      @apply relative flex h-full max-h-full w-full max-w-full flex-col items-center justify-center p-8;
+    }
+  }
+</style>
diff --git a/svelte-app/src/components/images/image.svelte b/svelte-app/src/components/images/image.svelte
new file mode 100644
index 000000000..dac6aa6f6
--- /dev/null
+++ b/svelte-app/src/components/images/image.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { crossfade, fade } from 'svelte/transition';
+
+  import { BASE_ANIMATION_DURATION } from '$lib/consts';
+  import { buildImageUrl, getCrop } from '$lib/helpers/image';
+
+  import ImageModal from '$components/images/image-modal.svelte';
+  import Spinner from '$components/loading/spinner.svelte';
+
+  import type { RouteFetch, SanityImageObject } from '$types';
+
+  export let image: SanityImageObject,
+    routeFetch: RouteFetch,
+    placeholder: string | undefined = undefined,
+    crop: SanityImageObject['crop'] & { width: number; height: number } = getCrop(image),
+    srcPromise: Promise<string> | undefined = undefined;
+
+  const { _key } = image,
+    { _ref } = image.asset,
+    imgDimensions = {
+      width: Math.min(crop.width, 1200),
+      height: Math.min(crop.width, 1200) * (crop.height / crop.width)
+    },
+    placeholderSrc =
+      placeholder || buildImageUrl({ ref: _ref, crop, width: 30, blur: 40 }),
+    style = `max-width: ${imgDimensions.width}px; max-height: ${imgDimensions.height}px; aspect-ratio: ${imgDimensions.width} / ${imgDimensions.height};`,
+    placeholderStyle = `${style} position: absolute; top: 0; left: 0; opacity: 50%;`,
+    [send, receive] = crossfade({
+      duration: (d: number) => Math.sqrt(d * 200),
+      fallback(node, params) {
+        const style = getComputedStyle(node);
+        const transform = style.transform === 'none' ? '' : style.transform;
+
+        return {
+          duration: 300,
+          easing: params.easing,
+          css: (t) => `
+          transform: ${transform} scale(${t});
+          opacity: ${t}
+        `
+        };
+      }
+    });
+
+  let fullSrc: string,
+    dialog: HTMLDialogElement,
+    showImageModal = false;
+
+  onMount(() => {
+    srcPromise ||= routeFetch(
+      buildImageUrl({ ref: _ref, crop, width: imgDimensions.width })
+    ).then(async (res) => {
+      const mimeType =
+          res.headers.get('content-type') ||
+          res.headers.get('Content-Type') ||
+          'image/jpeg',
+        ab = await res.arrayBuffer(),
+        buf = new Uint8Array(ab).reduce(
+          (data, byte) => data + String.fromCharCode(byte),
+          ''
+        );
+      return `data:${mimeType};base64,${btoa(buf)}`;
+    });
+
+    srcPromise.then((res) => (fullSrc = res));
+  });
+</script>
+
+<div>
+  {#await srcPromise || new Promise((_res) => {})}
+    <div class="loading"><Spinner /></div>
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <img src={placeholderSrc} draggable="false" {style} />
+  {:then src}
+    <button
+      {style}
+      on:click={() => {
+        showImageModal = true;
+      }}
+      on:keydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.stopPropagation();
+          showImageModal = true;
+        }
+      }}
+    >
+      {#if showImageModal}
+        <img
+          src={placeholderSrc}
+          alt={_key}
+          draggable="false"
+          style={placeholderStyle}
+          out:fade={{ duration: BASE_ANIMATION_DURATION }}
+        />
+      {:else}
+        <img
+          {src}
+          alt={_key}
+          draggable="false"
+          in:receive={{ key: _key, duration: BASE_ANIMATION_DURATION }}
+          out:send={{ key: _key, duration: BASE_ANIMATION_DURATION }}
+        />
+      {/if}
+    </button>
+  {:catch e}
+    <p class="error">Error: {e?.message || e}</p>
+    <img src={placeholderSrc} alt={_key} draggable="false" {style} />
+  {/await}
+  <img
+    class="backdrop"
+    src={placeholderSrc}
+    alt={_key}
+    draggable="false"
+    aria-hidden="true"
+    style={placeholderStyle}
+  />
+</div>
+
+<ImageModal bind:dialog bind:show={showImageModal}>
+  <img
+    src={fullSrc}
+    draggable="false"
+    alt={_key}
+    {style}
+    in:receive={{ key: _key, duration: BASE_ANIMATION_DURATION }}
+    out:send={{ key: _key, duration: BASE_ANIMATION_DURATION }}
+  />
+</ImageModal>
+
+<style lang="scss">
+  @import '@styles/mixins';
+
+  div:not(.loading) {
+    @apply relative w-full;
+
+    .backdrop {
+      @apply transition-opacity;
+
+      z-index: -1;
+      filter: blur(20px);
+      opacity: 0.2 !important;
+    }
+
+    &:hover,
+    &:focus-visible {
+      .backdrop {
+        opacity: 0.3 !important;
+      }
+    }
+  }
+
+  button {
+    @apply relative block max-h-fit w-full rounded-sm;
+
+    @include focus-state(sm);
+  }
+
+  img {
+    @apply mx-auto w-full select-none rounded-sm;
+  }
+
+  .error,
+  .loading {
+    @apply absolute left-1/2 top-1/2 h-fit w-fit max-w-full -translate-x-1/2 -translate-y-1/2 transform text-center font-code text-base;
+  }
+
+  :global(.dark) {
+    button {
+      @include focus-state(sm, dark);
+    }
+  }
+</style>
diff --git a/svelte-app/src/components/portable-text/image-carousel.svelte b/svelte-app/src/components/portable-text/image-carousel.svelte
index 966631084..43c146166 100644
--- a/svelte-app/src/components/portable-text/image-carousel.svelte
+++ b/svelte-app/src/components/portable-text/image-carousel.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import { crossfade, fade } from 'svelte/transition';
+  import { crossfade } from 'svelte/transition';
 
   import { BASE_ANIMATION_DURATION } from '$lib/consts';
 
+  import ImageModal from '$components/images/image-modal.svelte';
   import ScrollButton from '$components/portable-text/image-carousel/scroll-button.svelte';
 
   import type { ProjectImage } from '$types';
@@ -68,128 +69,56 @@
 
 <div class="carousel">
   <div class="scroller">
-    {#if $values.length > 1}
-      {#each $values as image, i}
-        <button
-          class="focusOutline-sm"
-          style="
-            aspect-ratio: {image.crop.width} / {image.crop.height};
-            width: {image.carouselDimensions.width}px;
-            height: {image.carouselDimensions.height}px;
-          "
-          on:click={() => {
-            currentIndex = i;
-            showImageModal = true;
-          }}
-          on:keydown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              currentIndex = i;
-              showImageModal = true;
-            }
-          }}
-        >
-          {#if showImageModal && currentIndex === i}
-            <img
-              src={image.asset}
-              draggable="false"
-              alt={i.toString()}
-              style="opacity: 0;"
-            />
-          {:else}
-            <img
-              src={image.asset}
-              draggable="false"
-              alt={i.toString()}
-              bind:this={imageElements[i]}
-              in:receive={{ key: i, duration: BASE_ANIMATION_DURATION }}
-              out:send={{ key: i, duration: BASE_ANIMATION_DURATION }}
-            />
-          {/if}
-        </button>
-      {/each}
-    {:else}
+    {#each $values as image, i}
       <button
         class="focusOutline-sm"
-        style="width: 100%;"
+        style="
+          aspect-ratio: {image.crop.width} / {image.crop.height};
+          width: {image.carouselDimensions.width}px;
+          height: {image.carouselDimensions.height}px;
+        "
         on:click={() => {
+          currentIndex = i;
           showImageModal = true;
         }}
         on:keydown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
+            currentIndex = i;
             showImageModal = true;
           }
         }}
       >
-        {#if showImageModal}
-          <!--
-            Wow this is jank and sucks and needs to be rewritten properly,
-            this is just a style issue since the max-height isn't constrained
-          -->
-          {#await new Promise((r) => setTimeout(r, BASE_ANIMATION_DURATION)) then _}
-            <img src={$values[0].asset} draggable="false" alt="0" style="opacity: 0;" />
-          {/await}
+        {#if showImageModal && currentIndex === i}
+          <img
+            src={image.asset}
+            draggable="false"
+            alt={i.toString()}
+            style="opacity: 0;"
+          />
         {:else}
           <img
-            src={$values[0].asset}
+            src={image.asset}
             draggable="false"
-            alt="0"
-            bind:this={imageElements[0]}
-            in:receive={{ key: 0, duration: BASE_ANIMATION_DURATION }}
-            out:send={{ key: 0, duration: BASE_ANIMATION_DURATION }}
+            alt={i.toString()}
+            bind:this={imageElements[i]}
+            in:receive={{ key: i, duration: BASE_ANIMATION_DURATION }}
+            out:send={{ key: i, duration: BASE_ANIMATION_DURATION }}
           />
         {/if}
       </button>
-    {/if}
+    {/each}
   </div>
 </div>
 
-<svelte:window
-  on:keydown={(e) => {
-    if (showImageModal) {
-      switch (e.key) {
-        case 'ArrowLeft':
-          scrollLeft();
-          break;
-        case 'ArrowRight':
-          scrollRight();
-          break;
-        case 'Escape':
-        case 'Enter':
-          showImageModal = false;
-          break;
-        case 'Tab':
-          e.preventDefault();
-          dialog.focus();
-          break;
-      }
-    }
-  }}
-/>
-
-{#if showImageModal}
-  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <dialog
-    bind:this={dialog}
-    on:click={() => (showImageModal = false)}
-    on:keydown={(e) => {
-      if (e.key === 'Escape') {
-        showImageModal = false;
-      }
-    }}
-    in:fade={{ duration: BASE_ANIMATION_DURATION }}
-    out:fade={{ duration: BASE_ANIMATION_DURATION }}
-  >
-    <div>
-      <img
-        src={$values[currentIndex].asset}
-        draggable="false"
-        alt={currentIndex.toString()}
-        in:receive={{ key: currentIndex, duration: BASE_ANIMATION_DURATION }}
-        out:send={{ key: currentIndex, duration: BASE_ANIMATION_DURATION }}
-      />
-    </div>
-  </dialog>
-{/if}
+<ImageModal bind:dialog bind:show={showImageModal}>
+  <img
+    src={$values[currentIndex].asset}
+    draggable="false"
+    alt={currentIndex.toString()}
+    in:receive={{ key: currentIndex, duration: BASE_ANIMATION_DURATION }}
+    out:send={{ key: currentIndex, duration: BASE_ANIMATION_DURATION }}
+  />
+</ImageModal>
 
 {#if imageElements.length > 1}
   <div class="buttons">
@@ -212,7 +141,7 @@
   }
 
   .scroller {
-    @apply flex min-w-fit flex-row gap-4;
+    @apply flex w-full min-w-fit flex-row gap-4;
   }
 
   .buttons {
@@ -220,7 +149,7 @@
   }
 
   button {
-    @apply relative;
+    @apply relative block max-h-fit w-full rounded-sm;
 
     img {
       @apply h-full w-full flex-shrink-0;
@@ -231,14 +160,6 @@
     @apply select-none rounded-sm border border-dark/20;
   }
 
-  dialog {
-    @apply fixed inset-0 z-50 flex h-full w-full flex-col items-center justify-center bg-black/80;
-
-    div {
-      @apply relative flex h-full max-h-full w-full max-w-full flex-col items-center justify-center p-8;
-    }
-  }
-
   :global(.dark) {
     img {
       @apply border-light/20;
diff --git a/svelte-app/src/components/portable-text/serializers/image.svelte b/svelte-app/src/components/portable-text/serializers/image.svelte
index a70a296c4..5b5d08737 100644
--- a/svelte-app/src/components/portable-text/serializers/image.svelte
+++ b/svelte-app/src/components/portable-text/serializers/image.svelte
@@ -1,81 +1,14 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-
-  import { buildImageUrl, getCrop } from '$lib/helpers/image';
-
-  import Spinner from '$components/loading/spinner.svelte';
+  import Image from '$components/images/image.svelte';
 
   import type { CustomBlockComponentProps } from '@portabletext/svelte';
-  import type { ArbitraryTypedObject } from '@portabletext/types';
   import type { RouteFetch, SanityImageObject } from '$types';
 
   export let portableText: Omit<CustomBlockComponentProps, 'value'> & {
-    value: ArbitraryTypedObject & {
-      asset: SanityImageObject['asset'];
-    };
+    value: SanityImageObject;
   };
 
-  const { value } = portableText,
-    { _key } = value,
-    { _ref } = value.asset,
-    routeFetch = portableText.global.context.routeFetch as RouteFetch,
-    crop = getCrop(value),
-    placeholder = buildImageUrl({ ref: _ref, crop, width: 30, blur: 40 }),
-    style = `
-      max-width: ${crop.width}px;
-      max-height: ${crop.height}px;
-      aspect-ratio: ${crop.width} / ${crop.height};
-    `.trim();
-
-  let srcPromise: Promise<string> = new Promise((_res) => {});
-
-  onMount(() => {
-    srcPromise = routeFetch(
-      buildImageUrl({ ref: _ref, crop, width: Math.min(crop.width, 1000) })
-    ).then((res) => {
-      const mimeType =
-        res.headers.get('content-type') ||
-        res.headers.get('Content-Type') ||
-        'image/jpeg';
-      return res
-        .arrayBuffer()
-        .then(
-          (buf) =>
-            `data:${mimeType};base64,${btoa(
-              new Uint8Array(buf).reduce(
-                (data, byte) => data + String.fromCharCode(byte),
-                ''
-              )
-            )}`
-        );
-    });
-  });
+  const routeFetch = portableText.global.context.routeFetch as RouteFetch;
 </script>
 
-<div>
-  {#await srcPromise}
-    <div class="loading"><Spinner /></div>
-    <!-- svelte-ignore a11y-missing-attribute -->
-    <img src={placeholder} draggable="false" {style} />
-  {:then src}
-    <img {src} alt={_key} draggable="false" {style} />
-  {:catch e}
-    <p class="error">Error: {e?.message || e}</p>
-    <img src={placeholder} alt={_key} draggable="false" {style} />
-  {/await}
-</div>
-
-<style lang="scss">
-  div:not(.loading) {
-    @apply relative h-fit w-full;
-  }
-
-  img {
-    @apply mx-auto h-fit w-full select-none rounded-sm;
-  }
-
-  .error,
-  .loading {
-    @apply absolute left-1/2 top-1/2 h-fit w-fit max-w-full -translate-x-1/2 -translate-y-1/2 transform text-center font-code text-base;
-  }
-</style>
+<Image image={portableText.value} {routeFetch} />
diff --git a/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts b/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts
index 9a496e221..f3d3d00fa 100644
--- a/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts
+++ b/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts
@@ -12,7 +12,7 @@ const urlToBase64Asset = async (url: string, fetch: typeof window.fetch) => {
 
   if (!response.ok) {
     Logger.error(`Failed to fetch image ${url}`);
-    return undefined;
+    return '';
   }
 
   const arrayBuffer = await response.arrayBuffer(),
@@ -62,7 +62,8 @@ export const load = (async ({ fetch, params, url }) => {
           return {
             crop,
             placeholder: await urlToBase64Asset(placeholder, fetch),
-            asset: urlToBase64Asset(url, fetch)
+            asset: urlToBase64Asset(url, fetch),
+            sanityAsset: imageAsset
           } satisfies ProjectImage;
         })()
       );
diff --git a/svelte-app/types/app/documents/index.ts b/svelte-app/types/app/documents/index.ts
index c06e6fa29..2c8830300 100644
--- a/svelte-app/types/app/documents/index.ts
+++ b/svelte-app/types/app/documents/index.ts
@@ -1,4 +1,9 @@
-import type { PTBlock, SanityAsset } from '$types/sanity';
+import type {
+  PTBlock,
+  SanityAsset,
+  SanityImageCrop,
+  SanityImageObject
+} from '$types/sanity';
 
 export interface Document extends SanityAsset {
   slug: Pick<SanityAsset, '_id'> & {
@@ -29,16 +34,13 @@ export interface DocumentHeadings {
 }
 
 export type ProjectImage = {
-  crop: {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
+  crop: SanityImageCrop & {
     width: number;
     height: number;
   };
   placeholder?: string;
-  asset: Promise<string | undefined>;
+  asset: Promise<string>;
+  sanityAsset: SanityImageObject;
 };
 
 export type { AuthorDocument, AuthorTimelineItem } from '$types/documents/author';
diff --git a/svelte-app/types/app/sanity/index.ts b/svelte-app/types/app/sanity/index.ts
index 16db07334..554febbd5 100644
--- a/svelte-app/types/app/sanity/index.ts
+++ b/svelte-app/types/app/sanity/index.ts
@@ -16,9 +16,10 @@ export interface SanityReference {
   _ref: string;
   _type: string;
 }
-export interface SanityImageObject extends Pick<SanityAsset, '_id', '_type'> {
+export interface SanityImageObject extends Pick<SanityAsset, '_type'> {
+  _key?: string;
   asset: SanityReference;
-  crop?: SanityImageCrop;
+  crop: SanityImageCrop;
   hotspot?: SanityImageHotspot;
 }
 export interface SanityImageCrop {