diff --git a/.eslintrc.yml b/.eslintrc.yml
index cabcdf6..9b7a19a 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -20,7 +20,8 @@ extends:
 settings:
   import/resolver: webpack
 
-# globals:
+globals:
+  __DEV__: true
   # Promise: true
 
 rules:
diff --git a/src/api/configs.js b/src/api/configs.js
index 64f6b95..42f8ff0 100644
--- a/src/api/configs.js
+++ b/src/api/configs.js
@@ -1,4 +1,4 @@
-import { getURLAndInit } from 'm/request-helper';
+import { getURLAndInit } from '../misc/request-helper';
 
 const endpoint = '/configs';
 
diff --git a/src/api/connections.js b/src/api/connections.js
index fbc9abd..e385266 100644
--- a/src/api/connections.js
+++ b/src/api/connections.js
@@ -1,4 +1,4 @@
-import { getURLAndInit } from 'm/request-helper';
+import { getURLAndInit } from '../misc/request-helper';
 
 const endpoint = '/connections';
 
diff --git a/src/api/logs.js b/src/api/logs.js
index 3ba4b6d..61aae7e 100644
--- a/src/api/logs.js
+++ b/src/api/logs.js
@@ -1,4 +1,4 @@
-import { getURLAndInit } from 'm/request-helper';
+import { getURLAndInit } from '../misc/request-helper';
 const endpoint = '/logs';
 const textDecoder = new TextDecoder('utf-8');
 
diff --git a/src/api/proxies.js b/src/api/proxies.js
index 5bedf31..8242580 100644
--- a/src/api/proxies.js
+++ b/src/api/proxies.js
@@ -1,4 +1,4 @@
-import { getURLAndInit } from 'm/request-helper';
+import { getURLAndInit } from '../misc/request-helper';
 const endpoint = '/proxies';
 
 /*
diff --git a/src/api/rules.js b/src/api/rules.js
index 2ddaeeb..574de96 100644
--- a/src/api/rules.js
+++ b/src/api/rules.js
@@ -1,4 +1,4 @@
-import { getURLAndInit } from 'm/request-helper';
+import { getURLAndInit } from '../misc/request-helper';
 
 const endpoint = '/rules';
 
diff --git a/src/api/traffic.js b/src/api/traffic.js
index a2a9ccc..569f347 100644
--- a/src/api/traffic.js
+++ b/src/api/traffic.js
@@ -1,4 +1,4 @@
-import { getURLAndInit } from 'm/request-helper';
+import { getURLAndInit } from '../misc/request-helper';
 const endpoint = '/traffic';
 const textDecoder = new TextDecoder('utf-8');
 
diff --git a/src/components/APIConfig.js b/src/components/APIConfig.js
index 51648ef..b4652bc 100644
--- a/src/components/APIConfig.js
+++ b/src/components/APIConfig.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import { useStoreState, useActions } from 'm/store';
+import { useStoreState, useActions } from '../misc/store';
 
-import Field from 'c/Field';
-import Button from 'c/Button';
+import Field from './Field';
+import Button from './Button';
 import SvgYacd from './SvgYacd';
 
 import s0 from './APIConfig.module.css';
 
-import { getClashAPIConfig, updateClashAPIConfig } from 'd/app';
+import { getClashAPIConfig, updateClashAPIConfig } from '../ducks/app';
 
 const { useState, useEffect, useRef, useCallback } = React;
 
diff --git a/src/components/APIDiscovery.js b/src/components/APIDiscovery.js
index b5ce1f9..16c8b62 100644
--- a/src/components/APIDiscovery.js
+++ b/src/components/APIDiscovery.js
@@ -1,14 +1,13 @@
 import React, { useEffect } from 'react';
-import { useActions, useStoreState } from 'm/store';
-
-import Modal from 'c/Modal';
-import APIConfig from 'c/APIConfig';
-
-import { closeModal } from 'd/modals';
-import { fetchConfigs } from 'd/configs';
-
+import { useActions, useStoreState } from '../misc/store';
 import { DOES_NOT_SUPPORT_FETCH, errors } from '../misc/errors';
 
+import Modal from './Modal';
+import APIConfig from './APIConfig';
+
+import { closeModal } from '../ducks/modals';
+import { fetchConfigs } from '../ducks/configs';
+
 import s0 from './APIDiscovery.module.css';
 
 const mapStateToProps = s => ({
diff --git a/src/components/Button.js b/src/components/Button.js
index 5b0365b..d9bcd22 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-import s0 from 'c/Button.module.css';
+import s0 from './Button.module.css';
 const noop = () => {};
 
 const { memo, forwardRef } = React;
diff --git a/src/components/Config.js b/src/components/Config.js
index a15e858..1342354 100644
--- a/src/components/Config.js
+++ b/src/components/Config.js
@@ -1,23 +1,23 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useStoreState, useActions } from 'm/store';
+import { useStoreState, useActions } from '../misc/store';
 
-import { getConfigs, fetchConfigs, updateConfigs } from 'd/configs';
+import { getConfigs, fetchConfigs, updateConfigs } from '../ducks/configs';
 import {
   clearStorage,
   selectChartStyleIndex,
   getSelectedChartStyleIndex
-} from 'd/app';
+} from '../ducks/app';
 
-import ContentHeader from 'c/ContentHeader';
-import Switch from 'c/Switch';
-import ToggleSwitch from 'c/ToggleSwitch';
-import Input from 'c/Input';
-import Button from 'c/Button';
-import Selection from 'c/Selection';
-import TrafficChartSample from 'c/TrafficChartSample';
+import ContentHeader from './ContentHeader';
+import Switch from './Switch';
+import ToggleSwitch from './ToggleSwitch';
+import Input from './Input';
+import Button from './Button';
+import Selection from './Selection';
+import TrafficChartSample from './TrafficChartSample';
 
-import s0 from 'c/Config.module.css';
+import s0 from './Config.module.css';
 
 const propsList = [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
 
diff --git a/src/components/Connections.js b/src/components/Connections.js
index 5dbccec..c07de0a 100644
--- a/src/components/Connections.js
+++ b/src/components/Connections.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import ContentHeader from 'c/ContentHeader';
-import ConnectionTable from 'c/ConnectionTable';
+import ContentHeader from './ContentHeader';
+import ConnectionTable from './ConnectionTable';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
-import { useStoreState } from 'm/store';
-import { getClashAPIConfig } from 'd/app';
+import { useStoreState } from '../misc/store';
+import { getClashAPIConfig } from '../ducks/app';
 import { X as IconClose } from 'react-feather';
 import SvgYacd from './SvgYacd';
 import { ButtonWithIcon } from './Button';
diff --git a/src/components/ErrorBoundary.js b/src/components/ErrorBoundary.js
index 05ba9e0..25fb80c 100644
--- a/src/components/ErrorBoundary.js
+++ b/src/components/ErrorBoundary.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { getSentry } from '../misc/sentry';
-import ErrorBoundaryFallback from 'c/ErrorBoundaryFallback';
+import ErrorBoundaryFallback from './ErrorBoundaryFallback';
 import { deriveMessageFromError } from '../misc/errors';
 
 // XXX this is no Hook equivalents for componentDidCatch
diff --git a/src/components/Home.js b/src/components/Home.js
index bc5b608..c59180f 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,10 +1,10 @@
 import React, { Suspense } from 'react';
 
-import ContentHeader from 'c/ContentHeader';
-import TrafficChart from 'c/TrafficChart';
-import TrafficNow from 'c/TrafficNow';
-import Loading from 'c/Loading';
-import s0 from 'c/Home.module.css';
+import ContentHeader from './ContentHeader';
+import TrafficChart from './TrafficChart';
+import TrafficNow from './TrafficNow';
+import Loading from './Loading';
+import s0 from './Home.module.css';
 
 export default function Home() {
   return (
diff --git a/src/components/LogSearch.js b/src/components/LogSearch.js
index dd43c8a..0b5bec2 100644
--- a/src/components/LogSearch.js
+++ b/src/components/LogSearch.js
@@ -1,5 +1,5 @@
 import Search from './Search';
-import { getSearchText, updateSearchText } from 'd/logs';
+import { getSearchText, updateSearchText } from '../ducks/logs';
 
 const mapStateToProps = s => ({ searchText: getSearchText(s) });
 const actions = { updateSearchText };
diff --git a/src/components/Logs.js b/src/components/Logs.js
index ea2f58e..9b4950e 100644
--- a/src/components/Logs.js
+++ b/src/components/Logs.js
@@ -1,20 +1,19 @@
 import React, { memo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useStoreState, useActions } from 'm/store';
-import { getClashAPIConfig } from 'd/app';
+import { useStoreState, useActions } from '../misc/store';
+import { getClashAPIConfig } from '../ducks/app';
 
 import SvgYacd from './SvgYacd';
 import { FixedSizeList as List, areEqual } from 'react-window';
-import ContentHeader from 'c/ContentHeader';
+import ContentHeader from './ContentHeader';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
-// TODO move this into a redux action
 import { fetchLogs } from '../api/logs';
 import LogSearch from './LogSearch';
-import { getLogsForDisplay, appendLog } from 'd/logs';
-import { getLogLevel } from 'd/configs';
+import { getLogsForDisplay, appendLog } from '../ducks/logs';
+import { getLogLevel } from '../ducks/configs';
 
-import s0 from 'c/Logs.module.css';
+import s0 from './Logs.module.css';
 const paddingBottom = 30;
 const colors = {
   debug: 'none',
diff --git a/src/components/Proxies.js b/src/components/Proxies.js
index 0020114..eb0f78b 100644
--- a/src/components/Proxies.js
+++ b/src/components/Proxies.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStoreState } from 'm/store';
+import { useStoreState } from '../misc/store';
 
 import { connect } from './StateProvider';
 
diff --git a/src/components/Root.js b/src/components/Root.js
index 217d79d..460c882 100644
--- a/src/components/Root.js
+++ b/src/components/Root.js
@@ -2,14 +2,15 @@ import React, { Suspense } from 'react';
 import { Provider } from '../misc/store';
 import StateProvider from './StateProvider';
 import { HashRouter as Router, Route } from 'react-router-dom';
-import Loading2 from 'c/Loading2';
-import ErrorBoundary from 'c/ErrorBoundary';
-import SideBar from 'c/SideBar';
-import Home from 'c/Home';
-import Logs from 'c/Logs';
-import Config from 'c/Config';
-import Connections from 'c/Connections';
-import APIDiscovery from 'c/APIDiscovery';
+import Loading2 from './Loading2';
+import ErrorBoundary from './ErrorBoundary';
+import SideBar from './SideBar';
+import Home from './Home';
+import Logs from './Logs';
+import Config from './Config';
+import StyleGuide from './StyleGuide';
+import Connections from './Connections';
+import APIDiscovery from './APIDiscovery';
 import { store } from '../store/configureStore';
 import './Root.css';
 import s0 from './Root.module.css';
@@ -31,9 +32,6 @@ const Rules = React.lazy(() =>
   )
 );
 
-// testing...
-// import StyleGuide from 'c/StyleGuide';
-
 window.store = store;
 
 const initialState = {
@@ -44,6 +42,16 @@ const initialState = {
   }
 };
 
+const routes = [
+  ['home', '/', Home],
+  ['connections', '/connections', Connections],
+  ['configs', '/configs', Config],
+  ['logs', '/logs', Logs],
+  ['proxies', '/proxies', Proxies],
+  ['rules', '/rules', Rules],
+  __DEV__ ? ['style', '/style', StyleGuide] : false
+].filter(Boolean);
+
 const Root = () => (
   <ErrorBoundary>
     <StateProvider initialState={initialState}>
@@ -54,13 +62,9 @@ const Root = () => (
             <Route path="/" render={props => <SideBar {...props} />} />
             <div className={s0.content}>
               <Suspense fallback={<Loading2 />}>
-                <Route exact path="/" render={() => <Home />} />
-                <Route exact path="/connections" component={Connections} />
-                <Route exact path="/overview" render={() => <Home />} />
-                <Route exact path="/configs" component={Config} />
-                <Route exact path="/logs" component={Logs} />
-                <Route exact path="/proxies" render={() => <Proxies />} />
-                <Route exact path="/rules" render={() => <Rules />} />
+                {routes.map(([key, path, component]) => (
+                  <Route exact key={key} path={path} component={component} />
+                ))}
               </Suspense>
             </div>
           </div>
diff --git a/src/components/RuleSearch.js b/src/components/RuleSearch.js
index fa32229..d23f4d2 100644
--- a/src/components/RuleSearch.js
+++ b/src/components/RuleSearch.js
@@ -1,5 +1,5 @@
 import Search from './Search';
-import { getSearchText, updateSearchText } from 'd/rules';
+import { getSearchText, updateSearchText } from '../ducks/rules';
 
 const mapStateToProps = s => ({ searchText: getSearchText(s) });
 const actions = { updateSearchText };
diff --git a/src/components/Rules.js b/src/components/Rules.js
index 2e2db3c..e881443 100644
--- a/src/components/Rules.js
+++ b/src/components/Rules.js
@@ -1,15 +1,15 @@
 import React from 'react';
-import { useActions, useStoreState } from 'm/store';
-import { ButtonWithIcon } from 'c/Button';
+import { useActions, useStoreState } from '../misc/store';
+import { ButtonWithIcon } from './Button';
 import { FixedSizeList as List, areEqual } from 'react-window';
 import { RotateCw } from 'react-feather';
 
-import ContentHeader from 'c/ContentHeader';
-import Rule from 'c/Rule';
-import RuleSearch from 'c/RuleSearch';
+import ContentHeader from './ContentHeader';
+import Rule from './Rule';
+import RuleSearch from './RuleSearch';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 
-import { getRules, fetchRules, fetchRulesOnce } from 'd/rules';
+import { getRules, fetchRules, fetchRulesOnce } from '../ducks/rules';
 
 const { memo, useEffect, useMemo } = React;
 
diff --git a/src/components/Search.js b/src/components/Search.js
index b93d429..a59ffce 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -1,8 +1,8 @@
 import React, { memo, useState, useMemo } from 'react';
-import Icon from 'c/Icon';
+import Icon from './Icon';
 
-import search from 's/search.svg';
-import { useActions, useStoreState } from 'm/store';
+import search from '../svg/search.svg';
+import { useActions, useStoreState } from '../misc/store';
 
 import debounce from 'lodash-es/debounce';
 
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index b70a672..99a28c1 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -4,16 +4,13 @@ import cx from 'classnames';
 import { Link } from 'react-router-dom';
 import { Command, Activity, Globe, Link2, Settings, File } from 'react-feather';
 
-import { useActions } from 'm/store';
-import { switchTheme } from 'd/app';
-
-import Icon from 'c/Icon';
-
-import moon from 's/moon.svg';
+import { useActions } from '../misc/store';
+import { switchTheme } from '../ducks/app';
 
+import Icon from './Icon';
+import moon from '../svg/moon.svg';
 import SvgYacd from './SvgYacd';
-
-import s from 'c/SideBar.module.css';
+import s from './SideBar.module.css';
 
 const icons = {
   activity: Activity,
diff --git a/src/components/StyleGuide.js b/src/components/StyleGuide.js
index d96e397..7b6f53d 100644
--- a/src/components/StyleGuide.js
+++ b/src/components/StyleGuide.js
@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import ToggleSwitch from 'c/ToggleSwitch';
-import Input from 'c/Input';
-import Switch from 'c/Switch';
-import Button from 'c/Button';
+import ToggleSwitch from './ToggleSwitch';
+import Input from './Input';
+import Switch from './Switch';
+import Button from './Button';
 // import Modal from 'c/Modal';
 // import APIConfig from 'c/APIConfig';
 // import Proxy from 'c/Proxy';
diff --git a/src/components/Switch.js b/src/components/Switch.js
index 8062af2..afc4b5b 100644
--- a/src/components/Switch.js
+++ b/src/components/Switch.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from 'c/Switch.module.css';
+import s0 from './Switch.module.css';
 const noop = () => {};
 
 function Switch({ checked = false, onChange = noop, name = '' }) {
diff --git a/src/components/ToggleSwitch.js b/src/components/ToggleSwitch.js
index 7d6431c..f04407d 100644
--- a/src/components/ToggleSwitch.js
+++ b/src/components/ToggleSwitch.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from 'c/ToggleSwitch.module.css';
+import s0 from './ToggleSwitch.module.css';
 
 function ToggleSwitch({ options, value, name, onChange }) {
   const idxSelected = useMemo(() => options.map(o => o.value).indexOf(value), [
diff --git a/src/components/TrafficChart.js b/src/components/TrafficChart.js
index cd9e853..f0b4b62 100644
--- a/src/components/TrafficChart.js
+++ b/src/components/TrafficChart.js
@@ -1,9 +1,13 @@
 import React, { useMemo } from 'react';
 import { fetchData } from '../api/traffic';
 import useLineChart from '../hooks/useLineChart';
-import { useStoreState } from 'm/store';
-import { getClashAPIConfig, getSelectedChartStyleIndex } from 'd/app';
-import { chartJSResource, commonDataSetProps, chartStyles } from 'm/chart';
+import { useStoreState } from '../misc/store';
+import { getClashAPIConfig, getSelectedChartStyleIndex } from '../ducks/app';
+import {
+  chartJSResource,
+  commonDataSetProps,
+  chartStyles
+} from '../misc/chart';
 
 const chartWrapperStyle = {
   // make chartjs chart responsive
diff --git a/src/components/TrafficChartSample.js b/src/components/TrafficChartSample.js
index 92c19b6..f59afe7 100644
--- a/src/components/TrafficChartSample.js
+++ b/src/components/TrafficChartSample.js
@@ -1,6 +1,10 @@
 import React, { useMemo } from 'react';
 import useLineChart from '../hooks/useLineChart';
-import { chartJSResource, commonDataSetProps, chartStyles } from 'm/chart';
+import {
+  chartJSResource,
+  commonDataSetProps,
+  chartStyles
+} from '../misc/chart';
 
 const extraChartOptions = {
   legend: {
diff --git a/src/components/TrafficNow.js b/src/components/TrafficNow.js
index f673337..73bdffe 100644
--- a/src/components/TrafficNow.js
+++ b/src/components/TrafficNow.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import prettyBytes from 'm/pretty-bytes';
+import prettyBytes from '../misc/pretty-bytes';
 
-import { useStoreState } from 'm/store';
-import { getClashAPIConfig } from 'd/app';
+import { useStoreState } from '../misc/store';
+import { getClashAPIConfig } from '../ducks/app';
 import { fetchData } from '../api/traffic';
 import * as connAPI from '../api/connections';
 
-import s0 from 'c/TrafficNow.module.css';
+import s0 from './TrafficNow.module.css';
 
 const { useState, useEffect, useCallback } = React;
 
diff --git a/src/ducks/app.js b/src/ducks/app.js
index bd0b653..2fc0ad5 100644
--- a/src/ducks/app.js
+++ b/src/ducks/app.js
@@ -1,6 +1,6 @@
-import { loadState, saveState, clearState } from 'm/storage';
-import { fetchConfigs } from 'd/configs';
-import { closeModal } from 'd/modals';
+import { loadState, saveState, clearState } from '../misc/storage';
+import { fetchConfigs } from './configs';
+import { closeModal } from './modals';
 
 const UpdateClashAPIConfig = 'app/UpdateClashAPIConfig';
 const SwitchTheme = 'app/SwitchTheme';
diff --git a/src/ducks/configs.js b/src/ducks/configs.js
index 74c77f5..dd028c0 100644
--- a/src/ducks/configs.js
+++ b/src/ducks/configs.js
@@ -1,7 +1,7 @@
-import * as configsAPI from 'a/configs';
-import * as trafficAPI from 'a/traffic';
-import { openModal } from 'd/modals';
-import { getClashAPIConfig } from 'd/app';
+import * as configsAPI from '../api/configs';
+import * as trafficAPI from '../api/traffic';
+import { openModal } from './modals';
+import { getClashAPIConfig } from './app';
 
 const CompletedFetchConfigs = 'configs/CompletedFetchConfigs';
 const OptimisticUpdateConfigs = 'configs/OptimisticUpdateConfigs';
diff --git a/src/ducks/rules.js b/src/ducks/rules.js
index b1f678c..69c080b 100644
--- a/src/ducks/rules.js
+++ b/src/ducks/rules.js
@@ -1,5 +1,5 @@
-import * as rulesAPI from 'a/rules';
-import { getClashAPIConfig } from 'd/app';
+import * as rulesAPI from '../api/rules';
+import { getClashAPIConfig } from '../ducks/app';
 import invariant from 'invariant';
 import { createSelector } from 'reselect';
 
diff --git a/src/hooks/useLineChart.js b/src/hooks/useLineChart.js
index 57fd953..40f4c52 100644
--- a/src/hooks/useLineChart.js
+++ b/src/hooks/useLineChart.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { commonChartOptions } from 'm/chart';
+import { commonChartOptions } from '../misc/chart';
 
 const { useEffect } = React;
 const options = commonChartOptions;
diff --git a/src/misc/chart.js b/src/misc/chart.js
index 0838744..67eba07 100644
--- a/src/misc/chart.js
+++ b/src/misc/chart.js
@@ -1,5 +1,5 @@
 import { unstable_createResource as createResource } from '@hsjs/react-cache';
-import prettyBytes from 'm/pretty-bytes';
+import prettyBytes from './pretty-bytes';
 
 export const chartJSResource = createResource(() => {
   return import(
diff --git a/webpack.config.js b/webpack.config.js
index 5a15a95..4859aaf 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,7 +14,6 @@ const pkg = require('./package.json');
 process.env.BABEL_ENV = process.env.NODE_ENV;
 const isDev = process.env.NODE_ENV !== 'production';
 
-const resolveDir = dir => path.resolve(__dirname, dir);
 const HTMLPlugin = require('html-webpack-plugin');
 const html = new HTMLPlugin({
   title: 'yacd - Yet Another Clash Dashboard',
@@ -91,23 +90,12 @@ module.exports = {
     publicPath: ''
   },
   mode: isDev ? 'development' : 'production',
-  resolve: {
-    alias: {
-      // 'react-dom': '@hot-loader/react-dom',
-      a: resolveDir('src/api'),
-      s: resolveDir('src/svg'),
-      m: resolveDir('src/misc'),
-      d: resolveDir('src/ducks'),
-      c: resolveDir('src/components')
-    }
-  },
   module: {
     rules: [
       {
         test: /\.svg$/,
         use: ['svg-sprite-loader']
       },
-      // js loader
       {
         test: /\.js$/,
         exclude: /node_modules/,
@@ -118,7 +106,6 @@ module.exports = {
           }
         }
       },
-      // file loader
       {
         test: /\.(ttf|eot|woff|woff2)(\?.+)?$/,
         use: [