diff --git a/.prettierrc.json b/.prettierrc.json
index fa51da2..ef58ff9 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,6 +1,6 @@
 {
   "trailingComma": "es5",
-  "tabWidth": 2,
+  "tabWidth": 4,
   "semi": false,
   "singleQuote": true
 }
diff --git a/package.json b/package.json
index 9d37452..d6a4d10 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
     "craco-less": "^1.17.1",
     "prettier": "^2.3.1",
     "react-scripts": "4.0.3",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 93193e2..a0eba27 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,11 +1,10 @@
 import React from 'react'
+import RouterView from '../routes'
 import './App.css'
 
 const App = () => {
   return (
-    <div className="App">
-      <h1>CUBETIQ</h1>
-    </div>
+    <RouterView />
   )
 }
 
diff --git a/src/config/index.ts b/src/config/index.ts
new file mode 100644
index 0000000..1a617d9
--- /dev/null
+++ b/src/config/index.ts
@@ -0,0 +1,3 @@
+export const AppConfig = {
+    APP_NAME: process.env.REACT_APP_NAME
+}
\ No newline at end of file
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 7f94bc5..d655576 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,7 +1,26 @@
 import React from 'react'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import { routes } from './routes'
 
 const RouterView = () => {
-  return <>Router</>
+    return (
+        <Router>
+            <Switch>
+                {routes.map((route) => {
+                    return (
+                        <Route
+                            key={route.key}
+                            exact={route.exact}
+                            component={route.component}
+                            children={route.children}
+                            location={route.location}
+                            path={route.path}
+                        />
+                    )
+                })}
+            </Switch>
+        </Router>
+    )
 }
 
 export default RouterView
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
deleted file mode 100644
index b06767f..0000000
--- a/src/routes/routes.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const routes: Array<any> = []
diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx
new file mode 100644
index 0000000..f48616d
--- /dev/null
+++ b/src/routes/routes.tsx
@@ -0,0 +1,49 @@
+import { RouteProps } from 'react-router-dom'
+import About from '../pages/About'
+import Home from '../pages/Home'
+import RouteTypes from './types'
+
+interface Authority {
+    authority?: string | undefined
+    strict?: boolean | undefined
+    with?: Authority | undefined
+}
+
+interface AuthorityProps {
+    authorities?: Authority | string[] | string | undefined
+    strictAuthority?: boolean | undefined
+}
+
+interface CustomRouteProps extends RouteProps, AuthorityProps {
+    key: string
+}
+
+export interface MenuProps {
+    icon: any
+    label?: string | undefined
+}
+
+export interface SideMenuRouteProps extends CustomRouteProps, MenuProps {}
+
+export interface SideSubMenuProps extends MenuProps {
+    key?: string | undefined
+    subMenus: SideSubMenuProps[]
+}
+
+const routes: CustomRouteProps[] = [
+    {
+        key: 'home',
+        exact: true,
+        path: RouteTypes.HOME,
+        component: () => <Home />,
+    },
+    {
+        key: 'about',
+        path: RouteTypes.ABOUT,
+        component: () => <About />,
+    },
+]
+
+const menus: (SideMenuRouteProps | SideSubMenuProps)[] = []
+
+export { routes, menus }
diff --git a/src/routes/types.ts b/src/routes/types.ts
new file mode 100644
index 0000000..715bd6a
--- /dev/null
+++ b/src/routes/types.ts
@@ -0,0 +1,6 @@
+const RouteTypes = {
+    HOME: "/",
+    ABOUT: "/about",
+}
+
+export default RouteTypes
\ No newline at end of file