diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index 5b919b2..a378b5f 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -1216,9 +1216,10 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
     })();
 
     if (isMedia && file.checksum && viewMode === 'grid') {
+      const isDoc = file.name.endsWith('.docx') || file.name.endsWith('.pptx') || file.name.endsWith('.xlsx');
       return (
         <div className="relative w-full h-full flex items-center justify-center overflow-hidden rounded-md">
-          <ThumbnailImage checksum={file.checksum} fallbackIcon={fallbackIcon} downloadToken={downloadToken} />
+          <ThumbnailImage checksum={file.checksum} fallbackIcon={fallbackIcon} downloadToken={downloadToken} isDocument={isDoc} />
         </div>
       );
     }
diff --git a/frontend/src/components/OfficeHome.tsx b/frontend/src/components/OfficeHome.tsx
index 6466217..9106662 100644
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@@ -244,7 +244,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
         >
           {file.checksum ? (
             <div className="absolute inset-0 w-full h-full flex items-center justify-center z-0">
-              <ThumbnailImage checksum={file.checksum} fallbackIcon={<Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />} downloadToken={downloadToken} />
+              <ThumbnailImage checksum={file.checksum} fallbackIcon={<Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />} downloadToken={downloadToken} isDocument={true} />
             </div>
           ) : (
             <Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />
diff --git a/frontend/src/components/ThumbnailImage.tsx b/frontend/src/components/ThumbnailImage.tsx
index 65eab5c..ef91d2b 100644
--- a/frontend/src/components/ThumbnailImage.tsx
+++ b/frontend/src/components/ThumbnailImage.tsx
@@ -5,9 +5,10 @@ interface ThumbnailImageProps {
   checksum: string;
   fallbackIcon: React.ReactNode;
   downloadToken: string;
+  isDocument?: boolean;
 }
 
-export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken }: ThumbnailImageProps) {
+export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken, isDocument }: ThumbnailImageProps) {
   const [errorCount, setErrorCount] = useState(0);
   const [key, setKey] = useState(0);
   const [showFallback, setShowFallback] = useState(false);
@@ -18,8 +19,8 @@ export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken }
         key={key}
         src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''}
         alt=""
-        className="w-full h-full object-contain bg-white border border-black/10 dark:border-white/10 shadow-sm rounded-sm"
-        style={{ display: showFallback ? 'none' : 'block', padding: '2px' }}
+        className={`object-contain ${isDocument ? 'max-w-[85%] max-h-[85%] bg-white border border-gray-300 dark:border-gray-600 shadow-md' : 'w-full h-full'}`}
+        style={{ display: showFallback ? 'none' : 'block' }}
         onError={(e) => {
           if (errorCount < 20) {
             e.currentTarget.style.display = 'none';