diff --git a/packages/core/src/components/molecules/GridItems/MovieGridItem.tsx b/packages/core/src/components/molecules/GridItems/MovieGridItem.tsx
index 7939e6e..ac4d614 100644
--- a/packages/core/src/components/molecules/GridItems/MovieGridItem.tsx
+++ b/packages/core/src/components/molecules/GridItems/MovieGridItem.tsx
@@ -2,16 +2,28 @@ import React from "react";
 import { IMovieMetaData } from "../../../service";
 import { Card, CardContent, CardMedia } from "@mui/material";
 import { useFileUrl, useWatcher } from "../../../hooks";
-import fallback from './no-poster.png';
+import posterFallback from './no-poster.png';
+import thumbFallback from './no-thumbnail.png';
 import { Signal } from '@preact/signals-react';
 import { Display } from '../../pages/LibraryManager';
 import { useComputed } from '@preact/signals-react';
 
 export function MovieGridItem(props: { movie: IMovieMetaData, display: Signal<Display>; }) {
 	const { movie, display } = props;
-	const url = useWatcher(useFileUrl(props.movie.posters[0]?.cid, fallback));
+	const posterUrl = useWatcher(useFileUrl(props.movie.posters[0]?.cid, posterFallback));
+	const thumbUrl = useWatcher(useFileUrl(props.movie.thumbnails[0]?.cid, thumbFallback));
 	const width = useComputed(() => display.value == Display.Poster ? 240 : 640);
 	const height = useComputed(() => display.value == Display.Poster ? 360 : 360);
+	const url = useComputed(() => {
+		switch (display.value) {
+			case Display.Poster:
+				return posterUrl.value;
+			case Display.Thumbnail:
+				return thumbUrl.value;
+			default:
+				return '';
+		}
+	});
 
 	return useComputed(() => (
 		<Card sx={{ width: width.value }}>