diff --git a/src/components/report/ReportDetailModal.tsx b/src/components/report/ReportDetailModal.tsx
index 10013c6..9099c5a 100644
--- a/src/components/report/ReportDetailModal.tsx
+++ b/src/components/report/ReportDetailModal.tsx
@@ -110,7 +110,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
 
       {/* Modal */}
       <div className="flex min-h-full items-center justify-center p-4">
-        <div className="relative bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto z-[10000]">
+        <div className="relative bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[85vh] overflow-y-auto z-[10000]">
           {/* Close Button */}
           <button
             onClick={onClose}
@@ -126,7 +126,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
             <img
               src={report.photoUrls[currentPhotoIndex]}
               alt={`Report photo ${currentPhotoIndex + 1}`}
-              className="w-full h-96 object-contain"
+              className="w-full h-64 object-contain"
             />
 
             {/* Photo Navigation */}
@@ -158,12 +158,12 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
           </div>
 
           {/* Content */}
-          <div className="p-6 space-y-6">
+          <div className="p-4 space-y-4">
             {/* Header with Verification Status */}
             <div className="flex items-start justify-between">
               <div>
-                <h2 className="text-2xl font-bold text-gray-900">Litter Report</h2>
-                <p className="text-sm text-gray-500 mt-1">
+                <h2 className="text-xl font-bold text-gray-900">Litter Report</h2>
+                <p className="text-xs text-gray-500 mt-1">
                   Reported {format(new Date(report.createdAt), 'PPP')} at {format(new Date(report.createdAt), 'p')}
                 </p>
               </div>
@@ -174,7 +174,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
             </div>
 
             {/* Reporter Info */}
-            <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
+            <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
               {report.user.avatarUrl ? (
                 <img
                   src={report.user.avatarUrl}
@@ -193,19 +193,19 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
             </div>
 
             {/* Litter Details */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="p-4 border border-gray-200 rounded-lg">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="p-3 border border-gray-200 rounded-lg">
                 <p className="text-sm text-gray-500 mb-1">Litter Type</p>
                 <p className="font-semibold text-gray-900">{getLitterTypeLabel(report.litterType)}</p>
               </div>
-              <div className="p-4 border border-gray-200 rounded-lg">
+              <div className="p-3 border border-gray-200 rounded-lg">
                 <p className="text-sm text-gray-500 mb-1">Quantity</p>
                 <p className="font-semibold text-gray-900">{getQuantityLabel(report.quantity)}</p>
               </div>
             </div>
 
             {/* Location */}
-            <div className="p-4 border border-gray-200 rounded-lg">
+            <div className="p-3 border border-gray-200 rounded-lg">
               <p className="text-sm text-gray-500 mb-2">Location</p>
               <div className="space-y-1">
                 <p className="font-mono text-sm text-gray-900">
@@ -220,7 +220,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
 
             {/* Description */}
             {report.description && (
-              <div className="p-4 border border-gray-200 rounded-lg">
+              <div className="p-3 border border-gray-200 rounded-lg">
                 <p className="text-sm text-gray-500 mb-2">Description</p>
                 <p className="text-gray-900">{report.description}</p>
               </div>
@@ -228,7 +228,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
 
             {/* Photo Timestamp */}
             {report.photoTimestamp && (
-              <div className="p-4 border border-gray-200 rounded-lg">
+              <div className="p-3 border border-gray-200 rounded-lg">
                 <p className="text-sm text-gray-500 mb-1">Photo Taken</p>
                 <p className="text-gray-900">
                   {format(new Date(report.photoTimestamp), 'PPP')} at {format(new Date(report.photoTimestamp), 'p')}
@@ -238,7 +238,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
 
             {/* Environmental Concerns */}
             {report.environmentalConcerns && report.environmentalConcerns.length > 0 && (
-              <div className="border border-gray-200 rounded-lg p-4">
+              <div className="border border-gray-200 rounded-lg p-3">
                 <p className="text-sm text-gray-500 mb-3">Environmental Concerns</p>
                 <div className="space-y-3">
                   {report.environmentalConcerns.map((concern) => (
@@ -265,7 +265,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
             )}
 
             {/* Verification Stats */}
-            <div className="border border-gray-200 rounded-lg p-4">
+            <div className="border border-gray-200 rounded-lg p-3">
               <div className="flex items-center justify-between mb-3">
                 <h3 className="font-semibold text-gray-900">Verification Status</h3>
                 {report.verifications && report.verifications.length > 0 && (
@@ -322,10 +322,10 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
 
               {/* Audit Log */}
               {showAuditLog && report.verifications && report.verifications.length > 0 && (
-                <div className="mt-4 space-y-3">
-                  <div className="border-t border-gray-200 pt-3">
-                    <h4 className="text-sm font-medium text-gray-700 mb-3">Verification History</h4>
-                    <div className="space-y-2 max-h-60 overflow-y-auto">
+                <div className="mt-3 space-y-2">
+                  <div className="border-t border-gray-200 pt-2">
+                    <h4 className="text-sm font-medium text-gray-700 mb-2">Verification History</h4>
+                    <div className="space-y-2 max-h-40 overflow-y-auto">
                       {report.verifications
                         .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
                         .map((verification) => (
@@ -376,8 +376,8 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
 
             {/* Action Buttons */}
             {(onVerify || onDispute) && (
-              <div className="border-t border-gray-200 pt-6">
-                <p className="text-sm text-gray-700 mb-4">
+              <div className="border-t border-gray-200 pt-4">
+                <p className="text-sm text-gray-700 mb-3">
                   Help maintain data quality by verifying or disputing this report.
                 </p>