diff --git a/hk_style.css b/hk_style.css
new file mode 100644
index 0000000..d50c457
--- /dev/null
+++ b/hk_style.css
@@ -0,0 +1,99 @@
+/* LOGIN */
+#login .input--block{
+  background-color: #f5f5f5;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 1px solid rgb(142,142,142);
+  border-radius: 4px 4px 0 0;
+  color:rgba(0, 0, 0,0.9);
+}
+#login .input--block:hover{
+  background-color: rgb(236,236,236);
+}
+#login .input--block:focus{
+  color: rgba(98,0,238,.87);
+  background-color: rgb(219,219,219);
+  border-bottom: 2px solid rgb(98,0,238);
+}
+#login .button--block{
+  background-color: #6200ee;
+  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) ;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0,0,0,.12);
+  border-radius: 4px;
+}
+#login .button--block:hover{
+  background-color: #6e14ef;
+}
+#login .button--block:focus{
+  background-color: rgb(136,61,242);
+}
+#login .button--block:hover,
+#login .button--block:focus{
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0,0,0,.12);
+}
+#login .button--block:active{
+  background-color: rgb(164,107,245);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0,0,0,.12);
+}
+/* files */
+#listing .item{
+  border-radius: 1rem !important;;
+}
+#listing .item:hover{
+  background-color: rgb(248,249,250);
+}
+#listing .item[aria-selected="true"]{
+  background-color: #0d6efd !important;
+  color: white !important;
+}
+#listing .item[aria-selected="true"] .material-icons{
+  color: white;
+}
+
+.progress{
+  background-color: #e9ecef;
+  border-radius: 0.375rem;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  height: 8px;
+}
+.progress >div{
+  background-color: #0d6efd;
+}
+.floating{
+  border-radius: 4px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0,0,0,.12);
+}
+.floating .button--flat{
+  border-radius: 4px
+}
+.dashboard .wrapper>ul{
+  background-color: rgba(0,0,0,0.01);
+}
+.dashboard .wrapper .router-link-active li{
+  background-color: rgb(10,88,202) !important;
+}
+.dashboard #nav ul li{
+  background-color: rgb(13,110,253);
+}
+.dashboard #nav ul li:hover{
+  background-color: #0b5ed7;
+}
+.dashboard .wrapper .router-link-active:hover{
+  background-color: rgb(11,94,215);
+}
+.dashboard #nav ul li{
+  padding: 1.5em;
+}
+.dashboard .wrapper>ul>a>li{
+  color: white !important;;
+  /*! font-size: 13px; */
+}
+/* share */
+.share__box__info .button--flat{
+  border-radius: 8px;
+}
+
+
+
+