diff --git a/src/Components/Common/FilePreviewDialog.tsx b/src/Components/Common/FilePreviewDialog.tsx
index 9bf9780c7a3..b4443d330ea 100644
--- a/src/Components/Common/FilePreviewDialog.tsx
+++ b/src/Components/Common/FilePreviewDialog.tsx
@@ -32,6 +32,19 @@ type FilePreviewProps = {
   fixedWidth?: boolean;
 };
 
+const previewExtensions = [
+  ".html",
+  ".htm",
+  ".pdf",
+  ".mp4",
+  ".webm",
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".webp",
+];
+
 const FilePreviewDialog = (props: FilePreviewProps) => {
   const { show, onClose, file_state, setFileState, downloadURL, fileUrl } =
     props;
@@ -130,13 +143,21 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                   }}
                   pageNumber={page}
                 />
-              ) : (
+              ) : previewExtensions.includes(file_state.extension) ? (
                 <iframe
                   sandbox=""
                   title="Source Files"
                   src={fileUrl}
                   className="h-[75vh] w-full"
                 />
+              ) : (
+                <div className="flex h-full w-full flex-col items-center justify-center">
+                  <CareIcon
+                    icon="l-file"
+                    className="mb-4 text-5xl text-gray-600"
+                  />
+                  Can't preview this file. Try downloading it.
+                </div>
               )}
             </div>
           </div>
diff --git a/src/Utils/useFileManager.tsx b/src/Utils/useFileManager.tsx
index 789cc169334..89ffebb2972 100644
--- a/src/Utils/useFileManager.tsx
+++ b/src/Utils/useFileManager.tsx
@@ -281,7 +281,7 @@ export default function useFileManager(
           <CareIcon icon="l-archive" className="mr-2" />
           This file has been archived and cannot be unarchived.
         </div>
-        <div className="grid grid-cols-2 gap-4">
+        <div className="flex flex-col gap-4 md:grid md:grid-cols-2">
           {[
             {
               label: "File Name",