diff --git a/server/apps/immich/src/api-v1/asset/asset.service.ts b/server/apps/immich/src/api-v1/asset/asset.service.ts
index a642535f0f..5334eece58 100644
--- a/server/apps/immich/src/api-v1/asset/asset.service.ts
+++ b/server/apps/immich/src/api-v1/asset/asset.service.ts
@@ -279,7 +279,6 @@ export class AssetService {
           }
 
           /** Sending Partial Content With HTTP Code 206 */
-          console.log('Send Range', range);
           res.status(206).set({
             'Content-Range': `bytes ${start}-${end}/${size}`,
             'Accept-Ranges': 'bytes',
diff --git a/server/apps/microservices/src/processors/metadata-extraction.processor.ts b/server/apps/microservices/src/processors/metadata-extraction.processor.ts
index 07f47db334..890c673eb9 100644
--- a/server/apps/microservices/src/processors/metadata-extraction.processor.ts
+++ b/server/apps/microservices/src/processors/metadata-extraction.processor.ts
@@ -12,7 +12,7 @@ import { Logger } from '@nestjs/common';
 import axios from 'axios';
 import { SmartInfoEntity } from '@app/database/entities/smart-info.entity';
 import ffmpeg from 'fluent-ffmpeg';
-// import moment from 'moment';
+import path from 'path';
 
 @Processor('metadata-extraction-queue')
 export class MetadataExtractionProcessor {
@@ -48,7 +48,7 @@ export class MetadataExtractionProcessor {
       newExif.assetId = asset.id;
       newExif.make = exifData['Make'] || null;
       newExif.model = exifData['Model'] || null;
-      newExif.imageName = fileName || null;
+      newExif.imageName = path.parse(fileName).name || null;
       newExif.exifImageHeight = exifData['ExifImageHeight'] || null;
       newExif.exifImageWidth = exifData['ExifImageWidth'] || null;
       newExif.fileSizeInByte = fileSize || null;
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 728b298e99..62f35c7746 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -8,6 +8,7 @@
 	import type { ImmichAsset } from '../../models/immich-asset';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { browser } from '$app/env';
+	import { round } from 'lodash';
 
 	// Map Property
 	let map: any;
@@ -80,6 +81,16 @@
 			return `${sizeInByte}B`;
 		}
 	};
+
+	const getMegapixel = (width: number, height: number): number | undefined => {
+		const megapixel = Math.round((height * width) / 1_000_000);
+
+		if (megapixel) {
+			return megapixel;
+		}
+
+		return undefined;
+	};
 </script>
 
 <section class="p-2">
@@ -129,8 +140,13 @@
 				<div>
 					<p>{`${asset.exifInfo.imageName}.${asset.originalPath.split('.')[1]}` || ''}</p>
 					<div class="flex text-sm gap-2">
-						<p>{((asset.exifInfo.exifImageHeight * asset.exifInfo.exifImageWidth) / 1_000_000).toFixed(0)}MP</p>
-						<p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p>
+						{#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
+							{#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
+								<p>{getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}MP</p>
+							{/if}
+
+							<p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p>
+						{/if}
 						<p>{getHumanReadableString(asset.exifInfo.fileSizeInByte)}</p>
 					</div>
 				</div>