diff --git a/api/src/modules/users/users.controller.ts b/api/src/modules/users/users.controller.ts
index 94c44e6..070e0e5 100644
--- a/api/src/modules/users/users.controller.ts
+++ b/api/src/modules/users/users.controller.ts
@@ -73,17 +73,14 @@ export class UsersController {
     @Query("sort") sort?: string,
     @Query("search") search?: string
   ) {
-    return this.usersService.getUserFiles(
-      (req.session as CustomSession).userId,
-      {
-        skip: +skip,
-        // @ts-ignore
-        take: take === "all" ? "all" : +take,
-        currentPage: +currentPage,
-        sort,
-        search,
-      }
-    );
+    return this.usersService.getUserFiles(req, {
+      skip: +skip,
+      // @ts-ignore
+      take: take === "all" ? "all" : +take,
+      currentPage: +currentPage,
+      sort,
+      search,
+    });
   }
 
   @UseGuards(AuthGuard)
diff --git a/api/src/modules/users/users.service.ts b/api/src/modules/users/users.service.ts
index c24f32a..03d5b97 100644
--- a/api/src/modules/users/users.service.ts
+++ b/api/src/modules/users/users.service.ts
@@ -35,6 +35,7 @@ import { join } from "path";
 import { readFile, unlink } from "fs/promises";
 import { EmbedSettingDTO } from "./dto/EmbedSettingsDTO";
 import cuid from "cuid";
+import { existsSync } from "fs";
 
 @Injectable()
 export class UsersService implements IUserService {
@@ -391,7 +392,7 @@ export class UsersService implements IUserService {
   }
 
   async getUserFiles(
-    id: string,
+    req: Request,
     {
       skip,
       take,
@@ -406,7 +407,10 @@ export class UsersService implements IUserService {
       search?: string;
     }
   ) {
-    const user = await this.findUser(id, { byId: true });
+    const id = (req.session as CustomSession).userId;
+    const user = await this.findUser(id, {
+      byId: true,
+    });
     if (!user) {
       throw new UnauthorizedException("not authorized");
     }
@@ -475,10 +479,24 @@ export class UsersService implements IUserService {
           case "newest":
             take !== total && files.reverse();
         }
-        return files.map((file) => ({
-          ...file,
-          size: formatBytes(file.size),
-        }));
+        return files.map((file) => {
+          let albumCover = null;
+
+          if (
+            file.mimetype.includes("audio") &&
+            existsSync(join(uploadDir, `${file.slug}.jpg`))
+          ) {
+            const protocol = req.headers["x-forwarded-proto"] || "http";
+            const host = req.headers.host;
+            albumCover = `${protocol}://${host}/${file.slug}.jpg`;
+          }
+
+          return {
+            ...file,
+            size: formatBytes(file.size),
+            albumCover,
+          };
+        });
       });
 
     return {
diff --git a/web/src/components/pages/GalleryPage/PreviewCard.tsx b/web/src/components/pages/GalleryPage/PreviewCard.tsx
index 0142f10..697bca4 100644
--- a/web/src/components/pages/GalleryPage/PreviewCard.tsx
+++ b/web/src/components/pages/GalleryPage/PreviewCard.tsx
@@ -123,12 +123,14 @@ const PreviewCard: FC<{
 						</video>
 					) : file.mimetype.includes('audio') ? (
 						<Stack align="center">
-							<Image
-								width={300}
-								height={300}
-								src={`${API_URL}/${file.slug}.jpg`}
-								alt="Album Cover"
-							/>
+							{file.albumCover && (
+								<Image
+									width={300}
+									height={300}
+									src={`${API_URL}/${file.slug}.jpg`}
+									alt="Album Cover"
+								/>
+							)}
 							<audio controls loop preload="metadata">
 								<source src={fileURL} />
 							</audio>
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
index 595fc09..80d0a96 100644
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -99,6 +99,7 @@ export interface IFile {
 	size: number;
 	userId: string;
 	createdAt: Date;
+	albumCover: string | null;
 }
 
 export interface FileResponse {