diff --git a/client/src/App.tsx b/client/src/App.tsx
index d4e3d097ffc2c52445765406ed28c3594bf9cdcd..3a1614a18e887c6ff3f76af4d38fc8b1d3f23923 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,26 +1,22 @@
 
 import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Switch, Route,  } from 'react-router-dom';
-import ProtectedRoute from 'components/helpers/Rerouters/ProtectedRoute'; 
+
 import LoginRoute from 'components/helpers/Rerouters/LoginRoute'; 
+import AppWrapper from 'pages/AppWrapper'; 
 
 const Home = lazy(() => import('pages/Home'));
 const Login = lazy(() => import('pages/Login'));
 const Register = lazy(() => import('pages/Register'));
-const Tasks = lazy(() => import('pages/Tasks'));
-const Projects = lazy(() => import('pages/Projects'));
-const Stats = lazy(() => import('pages/Stats'));
 
 export default function App() {
     return (
         <Router>
             <Suspense fallback={false}>
                 <Switch>
-                    <ProtectedRoute path="/tasks" component={Tasks} />
-                    <ProtectedRoute path="/projects" component={Projects} />
-                    <ProtectedRoute path="/stats" component={Stats} />
                     <LoginRoute path="/login" component={Login} />
                     <LoginRoute path="/register" component={Register} />
+                    <Route path={["/tasks", "/projects", "/stats"]} component={AppWrapper} />
                     <Route path="/" component={Home} />
                 </Switch>
             </Suspense>
diff --git a/client/src/components/helpers/Rerouters/LoginRoute.tsx b/client/src/components/helpers/Rerouters/LoginRoute.tsx
index 15641a94f2f073ff19598a3c1248e417c3bb23f4..3019b52336377bbcda85cb7e071534e50c8ca300 100644
--- a/client/src/components/helpers/Rerouters/LoginRoute.tsx
+++ b/client/src/components/helpers/Rerouters/LoginRoute.tsx
@@ -10,7 +10,7 @@ export default function LoginRoute(props: RouteProps) {
             if (history.length === 0) {
                 history.push('/tasks');
             } else {
-                history.goBack();;
+                history.goBack();
             }
         }
     })
diff --git a/client/src/pages/AppWrapper/index.tsx b/client/src/pages/AppWrapper/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..219b5a13c3f040fc897a3e56760a12ca32e16ac6
--- /dev/null
+++ b/client/src/pages/AppWrapper/index.tsx
@@ -0,0 +1,23 @@
+
+import { Suspense, lazy } from 'react';
+
+import ProtectedRoute from 'components/helpers/Rerouters/ProtectedRoute'; 
+import Header from 'components/ui/Header';
+import Navigation from 'components/ui/Navigation';
+
+const Tasks = lazy(() => import('pages/Tasks'));
+const Projects = lazy(() => import('pages/Projects'));
+const Stats = lazy(() => import('pages/Stats'));
+
+export default function AppWrapper() {
+    return (<>
+        <Header />
+        <Navigation />
+        <Suspense fallback={false}>
+            <ProtectedRoute path="/tasks" component={Tasks} />
+            <ProtectedRoute path="/projects" component={Projects} />
+            <ProtectedRoute path="/stats" component={Stats} />
+        </Suspense>
+    </>);
+}
+
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
index 288517a55430972b33875e66cb9d585c95e94f27..c4a536ab75b8710851b11991ea44db9b283cb476 100644
--- a/client/src/pages/Home/index.tsx
+++ b/client/src/pages/Home/index.tsx
@@ -29,7 +29,6 @@ export default function Home() {
                             <div className="inner">
                             </div>
                         </div>
-                    </div>
                     <div className="content-container">
                         <div className="text-container">
                             <h1>ryoko</h1>
diff --git a/client/src/pages/Projects/index.tsx b/client/src/pages/Projects/index.tsx
index 0ad04b0e0b9476e3e8fef1b0426c4d9b7d7f832a..a0d6bd8fcfd75466088b43abdc8fdbc03838e987 100644
--- a/client/src/pages/Projects/index.tsx
+++ b/client/src/pages/Projects/index.tsx
@@ -1,14 +1,12 @@
 
-import Navigation from 'components/ui/Navigation';
 import './projects.scss';
 
 export default function Tasks() {
     return (
         <div className="projects-page">
-            <Navigation />
             <main>
                 <h1>Projects</h1>
             </main>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Stats/index.tsx b/client/src/pages/Stats/index.tsx
index 7a368a472572f10d8f080aeba621090d9575ebcf..ac3822eee7841e18f6275e63edea99c03b5791b3 100644
--- a/client/src/pages/Stats/index.tsx
+++ b/client/src/pages/Stats/index.tsx
@@ -1,14 +1,12 @@
 
-import Navigation from 'components/ui/Navigation';
 import './stats.scss';
 
 export default function Tasks() {
     return (
         <div className="stats-page">
-            <Navigation />
             <main>
                 <h1>Stats</h1>
             </main>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 367d9ff007d23f68d183cc18ecef147fda43b7f2..6887e1f284406d6ce5eea8ada2f77250d4d25aad 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -3,13 +3,12 @@ import './tasks.scss';
 
 export default function Tasks() {
     return (
-        <>
-            <Page className="tasks-page">
-                <main className="content-container">
-                    <h1>Tasks</h1>
-                    <p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p>
-                </main>
-            </Page>
-        </>
+        <Page className="tasks-page">
+            <main className="content-container">
+                <h1>Tasks</h1>
+                <p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p>
+            </main>
+        </Page>
     );
-}
\ No newline at end of file
+}
+