diff --git a/src/main/actions.js b/src/main/actions.js
index f75353c..0d94539 100644
--- a/src/main/actions.js
+++ b/src/main/actions.js
@@ -19,21 +19,8 @@ console.log(`💾 Eagle Animation files will be saved in the following folder: $
 
 const getPictureLink = (projectId, sceneIndex, filename) => `ea-data://${projectId}/${sceneIndex}/${filename}`;
 
-const getDefaultPreview = (data) => {
-  for (let i = 0; i < (data?.project?.scenes?.length || 0); i++) {
-    for (const picture of data?.project?.scenes?.[i]?.pictures || []) {
-      if (!picture?.deleted) {
-        return getPictureLink(data._id, i, picture.filename);
-      }
-    }
-  }
-  return null;
-};
-
 const computeProject = (data) => {
   const copiedData = structuredClone(data);
-
-  let preview = getDefaultPreview(copiedData);
   const scenes = copiedData.project.scenes.map((scene, i) => ({
     ...scene,
     pictures: scene.pictures.map((picture) => ({
@@ -45,7 +32,6 @@ const computeProject = (data) => {
   let output = {
     ...copiedData,
     id: copiedData._id,
-    preview,
     project: {
       ...copiedData.project,
       scenes,
diff --git a/src/renderer/actions/index.js b/src/renderer/actions/index.js
index 9540453..2b822be 100644
--- a/src/renderer/actions/index.js
+++ b/src/renderer/actions/index.js
@@ -28,20 +28,8 @@ export const sendEvent = (name, data) => {
   }
 };
 
-const getDefaultPreview = async (data) => {
-  for (let i = 0; i < (data?.project?.scenes?.length || 0); i++) {
-    for (const picture of data?.project?.scenes?.[i]?.pictures || []) {
-      if (!picture.deleted) {
-        return getFrameBlobUrl(picture.filename?.split('.')?.[0]);
-      }
-    }
-  }
-  return null;
-};
-
 const computeProject = async (data, bindPictureLink = true) => {
   const copiedData = structuredClone(data);
-  let preview = await getDefaultPreview(copiedData);
   const scenes = await Promise.all(
     copiedData?.project?.scenes?.map(async (scene) => {
       return {
@@ -58,7 +46,6 @@ const computeProject = async (data, bindPictureLink = true) => {
 
   let output = {
     id: copiedData.id,
-    preview,
     project: {
       ...copiedData?.project,
       scenes,
diff --git a/src/renderer/hooks/useProjects.js b/src/renderer/hooks/useProjects.js
index b78a928..0aff7b8 100644
--- a/src/renderer/hooks/useProjects.js
+++ b/src/renderer/hooks/useProjects.js
@@ -1,4 +1,23 @@
 import { useCallback, useEffect, useState } from 'react';
+import { OptimizeFrame } from '../core/Optimizer';
+
+const getDefaultFrame = (data) => {
+  for (let i = 0; i < (data?.project?.scenes?.length || 0); i++) {
+    for (const picture of data?.project?.scenes?.[i]?.pictures || []) {
+      if (!picture?.deleted && !picture?.hidden) {
+        return { projectId: data?.id, sceneId: i, picture };
+      }
+    }
+  }
+  for (let i = 0; i < (data?.project?.scenes?.length || 0); i++) {
+    for (const picture of data?.project?.scenes?.[i]?.pictures || []) {
+      if (!picture?.deleted) {
+        return { projectId: data?.id, sceneId: i, picture };
+      }
+    }
+  }
+  return null;
+};
 
 // Use loop for performance issues
 const countFrames = (project) => {
@@ -15,6 +34,7 @@ const countFrames = (project) => {
 
 function useProjects(options) {
   const [projectsData, setProjectsData] = useState(null);
+  const [previewUrls, setPreviewUrls] = useState([]);
 
   // Initial load
   useEffect(() => {
@@ -32,6 +52,24 @@ function useProjects(options) {
     });
   });
 
+  useEffect(() => {
+    if (!projectsData) {
+      return;
+    }
+    Promise.all(
+      projectsData.map(async (project) => {
+        const defaultFrame = await getDefaultFrame(project);
+        if (!defaultFrame?.picture) {
+          return null;
+        }
+        const optimizedFrame = await OptimizeFrame(defaultFrame.projectId, defaultFrame.sceneId, defaultFrame.picture.id, 'thumbnail', defaultFrame.picture.link);
+        return optimizedFrame;
+      })
+    ).then((links) => {
+      setPreviewUrls(links);
+    });
+  }, [projectsData]);
+
   // Action rename
   const actionRename = useCallback(async (projectId, title = '') => {
     setProjectsData((oldData) => {
@@ -57,7 +95,7 @@ function useProjects(options) {
   });
 
   return {
-    projects: projectsData?.map((e) => ({ ...(e || {}), stats: { frames: countFrames(e.project) } })) || null,
+    projects: projectsData?.map((e, i) => ({ ...(e || {}), stats: { frames: countFrames(e.project) }, preview: previewUrls[i] || null })) || null,
     actions: {
       refresh: actionRefresh,
       create: actionCreate,