diff --git a/assets/styles/app.css b/assets/styles/app.css
index 68f0494..3b5391f 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,24 +1,36 @@
 * {
     margin: 0;
     padding: 0;
-    font-family: 'Kulim Park', sans-serif;
-    --background: hsl(200, 5%, 15%);
-    --accent: hsl(15, 70%, 98%);
+    font-family: "Kulim Park", sans-serif;
+    --dark: hsl(200, 5%, 15%);
+    --light: hsl(15, 70%, 98%);
+    --grey: hsl(15, 6%, 92%);
     --radius: 8px;
+    --size-max: 20px;
+    --shadow: 0 0 0 1px var(--dark);
+    --shadow-hover: 0 0 0 2px var(--dark);
 }
 
 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));
+    min-height: calc(100vh - ((2rem + 2 * 0.75rem) + 6rem));
+    /* height: fit-content; */
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 /*fix symfony template style*/
@@ -31,11 +43,11 @@ header {
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
-    
+
     padding: 0.75rem;
-    
-    background-color: var(--background);
-    color: var(--accent);
+
+    background-color: var(--dark);
+    color: var(--light);
     height: 2rem;
 }
 
@@ -45,23 +57,23 @@ header > form {
     align-items: center;
     gap: 8px;
     padding: 2px 8px;
-    border: solid 2px var(--accent);
+    border: solid 2px var(--light);
     border-radius: var(--radius);
-    
-    &>input[type=text]{
+
+    & > input[type="text"] {
         border: none;
         outline: none;
         background: none;
-        color: var(--accent);
+        color: var(--light);
     }
-    & label>img {
+    & label > img {
         width: 20px;
         height: 20px;
         cursor: pointer;
         padding-top: 1px;
-        padding-bottom: -1px
+        padding-bottom: -1px;
     }
-    & input[type=submit]{
+    & input[type="submit"] {
         display: none;
     }
 }
@@ -74,7 +86,7 @@ footer {
     justify-content: center;
     align-items: center;
     background: hsl(200, 5%, 85%);
-    &>p{
+    & > p {
         font-size: large;
     }
-}
\ No newline at end of file
+}
diff --git a/templates/base.html.twig b/templates/base.html.twig
index e1a3786..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')}}" class="button-link">Connect</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 dccd5d6..9e19526 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -1,42 +1,103 @@
-{% extends 'base.html.twig' %}
-
-{% block title %}Log in!{% endblock %}
-
-{% block body %}
+{% extends 'base.html.twig' %} {% block title %}Log in!{% endblock %} {% block
+body %}
+<style>
+    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="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="login">
     <form method="post">
         {% if error %}
-            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
+        <div class="alert alert-danger">
+            {{ error.messageKey|trans(error.messageData, 'security') }}
+        </div>
+        {% endif %} {% if app.user %}
+        <div class="mb-3">
+            You are logged in as {{ app.user.userIdentifier }},
+            <a href="{{ path('app_logout') }}">Logout</a>
+        </div>
         {% endif %}
 
-        {% if app.user %}
-            <div class="mb-3">
-                You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
-            </div>
-        {% endif %}
-
-        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+        <h2>Login</h2>
         <label for="username">Username</label>
-        <input type="text" value="{{ last_username }}" name="username" id="username" class="form-control" autocomplete="username" required autofocus>
+        <input
+            type="text"
+            value="{{ last_username }}"
+            name="username"
+            id="username"
+            class="form-control"
+            autocomplete="username"
+            placeholder="Username"
+            required
+            autofocus
+        />
         <label for="password">Password</label>
-        <input type="password" name="password" id="password" class="form-control" autocomplete="current-password" required>
+        <input
+            type="password"
+            name="password"
+            id="password"
+            class="form-control"
+            autocomplete="current-password"
+            placeholder="Password"
+            required
+        />
 
-        <input type="hidden" name="_csrf_token"
-               value="{{ csrf_token('authenticate') }}"
-        >
+        <input
+            type="hidden"
+            name="_csrf_token"
+            value="{{ csrf_token('authenticate') }}"
+        />
 
-        {#
-            Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
-            See https://symfony.com/doc/current/security/remember_me.html
+        {# Uncomment this section and add a remember_me option below your
+        firewall to activate remember me functionality. See
+        https://symfony.com/doc/current/security/remember_me.html
 
-            <div class="checkbox mb-3">
-                <label>
-                    <input type="checkbox" name="_remember_me"> Remember me
-                </label>
-            </div>
+        <div class="checkbox mb-3">
+            <label>
+                <input type="checkbox" name="_remember_me" /> Remember me
+            </label>
+        </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 %}
