diff --git a/theme/flatcard.html b/theme/flatcard.html
index 0f7e875..41ce390 100644
--- a/theme/flatcard.html
+++ b/theme/flatcard.html
@@ -59,6 +59,74 @@
         .list-table .size,.list-table .updated_at{text-align:right}
         .updated_at{width:25%}
         .size{width:15%}
+        .list-table tbody.grid-view {
+            display: flex;
+            flex-wrap: wrap;
+            position: relative;
+            width: 100%;
+            grid-template: repeat(auto-fill, 100px) / repeat(auto-fill, minmax(100px, 50%));
+            grid-auto-rows: 100px;
+        }
+        .list-table tbody.grid-view td, .list-table tbody.grid-view th {
+            padding:0;
+        }
+        
+        .list-table tbody.grid-view img {
+            height: 150px;
+            width: 100%;
+            object-fit: cover;
+            position:relative;
+        }
+        .list-table tbody.grid-view #tr0{
+            width: 100%;
+            height: 33px;
+            background-color: unset !important;
+        }
+        .list-table  tbody.grid-view tr {
+            width: unset;
+            height: 150px;
+            background-color: #efefef;
+            margin: 2px;
+            position: relative;
+            flex-grow: 1;
+            min-width: 100px;
+        }
+        .list-table tbody.grid-view td.file {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        .list-table tbody.grid-view td.file a {
+            width: 100%;
+            height: 100%;
+            display: inline-block;
+            position:relative
+        }
+        .list-table tbody.grid-view td.file .download {
+            display: none;
+        }
+        .list-table tbody.grid-view td.file ion-icon{
+            position: absolute;
+            top: calc(50% - 25px);
+            left: calc(50% - 25px);
+            width: 50px;
+            height: 50px;
+            color: #0002
+        }
+        .list-table tbody.grid-view td.updated_at {
+            position: absolute;
+            bottom: 0px;
+            height: 1.5em;
+            overflow-y: hidden;
+            width: 100%;
+            background-image: linear-gradient(#ffffff00, #0000008f);
+            color: #fffc;
+            z-index: 3;
+        }
+        .list-table tbody.grid-view td.size {
+            display: none;
+        }
         .mask{position:absolute;left:0px;top:0px;width:100%;background-color:#000;filter:alpha(opacity=50);opacity:0.5;z-index:2;}
 <!--AdminStart-->
         #top-op {position: absolute;color: white;font-size: 12px;}
@@ -681,6 +749,11 @@
     function showthumbnails(obj) {
         images = [<!--ImgExts-->];
         var files=document.getElementsByName('filelist');
+
+        // turn to grid view
+        var list_body = document.getElementById('list-table').firstElementChild
+        list_body.classList.add('grid-view')
+
         for ($i=0;$i<files.length;$i++) {
             str=files[$i].innerText;
             if (str.substr(-1)==' ') str=str.substr(0,str.length-1);