diff --git a/src/components/App.js b/src/components/App.js
new file mode 100644
index 0000000..86f0c65
--- /dev/null
+++ b/src/components/App.js
@@ -0,0 +1,34 @@
+import React from "react";
+import HomePage from "./pages/HomePage";
+import AboutPage from "./pages/AboutPage";
+import Header from "./common/Header";
+import CoursesPage from "./pages/CoursesPage";
+import { Route, Switch, Redirect } from "react-router-dom";
+import NotFoundPage from "./pages/NotFoundPage";
+import ManageCoursePage from "./pages/ManageCoursePage";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import UsersPage from "./pages/UsersPage";
+
+function App() {
+  return (
+    <div className="container-fluid">
+      <ToastContainer autoClose={3000} hideProgressBar />
+      <Header />
+      <Switch>
+        <Route path="/" exact component={HomePage} />
+        <Route path="/users" component={UsersPage} />
+        <Route path="/courses" component={CoursesPage} />
+        <Route path="/about" component={AboutPage} />
+        <Route path="/course/:slug" component={ManageCoursePage} />
+        <Route path="/course" component={ManageCoursePage} />
+        <Redirect from="/about-page" to="/about" />
+        <Route component={NotFoundPage} />
+        {/** TODO
+         * Add rout and redirect tags as needed make sure more explicit tags are above less explicit tags */}
+      </Switch>
+    </div>
+  );
+}
+
+export default App;