diff --git a/package-lock.json b/package-lock.json
index a3f12de..ac24636 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,12 +21,13 @@
 				"bits-ui": "^0.16.0",
 				"clsx": "^2.1.0",
 				"dayjs": "^1.11.10",
+				"exifreader": "^4.23.3",
 				"lucide-svelte": "^0.316.0",
 				"postcss": "^8.4.33",
 				"prettier": "^3.1.1",
 				"prettier-plugin-svelte": "^3.1.2",
 				"prettier-plugin-tailwindcss": "^0.5.13",
-				"svelte": "^4.2.7",
+				"svelte": "^4.2.12",
 				"svelte-check": "^3.6.0",
 				"svelte-fa": "^4.0.2",
 				"svelte-sonner": "^0.3.19",
@@ -1208,6 +1209,15 @@
 				"node": ">=16"
 			}
 		},
+		"node_modules/@xmldom/xmldom": {
+			"version": "0.8.10",
+			"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+			"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+			"optional": true,
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
 		"node_modules/abbrev": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -1782,6 +1792,15 @@
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
 			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
 		},
+		"node_modules/exifreader": {
+			"version": "4.23.3",
+			"resolved": "https://registry.npmjs.org/exifreader/-/exifreader-4.23.3.tgz",
+			"integrity": "sha512-/Ii4jiNp/5BXdKOiWXZYrWmZFn/ANu3bMVGO7GFQufao5M52/fK2OsAPMH34PL4S79z1eZBzAoaYyBXit0zzVA==",
+			"hasInstallScript": true,
+			"optionalDependencies": {
+				"@xmldom/xmldom": "^0.8.10"
+			}
+		},
 		"node_modules/fast-glob": {
 			"version": "3.3.2",
 			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
diff --git a/package.json b/package.json
index 935df6d..0ca2164 100644
--- a/package.json
+++ b/package.json
@@ -14,30 +14,31 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/adapter-vercel": "^5.1.0",
-		"@tauri-apps/api": "^1.5.3",
-		"bits-ui": "^0.16.0",
-		"clsx": "^2.1.0",
-		"lucide-svelte": "^0.316.0",
-		"tailwind-merge": "^2.2.1",
-		"tailwind-variants": "^0.1.20",
-		"@tauri-apps/cli": "^1.5.11",
 		"@fortawesome/free-regular-svg-icons": "^6.5.1",
 		"@fortawesome/free-solid-svg-icons": "^6.5.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/adapter-vercel": "^5.1.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tauri-apps/api": "^1.5.3",
+		"@tauri-apps/cli": "^1.5.11",
 		"autoprefixer": "^10.4.17",
+		"bits-ui": "^0.16.0",
+		"clsx": "^2.1.0",
 		"dayjs": "^1.11.10",
+		"exifreader": "^4.23.3",
+		"lucide-svelte": "^0.316.0",
 		"postcss": "^8.4.33",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.5.13",
-		"svelte": "^4.2.7",
+		"svelte": "^4.2.12",
 		"svelte-check": "^3.6.0",
 		"svelte-fa": "^4.0.2",
 		"svelte-sonner": "^0.3.19",
+		"tailwind-merge": "^2.2.1",
+		"tailwind-variants": "^0.1.20",
 		"tailwindcss": "^3.4.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
diff --git a/src/lib/components/gallery/DetailField.svelte b/src/lib/components/gallery/DetailField.svelte
index f75a089..57e4a88 100644
--- a/src/lib/components/gallery/DetailField.svelte
+++ b/src/lib/components/gallery/DetailField.svelte
@@ -3,7 +3,7 @@
 	import Fa from 'svelte-fa'
 
 	export let text: string = ''
-	export let value: string | number = ''
+	export let value: string | number | undefined = ''
 	export let icon: IconDefinition | null = null
 </script>
 
@@ -15,6 +15,6 @@
 		{text}
 	</p>
 	<p class="font-semibold">
-		{value || ''}
+		{value != undefined || value != null ? value : ''}
 	</p>
 </div>
diff --git a/src/lib/components/gallery/ImageDetails.svelte b/src/lib/components/gallery/ImageDetails.svelte
index ad02ac3..e4466cc 100644
--- a/src/lib/components/gallery/ImageDetails.svelte
+++ b/src/lib/components/gallery/ImageDetails.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { faCalendarAlt, faFileAlt } from '@fortawesome/free-regular-svg-icons'
-	import { faListNumeric, faTag } from '@fortawesome/free-solid-svg-icons'
+	import { faCompress, faListNumeric, faTag } from '@fortawesome/free-solid-svg-icons'
 	import DetailField from '$lib/components/gallery/DetailField.svelte'
 	import dayjs from 'dayjs'
 	import type { ImageType } from '$lib/utils/types'
@@ -19,7 +19,7 @@
 		text="Tag"
 		value={image?.tags.reduce((acc, tag) => acc + tag + ', ', '').slice(0, -2)}
 	/>
-
-	<DetailField icon={faListNumeric} text="Size" value={image?.size} />
+	<DetailField icon={faListNumeric} text="Size" value={image?.resolution} />
 	<DetailField icon={faFileAlt} text="Format" value={image?.type} />
+	<DetailField icon={faCompress} text="EXIF" value={image?.compression} />
 </div>
diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts
index e5aecb7..62df54e 100644
--- a/src/lib/utils/types.ts
+++ b/src/lib/utils/types.ts
@@ -4,6 +4,8 @@ export type ImageType = {
 	tags: string[]
 	name: string
 	size: number
+	resolution: string
+	compression: number | undefined
 	lastModified: string
 	type: string
 	path: string
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2dff047..1853711 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -12,6 +12,7 @@
 	import { makeid } from '$lib/utils/tools'
 	import { galleryStore } from '$lib/store'
 	import type { ImageType } from '$lib/utils/types'
+	import ExifReader from 'exifreader'
 
 	let imageDropping = false
 	let deleteModal = false
@@ -97,14 +98,17 @@
 					modified_time: string
 					accessed_time: string
 				} = await invoke('get_file_metadata', { filePath: file })
+				const EXIF = await ExifReader.load(convertFileSrc(file), { async: true })
 
 				return {
 					id: makeid(5),
 					src: convertFileSrc(file),
 					name: file,
 					size: metadata.file_size,
-					lastModified: metadata.modified_time,
-					type: metadata.file_type,
+					lastModified: EXIF['ICC Profile Date'].value,
+					type: EXIF['FileType']?.value,
+					compression: EXIF['Compression']?.value,
+					resolution: `${EXIF['Image Width']?.value} x ${EXIF['Image Height']?.value}`,
 					tags: [],
 					path: file
 				} as ImageType
@@ -179,7 +183,7 @@
 				images = $galleryStore.images.filter((img) => {
 					return selectedTags.every((tag) => img.tags.includes(tag))
 				})
-				
+
 				break
 			default:
 				images = $galleryStore.images