diff --git a/resources/assets/src/components/common/Previewer.vue b/resources/assets/src/components/common/Previewer.vue
index 311780bc..d3f6fdbf 100644
--- a/resources/assets/src/components/common/Previewer.vue
+++ b/resources/assets/src/components/common/Previewer.vue
@@ -144,3 +144,30 @@ export default {
     }
 };
 </script>
+
+<style lang="stylus">
+@media (min-width: 992px) {
+    .previewer-3d {
+        min-height: 500px;
+    }
+}
+
+.previewer-3d canvas {
+    cursor: move;
+}
+
+.operations {
+    display: inline;
+    float: right;
+
+    i {
+        padding: .5em .5em;
+        display: inline !important;
+    }
+
+    i:hover {
+        color: #555;
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/resources/assets/src/stylus/common.styl b/resources/assets/src/stylus/common.styl
index 9839ab25..d70990e6 100644
--- a/resources/assets/src/stylus/common.styl
+++ b/resources/assets/src/stylus/common.styl
@@ -12,3 +12,117 @@ body, h1, h2, h3, h4, h5, h6, .logo {
 .swal2-modal h2 {
     font-size: 25px;
 }
+
+/* fucking webkit autofill */
+input:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
+}
+
+.item {
+    display: block;
+    background: #EFF1F0;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+    border-radius: 2px;
+    float: left;
+    position: relative;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    width: 210px;
+    height: 196px;
+    transition: box-shadow 0.1s ease-in-out 0s;
+}
+
+.item-body {
+    height: 166px;
+
+    img {
+        max-width: 100%;
+        margin-left: 30px;
+        margin-top: 16px;
+        width: 150px;
+    }
+}
+
+@media (max-width: 756px) {
+    .item {
+        width: 45%;
+        margin-right: 5%;
+    }
+
+    .item-body > img {
+        margin-left: 25%;
+    }
+
+    .texture-name {
+        width: 65%;
+    }
+}
+
+@media (max-width: 520px) {
+    .item {
+        width: 100%;
+    }
+
+    .item-body > img {
+        margin-left: 30%;
+    }
+
+    .texture-name {
+        width: 80%;
+    }
+}
+
+.item:hover {
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+
+.item-selected {
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+
+.item-footer {
+    background: #50b3ec;
+    color: #fff;
+    font-size: 16px;
+    height: 30px;
+    padding: 3px 8px;
+
+    .more {
+        float: right;
+        margin-left: 6px;
+        margin-right: 3px;
+        color: #fff;
+    }
+
+    .more:hover {
+        color: #dadada;
+    }
+
+    small {
+        font-size: 50%;
+    }
+}
+
+.box-footer > p {
+    margin: 6px 15px 5px 0;
+}
+
+@media (max-width: 767px) {
+
+    .wrapper .main-header .navbar .dropdown-menu li.locale {
+        a {
+            color: #777;
+        }
+
+        a:hover {
+            background-color: #e1e3e9;
+            color: #333;
+        }
+    }
+
+    /* hide the text on mobile phone pages */
+    .description-text {
+        display: none;
+    }
+}