diff --git a/src/components/shared/AuthenticatedImage.tsx b/src/components/shared/AuthenticatedImage.tsx
index fe26491..e06028c 100644
--- a/src/components/shared/AuthenticatedImage.tsx
+++ b/src/components/shared/AuthenticatedImage.tsx
@@ -29,7 +29,15 @@ export const AuthenticatedImage = ({
   alt = "Image",
   ...props
 }: AuthenticatedImageProps): ReactElement => {
-  const cacheKey = fileId || src;
+  // Helper to extract fileId from backend preview URL
+  const extractFileIdFromUrl = (url: string | null | undefined): string | null => {
+    if (!url) return null;
+    const match = url.match(/\/files\/([a-f0-9-]{36})\/preview/i);
+    return match ? match[1] : null;
+  };
+
+  const extractedFileId = fileId || extractFileIdFromUrl(src);
+  const cacheKey = extractedFileId || src;
 
   // 1. Initialize state from cache immediately to prevent blank flash or redundant requests on remount
   const [blobUrl, setBlobUrl] = useState<string | null>(() => {
@@ -65,7 +73,7 @@ export const AuthenticatedImage = ({
   };
 
   const isBackendUrl = getIsBackendUrl(src);
-  const isAuthRequired = !!(fileId || isBackendUrl);
+  const isAuthRequired = !!(extractedFileId || isBackendUrl);
 
   useEffect(() => {
     // If it's already a blob URL (local preview) or a data URL, use it directly
@@ -100,8 +108,8 @@ export const AuthenticatedImage = ({
         try {
           const fetchPromise = (async () => {
             let url: string;
-            if (fileId) {
-              url = await fileService.getPreview(fileId);
+            if (extractedFileId) {
+              url = await fileService.getPreview(extractedFileId);
             } else {
               // If useBackendUrl is true, src is guaranteed to be non-null
               const response = await apiClient.get(src!, {