diff --git a/django/src/ft_auth/templates/login.html b/django/src/ft_auth/templates/login.html
index c517b310..9cf88d20 100644
--- a/django/src/ft_auth/templates/login.html
+++ b/django/src/ft_auth/templates/login.html
@@ -1,30 +1,47 @@
 {% extends "./extends/base.html" %}
 
 {% block content %}
-<h1>Login</h1>
-
-<form id="login-form" data-url="/api/auth/login/">
-	<div id="login-error"></div>
-	{% csrf_token %}
-	<div>
-		<label for="username">Username</label>
-		<input id="username" type="text" autocomplete="username" />
-	</div>
-	<div>
-		<label for="password">Password</label>
-		<input id="password" type="password" />
-	</div>
-	<button id="form-btn">Login</button>
-</form>
 
-<h2>Or</h2>
+<div id="register-side">
+	<h1>Bottom text</h1>
+</div>
+<div id="login-side" class="container">
+	<div class="column">
+		<form id="login-form" data-url="/api/auth/login/">
+			<div class="row">
+				<h1 class="text-center">Login</h1>
+			</div>
+			<div id="login-error"></div>
+			{% csrf_token %}
+			<div class="form-floating mb-3 row">
+				<input type="text" class="form-control" id="username" placeholder="Username" autocomplete="username">
+				<label for="username">Username</label>
+			</div>
+
+			<div class="form-floating mb-3 row">
+				<input type="password" class="form-control" id="password" placeholder="Password">
+				<label for="password">Password</label>
+			</div>
 
-<div>
-	<a href="{{ oauth_url }}">Login with 42</a>
+			<button id="login-btn" type="submit" class="btn btn-success row w-100 m-0">Login</button>
+		</form>
+		<hr class="row border-bottom border-1 border-dark my-2">
+		</hr>
+		<div class="row">
+			<p class="fw-light" style="margin-bottom: 0px;">Don't have an account yet ? Try <a data-route
+					href="/register" class="text-decoration-none text-success">registering</a></p>
+		</div>
+		<div class="row">
+			<p class="fw-light text-center">or
+				<a id="login-42-btn" class="btn btn-sm rounded-pill rounded-5 text-decoration-none"
+					href="{{ oauth_url }}">Login with <img class="image-text" src="/assets/42.svg" alt="42 logo"></a>
+			</p>
+		</div>
+	</div>
 </div>
 
 <script>
-	document.getElementById('form-btn').onclick = function(e) {
+	document.getElementById('login-btn').onclick = function (e) {
 		document.getElementById('login-error').textContent = '';
 		e.preventDefault();
 		submitForm('login-form', () => route('/'), (json) => {
@@ -32,4 +49,43 @@ <h2>Or</h2>
 		});
 	};
 </script>
-{% endblock %}
+
+<style>
+	#page-container-wrapper {
+		display: flex;
+		height: calc(100vh - 67.5px);
+	}
+
+	#register-side,
+	#login-side {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#register-side {
+		background-color: #e0e0e0;
+	}
+
+	#login-side {
+		background-color: #f5f5f5;
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+	}
+
+	.image-text {
+		height: 1rem;
+		width: 1rem;
+	}
+
+	#login-42-btn {
+		background-color: #dfbac8;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		padding-left: 4px;
+		padding-right: 4px;
+	}
+</style>
+{% endblock %}
\ No newline at end of file
diff --git a/django/src/ft_auth/templates/register.html b/django/src/ft_auth/templates/register.html
index 2b20f842..7f29b71d 100644
--- a/django/src/ft_auth/templates/register.html
+++ b/django/src/ft_auth/templates/register.html
@@ -31,14 +31,24 @@ <h1 class="text-center">Register</h1>
 		<hr class="row border-bottom border-1 border-dark my-2">
 		</hr>
 		<div class="row">
-			<p class="fw-light">Already have an account ? Try <a data-route href="/login"
+			<p class="fw-light" style="margin-bottom: 0px;">Already have an account ? Try <a data-route href="/login"
 					class="text-decoration-none text-success">logging in</a></p>
 		</div>
+		<div class="row">
+			<p class="fw-light text-center">or
+				<a id="login-42-btn" class="btn btn-sm rounded-pill rounded-5 text-decoration-none"
+					href="{{ oauth_url }}">Login with <img class="image-text" src="/assets/42.svg" alt="42 logo"></a>
+			</p>
+		</div>
 	</div>
 </div>
 <div id="login-side">
 	<h1>Right Side</h1>
 </div>
+<div id="slider-div" class="slider-div-default">
+	<h1>Right Side</h1>
+	<button id="toggle-slider" class="btn btn-primary mt-3">toggle slider</button>
+</div>
 
 <script>
 	function validate() {
@@ -61,5 +71,83 @@ <h1>Right Side</h1>
 			document.getElementById('register-error').textContent = json.error;
 		});
 	};
+
+	document.getElementById('toggle-slider').addEventListener('click', function() {
+        let element = document.getElementById('slider-div');
+        element.classList.toggle('slider-div-default');
+        element.classList.toggle('slider-div-animation');
+        let btn = document.getElementById('toggle-slider');
+        btn.classList.toggle('active');
+    });
 </script>
+
+<style>
+	#page-container-wrapper {
+		display: flex;
+		height: calc(100vh - 67.5px);
+	}
+
+	#register-side,
+	#login-side {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#register-side {
+		background-color: #f5f5f5;
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+	}
+
+	#login-side {
+		background-color: #f5f5f5;
+	}
+
+	.image-text {
+		height: 1rem;
+		width: 1rem;
+	}
+
+	#login-42-btn {
+		background-color: #dfbac8;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		padding-left: 4px;
+		padding-right: 4px;
+	}
+
+	.slider-div-default {
+		z-index: 9000;
+		width: 50%;
+		height: calc(100vh - 67.5px);
+		background-color: #e0e0e0;
+		position: absolute;
+		top: 67.5px;
+		left: 50%;
+	}
+
+	.slider-div-animation {
+		z-index: 9000;
+		width: 50%;
+		height: calc(100vh - 67.5px);
+		background-color: #e0e0e0;
+		position: absolute;
+		top: 67.5px;
+		left: 0;
+		animation: moveRight 4s;
+		animation-fill-mode: forwards;
+    }
+
+    @keyframes moveRight {
+      0% {
+        left: 0;
+      }
+      100% {
+        left: 50%;
+      }
+    }
+</style>
 {% endblock %}
\ No newline at end of file
diff --git a/nginx/src/assets/42.svg b/nginx/src/assets/42.svg
new file mode 100644
index 00000000..63c77a10
--- /dev/null
+++ b/nginx/src/assets/42.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="m24 12.42-4.428 4.415H24zm-4.428-4.417-4.414 4.418v4.414h4.414V12.42L24 8.003V3.575h-4.428zm-4.414 0 4.414-4.428h-4.414zM0 15.996h8.842v4.43h4.412V12.42H4.428l8.826-8.846H8.842L0 12.421z"/></svg>
\ No newline at end of file
diff --git a/nginx/src/css/register.css b/nginx/src/css/register.css
deleted file mode 100644
index 5ff80c75..00000000
--- a/nginx/src/css/register.css
+++ /dev/null
@@ -1,21 +0,0 @@
-#page-container-wrapper {
-    display: flex;
-    height: calc(100vh - 67.5px);
-}
-
-#register-side, #login-side {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-#register-side {
-    background-color: #f5f5f5;
-    display: flex;
-    flex-direction: column;
-}
-
-#login-side {
-    background-color: #e0e0e0;
-}
\ No newline at end of file
diff --git a/nginx/src/index.html b/nginx/src/index.html
index 0263dd7a..b9fc8398 100644
--- a/nginx/src/index.html
+++ b/nginx/src/index.html
@@ -11,7 +11,6 @@
 	<link rel="stylesheet" type="text/css" href="/css/styles.css">
 	<link rel="stylesheet" type="text/css" href="/css/sidebar.css">
 	<link rel="stylesheet" type="text/css" href="/css/navbar.css">
-	<link rel="stylesheet" type="text/css" href="/css/register.css">
 	<link rel="stylesheet" type="text/css" href="/css/games.css">
 	<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
 </head>