diff --git a/app/components-react/highlighter/ClipPreview.tsx b/app/components-react/highlighter/ClipPreview.tsx
index 4cdae6f99407..c4e29c5cc46e 100644
--- a/app/components-react/highlighter/ClipPreview.tsx
+++ b/app/components-react/highlighter/ClipPreview.tsx
@@ -18,6 +18,7 @@ export default function ClipPreview(props: {
   emitShowTrim: () => void;
   emitShowRemove: () => void;
   emitOpenFileInLocation: () => void;
+  game: EGame;
 }) {
   const { HighlighterService } = Services;
   const v = useVuex(() => ({
@@ -28,8 +29,6 @@ export default function ClipPreview(props: {
   const clipThumbnail = v.clip.scrubSprite || '';
   const enabled = v.clip.deleted ? false : v.clip.enabled;
 
-  const game = HighlighterService.getGameByStreamId(props.streamId);
-
   if (!v.clip) {
     return <>deleted</>;
   }
@@ -108,7 +107,7 @@ export default function ClipPreview(props: {
                 }}
               >
                 {isAiClip(v.clip) ? (
-                  <ClipPreviewInfo clip={v.clip} game={game} />
+                  <ClipPreviewInfo clip={v.clip} game={props.game} />
                 ) : (
                   <div className={styles.highlighterIcon}>
                     <i className="icon-highlighter" />
@@ -151,8 +150,9 @@ export function formatSecondsToHMS(seconds: number): string {
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
   const remainingSeconds = totalSeconds % 60;
-  return `${hours !== 0 ? hours.toString() + 'h ' : ''} ${minutes !== 0 ? minutes.toString() + 'm ' : ''
-    }${remainingSeconds !== 0 ? remainingSeconds.toString() + 's' : ''}`;
+  return `${hours !== 0 ? hours.toString() + 'h ' : ''} ${
+    minutes !== 0 ? minutes.toString() + 'm ' : ''
+  }${remainingSeconds !== 0 ? remainingSeconds.toString() + 's' : ''}`;
 }
 
 function FlameHypeScore({ score }: { score: number }) {
diff --git a/app/components-react/highlighter/ClipsView.tsx b/app/components-react/highlighter/ClipsView.tsx
index 4dd34053006e..3a21fde0223b 100644
--- a/app/components-react/highlighter/ClipsView.tsx
+++ b/app/components-react/highlighter/ClipsView.tsx
@@ -55,6 +55,7 @@ export default function ClipsView({
   const [activeFilter, setActiveFilter] = useState('all'); // Currently not using the setActiveFilter option
 
   const [clipsLoaded, setClipsLoaded] = useState<boolean>(false);
+
   const loadClips = useCallback(async (id: string | undefined) => {
     await HighlighterService.actions.return.loadClips(id);
     setClipsLoaded(true);
@@ -316,6 +317,7 @@ export default function ClipsView({
                                 remote.shell.showItemInFolder(clip.path);
                               }}
                               streamId={streamId}
+                              game={game}
                             />
                           </div>
                         );
diff --git a/app/components-react/highlighter/Export/ExportModal.tsx b/app/components-react/highlighter/Export/ExportModal.tsx
index 67bd19abc36b..72ecb8deac70 100644
--- a/app/components-react/highlighter/Export/ExportModal.tsx
+++ b/app/components-react/highlighter/Export/ExportModal.tsx
@@ -23,7 +23,6 @@ import { SCRUB_HEIGHT, SCRUB_WIDTH, SCRUB_FRAMES } from 'services/highlighter/co
 import styles from './ExportModal.m.less';
 import { getCombinedClipsDuration } from '../utils';
 import { formatSecondsToHMS } from '../ClipPreview';
-import { set } from 'lodash';
 import PlatformSelect from './Platform';
 import cx from 'classnames';
 import { getVideoResolution } from 'services/highlighter/cut-highlight-clips';
@@ -55,9 +54,7 @@ class ExportController {
   getClips(streamId?: string) {
     return this.service.getClips(this.service.views.clips, streamId).filter(clip => clip.enabled);
   }
-  getClipThumbnail(streamId?: string) {
-    return this.getClips(streamId).find(clip => clip.enabled)?.scrubSprite;
-  }
+
   getDuration(streamId?: string) {
     return getCombinedClipsDuration(this.getClips(streamId));
   }
@@ -185,14 +182,20 @@ function ExportFlow({
     getStreamTitle,
     getClips,
     getDuration,
-    getClipThumbnail,
     getClipResolution,
   } = useController(ExportModalCtx);
 
   const [currentFormat, setCurrentFormat] = useState<TOrientation>(EOrientation.HORIZONTAL);
 
-  const clipsAmount = getClips(streamId).length;
-  const clipsDuration = formatSecondsToHMS(getDuration(streamId));
+  const { amount, duration, thumbnail } = useMemo(() => {
+    const clips = getClips(streamId);
+
+    return {
+      amount: clips.length,
+      duration: formatSecondsToHMS(getCombinedClipsDuration(clips)),
+      thumbnail: clips.find(clip => clip.enabled)?.scrubSprite,
+    };
+  }, [streamId]);
 
   function settingMatcher(initialSetting: TSetting) {
     const matchingSetting = settings.find(
@@ -215,42 +218,41 @@ function ExportFlow({
   const [currentSetting, setSetting] = useState<TSetting | null>(null);
   const [isLoadingResolution, setIsLoadingResolution] = useState(true);
 
-  useEffect(() => {
-    setIsLoadingResolution(true);
-
-    async function initializeSettings() {
-      try {
-        const resolution = await getClipResolution(streamId);
-        let setting: TSetting;
-        if (resolution?.height === 720 && exportInfo.resolution !== 720) {
-          setting = settings.find(s => s.resolution === 720) || settings[settings.length - 1];
-        } else if (resolution?.height === 1080 && exportInfo.resolution !== 1080) {
-          setting = settings.find(s => s.resolution === 1080) || settings[settings.length - 1];
-        } else {
-          setting = settingMatcher({
-            name: 'from default',
-            fps: exportInfo.fps,
-            resolution: exportInfo.resolution,
-            preset: exportInfo.preset,
-          });
-        }
-
-        setSetting(setting);
-      } catch (error: unknown) {
-        console.error('Failed to detect clip resolution, setting default. Error: ', error);
-        setSetting(
-          settingMatcher({
-            name: 'from default',
-            fps: exportInfo.fps,
-            resolution: exportInfo.resolution,
-            preset: exportInfo.preset,
-          }),
-        );
-      } finally {
-        setIsLoadingResolution(false);
+  async function initializeSettings() {
+    try {
+      const resolution = await getClipResolution(streamId);
+      let setting: TSetting;
+      if (resolution?.height === 720 && exportInfo.resolution !== 720) {
+        setting = settings.find(s => s.resolution === 720) || settings[settings.length - 1];
+      } else if (resolution?.height === 1080 && exportInfo.resolution !== 1080) {
+        setting = settings.find(s => s.resolution === 1080) || settings[settings.length - 1];
+      } else {
+        setting = settingMatcher({
+          name: 'from default',
+          fps: exportInfo.fps,
+          resolution: exportInfo.resolution,
+          preset: exportInfo.preset,
+        });
       }
+
+      setSetting(setting);
+    } catch (error: unknown) {
+      console.error('Failed to detect clip resolution, setting default. Error: ', error);
+      setSetting(
+        settingMatcher({
+          name: 'from default',
+          fps: exportInfo.fps,
+          resolution: exportInfo.resolution,
+          preset: exportInfo.preset,
+        }),
+      );
+    } finally {
+      setIsLoadingResolution(false);
     }
+  }
 
+  useEffect(() => {
+    setIsLoadingResolution(true);
     initializeSettings();
   }, [streamId]);
 
@@ -376,7 +378,7 @@ function ExportFlow({
                 </div>
               )}
               <img
-                src={getClipThumbnail(streamId)}
+                src={thumbnail}
                 style={
                   currentFormat === EOrientation.HORIZONTAL
                     ? { objectPosition: 'left' }
@@ -398,7 +400,7 @@ function ExportFlow({
                     marginLeft: '8px',
                   }}
                 >
-                  {clipsDuration} | {$t('%{clipsAmount} clips', { clipsAmount })}
+                  {duration} | {$t('%{clipsAmount} clips', { clipsAmount: amount })}
                 </p>
               </div>
               <OrientationToggle
diff --git a/app/components-react/highlighter/PreviewModal.tsx b/app/components-react/highlighter/PreviewModal.tsx
index 2df19d9a6fae..45e72f447221 100644
--- a/app/components-react/highlighter/PreviewModal.tsx
+++ b/app/components-react/highlighter/PreviewModal.tsx
@@ -10,7 +10,7 @@ import { Button } from 'antd';
 import { TModalClipsView } from './ClipsView';
 import { CheckboxInput } from 'components-react/shared/inputs';
 import { formatSecondsToHMS } from './ClipPreview';
-import { duration } from 'moment';
+import { TModalStreamCard } from './StreamCardModal';
 
 interface IPlaylist {
   src: string;
@@ -29,7 +29,7 @@ export default function PreviewModal({
 }: {
   close: () => void;
   streamId: string | undefined;
-  emitSetShowModal: (modal: TModalClipsView | null) => void;
+  emitSetShowModal: (modal: 'export' | null) => void;
 }) {
   const { HighlighterService, UsageStatisticsService } = Services;
   const clips = HighlighterService.getClips(HighlighterService.views.clips, streamId);
@@ -369,7 +369,6 @@ export default function PreviewModal({
           <Button
             type="primary"
             onClick={() => {
-              close();
               emitSetShowModal('export');
             }}
           >
diff --git a/app/components-react/highlighter/StreamCard.tsx b/app/components-react/highlighter/StreamCard.tsx
index 630ef9b22556..54b5431b636d 100644
--- a/app/components-react/highlighter/StreamCard.tsx
+++ b/app/components-react/highlighter/StreamCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   EHighlighterView,
   IHighlightedStream,
@@ -14,49 +14,63 @@ import { $t } from 'services/i18n';
 import { EAiDetectionState } from 'services/highlighter/models/ai-highlighter.models';
 import * as remote from '@electron/remote';
 import StreamCardInfo from './StreamCardInfo';
+import StreamCardModal, { TModalStreamCard } from './StreamCardModal';
 import { supportedGames } from 'services/highlighter/models/game-config.models';
 
 export default function StreamCard({
   streamId,
-  clipsOfStreamAreLoading,
   emitSetView,
-  emitGeneratePreview,
-  emitExportVideo,
-  emitRemoveStream,
-  emitCancelHighlightGeneration,
-  emitShowRequirements,
-  emitFeedbackForm,
 }: {
   streamId: string;
-  clipsOfStreamAreLoading: string | null;
   emitSetView: (data: IViewState) => void;
-  emitGeneratePreview: () => void;
-  emitExportVideo: () => void;
-  emitRemoveStream: () => void;
-  emitCancelHighlightGeneration: () => void;
-  emitShowRequirements: () => void;
-  emitFeedbackForm: (clipsLength: number) => void;
 }) {
+  const [modal, setModal] = useState<TModalStreamCard | null>(null);
+  const [clipsOfStreamAreLoading, setClipsOfStreamAreLoading] = useState<string | null>(null);
+
   const { HighlighterService } = Services;
-  const clips = useVuex(() =>
-    HighlighterService.views.clips
+  const clips = useMemo(() => {
+    return HighlighterService.views.clips
       .filter(c => c.streamInfo?.[streamId])
       .map(clip => {
         if (isAiClip(clip) && (clip.aiInfo as any).moments) {
           clip.aiInfo.inputs = (clip.aiInfo as any).moments;
         }
         return clip;
-      }),
-  );
-  const stream = useVuex(() =>
-    HighlighterService.views.highlightedStreams.find(s => s.id === streamId),
-  );
+      });
+  }, [HighlighterService.views.clips.filter(clips => clips.streamInfo?.[streamId]), streamId]);
+
+  const stream = useVuex(() => HighlighterService.views.highlightedStreamsDictionary[streamId]);
+
+  const [thumbnailsLoaded, setClipsLoaded] = useState<boolean>(false);
+  const prevStateRef = useRef<EAiDetectionState | null>(null);
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | null = null;
+    if (
+      prevStateRef.current === EAiDetectionState.IN_PROGRESS &&
+      stream.state.type === EAiDetectionState.FINISHED &&
+      !thumbnailsLoaded
+    ) {
+      // This is a workaround.
+      // Sometimes it takes longer to to generate the thumbnails. Event tho the path and file is already there, the image can't be loaded
+      // Waiting 3 seconds and then render again solves that. Obviously not the best way
+      timeout = setTimeout(() => {
+        setClipsLoaded(true);
+      }, clips.length * 1000);
+    }
+    prevStateRef.current = stream?.state?.type || null;
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [streamId, stream]);
+
   if (!stream) {
     return <></>;
   }
 
   const game = HighlighterService.getGameByStreamId(streamId);
-
   function shareFeedback() {
     remote.shell.openExternal(
       'https://support.streamlabs.com/hc/en-us/requests/new?ticket_form_id=31967205905051',
@@ -69,124 +83,177 @@ export default function StreamCard({
     }
   }
 
+  async function previewVideo(id: string) {
+    setClipsOfStreamAreLoading(id);
+
+    try {
+      await HighlighterService.actions.return.loadClips(id);
+      setClipsOfStreamAreLoading(null);
+      setModal('preview');
+    } catch (error: unknown) {
+      console.error('Error loading clips for preview export', error);
+      setClipsOfStreamAreLoading(null);
+    }
+  }
+
+  async function exportVideo(id: string) {
+    setClipsOfStreamAreLoading(id);
+
+    try {
+      await HighlighterService.actions.return.loadClips(id);
+      setClipsOfStreamAreLoading(null);
+      setModal('export');
+    } catch (error: unknown) {
+      console.error('Error loading clips for export', error);
+      setClipsOfStreamAreLoading(null);
+    }
+  }
+
+  function cancelHighlightGeneration() {
+    HighlighterService.actions.cancelHighlightGeneration(stream.id);
+  }
+
   if (stream.state.type === EAiDetectionState.FINISHED && clips.length === 0) {
     return (
-      <div className={styles.streamCard}>
-        {' '}
-        <Button
-          size="large"
-          className={styles.deleteButton}
-          onClick={e => {
-            emitRemoveStream();
-            e.stopPropagation();
-          }}
-          style={{ backgroundColor: '#00000040', border: 'none', position: 'absolute' }}
-        >
-          <i className="icon-trash" />
-        </Button>
-        <div className={styles.requirements}>
-          <div style={{ display: 'flex', flexDirection: 'column', width: '280px' }}>
-            <h2>{$t('No clips found')}</h2>
-            <p style={{ marginBottom: '8px' }}>
-              {$t('Please make sure all the requirements are met:')}
-            </p>
-            <ul style={{ marginBottom: 0, marginLeft: '-28px' }}>
-              <li>{$t('Game is supported')}</li>
-              <li>{$t('Game language is English')}</li>
-              <li>{$t('Map and Stats area is fully visible')}</li>
-              <li>{$t('Game is fullscreen in your stream')}</li>
-              <li>{$t('Game mode is supported')}</li>
-            </ul>
-            <a onClick={emitShowRequirements} style={{ marginBottom: '14px' }}>
-              {$t('Show details')}
-            </a>
-            <p>{$t('All requirements met but no luck?')}</p>
-
-            <a onClick={shareFeedback}>
-              {$t('Take a screenshot of your stream and share it here')}
-            </a>
-          </div>
-        </div>
-        <div className={styles.streaminfoWrapper}>
-          <div
-            className={styles.titleRotatedClipsWrapper}
-            style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}
+      <>
+        {modal && (
+          <StreamCardModal
+            streamId={streamId}
+            modal={modal}
+            onClose={() => {
+              setModal(null);
+            }}
+            game={game}
+          />
+        )}
+        <div className={styles.streamCard}>
+          <Button
+            size="large"
+            className={styles.deleteButton}
+            onClick={e => {
+              setModal('remove');
+              e.stopPropagation();
+            }}
+            style={{ backgroundColor: '#00000040', border: 'none', position: 'absolute' }}
           >
-            <div className={styles.titleDateWrapper}>
-              <h2 className={styles.streamcardTitle}>{stream.title}</h2>
-              <p style={{ margin: 0, fontSize: '12px' }}>{new Date(stream.date).toDateString()}</p>
+            <i className="icon-trash" />
+          </Button>
+          <div className={styles.requirements}>
+            <div style={{ display: 'flex', flexDirection: 'column', width: '280px' }}>
+              <h2>{$t('No clips found')}</h2>
+              <p style={{ marginBottom: '8px' }}>
+                {$t('Please make sure all the requirements are met:')}
+              </p>
+              <ul style={{ marginBottom: 0, marginLeft: '-28px' }}>
+                <li>{$t('Game is supported')}</li>
+                <li>{$t('Game language is English')}</li>
+                <li>{$t('Map and Stats area is fully visible')}</li>
+                <li>{$t('Game is fullscreen in your stream')}</li>
+                <li>{$t('Game mode is supported')}</li>
+              </ul>
+              <a onClick={() => setModal('requirements')} style={{ marginBottom: '14px' }}>
+                {$t('Show details')}
+              </a>
+              <p>{$t('All requirements met but no luck?')}</p>
+
+              <a onClick={shareFeedback}>
+                {$t('Take a screenshot of your stream and share it here')}
+              </a>
             </div>
-            <Button
-              size="large"
-              className={styles.cancelButton}
-              onClick={shareFeedback}
-              icon={<i className="icon-community" style={{ marginRight: '8px' }} />}
+          </div>
+          <div className={styles.streaminfoWrapper}>
+            <div
+              className={styles.titleRotatedClipsWrapper}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}
             >
-              {$t('Share feedback')}
-            </Button>
+              <div className={styles.titleDateWrapper}>
+                <h2 className={styles.streamcardTitle}>{stream.title}</h2>
+                <p style={{ margin: 0, fontSize: '12px' }}>
+                  {new Date(stream.date).toDateString()}
+                </p>
+              </div>
+              <Button
+                size="large"
+                className={styles.cancelButton}
+                onClick={shareFeedback}
+                icon={<i className="icon-community" style={{ marginRight: '8px' }} />}
+              >
+                {$t('Share feedback')}
+              </Button>
+            </div>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 
-  const gameThumbnail = supportedGames?.find(game => game.value === stream.game)?.image;
-
   return (
-    <div
-      className={styles.streamCard}
-      onClick={() => {
-        showStreamClips();
-      }}
-    >
-      <Thumbnail
-        clips={clips}
-        clipsOfStreamAreLoading={clipsOfStreamAreLoading}
-        stream={stream}
-        emitGeneratePreview={emitGeneratePreview}
-        emitCancelHighlightGeneration={emitCancelHighlightGeneration}
-        emitRemoveStream={emitRemoveStream}
-      />
-      <div className={styles.streaminfoWrapper}>
-        <div className={styles.titleRotatedClipsWrapper}>
-          <div className={styles.titleDateWrapper}>
-            <h2 className={styles.streamcardTitle}>{stream.title}</h2>
-            <p style={{ margin: 0, fontSize: '12px' }}>{new Date(stream.date).toDateString()}</p>
-          </div>
-          <RotatedClips clips={clips} />
-        </div>
-        <h3 className={styles.emojiWrapper}>
-          {stream.state.type === EAiDetectionState.FINISHED ? (
-            <div style={{ display: 'flex', width: '100%', gap: '12px' }}>
-              {gameThumbnail && (
-                <Tooltip title={supportedGames.find(game => game.value === stream.game)?.label}>
-                  <img className={styles.supportedGameIcon} src={gameThumbnail} alt={stream.game} />
-                </Tooltip>
-              )}
-              {/* calculation needed for text ellipsis overflow */}
-              <div style={{ width: 'calc(100% - 22px - 12px)' }}>
-                <StreamCardInfo clips={clips} game={game} />
-              </div>
-            </div>
-          ) : (
-            <div style={{ height: '22px' }}> </div>
-          )}
-        </h3>
-        <ActionBar
-          stream={stream}
+    <>
+      {modal && (
+        <StreamCardModal
+          streamId={streamId}
+          modal={modal}
+          onClose={() => {
+            setModal(null);
+          }}
+          game={game}
+        />
+      )}
+      <div
+        className={styles.streamCard}
+        onClick={() => {
+          showStreamClips();
+        }}
+      >
+        <Thumbnail
           clips={clips}
-          emitCancelHighlightGeneration={emitCancelHighlightGeneration}
-          emitExportVideo={emitExportVideo}
-          emitShowStreamClips={showStreamClips}
           clipsOfStreamAreLoading={clipsOfStreamAreLoading}
-          emitFeedbackForm={emitFeedbackForm}
-          emitRestartAiDetection={() => {
-            HighlighterService.actions.restartAiDetection(stream.path, stream);
+          stream={stream}
+          emitGeneratePreview={() => {
+            previewVideo(streamId);
+          }}
+          emitCancelHighlightGeneration={cancelHighlightGeneration}
+          emitRemoveStream={() => {
+            setModal('remove');
           }}
-          emitSetView={emitSetView}
         />
+        <div className={styles.streaminfoWrapper}>
+          <div className={styles.titleRotatedClipsWrapper}>
+            <div className={styles.titleDateWrapper}>
+              <h2 className={styles.streamcardTitle}>{stream.title}</h2>
+              <p style={{ margin: 0, fontSize: '12px' }}>{new Date(stream.date).toDateString()}</p>
+            </div>
+            <RotatedClips clips={clips} />
+          </div>
+          <h3 className={styles.emojiWrapper}>
+            {stream.state.type === EAiDetectionState.FINISHED ? (
+              <StreamCardInfo clips={clips} game={game} />
+            ) : (
+              <div style={{ height: '22px' }}> </div>
+            )}
+          </h3>
+          <ActionBar
+            stream={stream}
+            clips={clips}
+            emitCancelHighlightGeneration={cancelHighlightGeneration}
+            emitExportVideo={() => exportVideo(streamId)}
+            emitShowStreamClips={showStreamClips}
+            clipsOfStreamAreLoading={clipsOfStreamAreLoading}
+            emitRestartAiDetection={() => {
+              HighlighterService.actions.restartAiDetection(stream.path, stream);
+            }}
+            emitSetView={emitSetView}
+            emitFeedbackForm={() => {
+              setModal('feedback');
+            }}
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 
@@ -419,7 +486,6 @@ export function Thumbnail({
       >
         <i className="icon-trash" />
       </Button>
-
       <img
         onClick={e => {
           if (stream.state.type !== EAiDetectionState.IN_PROGRESS) {
diff --git a/app/components-react/highlighter/StreamCardModal.tsx b/app/components-react/highlighter/StreamCardModal.tsx
new file mode 100644
index 000000000000..1f4ae6d4e649
--- /dev/null
+++ b/app/components-react/highlighter/StreamCardModal.tsx
@@ -0,0 +1,176 @@
+import { useVuex } from 'components-react/hooks';
+import { Services } from 'components-react/service-provider';
+import React, { useEffect, useState } from 'react';
+import { TModalClipsView } from './ClipsView';
+import { TClip } from 'services/highlighter/models/highlighter.models';
+import styles from './StreamView.m.less';
+import ClipTrimmer from 'components-react/highlighter/ClipTrimmer';
+import { Modal, Alert, Button, Input } from 'antd';
+import ExportModal from 'components-react/highlighter/Export/ExportModal';
+import { $t } from 'services/i18n';
+import PreviewModal from './PreviewModal';
+import TextArea from 'antd/lib/input/TextArea';
+import { EGame } from 'services/highlighter/models/ai-highlighter.models';
+import EducationCarousel from './EducationCarousel';
+
+export type TModalStreamCard = 'export' | 'preview' | 'remove' | 'requirements' | 'feedback' | null;
+
+export default function StreamCardModal({
+  streamId,
+  modal,
+  game,
+  onClose,
+}: {
+  streamId: string | undefined;
+  modal: TModalStreamCard | null;
+  game: EGame;
+  onClose: () => void;
+}) {
+  const { HighlighterService } = Services;
+  const v = useVuex(() => ({
+    exportInfo: HighlighterService.views.exportInfo,
+    uploadInfo: HighlighterService.views.uploadInfo,
+    error: HighlighterService.views.error,
+  }));
+  const [showModal, rawSetShowModal] = useState<TModalStreamCard | null>(null);
+  const [modalWidth, setModalWidth] = useState('700px');
+
+  useEffect(() => {
+    if (modal) {
+      setShowModal(modal);
+    }
+  }, [modal]);
+
+  function setShowModal(modal: TModalStreamCard | null) {
+    rawSetShowModal(modal);
+    if (modal) {
+      setModalWidth(
+        {
+          preview: '700px',
+          export: 'fit-content',
+          remove: '400px',
+          requirements: 'fit-content',
+          feedback: '700px',
+        }[modal],
+      );
+    }
+  }
+  function closeModal() {
+    // Do not allow closing export modal while export/upload operations are in progress
+    if (v.exportInfo.exporting) return;
+    if (v.uploadInfo.some(u => u.uploading)) return;
+
+    setShowModal(null);
+    onClose();
+    if (v.error) HighlighterService.actions.dismissError();
+  }
+
+  return (
+    <Modal
+      getContainer={`.${styles.streamViewRoot}`}
+      onCancel={closeModal}
+      footer={null}
+      width={modalWidth}
+      closable={false}
+      visible={!!showModal || !!v.error}
+      destroyOnClose={true}
+      keyboard={false}
+    >
+      {!!v.error && <Alert message={v.error} type="error" showIcon />}
+      {showModal === 'export' && <ExportModal close={closeModal} streamId={streamId} />}
+      {showModal === 'preview' && (
+        <PreviewModal
+          close={closeModal}
+          streamId={streamId}
+          emitSetShowModal={modal => {
+            setShowModal(modal);
+          }}
+        />
+      )}
+      {showModal === 'remove' && <RemoveStream close={closeModal} streamId={streamId} />}
+      {showModal === 'feedback' && <Feedback streamId={streamId} close={closeModal} game={game} />}
+      {showModal === 'requirements' && <EducationCarousel game={game} />}
+    </Modal>
+  );
+}
+
+function RemoveStream(p: { streamId: string | undefined; close: () => void }) {
+  const { HighlighterService } = Services;
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <h2>{$t('Delete highlighted stream?')} </h2>
+      <p>
+        {$t(
+          'Are you sure you want to delete this stream and all its associated clips? This action cannot be undone.',
+        )}
+      </p>
+      <Button style={{ marginRight: 8 }} onClick={p.close}>
+        {$t('Cancel')}
+      </Button>
+      <Button
+        type="primary"
+        danger
+        onClick={() => {
+          if (p.streamId === undefined) {
+            console.error('Cant remove stream, missing id');
+            return;
+          }
+          HighlighterService.actions.removeStream(p.streamId);
+          p.close();
+        }}
+      >
+        {'Delete'}
+      </Button>
+    </div>
+  );
+}
+
+function Feedback(p: { streamId: string | undefined; game: EGame; close: () => void }) {
+  const { UsageStatisticsService, HighlighterService } = Services;
+
+  const { TextArea } = Input;
+  const [feedback, setFeedback] = useState('');
+
+  const leaveFeedback = () => {
+    if (!feedback || feedback.length > 140) {
+      return;
+    }
+
+    const clipAmount = HighlighterService.getClips(HighlighterService.views.clips, p.streamId)
+      .length;
+
+    UsageStatisticsService.recordAnalyticsEvent('AIHighlighter', {
+      type: 'ThumbsDownFeedback',
+      streamId: p.streamId,
+      game: p.game,
+      clips: clipAmount,
+      feedback,
+    });
+
+    p.close();
+  };
+
+  return (
+    <div>
+      <TextArea
+        rows={4}
+        maxLength={140}
+        showCount
+        placeholder={$t('Highlights not working? Let us know how we can improve.')}
+        onChange={e => setFeedback(e.target.value)}
+      />
+      <div style={{ textAlign: 'right', marginTop: '24px' }}>
+        <Button
+          size="large"
+          type="primary"
+          style={{ marginTop: '14px' }}
+          disabled={!feedback}
+          onClick={leaveFeedback}
+        >
+          {$t('Submit')}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components-react/highlighter/StreamView.tsx b/app/components-react/highlighter/StreamView.tsx
index 2d8f8243b886..31b68d4ff7a8 100644
--- a/app/components-react/highlighter/StreamView.tsx
+++ b/app/components-react/highlighter/StreamView.tsx
@@ -1,7 +1,8 @@
 import { useVuex } from 'components-react/hooks';
-import React, { useEffect, useRef, useState } from 'react';
-import styles from './StreamView.m.less';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Services } from 'components-react/service-provider';
+import styles from './StreamView.m.less';
+import * as remote from '@electron/remote';
 import {
   EHighlighterView,
   IStreamInfoForAiHighlighter,
@@ -25,25 +26,17 @@ import { EGame } from 'services/highlighter/models/ai-highlighter.models';
 import { ImportStreamModal } from './ImportStream';
 import SupportedGames from './supportedGames/SupportedGames';
 
-type TModalStreamView =
-  | { type: 'export'; id: string | undefined }
-  | { type: 'preview'; id: string | undefined }
-  | {
-      type: 'upload';
-      path?: string;
-      game?: EGame;
-      streamInfo?: IStreamInfoForAiHighlighter;
-      openedFrom: TOpenedFrom;
-    }
-  | { type: 'remove'; id: string | undefined }
-  | { type: 'requirements'; game: string }
-  | { type: 'feedback'; game?: string; id: string | undefined; clipsLength?: number }
-  | null;
+type TModalStreamView = {
+  type: 'upload';
+  path?: string;
+  game?: EGame;
+  streamInfo?: IStreamInfoForAiHighlighter;
+  openedFrom: TOpenedFrom;
+} | null;
 
 export default function StreamView({ emitSetView }: { emitSetView: (data: IViewState) => void }) {
   const { HighlighterService, HotkeysService, UsageStatisticsService } = Services;
   const v = useVuex(() => ({
-    exportInfo: HighlighterService.views.exportInfo,
     error: HighlighterService.views.error,
     uploadInfo: HighlighterService.views.uploadInfo,
     highlighterVersion: HighlighterService.views.highlighterVersion,
@@ -65,22 +58,18 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
 
   // Below is only used because useVueX doesnt work as expected
   // there probably is a better way to do this
-  const currentStreams = useRef<{ id: string; date: string; game: string }[]>();
-  const highlightedStreams = useVuex(() => {
-    const newStreamIds = [
-      ...HighlighterService.views.highlightedStreams.map(stream => {
-        return { id: stream.id, date: stream.date, game: stream.game };
-      }),
-    ];
-
-    if (currentStreams.current === undefined || !isEqual(currentStreams.current, newStreamIds)) {
-      currentStreams.current = newStreamIds;
-    }
-    return currentStreams.current.sort(
-      (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
-    );
+  const highlightedStreamsAmount = useVuex(() => {
+    return HighlighterService.views.highlightedStreams.length;
   });
 
+  const highlightedStreams = useMemo(() => {
+    return HighlighterService.views.highlightedStreams
+      .map(stream => {
+        return { id: stream.id, date: stream.date, game: stream.game };
+      })
+      .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  }, [highlightedStreamsAmount]);
+
   const currentAiDetectionState = useRef<boolean>();
 
   const aiDetectionInProgress = useVuex(() => {
@@ -98,41 +87,13 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
   });
 
   const [showModal, rawSetShowModal] = useState<TModalStreamView | null>(null);
-  const [clipsOfStreamAreLoading, setClipsOfStreamAreLoading] = useState<string | null>(null);
 
   function setShowModal(modal: TModalStreamView | null) {
     rawSetShowModal(modal);
   }
 
-  async function previewVideo(id: string) {
-    setClipsOfStreamAreLoading(id);
-
-    try {
-      await HighlighterService.actions.return.loadClips(id);
-      setClipsOfStreamAreLoading(null);
-      rawSetShowModal({ type: 'preview', id });
-    } catch (error: unknown) {
-      console.error('Error loading clips for preview export', error);
-      setClipsOfStreamAreLoading(null);
-    }
-  }
-
-  async function exportVideo(id: string) {
-    setClipsOfStreamAreLoading(id);
-
-    try {
-      await HighlighterService.actions.return.loadClips(id);
-      setClipsOfStreamAreLoading(null);
-      rawSetShowModal({ type: 'export', id });
-    } catch (error: unknown) {
-      console.error('Error loading clips for export', error);
-      setClipsOfStreamAreLoading(null);
-    }
-  }
-
   function closeModal() {
     // Do not allow closing export modal while export/upload operations are in progress
-    if (v.exportInfo.exporting) return;
     if (v.uploadInfo.some(u => u.uploading)) return;
 
     setShowModal(null);
@@ -161,36 +122,6 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
     e.stopPropagation();
   }
 
-  const { TextArea } = Input;
-  const [feedback, setFeedback] = useState('');
-
-  const leaveFeedback = () => {
-    if (showModal?.type !== 'feedback') return;
-    if (!feedback || feedback.length > 140) {
-      return;
-    }
-
-    UsageStatisticsService.recordAnalyticsEvent('AIHighlighter', {
-      type: 'ThumbsDownFeedback',
-      streamId: showModal?.id,
-      game: showModal?.game,
-      clips: showModal?.clipsLength,
-      feedback,
-    });
-
-    closeModal();
-  };
-
-  const getModalWidth = () => {
-    if (showModal?.type === 'preview') {
-      return 700;
-    }
-    if (showModal?.type === 'feedback') {
-      return 400;
-    }
-    return 'fit-content';
-  };
-
   return (
     <div
       style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}
@@ -247,24 +178,6 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
                         key={stream.id}
                         streamId={stream.id}
                         emitSetView={data => emitSetView(data)}
-                        emitGeneratePreview={() => previewVideo(stream.id)}
-                        emitExportVideo={() => exportVideo(stream.id)}
-                        emitRemoveStream={() => setShowModal({ type: 'remove', id: stream.id })}
-                        clipsOfStreamAreLoading={clipsOfStreamAreLoading}
-                        emitCancelHighlightGeneration={() => {
-                          HighlighterService.actions.cancelHighlightGeneration(stream.id);
-                        }}
-                        emitShowRequirements={() => {
-                          setShowModal({ type: 'requirements', game: stream.game });
-                        }}
-                        emitFeedbackForm={clipsLength =>
-                          setShowModal({
-                            type: 'feedback',
-                            id: stream.id,
-                            game: stream.game,
-                            clipsLength,
-                          })
-                        }
                       />
                     ))}
                   </div>
@@ -288,7 +201,7 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
           closeModal();
         }}
         footer={null}
-        width={getModalWidth()}
+        width={'fit-content'}
         closable={false}
         visible={!!showModal}
         destroyOnClose={true}
@@ -304,82 +217,12 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
             openedFrom={showModal.openedFrom}
           />
         )}
-        {showModal?.type === 'export' && <ExportModal close={closeModal} streamId={showModal.id} />}
-        {showModal?.type === 'preview' && (
-          <PreviewModal
-            close={closeModal}
-            streamId={showModal.id}
-            emitSetShowModal={modal => {
-              if (modal === 'export') {
-                rawSetShowModal({ type: 'export', id: showModal.id });
-              }
-            }}
-          />
-        )}
-        {showModal?.type === 'feedback' && (
-          <div>
-            <TextArea
-              rows={4}
-              maxLength={140}
-              showCount
-              placeholder={$t('Highlights not working? Let us know how we can improve.')}
-              onChange={e => setFeedback(e.target.value)}
-            />
-            <div style={{ textAlign: 'right', marginTop: '24px' }}>
-              <Button
-                size="large"
-                type="primary"
-                style={{ marginTop: '14px' }}
-                disabled={!feedback}
-                onClick={leaveFeedback}
-              >
-                {$t('Submit')}
-              </Button>
-            </div>
-          </div>
-        )}
-        {showModal?.type === 'remove' && (
-          <RemoveStream close={closeModal} streamId={showModal.id} />
-        )}
-        {showModal?.type === 'requirements' && <EducationCarousel game={showModal.game} />}
       </Modal>
     </div>
   );
 }
 
-function RemoveStream(p: { streamId: string | undefined; close: () => void }) {
-  const { HighlighterService } = Services;
-
-  return (
-    <div style={{ textAlign: 'center' }}>
-      <h2>{$t('Delete highlighted stream?')} </h2>
-      <p>
-        {$t(
-          'Are you sure you want to delete this stream and all its associated clips? This action cannot be undone.',
-        )}
-      </p>
-      <Button style={{ marginRight: 8 }} onClick={p.close}>
-        {$t('Cancel')}
-      </Button>
-      <Button
-        type="primary"
-        danger
-        onClick={() => {
-          if (p.streamId === undefined) {
-            console.error('Cant remove stream, missing id');
-            return;
-          }
-          HighlighterService.actions.removeStream(p.streamId);
-          p.close();
-        }}
-      >
-        {'Delete'}
-      </Button>
-    </div>
-  );
-}
-
-export function groupStreamsByTimePeriod(streams: { id: string; date: string; game: string }[]) {
+export function groupStreamsByTimePeriod(streams: { id: string; date: string }[]) {
   const now = moment();
   const groups: { [key: string]: typeof streams } = {
     Today: [],
diff --git a/app/components-react/pages/Highlighter.tsx b/app/components-react/pages/Highlighter.tsx
index aafac7044431..783066511171 100644
--- a/app/components-react/pages/Highlighter.tsx
+++ b/app/components-react/pages/Highlighter.tsx
@@ -13,11 +13,7 @@ import ClipsView from 'components-react/highlighter/ClipsView';
 import UpdateModal from 'components-react/highlighter/UpdateModal';
 import { EAvailableFeatures } from 'services/incremental-rollout';
 
-export default function Highlighter(props: {
-  params?: {
-    view: string;
-  };
-}) {
+export default function Highlighter(props: { params?: { view: string } }) {
   const { HighlighterService, IncrementalRolloutService, UsageStatisticsService } = Services;
   const aiHighlighterFeatureEnabled = IncrementalRolloutService.views.featureIsEnabled(
     EAvailableFeatures.aiHighlighter,
@@ -25,19 +21,20 @@ export default function Highlighter(props: {
 
   const v = useVuex(() => ({
     useAiHighlighter: HighlighterService.views.useAiHighlighter,
-    clipsAmount: HighlighterService.views.clips.length,
-    streamAmount: HighlighterService.views.highlightedStreams.length,
   }));
 
+  const clipsAmount = HighlighterService.views.clips.length;
+  const streamAmount = HighlighterService.views.highlightedStreams.length;
+
   let initialViewState: IViewState;
 
   if (props.params?.view) {
     const view =
       props.params?.view === 'settings' ? EHighlighterView.SETTINGS : EHighlighterView.STREAM;
     initialViewState = { view };
-  } else if (v.streamAmount > 0 && v.clipsAmount > 0 && aiHighlighterFeatureEnabled) {
+  } else if (streamAmount > 0 && clipsAmount > 0 && aiHighlighterFeatureEnabled) {
     initialViewState = { view: EHighlighterView.STREAM };
-  } else if (v.clipsAmount > 0) {
+  } else if (clipsAmount > 0) {
     initialViewState = { view: EHighlighterView.CLIPS, id: undefined };
   } else {
     initialViewState = { view: EHighlighterView.SETTINGS };
@@ -86,9 +83,9 @@ export default function Highlighter(props: {
             }}
             props={{
               id: viewState.id,
-              streamTitle: HighlighterService.views.highlightedStreams.find(
-                s => s.id === viewState.id,
-              )?.title,
+              streamTitle: viewState.id
+                ? HighlighterService.views.highlightedStreamsDictionary[viewState.id]?.title
+                : '',
             }}
           />
         </>
diff --git a/app/services/highlighter/highlighter-views.ts b/app/services/highlighter/highlighter-views.ts
index 37f5ee5c4843..01304f27b17b 100644
--- a/app/services/highlighter/highlighter-views.ts
+++ b/app/services/highlighter/highlighter-views.ts
@@ -22,10 +22,17 @@ export class HighlighterViews extends ViewHandler<IHighlighterState> {
   }
 
   /**
-   * Returns wether or not the AiHighlighter should be used
+   * Returns highlighted streams as an array (for backward compatibility)
    */
   get highlightedStreams() {
-    return this.state.highlightedStreams;
+    return Object.values(this.state.highlightedStreamsDictionary);
+  }
+
+  /**
+   * Returns highlighted streams as a dictionary for faster lookups
+   */
+  get highlightedStreamsDictionary() {
+    return this.state.highlightedStreamsDictionary;
   }
 
   /**
diff --git a/app/services/highlighter/index.ts b/app/services/highlighter/index.ts
index 4ae42176e1b9..3243ac06ea8e 100644
--- a/app/services/highlighter/index.ts
+++ b/app/services/highlighter/index.ts
@@ -125,6 +125,7 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
     error: '',
     useAiHighlighter: false,
     highlightedStreams: [],
+    highlightedStreamsDictionary: {},
     updaterProgress: 0,
     isUpdaterRunning: false,
     highlighterVersion: '',
@@ -140,6 +141,7 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
       ...this.defaultState,
       clips: state.clips,
       highlightedStreams: state.highlightedStreams,
+      highlightedStreamsDictionary: state.highlightedStreamsDictionary,
       video: state.video,
       audio: state.audio,
       transition: state.transition,
@@ -260,23 +262,17 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
 
   @mutation()
   ADD_HIGHLIGHTED_STREAM(streamInfo: IHighlightedStream) {
-    // Vue.set(this.state, 'highlightedStreams', streamInfo);
-    this.state.highlightedStreams.push(streamInfo);
+    Vue.set(this.state.highlightedStreamsDictionary, streamInfo.id, streamInfo);
   }
 
   @mutation()
   UPDATE_HIGHLIGHTED_STREAM(updatedStreamInfo: IHighlightedStream) {
-    const keepAsIs = this.state.highlightedStreams.filter(
-      stream => stream.id !== updatedStreamInfo.id,
-    );
-    this.state.highlightedStreams = [...keepAsIs, updatedStreamInfo];
+    Vue.set(this.state.highlightedStreamsDictionary, updatedStreamInfo.id, updatedStreamInfo);
   }
 
   @mutation()
   REMOVE_HIGHLIGHTED_STREAM(id: string) {
-    this.state.highlightedStreams = this.state.highlightedStreams.filter(
-      stream => stream.id !== id,
-    );
+    Vue.delete(this.state.highlightedStreamsDictionary, id);
   }
 
   @mutation()
@@ -303,8 +299,39 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
     return new HighlighterViews(this.state);
   }
 
+  private async migrateHighlightedStreamsToDictionary() {
+    try {
+      // Check if current state exists and contains an array
+      if (
+        this.state &&
+        this.state.highlightedStreams &&
+        Array.isArray(this.state.highlightedStreams) &&
+        this.state.highlightedStreams.length > 0 &&
+        Object.keys(this.state.highlightedStreamsDictionary).length === 0
+      ) {
+        console.info('Migrating highlighted streams from array to dictionary structure');
+
+        // Convert the array to a dictionary
+        const streamsDict = this.state.highlightedStreams.reduce((dict, stream) => {
+          if (stream && stream.id) {
+            dict[stream.id] = stream;
+          }
+          return dict;
+        }, {} as Dictionary<IHighlightedStream>);
+
+        this.state.highlightedStreamsDictionary = streamsDict;
+      } else {
+        // Already migrated, nothing to do
+      }
+    } catch (error: unknown) {
+      console.error('Error during highlightedStreams migration:', error);
+      this.state.highlightedStreamsDictionary = this.state.highlightedStreamsDictionary || {};
+    }
+  }
+
   async init() {
     super.init();
+    await this.migrateHighlightedStreamsToDictionary();
 
     this.incrementalRolloutService.featuresReady.then(async () => {
       this.aiHighlighterFeatureEnabled = this.incrementalRolloutService.views.featureIsEnabled(
@@ -743,7 +770,7 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
   getGameByStreamId(streamId?: string): EGame {
     if (!streamId) return EGame.UNSET;
 
-    const game = this.views.highlightedStreams.find(s => s.id === streamId)?.game;
+    const game = this.views.highlightedStreamsDictionary[streamId]?.game;
     if (!game) return EGame.UNSET;
 
     const lowercaseGame = game.toLowerCase();
@@ -1282,7 +1309,7 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
   }
 
   cancelHighlightGeneration(streamId: string): void {
-    const stream = this.views.highlightedStreams.find(s => s.id === streamId);
+    const stream = this.views.highlightedStreamsDictionary[streamId];
     if (stream && stream.abortController) {
       console.log('cancelHighlightGeneration', streamId);
       stream.abortController.abort();
@@ -1416,6 +1443,7 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
       }
     } finally {
       setStreamInfo.abortController = undefined;
+
       this.updateStream(setStreamInfo);
       // stopProgressUpdates();
     }
diff --git a/app/services/highlighter/models/highlighter.models.ts b/app/services/highlighter/models/highlighter.models.ts
index 58d043f2aeba..1ab48b75175c 100644
--- a/app/services/highlighter/models/highlighter.models.ts
+++ b/app/services/highlighter/models/highlighter.models.ts
@@ -27,6 +27,7 @@ export interface IHighlighterState {
   error: string;
   useAiHighlighter: boolean;
   highlightedStreams: IHighlightedStream[];
+  highlightedStreamsDictionary: Dictionary<IHighlightedStream>;
   updaterProgress: number;
   isUpdaterRunning: boolean;
   highlighterVersion: string;