diff --git a/frontend/src/AppRoutes.css b/frontend/src/AppRoutes.css
new file mode 100644
index 0000000..43b73ff
--- /dev/null
+++ b/frontend/src/AppRoutes.css
@@ -0,0 +1,16 @@
+.AppRoutes {
+  text-align: center;
+    position: relative;
+    min-height: 667px;
+
+}
+
+#root {
+  font-family: arial;
+  /* margin: 0 auto; */
+  max-width: 375px;
+  min-height: 600px;
+    background-color:#EEEEEE;
+
+    /* padding-bottom: 0px; */
+}
diff --git a/frontend/src/AppRoutes.js b/frontend/src/AppRoutes.js
index a413ac7..a64ef52 100644
--- a/frontend/src/AppRoutes.js
+++ b/frontend/src/AppRoutes.js
@@ -1,27 +1,45 @@
-/* eslint-disable react/jsx-filename-extension */
 import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import {BrowserRouter, Route, Switch} from 'react-router-dom'
+
+import './AppRoutes.css';
+import './style/style.css';
+
 import Login from './components/Login/Login';
+import Header from './components/Header';
+import Chats from './components/Chats/Chats';
 import Carers from './components/Carers/Carers';
-import signUp from './components/singup/singup';
+import Profile from './components/Profile/Profile';
+import Diaries from './components/MyDiary/MyDiary';
+import Discussion from './components/Discussions/Discussions';
 import Connection from './components/Connections/Connections';
-import './style/style.css';
-
+import MyBook from './components/MyCarePlan/MyCarePlan';
 
-const AppRoutes = () => (
+import Error from "./components/Error";
 
-  <BrowserRouter>
+import NavElements from './components/Navbar/NavElement'
 
-    <Switch>
-      <Route path="/" component={Carers} exact />
-      <Route path="/login" component={Login} />
-      <Route path="/carers" component={Carers} />
-      <Route path="/signUp" component={signUp} />
-      <Route path="/MyFriends" component={Connection} />
-    </Switch>
 
-  </BrowserRouter>
+const AppRoutes = () => (
+  <div className="AppRoutes">
+  <BrowserRouter>
+          <div>
+          <Header connectReq={['adsfa','sdfg']}/>
+            <Switch>
+              <Route path="/" component={Carers} exact />
+              <Route path="/login" component={Login} />
+              <Route path="/carers" component={Carers} />
+              <Route path="/profile" component={Profile} />
+              <Route path="/diaries" component={Diaries} />
+              <Route path="/discussion" component={Discussion} />
+              <Route path="/connection" component={Connection} />
+              <Route path="/mybook" component={MyBook} />
+              <Route path="/chats" component={Chats} />
+              <Route component={Error} />
+            </Switch>
+            <NavElements />
+          </div>
+        </BrowserRouter>
+        </div>
 );
 
-
 export default AppRoutes;