diff --git a/frontend/src/components/MetadataParser.tsx b/frontend/src/components/MetadataParser.tsx
index 9d69e1e..41c86cd 100644
--- a/frontend/src/components/MetadataParser.tsx
+++ b/frontend/src/components/MetadataParser.tsx
@@ -5,7 +5,6 @@ import {
   Chip,
   Stack,
   Paper,
-  Grid,
   Accordion,
   AccordionSummary,
   AccordionDetails,
@@ -13,6 +12,7 @@ import {
   IconButton,
   Tooltip,
 } from '@mui/material';
+import Grid from '@mui/material/GridLegacy';
 import {
   ExpandMore as ExpandMoreIcon,
   PhotoCamera as CameraIcon,
@@ -341,9 +341,9 @@ const MetadataParser: React.FC<MetadataParserProps> = ({
         {parsedSections.slice(0, 2).map((section, index) => (
           <Box key={index} sx={{ mb: 2 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-              {React.cloneElement(section.icon, { 
-                sx: { fontSize: 16, mr: 1, color: modernTokens.colors.primary[500] } 
-              })}
+              <Box sx={{ fontSize: 16, mr: 1, color: modernTokens.colors.primary[500], display: 'inline-flex' }}>
+                {section.icon}
+              </Box>
               <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                 {section.category}
               </Typography>
@@ -393,9 +393,9 @@ const MetadataParser: React.FC<MetadataParserProps> = ({
               },
             }}
           >
-            {React.cloneElement(section.icon, { 
-              sx: { fontSize: 20, mr: 1, color: modernTokens.colors.primary[500] } 
-            })}
+            <Box sx={{ fontSize: 20, mr: 1, color: modernTokens.colors.primary[500], display: 'inline-flex' }}>
+              {section.icon}
+            </Box>
             <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
               {section.category}
             </Typography>
diff --git a/frontend/src/components/ProcessingTimeline.tsx b/frontend/src/components/ProcessingTimeline.tsx
index 2740dee..39161d0 100644
--- a/frontend/src/components/ProcessingTimeline.tsx
+++ b/frontend/src/components/ProcessingTimeline.tsx
@@ -170,7 +170,7 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
     setLoadingHistory(true);
     try {
       // Note: This endpoint might not exist yet, it's for future implementation
-      const response = await documentService.getRetryHistory?.(documentId);
+      const response = await documentService.getDocumentRetryHistory(documentId);
       if (response?.data?.retry_history) {
         setRetryHistory(response.data.retry_history);
       }
diff --git a/frontend/src/pages/DocumentDetailsPage.tsx b/frontend/src/pages/DocumentDetailsPage.tsx
index 68fb230..3ab625b 100644
--- a/frontend/src/pages/DocumentDetailsPage.tsx
+++ b/frontend/src/pages/DocumentDetailsPage.tsx
@@ -47,7 +47,7 @@ import {
   Speed as SpeedIcon,
   MoreVert as MoreIcon,
 } from '@mui/icons-material';
-import { documentService, OcrResponse } from '../services/api';
+import { documentService, OcrResponse, type Document } from '../services/api';
 import DocumentViewer from '../components/DocumentViewer';
 import LabelSelector from '../components/Labels/LabelSelector';
 import { type LabelData } from '../components/Labels/Label';
@@ -59,23 +59,6 @@ import { RetryHistoryModal } from '../components/RetryHistoryModal';
 import { modernTokens, glassEffect } from '../theme';
 import api from '../services/api';
 
-interface Document {
-  id: string;
-  original_filename: string;
-  filename?: string;
-  file_size: number;
-  mime_type: string;
-  created_at: string;
-  updated_at: string;
-  user_id: string;
-  file_hash?: string;
-  has_ocr_text?: boolean;
-  tags?: string[];
-  original_created_at?: string;
-  original_modified_at?: string;
-  source_metadata?: any;
-}
-
 const DocumentDetailsPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
@@ -520,9 +503,9 @@ const DocumentDetailsPage: React.FC = () => {
                           }
                         }}
                       >
-                        {React.cloneElement(getFileIcon(document.mime_type), {
-                          sx: { fontSize: 120, color: modernTokens.colors.primary[400] }
-                        })}
+                        <Box sx={{ fontSize: 120, color: modernTokens.colors.primary[400], display: 'flex' }}>
+                          {getFileIcon(document.mime_type)}
+                        </Box>
                       </Box>
                     )}
                   </Box>
@@ -664,7 +647,6 @@ const DocumentDetailsPage: React.FC = () => {
                   userId={document.user_id}
                   ocrStatus={document.has_ocr_text ? 'completed' : 'pending'}
                   ocrCompletedAt={ocrData?.ocr_completed_at}
-                  ocrRetryCount={ocrData?.ocr_retry_count}
                   ocrError={ocrData?.ocr_error}
                 />
                 
diff --git a/frontend/src/pages/DocumentsPage.tsx b/frontend/src/pages/DocumentsPage.tsx
index 1c4f0b7..a9e4603 100644
--- a/frontend/src/pages/DocumentsPage.tsx
+++ b/frontend/src/pages/DocumentsPage.tsx
@@ -141,9 +141,11 @@ const DocumentsPage: React.FC = () => {
   useEffect(() => {
     fetchDocuments();
     fetchLabels();
-  }, [pagination.limit, pagination.offset, ocrFilter]);
+  }, [pagination?.limit, pagination?.offset, ocrFilter]);
 
   const fetchDocuments = async (): Promise<void> => {
+    if (!pagination) return;
+    
     try {
       setLoading(true);
       const response = await documentService.listWithPagination(
@@ -151,8 +153,8 @@ const DocumentsPage: React.FC = () => {
         pagination.offset, 
         ocrFilter || undefined
       );
-      setDocuments(response.data.documents);
-      setPagination(response.data.pagination);
+      setDocuments(response.data.documents || []);
+      setPagination(response.data.pagination || { total: 0, limit: 20, offset: 0, has_more: false });
     } catch (err) {
       setError('Failed to load documents');
       console.error(err);
@@ -258,7 +260,7 @@ const DocumentsPage: React.FC = () => {
     });
   };
 
-  const filteredDocuments = documents.filter(doc =>
+  const filteredDocuments = (documents || []).filter(doc =>
     doc.original_filename.toLowerCase().includes(searchQuery.toLowerCase()) ||
     doc.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
   );
diff --git a/frontend/src/services/__mocks__/api.ts b/frontend/src/services/__mocks__/api.ts
index 9218112..411d4b9 100644
--- a/frontend/src/services/__mocks__/api.ts
+++ b/frontend/src/services/__mocks__/api.ts
@@ -41,11 +41,18 @@ export interface Document {
   mime_type: string
   tags: string[]
   created_at: string
+  updated_at?: string
+  user_id?: string
+  file_hash?: string
   has_ocr_text: boolean
   ocr_confidence?: number
   ocr_word_count?: number
   ocr_processing_time_ms?: number
   ocr_status?: string
+  // New metadata fields
+  original_created_at?: string
+  original_modified_at?: string
+  source_metadata?: Record<string, any>
 }
 
 export interface SearchRequest {
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 3d1da67..b2a71e7 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -18,6 +18,9 @@ export interface Document {
   mime_type: string
   tags: string[]
   created_at: string
+  updated_at?: string
+  user_id?: string
+  file_hash?: string
   has_ocr_text: boolean
   ocr_confidence?: number
   ocr_word_count?: number