diff --git a/client/src/components/Router/index.jsx b/client/src/components/Router/index.jsx
new file mode 100644
index 0000000..7bcdcbd
--- /dev/null
+++ b/client/src/components/Router/index.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import * as ROUTES from "../../constants/routes";
+import {
+  LandingPage,
+  SignUpPage,
+  SignInPage,
+  PasswordForgetPage,
+  AppPage,
+  AccountPage,
+  AdminPage,
+} from "../../pages/index";
+
+export default function MainRouter() {
+  return (
+    <Switch>
+      <Route exact path={ROUTES.LANDING} component={LandingPage} />
+      <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
+      <Route path={ROUTES.SIGN_IN} component={SignInPage} />
+      <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
+      <Route path={ROUTES.APP} component={AppPage} />
+      <Route path={ROUTES.ACCOUNT} component={AccountPage} />
+      <Route path={ROUTES.ADMIN} component={AdminPage} />
+    </Switch>
+  );
+}
diff --git a/client/src/constants/routes.js b/client/src/constants/routes.js
new file mode 100644
index 0000000..2e8e32b
--- /dev/null
+++ b/client/src/constants/routes.js
@@ -0,0 +1,7 @@
+export const LANDING = "/";
+export const SIGN_UP = "/signup";
+export const SIGN_IN = "/signin";
+export const APP = "/app";
+export const ACCOUNT = "/account";
+export const ADMIN = "/admin";
+export const PASSWORD_FORGET = "/pw-forget";
diff --git a/client/src/pages/Account/index.jsx b/client/src/pages/Account/index.jsx
new file mode 100644
index 0000000..3644fb5
--- /dev/null
+++ b/client/src/pages/Account/index.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Container } from "reactstrap";
+import ItemModal from "../ItemModal";
+import List from "../List";
+
+export default function AccountPage() {
+  return (
+    <Container>
+      <ItemModal />
+      <List />
+    </Container>
+  );
+}
diff --git a/client/src/pages/Admin/index.jsx b/client/src/pages/Admin/index.jsx
new file mode 100644
index 0000000..7c8afd8
--- /dev/null
+++ b/client/src/pages/Admin/index.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Container } from "reactstrap";
+import ItemModal from "../ItemModal";
+import List from "../List";
+
+export default function AdminPage() {
+  return (
+    <Container>
+      <ItemModal />
+      <List />
+    </Container>
+  );
+}
diff --git a/client/src/pages/App/index.jsx b/client/src/pages/App/index.jsx
new file mode 100644
index 0000000..b3167e5
--- /dev/null
+++ b/client/src/pages/App/index.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Container } from "reactstrap";
+import ItemModal from "../ItemModal";
+import List from "../List";
+
+export default function AppPage() {
+  return (
+    <Container>
+      <ItemModal />
+      <List />
+    </Container>
+  );
+}
diff --git a/client/src/pages/Landing/index.jsx b/client/src/pages/Landing/index.jsx
new file mode 100644
index 0000000..0187250
--- /dev/null
+++ b/client/src/pages/Landing/index.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Container } from "reactstrap";
+import ItemModal from "../ItemModal";
+import List from "../List";
+
+export default function LandingPage() {
+  return (
+    <Container>
+      <ItemModal />
+      <List />
+    </Container>
+  );
+}
diff --git a/client/src/pages/PasswordForget/index.jsx b/client/src/pages/PasswordForget/index.jsx
new file mode 100644
index 0000000..f13840a
--- /dev/null
+++ b/client/src/pages/PasswordForget/index.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Container } from "reactstrap";
+import ItemModal from "../ItemModal";
+import List from "../List";
+
+export default function PasswordForgetPage() {
+  return (
+    <Container>
+      <ItemModal />
+      <List />
+    </Container>
+  );
+}
diff --git a/client/src/pages/SignIn/index.jsx b/client/src/pages/SignIn/index.jsx
new file mode 100644
index 0000000..afe2871
--- /dev/null
+++ b/client/src/pages/SignIn/index.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Container } from "reactstrap";
+import ItemModal from "../ItemModal";
+import List from "../List";
+
+export default function SignInPage() {
+  return (
+    <Container>
+      <ItemModal />
+      <List />
+    </Container>
+  );
+}
diff --git a/client/src/pages/SignUp/index.jsx b/client/src/pages/SignUp/index.jsx
new file mode 100644
index 0000000..36ef981
--- /dev/null
+++ b/client/src/pages/SignUp/index.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Container } from "reactstrap";
+import ItemModal from "../ItemModal";
+import List from "../List";
+
+export default function SignUpPage() {
+  return (
+    <Container>
+      <ItemModal />
+      <List />
+    </Container>
+  );
+}
diff --git a/client/src/pages/index.js b/client/src/pages/index.js
new file mode 100644
index 0000000..4fd285d
--- /dev/null
+++ b/client/src/pages/index.js
@@ -0,0 +1,16 @@
+import AppPage from "./App";
+import LandingPage from "./Landing"
+import SignUpPage from "./SignUp"
+import SignInPage from "./SignIn"
+import PasswordForgetPage from "./PasswordForget"
+import AccountPage from "./Account"
+import AdminPage from "./Admin"
+
+
+export const AppPage
+export const LandingPage
+export const SignUpPage
+export const SignInPage
+export const PasswordForgetPage
+export const AccountPage
+export const AdminPage
diff --git a/client/src/services/auth/context.js b/client/src/services/auth/context.js
new file mode 100644
index 0000000..d0d3bed
--- /dev/null
+++ b/client/src/services/auth/context.js
@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+
+// create a Firebase context to make state available anywhere in the App.
+const FirebaseContext = createContext(null);
+
+export const useFirebase = () => useContext(FirebaseContext);
+export default FirebaseContext;
diff --git a/client/src/services/auth/firebase.js b/client/src/services/auth/firebase.js
new file mode 100644
index 0000000..7deb498
--- /dev/null
+++ b/client/src/services/auth/firebase.js
@@ -0,0 +1,24 @@
+import app from "firebase/app";
+// import "firebase/firestore";
+import "firebase/auth";
+import config from "./config.json";
+
+const CONFIG = {
+  apiKey: config.apiKey,
+  authDomain: config.authDomain,
+  databaseURL: config.databaseURL,
+  projectId: config.projectId,
+  storageBucket: config.storageBucket,
+  messagingSenderId: config.messagingSenderId,
+  appId: config.appId,
+  measurementId: config.measurementId,
+};
+
+// Firebase initializes the Application and provides method to interact with
+// Firebase services as auth and firestore.
+export default class Firebase {
+  constructor() {
+    app.initializeApp(CONFIG);
+    this.auth = app.auth();
+  }
+}
diff --git a/client/src/services/auth/index.js b/client/src/services/auth/index.js
new file mode 100644
index 0000000..1182665
--- /dev/null
+++ b/client/src/services/auth/index.js
@@ -0,0 +1,6 @@
+// This file centralize all Firebase related exports
+import Firebase from "./firebase";
+import FirebaseContext, { useFirebase } from "./context";
+
+export default Firebase;
+export { FirebaseContext, useFirebase };
diff --git a/constants/routes.js b/constants/routes.js
new file mode 100644
index 0000000..9599f29
--- /dev/null
+++ b/constants/routes.js
@@ -0,0 +1,2 @@
+export const ITEMS = "/api/items/";
+export const USERS = "/api/users/";