diff --git a/qp-generator-frontend/src/Components/Navbar.js b/qp-generator-frontend/src/Components/Navbar.js
index 623dfc2..81456d7 100644
--- a/qp-generator-frontend/src/Components/Navbar.js
+++ b/qp-generator-frontend/src/Components/Navbar.js
@@ -1,40 +1,52 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
+import React, { useState } from "react";
+import { NavLink } from "react-router-dom";
+import {
+  Collapse,
+  Navbar,
+  NavbarToggler,
+  NavbarBrand,
+  Nav,
+  NavItem,
+} from "reactstrap";
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-  },
-  title: {
-    flexGrow: 1,
-  },
-}));
-
-export default function ButtonAppBar() {
-  const classes = useStyles();
+const CustomNavbar = (props) => {
+  const navLinkClasses = "font-weight-normal text-white text-decoration-none";
+  const [collapsed, setCollapsed] = useState(false);
+  const toggleNavbar = () => setCollapsed(!collapsed);
 
   return (
-    <div className={classes.root}>
-      <AppBar position="static">
-        <Toolbar>
-          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
-            <MenuIcon />
-          </IconButton>
-          <Typography variant="h6" className={classes.title}>
+    <>
+      <Navbar expand="md" style={{ backgroundColor: "#6868CB" }} light>
+        <NavbarBrand>
+          <NavLink
+            to="/"
+            className="font-weight-bold text-white text-decoration-none"
+          >
             QP-Generator
-          </Typography>
-          <Button color="inherit">Help</Button>
-        </Toolbar>
-      </AppBar>
-    </div>
+          </NavLink>
+        </NavbarBrand>
+        <NavbarToggler onClick={toggleNavbar} className="ml-auto" />
+        <Collapse isOpen={collapsed} navbar>
+          <Nav className="ml-auto text-white" navbar>
+            <NavItem className="m-2">
+              <NavLink to="/questionPaper" className={navLinkClasses}>
+                QP
+              </NavLink>
+            </NavItem>
+            <NavItem className="m-2">
+              <NavLink to="/bloomLogic" className={navLinkClasses}>
+                Bloom Logic
+              </NavLink>
+            </NavItem>
+            <NavItem className="m-2">
+              <NavLink to="/help" className={navLinkClasses}>
+                Help
+              </NavLink>
+            </NavItem>
+          </Nav>
+        </Collapse>
+      </Navbar>
+    </>
   );
-}
\ No newline at end of file
+};
+export default CustomNavbar;
diff --git a/qp-generator-frontend/src/Layout/App.js b/qp-generator-frontend/src/Layout/App.js
index fd0b65a..ea472ff 100644
--- a/qp-generator-frontend/src/Layout/App.js
+++ b/qp-generator-frontend/src/Layout/App.js
@@ -1,32 +1,30 @@
 import React, { Component } from "react";
-import { Route, Switch } from "react-router-dom";
-import Navbar from '../Components/Navbar'
+import { Route, Switch, Redirect } from "react-router-dom";
+import Navbar from "./../Components/Navbar";
 import routes from "../route.js";
 
 class App extends Component {
-
-  getRoutes = routes => {
+  getRoutes = (routes) => {
     return routes.map((prop, key) => {
       return (
         <Route
-          exact path={prop.path}
-          render={props => (
-            <prop.component
-              {...props}
-            />
-          )}
+          exact
+          path={prop.path}
+          render={(props) => <prop.component {...props} />}
           key={key}
         />
       );
     });
-  }
+  };
 
   render() {
     return (
       <div className="wrapper">
         <div id="main-panel" className="main-panel" ref="mainPanel">
           <Navbar />
-          <Switch>{this.getRoutes(routes)}
+          <Switch>
+            {this.getRoutes(routes)}
+            <Redirect to="/" />
           </Switch>
         </div>
       </div>
@@ -34,4 +32,4 @@ class App extends Component {
   }
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/qp-generator-frontend/src/Views/BloomLogic.jsx b/qp-generator-frontend/src/Views/BloomLogic.jsx
new file mode 100644
index 0000000..8bef638
--- /dev/null
+++ b/qp-generator-frontend/src/Views/BloomLogic.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+const BloomLogic = () => <></>;
+
+export default BloomLogic;
diff --git a/qp-generator-frontend/src/Views/Help.jsx b/qp-generator-frontend/src/Views/Help.jsx
new file mode 100644
index 0000000..643cd6c
--- /dev/null
+++ b/qp-generator-frontend/src/Views/Help.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+const Help = () => <></>;
+
+export default Help;
diff --git a/qp-generator-frontend/src/Views/QP.jsx b/qp-generator-frontend/src/Views/QP.jsx
new file mode 100644
index 0000000..f32d29c
--- /dev/null
+++ b/qp-generator-frontend/src/Views/QP.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const QP = () => (
+  <div className="text-center my-3">Welcome to Question Paper Section</div>
+);
+
+export default QP;
diff --git a/qp-generator-frontend/src/index.js b/qp-generator-frontend/src/index.js
index faa08cc..fc4ae87 100644
--- a/qp-generator-frontend/src/index.js
+++ b/qp-generator-frontend/src/index.js
@@ -1,19 +1,19 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './Layout/App';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./Layout/App";
 import { Route, Switch, HashRouter } from "react-router-dom";
 
-import '@fortawesome/fontawesome-free/css/all.min.css';
-import 'bootstrap-css-only/css/bootstrap.min.css';
-import 'mdbreact/dist/css/mdb.css';
-import 'bootstrap/dist/css/bootstrap.css';
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import "bootstrap-css-only/css/bootstrap.min.css";
+import "mdbreact/dist/css/mdb.css";
+import "bootstrap/dist/css/bootstrap.css";
 
 ReactDOM.render(
   <HashRouter>
     <Switch>
-      <Route path="/" render={props => <App {...props} />} />
+      <Route path="/" render={(props) => <App {...props} />} />
     </Switch>
   </HashRouter>,
-  document.getElementById('root')
-);
\ No newline at end of file
+  document.getElementById("root")
+);
diff --git a/qp-generator-frontend/src/route.js b/qp-generator-frontend/src/route.js
index 12db384..7aad6d3 100644
--- a/qp-generator-frontend/src/route.js
+++ b/qp-generator-frontend/src/route.js
@@ -1,11 +1,29 @@
-import QPGenerate from './Views/qp-generator'
+import QPGenerate from "./Views/qp-generator";
+import QP from "./Views/QP";
+import BloomLogic from "./Views/BloomLogic";
+import Help from "./Views/Help";
 
 const Routes = [
+  {
+    path: "/questionPaper",
+    name: "QP",
+    component: QP,
+  },
+  {
+    path: "/bloomLogic",
+    name: "bloomLogic",
+    component: BloomLogic,
+  },
+  {
+    path: "/help",
+    name: "help",
+    component: Help,
+  },
   {
     path: "/",
     name: "createQP",
-    component: QPGenerate
-  }
+    component: QPGenerate,
+  },
 ];
 
-export default Routes;
\ No newline at end of file
+export default Routes;