diff --git a/package.json b/package.json
index 01840f6..3131ad3 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
 		"@prisma/client": "5.11.0",
 		"argon2": "^0.40.1",
 		"lucide-svelte": "^0.358.0",
+		"mime": "^4.0.4",
 		"minio": "^7.1.3",
 		"svelte-sonner": "^0.3.19",
 		"validator": "^13.11.0"
diff --git a/src/routes/file/[id]/+page.svelte b/src/routes/file/[id]/+page.svelte
index a26b32f..a9dd61c 100644
--- a/src/routes/file/[id]/+page.svelte
+++ b/src/routes/file/[id]/+page.svelte
@@ -1,9 +1,12 @@
 <script>
 	import { page } from '$app/stores';
 	import { bytesToHumanReadable } from '$lib';
+	import mime from 'mime';
 	import Link from '$lib/components/Inputs/Link.svelte';
 
 	export let data;
+
+	const ext = `.${mime.getExtension(data.file.type)}`;
 </script>
 
 <svelte:head>
@@ -15,12 +18,12 @@
 	<meta name="theme-color" content={data.settings.color} />
 	{#if data.file.type.includes('video')}
 		<meta property="og:type" content="video.other" />
-		<meta property="og:video:url" content="{$page.url.origin}/download/{data.file.id}" />
+		<meta property="og:video:url" content="{$page.url.origin}/download/{data.file.id}{ext}" />
 	{:else if data.file.type.includes('image')}
-		<meta property="og:image" content="{$page.url.origin}/download/{data.file.id}" />
-	{/if}
-	{#if data.settings.large}
-		<meta property="twitter:card" content="summary_large_image" />
+		{#if data.settings.large}
+			<meta property="twitter:card" content="summary_large_image" />
+		{/if}
+		<meta property="og:image" content="{$page.url.origin}/download/{data.file.id}{ext}" />
 	{/if}
 </svelte:head>
 
@@ -37,12 +40,12 @@
 				<div class="p-2.5 rounded-lg shadow-lg bg-crust h-[50vh]">
 					{#if data.file.type.includes('video')}
 						<!-- svelte-ignore a11y-media-has-caption -->
-						<video class="h-full" src="/download/{data.file.id}" controls></video>
+						<video class="h-full" src="/download/{data.file.id}{ext}" controls></video>
 					{:else if data.file.type.includes('image')}
-						<img class="h-full" src="/download/{data.file.id}" alt={data.file.id} />
+						<img class="h-full" src="/download/{data.file.id}{ext}" alt={data.file.id} />
 					{/if}
 				</div>
-				<Link style="button" href="/download/{data.file.id}">
+				<Link style="button" href="/download/{data.file.id}{ext}">
 					<p class="w-full font-bold text-center">
 						Download ({bytesToHumanReadable(data.file.size)})
 					</p>
diff --git a/yarn.lock b/yarn.lock
index 2e820f5..d661ed8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1174,6 +1174,11 @@ mime-types@^2.1.35:
   dependencies:
     mime-db "1.52.0"
 
+mime@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-4.0.4.tgz#9f851b0fc3c289d063b20a7a8055b3014b25664b"
+  integrity sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==
+
 minimatch@^9.0.4:
   version "9.0.5"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"