diff --git a/public/static/css/color.css b/public/static/css/color.css
deleted file mode 100644
index 43513a6..0000000
--- a/public/static/css/color.css
+++ /dev/null
@@ -1,207 +0,0 @@
-.blue0-font {
-    color: #3498db;
-}
-
-.blue1-font {
-    color: #2980b9;
-}
-
-.cyan0-font {
-    color: #1abc9c;
-}
-
-.cyan1-font {
-    color: #16a085;
-}
-
-.purple0-font {
-    color: #9b59b6;
-}
-
-.purple1-font {
-    color: #8e44ad;
-}
-
-.red0-font {
-    color: #e74c3c;
-}
-
-.red1-font {
-    color: #c0392b;
-}
-
-.yellow0-font {
-    color: #f1c40f;
-}
-
-.yellow1-font {
-    color: #f39c12;
-}
-
-.yellow2-font {
-    color: #e67e22;
-}
-
-.yellow3-font {
-    color: #d35400;
-}
-
-.green0-font {
-    color: #2ecc71;
-}
-
-.green1-font {
-    color: #27ae60;
-}
-
-.green2-font {
-    color: #15cd3d;
-}
-
-.white-font {
-    color: #fff;
-}
-
-.white0-font {
-    color: #ecf0f1;
-}
-
-.white1-font {
-    color: #bdc3c7;
-}
-
-.grey0-font {
-    color: #95a5a6;
-}
-
-.grey1-font {
-    color: #7f8c8d;
-}
-
-.grey2-font {
-    color: #ecf0f6;
-}
-
-.grey3-font {
-    color: #697384;
-}
-
-.black-font {
-    color: #000;
-}
-
-.black0-font {
-    color: #34495e;
-}
-
-.black1-font {
-    color: #2c3e50;
-}
-
-.blue0-bg {
-    background-color: #3498db;
-}
-
-.blue1-bg {
-    background-color: #2980b9;
-}
-
-.blue2-bg {
-    background-color: #2f45c5;
-}
-
-
-.cyan0-bg {
-    background-color: #1abc9c;
-}
-
-.cyan1-bg {
-    background-color: #16a085;
-}
-
-.purple0-bg {
-    background-color: #9b59b6;
-}
-
-.purple1-bg {
-    background-color: #8e44ad;
-}
-
-.red0-bg {
-    background-color: #e74c3c;
-}
-
-.red1-bg {
-    background-color: #c0392b;
-}
-
-.yellow0-bg {
-    background-color: #f1c40f;
-}
-
-.yellow1-bg {
-    background-color: #f39c12;
-}
-
-.yellow2-bg {
-    background-color: #e67e22;
-}
-
-.yellow3-bg {
-    background-color: #15cd3d;;
-}
-
-.yellow3-bg {
-    background-color: #d35400;
-}
-
-.green0-bg {
-    background-color: #2ecc71;
-}
-
-.green1-bg {
-    background-color: #27ae60;
-}
-
-.green2-bg {
-    background-color: #15cd3d;
-}
-
-.white-bg {
-    background-color: #fff;
-}
-
-.white0-bg {
-    background-color: #ecf0f1;
-}
-
-.white1-bg {
-    background-color: #bdc3c7;
-}
-
-.grey0-bg {
-    background-color: #95a5a6;
-}
-
-.grey1-bg {
-    background-color: #7f8c8d;
-}
-.grey2-bg {
-    background-color: #ecf0f6;
-}
-
-.grey3-bg {
-    color: #697384;
-}
-
-.black-bg {
-    background-color: #000;
-}
-
-.black0-bg {
-    background-color: #34495e;
-}
-
-.black1-bg {
-    background-color: #2c3e50;
-}
diff --git a/public/static/css/colors.css b/public/static/css/colors.css
new file mode 100644
index 0000000..26bdda1
--- /dev/null
+++ b/public/static/css/colors.css
@@ -0,0 +1,208 @@
+@charset "utf-8";
+
+.blue0-font {
+  color: #3498db;
+}
+
+.blue1-font {
+  color: #2980b9;
+}
+
+.cyan0-font {
+  color: #1abc9c;
+}
+
+.cyan1-font {
+  color: #16a085;
+}
+
+.purple0-font {
+  color: #9b59b6;
+}
+
+.purple1-font {
+  color: #8e44ad;
+}
+
+.red0-font {
+  color: #e74c3c;
+}
+
+.red1-font {
+  color: #c0392b;
+}
+
+.yellow0-font {
+  color: #f1c40f;
+}
+
+.yellow1-font {
+  color: #f39c12;
+}
+
+.yellow2-font {
+  color: #e67e22;
+}
+
+.yellow3-font {
+  color: #d35400;
+}
+
+.green0-font {
+  color: #2ecc71;
+}
+
+.green1-font {
+  color: #27ae60;
+}
+
+.green2-font {
+  color: #15cd3d;
+}
+
+.white-font {
+  color: #fff;
+}
+
+.white0-font {
+  color: #ecf0f1;
+}
+
+.white1-font {
+  color: #bdc3c7;
+}
+
+.grey0-font {
+  color: #95a5a6;
+}
+
+.grey1-font {
+  color: #7f8c8d;
+}
+
+.grey2-font {
+  color: #ecf0f6;
+}
+
+.grey3-font {
+  color: #697384;
+}
+
+.black-font {
+  color: #000;
+}
+
+.black0-font {
+  color: #34495e;
+}
+
+.black1-font {
+  color: #2c3e50;
+}
+
+.blue0-bg {
+  background-color: #3498db;
+}
+
+.blue1-bg {
+  background-color: #2980b9;
+}
+
+.blue2-bg {
+  background-color: #2f45c5;
+}
+
+.cyan0-bg {
+  background-color: #1abc9c;
+}
+
+.cyan1-bg {
+  background-color: #16a085;
+}
+
+.purple0-bg {
+  background-color: #9b59b6;
+}
+
+.purple1-bg {
+  background-color: #8e44ad;
+}
+
+.red0-bg {
+  background-color: #e74c3c;
+}
+
+.red1-bg {
+  background-color: #c0392b;
+}
+
+.yellow0-bg {
+  background-color: #f1c40f;
+}
+
+.yellow1-bg {
+  background-color: #f39c12;
+}
+
+.yellow2-bg {
+  background-color: #e67e22;
+}
+
+.yellow3-bg {
+  background-color: #15cd3d;
+}
+
+.yellow3-bg {
+  background-color: #d35400;
+}
+
+.green0-bg {
+  background-color: #2ecc71;
+}
+
+.green1-bg {
+  background-color: #27ae60;
+}
+
+.green2-bg {
+  background-color: #15cd3d;
+}
+
+.white-bg {
+  background-color: #fff;
+}
+
+.white0-bg {
+  background-color: #ecf0f1;
+}
+
+.white1-bg {
+  background-color: #bdc3c7;
+}
+
+.grey0-bg {
+  background-color: #95a5a6;
+}
+
+.grey1-bg {
+  background-color: #7f8c8d;
+}
+.grey2-bg {
+  background-color: #ecf0f6;
+}
+
+.grey3-bg {
+  background-color: #697384;
+}
+
+.black-bg {
+  background-color: #000;
+}
+
+.black0-bg {
+  background-color: #34495e;
+}
+
+.black1-bg {
+  background-color: #2c3e50;
+}
diff --git a/public/static/css/default.css b/public/static/css/default.css
index 6f726bd..ba24cd1 100644
--- a/public/static/css/default.css
+++ b/public/static/css/default.css
@@ -1,35 +1,8 @@
-.hidden {
-  display: none;
-}
+@charset "utf-8";
 
-.txt-cap {
-  text-transform: capitalize;
-}
+/* +space */
 
-.font-xs {
-  font-size: 1.2rem;
-  line-height: 1.8rem;
-}
-
-.font-s {
-  font-size: 1.4rem;
-  line-height: 2.1rem;
-}
-
-.font-m {
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-}
-
-.font-l {
-  font-size: 1.8rem;
-  line-height: 2.7rem;
-}
-
-.font-xl {
-  font-size: 2rem;
-  line-height: 3rem;
-}
+/* TODO: generate these */
 
 .padding-xs {
   padding: 0.25rem;
@@ -231,211 +204,30 @@
   margin-bottom: 4rem;
 }
 
-.blue0-font {
-  color: #3498db;
+/* +font */
+.font-xs {
+  font-size: 1.2rem;
+  line-height: 3.2rem;
 }
 
-.blue1-font {
-  color: #2980b9;
+.font-s {
+  font-size: 1.4rem;
+  line-height: 3.2rem;
 }
 
-.cyan0-font {
-  color: #1abc9c;
+.font-m {
+  font-size: 1.6rem;
+  line-height: 3.2rem;
 }
 
-.cyan1-font {
-  color: #16a085;
+.font-l {
+  font-size: 1.8rem;
+  line-height: 3.2rem;
 }
 
-.purple0-font {
-  color: #9b59b6;
-}
-
-.purple1-font {
-  color: #8e44ad;
-}
-
-.red0-font {
-  color: #e74c3c;
-}
-
-.red1-font {
-  color: #c0392b;
-}
-
-.yellow0-font {
-  color: #f1c40f;
-}
-
-.yellow1-font {
-  color: #f39c12;
-}
-
-.yellow2-font {
-  color: #e67e22;
-}
-
-.yellow3-font {
-  color: #d35400;
-}
-
-.green0-font {
-  color: #2ecc71;
-}
-
-.green1-font {
-  color: #27ae60;
-}
-
-.green2-font {
-  color: #15cd3d;
-}
-
-.white-font {
-  color: #fff;
-}
-
-.white0-font {
-  color: #ecf0f1;
-}
-
-.white1-font {
-  color: #bdc3c7;
-}
-
-.grey0-font {
-  color: #95a5a6;
-}
-
-.grey1-font {
-  color: #7f8c8d;
-}
-
-.grey2-font {
-  color: #ecf0f6;
-}
-
-.grey3-font {
-  color: #697384;
-}
-
-.black-font {
-  color: #000;
-}
-
-.black0-font {
-  color: #34495e;
-}
-
-.black1-font {
-  color: #2c3e50;
-}
-
-.blue0-bg {
-  background-color: #3498db;
-}
-
-.blue1-bg {
-  background-color: #2980b9;
-}
-
-.blue2-bg {
-  background-color: #2f45c5;
-}
-
-.cyan0-bg {
-  background-color: #1abc9c;
-}
-
-.cyan1-bg {
-  background-color: #16a085;
-}
-
-.purple0-bg {
-  background-color: #9b59b6;
-}
-
-.purple1-bg {
-  background-color: #8e44ad;
-}
-
-.red0-bg {
-  background-color: #e74c3c;
-}
-
-.red1-bg {
-  background-color: #c0392b;
-}
-
-.yellow0-bg {
-  background-color: #f1c40f;
-}
-
-.yellow1-bg {
-  background-color: #f39c12;
-}
-
-.yellow2-bg {
-  background-color: #e67e22;
-}
-
-.yellow3-bg {
-  background-color: #15cd3d;
-}
-
-.yellow3-bg {
-  background-color: #d35400;
-}
-
-.green0-bg {
-  background-color: #2ecc71;
-}
-
-.green1-bg {
-  background-color: #27ae60;
-}
-
-.green2-bg {
-  background-color: #15cd3d;
-}
-
-.white-bg {
-  background-color: #fff;
-}
-
-.white0-bg {
-  background-color: #ecf0f1;
-}
-
-.white1-bg {
-  background-color: #bdc3c7;
-}
-
-.grey0-bg {
-  background-color: #95a5a6;
-}
-
-.grey1-bg {
-  background-color: #7f8c8d;
-}
-.grey2-bg {
-  background-color: #ecf0f6;
-}
-
-.grey3-bg {
-  background-color: #697384;
-}
-
-.black-bg {
-  background-color: #000;
-}
-
-.black0-bg {
-  background-color: #34495e;
-}
-
-.black1-bg {
-  background-color: #2c3e50;
+.font-xl {
+  font-size: 2rem;
+  line-height: 3.2rem;
 }
 
 .title-l {
@@ -443,8 +235,6 @@
   font-weight: bold;
   line-height: 3.2rem;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow-wrap: break-word;
   display: block;
 }
@@ -462,8 +252,6 @@
   font-size: 1.2rem;
   line-height: 3.2rem;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow-wrap: break-word;
   display: block;
 }
@@ -472,8 +260,6 @@
   font-size: 1.4rem;
   line-height: 3.2rem;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow-wrap: break-word;
   display: block;
 }
@@ -490,34 +276,24 @@
   font-size: 1.2rem;
   line-height: 3.2rem;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow-wrap: break-word;
   display: block;
 }
 
+/* +utils */
+
+.inline-block {
+  display: inline-block;
+}
+
+.hidden {
+  display: none;
+}
+
 .clickable {
   cursor: pointer;
 }
 
-.v-mid {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.v-mid-r {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.full-width {
-  width: 100%;
-}
-
 .bold {
   font-weight: bold;
 }
@@ -526,6 +302,44 @@
   clear: both;
 }
 
+.float-l {
+  float: left;
+}
+
+.txt-align-l {
+  text-align: left;
+}
+
+.txt-align-r {
+  text-align: right;
+}
+
+.work-break-all {
+  word-break: break-all;
+}
+
+.icon-s {
+  height: 2rem;
+  padding: 0.6rem 0;
+}
+
+.icon-m {
+  height: 2.4rem;
+  padding: 0.4rem 0;
+}
+
+.icon-l {
+  height: 3.2rem;
+  padding: 0;
+}
+
+.no-height {
+  height: 0;
+  overflow: hidden;
+}
+
+/* +animations */
+
 .anm-rotate-s {
   animation: trm-rotate-s 1s infinite linear;
 }
@@ -591,39 +405,3 @@
     transform: rotate(360deg);
   }
 }
-
-.float-l {
-  float: left;
-}
-
-.txt-align-l {
-  text-align: left;
-}
-
-.txt-align-r {
-  text-align: right;
-}
-
-.work-break-all {
-  word-break: break-all;
-}
-
-.icon-s {
-  height: 2rem;
-  padding: 0.6rem 0;
-}
-
-.icon-m {
-  height: 2.4rem;
-  padding: 0.4rem 0;
-}
-
-.icon-l {
-  height: 3.2rem;
-  padding: 0;
-}
-
-.no-height {
-  height: 0;
-  overflow: hidden;
-}
diff --git a/public/static/css/reset.css b/public/static/css/reset.css
index 01e73a0..87f3fa7 100644
--- a/public/static/css/reset.css
+++ b/public/static/css/reset.css
@@ -16,8 +16,6 @@ h6 {
 }
 html {
   background-color: #ecf0f1;
-  /* background: url("bg.jpg") no-repeat left center fixed;
-    background-size: auto 100%; */
   font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Microsoft YaHei",
     "Arial", sans-serif;
   font-size: 62.5%;
diff --git a/public/static/css/white.css b/public/static/css/white.css
index 54c9b7c..cfecd7e 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -1,54 +1,6 @@
-.dark-font {
-  color: #34495e;
-}
-.light-font {
-  color: #95a5a6;
-}
-.normal-font {
-  color: #697384;
-}
-.highlight-font {
-  color: #16a085;
-}
-.error-font {
-  color: #f1c40f;
-}
+@charset "utf-8";
 
-.lightest-bg {
-  background-color: white;
-}
-.light-bg {
-  background-color: #f6f6f6;
-}
-.normal-bg {
-  background-color: #ecf0f6;
-}
-.highlight-bg {
-  background-color: #16a085;
-}
-.dark-bg {
-  background-color: #2c3e50;
-}
-
-button {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-::placeholder {
-  color: #95a5a6;
-}
-a {
-  color: #16a085;
-}
-a:hover {
-  color: cc#2ecc71;
-}
-input {
-  background-color: rgba(0, 0, 0, 0.15);
-}
-input:focus {
-  opacity: 0.8;
-  box-shadow: 0 0.1rem 1rem rgba(22, 160, 133, 0.1);
-}
+/* ids */
 
 #root-frame {
   position: fixed;
@@ -58,6 +10,47 @@ input:focus {
   bottom: 0;
 }
 
+.theme-default #breadcrumb {
+  width: 100%;
+}
+
+.theme-default #breadcrumb .location-item {
+  margin: 0 0.5rem 0 0;
+  display: inline-block;
+  line-height: 3rem;
+}
+
+.theme-default #breadcrumb .item {
+  margin: 0 0.5rem 0 0;
+  max-width: 6rem;
+  display: inline-block;
+  line-height: 3rem;
+}
+
+.theme-default #breadcrumb .content {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.theme-default #space-used {
+  text-align: right;
+  line-height: 3rem;
+  font-size: 1.4rem;
+}
+
+.theme-default #sharing-list .desc {
+  background-color: #ecf0f1;
+  font-size: 1.2rem;
+  margin: 1rem 0;
+  color: #697384;
+  padding: 1rem;
+  border: dashed 1px #95a5a6;
+  overflow-wrap: break-word;
+}
+
 .theme-default #bg {
   background: url("/static/img/textured_paper.png") repeat fixed center;
   position: fixed;
@@ -91,34 +84,90 @@ input:focus {
   background: transparent;
 }
 
-.theme-default #panes {
+.theme-default .qrcode {
+  padding: 1rem;
+  background-color: #ecf0f1;
+  display: inline-block;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);
+  backdrop-filter: blur(9.5px);
+}
+
+.theme-default .qrcode-container {
+  height: 3rem;
+}
+
+.theme-default .qrcode-icon {
+  height: 3rem;
+}
+
+.theme-default .qrcode-child-container {
+  position: relative;
+  z-index: 50;
+}
+
+.theme-default .qrcode-child {
+  position: absolute;
+}
+
+.theme-default .container-center {
+  margin: 2rem auto auto auto;
+  width: 96%;
+  max-width: 80rem;
+  z-index: 9;
+}
+
+.theme-default .layer {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 100;
+  background: url("/static/img/textured_paper.png") repeat fixed center;
   overflow: scroll;
+  z-index: 100;
 }
 
-.theme-default #root-container {
-  max-width: 80rem;
-  width: 96%;
-  text-align: left;
-  margin: 3rem auto 8rem auto;
+.theme-default #login-layer {
+  z-index: 200;
 }
 
-.theme-default #layers {
-  height: 0;
-  z-index: 3;
+.theme-default #loading-layer {
+  z-index: 201;
 }
 
-.theme-default #panes .container {
-  padding: 2rem;
-  background-color: white;
-  margin: 3rem auto 1rem auto;
-  border-radius: 0.6rem;
+.theme-default #loading-container {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 3rem;
+  padding: 0.5rem;
+  position: fixed;
+  right: 2rem;
+  bottom: 2rem;
+  z-index: 201;
+  height: 5rem;
+  width: 5rem;
+}
+
+.theme-default #settings-layer {
+  z-index: 100;
+}
+
+.theme-default #tail {
+  color: #34495e;
+  font-size: 1.2rem;
+  text-align: center;
+  margin: 4rem auto;
+}
+
+.theme-default input {
+  font-size: 1.2rem;
+  color: #34495e;
+  background-color: #ecf0f6;
+  border: solid 1px #95a5a6;
+}
+
+.container-padding {
+  padding: 1.5rem;
 }
 
 .theme-default #panes #title {
@@ -181,9 +230,21 @@ input:focus {
   height: 4rem;
 }
 
+.theme-default #layers {
+  height: 0;
+  z-index: 3;
+}
 
+.theme-default #root-container {
+  max-width: 80rem;
+  width: 96%;
+  text-align: left;
+  margin: 3rem auto 8rem auto;
+}
 
-.container {
+/* +composition */
+
+.theme-default .container {
   width: 100%;
   color: #34495e;
   background-color: white;
@@ -192,142 +253,66 @@ input:focus {
   margin: auto auto 2rem auto;
 }
 
-.container-padding {
-  padding: 1.5rem;
-}
-
-/* .theme-default #breadcrumb .item:last-child {
-  margin-right: 0;
-} */
-
-
-
-.theme-default #op-bar {
-}
-
-.theme-default #browser-op {
-  margin-bottom: 1rem;
-}
-
-.theme-default #browser-op .left {
-  margin: 0 1rem 0 0;
-}
-
-.theme-default #browser {
-  padding-bottom: 1rem;
-}
-
-.theme-default #item-table {
-  width: 100%;
-  max-width: 100%;
-  display: block;
-}
-
-.theme-default #item-table thead,
-.theme-default #item-table tfoot,
-.theme-default #item-table tbody,
-.theme-default #item-table tr {
-  max-width: 100%;
-  display: block;
-  padding: 0;
-}
-.theme-default #item-table td,
-.theme-default #item-table th {
-  display: inline-block;
-  padding: 0;
-}
-
-.theme-default #item-rows {
-  margin-top: 2rem;
-}
-
-/* .theme-default #item-rows .name,
-.theme-default #item-rows .name a {
-  color: #34495e;
-  font-size: 1.8rem;
-  line-height: 2rem;
-  display: block;
-  word-break: break-all;
-} */
-
-.theme-default #item-rows .hr {
-  height: 1px;
-  margin: 2rem 0;
-  background-color: #ecf0f1;
-}
-
-/* .theme-default #item-rows .card {
-  padding: 0.5rem 0;
-  text-align: left;
-} */
-
-.theme-default .qrcode {
+.theme-default .info {
+  border: dashed 1px #95a5a6;
+  font-size: 1.4rem;
   padding: 1rem;
-  background-color: #ecf0f1;
-  display: inline-block;
-  background: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);
-  backdrop-filter: blur(9.5px);
+  color: #697384;
+  margin: 1rem 0 0 0;
+  background-color: #f6f6f6;
+  white-space: nowrap;
+  overflow: auto;
 }
 
-.theme-default .qrcode-flat {
-  padding: 1rem;
-  background-color: #ecf0f1;
-  display: inline-block;
-  background: rgba(255, 255, 255, 0.8);
-}
-
-.theme-default .qrcode-container {
-  height: 3rem;
-}
-
-.theme-default .qrcode-icon {
-  height: 3rem;
-}
-
-.theme-default .qrcode-child-container {
-  position: relative;
-  z-index: 50;
-}
-
-.theme-default .qrcode-child {
-  position: absolute;
-}
-
-.theme-default .item-cell {
-  height: 5rem;
-}
-
-.theme-default .float-menu {
-  position: relative;
-  box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
+.theme-default .badge {
+  border: none;
   border-radius: 0.5rem;
-  background-color: white;
-}
-
-.theme-default #browser .item-info {
-  padding: 1rem 0;
+  font-weight: bold;
   font-size: 1.2rem;
-  border-top: dashed 1px #7f8c8d;
+  padding: 1rem 1rem;
+  line-height: 1.2rem;
+  display: inline-block;
 }
 
-.theme-default #icon-home {
-  color: black;
-  margin-right: 1rem;
+.theme-default .progress-grey {
+  background-color: #ecf0f6;
+  width: 100%;
+  height: 0.3rem;
 }
 
-.theme-default #browser .error {
-  line-height: 4rem;
-  border: dashed 1px #e74c3c;
-  background-color: #e74c3c;
-  border-radius: 0.5rem;
-  color: white;
-  margin: 1rem;
-  padding: 0 1rem;
+.theme-default .progress-green {
+  background-color: #1abc9c;
+  height: 100%;
+  transition: width 300ms;
 }
 
-.theme-default .upload-item {
-  padding: 1rem 0 1rem 0;
+.theme-default .col-l {
+  float: left;
+  width: 70%;
+  overflow-wrap: break-word;
+}
+
+.theme-default .col-r {
+  float: right;
+  width: 30%;
+  text-align: right;
+}
+
+.theme-default .error-inline {
+  font-size: 1.4rem;
+  padding: 1rem;
+  color: #f1c40f;
+  margin: 1rem 0 0 0;
+  background-color: #2c3e50;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.theme-default .label {
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+  color: #7f8c8d;
+  padding-left: 0.5rem;
 }
 
 .theme-default .error {
@@ -339,202 +324,65 @@ input:focus {
   overflow-wrap: break-word;
 }
 
-.theme-default .sharing-item {
-  margin: 2rem 0 2rem 0;
-}
-
-.theme-default #tabs {
-  padding: 1rem;
-}
-
-.theme-default #upload-op {
-  padding: 0;
-}
-
-.theme-default .red-btn {
-  background-color: #e74c3c;
-  color: #fff;
-}
-
-.theme-default .blue-btn {
-  background-color: #3498db;
-  color: #fff;
-}
-
-.theme-default .cyan-btn {
-  background-color: #1abc9c;
-  color: #fff;
-}
-
-.theme-default .container-center {
-  margin: 2rem auto auto auto;
-  width: 96%;
-  max-width: 80rem;
-  z-index: 9;
-}
-
-.theme-default .float {
-  display: inline-block;
-  margin: auto 1rem auto auto;
-}
-
-.theme-default .float-r {
-  display: inline-block;
-  margin: auto auto 1rem 1rem;
-}
-
-.theme-default .float-input {
-  display: inline-block;
-  margin: auto 1rem 1rem auto;
-}
-
-.theme-default .float-input:last-child {
-  margin: auto auto auto auto;
-}
-
-.theme-default .float-input .label {
-  font-size: 1.2rem;
-  line-height: 1.8rem;
-  color: #7f8c8d;
-}
-
-.theme-default #pane-settings {
-  /* padding: 2rem; */
-}
-
-.theme-default .user-form {
-  font-size: 1.4rem;
-  padding: 1rem 0;
-  margin-top: 1rem;
-  border-bottom: dashed 1px #000;
-}
-
-.theme-default .more {
-  border: dashed 1px #ccc;
-}
-
-.theme-default .role-list-item {
-  margin: 0 auto 1rem 0;
-}
-
-.theme-default .wide-input {
-  width: 20rem;
-}
-
 .theme-default .hr {
   height: 1px;
   margin: 1rem 0;
   background-color: #ecf0f1;
 }
 
-.theme-default .key-value {
-  margin-top: 0.5rem;
-}
+/* +colors */
 
-.theme-default .layer {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: url("/static/img/textured_paper.png") repeat fixed center;
-  overflow: scroll;
-  z-index: 100;
+.theme-default .dark-font {
+  color: #34495e;
 }
-
-.theme-default #login-layer {
-  z-index: 200;
+.theme-default .light-font {
+  color: #95a5a6;
 }
-
-.theme-default #loading-layer {
-  z-index: 201;
-}
-
-.theme-default #loading-container {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 3rem;
-  padding: 0.5rem;
-  position: fixed;
-  right: 2rem;
-  bottom: 2rem;
-  z-index: 201;
-  height: 5rem;
-  width: 5rem;
-}
-
-.theme-default #settings-layer {
-  z-index: 100;
-}
-
-.theme-default .value {
+.theme-default .normal-font {
   color: #697384;
 }
-
-.theme-default #tail {
-  color: #34495e;
-  font-size: 1.2rem;
-  text-align: center;
-  margin: 4rem auto;
+.theme-default .highlight-font {
+  color: #16a085;
+}
+.theme-default .error-font {
+  color: #f1c40f;
 }
 
-.theme-default input {
-  font-size: 1.2rem;
-  color: #34495e;
+.theme-default .lightest-bg {
+  background-color: white;
+}
+.theme-default .light-bg {
+  background-color: #f6f6f6;
+}
+.theme-default .normal-bg {
   background-color: #ecf0f6;
-  border: solid 1px #95a5a6;
 }
-
-.theme-default .h1,
-.theme-default .h2 {
-  font-size: 2rem;
-  font-weight: bold;
+.theme-default .highlight-bg {
+  background-color: #16a085;
 }
-.theme-default .h3,
-.theme-default .h4 {
-  font-size: 1.8rem;
-  font-weight: bold;
+.theme-default .dark-bg {
+  background-color: #2c3e50;
 }
-.theme-default .h5,
-.theme-default .h6 {
-  font-size: 1.6rem;
-  font-weight: bold;
+.theme-default button {
+  background-color: rgba(0, 0, 0, 0.3);
 }
-
-.theme-default .font-xs {
-  font-size: 1.2rem;
-  line-height: 1.8rem;
+.theme-default  ::placeholder {
+  color: #95a5a6;
 }
-
-.theme-default .font-s {
-  font-size: 1.4rem;
-  line-height: 2.1rem;
+.theme-default a {
+  color: #16a085;
 }
-
-.theme-default .font-m {
-  font-size: 1.6rem;
-  line-height: 2.4rem;
+.theme-default a:hover {
+  color: cc#2ecc71;
 }
-
-.theme-default .font-l {
-  font-size: 1.8rem;
-  line-height: 2.7rem;
+.theme-default input {
+  background-color: rgba(0, 0, 0, 0.15);
 }
-
-.theme-default .font-xl {
-  font-size: 2rem;
-  line-height: 3rem;
+.theme-default input:focus {
+  opacity: 0.8;
+  box-shadow: 0 0.1rem 1rem rgba(22, 160, 133, 0.1);
 }
-
 .theme-default .button-default {
   color: #697384;
   background-color: #ecf0f6;
-}
-
-.item-name-vertical {
-  width: 14rem;
-}
-
-.item-name-horizontal {
-  width: 48rem;
-}
-
+}
\ No newline at end of file
diff --git a/public/static/css/white_compact.css b/public/static/css/white_compact.css
deleted file mode 100644
index d1c8c9a..0000000
--- a/public/static/css/white_compact.css
+++ /dev/null
@@ -1,150 +0,0 @@
-.theme-default .card {
-  padding: 1rem;
-  border-radius: 0.8rem;
-}
-
-.theme-default #item-rows .column {
-  width: 50%;
-  max-width: 100%;
-  float: left;
-}
-
-.theme-default .info {
-  border: dashed 1px #95a5a6;
-  font-size: 1.4rem;
-  padding: 1rem;
-  color: #697384;
-  margin: 1rem 0 0 0;
-  background-color: #f6f6f6;
-  white-space: nowrap;
-  overflow: auto;
-}
-
-.theme-default #breadcrumb {
-  width: 100%;
-}
-
-.theme-default #breadcrumb .location-item {
-  margin: 0 0.5rem 0 0;
-  display: inline-block;
-  line-height: 3rem;
-}
-
-.theme-default #breadcrumb .item {
-  margin: 0 0.5rem 0 0;
-  max-width: 6rem;
-  display: inline-block;
-  line-height: 3rem;
-}
-
-.theme-default #breadcrumb .content {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  display: block;
-}
-
-.theme-default .inline-block {
-  display: inline-block;
-}
-
-.theme-default .select-btn {
-  width: 8rem;
-  display: inline-block;
-}
-
-.theme-default #space-used {
-  text-align: right;
-  line-height: 3rem;
-  font-size: 1.4rem;
-}
-
-.theme-default .badge {
-  border: none;
-  border-radius: 0.5rem;
-  font-weight: bold;
-  font-size: 1.2rem;
-  padding: 1rem 1rem;
-  line-height: 1.2rem;
-  display: inline-block;
-}
-
-.theme-default #upload-list .progress-grey {
-  background-color: #ecf0f6;
-  width: 100%;
-  height: 0.3rem;
-}
-
-.theme-default #upload-list .progress-green {
-  background-color: #1abc9c;
-  height: 100%;
-  transition: width 300ms;
-}
-
-.theme-default .l-col {
-  display: inline-block;
-  width: 70%;
-}
-
-.theme-default .r-col {
-  display: inline-block;
-  width: 30%;
-  text-align: right;
-}
-
-.theme-default #upload-list .title {
-  font-size: 1.4rem;
-  line-height: 3.2rem;
-  overflow-wrap: break-word;
-}
-
-.theme-default #upload-list .desc {
-  font-size: 1.2rem;
-  line-height: 3.2rem;
-  overflow-wrap: break-word;
-}
-
-.theme-default #item-rows .desc {
-  display: block;
-  word-break: break-all;
-}
-
-.theme-default .error-inline {
-  font-size: 1.4rem;
-  padding: 1rem;
-  color: #f1c40f;
-  margin: 1rem 0 0 0;
-  background-color: #2c3e50;
-  white-space: nowrap;
-  overflow: auto;
-}
-
-.theme-default .label {
-  font-size: 1.2rem;
-  line-height: 1.8rem;
-  color: #7f8c8d;
-  padding-left: 0.5rem;
-}
-
-.theme-default #sharing-list .col-l {
-  float: left;
-  width: 70%;
-  overflow-wrap: break-word;
-}
-
-.theme-default #sharing-list .col-r {
-  float: right;
-  width: 30%;
-  text-align: right;
-}
-
-.theme-default #sharing-list .desc {
-  background-color: #ecf0f1;
-  font-size: 1.2rem;
-  margin: 1rem 0;
-  color: #697384;
-  padding: 1rem;
-  border: dashed 1px #95a5a6;
-  overflow-wrap: break-word;
-}
\ No newline at end of file
diff --git a/src/client/web/build/template/index.template.dev.html b/src/client/web/build/template/index.template.dev.html
index 0fd699f..f28b87d 100644
--- a/src/client/web/build/template/index.template.dev.html
+++ b/src/client/web/build/template/index.template.dev.html
@@ -7,18 +7,19 @@
       name="viewport"
       content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes"
     />
-    <link rel="icon" href="static/img/favicon.svg">
+    <link rel="icon" href="static/img/favicon.svg" />
     <link rel=”mask-icon” href=”static/img/favicon.svg” color=”#16a085">
-    <link rel="apple-touch-icon" href="static/img/favicon.png">
-    <meta name="theme-color" content="#ffffff">
-  
+    <link rel="apple-touch-icon" href="static/img/favicon.png" />
+    <meta name="theme-color" content="#ffffff" />
+
     <script src="/static/js/react.development.js?v=16.8.6"></script>
     <script src="/static/js/react-dom.development.js?v=16.8.6"></script>
     <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
-    <link rel="stylesheet" href="/static/css/reset.css">
-    <link rel="stylesheet" href="/static/css/default.css">
-    <link rel="stylesheet" href="/static/css/white.css">
-    <link rel="stylesheet" href="/static/css/white_compact.css">
+    <link rel="stylesheet" href="/static/css/reset.css" />
+    <link rel="stylesheet" href="/static/css/colors.css" />
+    <link rel="stylesheet" href="/static/css/default.css" />
+    <link rel="stylesheet" href="/static/css/white.css" />
+    <link rel="stylesheet" href="/static/css/black.css" />
     <!-- <link
       rel="apple-touch-icon"
       sizes="57x57"
diff --git a/src/client/web/build/template/index.template.html b/src/client/web/build/template/index.template.html
index 5ddd11c..d8ae902 100644
--- a/src/client/web/build/template/index.template.html
+++ b/src/client/web/build/template/index.template.html
@@ -7,18 +7,19 @@
       name="viewport"
       content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes"
     />
-    <link rel="icon" href="static/img/favicon.svg">
+    <link rel="icon" href="static/img/favicon.svg" />
     <link rel=”mask-icon” href=”static/img/favicon.svg” color=”#16a085">
-    <link rel="apple-touch-icon" href="static/img/favicon.png">
-    <meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" href="static/img/favicon.png" />
+    <meta name="theme-color" content="#ffffff" />
 
     <script src="/static/js/react.production.min.js?v=16.8.6"></script>
     <script src="/static/js/react-dom.production.min.js?v=16.8.6"></script>
     <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
-    <link rel="stylesheet" href="/static/css/reset.css">
-    <link rel="stylesheet" href="/static/css/default.css">
-    <link rel="stylesheet" href="/static/css/white.css">
-    <link rel="stylesheet" href="/static/css/white_compact.css">
+    <link rel="stylesheet" href="/static/css/reset.css" />
+    <link rel="stylesheet" href="/static/css/colors.css" />
+    <link rel="stylesheet" href="/static/css/default.css" />
+    <link rel="stylesheet" href="/static/css/white.css" />
+    <link rel="stylesheet" href="/static/css/black.css" />
     <!-- <link
       rel="apple-touch-icon"
       sizes="57x57"
diff --git a/src/client/web/src/components/control/btn_list.tsx b/src/client/web/src/components/control/btn_list.tsx
index a055179..6f48a6f 100644
--- a/src/client/web/src/components/control/btn_list.tsx
+++ b/src/client/web/src/components/control/btn_list.tsx
@@ -25,7 +25,7 @@ export const BtnList = (props: Props) => {
   const btns = props.btnNames.map((btnName: string, i: number) => {
     const cb = props.btnCallbacks.get(i);
     return (
-      <button key={`rows-${i}`} className="float button-default" onClick={cb}>
+      <button key={`rows-${i}`} className="inline-block margin-r-m button-default" onClick={cb}>
         {btnName}
       </button>
     );
diff --git a/src/client/web/src/components/layout/card.tsx b/src/client/web/src/components/layout/card.tsx
index 7819177..68f2535 100644
--- a/src/client/web/src/components/layout/card.tsx
+++ b/src/client/web/src/components/layout/card.tsx
@@ -7,7 +7,7 @@ export interface Props {
 
 export const Card = (props: Props) => {
   return (
-    <div className="card float-l">
+    <div className="padding-m float-l">
       <div className="title-l black0-font">{props.value}</div>
       <div className="desc-m">{props.name}</div>
     </div>
diff --git a/src/client/web/src/components/pane_admin.tsx b/src/client/web/src/components/pane_admin.tsx
index 2352056..85cbd65 100644
--- a/src/client/web/src/components/pane_admin.tsx
+++ b/src/client/web/src/components/pane_admin.tsx
@@ -211,7 +211,7 @@ export class UserForm extends React.Component<
     };
 
     return (
-      <div className="user-form">
+      <div className="padding-t-m padding-b-m">
         <Columns
           rows={List([
             List([
@@ -394,6 +394,8 @@ export class UserForm extends React.Component<
             ])}
           />
         </div>
+
+        <div className="hr"></div>
       </div>
     );
   }
@@ -551,7 +553,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
 
     const roleList = this.props.admin.roles.valueSeq().map((role: string) => {
       return (
-        <div key={role} className="role-list-item">
+        <div key={role} className="margin-b-m">
           <Flexbox
             children={List([
               <span>{role}</span>,
diff --git a/src/client/web/src/components/panel_files.tsx b/src/client/web/src/components/panel_files.tsx
index d776b7c..7bc37cf 100644
--- a/src/client/web/src/components/panel_files.tsx
+++ b/src/client/web/src/components/panel_files.tsx
@@ -561,11 +561,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
           </div>
 
           <div className="column">
-            <div className="card margin-l-m">
+            <div className="card">
               <span className="title-m dark-font">{modTimeTitle}</span>
               <span className="font-s work-break-all">{modTimeFormatted}</span>
             </div>
-            <div className="card margin-l-m">
+            <div className="card">
               <span className="title-m dark-font">{sizeTitle}</span>
               <span className="font-s work-break-all">{itemSize}</span>
             </div>
@@ -756,7 +756,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     );
     const viewType = this.props.ui.control.controls.get(filesViewCtrl);
     const view = (
-      <div id="item-rows">
+      <div className="margin-t-l">
         {this.prepareColumns(this.props.filesInfo.items, showOp)}
       </div>
     ); // TODO: support better views in the future
@@ -800,7 +800,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         </div>
 
         <Container>
-          <div id="browser-op" className={`${showOp}`}>
+          <div className={`${showOp} margin-b-m`}>
             <Flexbox
               children={List([
                 <span>
@@ -812,7 +812,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                           this.props.filesInfo.dirPath.join("/")
                         );
                       }}
-                      className="red-btn margin-r-m"
+                      className="red0-bg white-font margin-r-m"
                     >
                       {this.props.msg.pkg.get("browser.share.del")}
                     </button>
@@ -833,7 +833,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                       <button
                         type="button"
                         onClick={() => this.delete()}
-                        className="red-btn margin-r-m"
+                        className="red0-bg white-font margin-r-m"
                       >
                         {this.props.msg.pkg.get("browser.delete")}
                       </button>
@@ -869,7 +869,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
                     <span className={`${showOp}`}>
                       <button
                         onClick={() => this.selectAll()}
-                        className="select-btn button-default"
+                        className="inline-block button-default"
                       >
                         {this.props.msg.pkg.get("browser.selectAll")}
                       </button>
diff --git a/src/client/web/src/components/panel_sharings.tsx b/src/client/web/src/components/panel_sharings.tsx
index ce14d81..c476217 100644
--- a/src/client/web/src/components/panel_sharings.tsx
+++ b/src/client/web/src/components/panel_sharings.tsx
@@ -131,7 +131,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
         );
 
         const elem = (
-          <div className="sharing-item" key={dirPath}>
+          <div className="margin-t-m margin-b-m" key={dirPath}>
             {row1}
             <div className="desc">{sharingURL}</div>
             <div className="hr"></div>
diff --git a/src/client/web/src/components/panel_uploadings.tsx b/src/client/web/src/components/panel_uploadings.tsx
index 8d7c17c..92f0973 100644
--- a/src/client/web/src/components/panel_uploadings.tsx
+++ b/src/client/web/src/components/panel_uploadings.tsx
@@ -151,10 +151,10 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
         );
 
       const elem = (
-        <div key={uploading.filePath} className="upload-item">
-          <div className={`font-s l-col`}>
-            <span className="title">{fileName}&nbsp;</span>
-            <span className="desc grey0-font">
+        <div key={uploading.filePath} className="margin-t-m margin-b-m">
+          <div className={`font-s col-l`}>
+            <span className="font-s work-break-all">{`${fileName} - `}</span>
+            <span className="font-s work-break-all grey0-font">
               {FileSize(uploading.uploaded, { round: 0 })}
               &nbsp;/&nbsp;
               {FileSize(uploading.size, {
@@ -165,8 +165,8 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
             </span>
           </div>
 
-          <div className="r-col">{operations}</div>
-
+          <div className="col-r">{operations}</div>
+          <div className="fix"></div>
           {progressBar}
           {errorInfo}
         </div>
diff --git a/src/client/web/src/components/root_frame.tsx b/src/client/web/src/components/root_frame.tsx
index d512367..22b1660 100644
--- a/src/client/web/src/components/root_frame.tsx
+++ b/src/client/web/src/components/root_frame.tsx
@@ -52,7 +52,8 @@ export class RootFrame extends React.Component<Props, State, {}> {
 
   render() {
     const bgStyle = this.makeBgStyle();
-    const theme = "theme-default";
+    const themeBlack = "theme-black";
+    const theme = themeBlack;
     const fontSizeClass = "font-m";
 
     const displaying = this.props.ui.control.controls.get(controlName);