diff --git a/src/containers/Sidebar/style.scss b/src/containers/Sidebar/style.scss
index 39b972c..d9e236c 100644
--- a/src/containers/Sidebar/style.scss
+++ b/src/containers/Sidebar/style.scss
@@ -5,7 +5,6 @@
     flex-direction: column;
     align-items: center;
     width: 120px;
-    background: #fff;
 }
 
 .slidebar-logo {
diff --git a/src/render.tsx b/src/render.tsx
index 613f58a..30a9d56 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react'
 import { render } from 'react-dom'
-import { BrowserRouter } from 'react-router-dom'
+import { HashRouter, BrowserRouter } from 'react-router-dom'
 import { I18nextProvider } from 'react-i18next'
 import { AppContainer } from 'react-hot-loader'
+import { isClashX } from '@lib/jsBridge'
 import App from '@views/App'
 import i18n from '@i18n'
 
 const rootEl = document.getElementById('root')
+const Router = isClashX() ? HashRouter : BrowserRouter
 
 // Hot Module Replacement API
 declare let module: { hot: any }
@@ -14,11 +16,11 @@ declare let module: { hot: any }
 export default function renderApp () {
     render(
         <AppContainer>
-            <BrowserRouter>
+            <Router>
                 <I18nextProvider i18n={ i18n }>
                     <App />
                 </I18nextProvider>
-            </BrowserRouter>
+            </Router>
         </AppContainer>,
         rootEl
     )
@@ -28,11 +30,11 @@ export default function renderApp () {
             const NewApp = require('./views/App').default
             render(
                 <AppContainer>
-                    <BrowserRouter>
+                    <Router>
                         <I18nextProvider i18n={ i18n }>
                             <NewApp />
                         </I18nextProvider>
-                    </BrowserRouter>
+                    </Router>
                 </AppContainer>,
                 rootEl
             )
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 19411ed..9693e25 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -3,6 +3,7 @@
 // styles initial
 html {
     box-sizing: border-box;
+    background: rgba($color: $color-white, $alpha: 0.9);
 }
 
 *,
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 654926d..c940f91 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -14,6 +14,7 @@ $color-primary-lightly: #b4ddf5;
 $color-gray: #d8dee2;
 $color-gray-dark: #b7c5d6;
 $color-gray-darken: #909399;
+$color-white: #fff;
 $color-green: #67c23a;
 $color-orange: #e6a23c;
 $color-red: #f56c6c;