diff --git a/src/webui/src/components/Header/header.scss b/src/webui/src/components/Header/header.scss
index 860102c4b..0f53c2263 100644
--- a/src/webui/src/components/Header/header.scss
+++ b/src/webui/src/components/Header/header.scss
@@ -6,13 +6,13 @@
   width: 100%;
   align-items: center;
   background: $primary-color;
+  color: #fff;
 
   figure {
     margin: 0 0 0 10px;
     font-size: 14px;
     line-height: 18px;
     padding: 8px 0;
-    color: #f9f2f4;
   }
 
   .headerWrap {
@@ -22,13 +22,24 @@
     @include container-size();
   }
 
+  .headerRight {
+    margin-left: auto;
+  }
+
   .logo {
     height: 50px;
   }
 
-  .welcome {
-    margin-left: auto;
-    color: white;
+  .headerButton {
+    color: inherit;
+    border-color: #fff;
+    background-color: transparent;
+
+    &:hover, &:focus {
+      color: $primary-color;
+      border-color: #f7f8f6;
+      background-color: #f7f8f6;
+    }
   }
 }
 
diff --git a/src/webui/src/components/Header/index.js b/src/webui/src/components/Header/index.js
index 573c29290..3426805c1 100644
--- a/src/webui/src/components/Header/index.js
+++ b/src/webui/src/components/Header/index.js
@@ -129,14 +129,13 @@ export default class Header extends React.Component {
   renderUserActionButton() {
     if (!this.isTokenExpire) { // TODO: Check jwt token expire
       return (
-        <div className={ classes.welcome }>
-          <span className="user-logged-greetings">Hi, {storage.getItem('username')}</span>
-          &nbsp;
-          <Button className="header-button-logout" type="danger" onClick={this.handleLogout}>Logout</Button>
+        <div className="user-logged">
+          <span className="user-logged-greetings" style={ {marginRight: '10px'} }>Hi, {storage.getItem('username')}</span>
+          <Button className={`${classes.headerButton} header-button-logout`} type="danger" onClick={this.handleLogout}>Logout</Button>
         </div>
       );
     } else {
-      return <Button className="header-button-login" type="danger" style={ {marginLeft: 'auto'} } onClick={ this.toggleLoginModal }>Login</Button>;
+      return <Button className={`${classes.headerButton} header-button-login`} onClick={ this.toggleLoginModal }>Login</Button>;
     }
   }
 
@@ -154,7 +153,10 @@ export default class Header extends React.Component {
             <br/>
             npm adduser --registry { registryURL }
           </figure>
-          {this.renderUserActionButton()}
+
+          <div className={ classes.headerRight }>
+            {this.renderUserActionButton()}
+          </div>
         </div>
 
         <Dialog
diff --git a/src/webui/src/components/Header/logo.png b/src/webui/src/components/Header/logo.png
index c26b6c0ff..ec26c9e1e 100644
Binary files a/src/webui/src/components/Header/logo.png and b/src/webui/src/components/Header/logo.png differ
diff --git a/src/webui/src/components/Package/package.scss b/src/webui/src/components/Package/package.scss
index ccf30f52f..54b1b83f0 100644
--- a/src/webui/src/components/Package/package.scss
+++ b/src/webui/src/components/Package/package.scss
@@ -3,6 +3,7 @@
 .package {
   display: block;
   position: relative;
+  color: inherit;
   margin: 0;
   padding: 10px 0;
   cursor: pointer;
@@ -10,7 +11,6 @@
 
   h1 {
     font-size: 18px;
-    color: $primary-color;
 
     :global {
       .el-tag {
@@ -58,7 +58,6 @@
       left: 0;
       content: 'Click to view detail';
       text-align: center;
-      color: $primary-color;
       font-size: 18px;
     }
   }
diff --git a/src/webui/src/components/PackageDetail/packageDetail.scss b/src/webui/src/components/PackageDetail/packageDetail.scss
index 76e2fb56f..14c64dba0 100644
--- a/src/webui/src/components/PackageDetail/packageDetail.scss
+++ b/src/webui/src/components/PackageDetail/packageDetail.scss
@@ -3,7 +3,6 @@
 .pkgDetail {
   .title {
     font-size: 26px;
-    color: $primary-color;
     border-bottom: 1px solid $border-color;
     font-weight: 600;
     margin: 0 0 40px;
diff --git a/src/webui/src/components/PackageSidebar/Module/style.scss b/src/webui/src/components/PackageSidebar/Module/style.scss
index 0eaf0268d..aae88c24c 100644
--- a/src/webui/src/components/PackageSidebar/Module/style.scss
+++ b/src/webui/src/components/PackageSidebar/Module/style.scss
@@ -1,11 +1,13 @@
 @import '../../../styles/variable';
 
 .module {
+
+  margin-bottom: 10px;
+
   .moduleTitle {
     display: flex;
     align-items: flex-end;
     font-size: 21px;
-    color: $primary-color;
     margin: 0 0 10px;
     padding: 5px 0;
     font-weight: 600;
diff --git a/src/webui/src/components/PackageSidebar/modules/Dependencies/style.scss b/src/webui/src/components/PackageSidebar/modules/Dependencies/style.scss
index 052d3eb1b..5fbefac14 100644
--- a/src/webui/src/components/PackageSidebar/modules/Dependencies/style.scss
+++ b/src/webui/src/components/PackageSidebar/modules/Dependencies/style.scss
@@ -7,7 +7,7 @@
     line-height: 1.5;
 
     a {
-      color: $primary-color;
+      color: inherit;
     }
   }
 }
diff --git a/src/webui/src/components/PackageSidebar/modules/Maintainers/style.scss b/src/webui/src/components/PackageSidebar/modules/Maintainers/style.scss
index 657242d9e..2e3895e3f 100644
--- a/src/webui/src/components/PackageSidebar/modules/Maintainers/style.scss
+++ b/src/webui/src/components/PackageSidebar/modules/Maintainers/style.scss
@@ -7,7 +7,6 @@
     background: none;
     border: none;
     font-size: 14px;
-    color: $primary-color;
     text-align: center;
     padding: 10px 0;
   }
diff --git a/src/webui/src/styles/global.scss b/src/webui/src/styles/global.scss
index c5f8528f8..c935d7e56 100644
--- a/src/webui/src/styles/global.scss
+++ b/src/webui/src/styles/global.scss
@@ -28,4 +28,21 @@ ul {
     flex-direction: column;
     min-height: 100vh;
   }
+
+  .el-button {
+    &:hover, &:focus {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+
+  .el-input__inner {
+    &:hover, &:focus {
+      border-color: $primary-color;
+    }
+  }
+
+  .el-dialog__headerbtn:hover .el-dialog__close {
+    color: $text-black;
+  }
 }
diff --git a/src/webui/src/styles/variable.scss b/src/webui/src/styles/variable.scss
index 352371ec7..21d93e095 100644
--- a/src/webui/src/styles/variable.scss
+++ b/src/webui/src/styles/variable.scss
@@ -12,7 +12,7 @@ $space-lg: 30px;
 $font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
 /* Colors */
-$primary-color: #de4136;
+$primary-color: #4b5e40;
 $border-color: #e3e3e3;
 $text-black: #3c3c3c;
 $text-grey: #95989A;
diff --git a/test/webui/components/__snapshots__/header.spec.js.snap b/test/webui/components/__snapshots__/header.spec.js.snap
index d7bff72e9..2e310c915 100644
--- a/test/webui/components/__snapshots__/header.spec.js.snap
+++ b/test/webui/components/__snapshots__/header.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Header /> snapshot test shoud match snapshot 1`] = `"<header class=\\"header\\"><div class=\\"headerWrap\\"><a href=\\"/\\"><img src=\\"\\" class=\\"logo\\"></a><figure>npm set registry nullblank<br>npm adduser --registry nullblank</figure><button style=\\"margin-left: auto;\\" class=\\"el-button el-button--danger header-button-login\\" type=\\"button\\"><span>Login</span></button></div><div><div style=\\"z-index: 1013; display: none;\\" class=\\"el-dialog__wrapper\\"><div style=\\"top: 15%;\\" class=\\"el-dialog el-dialog--tiny\\"><div class=\\"el-dialog__header\\"><span class=\\"el-dialog__title\\">Login</span><button type=\\"button\\" class=\\"el-dialog__headerbtn\\"><i class=\\"el-dialog__close el-icon el-icon-close\\"></i></button></div><form class=\\"el-form el-form--label-right login-form\\"><div class=\\"el-dialog__body\\"><br><div class=\\"el-input\\"><input type=\\"text\\" name=\\"username\\" placeholder=\\"Username\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div><br><br><div class=\\"el-input\\"><input type=\\"password\\" name=\\"password\\" placeholder=\\"Type your password\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div></div><div class=\\"el-dialog__footer dialog-footer\\"><button class=\\"el-button el-button--default cancel-login-button\\" type=\\"button\\"><span>Cancel</span></button><button class=\\"el-button el-button--default login-button\\" type=\\"submit\\"><span>Login</span></button></div></form></div></div><div class=\\"v-modal\\" style=\\"z-index: 1012; display: none;\\"></div></div></header>"`;
+exports[`<Header /> snapshot test shoud match snapshot 1`] = `"<header class=\\"header\\"><div class=\\"headerWrap\\"><a href=\\"/\\"><img src=\\"\\" class=\\"logo\\"></a><figure>npm set registry nullblank<br>npm adduser --registry nullblank</figure><div class=\\"headerRight\\"><button class=\\"el-button el-button--default headerButton header-button-login\\" type=\\"button\\"><span>Login</span></button></div></div><div><div style=\\"z-index: 1013; display: none;\\" class=\\"el-dialog__wrapper\\"><div style=\\"top: 15%;\\" class=\\"el-dialog el-dialog--tiny\\"><div class=\\"el-dialog__header\\"><span class=\\"el-dialog__title\\">Login</span><button type=\\"button\\" class=\\"el-dialog__headerbtn\\"><i class=\\"el-dialog__close el-icon el-icon-close\\"></i></button></div><form class=\\"el-form el-form--label-right login-form\\"><div class=\\"el-dialog__body\\"><br><div class=\\"el-input\\"><input type=\\"text\\" name=\\"username\\" placeholder=\\"Username\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div><br><br><div class=\\"el-input\\"><input type=\\"password\\" name=\\"password\\" placeholder=\\"Type your password\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div></div><div class=\\"el-dialog__footer dialog-footer\\"><button class=\\"el-button el-button--default cancel-login-button\\" type=\\"button\\"><span>Cancel</span></button><button class=\\"el-button el-button--default login-button\\" type=\\"submit\\"><span>Login</span></button></div></form></div></div><div class=\\"v-modal\\" style=\\"z-index: 1012; display: none;\\"></div></div></header>"`;