diff --git a/package-lock.json b/package-lock.json
index 350b8aac..1866f8f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.9.16",
       "dependencies": {
         "@types/lodash": "^4.14.182",
+        "caniuse-lite": "^1.0.30001600",
         "lodash": "^4.17.21",
         "react-inlinesvg": "^2.3.0",
         "react-player": "^2.9.0",
@@ -12132,10 +12133,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001355",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001355.tgz",
-      "integrity": "sha512-Sd6pjJHF27LzCB7pT7qs+kuX2ndurzCzkpJl6Qct7LPSZ9jn0bkOA8mdgMgmqnQAWLVOOGjLpc+66V57eLtb1g==",
-      "dev": true,
+      "version": "1.0.30001600",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
+      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -12144,6 +12144,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -37299,10 +37303,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001355",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001355.tgz",
-      "integrity": "sha512-Sd6pjJHF27LzCB7pT7qs+kuX2ndurzCzkpJl6Qct7LPSZ9jn0bkOA8mdgMgmqnQAWLVOOGjLpc+66V57eLtb1g==",
-      "dev": true
+      "version": "1.0.30001600",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
+      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ=="
     },
     "capture-exit": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index f7302219..894d8602 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
   },
   "dependencies": {
     "@types/lodash": "^4.14.182",
+    "caniuse-lite": "^1.0.30001600",
     "lodash": "^4.17.21",
     "react-inlinesvg": "^2.3.0",
     "react-player": "^2.9.0",
diff --git a/src/components/inputs/media-import/mediaImport.tsx b/src/components/inputs/media-import/mediaImport.tsx
index 06b2a5d6..c568e6bc 100644
--- a/src/components/inputs/media-import/mediaImport.tsx
+++ b/src/components/inputs/media-import/mediaImport.tsx
@@ -98,7 +98,7 @@ export const MbMediaImport = (props: MediaImportProps) => {
         return
       }
     } else {
-      setInternalErrorMessage('This media type is not accepted')
+      setInternalErrorMessage('This media type is not accepted.')
       return
     }
   }
@@ -132,18 +132,16 @@ export const MbMediaImport = (props: MediaImportProps) => {
         <>
           <div className="pb-12">
             <div
-              className={`flex items-center justify-center w-full rounded-lg bg-gray-100 dark:bg-gray-900 w-full py-24 ${
-                isProfileImage && imageUrl ? 'py-24' : 'overflow-hidden'
-              }`}
+              className={`flex items-center justify-center w-full rounded-lg bg-gray-100 dark:bg-gray-900 w-full py-24 ${isProfileImage && imageUrl ? 'py-24' : 'overflow-hidden'
+                }`}
             >
               <div
-                className={` ${
-                  isProfileImage
-                    ? 'w-24 h-24 sm:h-32 sm:w-32 rounded-full overflow-hidden'
-                    : isHeaderImage
+                className={` ${isProfileImage
+                  ? 'w-24 h-24 sm:h-32 sm:w-32 rounded-full overflow-hidden'
+                  : isHeaderImage
                     ? 'h-32 sm:h-64 w-full'
                     : 'h-48 w-48 sm:h-64 sm:w-64'
-                }`}
+                  }`}
               >
                 <img
                   className="w-full h-full object-cover"
@@ -176,19 +174,17 @@ export const MbMediaImport = (props: MediaImportProps) => {
         <>
           <div className="pb-12">
             <div
-              className={`flex items-center justify-center w-full rounded-lg bg-gray-100 dark:bg-gray-900 w-full py-24 ${
-                isProfileImage && imageUrl ? 'py-24' : 'overflow-hidden'
-              }`}
+              className={`flex items-center justify-center w-full rounded-lg bg-gray-100 dark:bg-gray-900 w-full py-24 ${isProfileImage && imageUrl ? 'py-24' : 'overflow-hidden'
+                }`}
             >
               {imageUrl ? (
                 <div
-                  className={` ${
-                    isProfileImage
-                      ? 'w-24 h-24 sm:h-32 sm:w-32 rounded-full overflow-hidden'
-                      : isHeaderImage
+                  className={` ${isProfileImage
+                    ? 'w-24 h-24 sm:h-32 sm:w-32 rounded-full overflow-hidden'
+                    : isHeaderImage
                       ? 'h-32 sm:h-64 w-full'
                       : 'h-48 w-48 sm:h-64 sm:w-64'
-                  }`}
+                    }`}
                 >
                   <img className="w-full h-full object-cover" src={imageUrl} />
                 </div>
@@ -230,9 +226,8 @@ export const MbMediaImport = (props: MediaImportProps) => {
         </>
       )}
       <div
-        className={`${
-          (uploadedFile || placeholderUrl) && isMobile() ? 'hidden' : ''
-        }`}
+        className={`${(uploadedFile || placeholderUrl) && isMobile() ? 'hidden' : ''
+          }`}
       >
         <div className="flex items-center justify-center w-full">
           <label
@@ -240,15 +235,13 @@ export const MbMediaImport = (props: MediaImportProps) => {
             onDragLeave={handleDragOut}
             onDragOver={handleDrag}
             onDrop={handleDrop}
-            className={`flex flex-col rounded-lg transition-all duration-500 ${
-              dragOverlay
-                ? 'bg-gray-100 dark:bg-gray-900'
-                : 'bg-blue-300-15 dark:bg-blue-100-15 hover:bg-gray-100 dark:hover:bg-gray-900'
-            } w-full py-32 sm:py-48 group text-center cursor-pointer ${
-              internalErrorMessage
+            className={`flex flex-col rounded-lg transition-all duration-500 ${dragOverlay
+              ? 'bg-gray-100 dark:bg-gray-900'
+              : 'bg-blue-300-15 dark:bg-blue-100-15 hover:bg-gray-100 dark:hover:bg-gray-900'
+              } w-full py-32 sm:py-48 group text-center cursor-pointer ${internalErrorMessage
                 ? 'ring-1 ring-error-300 dark:ring-error-100'
                 : ''
-            }`}
+              }`}
           >
             <div className="h-full w-full text-center flex flex-col items-center justify-center p-med-90 relative">
               <p className="text-blue-300 dark:text-blue-100">Upload File</p>
diff --git a/src/consts/fileFormats.ts b/src/consts/fileFormats.ts
index cf9e28ff..daae86f6 100644
--- a/src/consts/fileFormats.ts
+++ b/src/consts/fileFormats.ts
@@ -12,7 +12,7 @@ export const THREED_TYPES = [
   'application/octet-stream',
   'glb',
 ]
-export const FILE_TYPES = ['application/pdf']
+export const FILE_TYPES = ['application/pdf', 'application/zip']
 
 export const ALL_TYPES = [
   ...IMAGE_TYPES,