diff --git a/src/styles/base.less b/src/styles/base.less
index 48d40a03..c19d86d0 100644
--- a/src/styles/base.less
+++ b/src/styles/base.less
@@ -1,3 +1,13 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-color: @color_body;
+    font-family: @font-default;
+    font-weight: 400;
+    font-size: 14px;
+}
+
 .app {
     position: relative;
     min-height: 100vh;
diff --git a/src/styles/header.less b/src/styles/header.less
new file mode 100644
index 00000000..b3a680e9
--- /dev/null
+++ b/src/styles/header.less
@@ -0,0 +1,37 @@
+header {
+    width: 100%;
+    height: 52px;
+    background: @color_header;
+
+    svg {
+        fill: @color_white;
+        height: 28px;
+        width: 100px;
+        flex: 1;
+    }
+
+    .layout-wrapper {
+        width: 100%;
+        height: 100%;
+        max-width: 1170px;
+        margin: 0 auto;
+        padding: 0 32px;
+        display: flex;
+        align-items: center;
+    }
+
+    a, a:visited {
+        color: @color_white;
+        margin-left: 24px;
+        .hover();
+        
+        &:first-child {
+            margin: 0px;
+        }
+
+        &:hover,
+        &:active {
+            color: @color_text_secondary;
+        }
+    }
+}
diff --git a/src/styles/index.less b/src/styles/index.less
index 56948856..23b95022 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -2,6 +2,7 @@
 @import './colors.less';
 @import './mixins.less';
 @import './base.less';
+@import './header.less';
 @import './aside.less';
 @import './content.less';
 @import './modal.less';