diff --git a/src/_h5ai/client/css/inc/view-details.less b/src/_h5ai/client/css/inc/view-details.less
index 4f5ea4bf..01687831 100644
--- a/src/_h5ai/client/css/inc/view-details.less
+++ b/src/_h5ai/client/css/inc/view-details.less
@@ -1,85 +1,105 @@
 
 .view-details-sized(@size) {
 
-    li {
+    .item {
 
-        &.item {
-
-            a, a:active, a:visited {
-                height: @size + 14px;
-            }
-
-            .label, .date, .size {
-                padding: ((@size - 4px)/2) 8px;
-            }
+        a, a:active, a:visited {
+            height: @size + 14px;
         }
 
-        .icon.square {
+        .label, .date, .size {
+            padding: (@size/2 - 2px) 8px;
+        }
+    }
+
+    .icon.square {
+        width: @size;
+
+        img {
             width: @size;
-
-            img {
-                width: @size;
-                height: @size;
-            }
+            height: @size;
         }
+    }
 
-        .label {
-            margin: 0 246px 0 (@size + 32px);
-        }
+    .label {
+        margin: 0 246px 0 (@size + 32px);
     }
 }
 
 
 #view.view-details {
 
-    li {
+    .header {
+        display: list-item;
+        background: #fafafa;
         border-bottom: 1px solid rgba(0,0,0,0.065);
 
-        &.header {
-            display: list-item;
-        }
+        a, a:active, a:visited {
+            padding: 12px 8px;
+            opacity: 0.4;
+            .transition(all 0.2s ease-in-out);
 
-        &.item {
-            background: #fff;
-
-            a, a:active, a:visited {
-
-                &:hover, &.hover {
-                    border-color: @item-border-col-hover;
-                }
-            }
-
-            // needs to be here, to not conflict with header fields
-            .icon {
-                padding: 8px;
+            &:hover {
+                color: #555;
+                opacity: 0.9;
             }
         }
 
-        .icon.square {
-            display: inline-block;
-            position: absolute;
-            left: 16px;
-            top: -1px;
+        img {
+            display: none;
+            position: relative;
+            top: -2px;
+            width: 12px;
+            height: 12px;
+            padding: 0 8px;
         }
 
-        .date {
-            position: absolute;
-            right: 116px;
-            top: 0;
-        }
-
-        .size {
-            position: absolute;
-            right: 16px;
-            top: 0;
-        }
-
-        .selector {
-            margin-top: -1px;
+        .ascending img.ascending,
+        .descending img.descending {
+            display: inline;
         }
     }
 
-    .view-details-sized(@icon-size);
+    .item {
+        border-bottom: 1px solid rgba(0,0,0,0.065);
+
+        a, a:active, a:visited {
+
+            &:hover, &.hover {
+                border-color: @item-border-col-hover;
+            }
+        }
+
+        // needs to be here, to not conflict with header fields
+        .icon {
+            padding: 8px;
+        }
+    }
+
+    .icon.square {
+        display: inline-block;
+        position: absolute;
+        left: 16px;
+        top: -1px;
+    }
+
+    .date {
+        position: absolute;
+        right: 116px;
+        top: 0;
+    }
+
+    .size {
+        position: absolute;
+        right: 16px;
+        top: 0;
+    }
+
+    .selector {
+        margin-top: -1px;
+    }
+
+    .view-details-sized(24px);
 
     &.size-16 {
         .view-details-sized(16px)
diff --git a/src/_h5ai/client/css/inc/view-grid.less b/src/_h5ai/client/css/inc/view-grid.less
index eb02af5e..9ddef142 100644
--- a/src/_h5ai/client/css/inc/view-grid.less
+++ b/src/_h5ai/client/css/inc/view-grid.less
@@ -1,31 +1,16 @@
 
 .view-grid-sized(@size) {
 
-    li {
+    .label {
+        padding: (@size/2 - 9px) 8px;
+    }
 
-        &.item {
+    .icon.square {
+        width: @size;
 
-            a, a:active, a:visited {
-                width: @size + 182px;
-                height: @size + 14px;
-            }
-
-            .label, .date, .size {
-                padding: ((@size - 4px)/2) 8px;
-            }
-        }
-
-        .icon.square {
+        img {
             width: @size;
-
-            img {
-                width: @size;
-                height: @size;
-            }
-        }
-
-        .label {
-            margin: 0 0 0 (@size + 8px);
+            height: @size;
         }
     }
 }
@@ -35,57 +20,37 @@
 
     margin: 8px;
 
-    li {
+    .item {
+        float: left;
+        margin: 8px;
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
 
-        &.item {
-            float: left;
-            margin: 8px;
-            background: #fff;
-            box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
-
-            a, a:active, a:visited {
-                border: 1px solid rgba(0,0,0,0);
-
-                &:hover, &.hover {
-                    border-color: @item-border-col-hover;
-                }
-            }
-
-            // needs to be here, to not conflict with header fields
-            .icon {
-                padding: 8px;
-            }
-        }
-
-        .icon.square {
-            display: inline-block;
-            position: absolute;
-            left: 0;
-        }
-
-        .label {
-            display: block;
-        }
-
-        .date, .size {
-            display: none;
+        &:hover, &.hover {
+            box-shadow: 0 1px 10px 0px rgba(0,0,0,0.5);
         }
     }
 
-    .view-grid-sized(@icon-size);
-
-    &.size-16 {
-        .view-grid-sized(16px)
+    .icon.square {
+        display: inline-block;
+        vertical-align: top;
+        background: #fafafa;
     }
 
-    &.size-24 {
-        .view-grid-sized(24px)
+    .label {
+        display: inline-block;
+        vertical-align: top;
+        width: 180px;
     }
 
-    &.size-32 {
-        .view-grid-sized(32px)
+    .date, .size {
+        display: none;
     }
 
+    .view-grid-sized(48px);
+
+    &.size-16,
+    &.size-24,
+    &.size-32,
     &.size-48 {
         .view-grid-sized(48px)
     }
diff --git a/src/_h5ai/client/css/inc/view-icons.less b/src/_h5ai/client/css/inc/view-icons.less
index dcdf6cb1..901b579b 100644
--- a/src/_h5ai/client/css/inc/view-icons.less
+++ b/src/_h5ai/client/css/inc/view-icons.less
@@ -1,77 +1,50 @@
 
 .view-icons-sized(@size) {
 
-    li {
+    .item {
+        width: @size * 4/3;
+    }
 
-        &.item {
+    .icon.rational {
 
-            a, a:active, a:visited {
-                width: @size * 4/3;
-            }
+        img {
+            width: @size;
+            height: @size;
         }
 
-        .icon.rational {
-
-            img {
-                width: @size;
-                height: @size;
-            }
-
-            .thumb {
-                width: @size * 4/3;
-                height: @size;
-            }
+        .thumb {
+            width: @size * 4/3;
+            height: @size;
         }
     }
 }
 
 
-@minsize: 64px;
-
-
 #view.view-icons {
 
     margin: 8px;
 
-    li {
-        background: #fff;
+    .item {
+        float: left;
+        margin: 8px;
         box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
 
         &:hover, &.hover {
             box-shadow: 0 1px 12px 0px rgba(0,0,0,0.5);
         }
+    }
 
-        &.item {
-            float: left;
-            margin: 8px;
+    .icon.rational {
+        display: block;
+        background: #fafafa;
+    }
 
-            a, a:active, a:visited {
-                min-width: @minsize * 4/3;
-            }
-        }
+    .label {
+        padding: 4px 6px;
+    }
 
-        .icon.rational {
-            display: block;
-            background: #fafafa;
-
-            min-height: @minsize;
-
-            img {
-                min-height: @minsize;
-            }
-
-            .thumb {
-                min-width: @minsize * 4/3;
-            }
-        }
-
-        .label {
-            padding: 4px 6px;
-        }
-
-        .date, .size {
-            display: none;
-        }
+    .date, .size {
+        display: none;
     }
 
     .empty, .no-match {
@@ -80,28 +53,13 @@
         height: 120px;
     }
 
-    .view-icons-sized(@icon-size);
-
-    &.size-16 {
-        .view-icons-sized(16px);
-    }
-
-    &.size-24 {
-        .view-icons-sized(24px);
-    }
-
-    &.size-32 {
-        .view-icons-sized(32px);
-    }
-
-    &.size-48 {
-        .view-icons-sized(48px);
-    }
-
-    &.size-64 {
-        .view-icons-sized(64px);
-    }
+    .view-icons-sized(96px);
 
+    &.size-16,
+    &.size-24,
+    &.size-32,
+    &.size-48,
+    &.size-64,
     &.size-96 {
         .view-icons-sized(96px);
     }
diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less
index 67efd019..84070714 100644
--- a/src/_h5ai/client/css/inc/view.less
+++ b/src/_h5ai/client/css/inc/view.less
@@ -2,14 +2,14 @@
 
 @item-border-col-sep: @col-border;
 
-@item-background-col-hover: rgba(0,0,0,0.02);
+@item-background-col-hover: #fafafa;
 @item-border-col-hover: @col-border;
 
-@item-background-col-sel: rgba(0,0,0,0.02);
-@item-border-col-sel: @col-border-strong;
-
-@icon-size: 48px;
-
+// @item-background-col-sel: rgba(0,0,0,0.02);
+// @item-border-col-sel: @col-border-strong;
+@item-col-sel: #fff;
+@item-background-col-sel: #42A5F5;
+@item-border-col-sel: #2196F3;
 
 #selection-rect {
     display: none;
@@ -27,7 +27,7 @@
     margin: 0 auto;
 
     a, a:active, a:visited {
-        color: #333;
+        color: inherit;
         cursor: pointer;
         text-decoration: none;
     }
@@ -41,147 +41,121 @@
     li {
         position: relative;
         white-space: nowrap;
+    }
 
-        &.header {
-            display: none;
-            background: #fafafa;
+    .header {
+        display: none;
+    }
 
-            a, a:active, a:visited {
-                padding: 12px 8px;
-                opacity: 0.4;
-                .transition(all 0.2s ease-in-out);
+    .item {
+        background: #fff;
 
-                img {
-                    display: none;
-                    position: relative;
-                    top: -2px;
-                    width: 12px;
-                    height: 12px;
-                    padding: 0 8px;
-                }
-                &:hover {
-                    color: #555;
-                    opacity: 0.9;
-                }
-                &.ascending img.ascending {
-                    display: inline;
-                }
-                &.descending img.descending {
-                    display: inline;
-                }
-            }
-        }
-
-        &.item {
-
-            a, a:active, a:visited {
-                display: block;
-
-                &:hover, &.hover {
-                    color: @col-hover;
-                    background-color: @item-background-col-hover;
-                    border-color: @item-border-col-hover;
-                }
-
-                &:hover {
-                    .selector {
-                        display: block;
-                    }
-                }
-            }
-
-            &.selected:not(.selecting), &.selecting:not(.selected) {
-
-                a, a:active, a:visited {
-                    background-color: @item-background-col-sel;
-                    border-color: @item-border-col-sel;
-
-                    &:hover, &.hover {
-                        background-color: @item-background-col-sel;
-                        border-color: @item-border-col-sel;
-                    }
-                }
-
-                .selector {
-                    display: block;
-                    // border-color: @col-border-stronger;
-
-                    img {
-                        display: block;
-                    }
-                }
-            }
-        }
-
-        &.folder-parent {
-
-            .date, .size {
-                display: none;
-            }
-        }
-
-        .icon {
-            display: none;
-            text-align: center;
-
-            img {
-                vertical-align: top;
-                // max-width: 64px;
-                max-width: 32px;
-            }
-
-            .thumb {
-                max-width: none;
-            }
-
-            &.rational {
-                img {
-                    min-width: 32px;
-                }
-            }
-        }
-
-        .label {
+        a, a:active, a:visited {
             display: block;
-            overflow: hidden;
-            text-align: left;
-            text-overflow: ellipsis;
         }
 
-        .date {
-            text-align: right;
-            width: 130px;
+        &:hover, &.hover {
+            color: @col-hover;
+            background: @item-background-col-hover;
+            border-color: @item-border-col-hover;
         }
 
-        .size {
-            text-align: right;
-            width: 80px;
+        &:hover {
+            .selector {
+                display: block;
+            }
         }
 
-        .selector {
+        &.selected:not(.selecting), &.selecting:not(.selected) {
+            background: @item-background-col-sel;
+            border-color: @item-border-col-sel;
+            color: @item-col-sel;
+
+            &:hover, &.hover {
+                background: @item-background-col-sel;
+                border-color: @item-border-col-sel;
+                color: @item-col-sel;
+            }
+
+            .selector {
+                display: block;
+                // border-color: @col-border-stronger;
+
+                img {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    .folder-parent {
+
+        .date, .size {
             display: none;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 18px;
-            height: 18px;
-            background-color: #fff;
-            border: 1px solid @col-border-strong;
-            cursor: pointer;
-            .transition(all 0.2s ease-in-out);
+        }
+    }
 
-            &:hover {
-                border-color: @col-border-stronger;
-            }
+    .icon {
+        display: none;
+        text-align: center;
 
+        img {
+            vertical-align: top;
+            // max-width: 64px;
+            max-width: 32px;
+        }
+
+        .thumb {
+            max-width: none;
+        }
+
+        &.rational {
             img {
-                display: none;
-                width: 100%;
-                height: 100%;
+                min-width: 32px;
             }
         }
     }
 
+    .label {
+        display: block;
+        overflow: hidden;
+        text-align: left;
+        text-overflow: ellipsis;
+    }
+
+    .date {
+        text-align: right;
+        width: 130px;
+    }
+
+    .size {
+        text-align: right;
+        width: 80px;
+    }
+
+    .selector {
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 18px;
+        height: 18px;
+        background-color: #fff;
+        border: 1px solid @col-border-strong;
+        cursor: pointer;
+        .transition(all 0.2s ease-in-out);
+
+        &:hover {
+            border-color: @col-border-stronger;
+        }
+
+        img {
+            display: none;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
     .empty, .no-match {
         margin: 50px 0;
         text-align: center;
diff --git a/src/_h5ai/client/js/inc/ext/select.js b/src/_h5ai/client/js/inc/ext/select.js
index 1a135aef..5baba025 100644
--- a/src/_h5ai/client/js/inc/ext/select.js
+++ b/src/_h5ai/client/js/inc/ext/select.js
@@ -204,5 +204,5 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
     }
 
 
-    // init();
+    init();
 });