diff --git a/src/components/player/content/index.js b/src/components/player/content/index.js
index 6502f312..c8a86d16 100644
--- a/src/components/player/content/index.js
+++ b/src/components/player/content/index.js
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import Presentation from 'components/presentation';
 import TldrawPresentation from 'components/tldraw';
 import TldrawPresentationV2 from 'components/tldraw_v2';
-import { getTldrawBbbVersion } from 'utils/tldraw';
+import { getTldrawBbbVersion, isTldrawWhiteboard as isTldraw } from 'utils/tldraw';
 import { useCurrentInterval, useShouldShowScreenShare } from 'components/utils/hooks';
 import Screenshare from 'components/screenshare';
 import Thumbnails from 'components/thumbnails';
@@ -30,12 +30,10 @@ const Content = ({
 
   if (layout.single) return null;
 
-  const isTldrawWhiteboard = storage.tldraw.length ||
-                             storage.panzooms.tldraw ||
-                             storage.cursor.tldraw;
+  const isTldrawWhiteboard = isTldraw();
 
   let presentation;
-  
+
   if (isTldrawWhiteboard) {
     const bbbVersion = getTldrawBbbVersion(index);
 
@@ -62,7 +60,7 @@ const Content = ({
         {presentation}
         {layout.screenshare ? (
           // video-js doesn't mount properly when not mounted in time
-          <span style={!shouldShowScreenshare ?{
+          <span style={!shouldShowScreenshare ? {
             display: 'none',
             width: '100%',
             height: '100%'
@@ -72,7 +70,7 @@ const Content = ({
           }}>
             <Screenshare />
           </span>
-        ): null}
+        ) : null}
       </div>
       <div className={cx('bottom-content', { 'inactive': fullscreen })}>
         <Thumbnails
diff --git a/src/utils/builder.js b/src/utils/builder.js
index a6191d54..9aefee1f 100644
--- a/src/utils/builder.js
+++ b/src/utils/builder.js
@@ -1,6 +1,7 @@
 import { parseFromString } from './data/xml2json';
 import { files as config } from 'config';
 import { getFileType, caseInsensitiveReducer } from './data';
+import { isTldrawWhiteboard } from './tldraw';
 import {
   hasProperty,
   isEmpty,
@@ -56,6 +57,8 @@ const buildAlternates = result => {
   if (!result) return [];
 
   let data = [];
+  const useSvg = isTldrawWhiteboard();
+
   for (const presentation in result) {
     if (hasProperty(result, presentation)) {
       const slides = result[presentation];
@@ -63,9 +66,12 @@ const buildAlternates = result => {
       for (const slide in slides) {
         if (hasProperty(slides, slide)) {
           const text = slides[slide];
+          const slidepath = slide.replace('-', '');
 
           data.push({
-            src: `presentation/${presentation}/${slide}.png`,
+            src: useSvg
+              ? `presentation/${presentation}/svgs/${slidepath}.svg`
+              : `presentation/${presentation}/${slide}.png`,
             text,
           });
         }
diff --git a/src/utils/tldraw.js b/src/utils/tldraw.js
index 9417c7b7..d60a7e74 100644
--- a/src/utils/tldraw.js
+++ b/src/utils/tldraw.js
@@ -193,6 +193,12 @@ const setupColorThemePaletteOverrides = () => {
   };
 };
 
+const isTldrawWhiteboard = () => {
+  return (storage.tldraw && storage.tldraw.length > 0) ||
+    (storage.panzooms && storage.panzooms.tldraw) ||
+    (storage.cursor && storage.cursor.tldraw);
+};
+
 export {
   getTldrawBbbVersion,
   getTldrawData,
@@ -200,5 +206,6 @@ export {
   createTldrawImageAsset,
   createTldrawBackgroundShape,
   createTldrawCursorShape,
+  isTldrawWhiteboard,
   setupColorThemePaletteOverrides,
 };