diff --git a/package.json b/package.json
index bd80df2..841a43b 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
     "@types/auth0-lock": "^10.16.0",
     "@types/history": "^4.6.0",
     "@types/jest": "^19.2.4",
-    "@types/material-ui": "^0.17.11",
     "@types/prop-types": "^15.5.1",
     "@types/react": "^15.0.32",
     "@types/react-addons-test-utils": "^0.14.19",
@@ -34,6 +33,7 @@
     "@types/react-router-redux": "^5.0.3",
     "@types/react-tap-event-plugin": "^0.0.30",
     "@types/redux": "^3.6.0",
+    "@types/socket.io-client":"^1.4.29",
     "awesome-typescript-loader": "^3.1.3",
     "check-dependencies": "^1.0.1",
     "copy-webpack-plugin": "^4.0.1",
@@ -67,7 +67,6 @@
     "auth0-lock": "^10.18.0",
     "history": "^4.6.3",
     "immutable": "^3.8.1",
-    "material-ui": "^0.18.3",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
@@ -79,7 +78,9 @@
     "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.7.1",
     "redux-saga": "^0.15.4",
-    "reselect": "^3.0.1"
+    "reselect": "^3.0.1",
+    "semantic-ui-react": "^0.70.0",
+    "socket.io-client": "^2.0.3"
   },
   "jest": {
     "moduleFileExtensions": [
diff --git a/src/ts/@overflow/app/redux/reducer/index.ts b/src/ts/@overflow/app/redux/reducer/index.ts
index 5a8afdc..8b15df8 100644
--- a/src/ts/@overflow/app/redux/reducer/index.ts
+++ b/src/ts/@overflow/app/redux/reducer/index.ts
@@ -5,6 +5,9 @@ import { reducer as signinReducer} from '@overflow/member/redux/reducer/signin';
 import { reducer as signoutReducer} from '@overflow/member/redux/reducer/signout';
 import { reducer as signupReducer} from '@overflow/member/redux/reducer/signup';
 
+import { ConnectedRouter } from 'react-router-redux';
+
+
 const reducer = combineReducers<State>({
   signinReducer,
   signoutReducer,
diff --git a/src/ts/@overflow/commons/api/Client.ts b/src/ts/@overflow/commons/api/Client.ts
index 1d70be4..106c8dd 100644
--- a/src/ts/@overflow/commons/api/Client.ts
+++ b/src/ts/@overflow/commons/api/Client.ts
@@ -1,3 +1,5 @@
+import * as io from 'socket.io-client';
+
 export type OnConnectFunc = () => void;
 export type OnWebsocketDisconnectFunc = () => void;
 export type OnWebsocketNativeMessageFunc = (websocketMessage: string) => void;
@@ -10,6 +12,8 @@ enum MessageType {
   JSON,
 }
 
+
+
 class Client {
   private conn: WebSocket;
   private isReady: boolean;
diff --git a/tsconfig.json b/tsconfig.json
index 1264df0..1dac4cf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,11 @@
     "pretty": true,
     "removeComments": true,
     "sourceMap": true,
-    "target": "es5"
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types",
+      "types"
+    ]
   },
   "include": [
     "src/ts/**/*"
diff --git a/types/react-router-redux/index.d.ts b/types/react-router-redux/index.d.ts
new file mode 100644
index 0000000..9a1d779
--- /dev/null
+++ b/types/react-router-redux/index.d.ts
@@ -0,0 +1,77 @@
+// Type definitions for react-router-redux 5.0
+// Project: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux
+// Definitions by: Huy Nguyen <https://github.com/huy-nguyen>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+import {
+    Store,
+    Dispatch,
+    Action,
+    Middleware
+} from 'redux';
+import {
+    History,
+    Location,
+    Path,
+    LocationState,
+    LocationDescriptor
+} from 'history';
+import * as React from 'react';
+
+export interface ConnectedRouterProps<State> {
+    store?: Store<State>;
+    history?: History;
+}
+export class ConnectedRouter<State> extends React.Component<ConnectedRouterProps<State>> {}
+
+export const LOCATION_CHANGE: string;
+
+export interface RouterState {
+    location: Location | null;
+}
+
+export function routerReducer(state?: RouterState, action?: RouterAction): RouterState;
+
+export const CALL_HISTORY_METHOD: string;
+
+export function push(location: LocationDescriptor, state?: LocationState): RouterAction;
+export function replace(location: LocationDescriptor, state?: LocationState): RouterAction;
+export function go(n: number): RouterAction;
+export function goBack(): RouterAction;
+export function goForward(): RouterAction;
+
+export const routerActions: {
+    push: typeof push
+    replace: typeof replace
+    go: typeof go
+    goBack: typeof goBack
+    goForward: typeof goForward
+};
+
+export interface LocationActionPayload {
+    method: string;
+    args?: any[];
+}
+
+export interface RouterAction extends Action {
+    type: typeof CALL_HISTORY_METHOD;
+    payload: LocationActionPayload;
+}
+
+export interface LocationChangeAction extends Action {
+    type: typeof LOCATION_CHANGE;
+    payload: Location & {
+        props?: {
+            match: {
+                path: string;
+                url: string;
+                params: any;
+                isExact: boolean;
+            },
+            location: Location;
+            history: History;
+        }
+    };
+}
+
+export function routerMiddleware(history: History): Middleware;
\ No newline at end of file