diff --git a/client/src/App.tsx b/client/src/App.tsx
index f7146e7e743b49f3b6cf95d9947edf66e645b0ab..429313ae1af999aa9d4e6de2d20b7afe3cb05b18 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,17 +1,24 @@
 
 import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { isLoggedIn } from 'adapters/api';
 
 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 Navigation = lazy(() => import('components/ui/Navigation'));
 
 export default function App() {
     return (
         <Router>
             <Suspense fallback={false}>
+                {isLoggedIn() && <Navigation />}
                 <Switch>
-                    <Route path="/login" component={Login} />
-                    <Route path="/" component={Home} />
+                    {!isLoggedIn() && <Route path="/register" component={Register} />}
+                    {!isLoggedIn() && <Route exact path="/" component={Home} />}
+                    {!isLoggedIn() && <Route path="/" component={Login} />}
+                    <Route path="/" component={Tasks} />
                 </Switch>
             </Suspense>
         </Router>
diff --git a/client/src/adapters/api.ts b/client/src/adapters/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..929c441a0d606cc634e5f0e8a308b5ebbc788afe
--- /dev/null
+++ b/client/src/adapters/api.ts
@@ -0,0 +1 @@
+export const isLoggedIn = (): boolean => false;
diff --git a/client/src/components/ui/Navigation/index.tsx b/client/src/components/ui/Navigation/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d1c633fd764b3745af27a745c0adaf1928d084b8
--- /dev/null
+++ b/client/src/components/ui/Navigation/index.tsx
@@ -0,0 +1,9 @@
+import './navigation.scss';
+
+export default function Navigation() {
+    return (
+        <main>
+            <h1>Navigation</h1>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Navigation/navigation.scss b/client/src/components/ui/Navigation/navigation.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/client/src/index.scss b/client/src/index.scss
index cad66de163080c8c7e62e82e107954485411bf4f..526bfefb7f908d5789fc1a139c8fc00ae6155db4 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -18,7 +18,7 @@ html {
 body {
     color: s.$body-color;
     position: relative;
-    background: linear-gradient(to left, #e2e2e2 0%, #e6e6e6 100%);
+    background: linear-gradient(to right, #fff 0%, #f2f2f2 100%);
 
     @include mx.breakpoint(xlarge) {
         padding: 5rem 0;
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
index 758eeef51805e237179338556a535a16f3e44cc6..3389eb88fcd25a10854f43891ecec7e5a2390d87 100644
--- a/client/src/pages/Home/index.tsx
+++ b/client/src/pages/Home/index.tsx
@@ -35,7 +35,7 @@ export default function Home() {
                                 <h1>ryoko</h1>
                                 <p>Are you feeling lost with your tasks? Maximize your productivity now with ryoko.</p>
                                 <div className="button-container">
-                                    <ButtonLink href="#intro">Get started</ButtonLink>
+                                    <ButtonLink href="/register" routing={true}>Get started</ButtonLink>
                                 </div>
                             </div>
                         </div>
diff --git a/client/src/pages/Register/index.tsx b/client/src/pages/Register/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca7560d0d62520efffc4815ba0be6ec34930111f
--- /dev/null
+++ b/client/src/pages/Register/index.tsx
@@ -0,0 +1,10 @@
+
+import './register.scss';
+
+export default function Register() {
+    return (
+        <div>
+            register
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/client/src/pages/Register/register.scss b/client/src/pages/Register/register.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9978280ce48e8acc50cb8fbd858913143d108c66
--- /dev/null
+++ b/client/src/pages/Tasks/index.tsx
@@ -0,0 +1,9 @@
+import './tasks.scss';
+
+export default function Tasks() {
+    return (
+        <main>
+            <h1>Tasks</h1>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/client/src/pages/Tasks/tasks.scss b/client/src/pages/Tasks/tasks.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/client/src/styles/settings.scss b/client/src/styles/settings.scss
index de925b09fc2aec1fb8b05ad76e70914706824e3d..0ecc96bde62d0e6f6c3d0021a5e142f05de8f0a0 100644
--- a/client/src/styles/settings.scss
+++ b/client/src/styles/settings.scss
@@ -19,7 +19,7 @@ $colors: (
 $linear-gradient: linear-gradient(to top, $primary, $secondary);
 $radial-gradient: radial-gradient(100% 115% at 0% 0%, $primary 0%, $secondary 100%);
 
-$body-color: #4B4B4B;
+$body-color: #3A5255;
 $body-font: 'Poppins', sans-serif;
 
 // Typography