diff --git a/packages/client/composables/useDynamicVirtualList.ts b/packages/client/composables/useDynamicVirtualList.ts
new file mode 100644
index 0000000000..f1ac96e79a
--- /dev/null
+++ b/packages/client/composables/useDynamicVirtualList.ts
@@ -0,0 +1,30 @@
+import type { UseVirtualListOptions } from '@vueuse/core'
+import { debouncedWatch, useVirtualList } from '@vueuse/core'
+import type { MaybeRef } from 'vue'
+import { effectScope, shallowRef } from 'vue'
+
+/**
+ * `useVirtualList`'s `itemHeight` is not reactive, so we need to re-create the virtual list when the card height changes.
+ */
+export function useDynamicVirtualList<T>(list: MaybeRef<T[]>, getOptions: () => UseVirtualListOptions) {
+  type VirtualListReturn = ReturnType<typeof useVirtualList<T>>
+  const virtualList = shallowRef<VirtualListReturn>()
+  debouncedWatch(
+    getOptions,
+    (options, _oldOptions, onCleanup) => {
+      const scope = effectScope()
+      scope.run(() => {
+        virtualList.value = useVirtualList(
+          list,
+          options,
+        )
+      })
+      onCleanup(() => scope.stop())
+    },
+    {
+      immediate: true,
+      debounce: 50,
+    },
+  )
+  return virtualList
+}
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 41f0db1d6a..5be7176d7d 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
+import { useElementSize, useEventListener } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import { breakpoints, showOverview, windowSize } from '../state'
+import { breakpoints, showOverview } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
 import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
-import { pathPrefix } from '../env'
+import { pathPrefix, slideAspect } from '../env'
+import { useDynamicVirtualList } from '../composables/useDynamicVirtualList'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
@@ -23,29 +24,39 @@ function go(page: number) {
   close()
 }
 
-function focus(page: number) {
-  if (page === currentOverviewPage.value)
-    return true
-  return false
-}
-
 const xs = breakpoints.smaller('xs')
-const sm = breakpoints.smaller('sm')
 
-const padding = 4 * 16 * 2
-const gap = 2 * 16
+const gapX = 2 * 16
+const gapY = 4 * 8 // mb-8
+
+const containerEl = ref<HTMLElement>()
+const { width: containerWidth } = useElementSize(containerEl)
+
 const cardWidth = computed(() => {
-  if (xs.value)
-    return windowSize.width.value - padding
-  else if (sm.value)
-    return (windowSize.width.value - padding - gap) / 2
-  return 300
+  return xs.value
+    ? containerWidth.value
+    : Math.min(300, (containerWidth.value - gapX) / 2)
 })
 
-const rowCount = computed(() => {
-  return Math.floor((windowSize.width.value - padding) / (cardWidth.value + gap))
+const numOfCols = computed(() => {
+  return xs.value
+    ? 1
+    : Math.floor((containerWidth.value + gapX) / (cardWidth.value + gapX))
 })
 
+const cardHeight = computed(() => cardWidth.value / slideAspect.value)
+
+const virtualList = useDynamicVirtualList(slides, () => ({
+  itemHeight: (i) => {
+    if (i === slides.value.length - 1)
+      return cardHeight.value + 2
+    if (i % numOfCols.value === numOfCols.value - 1)
+      return cardHeight.value + gapY + 2
+    return 0
+  },
+  overscan: 4 * numOfCols.value,
+}))
+
 const keyboardBuffer = ref<string>('')
 
 useEventListener('keypress', (e) => {
@@ -96,7 +107,7 @@ watchEffect(() => {
   // we focus on the right page.
   currentOverviewPage.value = currentSlideNo.value
   // Watch rowCount, make sure up and down shortcut work correctly.
-  overviewRowCount.value = rowCount.value
+  overviewRowCount.value = numOfCols.value
 })
 </script>
 
@@ -109,47 +120,50 @@ watchEffect(() => {
   >
     <div
       v-if="showOverview"
-      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
+      v-bind="virtualList?.containerProps"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 px-16 py-20 overflow-y-auto backdrop-blur-5px"
       @click="close"
     >
-      <div
-        class="grid gap-y-4 gap-x-8 w-full"
-        :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
-      >
+      <div ref="containerEl" v-bind="virtualList?.wrapperProps.value">
         <div
-          v-for="(route, idx) of slides"
-          :key="route.no"
-          class="relative"
+          class="grid w-full"
+          :style="`grid-template-columns: repeat(${numOfCols},minmax(${cardWidth}px,1fr)); grid-auto-rows: ${cardHeight + 2}px; gap: ${gapX}px ${gapY}px`"
         >
           <div
-            class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
-            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
-            @click="go(route.no)"
+            v-for="{ data: route } of virtualList?.list.value"
+            :key="route.no"
+            class="relative"
           >
-            <SlideContainer
-              :key="route.no"
-              :width="cardWidth"
-              class="pointer-events-none"
+            <div
+              class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
+              :class="currentOverviewPage === route.no ? 'border-primary' : 'border-main'"
+              @click="go(route.no)"
             >
-              <SlideWrapper
-                :clicks-context="createFixedClicks(route, CLICKS_MAX)"
-                :route="route"
-                render-context="overview"
-              />
-              <DrawingPreview :page="route.no" />
-            </SlideContainer>
-          </div>
-          <div
-            class="absolute top-0"
-            :style="`left: ${cardWidth + 5}px`"
-          >
-            <template v-if="keyboardBuffer && String(idx + 1).startsWith(keyboardBuffer)">
-              <span class="text-green font-bold">{{ keyboardBuffer }}</span>
-              <span class="opacity-50">{{ String(idx + 1).slice(keyboardBuffer.length) }}</span>
-            </template>
-            <span v-else class="opacity-50">
-              {{ idx + 1 }}
-            </span>
+              <SlideContainer
+                :key="route.no"
+                :width="cardWidth"
+                class="pointer-events-none"
+              >
+                <SlideWrapper
+                  :clicks-context="createFixedClicks(route, CLICKS_MAX)"
+                  :route="route"
+                  render-context="overview"
+                />
+                <DrawingPreview :page="route.no" />
+              </SlideContainer>
+            </div>
+            <div
+              class="absolute top-0"
+              :style="`left: ${cardWidth + 5}px`"
+            >
+              <template v-if="keyboardBuffer && String(route.no).startsWith(keyboardBuffer)">
+                <span class="text-green font-bold">{{ keyboardBuffer }}</span>
+                <span class="opacity-50">{{ String(route.no).slice(keyboardBuffer.length) }}</span>
+              </template>
+              <span v-else class="opacity-50">
+                {{ route.no }}
+              </span>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 0d73696549..709af41e3d 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref, shallowRef } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, shallowRef, watchEffect } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
-import { pathPrefix, slidesTitle } from '../env'
+import { pathPrefix, slideAspect, slidesTitle } from '../env'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
+import { useDynamicVirtualList } from '../composables/useDynamicVirtualList'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
@@ -16,11 +17,15 @@ import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
+const cardHeight = computed(() => cardWidth / slideAspect.value)
+const paddingY = 4 * 5 // py-5 (single side)
+const rowHeight = computed(() => cardHeight.value + paddingY * 2 + 3) // 2 for card border & 1 for row border
 
 useHead({ title: `Overview - ${slidesTitle}` })
 
 const { openInEditor, slides } = useNav()
 
+const indexContainer = ref<HTMLElement>()
 const blocks: Map<number, HTMLElement> = reactive(new Map())
 const activeBlocks = ref<number[]>([])
 const edittingNote = ref<number | null>(null)
@@ -28,6 +33,10 @@ const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta
 const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
 const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
 
+const virtualList = useDynamicVirtualList(slides, () => ({
+  itemHeight: rowHeight.value,
+}))
+
 const activeSlide = shallowRef<SlideRoute>()
 const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
 function getClicksContext(route: SlideRoute) {
@@ -53,6 +62,8 @@ function wordCount(str: string) {
 }
 
 function isElementInViewport(el: HTMLElement) {
+  if (!el)
+    return false
   const rect = el.getBoundingClientRect()
   const delta = 20
   return (
@@ -80,12 +91,6 @@ function openSlideInNewTab(path: string) {
   a.click()
 }
 
-function scrollToSlide(idx: number) {
-  const el = blocks.get(idx)
-  if (el)
-    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-}
-
 function onMarkerClick(e: MouseEvent, clicks: number, route: SlideRoute) {
   const ctx = getClicksContext(route)
   if (ctx.current === clicks)
@@ -100,13 +105,19 @@ onMounted(() => {
     checkActiveBlocks()
   })
 })
+
+watchEffect(() => {
+  indexContainer.value?.children[activeBlocks.value[0]]?.scrollIntoView({
+    block: 'center',
+  })
+})
 </script>
 
 <template>
   <div class="h-screen w-screen of-hidden flex">
     <nav class="grid grid-rows-[auto_max-content] border-r border-main select-none max-h-full h-full">
       <div class="relative">
-        <div class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p2 gap-1 max-h-full of-x-visible of-y-auto" style="direction:rtl">
+        <div ref="indexContainer" class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p2 gap-1 max-h-full of-x-visible of-y-auto" style="direction:rtl">
           <div
             v-for="(route, idx) of slides"
             :key="route.no"
@@ -116,7 +127,7 @@ onMounted(() => {
             <button
               class="relative transition duration-300 w-8 h-8 rounded hover:bg-active hover:op100"
               :class="activeBlocks.includes(idx) ? 'op100 text-primary bg-gray:5' : 'op20'"
-              @click="scrollToSlide(idx)"
+              @click="virtualList?.scrollTo(idx)"
             >
               <div>{{ idx + 1 }}</div>
             </button>
@@ -130,7 +141,7 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <div p2 border="t main">
+      <div class="p2 border-t border-main">
         <IconButton
           v-if="!isColorSchemaConfigured"
           :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
@@ -150,90 +161,101 @@ onMounted(() => {
       </div>
     </nav>
     <main
-      class="flex-1 h-full of-auto"
-      :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
+      class="py-5"
+      v-bind="virtualList?.containerProps"
       @scroll="checkActiveBlocks"
     >
       <div
-        v-for="(route, idx) of slides"
-        :key="route.no"
-        :ref="el => blocks.set(idx, el as any)"
-        class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
-        :class="idx === 0 ? 'pt5' : ''"
+        class="grid grid-cols-1"
+        :style="`grid-auto-rows: ${rowHeight}px`"
+        v-bind="virtualList?.wrapperProps.value"
       >
-        <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
-          <div class="text-3xl op20 mb2">
-            {{ idx + 1 }}
-          </div>
-          <IconButton
-            class="mr--3 op0 group-hover:op80"
-            title="Play in new tab"
-            @click="openSlideInNewTab(getSlidePath(route, false))"
-          >
-            <carbon:presentation-file />
-          </IconButton>
-          <IconButton
-            v-if="__DEV__ && route.meta?.slide"
-            class="mr--3 op0 group-hover:op80"
-            title="Open in editor"
-            @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
-          >
-            <carbon:cics-program />
-          </IconButton>
-        </div>
-        <div class="flex flex-col gap-2 my5" :style="{ width: `${cardWidth}px` }">
+        <div
+          v-for="{ data: route, index: idx } of virtualList?.list.value"
+          :key="route.no"
+          :ref="el => blocks.set(idx, el as any)"
+          class="relative of-hidden flex group"
+          :class="idx === 0 ? '' : 'border-t border-main'"
+        >
           <div
-            class="border rounded border-main overflow-hidden bg-main select-none h-max"
-            @dblclick="openSlideInNewTab(getSlidePath(route, false))"
+            class="ml-4 flex gap-4"
+            :style="`margin-bottom: ${paddingY}px; margin-top: ${paddingY}px;`"
           >
-            <SlideContainer
-              :key="route.no"
-              :width="cardWidth"
-              class="pointer-events-none important:[&_*]:select-none"
-            >
-              <SlideWrapper
+            <div class="select-none text-right flex flex-col gap-1 items-end">
+              <div class="text-3xl op20 mb2">
+                {{ idx + 1 }}
+              </div>
+              <IconButton
+                class="mr--3 op0 group-hover:op80"
+                title="Play in new tab"
+                @click="openSlideInNewTab(getSlidePath(route, false))"
+              >
+                <carbon:presentation-file />
+              </IconButton>
+              <IconButton
+                v-if="__DEV__ && route.meta?.slide"
+                class="mr--3 op0 group-hover:op80"
+                title="Open in editor"
+                @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
+              >
+                <carbon:cics-program />
+              </IconButton>
+            </div>
+            <div class="flex flex-col gap-2" :style="{ width: `${cardWidth}px` }">
+              <div
+                class="border rounded border-main overflow-hidden bg-main select-none h-max"
+                @dblclick="openSlideInNewTab(getSlidePath(route, false))"
+              >
+                <SlideContainer
+                  :key="route.no"
+                  :width="cardWidth"
+                  class="pointer-events-none important:[&_*]:select-none"
+                >
+                  <SlideWrapper
+                    :clicks-context="getClicksContext(route)"
+                    :route="route"
+                    render-context="overview"
+                  />
+                  <DrawingPreview :page="route.no" />
+                </SlideContainer>
+              </div>
+              <ClicksSlider
+                v-if="getSlideClicks(route)"
+                :active="activeSlide === route"
                 :clicks-context="getClicksContext(route)"
-                :route="route"
-                render-context="overview"
+                class="w-full mt-2"
+                @dblclick="toggleRoute(route)"
+                @click="activeSlide = route"
               />
-              <DrawingPreview :page="route.no" />
-            </SlideContainer>
+            </div>
           </div>
-          <ClicksSlider
-            v-if="getSlideClicks(route)"
-            :active="activeSlide === route"
+          <div class="py3 mt-0.5 mr--4 op0 transition group-hover:op100">
+            <IconButton
+              title="Edit Note"
+              class="rounded-full w-9 h-9 text-sm"
+              :class="edittingNote === route.no ? 'important:op0' : ''"
+              @click="edittingNote = route.no"
+            >
+              <carbon:pen />
+            </IconButton>
+          </div>
+          <NoteEditable
+            :no="route.no"
+            class="max-w-250 w-250 text-lg rounded p3"
+            :auto-height="true"
+            :highlight="activeSlide === route"
+            :editing="edittingNote === route.no"
             :clicks-context="getClicksContext(route)"
-            class="w-full mt-2"
-            @dblclick="toggleRoute(route)"
-            @click="activeSlide = route"
+            @dblclick="edittingNote !== route.no ? edittingNote = route.no : null"
+            @update:editing="edittingNote = null"
+            @marker-click="(e, clicks) => onMarkerClick(e, clicks, route)"
           />
-        </div>
-        <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
-          <IconButton
-            title="Edit Note"
-            class="rounded-full w-9 h-9 text-sm"
-            :class="edittingNote === route.no ? 'important:op0' : ''"
-            @click="edittingNote = route.no"
+          <div
+            v-if="wordCounts[idx] > 0"
+            class="select-none absolute bottom-0 right-0 bg-main rounded-tl p2 op35 text-xs"
           >
-            <carbon:pen />
-          </IconButton>
-        </div>
-        <NoteEditable
-          :no="route.no"
-          class="max-w-250 w-250 text-lg rounded p3"
-          :auto-height="true"
-          :highlight="activeSlide === route"
-          :editing="edittingNote === route.no"
-          :clicks-context="getClicksContext(route)"
-          @dblclick="edittingNote !== route.no ? edittingNote = route.no : null"
-          @update:editing="edittingNote = null"
-          @marker-click="(e, clicks) => onMarkerClick(e, clicks, route)"
-        />
-        <div
-          v-if="wordCounts[idx] > 0"
-          class="select-none absolute bottom-0 right-0 bg-main rounded-tl p2 op35 text-xs"
-        >
-          {{ wordCounts[idx] }} words
+            {{ wordCounts[idx] }} words
+          </div>
         </div>
       </div>
     </main>