diff --git a/spug_web/config-overrides.js b/spug_web/config-overrides.js
index 34a4ab5..a66ddc5 100644
--- a/spug_web/config-overrides.js
+++ b/spug_web/config-overrides.js
@@ -7,5 +7,12 @@ const {override, addDecoratorsLegacy, addLessLoader} = require('customize-cra');
 
 module.exports = override(
   addDecoratorsLegacy(),
-  addLessLoader(),
+  addLessLoader({
+    lessOptions: {
+      javascriptEnabled: true,
+      modifyVars: {
+        '@primary-color': '#2563fc'
+      }
+    }
+  }),
 );
diff --git a/spug_web/src/index.js b/spug_web/src/index.js
index 8d691d8..58f5b7e 100644
--- a/spug_web/src/index.js
+++ b/spug_web/src/index.js
@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom';
 import { Router } from 'react-router-dom';
 import { ConfigProvider } from 'antd';
 import zhCN from 'antd/es/locale/zh_CN';
-import './index.css';
+import './index.less';
 import App from './App';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
diff --git a/spug_web/src/index.css b/spug_web/src/index.less
similarity index 95%
rename from spug_web/src/index.css
rename to spug_web/src/index.less
index 4005737..69b8796 100644
--- a/spug_web/src/index.css
+++ b/spug_web/src/index.less
@@ -1,4 +1,4 @@
-@import '~antd/dist/antd.css';
+@import '~antd/dist/antd.less';
 
 body {
   margin: 0;
diff --git a/spug_web/src/layout/Sider.js b/spug_web/src/layout/Sider.js
index 098720f..238bbfc 100644
--- a/spug_web/src/layout/Sider.js
+++ b/spug_web/src/layout/Sider.js
@@ -3,8 +3,7 @@ import { Layout, Menu } from 'antd';
 import { hasPermission, history } from 'libs';
 import styles from './layout.module.less';
 import menus from '../routes';
-import logo from './logo-spug.png';
-import logoText from './logo-text.png';
+import logo from './logo-spug-white.png';
 
 let selectedKey = window.location.pathname;
 const OpenKeysMap = {};
@@ -56,7 +55,6 @@ export default function Sider(props) {
     <Layout.Sider width={208} collapsed={props.collapsed} className={styles.sider}>
       <div className={styles.logo}>
         <img src={logo} alt="Logo"/>
-        <img src={logoText} alt="logo-text" style={{marginLeft: 25, width: 70}}/>
       </div>
       <div className={styles.menus} style={{height: `${document.body.clientHeight - 64}px`}}>
         <Menu
diff --git a/spug_web/src/layout/index.js b/spug_web/src/layout/index.js
index 7a97423..ad8249a 100644
--- a/spug_web/src/layout/index.js
+++ b/spug_web/src/layout/index.js
@@ -45,7 +45,7 @@ export default function () {
       <Sider collapsed={collapsed}/>
       <Layout style={{height: '100vh'}}>
         <Header collapsed={collapsed} toggle={() => setCollapsed(!collapsed)}/>
-        <Layout.Content className={styles.content}>
+        <Layout.Content className={styles.content} id="spug-container">
           <Switch>
             {Routes}
             <Route component={NotFound}/>
diff --git a/spug_web/src/layout/layout.module.less b/spug_web/src/layout/layout.module.less
index 8fc4727..e3799f4 100644
--- a/spug_web/src/layout/layout.module.less
+++ b/spug_web/src/layout/layout.module.less
@@ -98,12 +98,12 @@
   .logo {
     height: 64px;
     line-height: 64px;
-    padding-left: 15px;
     overflow: hidden;
+    text-align: center;
   }
 
   .logo img {
-    width: 50px;
+    height: 30px;
   }
 }
 
diff --git a/spug_web/src/layout/logo-spug-white.png b/spug_web/src/layout/logo-spug-white.png
new file mode 100644
index 0000000..d8af69b
Binary files /dev/null and b/spug_web/src/layout/logo-spug-white.png differ
diff --git a/spug_web/src/layout/logo-text.png b/spug_web/src/layout/logo-text.png
deleted file mode 100644
index 5a55b54..0000000
Binary files a/spug_web/src/layout/logo-text.png and /dev/null differ