diff --git a/frontend/src/components/Media/MediaInfoPanel.tsx b/frontend/src/components/Media/MediaInfoPanel.tsx
index c192aef4b..9fda0fac9 100644
--- a/frontend/src/components/Media/MediaInfoPanel.tsx
+++ b/frontend/src/components/Media/MediaInfoPanel.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { open } from '@tauri-apps/plugin-shell';
 import {
   X,
@@ -49,131 +50,136 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
   const handleLocationClick = async () => {
     if (currentImage?.metadata?.latitude && currentImage?.metadata?.longitude) {
       const { latitude, longitude } = currentImage.metadata;
-      const url = `https://maps.google.com/?q=${latitude},${longitude}`;
       try {
-        await open(url);
+        await open(`https://maps.google.com/?q=${latitude},${longitude}`);
       } catch (error) {
         console.error('Failed to open map URL:', error);
       }
     }
   };
 
-  if (!show) return null;
-
   return (
-    <div className="animate-in slide-in-from-left absolute top-10 left-6 z-50 w-[350px] rounded-xl border border-white/10 bg-black/60 p-6 shadow-xl backdrop-blur-lg transition-all duration-300">
-      <div className="mb-4 flex items-center justify-between border-b border-white/10 pb-3">
-        <h3 className="text-xl font-medium text-white">Image Details</h3>
-        <button
-          onClick={onClose}
-          className="text-white/70 hover:text-white"
-          aria-label="Close info panel"
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -20 }}
+          transition={{ type: "spring", stiffness: 260, damping: 25 }}
+          className="absolute top-10 left-6 z-50 w-[350px] rounded-xl
+                     border border-white/10 bg-black/60 p-6 shadow-xl
+                     backdrop-blur-lg"
         >
-          <X className="h-5 w-5" />
-        </button>
-      </div>
-
-      <div className="space-y-4 text-sm">
-        <div className="flex items-start gap-3">
-          <div className="rounded-lg bg-white/10 p-2">
-            <ImageLucide className="h-5 w-5 text-blue-400" />
-          </div>
-          <div className="min-w-0 flex-1">
-            <p className="text-xs text-white/50">Name</p>
-            <p
-              className="truncate font-medium text-white"
-              title={getImageName()}
+          <div className="mb-4 flex items-center justify-between border-b border-white/10 pb-3">
+            <h3 className="text-xl font-medium text-white">Image Details</h3>
+            <button
+              onClick={onClose}
+              className="text-white/70 hover:text-white"
+              aria-label="Close info panel"
             >
-              {getImageName()}
-            </p>
+              <X className="h-5 w-5" />
+            </button>
           </div>
-        </div>
 
-        <div className="flex items-start gap-3">
-          <div className="rounded-lg bg-white/10 p-2">
-            <Calendar className="h-5 w-5 text-emerald-400" />
-          </div>
-          <div>
-            <p className="text-xs text-white/50">Date</p>
-            <p className="font-medium text-white">{getFormattedDate()}</p>
-          </div>
-        </div>
+          <div className="space-y-4 text-sm">
+            <div className="flex items-start gap-3">
+              <div className="rounded-lg bg-white/10 p-2">
+                <ImageLucide className="h-5 w-5 text-blue-400" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-xs text-white/50">Name</p>
+                <p className="truncate font-medium text-white" title={getImageName()}>
+                  {getImageName()}
+                </p>
+              </div>
+            </div>
 
-        <div className="flex items-start gap-3">
-          <div className="rounded-lg bg-white/10 p-2">
-            <MapPin className="h-5 w-5 text-red-400" />
-          </div>
-          <div className="min-w-0 flex-1">
-            <p className="text-xs text-white/50">Location</p>
-            {currentImage?.metadata?.latitude &&
-            currentImage?.metadata?.longitude ? (
-              <button
-                type="button"
-                onClick={handleLocationClick}
-                className="flex w-full cursor-pointer items-center truncate text-left font-medium text-white hover:underline"
-                title={`Lat: ${currentImage.metadata.latitude}, Lon: ${currentImage.metadata.longitude}`}
-              >
-                {`Lat: ${currentImage.metadata.latitude.toFixed(4)}, Lon: ${currentImage.metadata.longitude.toFixed(4)}`}
-                <SquareArrowOutUpRight className="ml-1 h-[14px] w-[14px]" />
-              </button>
-            ) : (
-              <p className="font-medium text-white">Location not available</p>
-            )}
-          </div>
-        </div>
+            <div className="flex items-start gap-3">
+              <div className="rounded-lg bg-white/10 p-2">
+                <Calendar className="h-5 w-5 text-emerald-400" />
+              </div>
+              <div>
+                <p className="text-xs text-white/50">Date</p>
+                <p className="font-medium text-white">{getFormattedDate()}</p>
+              </div>
+            </div>
 
-        <div className="flex items-start gap-3">
-          <div className="rounded-lg bg-white/10 p-2">
-            <Tag className="h-5 w-5 text-purple-400" />
-          </div>
-          <div className="flex-1">
-            <p className="mb-1 text-xs text-white/50">Tags</p>
-            {currentImage?.tags && currentImage.tags.length > 0 ? (
-              <div className="flex flex-wrap gap-2">
-                {currentImage.tags.map((tag, i) => (
-                  <span
-                    key={i}
-                    className="rounded-full border border-blue-500/30 bg-blue-500/20 px-2 py-1 text-xs text-blue-300"
+            <div className="flex items-start gap-3">
+              <div className="rounded-lg bg-white/10 p-2">
+                <MapPin className="h-5 w-5 text-red-400" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-xs text-white/50">Location</p>
+                {currentImage?.metadata?.latitude &&
+                currentImage?.metadata?.longitude ? (
+                  <button
+                    type="button"
+                    onClick={handleLocationClick}
+                    className="flex w-full items-center truncate text-left font-medium text-white hover:underline"
                   >
-                    {tag}
-                  </span>
-                ))}
+                    {`Lat: ${currentImage.metadata.latitude.toFixed(4)}, Lon: ${currentImage.metadata.longitude.toFixed(4)}`}
+                    <SquareArrowOutUpRight className="ml-1 h-[14px] w-[14px]" />
+                  </button>
+                ) : (
+                  <p className="font-medium text-white">Location not available</p>
+                )}
               </div>
-            ) : (
-              <p className="text-white/60">No tags available</p>
-            )}
-          </div>
-        </div>
+            </div>
 
-        <div className="flex items-start gap-3">
-          <div className="rounded-lg bg-white/10 p-2">
-            <Info className="h-5 w-5 text-amber-400" />
-          </div>
-          <div>
-            <p className="text-xs text-white/50">Position</p>
-            <p className="font-medium text-white">
-              {currentIndex + 1} of {totalImages}
-            </p>
-          </div>
-        </div>
+            <div className="flex items-start gap-3">
+              <div className="rounded-lg bg-white/10 p-2">
+                <Tag className="h-5 w-5 text-purple-400" />
+              </div>
+              <div className="flex-1">
+                <p className="mb-1 text-xs text-white/50">Tags</p>
+                {currentImage?.tags?.length ? (
+                  <div className="flex flex-wrap gap-2">
+                    {currentImage.tags.map((tag, i) => (
+                      <span
+                        key={i}
+                        className="rounded-full border border-blue-500/30 bg-blue-500/20 px-2 py-1 text-xs text-blue-300"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-white/60">No tags available</p>
+                )}
+              </div>
+            </div>
 
-        <div className="mt-4 border-t border-white/10 pt-3">
-          <button
-            className="w-full cursor-pointer rounded-lg bg-white/10 py-2 text-white transition-colors hover:bg-white/20"
-            onClick={async () => {
-              if (currentImage?.path) {
-                try {
-                  await open(currentImage.path);
-                } catch (error) {
-                  console.error('Failed to open file:', error);
-                }
-              }
-            }}
-          >
-            Open Original File
-          </button>
-        </div>
-      </div>
-    </div>
+            <div className="flex items-start gap-3">
+              <div className="rounded-lg bg-white/10 p-2">
+                <Info className="h-5 w-5 text-amber-400" />
+              </div>
+              <div>
+                <p className="text-xs text-white/50">Position</p>
+                <p className="font-medium text-white">
+                  {currentIndex + 1} of {totalImages}
+                </p>
+              </div>
+            </div>
+
+            <div className="mt-4 border-t border-white/10 pt-3">
+              <button
+                className="w-full rounded-lg bg-white/10 py-2 text-white hover:bg-white/20"
+                onClick={async () => {
+                  if (currentImage?.path) {
+                    try {
+                      await open(currentImage.path);
+                    } catch (error) {
+                      console.error('Failed to open file:', error);
+                    }
+                  }
+                }}
+              >
+                Open Original File
+              </button>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 };