diff --git a/Views/Home/ProjectList.cshtml b/Views/Home/ProjectList.cshtml
index 5470f84..1e5b282 100644
--- a/Views/Home/ProjectList.cshtml
+++ b/Views/Home/ProjectList.cshtml
@@ -4,6 +4,52 @@
 @{
     Layout = "_LooperLayout";
 }
+
+@section Style {
+    <style type="text/css">
+        .cards tbody tr {
+            float: left;
+            width: 19rem;
+            margin: 0.5rem;
+            border: 0.0625rem solid rgba(0, 0, 0, .125);
+            border-radius: .25rem;
+            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
+        }
+
+        .cards tbody td {
+            display: block;
+        }
+
+        .cards thead {
+            display: none;
+        }
+
+        .cards td:before {
+            content: attr(data-label);
+            position: relative;
+            float: left;
+            color: #808080;
+            min-width: 4rem;
+            margin-left: 0;
+            margin-right: 1rem;
+            text-align: left;
+        }
+
+        tr.selected td:before {
+            color: #CCC;
+        }
+
+        .table .avatar {
+            width: 50px;
+        }
+
+        .cards .avatar {
+            width: 150px;
+            height: 150px;
+            margin: 15px;
+        }
+    </style>
+}
 @section Script {
     <script src="~/assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
     <script src="~/assets/vendor/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
diff --git a/wwwroot/assets/javascript/custom/globalJS.js b/wwwroot/assets/javascript/custom/globalJS.js
index 807ac0c..90e4758 100644
--- a/wwwroot/assets/javascript/custom/globalJS.js
+++ b/wwwroot/assets/javascript/custom/globalJS.js
@@ -284,9 +284,9 @@ function checkUrl(url) {
     var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
         '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
         '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-        '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-        '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+        '(\\:\\d+)?(\\/[-a-z\\d@%_.~+]*)*' + // port and path
+        '(\\?[;&a-z\\d@%_.~+=-]*)?' + // query string
+        '(\\#[-a-z\\d@_]*)?$', 'i'); // fragment locator
     return !!pattern.test(url);
 }
 
diff --git a/wwwroot/assets/javascript/custom/kollist.js b/wwwroot/assets/javascript/custom/kollist.js
index 207b2dc..9611554 100644
--- a/wwwroot/assets/javascript/custom/kollist.js
+++ b/wwwroot/assets/javascript/custom/kollist.js
@@ -902,14 +902,20 @@ $(document).ready(function () {
                     lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
                     pageLength: 25,
                     buttons: [
-                        //{
-                        //    text: '休假設定',
-                        //    action: function (e, dt, node, config) {
-                        //        vacationBtnFun();
+                        // {
+                        //    'text': '<i class="fa fa-id-badge fa-fw" aria-hidden="true"></i>',
+                        //    'action': function (e, dt, node) {
 
+                        //        $(dt.table().node()).toggleClass('cards');
+                        //        $('.fa', node).toggleClass(['fa-table', 'fa-id-badge']);
+
+                        //        dt.draw('page');
+                        //    },
+                        //    'className': 'btn-sm',
+                        //    'attr': {
+                        //        'title': 'Change views',
                         //    }
-                        //},
-                        //'excelHtml5'
+                        //}
                     ],
                     language: {
                         paginate: {