diff --git a/package-lock.json b/package-lock.json
index 015b170e..09800587 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "@nextcloud/webpack-vue-config": "^5.5.1",
         "@playwright/test": "^1.33.0",
         "@types/hammerjs": "^2.0.41",
+        "@types/luxon": "^3.3.0",
         "@types/url-parse": "^1.4.8",
         "@types/videojs-contrib-quality-levels": "^2.0.1",
         "playwright": "^1.33.0",
@@ -2427,6 +2428,12 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/luxon": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.0.tgz",
+      "integrity": "sha512-uKRI5QORDnrGFYgcdAVnHvEIvEZ8noTpP/Bg+HeUzZghwinDlIS87DEenV5r1YoOF9G4x600YsUXLWZ19rmTmg==",
+      "dev": true
+    },
     "node_modules/@types/mdast": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
@@ -13259,6 +13266,12 @@
         "@types/geojson": "*"
       }
     },
+    "@types/luxon": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.0.tgz",
+      "integrity": "sha512-uKRI5QORDnrGFYgcdAVnHvEIvEZ8noTpP/Bg+HeUzZghwinDlIS87DEenV5r1YoOF9G4x600YsUXLWZ19rmTmg==",
+      "dev": true
+    },
     "@types/mdast": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
diff --git a/package.json b/package.json
index b9dd9107..0dcea68f 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "@nextcloud/webpack-vue-config": "^5.5.1",
     "@playwright/test": "^1.33.0",
     "@types/hammerjs": "^2.0.41",
+    "@types/luxon": "^3.3.0",
     "@types/url-parse": "^1.4.8",
     "@types/videojs-contrib-quality-levels": "^2.0.1",
     "playwright": "^1.33.0",
diff --git a/src/components/Metadata.vue b/src/components/Metadata.vue
index ef9b05d5..0993c352 100644
--- a/src/components/Metadata.vue
+++ b/src/components/Metadata.vue
@@ -174,17 +174,23 @@ export default defineComponent({
       // The fallback to datetaken can be eventually removed
       // and then this can be discarded
       if (this.exif.DateTimeEpoch) {
-        const tzOffset: string = this.exif['OffsetTimeOriginal'] || this.exif['OffsetTime']; // e.g. -05:00
-        const tzId: string = this.exif['LocationTZID']; // e.g. America/New_York
+        const tzOffset: string = this.exif.OffsetTimeOriginal || this.exif.OffsetTime; // e.g. -05:00
+        const tzId: string = this.exif.LocationTZID; // e.g. America/New_York
 
-        // Use timezone offset if available, otherwise use tzId
-        let dateWithTz = date.setZone('UTC' + tzOffset);
-        if (!dateWithTz.isValid) {
-          dateWithTz = date.setZone(tzId); // Fall back to tzId
+        let dateWithTz: DateTime | undefined = undefined;
+
+        // Use timezone offset if available
+        if (tzOffset) {
+          dateWithTz = date.setZone('UTC' + tzOffset);
+        }
+
+        // Fall back to tzId
+        if (!dateWithTz?.isValid && tzId) {
+          dateWithTz = date.setZone(tzId);
         }
 
         // Use the timezone only if the date is valid
-        if (dateWithTz.isValid) {
+        if (dateWithTz?.isValid) {
           date = dateWithTz;
         }
       }