diff --git a/less/account.less b/less/account.less
index 35b37b9..23e27b4 100644
--- a/less/account.less
+++ b/less/account.less
@@ -299,6 +299,12 @@
 			}
 		}
 	}
+
+	.avatar {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 }
 
 
@@ -356,7 +362,7 @@
 
 .picture-switcher {
 	img, .user-icon {
-		.user-icon-style(46px, 2.4rem, 50%);
+		.user-icon-style(4.6rem, 2.4rem, 50%);
 	}
 
 	@media (max-width: @screen-sm) {
diff --git a/less/bootstrap/navbar.less b/less/bootstrap/navbar.less
index 6d751bb..1bb522d 100644
--- a/less/bootstrap/navbar.less
+++ b/less/bootstrap/navbar.less
@@ -439,6 +439,7 @@
 
   .navbar-toggle {
     border-color: @navbar-default-toggle-border-color;
+    color: @navbar-default-link-color;
     &:hover,
     &:focus {
       background-color: @navbar-default-toggle-hover-bg;
diff --git a/less/bootstrap/variables.less b/less/bootstrap/variables.less
index ea1ba5e..64bb7fa 100644
--- a/less/bootstrap/variables.less
+++ b/less/bootstrap/variables.less
@@ -42,10 +42,10 @@
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-@font-family-sans-serif:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+@font-family-sans-serif:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-monospace:   "Yahei Consolas Hybrid", "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", "Microsoft Yahei", monospace;
 @font-family-base:        @font-family-sans-serif;
 
 @font-size-base:          14px;
@@ -352,23 +352,23 @@
 //##
 
 // Basics of a navbar
-@navbar-height:                    50px;
+@navbar-height:                    60px;
 @navbar-margin-bottom:             @line-height-computed;
 @navbar-border-radius:             @border-radius-base;
 @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
 @navbar-collapse-max-height:       340px;
 
-@navbar-default-color:             #333;
-@navbar-default-bg:                white;
-@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
+@navbar-default-color:             #fff;
+@navbar-default-bg:                #2c3e50;
+@navbar-default-border:            transparent;
 
 // Navbar links
-@navbar-default-link-color:                #666;
-@navbar-default-link-hover-color:          #333;
+@navbar-default-link-color:                #fff;
+@navbar-default-link-hover-color:          #e6e6e6;
 @navbar-default-link-hover-bg:             transparent;
-@navbar-default-link-active-color:         #555;
-@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
+@navbar-default-link-active-color:         #fff;
+@navbar-default-link-active-bg:            darken(@navbar-default-bg, 10%);
 @navbar-default-link-disabled-color:       #ccc;
 @navbar-default-link-disabled-bg:          transparent;
 
@@ -378,35 +378,35 @@
 @navbar-default-brand-hover-bg:            transparent;
 
 // Navbar toggle
-@navbar-default-toggle-hover-bg:           #ddd;
-@navbar-default-toggle-icon-bar-bg:        #888;
-@navbar-default-toggle-border-color:       #ddd;
+@navbar-default-toggle-hover-bg:           darken(@navbar-default-bg, 10%);
+@navbar-default-toggle-icon-bar-bg:        #fff;
+@navbar-default-toggle-border-color:       darken(@navbar-default-bg, 10%);
 
 
 // Inverted navbar
 // Reset inverted navbar basics
-@navbar-inverse-color:                      lighten(@gray-light, 15%);
-@navbar-inverse-bg:                         #222;
-@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-color:                      #fff;
+@navbar-inverse-bg:                         #18bc9c;
+@navbar-inverse-border:                     transparent;
 
 // Inverted navbar links
-@navbar-inverse-link-color:                 lighten(@gray-light, 15%);
-@navbar-inverse-link-hover-color:           #fff;
+@navbar-inverse-link-color:                 #fff;
+@navbar-inverse-link-hover-color:           #2c3e50;
 @navbar-inverse-link-hover-bg:              transparent;
-@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
-@navbar-inverse-link-disabled-color:        #444;
+@navbar-inverse-link-active-color:          #fff;
+@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 5%);
+@navbar-inverse-link-disabled-color:        #ccc;
 @navbar-inverse-link-disabled-bg:           transparent;
 
 // Inverted navbar brand label
 @navbar-inverse-brand-color:                @navbar-inverse-link-color;
-@navbar-inverse-brand-hover-color:          #fff;
+@navbar-inverse-brand-hover-color:          @navbar-inverse-link-hover-color;
 @navbar-inverse-brand-hover-bg:             transparent;
 
 // Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg:            #333;
+@navbar-inverse-toggle-hover-bg:            darken(@navbar-inverse-bg, 10%);
 @navbar-inverse-toggle-icon-bar-bg:         #fff;
-@navbar-inverse-toggle-border-color:        #333;
+@navbar-inverse-toggle-border-color:        darken(@navbar-inverse-bg, 10%);
 
 
 //== Navs
diff --git a/less/categories.less b/less/categories.less
index 63dfd9d..6570f02 100644
--- a/less/categories.less
+++ b/less/categories.less
@@ -19,18 +19,24 @@
 			padding: 10px 15px;
 
 			.icon {
-				font-size: 17px;
-				line-height: 17px;
-				padding: 13px;
+				font-size: 1.7rem;
 				border-radius: 50%;
-				margin-right: 15px;
-				min-width: 46px;
-				min-height: 46px;
-				margin-top: 2px;
+				margin-right: 1.5rem;
+				min-width: 4.6rem;
+				min-height: 4.6rem;
+				margin-top: 0.2rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				> .fa {
+					display: inline;
+					width: inherit;
+				}
 			}
 
 			img, .user-icon {
-				.user-icon-style(46px, 2.4rem, 50%);
+				.user-icon-style(4.6rem, 2.4rem, 50%);
 			}
 
 			h2 {
@@ -40,7 +46,7 @@
 				font-size: 18px;
 				line-height: 22px;
 				margin: 0;
-				margin-left: 62px;
+				margin-left: 6.2rem;
 
 				strong {
 					color: @gray-dark;
@@ -107,12 +113,18 @@
 				margin-bottom: 1px;
 			}
 			.icon {
-				min-width: 23px;
-				min-height: 23px;
-				font-size: 10px;
-				line-height: 12px;
-				padding: 5px;
-				margin-right: 5px;
+				min-width: 2.3rem;
+				min-height: 2.3rem;
+				font-size: 1rem;
+				margin-right: 0.5rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				> .fa {
+					display: inline;
+					width: inherit;
+				}
 			}
 		}
 
diff --git a/less/category.less b/less/category.less
index 0522a15..5e2403e 100644
--- a/less/category.less
+++ b/less/category.less
@@ -38,7 +38,7 @@
 				}
 
 				.fa-check {
-					padding: 14.5px;	/* 14.5*2 + 15 + 2px border = 46px */
+					//padding: 14.5px;	/* 14.5*2 + 15 + 2px border = 46px */
 					border-radius: 50%;
 					position: absolute;
 					font-size: 15px;
@@ -49,7 +49,9 @@
 					background: white;
 					width: 100%;
 					height: 100%;
-					padding: 14px;
+					display: flex;
+					justify-content: center;
+					align-items: center;
 
 					&:before {
 						.pointer;
@@ -58,6 +60,12 @@
 
 				.avatar {
 					opacity: 1;
+
+					&.avatar-rounded {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+					}
 				}
 
 				.fa-check, .avatar {
@@ -109,9 +117,11 @@
 			}
 
 			.fa-stack {
-				font-size: 90%;
+				font-size: 1rem;
 				border-radius: 50%;
-				vertical-align: -6px;
+				display: inline-flex;
+				align-items: center;
+				justify-items: center;
 			}
 
 			.card .user-icon {
diff --git a/less/chats.less b/less/chats.less
index de9b7d2..916beca 100644
--- a/less/chats.less
+++ b/less/chats.less
@@ -297,12 +297,12 @@
 			margin-bottom: 0.5rem;
 			z-index: 1;
 			position: absolute;
-			bottom: 2px;
+			bottom: 0.2rem;
 			left: 53px;
 
 			li {
 				display: inline-block;
-				width: 16px;
+				width: 1.6rem;
 				padding: 0;
 				margin: 0;
 
@@ -312,14 +312,14 @@
 
 				.avatar {
 					border: 2px solid white;
-					width: 28px;
-					height: 28px;
-					line-height: 26px;
+					width: 2.8rem;
+					height: 2.8rem;
+					line-height: 2.6rem;
 					vertical-align: bottom;
 				}
 
 				img {
-					margin-top: -4px;
+					margin-top: -0.4rem;
 				}
 			}
 		}
@@ -330,16 +330,16 @@
 			left: 0px;
 
 			.avatar {
-				height: 80px;
-				width: 80px;
-				font-size: 40px;
+				height: 8rem;
+				width: 8rem;
+				font-size: 4rem;
 				border-radius: 0;
 			}
 		}
 
 		.avatar-placeholder {
-			height: 80px;
-			width: 80px;
+			height: 8rem;
+			width: 8rem;
 			background: @gray-lighter;
 			position: absolute;
 			top: 0px;
@@ -540,6 +540,12 @@
 				margin: 0 2rem;
 			}
 		}
+
+		.avatar {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
 	}
 
 	.user-typing {
diff --git a/less/header.less b/less/header.less
index 6cdd230..2a793fa 100644
--- a/less/header.less
+++ b/less/header.less
@@ -128,7 +128,7 @@
 	}
 
 	#user_dropdown {
-		padding: 9px 15px;
+		padding: ((@navbar-height - 30px) / 2) 15px;
 
 		img, .user-icon {
 			.user-icon-style(30px, 1.8rem, 50%);
diff --git a/less/mobile.less b/less/mobile.less
index 2990cc6..fb5bcf9 100644
--- a/less/mobile.less
+++ b/less/mobile.less
@@ -51,7 +51,7 @@
 	}
 
 	.navbar-toggle {
-		padding: 10px 17px;
+		padding: ((@navbar-height - 30px) / 2) 17px;
 		margin: 0;
 		line-height: 30px;
 		border: none;
@@ -113,9 +113,9 @@
 					left: 0;
 
 					.avatar {
-						height: 40px;
-						width: 40px;
-						font-size: 20px;
+						height: 4rem;
+						width: 4rem;
+						font-size: 2rem;
 						border-radius: 0;
 					}
 				}
@@ -275,6 +275,9 @@
 			bottom: -22px;
 			left: 93px;
 			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 		}
 
 		i {
diff --git a/less/modules/nprogress.less b/less/modules/nprogress.less
index e15dce2..ac121e8 100644
--- a/less/modules/nprogress.less
+++ b/less/modules/nprogress.less
@@ -32,8 +32,8 @@
   display: block;
   position: fixed;
   z-index: 1031;
-  top: 15px;
-  right: 15px;
+  top: 20px;
+  right: 20px;
 }
 
 @media (max-width: @screen-xs-max) {
diff --git a/less/modules/taskbar.less b/less/modules/taskbar.less
index a732c4d..6b20334 100644
--- a/less/modules/taskbar.less
+++ b/less/modules/taskbar.less
@@ -54,15 +54,18 @@
 				&::after {
 					content: '\f06e';
 					font-family: "FontAwesome";
-					font-size: 13px;
+					font-size: 1rem;
 					background: black;
 					border-radius: 50%;
 					color: white;
 					position: absolute;
 					top: 0;
 					right: 0;
-					width: 20px;
-					height: 20px;
+					width: 2rem;
+					height: 2rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 				}
 			}
 
@@ -71,8 +74,11 @@
 			}
 
 			a {
-				padding: 3px 15px;
-				font-size: 20px;
+				padding: 0;
+				font-size: 2rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
 
 				&.user-icon {
 					overflow: visible;
@@ -83,8 +89,8 @@
 				}
 
 				border-radius: 50%;
-				height: 50px;
-				width: 50px;
+				height: 5rem;
+				width: 5rem;
 
 				> span {
 					display: none;
@@ -96,11 +102,17 @@
 				animation-duration: 1s;
 				-webkit-animation-fill-mode: both;
 				animation-fill-mode: both;
+
+				> i {
+					width: inherit;
+					line-height: 1;
+					display: inline;
+				}
 			}
 
 			img {
-				max-width: 24px;
-				max-height: 24px;
+				max-width: 2.4rem;
+				max-height: 2.4rem;
 				margin-right: 1em;
 			}
 
@@ -153,8 +165,8 @@
 					margin-left: 15px;
 
 					i {
-						font-size: 18px;
-						line-height: 42px;
+						font-size: 1.8rem;
+						line-height: 4.2rem;
 						color: #FFF;
 					}
 				}
diff --git a/less/search.less b/less/search.less
index 43e1b91..835c0b3 100644
--- a/less/search.less
+++ b/less/search.less
@@ -84,6 +84,9 @@
 		.fa-stack {
 			font-size: 10px;
 			border-radius: 50%;
+			display: inline-flex;
+			align-items: center;
+			justify-items: center;
 		}
 	}
 }
diff --git a/less/topic.less b/less/topic.less
index 27f9415..cbc2af0 100644
--- a/less/topic.less
+++ b/less/topic.less
@@ -60,13 +60,19 @@
 	}
 	.category-item {
 		.icon {
-			min-width: 23px;
-    		min-height: 23px;
-    		font-size: 10px;
-    		line-height: 12px;
-    		padding: 5px;
-			margin-right: 5px;
+			min-width: 2.3rem;
+    		min-height: 2.3rem;
+    		font-size: 1rem;
+			margin-right: 0.5rem;
 			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			> .fa {
+				display: inline;
+				width: inherit;
+			}
 		}
 	}
 
@@ -106,26 +112,25 @@
 		.icon {
 			position: relative;
 			border-radius: 50%;
-			min-width: 46px;
-			min-height: 46px;
-			margin-top: 2px;
-
+			font-size: 12px;
 
 			> a > .status {
 				position: absolute;
-				right: 12px;
-				font-size: 12px;
-				top: 0px;
+				font-size: 1.2rem;
+				left: 1.4rem;
+				top: -0.5rem;
 				z-index: 1;
 
 				@media (min-width: @screen-md-min) {
-					top: 2px;
-					font-size: 16px;
+					top: 0.2rem;
+					left: auto;
+					right: 1rem;
+					font-size: 1.6rem;
 				}
 			}
 
 			.avatar {
-				margin-right: 15px;
+				margin-right: 1.5rem;
 			}
 		}
 
@@ -352,7 +357,10 @@
 			margin-top: -3px;
 
 			.avatar {
-				.user-icon-style(23px, 1.3rem, 50%);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				.user-icon-style(2.3rem, 1.3rem, 50%);
 			}
 		}
 
@@ -369,24 +377,24 @@
 		.icon {
 			position: relative;
 			border-radius: 50%;
-			min-width: 46px;
-			min-height: 46px;
-			margin-top: 2px;
+			min-width: 4.6rem;
+			min-height: 4.6rem;
+			margin-top: 0.2rem;
 
 			> a > .status {
 				position: absolute;
-				right: 12px;
-				font-size: 12px;
-				top: 0px;
+				right: 1.2rem;
+				font-size: 1.2rem;
+				top: 0;
 
 				@media (min-width: @screen-md-min) {
-					top: 2px;
-					font-size: 16px;
+					top: 0.2rem;
+					font-size: 1.6rem;
 				}
 			}
 
 			.avatar {
-				margin-right: 15px;
+				margin-right: 1.5rem;
 			}
 		}
 
@@ -511,17 +519,17 @@
 
 	.pagination-block {
 		position: fixed;
-		background-color: @gray-lighter;
-		bottom: 0px;
-		right: 0px;
+		background-color: #c0c0c0;
+		bottom: 0;
+		right: 0;
 		z-index: 100;
 		transition: opacity 250ms ease-in;
 		opacity: 0;
 
 		.pagination-text {
-			color: @text-color;
+			color: #fff;
 			position: relative;
-    		top: -3px;
+			top: -0.4rem;
     		font-weight: bolder;
 		}
 
@@ -530,12 +538,17 @@
 		}
 
 		.wrapper {
-			padding: 5px 0px 5px 0px;
+			padding: 0.5rem 0 0.5rem 0;
+			color: #fff;
+			.pagination-text {
+				vertical-align: baseline;
+			}
 			.dropdown-toggle {
-				padding-left: 20px;
-				padding-right: 20px;
-				padding-top: 10px;
-				padding-bottom: 10px;
+				padding-left: 2rem;
+				padding-right: 2rem;
+				padding-top: 1rem;
+				padding-bottom: 1rem;
+				line-height: 2.6rem;
 			}
 			.dropdown-menu {
 				width: 475px;