diff --git a/config/packages/framework.yaml b/config/packages/framework.yaml
index 877eb25..0ab00de 100644
--- a/config/packages/framework.yaml
+++ b/config/packages/framework.yaml
@@ -2,6 +2,7 @@
 framework:
     secret: '%env(APP_SECRET)%'
     #csrf_protection: true
+    # error_controller: App\Controller\ErrorController::show
 
     # Note that the session will be started ONLY if you read or write from it.
     session: true
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index 90391cb..897e824 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -1,6 +1,7 @@
 twig:
     file_name_pattern: '*.twig'
     form_themes: ['form_div_layout.html.twig']
+    
 
 when@test:
     twig:
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 828ae1b..212a731 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -8,12 +8,22 @@
         <link rel="stylesheet" href="{{ asset('styles/app.css')}}">
 
         {% block stylesheets %}
+        <style>
+            .body-container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-height: 80vh;
+                padding: 20px;
+                background-color: #f0f0f0;
+            }
+        </style>
         {% endblock %}
 
         {% block javascripts %}
         {% endblock %}
     </head>
-    <body>
+    <body >
         <header class="{{ nightmare|default('') }}">
             <nav>
                 <div class="nav-links">
@@ -34,6 +44,8 @@
                 </div>
             </nav>
         </header>
-        {% block body %}{% endblock %}
+         <div class="body-container">
+            {% block body %}{% endblock %}
+        </div>
         <button class="floating-button" onclick="location.href='/post/new'">+</button>
 </html>
diff --git a/templates/error.html.twig b/templates/bundles/TwigBundle/Exception/error.html.twig
similarity index 92%
rename from templates/error.html.twig
rename to templates/bundles/TwigBundle/Exception/error.html.twig
index 3cd56e1..ea42d04 100644
--- a/templates/error.html.twig
+++ b/templates/bundles/TwigBundle/Exception/error.html.twig
@@ -1,4 +1,9 @@
-<!DOCTYPE html>
+{% extends 'base.html.twig' %}
+
+{% block title %}Page non trouvée{% endblock %}
+
+{% block body %}
+    <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -54,3 +59,5 @@
     </div>
 </body>
 </html>
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/bundles/TwigBundle/Exception/error404.html.twig b/templates/bundles/TwigBundle/Exception/error404.html.twig
new file mode 100644
index 0000000..fb16639
--- /dev/null
+++ b/templates/bundles/TwigBundle/Exception/error404.html.twig
@@ -0,0 +1,64 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Page non trouvée{% endblock %}
+
+{% block body %}
+    <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Error</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #1a2c4c; /* Big Stone */
+            color: #bda3b6; /* Lily */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .error-container {
+            text-align: center;
+            border: 1px solid #38476b; /* Rhino */
+            background-color: #5c5d7f; /* Comet */
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .error-container h1 {
+            font-size: 48px;
+            margin: 0;
+            color: #928ba2; /* Manatee */
+        }
+        .error-container p {
+            font-size: 18px;
+            margin: 10px 0 20px;
+        }
+        .error-container a {
+            text-decoration: none;
+            color: #1a2c4c; /* Big Stone */
+            font-weight: bold;
+            border: 1px solid #1a2c4c; /* Big Stone */
+            padding: 10px 20px;
+            border-radius: 5px;
+            background-color: #bda3b6; /* Lily */
+        }
+        .error-container a:hover {
+            background-color: #928ba2; /* Manatee */
+        }
+    </style>
+</head>
+<body>
+    <div class="error-container">
+        <h1>Page Not Found</h1>
+        <h2>Error 404 </h2>
+        <p>We're sorry, but something went wrong. Please try again later.</p>
+        {# <a href="{{ path('homepage') }}">Go to Homepage</a> #}
+    </div>
+</body>
+</html>
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/registration/register.html.twig b/templates/registration/register.html.twig
index f192814..85f079f 100644
--- a/templates/registration/register.html.twig
+++ b/templates/registration/register.html.twig
@@ -3,21 +3,68 @@
 {% block title %}Register{% endblock %}
 
 {% block stylesheets %}
-<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
+    <style>
+
+
+        .form-container {
+            background-color: #ffffff;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 400px;
+            text-align: center;
+        }
+
+        .form-container h1 {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-container .btn {
+            margin-top: 1rem;
+            width: 100%;
+            padding: 0.5rem;
+            border: none;
+            background-color: #007bff;
+            color: #ffffff;
+            border-radius: 4px;
+            cursor: pointer;
+            
+        }
+
+        .form-container .btn:hover {
+            background-color: #0056b3;
+        }
+
+        .form-container a {
+            display: block;
+            margin-top: 1rem;
+            color: #007bff;
+            text-decoration: none;
+        }
+
+        .form-container a:hover {
+            text-decoration: underline;
+        }
+    </style>
 {% endblock %}
 
 {% block body %}
-    <h1>Register</h1>
+    <div class="form-container" >
+        <h1>Register</h1>
+
+        {{ form_errors(registrationForm) }}
 
-    {{ form_errors(registrationForm) }}
+        {{ form_start(registrationForm) }}
+            {{ form_row(registrationForm.name) }}
+            {{ form_row(registrationForm.plainPassword, {
+                label: 'Password'
+            }) }}
+            {{ form_row(registrationForm.agreeTerms) }}
 
-    {{ form_start(registrationForm) }}
-        {{ form_row(registrationForm.name) }}
-        {{ form_row(registrationForm.plainPassword, {
-            label: 'Password'
-        }) }}
-        {{ form_row(registrationForm.agreeTerms) }}
+            <button type="submit" class="btn">Register</button>
+        {{ form_end(registrationForm) }}
 
-        <button type="submit" class="btn">Register</button>
-    {{ form_end(registrationForm) }}
+        <a href="/login"> or Login </a>
+    </div>
 {% endblock %}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index 0924fe2..c2ba957 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -3,46 +3,86 @@
 {% block title %}Log in!{% endblock %}
 
 {% block stylesheets %}
-<link rel="stylesheet" href="{{ asset ('styles/app.css')}}">
+    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
+    <style>
+        
+        .form-container {
+            background-color: #ffffff;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 400px;
+            text-align: center;
+        }
+
+        .form-container h1 {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-container .btn {
+            margin-top: 1rem;
+            width: 100%;
+            padding: 0.5rem;
+            border: none;
+            background-color: #007bff;
+            color: #ffffff;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .form-container .btn:hover {
+            background-color: #0056b3;
+        }
+
+        .form-container a {
+            display: block;
+            margin-top: 1rem;
+            color: #007bff;
+            text-decoration: none;
+        }
+
+        .form-container a:hover {
+            text-decoration: underline;
+        }
+    </style>
 {% endblock %}
 
 {% block body %}
-    <form method="post">
-        {% if error %}
-            <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 %}
-
-        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
-        <label for="username">Name</label>
-        <input type="text" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="username" required autofocus>
-        <label for="password">Password</label>
-        <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
-
-        <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
-
-            <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>
-    </form>
-
-    <a href="/register">Or Register</a>
+    <div class="form-container">
+        <form method="post">
+            {% if error %}
+                <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 %}
+
+            <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+            <label for="username">Name</label>
+            <input type="text" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="username" required autofocus>
+            <label for="password">Password</label>
+            <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
+
+            <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
+
+                <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>
+        </form>
+
+        <a href="/register">Or Register</a>
+    </div>
 {% endblock %}
