diff --git a/webapp/src/index.js b/webapp/src/index.js
index 076c63e..5661dca 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -1,20 +1,36 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import Home from "./pages/home";
 import Login from "./pages/login";
 import Game from "./pages/game";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
+import Register from "./pages/register";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-      <BrowserRouter>
-          <Routes>
-              <Route path="/" element={<Home />}/>
-              <Route path="/login" element={<Login />}/>
-              <Route path="/game" element={<Game />}/>
-          </Routes>
-      </BrowserRouter>
-  </React.StrictMode>
-);
+function App() {
+    const savedToken = localStorage.getItem('token');
+    const [token, setToken] = useState(savedToken ? savedToken : null)
+    useEffect(() => {
+        if(savedToken !== token){
+            localStorage.setItem('token', token);
+        }
+    }, [token]);
+
+    return (
+        <React.StrictMode>
+            <BrowserRouter>
+                <Routes>
+                    <Route path="/" element={<Home />}/>
+                    <Route path="/login" element={<Login setToken={setToken} />}/>
+                    <Route path="/register" element={<Register setToken={setToken} />}/>
+                    <Route path="/game" element={<Game />}/>
+                </Routes>
+            </BrowserRouter>
+        </React.StrictMode>
+    )
+}
+
+
+
+root.render(<App />)
\ No newline at end of file
diff --git a/webapp/src/modules/fetcher.js b/webapp/src/modules/fetcher.js
new file mode 100644
index 0000000..2b682a2
--- /dev/null
+++ b/webapp/src/modules/fetcher.js
@@ -0,0 +1,69 @@
+
+async function get(url, token) {
+	const options = {
+		method: 'GET',
+		headers: { 'Content-Type': 'application/json', authorization: `${token}` },
+	};
+
+	return await fetch(url, options)
+		.then(res => res.json())
+		.then(json => {
+			return json;
+		})
+
+}
+
+async function post(url, body, token) {
+	const options = {
+		method: 'POST',
+		mode: 'cors',
+		headers: { 'Content-Type': 'application/json', authorization: `${token}` },
+		body: JSON.stringify(body),
+	};
+
+	return await fetch(url, options)
+		.then(res => res.json())
+		.then(json => {
+			return json;
+		})
+
+}
+
+async function patch(url, body, token) {
+	const options = {
+		method: 'PATCH',
+		mode: 'cors',
+		headers: { 'Content-Type': 'application/json', authorization: `${token}` },
+		body: JSON.stringify(body),
+	};
+
+	return await fetch(url, options)
+		.then(res => res.json())
+		.then(json => {
+			return json;
+		})
+
+}
+
+async function put(url, body, token) {
+	const options = {
+		method: 'PUT',
+		mode: 'cors',
+		headers: { 'Content-Type': 'application/json', authorization: `${token}` },
+		body: JSON.stringify(body),
+	};
+
+	return await fetch(url, options)
+		.then(res => res.json())
+		.then(json => {
+			return json;
+		})
+
+}
+
+export {
+	get,
+	post,
+	patch,
+	put,
+};
\ No newline at end of file
diff --git a/webapp/src/pages/login/index.jsx b/webapp/src/pages/login/index.jsx
index 48e6b87..6272cdb 100644
--- a/webapp/src/pages/login/index.jsx
+++ b/webapp/src/pages/login/index.jsx
@@ -1,60 +1,60 @@
+import {Link, redirect, useNavigate} from "react-router-dom";
+import {useState} from "react";
+import {get, post} from '../../modules/fetcher';
+function Login({setToken}) {
+    const navigate = useNavigate();
+    const loginUser = async (e) => {
+        e.preventDefault()
+        post('https://saucisson.justw.tf/api/users/login', {username, password}, '')
+            .then(async res => {
+                if (res.status === 200) {
+                    console.log(res.JSON.message)
+                    setToken(res.JSON.token)
+                    navigate('/')
+                } else {
+                    setError(res.message)
+                }
+            })
 
-
-function Login() {
+    }
+    const [error, setError] = useState(null)
+    const [username, setUsername] = useState(null)
+    const [password, setPassword] = useState(null)
     return (
-        <section className="bg-gray-50 dark:bg-gray-900">
+        <section className="bg-gradient-to-r from-mainBlue to-darkGreen">
             <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
-                <a href="#" className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
-                    <img className="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
-                         alt="logo"/>
-                    Debate
-                </a>
                 <div
-                    className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+                    className="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
                     <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
-                        <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
-                            Sign in to your account
+                        <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
+                            Login to your account
                         </h1>
-                        <form className="space-y-4 md:space-y-6" action="#">
+                        <form onSubmit={loginUser} className="space-y-4 md:space-y-6">
+                            {error && (
+                                <div>
+                                    <p className="text-red-500 text-md">{error}</p>
+                                </div>
+                            )}
                             <div>
                                 <label htmlFor="email"
-                                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your
-                                    email</label>
-                                <input type="email" name="email" id="email"
-                                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                                       placeholder="name@company.com" required=""/>
+                                       className="block mb-2 text-sm font-medium text-gray-900">Your
+                                    username</label>
+                                <input type="text" name="email" id="email"
+                                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
+                                       placeholder="John Doe" required="" onChange={e => {setUsername(e.target.value)}}/>
                             </div>
                             <div>
                                 <label htmlFor="password"
-                                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
+                                       className="block mb-2 text-sm font-medium text-gray-900">Password</label>
                                 <input type="password" name="password" id="password" placeholder="••••••••"
-                                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                                       required=""/>
+                                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
+                                       required onChange={e => {setPassword(e.target.value)}}/>
                             </div>
-                            <div className="flex items-center justify-between">
-                                <div className="flex items-start">
-                                    <div className="flex items-center h-5">
-                                        <input id="remember" aria-describedby="remember" type="checkbox"
-                                               className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
-                                               required=""/>
-                                    </div>
-                                    <div className="ml-3 text-sm">
-                                        <label htmlFor="remember" className="text-gray-500 dark:text-gray-300">Remember
-                                            me</label>
-                                    </div>
-                                </div>
-                                <a href="#"
-                                   className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">Forgot
-                                    password?</a>
-                            </div>
-                            <button type="submit"
-                                    className="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Sign
-                                in
-                            </button>
-                            <p className="text-sm font-light text-gray-500 dark:text-gray-400">
-                                Don’t have an account yet? <a href="#"
-                                                              className="font-medium text-blue-600 hover:underline dark:text-blue-500">Sign
-                                up</a>
+                            <button className="w-full text-white bg-darkGreen focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center">Login</button>
+                            <p className="text-sm font-light text-gray-500">
+                                Don’t have an account yet? <Link to={'/register'}
+                                                              className="font-medium text-darkGreen hover:underline">Sign
+                                up</Link>
                             </p>
                         </form>
                     </div>
diff --git a/webapp/src/pages/register/index.jsx b/webapp/src/pages/register/index.jsx
index 7de5649..7f460ef 100644
--- a/webapp/src/pages/register/index.jsx
+++ b/webapp/src/pages/register/index.jsx
@@ -1,10 +1,79 @@
+import {Link, redirect, useNavigate} from "react-router-dom";
+import {post} from "../../modules/fetcher";
+import {useState} from "react";
 
 
-function Register() {
+function Register({setToken}) {
+    const navigate = useNavigate();
+    const registerUser = async (e) => {
+        e.preventDefault()
+        if(password === confirmPassword) {
+            post('https://saucisson.justw.tf/api/users/register', {username, password}, '')
+                .then(async res => {
+                    if (res.status === 200) {
+                        setToken(res.JSON.token)
+                        navigate('/')
+                    } else {
+                        setError(res.message)
+                    }
+                })
+        } else {
+            setError("Password doesn't match")
+        }
+
+    }
+    const [error, setError] = useState(null)
+    const [username, setUsername] = useState(null)
+    const [password, setPassword] = useState(null)
+    const [confirmPassword, setconfirmPassword] = useState(null)
     return (
-        <div>
-
-        </div>
+        <section className="bg-gradient-to-r from-mainBlue to-darkGreen">
+            <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+                <div
+                    className="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
+                    <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
+                        <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
+                            Create an account
+                        </h1>
+                        <form className="space-y-4 md:space-y-6" onSubmit={registerUser}>
+                            {error && (
+                                <div>
+                                    <p className="text-red-500 text-md">{error}</p>
+                                </div>
+                            )}
+                            <div>
+                                <label htmlFor="email"
+                                       className="block mb-2 text-sm font-medium text-gray-900">Your
+                                    username</label>
+                                <input type="text" name="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5" placeholder="John Doe" required="" onChange={e => {setUsername(e.target.value)}}/>
+                            </div>
+                            <div>
+                                <label htmlFor="password"
+                                       className="block mb-2 text-sm font-medium text-gray-900">Password</label>
+                                <input type="password" name="password" id="password" placeholder="••••••••"
+                                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
+                                       required="" onChange={e => {setPassword(e.target.value)}}/>
+                            </div>
+                            <div>
+                                <label htmlFor="password"
+                                       className="block mb-2 text-sm font-medium text-gray-900">Password confirmation</label>
+                                <input type="password" name="confirm_password" id="confirm_password" placeholder="••••••••"
+                                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
+                                       required="" onChange={e => {setconfirmPassword(e.target.value)}}/>
+                            </div>
+                            <button type="submit"
+                                    className="w-full text-white bg-darkGreen focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center">Register
+                            </button>
+                            <p className="text-sm font-light text-gray-500">
+                                Don’t have an account yet? <Link to={'/login'}
+                                                              className="font-medium text-darkGreen hover:underline">Sign
+                                up</Link>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
     )
 }