diff --git a/assets/styles/app.css b/assets/styles/app.css
index b027255..3b5391f 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -13,17 +13,24 @@
 
 a {
     color: inherit;
-    text-decoration: none;
     transition: all ease-out 0.3s;
     &:hover {
         font-weight: 700;
     }
+    &.no-style {
+        text-decoration: none;
+    }
 }
 
 /*Main content (between header and footer)*/
 body > main {
     min-height: calc(100vh - ((2rem + 2 * 0.75rem) + 6rem));
-    height: fit-content;
+    /* height: fit-content; */
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 /*fix symfony template style*/
diff --git a/templates/base.html.twig b/templates/base.html.twig
index f5043b5..b4282ba 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -16,7 +16,7 @@
     <body>
         {% block header %}
         <header>
-            <a href="{{url('index')}}">Frutti</a>
+            <a class="no-style" href="{{url('index')}}">Frutti</a>
             <form action="{{url('app_search')}}" method="get">
                 <input type="text" name="q" id="q" placeholder="Search" />
                 <select name="fruit" id="fruit">
@@ -41,7 +41,10 @@
                     <img src="{{ asset('/styles/search.svg') }}" alt="Search" />
                 </label>
             </form>
-            <a href="{{url('app_login')}}">Login</a>
+            <div>
+            <a class="no-style" href="{{url('app_register')}}">Register</a>
+            <a class="no-style" href="{{url('app_login')}}">Login</a>
+            </div>
         </header>
         {% endblock %}
 
diff --git a/templates/registration/register.html.twig b/templates/registration/register.html.twig
index c5283d7..9892166 100644
--- a/templates/registration/register.html.twig
+++ b/templates/registration/register.html.twig
@@ -1,19 +1,86 @@
-{% extends 'base.html.twig' %}
+{% extends 'base.html.twig' %} {% block title %}Register{% endblock %} {% block
+body %}
+<style>
+    main#register > form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--size-max);
+        justify-content: center;
+        align-items: center;
+        min-width: 300px;
+        max-width: 10rem;
+        justify-content: center;
+        align-items: center;
+        & > label:not(label[for="registration_form_agreeTerms"]) {
+            display: none;
+        }
+        & > :is(input[type="text"], input[type="password"]) {
+            height: var(--size-max);
+            border-radius: var(--radius);
+            padding: calc(var(--size-max) / 2) var(--size-max);
+            border: none;
+            background: var(--grey);
+            width: 80%;
+        }
+        & > input[type="submit"] {
+            cursor: pointer;
+            background: var(--light);
+            border: none;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            color: var(--dark);
+            padding: calc(var(--size-max) - 8px) 0;
+            width: 70%;
+            height: 20%;
+            transition: all ease-out 0.2s;
+            &:hover {
+                box-shadow: var(--shadow-hover);
+            }
+        }
+    }
+</style>
+<main id="register">
+    {{ form_start(registrationForm) }} {% if app.user %}
+    <div class="mb-3">
+        You are logged in as {{ app.user.userIdentifier }},
+        <a href="{{ path('app_logout') }}">Logout</a>
+    </div>
+    {% endif %}
 
-{% block title %}Register{% endblock %}
+    <h2>Register</h2>
+    {{ form_errors(registrationForm.username) }}
+    <label for="username">Username</label>
+    <input
+        type="text"
+        name="{{field_name(registrationForm.username)}}"
+        value="{{field_value(registrationForm.username)}}"
+        id="username"
+        class="form-control"
+        autocomplete="username"
+        placeholder="Username"
+        max-length="180"
+        required
+        autofocus
+    />
+    {{ form_errors(registrationForm.plainPassword) }}
+    <label for="password">Password</label>
+    <input
+        type="password"
+        name="{{field_name(registrationForm.plainPassword)}}"
+        class="form-control"
+        autocomplete="new-password"
+        placeholder="Password"
+        required
+    />
 
-{% block body %}
-    <h1>Register</h1>
+    {{ form_row(registrationForm.agreeTerms) }}
 
-    {{ form_errors(registrationForm) }}
+    <input type="submit" value="Register" />
+    <p>
+        If you don't have an account:
+        <a href="{{url('app_register')}}">register</a>.
+    </p>
 
-    {{ form_start(registrationForm) }}
-        {{ form_row(registrationForm.username) }}
-        {{ form_row(registrationForm.plainPassword, {
-            label: 'Password'
-        }) }}
-        {{ form_row(registrationForm.agreeTerms) }}
-
-        <button type="submit" class="btn">Register</button>
     {{ form_end(registrationForm) }}
+</main>
 {% endblock %}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index fb532dd..9e19526 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -1,40 +1,23 @@
 {% extends 'base.html.twig' %} {% block title %}Log in!{% endblock %} {% block
 body %}
 <style>
-    main#login {
-        padding: var(--size-max);
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        gap: var(--size-max);
-        & > hr {
-            width: 2px;
-            height: 250px;
-            border: none;
-            background: var(--dark);
-            border-radius: var(--radius);
-        }
-    }
-
-    main#login > section > form {
+    main#login > form {
         display: flex;
         flex-direction: column;
         gap: var(--size-max);
+        justify-content: center;
+        align-items: center;
         min-width: 300px;
+        max-width: 10rem;
+        justify-content: center;
         align-items: center;
         & > label {
             display: none;
         }
-        &
-            > :is(
-                input[type="text"],
-                input[type="email"],
-                input[type="password"]
-            ) {
+        & > :is(input[type="text"], input[type="password"]) {
             height: var(--size-max);
             border-radius: var(--radius);
-            padding: var(--size-max);
+            padding: calc(var(--size-max) / 2) var(--size-max);
             border: none;
             background: var(--grey);
             width: 80%;
@@ -69,7 +52,7 @@ body %}
         </div>
         {% endif %}
 
-        <h1 class="h3 font-weight-normal mb-3">Please sign in</h1>
+        <h2>Login</h2>
         <label for="username">Username</label>
         <input
             type="text"
@@ -78,6 +61,7 @@ body %}
             id="username"
             class="form-control"
             autocomplete="username"
+            placeholder="Username"
             required
             autofocus
         />
@@ -88,6 +72,7 @@ body %}
             id="password"
             class="form-control"
             autocomplete="current-password"
+            placeholder="Password"
             required
         />
 
@@ -108,7 +93,11 @@ body %}
         </div>
         #}
 
-        <button class="btn btn-lg btn-primary" type="submit">Sign in</button>
+        <input type="submit" value="Sign in" />
+        <p>
+            If you don't have an account:
+            <a href="{{url('app_register')}}">register</a>.
+        </p>
     </form>
 </main>
 {% endblock %}
