diff --git a/package-lock.json b/package-lock.json
index 2fb4663..6bfe13c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -841,6 +841,18 @@
       "integrity": "sha512-KU/VDjC5RwtDUZiz3d+DHXJF2lp5hB9dn552TXIyptj8SH1vXmR40mG0JgGq03IlYsOgGfcv8xrLpSQ0YUMQdA==",
       "dev": true
     },
+    "@types/history": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.0.tgz",
+      "integrity": "sha512-1A/RUAX4VtmGzNTGLSfmiPxQ3XwUSe/1YN4lW9GRa+j307oFK6MPjhlvw6jEHDodUBIvSvrA7/iHDchr5LS+0Q==",
+      "dev": true
+    },
+    "@types/i18next": {
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@types/i18next/-/i18next-8.4.5.tgz",
+      "integrity": "sha512-FUvAb4r6X2GWXc7j+jIIXcRcxCqSzMkWkkflcdl9Vhb1C9MrJqIqm8thtzqONEqGtWqoMMSv3piboImgIRwmVw==",
+      "dev": true
+    },
     "@types/node": {
       "version": "10.9.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.9.4.tgz",
@@ -876,6 +888,37 @@
         "@types/react": "*"
       }
     },
+    "@types/react-i18next": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/@types/react-i18next/-/react-i18next-7.8.2.tgz",
+      "integrity": "sha512-axbJJ7N3I7RsZSmQiM2tbLWTYCtfIszSr+KW0CJYMd6G8yiQEMG62NSBOk2xIuyZbncSwM67LO5maLN1WvOLnw==",
+      "dev": true,
+      "requires": {
+        "@types/i18next": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router": {
+      "version": "4.0.30",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.0.30.tgz",
+      "integrity": "sha512-zWt5RpWy7x7semeBIHqLZ31A1Tle0jb3R/KD2wguZqO43DjP4n8kYsH7UIpve6I4hzlSObnoIieDcp5qfyKwaQ==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-4.3.0.tgz",
+      "integrity": "sha512-vaq+nVUGyMnIhAl+svKHmfqhCoCNe5lf1UWmvVcsBlAcX0kznF25711DNFQ7B8/QZ+ZF1zzGq1dIi9bzxIu85w==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.5.13",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.5.13.tgz",
@@ -1327,9 +1370,9 @@
       "dev": true
     },
     "array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.1.tgz",
+      "integrity": "sha1-Qmu52oQJDBg42BLIFQryCoMx4pY=",
       "dev": true
     },
     "array-union": {
@@ -1359,12 +1402,6 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
-    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -1493,9 +1530,9 @@
       }
     },
     "awesome-typescript-loader": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-5.2.0.tgz",
-      "integrity": "sha512-3v5MEUgRz1n90u61UGYbhFxiFq1tK/HBdoY/ScBX1srOiZVo4iF9b6hyP2ZsRp1ewHKYwlEo0OaHUXJVQHv6dw==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz",
+      "integrity": "sha512-slv66OAJB8orL+UUaTI3pKlLorwIvS4ARZzYR9iJJyGsEgOqueMfOMdKySWzZ73vIkEe3fcwFgsKMg4d8zyb1g==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.1",
@@ -1565,9 +1602,9 @@
       }
     },
     "babel-loader": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.0.tgz",
-      "integrity": "sha512-lBUGBz411lSfT+8MHPEaqIVQ44odS1D/wxuTMhijqHc9arZR6jhJEaJa0RpZlCSITZoeK6xoDXTaVTrSoFD7IQ==",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.2.tgz",
+      "integrity": "sha512-Law0PGtRV1JL8Y9Wpzc0d6EE0GD7LzXWCfaeWwboUMcBWNG6gvaWTK1/+BK7a4X5EmeJiGEuDDFxUsOa8RSWCw==",
       "dev": true,
       "requires": {
         "find-cache-dir": "^1.0.0",
@@ -1835,14 +1872,6 @@
         "dns-txt": "^2.0.2",
         "multicast-dns": "^6.0.1",
         "multicast-dns-service-types": "^1.1.0"
-      },
-      "dependencies": {
-        "array-flatten": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.1.tgz",
-          "integrity": "sha1-Qmu52oQJDBg42BLIFQryCoMx4pY=",
-          "dev": true
-        }
       }
     },
     "boolbase": {
@@ -2631,12 +2660,6 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
-    "core-js": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
-      "dev": true
-    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -3321,9 +3344,9 @@
       "dev": true
     },
     "detect-node": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.3.tgz",
-      "integrity": "sha1-ogM8CcyOFY03dI+951B4Mr1s4Sc=",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
+      "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
       "dev": true
     },
     "diff": {
@@ -3604,15 +3627,6 @@
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
       "dev": true
     },
-    "encoding": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "dev": true,
-      "requires": {
-        "iconv-lite": "~0.4.13"
-      }
-    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -3979,6 +3993,12 @@
         "vary": "~1.1.2"
       },
       "dependencies": {
+        "array-flatten": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
+          "dev": true
+        },
         "safe-buffer": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
@@ -4184,21 +4204,6 @@
         "websocket-driver": ">=0.5.1"
       }
     },
-    "fbjs": {
-      "version": "0.8.17",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
-      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-      "dev": true,
-      "requires": {
-        "core-js": "^1.0.0",
-        "isomorphic-fetch": "^2.1.1",
-        "loose-envify": "^1.0.0",
-        "object-assign": "^4.1.0",
-        "promise": "^7.1.1",
-        "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.18"
-      }
-    },
     "fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -5737,6 +5742,30 @@
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
       "dev": true
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "dev": true,
+      "requires": {
+        "invariant": "^2.2.1",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "value-equal": "^0.4.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -5799,6 +5828,15 @@
         "uglify-js": "3.4.x"
       }
     },
+    "html-parse-stringify2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
+      "integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
+      "dev": true,
+      "requires": {
+        "void-elements": "^2.0.1"
+      }
+    },
     "html-tags": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
@@ -5945,6 +5983,18 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "i18next": {
+      "version": "11.7.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-11.7.0.tgz",
+      "integrity": "sha512-k4nu76PQMUnN4W8OGFQHK3/FWwG8k/GwXdemzMmYUVLPnpBdF6VfWbpMOpTT3DOFmFw7D6Ndj46EH1EbNNtMjw==",
+      "dev": true
+    },
+    "i18next-browser-languagedetector": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-2.2.3.tgz",
+      "integrity": "sha512-sJZ2n9Vgax0vGer23hJMwyO3FRO7P0dq2DXZPXWE329g3snfJUcw+S24Mp3lqJaxL/0McDu4BD75ds6pzIfhhw==",
+      "dev": true
+    },
     "iconv-lite": {
       "version": "0.4.19",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
@@ -6804,16 +6854,6 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
-    "isomorphic-fetch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "dev": true,
-      "requires": {
-        "node-fetch": "^1.0.1",
-        "whatwg-fetch": ">=0.10.0"
-      }
-    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -6935,9 +6975,9 @@
       }
     },
     "killable": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.0.tgz",
-      "integrity": "sha1-2ouEvUfeU5WHj5XWTQLyRJ/gXms=",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
+      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
       "dev": true
     },
     "kind-of": {
@@ -7312,6 +7352,15 @@
       "integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==",
       "dev": true
     },
+    "map-age-cleaner": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz",
+      "integrity": "sha512-UN1dNocxQq44IhJyMI4TU8phc2m9BddacHRPRjKGLYaF0jqd3xLz0jS0skpAU9WgYyoR4gHtUpzytNBS385FWQ==",
+      "dev": true,
+      "requires": {
+        "p-defer": "^1.0.0"
+      }
+    },
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@@ -7803,16 +7852,6 @@
         "lower-case": "^1.1.1"
       }
     },
-    "node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "dev": true,
-      "requires": {
-        "encoding": "^0.1.11",
-        "is-stream": "^1.0.1"
-      }
-    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -8328,6 +8367,12 @@
       "integrity": "sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw==",
       "dev": true
     },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
+      "dev": true
+    },
     "p-event": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/p-event/-/p-event-1.3.0.tgz",
@@ -8343,6 +8388,12 @@
       "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
       "dev": true
     },
+    "p-is-promise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
+      "dev": true
+    },
     "p-limit": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
@@ -9318,15 +9369,6 @@
       "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
       "dev": true
     },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -9556,15 +9598,15 @@
       }
     },
     "react": {
-      "version": "16.4.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.4.2.tgz",
-      "integrity": "sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg==",
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.5.0.tgz",
+      "integrity": "sha512-nw/yB/L51kA9PsAy17T1JrzzGRk+BlFCJwFF7p+pwVxgqwPjYNeZEkkH7LXn9dmflolrYMXLWMTkQ77suKPTNQ==",
       "dev": true,
       "requires": {
-        "fbjs": "^0.8.16",
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.6.2",
+        "schedule": "^0.3.0"
       }
     },
     "react-addons-test-utils": {
@@ -9574,21 +9616,21 @@
       "dev": true
     },
     "react-dom": {
-      "version": "16.4.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.4.2.tgz",
-      "integrity": "sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw==",
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.0.tgz",
+      "integrity": "sha512-qgsQdjFH54pQ1AGLCBKsqjPxib4Pnp+cOsNxGPlkHn5YnsSt43sBvHSif6FheY7NMMS6HPeSJOxXf6ECanjacA==",
       "dev": true,
       "requires": {
-        "fbjs": "^0.8.16",
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.6.2",
+        "schedule": "^0.3.0"
       }
     },
     "react-hot-loader": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.3.5.tgz",
-      "integrity": "sha512-6kKabumYl0rYaG9ynZMb7Wq+aR8BO9cctveYuDZJIjwXrfsABrkRGvN3QiQfUL42dh8GllkxhRFXOty+vr4aSA==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.3.6.tgz",
+      "integrity": "sha512-iuBeBkLz7tdkKmKduNww9o5JY4ZH1XI0TWwkWToHIqfOSh1xMCqLMSYXUasWfgZWykWWa9IkueYab+cDq2jyWg==",
       "dev": true,
       "requires": {
         "fast-levenshtein": "^2.0.6",
@@ -9599,12 +9641,69 @@
         "shallowequal": "^1.0.2"
       }
     },
+    "react-i18next": {
+      "version": "7.11.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-7.11.1.tgz",
+      "integrity": "sha512-L7LZQGjDNwVvM2FRxs1C26AQKot9nD0U1V9VNrg/EobsqsOOv1WiuLURcZekbl1w5nD8Cqc9HJ++EP3Lkj2GTA==",
+      "dev": true,
+      "requires": {
+        "hoist-non-react-statics": "^2.3.1",
+        "html-parse-stringify2": "2.0.1",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
       "dev": true
     },
+    "react-router": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+      "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+      "dev": true,
+      "requires": {
+        "history": "^4.7.2",
+        "hoist-non-react-statics": "^2.5.0",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.1",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "dev": true,
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "dev": true,
+      "requires": {
+        "history": "^4.7.2",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.1",
+        "react-router": "^4.3.1",
+        "warning": "^4.0.1"
+      }
+    },
     "read-all-stream": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
@@ -9979,6 +10078,12 @@
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==",
+      "dev": true
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -10111,6 +10216,15 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
+    "schedule": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/schedule/-/schedule-0.3.0.tgz",
+      "integrity": "sha512-20+1KVo517sR7Nt+bYBN8a+bEJDKLPEx7Ohtts1kX05E4/HY53YUNuhfkVNItmWAnBYHcpG9vsd2/CJxG+aPCQ==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -11922,9 +12036,9 @@
       }
     },
     "tslint-config-standard": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/tslint-config-standard/-/tslint-config-standard-8.0.0.tgz",
-      "integrity": "sha512-VL5JHr6voPDDKwknjDfAo+ed85g3R/G6yWlAgabYI9RrliJeE28JgdH8J0g/4TAkEdIgwyyAZsZAKRlrPcGLGA==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/tslint-config-standard/-/tslint-config-standard-8.0.1.tgz",
+      "integrity": "sha512-OWG+NblgjQlVuUS/Dmq3ax2v5QDZwRx4L0kEuDi7qFY9UI6RJhhNfoCV1qI4el8Fw1c5a5BTrjQJP0/jhGXY/Q==",
       "dev": true,
       "requires": {
         "tslint-eslint-rules": "^5.3.1"
@@ -12008,12 +12122,6 @@
       "integrity": "sha512-kk80vLW9iGtjMnIv11qyxLqZm20UklzuR2tL0QAnDIygIUIemcZMxlMWudl9OOt76H3ntVzcTiddQ1/pAAJMYg==",
       "dev": true
     },
-    "ua-parser-js": {
-      "version": "0.7.18",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
-      "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==",
-      "dev": true
-    },
     "uglify-js": {
       "version": "3.4.8",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.8.tgz",
@@ -12475,6 +12583,12 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==",
+      "dev": true
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -12594,6 +12708,12 @@
         "indexof": "0.0.1"
       }
     },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
+      "dev": true
+    },
     "ware": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ware/-/ware-1.3.0.tgz",
@@ -12603,6 +12723,15 @@
         "wrap-fn": "^0.1.0"
       }
     },
+    "warning": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+      "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
@@ -12624,9 +12753,9 @@
       }
     },
     "webpack": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.17.1.tgz",
-      "integrity": "sha512-vdPYogljzWPhFKDj3Gcp01Vqgu7K3IQlybc3XIdKSQHelK1C3eIQuysEUR7MxKJmdandZlQB/9BG2Jb1leJHaw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.17.2.tgz",
+      "integrity": "sha512-hCK8FPco2Paz9FVMlo3ZdVd7Jsr7qxoiEwhd7f4dMaWBLZtc7E+/9QNee4CYHlVSvpmspWBnhFpx4MiWSl3nNg==",
       "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.5.13",
@@ -12653,7 +12782,7 @@
         "tapable": "^1.0.0",
         "uglifyjs-webpack-plugin": "^1.2.4",
         "watchpack": "^1.5.0",
-        "webpack-sources": "^1.0.1"
+        "webpack-sources": "^1.2.0"
       },
       "dependencies": {
         "schema-utils": {
@@ -12882,9 +13011,9 @@
       }
     },
     "webpack-dev-server": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.7.tgz",
-      "integrity": "sha512-KagFrNHf3QKndS61cXqzkQ4gpdXo0d1LZTTplAJzNK1Ev2ZyJiu+BzerW/2dixYYfpnGzp0AcvCXpmYXIOkFOA==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.8.tgz",
+      "integrity": "sha512-c+tcJtDqnPdxCAzEEZKdIPmg3i5i7cAHe+B+0xFNK0BlCc2HF/unYccbU7xTgfGc5xxhCztCQzFmsqim+KhI+A==",
       "dev": true,
       "requires": {
         "ansi-html": "0.0.7",
@@ -12897,7 +13026,7 @@
         "express": "^4.16.2",
         "html-entities": "^1.2.0",
         "http-proxy-middleware": "~0.18.0",
-        "import-local": "^1.0.0",
+        "import-local": "^2.0.0",
         "internal-ip": "^3.0.1",
         "ip": "^1.1.5",
         "killable": "^1.0.0",
@@ -12914,7 +13043,7 @@
         "supports-color": "^5.1.0",
         "webpack-dev-middleware": "3.2.0",
         "webpack-log": "^2.0.0",
-        "yargs": "12.0.1"
+        "yargs": "12.0.2"
       },
       "dependencies": {
         "ansi-regex": {
@@ -12951,6 +13080,19 @@
             }
           }
         },
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
         "debug": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@@ -12983,6 +13125,21 @@
             "rimraf": "^2.2.8"
           }
         },
+        "execa": {
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
+          "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^6.0.0",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -12992,12 +13149,37 @@
             "locate-path": "^3.0.0"
           }
         },
+        "import-local": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
+          "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
+          "dev": true,
+          "requires": {
+            "pkg-dir": "^3.0.0",
+            "resolve-cwd": "^2.0.0"
+          }
+        },
+        "invert-kv": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
+          "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
+          "dev": true
+        },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
           "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
           "dev": true
         },
+        "lcid": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
+          "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
+          "dev": true,
+          "requires": {
+            "invert-kv": "^2.0.0"
+          }
+        },
         "locate-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -13008,15 +13190,26 @@
             "path-exists": "^3.0.0"
           }
         },
-        "os-locale": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
-          "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
+        "mem": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/mem/-/mem-4.0.0.tgz",
+          "integrity": "sha512-WQxG/5xYc3tMbYLXoXPm81ET2WDULiU5FxbuIoNbJqLOOI8zehXFdZuiUEgfdrU2mVB1pxBZUGlYORSrpuJreA==",
           "dev": true,
           "requires": {
-            "execa": "^0.7.0",
-            "lcid": "^1.0.0",
-            "mem": "^1.1.0"
+            "map-age-cleaner": "^0.1.1",
+            "mimic-fn": "^1.0.0",
+            "p-is-promise": "^1.1.0"
+          }
+        },
+        "os-locale": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.0.1.tgz",
+          "integrity": "sha512-7g5e7dmXPtzcP4bgsZ8ixDVqA7oWYuEz4lOSujeWyliPai4gfVDiFIcwBg3aGCPnmSGfzOKTK3ccPn0CKv3DBw==",
+          "dev": true,
+          "requires": {
+            "execa": "^0.10.0",
+            "lcid": "^2.0.0",
+            "mem": "^4.0.0"
           }
         },
         "p-limit": {
@@ -13043,6 +13236,15 @@
           "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
           "dev": true
         },
+        "pkg-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+          "dev": true,
+          "requires": {
+            "find-up": "^3.0.0"
+          }
+        },
         "string-width": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -13081,16 +13283,16 @@
           "dev": true
         },
         "yargs": {
-          "version": "12.0.1",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.1.tgz",
-          "integrity": "sha512-B0vRAp1hRX4jgIOWFtjfNjd9OA9RWYZ6tqGA9/I/IrTMsxmKvtWy+ersM+jzpQqbC3YfLzeABPdeTgcJ9eu1qQ==",
+          "version": "12.0.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.2.tgz",
+          "integrity": "sha512-e7SkEx6N6SIZ5c5H22RTZae61qtn3PYUE8JYbBFlK9sYmh3DMQ6E5ygtaG/2BW0JZi4WGgTR2IV5ChqlqrDGVQ==",
           "dev": true,
           "requires": {
             "cliui": "^4.0.0",
             "decamelize": "^2.0.0",
             "find-up": "^3.0.0",
             "get-caller-file": "^1.0.1",
-            "os-locale": "^2.0.0",
+            "os-locale": "^3.0.0",
             "require-directory": "^2.1.1",
             "require-main-filename": "^1.0.1",
             "set-blocking": "^2.0.0",
@@ -13166,12 +13368,6 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
-    "whatwg-fetch": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
-      "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==",
-      "dev": true
-    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index 9d98652..0bf9406 100644
--- a/package.json
+++ b/package.json
@@ -33,30 +33,36 @@
         "@types/node": "^10.9.4",
         "@types/react": "^16.4.13",
         "@types/react-dom": "^16.0.7",
-        "awesome-typescript-loader": "^5.2.0",
-        "babel-loader": "^8.0.0",
+        "@types/react-i18next": "^7.8.2",
+        "@types/react-router-dom": "^4.3.0",
+        "awesome-typescript-loader": "^5.2.1",
+        "babel-loader": "^8.0.2",
         "css-loader": "^1.0.0",
         "file-loader": "^2.0.0",
         "html-webpack-plugin": "^3.2.0",
+        "i18next": "^11.7.0",
+        "i18next-browser-languagedetector": "^2.2.3",
         "image-webpack-loader": "^4.3.1",
         "node-sass": "^4.9.3",
-        "react": "^16.4.2",
+        "react": "^16.5.0",
         "react-addons-test-utils": "^15.6.2",
-        "react-dom": "^16.4.2",
-        "react-hot-loader": "^4.3.4",
+        "react-dom": "^16.5.0",
+        "react-hot-loader": "^4.3.6",
+        "react-i18next": "^7.11.1",
+        "react-router-dom": "^4.3.1",
         "sass-loader": "^7.1.0",
         "style-loader": "^0.23.0",
         "stylelint": "^9.5.0",
         "stylelint-config-standard": "^18.2.0",
         "stylelint-webpack-plugin": "^0.10.5",
         "tslint": "^5.11.0",
-        "tslint-config-standard": "^8.0.0",
+        "tslint-config-standard": "^8.0.1",
         "typescript": "^3.0.3",
         "uglifyjs-webpack-plugin": "^1.3.0",
-        "webpack": "^4.17.1",
+        "webpack": "^4.17.2",
         "webpack-cli": "^3.1.0",
         "webpack-dev-middleware": "^3.1.3",
-        "webpack-dev-server": "^3.1.5",
+        "webpack-dev-server": "^3.1.8",
         "webpack-merge": "^4.1.4"
     },
     "dependencies": {}
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..439a7a3
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/scss/App.scss b/src/assets/scss/App.scss
deleted file mode 100644
index 30e42e1..0000000
--- a/src/assets/scss/App.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$bg-color: yellow;
-$border-color: red;
-
-.app {
-    font-family: helvetica, arial, sans-serif;
-    padding: 2em;
-    border: 5px solid $border-color;
-
-    p {
-        background-color: $bg-color;
-    }
-}
diff --git a/src/components/App.tsx b/src/components/App.tsx
deleted file mode 100644
index 57d0442..0000000
--- a/src/components/App.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import './../assets/scss/App.scss'
-
-export interface AppProps {
-}
-
-export default class App extends React.Component<AppProps, {}> {
-    render () {
-        return (
-            <div className='app'>
-                <h1>Hello World!</h1>
-                <p>Foo to the barz</p>
-            </div>
-        )
-    }
-}
diff --git a/src/containers/Sidebar/index.tsx b/src/containers/Sidebar/index.tsx
new file mode 100644
index 0000000..6fddc80
--- /dev/null
+++ b/src/containers/Sidebar/index.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { NavLink } from 'react-router-dom'
+import { translate } from 'react-i18next'
+import { I18nProps } from '@i18n'
+
+import './style.scss'
+const logo = require('@assets/logo.png')
+
+interface SidebarProps extends I18nProps {
+    routes: {
+        path: string
+        name: string
+        exact?: boolean
+    }[]
+}
+
+class Sidebar extends React.Component<SidebarProps, {}> {
+    render () {
+        const { routes, t } = this.props
+        return (
+            <div className='slidebar'>
+                <img src={logo} className='slidebar-logo' />
+                <ul className='slidebar-menu'>
+                    {
+                        routes.map(
+                            ({ path, name, exact }) => (
+                                <li className='item'>
+                                    <NavLink to={path} activeClassName='active' exact={!!exact}>{ t(name) }</NavLink>
+                                </li>
+                            )
+                        )
+                    }
+                </ul>
+            </div>
+        )
+    }
+}
+
+export default translate(['slidebar'])(Sidebar)
diff --git a/src/containers/Sidebar/style.scss b/src/containers/Sidebar/style.scss
new file mode 100644
index 0000000..274ee6c
--- /dev/null
+++ b/src/containers/Sidebar/style.scss
@@ -0,0 +1,49 @@
+$color: #d8dee2;
+$active-color: #57befc;
+$active-color-right: #2c8af8;
+
+.slidebar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 120px;
+}
+
+.slidebar-logo {
+    margin-top: 50px;
+    width: 35px;
+    height: 35px;
+}
+
+.slidebar-menu {
+    display: flex;
+    flex-direction: column;
+    margin-top: 12px;
+
+    .item {
+        display: block;
+        margin-top: 18px;
+
+        > a {
+            display: block;
+            width: 100px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            border-radius: 15px;
+            text-align: center;
+        }
+
+        > a,
+        a:active,
+        a:visited {
+            color: $color;
+            text-decoration: none;
+        }
+
+        > a.active {
+            background: linear-gradient(to right, $active-color, $active-color-right);
+            color: #fff;
+        }
+    }
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..2c896df
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,37 @@
+import * as i18n from 'i18next'
+import * as LanguageDetector from 'i18next-browser-languagedetector'
+
+const options = {
+    fallbackLng: 'en',
+
+    ns: ['slidebar'],
+    resources: {
+        en: {
+            slidebar: {
+                Proxies: 'Proxies',
+                Overview: 'Overview',
+                Logs: 'Logs',
+                Rules: 'Rules',
+                Setting: 'Setting'
+            }
+        },
+        cn: {
+            slidebar: {
+                Proxies: '代理',
+                Overview: '总览',
+                Logs: '日志',
+                Rules: '规则',
+                Setting: '设置'
+            }
+        }
+    },
+    react: {
+        wait: true
+    }
+}
+
+export interface I18nProps {
+    t? (key: string): string
+}
+
+export default i18n.use(LanguageDetector).init(options)
diff --git a/src/render.tsx b/src/render.tsx
index 9390999..613f58a 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react'
 import { render } from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
+import { I18nextProvider } from 'react-i18next'
 import { AppContainer } from 'react-hot-loader'
-import App from '@components/App'
+import App from '@views/App'
+import i18n from '@i18n'
 
 const rootEl = document.getElementById('root')
 
@@ -11,17 +14,25 @@ declare let module: { hot: any }
 export default function renderApp () {
     render(
         <AppContainer>
-            <App />
+            <BrowserRouter>
+                <I18nextProvider i18n={ i18n }>
+                    <App />
+                </I18nextProvider>
+            </BrowserRouter>
         </AppContainer>,
         rootEl
     )
 
     if (module.hot) {
-        module.hot.accept('./components/App', () => {
-            const NewApp = require('./components/App').default
+        module.hot.accept('./views/App', () => {
+            const NewApp = require('./views/App').default
             render(
                 <AppContainer>
-                    <NewApp />
+                    <BrowserRouter>
+                        <I18nextProvider i18n={ i18n }>
+                            <NewApp />
+                        </I18nextProvider>
+                    </BrowserRouter>
                 </AppContainer>,
                 rootEl
             )
diff --git a/src/views/App.scss b/src/views/App.scss
new file mode 100644
index 0000000..9f45f9d
--- /dev/null
+++ b/src/views/App.scss
@@ -0,0 +1,22 @@
+html {
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.app {
+    display: flex;
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
diff --git a/src/views/App.tsx b/src/views/App.tsx
new file mode 100644
index 0000000..b389680
--- /dev/null
+++ b/src/views/App.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Route } from 'react-router-dom'
+import { I18nProps } from '@i18n'
+import './App.scss'
+
+import Overview from '@views/Overview'
+import Proxies from '@views/Proxies'
+import Logs from '@views/Logs'
+import Rules from '@views/Rules'
+import Settings from '@views/Settings'
+
+import SlideBar from '@containers/Sidebar'
+
+export interface AppProps extends I18nProps {
+}
+
+export default class App extends React.Component<AppProps, {}> {
+    render () {
+        const routes = [
+            { path: '/', name: 'Overview', component: Overview, exact: true },
+            { path: '/proxies', name: 'Proxies', component: Proxies },
+            { path: '/logs', name: 'Logs', component: Logs },
+            { path: '/rules', name: 'Rules', component: Rules },
+            { path: '/settings', name: 'Settings', component: Settings }
+        ]
+
+        return (
+            <div className='app'>
+                <SlideBar routes={routes} />
+                <div>
+                    {
+                        routes.map(
+                            route => <Route exact={!!route.exact} path={route.path} component={route.component}/>
+                        )
+                    }
+                </div>
+            </div>
+        )
+    }
+}
diff --git a/src/views/Logs/index.tsx b/src/views/Logs/index.tsx
new file mode 100644
index 0000000..e8fcabe
--- /dev/null
+++ b/src/views/Logs/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export default class Logs extends React.Component<{}, {}> {
+    render () {
+        return 'Logs'
+    }
+}
diff --git a/src/views/Overview/index.tsx b/src/views/Overview/index.tsx
new file mode 100644
index 0000000..255f133
--- /dev/null
+++ b/src/views/Overview/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export default class Overview extends React.Component<{}, {}> {
+    render () {
+        return 'Overview'
+    }
+}
diff --git a/src/views/Proxies/index.tsx b/src/views/Proxies/index.tsx
new file mode 100644
index 0000000..ce68cce
--- /dev/null
+++ b/src/views/Proxies/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export default class Proxies extends React.Component<{}, {}> {
+    render () {
+        return 'Proxies'
+    }
+}
diff --git a/src/views/Rules/index.tsx b/src/views/Rules/index.tsx
new file mode 100644
index 0000000..9fdc53c
--- /dev/null
+++ b/src/views/Rules/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export default class Rules extends React.Component<{}, {}> {
+    render () {
+        return 'Rules'
+    }
+}
diff --git a/src/views/Settings/index.tsx b/src/views/Settings/index.tsx
new file mode 100644
index 0000000..66db212
--- /dev/null
+++ b/src/views/Settings/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export default class Settings extends React.Component<{}, {}> {
+    render () {
+        return 'Settings'
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
index d376a4c..fa76458 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,14 +11,18 @@
         "experimentalDecorators": true,
         "baseUrl": ".",
         "paths": {
-            "@lib": ["src/libs"],
+            "@assets": ["src/assets"],
+            "@assets/*": ["src/assets/*"],
+            "@lib": ["src/lib"],
             "@lib/*": ["src/lib/*"],
             "@components": ["src/components"],
             "@components/*": ["src/components/*"],
             "@containers": ["src/containers"],
             "@containers/*": ["src/containers/*"],
-            "@models": ["src/models"],
-            "@models/*": ["src/models/*"],
+            "@views": ["src/views"],
+            "@views/*": ["src/views/*"],
+            "@i18n": ["src/i18n"],
+            "@i18n/*": ["src/i18n/*"],
             "@stores": ["src/stores"],
             "@stores/*": ["src/stores/*"]
         }