diff --git a/package.json b/package.json
index d641ddec..f095d3c6 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,10 @@
     "./app/utils": {
       "types": "./dist/app/utils.d.ts",
       "default": "./dist/app/utils.js"
+    },
+    "./app/service-worker": {
+      "types": "./dist/app/service-worker.d.ts",
+      "default": "./dist/app/service-worker.js"
     }
   },
   "main": "./dist/module/module.mjs",
diff --git a/src/app/src/components/panel/base/PanelBase.vue b/src/app/src/components/panel/base/PanelBase.vue
index 0e99a7fe..75e8aedd 100644
--- a/src/app/src/components/panel/base/PanelBase.vue
+++ b/src/app/src/components/panel/base/PanelBase.vue
@@ -58,11 +58,11 @@ function onLeave(el: Element, done: () => void) {
     >
       <PanelBaseHeader />
 
-      <div class="px-4 py-2 h-[var(--ui-sub-header-height)] border-b border-gray-200">
+      <div class="px-4 py-2 h-[var(--ui-sub-header-height)] border-b border-gray-200 sticky top-0 bg-white">
         <slot name="header" />
       </div>
 
-      <div class="h-[calc(100vh-var(--ui-header-height)-var(--ui-sub-header-height)-var(--ui-footer-height))] p-4">
+      <div class="h-[calc(100vh-var(--ui-header-height)-var(--ui-sub-header-height)-var(--ui-footer-height))] p-4 overflow-y-auto">
         <slot />
       </div>
 
diff --git a/src/app/src/components/panel/base/PanelBaseBody.vue b/src/app/src/components/panel/base/PanelBaseBody.vue
index 0e1cee22..0096fc99 100644
--- a/src/app/src/components/panel/base/PanelBaseBody.vue
+++ b/src/app/src/components/panel/base/PanelBaseBody.vue
@@ -14,6 +14,19 @@ const fileTree = computed(() => (tree.value.current.value || []).filter(f => f.t
 
 const isFileCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateDocument)
 const isFolderCreationInProgress = computed(() => context.actionInProgress.value === StudioItemActionId.CreateFolder)
+
+async function onFileDrop(event: DragEvent) {
+  if (event.dataTransfer?.files) {
+    if (context.feature.value !== StudioFeature.Media) {
+      return
+    }
+
+    await context.itemActionHandler[StudioItemActionId.UploadMedia]({
+      directory: tree.value.currentItem.value.fsPath,
+      files: Array.from(event.dataTransfer.files),
+    })
+  }
+}
 </script>
 
 <template>
@@ -23,7 +36,9 @@ const isFolderCreationInProgress = computed(() => context.actionInProgress.value
   />
   <div
     v-else
-    class="flex flex-col"
+    class="flex flex-col min-h-full"
+    @drop.prevent.stop="onFileDrop"
+    @dragover.prevent.stop
   >
     <PanelBaseBodyTree
       v-if="folderTree?.length > 0 || isFolderCreationInProgress"
diff --git a/src/app/src/components/panel/base/PanelBaseFooter.vue b/src/app/src/components/panel/base/PanelBaseFooter.vue
index a8b983fa..f2c5f8a4 100644
--- a/src/app/src/components/panel/base/PanelBaseFooter.vue
+++ b/src/app/src/components/panel/base/PanelBaseFooter.vue
@@ -19,7 +19,7 @@ const userMenuItems = computed(() => [
 </script>
 
 <template>
-  <UFooter class="h-var(--ui-footer-height)">
+  <UFooter class="h-var(--ui-footer-height) sticky bottom-0 bg-white">
     <template #left>
       <UDropdownMenu
         :portal="false"
diff --git a/src/app/src/components/shared/item/ItemActionsDropdown.vue b/src/app/src/components/shared/item/ItemActionsDropdown.vue
index 9574159d..1d5baec1 100644
--- a/src/app/src/components/shared/item/ItemActionsDropdown.vue
+++ b/src/app/src/components/shared/item/ItemActionsDropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computeActionItems } from '../../../utils/context'
+import { computeActionItems, computeActionParams } from '../../../utils/context'
 import { computed, type PropType } from 'vue'
 import type { TreeItem } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
@@ -17,7 +17,7 @@ const props = defineProps({
 const actions = computed<DropdownMenuItem[]>(() => {
   return computeActionItems(context.itemActions.value, props.item).map(action => ({
     ...action,
-    onSelect: action.handler,
+    onSelect: () => action.handler?.(computeActionParams(action.id, { item: props.item })),
   }))
 })
 </script>
diff --git a/src/app/src/components/shared/item/ItemCard.vue b/src/app/src/components/shared/item/ItemCard.vue
index 6e5bf9e7..d36d5c10 100644
--- a/src/app/src/components/shared/item/ItemCard.vue
+++ b/src/app/src/components/shared/item/ItemCard.vue
@@ -17,6 +17,9 @@ const isFolder = computed(() => props.item.type === 'directory')
 const name = computed(() => titleCase(props.item.name))
 
 const itemExtensionIcon = computed(() => {
+  if (props.item.preview) {
+    return ''
+  }
   const ext = props.item.id.split('.').pop()?.toLowerCase() || ''
   return {
     md: 'i-ph-markdown-logo',
@@ -26,31 +29,43 @@ const itemExtensionIcon = computed(() => {
   }[ext] || 'i-mdi-file'
 })
 
+const imageSrc = computed(() => {
+  if (props.item.preview) {
+    return props.item.preview
+  }
+  return 'https://placehold.co/1920x1080/f9fafc/f9fafc'
+})
+
 const statusRingColor = computed(() => props.item.status ? `ring-${COLOR_STATUS_MAP[props.item.status]}-200 hover:ring-${COLOR_STATUS_MAP[props.item.status]}-300 hover:dark:ring-${COLOR_STATUS_MAP[props.item.status]}-700` : 'ring-gray-200 hover:ring-gray-300 hover:dark:ring-gray-700')
 </script>
 
 <template>
   <UPageCard
     reverse
-    class="cursor-pointer hover:bg-white relative w-full min-w-0"
+    class="cursor-pointer hover:bg-white relative w-full min-w-0 overflow-hidden"
     :class="statusRingColor"
   >
     <div
       v-if="item.type === 'file'"
       class="relative"
     >
-      <Image
-        src="https://placehold.co/1920x1080/f9fafc/f9fafc"
-        width="426"
-        height="240"
-        alt="Card placeholder"
-        class="z-[-1] rounded-t-lg"
-      />
-      <div class="absolute inset-0 flex items-center justify-center">
-        <UIcon
-          :name="itemExtensionIcon"
-          class="w-8 h-8 text-gray-400 dark:text-gray-500"
+      <div class="bg-[#f7f9fa] bg-[linear-gradient(45deg,#e6e9ea_25%,transparent_0),linear-gradient(-45deg,#e6e9ea_25%,transparent_0),linear-gradient(45deg,transparent_75%,#e6e9ea_0),linear-gradient(-45deg,transparent_75%,#e6e9ea_0)] bg-size-[24px_24px] bg-position-[0_0,0_12px,12px_-12px,-12px_0]">
+        <Image
+          :src="imageSrc"
+          width="426"
+          height="240"
+          alt="Card placeholder"
+          class="z-[-1] rounded-t-lg aspect-video object-cover"
         />
+        <div
+          v-if="itemExtensionIcon"
+          class="absolute inset-0 flex items-center justify-center"
+        >
+          <UIcon
+            :name="itemExtensionIcon"
+            class="w-8 h-8 text-gray-400 dark:text-gray-500"
+          />
+        </div>
       </div>
       <ItemBadge
         v-if="item.status"
diff --git a/src/app/src/composables/useContext.ts b/src/app/src/composables/useContext.ts
index 445c09b3..f0351658 100644
--- a/src/app/src/composables/useContext.ts
+++ b/src/app/src/composables/useContext.ts
@@ -1,7 +1,7 @@
 import { createSharedComposable } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import type { useUi } from './useUi'
-import { type CreateFileParams, type StudioHost, type StudioAction, type TreeItem, StudioItemActionId, type ActionHandlerParams } from '../types'
+import { type UploadMediaParams, type CreateFileParams, type StudioHost, type StudioAction, type TreeItem, StudioItemActionId, type ActionHandlerParams, StudioFeature } from '../types'
 import { oneStepActions, STUDIO_ITEM_ACTION_DEFINITIONS, twoStepActions } from '../utils/context'
 import type { useDraftDocuments } from './useDraftDocuments'
 import { useModal } from './useModal'
@@ -59,8 +59,20 @@ export const useContext = createSharedComposable((
       const draftItem = await draftDocuments.create(document)
       tree.selectItemById(draftItem.id)
     },
+    [StudioItemActionId.UploadMedia]: async ({ directory, files }: UploadMediaParams) => {
+      for (const file of files) {
+        await draftMedias.upload(directory, file)
+      }
+    },
     [StudioItemActionId.RevertItem]: async (id: string) => {
-      modal.openConfirmActionModal(id, StudioItemActionId.RevertItem, () => draftDocuments.revert(id))
+      modal.openConfirmActionModal(id, StudioItemActionId.RevertItem, async () => {
+        if (currentFeature.value === StudioFeature.Content) {
+          await draftDocuments.revert(id)
+        }
+        else {
+          await draftMedias.revert(id)
+        }
+      })
     },
     [StudioItemActionId.RenameItem]: async ({ path, file }: { path: string, file: TreeItem }) => {
       alert(`rename file ${path} ${file.name}`)
diff --git a/src/app/src/composables/useDraftDocuments.ts b/src/app/src/composables/useDraftDocuments.ts
index 5656488c..542b4aa2 100644
--- a/src/app/src/composables/useDraftDocuments.ts
+++ b/src/app/src/composables/useDraftDocuments.ts
@@ -11,7 +11,8 @@ import { useHooks } from './useHooks'
 
 const storage = createStorage({
   driver: indexedDbDriver({
-    storeName: 'nuxt-content-studio-documents',
+    dbName: 'nuxt-content-studio-document',
+    storeName: 'drafts',
   }),
 })
 
diff --git a/src/app/src/composables/useDraftMedias.ts b/src/app/src/composables/useDraftMedias.ts
index 0aeb3073..411123be 100644
--- a/src/app/src/composables/useDraftMedias.ts
+++ b/src/app/src/composables/useDraftMedias.ts
@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import { createStorage } from 'unstorage'
 import indexedDbDriver from 'unstorage/drivers/indexedb'
+import { joinURL, withLeadingSlash } from 'ufo'
 import type { DraftItem, StudioHost, GithubFile, MediaItem } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
@@ -10,7 +11,8 @@ import { useHooks } from './useHooks'
 
 const storage = createStorage({
   driver: indexedDbDriver({
-    storeName: 'nuxt-content-studio-medias',
+    dbName: 'nuxt-content-studio-media',
+    storeName: 'drafts',
   }),
 })
 
@@ -198,6 +200,62 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     select(draftItem)
   }
 
+  async function upload(directory: string, file: File) {
+    const draftItem = await fileToDraftItem(directory, file)
+    host.media.upsert(draftItem.id, draftItem.modified!)
+    await create(draftItem.modified!)
+  }
+
+  async function fileToDraftItem(directory: string, file: File): Promise<DraftItem<MediaItem>> {
+    const rawData = await fileToDataUrl(file)
+    const fsPath = directory && directory !== '/' ? joinURL(directory, file.name) : file.name
+
+    return {
+      id: `public-assets/${fsPath}`,
+      fsPath,
+      githubFile: undefined,
+      status: DraftStatus.Created,
+      modified: {
+        id: `public-assets/${fsPath}`,
+        fsPath,
+        extension: fsPath.split('.').pop()!,
+        stem: fsPath.split('.').join('.'),
+        path: withLeadingSlash(fsPath),
+        preview: await resizedataURL(rawData, 128, 128),
+        raw: rawData,
+      },
+    }
+  }
+
+  function fileToDataUrl(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = () => resolve(reader.result as string)
+      reader.onerror = error => reject(error)
+    })
+  }
+
+  function resizedataURL(datas: string, wantedWidth: number, wantedHeight: number): Promise<string> {
+    return new Promise(function (resolve) {
+      const img = document.createElement('img')
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')!
+
+        canvas.width = wantedWidth
+        canvas.height = wantedHeight
+
+        ctx.drawImage(img, 0, 0, wantedWidth, wantedHeight)
+
+        const dataURI = canvas.toDataURL()
+
+        resolve(dataURI)
+      }
+      img.src = datas
+    })
+  }
+
   return {
     get,
     create,
@@ -210,5 +268,6 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     current,
     select,
     selectById,
+    upload,
   }
 })
diff --git a/src/app/src/service-worker.ts b/src/app/src/service-worker.ts
new file mode 100644
index 00000000..4c61f3bd
--- /dev/null
+++ b/src/app/src/service-worker.ts
@@ -0,0 +1,90 @@
+export const serviceWorker = () => `
+const EXTENSIONS_WITH_PREVIEW = new Set([
+  'jpg',
+  'jpeg',
+  'png',
+  'gif',
+  'webp',
+  'ico',
+  'avif',
+])
+self.addEventListener('fetch', event => {
+  const url = new URL(event.request.url);
+  const isSameDomain = url.origin === self.location.origin;
+
+  if (!isSameDomain) {
+    return event.respondWith(fetch(event.request));
+  }
+
+  if (url.pathname.startsWith('/_ipx/_/') || EXTENSIONS_WITH_PREVIEW.has(url.pathname.split('.').pop())) {
+    console.log('Fetching from IndexedDB:', url.pathname);
+    return event.respondWith(fetchFromIndexedDB(event, url));
+  }
+
+  event.respondWith(fetch(event.request))
+})
+
+function fetchFromIndexedDB(event, url) {
+  const dbKey = ['public-assets:', url.pathname.replace(/^\\/+(_ipx\\/_\\/)?/, '').replace('/', ':')].join('')
+  return getData(dbKey).then(data => {
+    if (!data) {
+      console.log('No data found in IndexedDB:', url.pathnam, dbKey);
+      return fetch(event.request);
+    }
+
+    const json = JSON.parse(data)
+    const parsed = parseDataUrl(json.modified.raw);
+    const bytes = base64ToUint8Array(parsed.base64);
+
+    return new Response(bytes, {
+      headers: { 'Content-Type': parsed.mime }
+    });
+  })
+}
+
+function parseDataUrl(dataUrl) {
+  // Example: data:image/png;base64,iVBORw0KG...
+  const match = dataUrl.match(/^data:(.+);base64,(.+)$/);
+  if (!match) return null;
+  return {
+    mime: match[1],
+    base64: match[2]
+  };
+}
+
+function base64ToUint8Array(base64) {
+  const binary = atob(base64);
+  const len = binary.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+// IndexedDB
+function openDB() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('nuxt-content-studio-media', 1);
+    request.onupgradeneeded = event => {
+      const db = event.target.result;
+      db.createObjectStore('drafts', { keyPath: 'id' });
+    };
+    request.onsuccess = event => resolve(event.target.result);
+    request.onerror = event => reject(event.target.error);
+  });
+}
+
+// Read data from the object store
+function getData(key) {
+  return openDB().then(db => {
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction('drafts', 'readonly');
+      const store = tx.objectStore('drafts');
+      const request = store.get(key);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  });
+}
+`
diff --git a/src/app/src/types/context.ts b/src/app/src/types/context.ts
index e31b836f..eb74ab21 100644
--- a/src/app/src/types/context.ts
+++ b/src/app/src/types/context.ts
@@ -8,6 +8,7 @@ export enum StudioFeature {
 export enum StudioItemActionId {
   CreateFolder = 'create-folder',
   CreateDocument = 'create-document',
+  UploadMedia = 'upload-media',
   RevertItem = 'revert-item',
   RenameItem = 'rename-item',
   DeleteItem = 'delete-item',
@@ -19,7 +20,7 @@ export interface StudioAction {
   label: string
   icon: string
   tooltip: string
-  handler?: (args: string & CreateFileParams & RenameFileParams) => void
+  handler?: (args: ActionHandlerParams[StudioItemActionId]) => void
 }
 
 export interface CreateFileParams {
@@ -33,9 +34,15 @@ export interface RenameFileParams {
   file: TreeItem
 }
 
+export interface UploadMediaParams {
+  directory: string
+  files: File[]
+}
+
 export type ActionHandlerParams = {
   [StudioItemActionId.CreateFolder]: string
   [StudioItemActionId.CreateDocument]: CreateFileParams
+  [StudioItemActionId.UploadMedia]: UploadMediaParams
   [StudioItemActionId.RevertItem]: string
   [StudioItemActionId.RenameItem]: RenameFileParams
   [StudioItemActionId.DeleteItem]: string
diff --git a/src/app/src/types/draft.ts b/src/app/src/types/draft.ts
index edadf53f..635dd792 100644
--- a/src/app/src/types/draft.ts
+++ b/src/app/src/types/draft.ts
@@ -15,7 +15,7 @@ export interface DraftItem<T = DatabaseItem | MediaItem> {
   fsPath: string // file path in content directory
   status: DraftStatus // status
 
-  githubFile: GithubFile // file fetched on gh
+  githubFile?: GithubFile // file fetched on gh
   original?: T
   modified?: T
   /**
diff --git a/src/app/src/types/tree.ts b/src/app/src/types/tree.ts
index f97260e8..e6235378 100644
--- a/src/app/src/types/tree.ts
+++ b/src/app/src/types/tree.ts
@@ -8,4 +8,8 @@ export interface TreeItem {
   status?: DraftStatus
   routePath?: string
   children?: TreeItem[]
+  /**
+   * Preview image for the item inside the tree
+   */
+  preview?: string
 }
diff --git a/src/app/src/utils/context.ts b/src/app/src/utils/context.ts
index 1ef08053..2b0c0b3b 100644
--- a/src/app/src/utils/context.ts
+++ b/src/app/src/utils/context.ts
@@ -1,5 +1,6 @@
 import { type StudioAction, StudioFeature, type TreeItem } from '../types'
 import { DraftStatus } from '../types/draft'
+import type { ActionHandlerParams } from '../types/context'
 import { StudioItemActionId } from '../types/context'
 
 export const FEATURE_DISPLAY_MAP = {
@@ -88,3 +89,12 @@ export function computeActionItems(itemActions: StudioAction[], item?: TreeItem
 
   return itemActions.filter(action => !forbiddenActions.includes(action.id))
 }
+
+export function computeActionParams(action: StudioItemActionId, { item }: { item: TreeItem }): ActionHandlerParams[typeof action] {
+  switch (action) {
+    case StudioItemActionId.RevertItem:
+      return item.id
+    default:
+      return {}
+  }
+}
diff --git a/src/app/src/utils/tree.ts b/src/app/src/utils/tree.ts
index ac02e53c..34233b52 100644
--- a/src/app/src/utils/tree.ts
+++ b/src/app/src/utils/tree.ts
@@ -6,6 +6,16 @@ import type { BaseItem } from '../types/item'
 
 export const ROOT_ITEM: TreeItem = { id: 'root', name: 'content', fsPath: '/', type: 'root' }
 
+export const EXTENSIONS_WITH_PREVIEW = new Set([
+  'jpg',
+  'jpeg',
+  'png',
+  'gif',
+  'webp',
+  'ico',
+  'avif',
+])
+
 export function buildTree(dbItems: ((BaseItem) & { fsPath: string })[], draftList: DraftItem[] | null):
 TreeItem[] {
   const tree: TreeItem[] = []
@@ -33,6 +43,7 @@ TreeItem[] {
         name: fileName,
         fsPath: dbItem.fsPath,
         type: 'file',
+        preview: EXTENSIONS_WITH_PREVIEW.has(dbItem.extension) ? dbItem.path : undefined,
       }
 
       if (itemHasPathField) {
diff --git a/src/app/test/utils/context.test.ts b/src/app/test/utils/context.test.ts
index a65cebd4..90680a52 100644
--- a/src/app/test/utils/context.test.ts
+++ b/src/app/test/utils/context.test.ts
@@ -38,7 +38,7 @@ describe('computeActionItems', () => {
   it('should filter out actions for file items without draft status', () => {
     const fileItem: TreeItem = {
       type: 'file',
-      name: 'test.md'
+      name: 'test.md',
     } as TreeItem
 
     const result = computeActionItems(STUDIO_ITEM_ACTION_DEFINITIONS, fileItem)
diff --git a/src/app/vite.config.ts b/src/app/vite.config.ts
index c68c94c1..0cb13fc0 100644
--- a/src/app/vite.config.ts
+++ b/src/app/vite.config.ts
@@ -99,7 +99,7 @@ export default defineConfig({
     cssCodeSplit: false,
     outDir: '../../dist/app',
     lib: {
-      entry: ['./src/index.ts', './src/utils.ts'],
+      entry: ['./src/index.ts', './src/utils.ts', './src/service-worker.ts'],
       formats: ['es'],
     },
     sourcemap: false,
diff --git a/src/module/src/module.ts b/src/module/src/module.ts
index 351459bf..13d829bc 100644
--- a/src/module/src/module.ts
+++ b/src/module/src/module.ts
@@ -116,14 +116,13 @@ export default defineNuxtModule<ModuleOptions>({
               'const storage = createStorage({})',
               '',
               ...keys.map((key) => {
-                key = `public-assets:${key}`
                 const value = {
-                  id: key,
+                  id: `public-assets/${key.replace(/:/g, '/')}`,
                   extension: key.split('.').pop(),
-                  stem: key.split('.').slice(0, -1).join('.'),
+                  stem: key.split('.').join('.'),
                   path: '/' + key.replace(/:/g, '/'),
                 }
-                return `storage.setItem('${key}', ${JSON.stringify(value)})`
+                return `storage.setItem('${value.id}', ${JSON.stringify(value)})`
               }),
               '',
               'export const publicAssetsStorage = storage',
@@ -147,6 +146,10 @@ export default defineNuxtModule<ModuleOptions>({
       route: '/__nuxt_content/studio',
       handler: runtime('./server/routes/admin'),
     })
+    addServerHandler({
+      route: '/sw.js',
+      handler: runtime('./server/routes/sw'),
+    })
     // addServerHandler({
     //   route: '/__nuxt_content/studio/auth/google',
     //   handler: runtime('./server/routes/auth/google.get'),
diff --git a/src/module/src/runtime/host.ts b/src/module/src/runtime/host.ts
index bb89b511..0487dabc 100644
--- a/src/module/src/runtime/host.ts
+++ b/src/module/src/runtime/host.ts
@@ -211,7 +211,7 @@ export function useStudioHost(user: StudioUser): StudioHost {
         return await publicAssetsStorage.getItem(id) as MediaItem
       },
       getFileSystemPath: (id: string) => {
-        return id.split(':').slice(1).join('/')
+        return id.split('/').slice(1).join('/')
       },
       list: async (): Promise<MediaItem[]> => {
         return await Promise.all(await publicAssetsStorage.getKeys().then(keys => keys.map(key => publicAssetsStorage.getItem(key)))) as MediaItem[]
@@ -260,6 +260,10 @@ export function useStudioHost(user: StudioUser): StudioHost {
       .then((_localDatabaseAdapter) => {
         localDatabaseAdapter = _localDatabaseAdapter
         isMounted.value = true
+      }).then(() => {
+        if ('serviceWorker' in navigator) {
+          navigator.serviceWorker.register('/sw.js')
+        }
       })
   })()
 
diff --git a/src/module/src/runtime/server/routes/sw.ts b/src/module/src/runtime/server/routes/sw.ts
new file mode 100644
index 00000000..3358ef99
--- /dev/null
+++ b/src/module/src/runtime/server/routes/sw.ts
@@ -0,0 +1,7 @@
+import { serviceWorker } from 'nuxt-studio/app/service-worker'
+import { eventHandler, setHeader } from 'h3'
+
+export default eventHandler(async (event) => {
+  setHeader(event, 'Content-Type', 'application/javascript')
+  return serviceWorker()
+})