diff --git a/packages/devtools-ui-kit/src/components/NCodeBlock.vue b/packages/devtools-ui-kit/src/components/NCodeBlock.vue
index 2e7e3ecf1..e1b371ea0 100644
--- a/packages/devtools-ui-kit/src/components/NCodeBlock.vue
+++ b/packages/devtools-ui-kit/src/components/NCodeBlock.vue
@@ -2,17 +2,47 @@
 // This components requires to run in DevTools to render correctly
 import { devToolsClient } from '../runtime/client'
 
-defineProps<{
-  code: string
-  lang?: string
-}>()
+withDefaults(
+  defineProps<{
+    code: string
+    lang?: string
+    lines?: boolean
+  }>(), {
+    lines: true,
+  },
+)
 </script>
 
 <template>
   <template v-if="lang && devToolsClient?.devtools?.renderCodeHighlight">
-    <pre class="n-code-block" v-html="devToolsClient.devtools.renderCodeHighlight(code, lang)" />
+    <pre
+      class="n-code-block"
+      :class="lines ? 'n-code-block-lines' : ''"
+      v-html="devToolsClient.devtools.renderCodeHighlight(code, lang)"
+    />
   </template>
   <template v-else>
-    <pre class="n-code-block" v-text="code" />
+    <pre
+      class="n-code-block"
+      :class="lines ? 'n-code-block-lines' : ''"
+      v-text="code"
+    />
   </template>
 </template>
+
+<style>
+.n-code-block-lines .shiki code {
+  counter-reset: step;
+  counter-increment: step calc(var(--start, 1) - 1);
+}
+.n-code-block-lines .shiki code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 2rem;
+  padding-right: 0.5rem;
+  margin-right: 0.5rem;
+  display: inline-block;
+  text-align: right;
+  --at-apply: text-truegray:50;
+}
+</style>
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index 48ea2725e..167c89d72 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -118,6 +118,9 @@ export const unocssPreset = (): Preset => ({
 
     // icon
     'n-icon': 'flex-none',
+
+    // code
+    'n-code-block': 'dark:bg-[#121212] bg-white',
   },
 })
 
diff --git a/packages/devtools/client/components/AssetDetails.vue b/packages/devtools/client/components/AssetDetails.vue
new file mode 100644
index 000000000..6517bf8fa
--- /dev/null
+++ b/packages/devtools/client/components/AssetDetails.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { useTimeAgo } from '@vueuse/core'
+import type { AssetInfo } from '~/../src/types'
+
+const props = defineProps<{
+  asset: AssetInfo
+}>()
+
+const imageMeta = computedAsync(() => {
+  if (props.asset.type !== 'image')
+    return undefined
+  return rpc.getImageMeta(props.asset.filePath)
+})
+
+const textContent = computedAsync(() => {
+  if (props.asset.type !== 'text')
+    return undefined
+  return rpc.getTextAssetContent(props.asset.filePath)
+})
+
+const codeSnippets = computed(() => {
+  const items: [string, string, string][] = []
+  if (props.asset.type === 'image') {
+    const attrs = imageMeta.value?.width
+      ? ` width="${imageMeta.value.width}" height="${imageMeta.value.height}" `
+      : ' '
+    items.push(
+      ['html', `<nuxt-image${attrs}src="${props.asset.publicPath}" />`, 'with Nuxt Image'],
+      ['html', `<img${attrs}src="${props.asset.publicPath}" />`, 'Image'],
+    )
+    return items
+  }
+
+  items.push(['html', `<a download href="${props.asset.publicPath}">\n  Download ${props.asset.path}\n</a>`, 'Download link'])
+  return items
+})
+
+const copy = useCopy()
+const timeago = useTimeAgo(() => props.asset.mtime)
+const fileSize = computed(() => {
+  const size = props.asset.size
+  if (size < 1024)
+    return `${size} B`
+  if (size < 1024 * 1024)
+    return `${(size / 1024).toFixed(2)} KB`
+  return `${(size / 1024 / 1024).toFixed(2)} MB`
+})
+
+const aspectRatio = computed(() => {
+  if (!imageMeta.value?.width || !imageMeta.value?.height)
+    return ''
+  const gcd = (a: number, b: number): number => {
+    if (!b)
+      return a
+    return gcd(b, a % b)
+  }
+  const ratio = gcd(imageMeta.value.width, imageMeta.value.height)
+  if (ratio > 3)
+    return `${imageMeta.value.width / ratio} : ${imageMeta.value.height / ratio}`
+  return ''
+})
+
+const supportsPreview = computed(() => {
+  return [
+    'image',
+    'text',
+    'video',
+  ].includes(props.asset.type)
+})
+</script>
+
+<template>
+  <div flex="~ col gap-4" w-full of-hidden p2 h-full of-auto>
+    <template v-if="supportsPreview">
+      <div op50 mb--2 flex="~ gap2" items-center>
+        <div x-divider />
+        <div flex-none>
+          Preview
+        </div>
+        <div x-divider />
+      </div>
+
+      <div flex="~" items-center justify-center>
+        <AssetPreview
+          rounded max-h-80 w-auto min-h-20 min-w-20 border="~ base"
+          :asset="asset"
+          :text-content="textContent"
+        />
+      </div>
+    </template>
+
+    <div op50 mb--2 flex="~ gap2" items-center>
+      <div x-divider />
+      <div flex-none>
+        Details
+      </div>
+      <div x-divider />
+    </div>
+
+    <table w-full>
+      <tbody>
+        <tr>
+          <td op50 text-right pr5 w-max ws-nowrap>
+            Filepath
+          </td>
+          <td ws-w>
+            <FilepathItem :filepath="asset.filePath" />
+          </td>
+        </tr>
+        <tr>
+          <td text-right op50 pr5 w-max ws-nowrap>
+            Public
+          </td>
+          <td>{{ asset.publicPath }}</td>
+        </tr>
+        <tr>
+          <td text-right op50 pr5 w-max ws-nowrap>
+            Type
+          </td>
+          <td capitalize>
+            {{ asset.type }}
+          </td>
+        </tr>
+        <template v-if="imageMeta?.width">
+          <tr>
+            <td text-right op50 pr5 w-max ws-nowrap>
+              Image Size
+            </td>
+            <td>{{ imageMeta.width }} x {{ imageMeta.height }}</td>
+          </tr>
+          <tr v-if="aspectRatio">
+            <td text-right op50 pr5 w-max ws-nowrap>
+              Aspect Ratio
+            </td>
+            <td>{{ aspectRatio }}</td>
+          </tr>
+        </template>
+        <tr>
+          <td text-right op50 pr5 w-max ws-nowrap>
+            File size
+          </td>
+          <td>{{ fileSize }}</td>
+        </tr>
+        <tr>
+          <td text-right op50 pr5 w-max ws-nowrap>
+            Last modified
+          </td>
+          <td>{{ new Date(asset.mtime).toLocaleString() }} <span op70>({{ timeago }})</span></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div op50 mb--2 flex="~ gap2" items-center>
+      <div x-divider />
+      <div flex-none>
+        Actions
+      </div>
+      <div x-divider />
+    </div>
+    <div flex="~ gap2 wrap">
+      <NButton icon="i-carbon-code" @click="openInEditor(asset.filePath)">
+        Open in Editor
+      </NButton>
+      <NButton icon="carbon-launch" :to="asset.publicPath" target="_blank">
+        Open in browser
+      </NButton>
+      <NButton icon="carbon-copy" @click="copy(asset.publicPath)">
+        Copy public path
+      </NButton>
+      <!-- <NButton v-if="asset.type === 'image'" disabled icon="carbon-image-service">
+        Optimize image (WIP)
+      </NButton> -->
+    </div>
+
+    <div flex-auto />
+
+    <div v-if="codeSnippets?.length" n-code-block border="~ base rounded">
+      <template v-for="cs, idx of codeSnippets" :key="idx">
+        <div v-if="idx" x-divider />
+        <div v-if="cs" of-hidden p2>
+          <div items-center flex justify-between pb2>
+            <div op50 ml1>
+              {{ cs[2] }}
+            </div>
+            <NButton icon="carbon-copy" n="sm primary" @click="copy(cs[1])">
+              Copy
+            </NButton>
+          </div>
+          <NCodeBlock :code="cs[1]" :lang="cs[0]" of-auto w-full :lines="false" px1 />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/AssetFontPreview.vue b/packages/devtools/client/components/AssetFontPreview.vue
new file mode 100644
index 000000000..d589d1c8c
--- /dev/null
+++ b/packages/devtools/client/components/AssetFontPreview.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { hash } from 'ohash'
+import type { AssetInfo } from '~/../src/types'
+
+const props = defineProps<{
+  asset: AssetInfo
+}>()
+
+const id = computed(() => `devtools-assets-${hash(props.asset)}`)
+
+useStyleTag(computed(() => `
+  @font-face {
+    font-family: '${id.value}';
+    src: url('${props.asset.publicPath}');
+  }
+`))
+</script>
+
+<template>
+  <div of-hidden :style="{ fontFamily: `'${id}'` }">
+    Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
+  </div>
+</template>
diff --git a/packages/devtools/client/components/AssetGridItem.vue b/packages/devtools/client/components/AssetGridItem.vue
new file mode 100644
index 000000000..e61fc4bcb
--- /dev/null
+++ b/packages/devtools/client/components/AssetGridItem.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AssetInfo } from '~/../src/types'
+
+const props = defineProps<{
+  asset: AssetInfo
+  folder?: string
+}>()
+
+const path = computed(() => {
+  if (props.folder && props.asset.path.startsWith(props.folder))
+    return props.asset.path.slice(props.folder.length)
+  return props.asset.path
+})
+</script>
+
+<template>
+  <button flex="~ col gap-1" hover="bg-active" rounded p2 of-hidden items-center>
+    <AssetPreview rounded w-30 h-30 border="~ base" :asset="asset" />
+    <div of-hidden w-full text-center ws-nowrap truncate text-xs>
+      {{ path }}
+    </div>
+  </button>
+</template>
diff --git a/packages/devtools/client/components/AssetListItem.vue b/packages/devtools/client/components/AssetListItem.vue
new file mode 100644
index 000000000..386282388
--- /dev/null
+++ b/packages/devtools/client/components/AssetListItem.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { AssetInfo } from '~/../src/types'
+
+const props = defineProps<{
+  asset: AssetInfo
+}>()
+
+const icon = computed(() => {
+  if (props.asset.type === 'image')
+    return 'i-carbon-image'
+  if (props.asset.type === 'video')
+    return 'i-carbon-video'
+  if (props.asset.type === 'audio')
+    return 'i-carbon-volume-up'
+  if (props.asset.type === 'font')
+    return 'i-carbon-text-small-caps'
+  if (props.asset.type === 'text')
+    return 'i-carbon-document'
+  if (props.asset.type === 'json')
+    return 'i-carbon-json'
+  return 'i-carbon-document-blank'
+})
+</script>
+
+<template>
+  <button flex="~ gap-1" w-full items-center hover="bg-active" rounded px4 py2>
+    <div :class="icon" />
+    <div text-center ws-nowrap of-hidden truncate>
+      {{ asset.path }}
+    </div>
+  </button>
+</template>
diff --git a/packages/devtools/client/components/AssetPreview.vue b/packages/devtools/client/components/AssetPreview.vue
new file mode 100644
index 000000000..67380d4c9
--- /dev/null
+++ b/packages/devtools/client/components/AssetPreview.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { AssetInfo } from '~/../src/types'
+
+defineProps<{
+  asset: AssetInfo
+  textContent?: string
+}>()
+</script>
+
+<template>
+  <div flex items-center of-hidden justify-center p1 bg-active object-cover>
+    <template v-if="asset.type === 'image'">
+      <img :src="asset.publicPath">
+    </template>
+    <AssetFontPreview v-else-if="asset.type === 'font'" :key="asset.publicPath" :asset="asset" p2 self-stretch text-2xl />
+    <div v-else-if="asset.type === 'text' && !textContent" op20 text-3xl i-carbon-document />
+    <div v-else-if="asset.type === 'text' && textContent" w-full p4 self-start>
+      <pre of-hidden text-xs font-mono max-h-10rem v-text="textContent" />
+    </div>
+    <div v-else op20 text-3xl i-carbon-help />
+  </div>
+</template>
diff --git a/packages/devtools/client/components/ComponentDetails.vue b/packages/devtools/client/components/ComponentDetails.vue
index 30b76d43e..650809b3c 100644
--- a/packages/devtools/client/components/ComponentDetails.vue
+++ b/packages/devtools/client/components/ComponentDetails.vue
@@ -14,7 +14,7 @@ const copy = useCopy()
 </script>
 
 <template>
-  <div flex="~ col gap1">
+  <div flex="~ col gap1" of-hidden items-start>
     <div flex="~ gap2">
       <div>
         <ComponentName :component="component" />
@@ -32,7 +32,7 @@ const copy = useCopy()
     <FilepathItem
       v-if="filePath"
       :filepath="filePath"
-      text-sm op25 group-hover:op75
+      w-full text-sm op25 group-hover:op75
     />
     <slot />
   </div>
diff --git a/packages/devtools/client/components/ComponentsGraph.vue b/packages/devtools/client/components/ComponentsGraph.vue
index 549f9b0f9..822d291e7 100644
--- a/packages/devtools/client/components/ComponentsGraph.vue
+++ b/packages/devtools/client/components/ComponentsGraph.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
 }>()
 
 const container = ref<HTMLElement>()
+const navbar = ref<HTMLElement>()
 const colorMode = useColorMode()
 
 const selected = ref<{
@@ -181,7 +182,7 @@ function setFilter() {
 </script>
 
 <template>
-  <div p4 flex="~ gap4" flex-1 border="b base" navbar-glass absolute left-0 top-0 right-0 h-60px>
+  <div p4 flex="~ gap4" flex-1 border="b base" navbar-glass absolute left-0 top-0 right-0 :navbar="navbar">
     <NCheckbox v-model="showPages" n="primary sm">
       <span op75>Show pages</span>
     </NCheckbox>
@@ -194,7 +195,7 @@ function setFilter() {
     <NCheckbox v-model="showNodeModules" n="primary sm">
       <span op75>Show node_modules</span>
     </NCheckbox>
-    <button v-if="selectedFilter" flex="~ gap-1" items-center py1 bg-gray:20 pl3 pr2 rounded-full text-xs op50 hover:op100 @click="selectedFilter = undefined">
+    <button v-if="selectedFilter" flex="~ gap-1" items-center op50 text-xs py1 bg-gray:20 pl3 pr2 rounded-full hover:op100 @click="selectedFilter = undefined">
       Clear filter <div i-carbon-close />
     </button>
     <div flex-auto />
@@ -203,28 +204,18 @@ function setFilter() {
 
   <div w-full h-full relative>
     <div ref="container" w-full h-full />
-    <Transition
-      enter-active-class="duration-200 ease-in"
-      enter-from-class="transform translate-x-1/1"
-      enter-to-class="opacity-100"
-      leave-active-class="duration-200 ease-out"
-      leave-from-class="opacity-100"
-      leave-to-class="transform translate-x-1/1"
+    <DrawerRight
+      :model-value="!!(selected && selected.component)"
+      :navbar="navbar"
+      w-80
+      @close="selected = undefined"
     >
-      <div
-        v-if="selected && selected.component"
-        border="l base"
-        flex="~ col gap-1" navbar-glass
-        text-sm items-center absolute right-0 p2 bottom-0 top-60px
-      >
-        <button n-icon-btn absolute text-xl right-2 top-2 @click="selected = undefined">
-          <div i-carbon-close />
-        </button>
-        <ComponentDetails :component="selected.component" p4 />
+      <div v-if="selected && selected.component" p4 pt6 flex="~ col gap4">
+        <ComponentDetails :component="selected.component" />
         <NButton n="primary solid" @click="setFilter()">
           Filter to this component
         </NButton>
       </div>
-    </Transition>
+    </DrawerRight>
   </div>
 </template>
diff --git a/packages/devtools/client/components/DisconnectIndicator.vue b/packages/devtools/client/components/DisconnectIndicator.vue
index 23a266104..913c6eba1 100644
--- a/packages/devtools/client/components/DisconnectIndicator.vue
+++ b/packages/devtools/client/components/DisconnectIndicator.vue
@@ -5,7 +5,7 @@
   <div
     v-if="wsError || wsConnecting"
     border="t base"
-    bottom-0 left-0 right-0 fixed p5 glass-effect z-10
+    left-0 right-0 bottom-0 fixed p5 glass-effect z-200
   >
     <div v-if="wsError" flex="~ gap-2" items-center text-rose>
       <NIcon icon="i-carbon-wifi-off" />
diff --git a/packages/devtools/client/components/DrawerRight.vue b/packages/devtools/client/components/DrawerRight.vue
new file mode 100644
index 000000000..ebf648e15
--- /dev/null
+++ b/packages/devtools/client/components/DrawerRight.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+  navbar?: HTMLElement
+  autoClose?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const el = ref<HTMLElement>()
+
+const { height: top } = useElementSize(() => props.navbar, undefined, { box: 'border-box' })
+
+onClickOutside(el, () => {
+  if (props.modelValue && props.autoClose)
+    emit('close')
+}, {
+  ignore: ['a', 'button', 'summary'],
+})
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <Transition
+    enter-active-class="duration-200 ease-in"
+    enter-from-class="transform translate-x-1/1"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-200 ease-out"
+    leave-from-class="opacity-100"
+    leave-to-class="transform translate-x-1/1"
+  >
+    <div
+      v-if="modelValue"
+      ref="el"
+      border="l base"
+      flex="~ col gap-1"
+      p2 of-auto right-0 text-sm absolute bottom-0 glass-effect z-10 z-20
+      :style="{ top: `${top}px` }"
+      v-bind="$attrs"
+    >
+      <button absolute n-icon-btn text-xl right-2 top-2 @click="$emit('close')">
+        <div i-carbon-close />
+      </button>
+      <slot />
+    </div>
+  </Transition>
+</template>
diff --git a/packages/devtools/client/components/FilepathItem.vue b/packages/devtools/client/components/FilepathItem.vue
index 7c9c04886..0ebffdd5a 100644
--- a/packages/devtools/client/components/FilepathItem.vue
+++ b/packages/devtools/client/components/FilepathItem.vue
@@ -12,10 +12,8 @@ const short = computed(() => (props.filepath && config.value)
 
 <template>
   <button
-    font-mono
-    hover:underline
-    ws-nowrap
-    of-hidden
+    ws-nowrap of-hidden font-mono hover:underline truncate
+    :title="filepath"
     @click="openInEditor(filepath)"
   >
     {{ short }}
diff --git a/packages/devtools/client/components/Drawer.vue b/packages/devtools/client/components/SideNav.vue
similarity index 78%
rename from packages/devtools/client/components/Drawer.vue
rename to packages/devtools/client/components/SideNav.vue
index 0925f3904..5a5d3cb48 100644
--- a/packages/devtools/client/components/Drawer.vue
+++ b/packages/devtools/client/components/SideNav.vue
@@ -4,8 +4,8 @@ const tabs = useTabs()
 </script>
 
 <template>
-  <div border="r base" flex="~ col gap-0.5" items-center justify-center h-full>
-    <div flex="~" items-center sticky top-0 z-1 pt3 pb2>
+  <div border="r base" flex="~ col gap-0.5" h-full items-center z-100 bg-base>
+    <div flex="~ col" items-center bg-base top-0 sticky z-1 pt3 mb1>
       <VDropdown placement="left-start" :distance="20">
         <button
 
@@ -17,18 +17,18 @@ const tabs = useTabs()
           <DockingPanel />
         </template>
       </VDropdown>
-    </div>
 
-    <div h-1px my1 w-8 border="b base" />
+      <div h-1px w-8 mt-2 border="b base" />
+    </div>
 
-    <DrawerItem
+    <SideNavItem
       v-for="tab of tabs.builtin.value"
       :key="tab.name"
       :tab="tab"
     />
     <template v-if="tabs.custom.value.length">
       <div h-1px w-8 my1 border="b base" />
-      <DrawerItem
+      <SideNavItem
         v-for="tab of tabs.custom.value"
         :key="tab.name"
         :tab="tab"
diff --git a/packages/devtools/client/components/DrawerItem.vue b/packages/devtools/client/components/SideNavItem.vue
similarity index 93%
rename from packages/devtools/client/components/DrawerItem.vue
rename to packages/devtools/client/components/SideNavItem.vue
index 125d0e758..c3ef11e0f 100644
--- a/packages/devtools/client/components/DrawerItem.vue
+++ b/packages/devtools/client/components/SideNavItem.vue
@@ -20,7 +20,7 @@ const isEnabled = computed(() => {
       :to="'path' in tab ? tab.path : `/modules/custom-${tab.name}`"
       flex="~"
       hover="bg-active"
-      items-center justify-center w-10 p1 text-secondary select-none rounded-xl h-10
+      items-center justify-center p1 w-10 text-secondary select-none rounded-xl h-10
       exact-active-class="!text-primary bg-active"
     >
       <TabIcon
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 787f3b61d..245fd65a8 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -37,8 +37,8 @@ export function useComponents() {
   ].sort((a, b) => a.pascalName.localeCompare(b.pascalName)))
 }
 
-export function usePackageVersions() {
-  return useAsyncState('usePackageVersions', () => rpc.usePackageVersions())
+export function getPackageVersions() {
+  return useAsyncState('getPackageVersions', () => rpc.getPackageVersions())
 }
 
 export function useServerPages() {
@@ -63,6 +63,10 @@ export function useAutoImports() {
   return useAsyncState('getAutoImports', () => rpc.getAutoImports())
 }
 
+export function useStaticAssets() {
+  return useAsyncState('getStaticAssets', () => rpc.getStaticAssets())
+}
+
 export function useServerConfig() {
   return useAsyncState('getServerConfig', () => rpc.getServerConfig())
 }
diff --git a/packages/devtools/client/layouts/default.vue b/packages/devtools/client/layouts/default.vue
index b9efcc47d..6c9c9e379 100644
--- a/packages/devtools/client/layouts/default.vue
+++ b/packages/devtools/client/layouts/default.vue
@@ -4,7 +4,7 @@ const waiting = computed(() => !client.value && !showConnectionWarning.value)
 </script>
 
 <template>
-  <div of-hidden bg-base h-screen font-sans>
+  <div bg-base of-hidden h-screen font-sans>
     <Notification />
     <div v-if="waiting" h-full w-full flex>
       <div flex="~ col" text-lg items-center ma animate-pulse>
@@ -13,7 +13,7 @@ const waiting = computed(() => !client.value && !showConnectionWarning.value)
       </div>
     </div>
     <div v-else grid="~ cols-[50px_1fr]" h-full of-hidden>
-      <Drawer of-auto />
+      <SideNav of-auto />
       <div h-full of-auto>
         <slot />
       </div>
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
new file mode 100644
index 000000000..d03d71378
--- /dev/null
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
+import Fuse from 'fuse.js'
+import type { AssetInfo } from '~/../src/types'
+
+definePageMeta({
+  icon: 'carbon-image-copy',
+  title: 'Assets',
+})
+
+const assets = useStaticAssets()
+const search = ref('')
+
+const fuse = computed(() => new Fuse(assets.value || [], {
+  keys: [
+    'path',
+  ],
+}))
+
+const filtered = computed(() => {
+  const result = search.value
+    ? fuse.value.search(search.value).map(i => i.item)
+    : (assets.value || [])
+  return result
+})
+
+const byFolders = computed(() => {
+  const result: Record<string, AssetInfo[]> = {}
+  for (const asset of filtered.value) {
+    const folder = `${asset.path.split('/').slice(0, -1).join('/')}/`
+    if (!result[folder])
+      result[folder] = []
+    result[folder].push(asset)
+  }
+  return Object.entries(result).sort(([a], [b]) => a.localeCompare(b))
+})
+
+const selected = ref<AssetInfo>()
+
+const view = ref<'list' | 'grid'>('grid')
+
+function toggleView() {
+  view.value = view.value === 'list' ? 'grid' : 'list'
+}
+
+onKeyDown('Escape', () => {
+  selected.value = undefined
+})
+
+const navbar = ref<HTMLElement>()
+</script>
+
+<template>
+  <div h-full of-auto>
+    <div ref="navbar" flex="~ col gap-2" border="b base" p4 navbar-glass flex-1 pb2>
+      <div flex="~ gap4">
+        <NTextInput
+          v-model="search"
+          placeholder="Search..."
+          icon="carbon-search"
+          flex-auto
+          p="x5 y2"
+          n="primary"
+        />
+        <div flex-none flex="~ gap4">
+          <button
+            title="Toggle view"
+            @click="toggleView"
+          >
+            <NIcon v-if="view === 'grid'" icon="i-carbon-list" />
+            <NIcon v-else icon="i-carbon-grid" />
+          </button>
+        </div>
+      </div>
+      <div op50>
+        <span v-if="search">{{ filtered.length }} matched · </span>
+        <span>{{ assets?.length }} assets in total</span>
+      </div>
+    </div>
+
+    <template v-if="view === 'grid'">
+      <template v-if="byFolders.length > 1">
+        <NSectionBlock
+          v-for="[folder, items] of byFolders"
+          :key="folder"
+          :text="folder"
+          :description="`${items.length} items`"
+          :open="items.length < 30"
+          :padding="false"
+        >
+          <div px2 mt--4 grid="~ cols-minmax-8rem">
+            <AssetGridItem v-for="a of items" :key="a.path" :asset="a" :folder="folder" @click="selected = a" />
+          </div>
+        </NSectionBlock>
+      </template>
+      <div v-else p2 grid="~ cols-minmax-8rem">
+        <AssetGridItem v-for="a of filtered" :key="a.path" :asset="a" @click="selected = a" />
+      </div>
+    </template>
+    <div v-else>
+      <AssetListItem v-for="a of filtered" :key="a.path" :asset="a" @click="selected = a" />
+    </div>
+    <DrawerRight
+      :model-value="!!selected"
+      w-120
+      auto-close
+      :navbar="navbar"
+      @close="selected = undefined"
+    >
+      <AssetDetails v-if="selected" :asset="selected" px2 h-full of-auto />
+    </DrawerRight>
+  </div>
+</template>
diff --git a/packages/devtools/client/pages/modules/overview.vue b/packages/devtools/client/pages/modules/overview.vue
index 5ae215d2f..864c75a77 100644
--- a/packages/devtools/client/pages/modules/overview.vue
+++ b/packages/devtools/client/pages/modules/overview.vue
@@ -9,7 +9,7 @@ definePageMeta({
 
 const client = useClient()
 const config = useServerConfig()
-const versions = usePackageVersions()
+const versions = getPackageVersions()
 const components = useComponents()
 const autoImports = useAutoImports()
 const routes = useAllRoutes()
@@ -52,7 +52,7 @@ function goIntro() {
       <!-- Main Grid -->
       <div flex="~ gap2 wrap">
         <div v-if="nuxtVersion" p4 theme-card-green flex="~ col auto">
-          <div logos-nuxt-icon text-3xl />
+          <div text-3xl logos-nuxt-icon />
           <code>{{ `v${nuxtVersion.current}` }}</code>
           <template v-if="nuxtVersion.latest">
             <Badge
diff --git a/packages/devtools/client/styles/global.css b/packages/devtools/client/styles/global.css
index d8b429d72..9edaab860 100644
--- a/packages/devtools/client/styles/global.css
+++ b/packages/devtools/client/styles/global.css
@@ -7,22 +7,6 @@ html.dark {
   color-scheme: dark;
 }
 
-.shiki code {
-  counter-reset: step;
-  counter-increment: step calc(var(--start, 1) - 1);
-}
-
-.shiki code .line::before {
-  content: counter(step);
-  counter-increment: step;
-  width: 2rem;
-  padding-right: 0.5rem;
-  margin-right: 0.5rem;
-  display: inline-block;
-  text-align: right;
-  --at-apply: text-truegray:50;
-}
-
 /* Overrides Floating Vue */
 .v-popper--theme-dropdown .v-popper__inner,
 .v-popper--theme-tooltip .v-popper__inner {
diff --git a/packages/devtools/client/unocss.config.ts b/packages/devtools/client/unocss.config.ts
index fc7ee7e96..14853a264 100644
--- a/packages/devtools/client/unocss.config.ts
+++ b/packages/devtools/client/unocss.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
       'bg-base': 'n-bg-base',
       'bg-active': 'n-bg-active',
       'border-base': 'n-border-base',
-      'glass-effect': 'backdrop-blur-6 bg-white/70 dark:bg-[#151515]/70',
+      'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#151515]/90',
       'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
       'text-secondary': 'color-black/50 dark:color-white/50',
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index f4720bfb6..ca662d095 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -55,8 +55,10 @@
     "birpc": "^0.2.5",
     "consola": "^2.15.3",
     "execa": "^7.0.0",
+    "fast-glob": "^3.2.12",
     "h3": "^1.5.0",
     "hookable": "^5.4.2",
+    "image-meta": "^0.1.1",
     "is-installed-globally": "^0.4.0",
     "launch-editor": "^2.6.0",
     "pacote": "^15.1.1",
@@ -92,6 +94,7 @@
     "nuxt": "^3.2.3",
     "nuxt-vitest": "^0.6.6",
     "ofetch": "^1.0.1",
+    "ohash": "^1.0.0",
     "picocolors": "^1.0.0",
     "semver": "^7.3.8",
     "shiki": "^0.14.1",
diff --git a/packages/devtools/src/npm/index.ts b/packages/devtools/src/npm/index.ts
index 53c23b8b9..dead96262 100644
--- a/packages/devtools/src/npm/index.ts
+++ b/packages/devtools/src/npm/index.ts
@@ -23,7 +23,7 @@ export async function checkForUpdateOf(info: UpdateInfo): Promise<Required<Updat
   }
 }
 
-export function usePackageVersions(): UpdateInfo[] {
+export function getPackageVersions(): UpdateInfo[] {
   return [
     { name: 'nuxt', current: getNuxtVersion() },
     { name: '@nuxt/devtools-edge', current: devToolsVersion },
@@ -31,7 +31,7 @@ export function usePackageVersions(): UpdateInfo[] {
 }
 
 export async function checkForUpdates() {
-  const versions = usePackageVersions()
+  const versions = getPackageVersions()
   const updates = await Promise.all(versions.map(checkForUpdateOf))
   return updates
 }
diff --git a/packages/devtools/src/rpc.ts b/packages/devtools/src/rpc.ts
index d1a336af1..239f095ba 100644
--- a/packages/devtools/src/rpc.ts
+++ b/packages/devtools/src/rpc.ts
@@ -1,4 +1,5 @@
 import { existsSync } from 'node:fs'
+import fs from 'node:fs/promises'
 import type { TinyWSRequest } from 'tinyws'
 import type { NodeIncomingMessage, NodeServerResponse } from 'h3'
 import type { WebSocket } from 'ws'
@@ -7,20 +8,22 @@ import type { ChannelOptions } from 'birpc'
 import c from 'picocolors'
 import type { Storage, StorageValue } from 'unstorage'
 import type { StorageMounts } from 'nitropack'
+import fg from 'fast-glob'
+import { imageMeta } from 'image-meta'
 
 import { parse, stringify } from 'flatted'
 import type { Component, Nuxt, NuxtApp, NuxtPage } from 'nuxt/schema'
 import type { Import, Unimport } from 'unimport'
 import { resolvePreset } from 'unimport'
-import { resolve } from 'pathe'
+import { join, resolve } from 'pathe'
 import { logger } from '@nuxt/kit'
-import type { ClientFunctions, HookInfo, ModuleCustomTab, ServerFunctions, UpdateInfo } from './types'
+import type { AssetType, ClientFunctions, HookInfo, ImageMeta, ModuleCustomTab, ServerFunctions, UpdateInfo } from './types'
 import { setupHooksDebug } from './runtime/shared/hooks'
 import type { ModuleOptions } from './module'
 import type { WizardActions } from './wizard'
 import { wizard } from './wizard'
 import { LOG_PREFIX } from './logger'
-import { checkForUpdates, usePackageVersions } from './npm'
+import { checkForUpdates, getPackageVersions } from './npm'
 
 const IGNORE_STORAGE_MOUNTS = ['root', 'build', 'src', 'cache']
 const shouldIgnoreStorageKey = (key: string) => IGNORE_STORAGE_MOUNTS.includes(key.split(':')[0])
@@ -32,22 +35,26 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
   const serverPages: NuxtPage[] = []
   const iframeTabs: ModuleCustomTab[] = []
   const serverHooks: Record<string, HookInfo> = setupHooksDebug(nuxt.hooks)
-  let storage: Storage | undefined
   const storageMounts: StorageMounts = {}
+
+  let storage: Storage | undefined
   let unimport: Unimport | undefined
   let app: NuxtApp | undefined
 
   let checkForUpdatePromise: Promise<any> | undefined
-  let versions: UpdateInfo[] = usePackageVersions()
+  let versions: UpdateInfo[] = getPackageVersions()
 
   const customTabs: ModuleCustomTab[] = []
-  if (options.customTabs?.length)
-    customTabs.push(...options.customTabs)
-
   const serverFunctions = {} as ServerFunctions
   const clients = new Set<WebSocket>()
   const birpc = createBirpcGroup<ClientFunctions>(serverFunctions, [])
 
+  const _imageMetaCache = new Map<string, ImageMeta | undefined>()
+
+  // Add static custom tabs from the config
+  if (options.customTabs?.length)
+    customTabs.push(...options.customTabs)
+
   function refresh(event: keyof ServerFunctions) {
     birpc.broadcast.refresh.asEvent(event)
   }
@@ -141,10 +148,10 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     getServerHooks() {
       return Object.values(serverHooks)
     },
-    usePackageVersions() {
+    getPackageVersions() {
       checkForUpdatePromise = checkForUpdatePromise || checkForUpdates().then((v) => {
         versions = v
-        refresh('usePackageVersions')
+        refresh('getPackageVersions')
       })
       return versions
     },
@@ -164,16 +171,16 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
         suffix = match[2]
       }
 
-      // search for existing file
-      const file = [
+      // search for existing path
+      const path = [
         input,
         `${input}.js`,
         `${input}.mjs`,
         `${input}.ts`,
       ].find(i => existsSync(i))
-      if (file) {
+      if (path) {
         // @ts-expect-error missin types
-        await import('launch-editor').then(r => (r.default || r)(file + suffix))
+        await import('launch-editor').then(r => (r.default || r)(path + suffix))
       }
       else {
         console.error('File not found:', input)
@@ -200,7 +207,65 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
       nuxt.callHook('devtools:customTabs:refresh')
       return true
     },
+    async getStaticAssets() {
+      const dir = resolve(nuxt.options.srcDir, nuxt.options.dir.public)
+      const baseURL = nuxt.options.app.baseURL
+      const files = await fg(['**/*'], {
+        cwd: dir,
+        onlyFiles: true,
+      })
 
+      function guessType(path: string): AssetType {
+        if (/\.(png|jpe?g|gif|svg|webp|avif|ico|bmp|tiff?)$/i.test(path))
+          return 'image'
+        if (/\.(mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|ts|mts|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)$/i.test(path))
+          return 'video'
+        if (/\.(mp3|wav|ogg|flac|aac|wma|alac|ape|ac3|dts|tta|opus|amr|aiff|au|mid|midi|ra|rm|wv|weba|dss|spx|vox|tak|dsf|dff|dsd|cda)$/i.test(path))
+          return 'audio'
+        if (/\.(woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)/i.test(path))
+          return 'font'
+        if (/\.(json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown)/i.test(path))
+          return 'text'
+        return 'other'
+      }
+
+      return await Promise.all(files.map(async (path) => {
+        const filePath = resolve(dir, path)
+        const stat = await fs.lstat(filePath)
+        return {
+          path,
+          publicPath: join(baseURL, path),
+          filePath,
+          type: guessType(path),
+          size: stat.size,
+          mtime: stat.mtimeMs,
+        }
+      }))
+    },
+    async getImageMeta(filepath: string) {
+      if (_imageMetaCache.has(filepath))
+        return _imageMetaCache.get(filepath)
+      try {
+        const meta = imageMeta(await fs.readFile(filepath)) || undefined
+        _imageMetaCache.set(filepath, meta)
+        return meta
+      }
+      catch (e) {
+        _imageMetaCache.set(filepath, undefined)
+        console.error(e)
+        return undefined
+      }
+    },
+    async getTextAssetContent(filepath: string, limit = 300) {
+      try {
+        const content = await fs.readFile(filepath, 'utf-8')
+        return content.slice(0, limit)
+      }
+      catch (e) {
+        console.error(e)
+        return undefined
+      }
+    },
   } satisfies ServerFunctions)
 
   // Nuxt Hooks to collect data
@@ -226,7 +291,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
       page.children?.forEach(searchChildren)
     }
     v.forEach(searchChildren)
-    serverPages.push(...Array.from(pagesSet).sort((a, b) => a.file.localeCompare(b.file)))
+    serverPages.push(...Array.from(pagesSet).sort((a, b) => a.path.localeCompare(b.path)))
 
     refresh('getServerPages')
   })
diff --git a/packages/devtools/src/types/client-api.ts b/packages/devtools/src/types/client-api.ts
index 33290d208..2bc562905 100644
--- a/packages/devtools/src/types/client-api.ts
+++ b/packages/devtools/src/types/client-api.ts
@@ -50,7 +50,7 @@ export interface NuxtDevtoolsHostClient {
 
 export interface NuxtDevtoolsClient {
   rpc: BirpcReturn<ServerFunctions>
-  renderCodeHighlight: (code: string, lang: string, theme?: string) => string
+  renderCodeHighlight: (code: string, lang: string, lines?: boolean, theme?: string) => string
   renderMarkdown: (markdown: string) => string
   colorMode: string
 }
diff --git a/packages/devtools/src/types/integrations.ts b/packages/devtools/src/types/integrations.ts
index 75fcedfb1..ac4f48973 100644
--- a/packages/devtools/src/types/integrations.ts
+++ b/packages/devtools/src/types/integrations.ts
@@ -1,6 +1,9 @@
 import type { Import, UnimportMeta } from 'unimport'
 import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
 import type { RouteRecordNormalized } from 'vue-router'
+import type { imageMeta } from 'image-meta'
+
+export type ImageMeta = ReturnType<typeof imageMeta> extends infer T | void ? T : never
 
 export interface UpdateInfo {
   name: string
@@ -79,3 +82,14 @@ export interface HookInfo {
 }
 
 export type VueInspectorData = VueInspectorClient['linkParams'] & VueInspectorClient['position']
+
+export type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'other'
+
+export interface AssetInfo {
+  path: string
+  type: AssetType
+  publicPath: string
+  filePath: string
+  size: number
+  mtime: number
+}
diff --git a/packages/devtools/src/types/rpc.ts b/packages/devtools/src/types/rpc.ts
index 2cc03e3f6..b379c1c1c 100644
--- a/packages/devtools/src/types/rpc.ts
+++ b/packages/devtools/src/types/rpc.ts
@@ -4,15 +4,11 @@ import type { StorageValue } from 'unstorage'
 import type { Component } from 'vue'
 import type { WizardActions, WizardArgs } from '../wizard'
 import type { ModuleCustomTab } from './custom-tabs'
-import type { AutoImportsWithMetadata, HookInfo, UpdateInfo } from './integrations'
+import type { AssetInfo, AutoImportsWithMetadata, HookInfo, ImageMeta, UpdateInfo } from './integrations'
 import type { ComponentRelationship } from './module'
 
 export interface ServerFunctions {
-  getStorageMounts(): Promise<StorageMounts>
-  getStorageKeys(base?: string): Promise<string[]>
-  getStorageItem(key: string): Promise<StorageValue>
-  setStorageItem(key: string, value: StorageValue): Promise<void>
-  removeStorageItem(key: string): Promise<void>
+  // Static RPCs (can be provide on production build in the future)
   getServerConfig(): NuxtOptions
   getComponents(): Component[]
   getComponentsRelationships(): Promise<ComponentRelationship[]>
@@ -21,7 +17,21 @@ export interface ServerFunctions {
   getCustomTabs(): ModuleCustomTab[]
   getServerHooks(): HookInfo[]
   getServerLayouts(): NuxtLayout[]
-  usePackageVersions(): UpdateInfo[]
+  getStaticAssets(): Promise<AssetInfo[]>
+  getPackageVersions(): UpdateInfo[]
+
+  // Storage
+  getStorageMounts(): Promise<StorageMounts>
+  getStorageKeys(base?: string): Promise<string[]>
+  getStorageItem(key: string): Promise<StorageValue>
+  setStorageItem(key: string, value: StorageValue): Promise<void>
+  removeStorageItem(key: string): Promise<void>
+
+  // Queries
+  getImageMeta(filepath: string): Promise<ImageMeta | undefined>
+  getTextAssetContent(filepath: string, limit?: number): Promise<string | undefined>
+
+  // Actions
   customTabAction(name: string, action: number): Promise<boolean>
   runWizard<T extends WizardActions>(name: T, ...args: WizardArgs<T>): Promise<void>
   openInEditor(filepath: string): void
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b54cf2c95..0cbe9ce93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,6 +87,7 @@ importers:
       consola: ^2.15.3
       esno: ^0.16.3
       execa: ^7.0.0
+      fast-glob: ^3.2.12
       flatted: ^3.2.7
       floating-vue: 2.0.0-beta.20
       fuse.js: ^6.6.2
@@ -94,6 +95,7 @@ importers:
       global-dirs: ^3.0.1
       h3: ^1.5.0
       hookable: ^5.4.2
+      image-meta: ^0.1.1
       is-installed-globally: ^0.4.0
       json-editor-vue: ^0.10.5
       launch-editor: ^2.6.0
@@ -101,6 +103,7 @@ importers:
       nuxt: ^3.2.3
       nuxt-vitest: ^0.6.6
       ofetch: ^1.0.1
+      ohash: ^1.0.0
       pacote: ^15.1.1
       pathe: ^1.1.0
       picocolors: ^1.0.0
@@ -131,8 +134,10 @@ importers:
       birpc: 0.2.5
       consola: 2.15.3
       execa: 7.0.0
+      fast-glob: 3.2.12
       h3: 1.5.0
       hookable: 5.4.2
+      image-meta: 0.1.1
       is-installed-globally: 0.4.0
       launch-editor: 2.6.0
       pacote: 15.1.1
@@ -168,6 +173,7 @@ importers:
       nuxt: 3.2.3_ebmhceqxtb6o6vbzh6kcrsm5gi
       nuxt-vitest: 0.6.6_yvegwsl5vqegbbjcry3pb53664
       ofetch: 1.0.1
+      ohash: 1.0.0
       picocolors: 1.0.0
       semver: 7.3.8
       shiki: 0.14.1
@@ -6367,6 +6373,11 @@ packages:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
 
+  /image-meta/0.1.1:
+    resolution: {integrity: sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==}
+    engines: {node: '>=10.18.0'}
+    dev: false
+
   /import-fresh/3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}