diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index fbbb47c..97f10f2 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -25,6 +25,7 @@ import useApiError from './hooks/useApiError';
 import SkeuomorphicWorkspace from './skeuomorphic_ws';
 import { DownloadIcon, EditIcon } from './ui/icons';
 import { generateRandomTagColor, getTagColorStyle, HEX_COLOR_PATTERN } from './utils/colors';
+import { formatFileSize } from './utils/format';
 import Sidebar from './sidebar/Sidebar';
 import DocumentsTable, { FilterBar } from './documents/DocumentsTable';
 
@@ -481,6 +482,7 @@ const DetailPanel = ({
       : null;
     const isEditingTitle = titleEditDocId === singleDoc.id;
     const sizeBytes = Number(singleDoc.current_version?.size_bytes) || 0;
+    const sizeLabel = sizeBytes > 0 ? formatFileSize(sizeBytes) : '—';
     const issuedAt = singleDoc.issued_at
       ? new Date(singleDoc.issued_at).toLocaleString()
       : '—';
@@ -557,7 +559,7 @@ const DetailPanel = ({
           </div>
           <div>
             <strong>Size:</strong>{' '}
-            {sizeBytes ? `${(sizeBytes / 1024).toFixed(1)} KB` : '—'}
+            {sizeLabel}
           </div>
           <div>
             <strong>Type:</strong> {singleDoc.content_type || 'Unknown'}
@@ -652,9 +654,7 @@ const DetailPanel = ({
 
   const renderBulk = () => {
     const countLabel = `${selectedCount} document${selectedCount === 1 ? '' : 's'}`;
-    const sizeLabel = stackTotalSizeBytes
-      ? `${(stackTotalSizeBytes / 1024).toFixed(1)} KB`
-      : '—';
+    const sizeLabel = stackTotalSizeBytes ? formatFileSize(stackTotalSizeBytes) : '—';
 
     return (
       <>
@@ -773,6 +773,7 @@ const PreviewWorkspace = ({
     ? resolveApiPath(document.current_version.download_path)
     : null;
   const sizeBytes = Number(document.current_version?.size_bytes) || 0;
+  const sizeLabel = sizeBytes > 0 ? formatFileSize(sizeBytes) : null;
   const metadata =
     document.metadata && Object.keys(document.metadata).length > 0 ? document.metadata : null;
 
@@ -791,7 +792,7 @@ const PreviewWorkspace = ({
             <h2>{title}</h2>
             <span className="meta">
               {document.content_type || mime}
-              {sizeBytes ? ` · ${(sizeBytes / 1024 / 1024).toFixed(2)} MB` : ''}
+              {sizeLabel ? ` · ${sizeLabel}` : ''}
             </span>
           </div>
         </div>
diff --git a/frontend/src/utils/format.js b/frontend/src/utils/format.js
new file mode 100644
index 0000000..b6fea6e
--- /dev/null
+++ b/frontend/src/utils/format.js
@@ -0,0 +1,18 @@
+export const formatFileSize = (value) => {
+  const bytes = Number(value);
+  if (!Number.isFinite(bytes) || bytes <= 0) {
+    return '0 B';
+  }
+
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
+  let index = 0;
+  let amount = bytes;
+
+  while (amount >= 1024 && index < units.length - 1) {
+    amount /= 1024;
+    index += 1;
+  }
+
+  return `${amount.toFixed(2)} ${units[index]}`;
+};
+