diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 656a764..8018250 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -65,13 +65,13 @@ const FileListItem: FunctionComponent<{
         </div>
         <div className="truncate">{c.name}</div>
       </div>
-      <div className="invisible md:visible font-mono text-sm col-span-2 text-gray-700">
+      <div className="hidden md:block font-mono text-sm col-span-2 text-gray-700">
         {new Date(c.lastModifiedDateTime).toLocaleString(undefined, {
           dateStyle: 'short',
           timeStyle: 'short',
         })}
       </div>
-      <div className="invisible md:visible font-mono text-sm text-gray-700">{humanFileSize(c.size)}</div>
+      <div className="hidden md:block font-mono text-sm text-gray-700">{humanFileSize(c.size)}</div>
     </div>
   )
 }
@@ -130,8 +130,8 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
       <div className="bg-white shadow rounded">
         <div className="p-3 grid grid-cols-10 items-center space-x-2 border-b border-gray-200">
           <div className="col-span-10 md:col-span-7 font-bold">Name</div>
-          <div className="invisible md:visible font-bold col-span-2">Last Modified</div>
-          <div className="invisible md:visible font-bold">Size</div>
+          <div className="hidden md:block font-bold col-span-2">Last Modified</div>
+          <div className="hidden md:block font-bold">Size</div>
         </div>
 
         {imagesInFolder.length !== 0 && (
@@ -197,6 +197,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
 
         case preview.video:
           return <VideoPreview file={resp} />
+
         case preview.audio:
           return <AudioPreview file={resp} />