diff --git a/templates/base.html.twig b/templates/base.html.twig
index 0fb4771..c4caf14 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="" class="h-full">
 <head>
     <meta charset="UTF-8">
     <title>{% block title %}Mangarr{% endblock %}</title>
@@ -12,10 +12,9 @@
         {{ encore_entry_script_tags('app') }}
     {% endblock %}
 </head>
-<body class="bg-gray-50 h-screen overflow-hidden">
-<div data-controller="mercure"
-     data-mercure-topic="notification">
-</div>
+<body class="bg-gray-50 h-full overflow-hidden">
+<div data-controller="mercure" data-mercure-topic="notification"></div>
+
 <div data-controller="alert" class="fixed right-0 z-50 flex justify-center w-full">
     <div data-alert-target="alert" style="display: none;"
          class="mt-8 max-w-fit p-4 rounded-lg shadow-lg text-white border-2 border-gray-200 transition-opacity duration-1000 ease-out">
@@ -23,49 +22,57 @@
         <span data-alert-target="message"></span>
     </div>
 </div>
-<div class="h-full">
-    <div class="fixed flex flex-row justify-start items-center w-full z-10 bg-green-600 h-16 z-30">
-        <div class="flex justify-center ml-10">
-            <a class="flex flex-row justify-start" href="{{ path('app_manga') }}">
-                {#                <div class="flex items-center"> #}
-                {#                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" #}
-                {#                         x="0px" y="0px" width="50" height="50" viewBox="-40 -90 500 500"> #}
-                {#                        <path cx="100" cy="100" r="150" fill="white" stroke="green" stroke-width="15" #}
-                {#                              d="M448 160A240 240 0 0 1 208 400A240 240 0 0 1 -32 160A240 240 0 0 1 448 160z"/> #}
-                {#                        <g transform="translate(28, -15) scale(0.9)"> #}
-                {#                            <g> #}
-                {#                                <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
-                {#                                      d="M68.955 285.752c45.294 0.882 84.544 7.654 113.51 19.587a4.037 4.037 0 0 0 5.571 -3.73l0.016 -216.52a4.032 4.032 0 0 0 -2.544 -3.749L70.525 35.586a4.032 4.032 0 0 0 -5.525 3.749v242.384a4.032 4.032 0 0 0 3.955 4.034"/> #}
-                {#                                <path style="fill:green; stroke:black; stroke-width:3;" #}
-                {#                                      d="M398.374 74.04a4.048 4.048 0 0 0 -3.565 -0.63l-40.667 12.158a4.032 4.032 0 0 0 -2.88 3.864v209.165s0.181 3.299 -3.293 3.299h-6.592c-32.806 0 -93.773 3.405 -133.496 26.213l-7.883 4.514 -7.883 -4.514c-39.723 -22.806 -100.688 -26.213 -133.496 -26.213H50.208c-1.568 0 -1.472 -1.885 -1.472 -1.883V89.434a4.032 4.032 0 0 0 -2.878 -3.864L5.189 73.411A4.032 4.032 0 0 0 0 77.274V330.336c0 1.138 0.482 2.224 1.325 2.99a4.032 4.032 0 0 0 3.104 1.026c12.086 -1.186 30.984 -2.597 52.363 -2.597 46.957 0 84.691 6.858 109.146 19.837 3.592 1.885 24.422 13.109 34.064 13.109s30.47 -11.224 34.062 -13.109c24.454 -12.979 62.19 -19.837 109.146 -19.837 21.378 0 40.275 1.411 52.362 2.597a4.032 4.032 0 0 0 4.429 -4.014V77.274a4.048 4.048 0 0 0 -1.626 -3.234"/> #}
-                {#                                <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
-                {#                                      d="M213.75 304.962a4.048 4.048 0 0 0 3.782 0.378c28.965 -11.933 68.216 -18.707 113.51 -19.587a4.032 4.032 0 0 0 3.957 -4.032V39.334a4.032 4.032 0 0 0 -5.525 -3.749l-114.986 45.755a4.032 4.032 0 0 0 -2.542 3.749l0.016 216.52a4.032 4.032 0 0 0 1.789 3.352"/> #}
-                {#                            </g> #}
-                {#                        </g> #}
-                {#                    </svg> #}
-                {#                </div> #}
-                <img src="{{ asset('img/mangarr_logo.png') }}" alt="Mangarr" class="w-32 shadow-xl">
-            </a>
-        </div>
-        <div class="ml-8 w-60">
-            <twig:Search/>
-        </div>
+
+<!-- Header -->
+<header class="bg-green-600 h-16 flex items-center fixed w-full z-30">
+    <div class="flex justify-center ml-10">
+        <a class="flex flex-row justify-start" href="{{ path('app_manga') }}">
+            {#                <div class="flex items-center"> #}
+            {#                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" #}
+            {#                         x="0px" y="0px" width="50" height="50" viewBox="-40 -90 500 500"> #}
+            {#                        <path cx="100" cy="100" r="150" fill="white" stroke="green" stroke-width="15" #}
+            {#                              d="M448 160A240 240 0 0 1 208 400A240 240 0 0 1 -32 160A240 240 0 0 1 448 160z"/> #}
+            {#                        <g transform="translate(28, -15) scale(0.9)"> #}
+            {#                            <g> #}
+            {#                                <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
+            {#                                      d="M68.955 285.752c45.294 0.882 84.544 7.654 113.51 19.587a4.037 4.037 0 0 0 5.571 -3.73l0.016 -216.52a4.032 4.032 0 0 0 -2.544 -3.749L70.525 35.586a4.032 4.032 0 0 0 -5.525 3.749v242.384a4.032 4.032 0 0 0 3.955 4.034"/> #}
+            {#                                <path style="fill:green; stroke:black; stroke-width:3;" #}
+            {#                                      d="M398.374 74.04a4.048 4.048 0 0 0 -3.565 -0.63l-40.667 12.158a4.032 4.032 0 0 0 -2.88 3.864v209.165s0.181 3.299 -3.293 3.299h-6.592c-32.806 0 -93.773 3.405 -133.496 26.213l-7.883 4.514 -7.883 -4.514c-39.723 -22.806 -100.688 -26.213 -133.496 -26.213H50.208c-1.568 0 -1.472 -1.885 -1.472 -1.883V89.434a4.032 4.032 0 0 0 -2.878 -3.864L5.189 73.411A4.032 4.032 0 0 0 0 77.274V330.336c0 1.138 0.482 2.224 1.325 2.99a4.032 4.032 0 0 0 3.104 1.026c12.086 -1.186 30.984 -2.597 52.363 -2.597 46.957 0 84.691 6.858 109.146 19.837 3.592 1.885 24.422 13.109 34.064 13.109s30.47 -11.224 34.062 -13.109c24.454 -12.979 62.19 -19.837 109.146 -19.837 21.378 0 40.275 1.411 52.362 2.597a4.032 4.032 0 0 0 4.429 -4.014V77.274a4.048 4.048 0 0 0 -1.626 -3.234"/> #}
+            {#                                <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
+            {#                                      d="M213.75 304.962a4.048 4.048 0 0 0 3.782 0.378c28.965 -11.933 68.216 -18.707 113.51 -19.587a4.032 4.032 0 0 0 3.957 -4.032V39.334a4.032 4.032 0 0 0 -5.525 -3.749l-114.986 45.755a4.032 4.032 0 0 0 -2.542 3.749l0.016 216.52a4.032 4.032 0 0 0 1.789 3.352"/> #}
+            {#                            </g> #}
+            {#                        </g> #}
+            {#                    </svg> #}
+            {#                </div> #}
+            <img src="{{ asset('img/mangarr_logo.png') }}" alt="Mangarr" class="w-32 shadow-xl">
+        </a>
     </div>
-    {#    <div class="pt-16 flex bg-white"> #}
-    <div class="fixed left-0 h-full mt-16">
+    <div class="ml-8 w-60">
+        <twig:Search/>
+    </div>
+</header>
+
+<!-- Main content area -->
+<div class="flex h-full pt-16">
+    <!-- Sidebar -->
+    <nav class="w-60 bg-white h-full overflow-y-auto fixed left-0">
         {% include 'menu/menu.html.twig' %}
-    </div>
-    <div class="flex flex-col ml-60 overflow-y-auto h-full">
-        <div class="fixed w-full overflow-hidden top-16 z-20">
+    </nav>
+
+    <!-- Main content -->
+    <main class="flex-1 flex flex-col overflow-hidden ml-60 w-full">
+        <!-- Toolbar -->
+        <div class="bg-white shadow z-20 w-full">
             {% block toolbar %}
             {% endblock %}
         </div>
-        <div class="z-10 bg-gray-50 mt-36">
+
+        <!-- Scrollable content -->
+        <div class="flex-1 overflow-y-auto bg-gray-50 w-full">
             {% block body %}
             {% endblock %}
         </div>
-    </div>
-    {#    </div> #}
+    </main>
 </div>
 </body>
 </html>
diff --git a/templates/menu/menu.html.twig b/templates/menu/menu.html.twig
index 38cce6d..edc8d33 100644
--- a/templates/menu/menu.html.twig
+++ b/templates/menu/menu.html.twig
@@ -1,48 +1,44 @@
-<div id="menu" class="h-full w-60 bg-gray-600 text-white hidden md:block">
-    <aside class="h-full">
-        <nav>
-            <ul>
-                <li class="mb-4 border-l-4 border-green-600">
-                    <div class="pl-8 p-4 items-center text-green-600 bg-gray-800">
-                        <a class="flex items-center" href="{{ path('app_manga') }}">
-                            <i class="fas fa-book mr-2"></i>
-                            <span>Mangas</span>
-                        </a>
-                    </div>
-                    <ul class="ml-14 mt-2 space-y-4">
-                        <li><a href="{{ path('add_new_manga') }}" class="hover:text-green-600">Ajouter un nouveau</a>
-                        </li>
-                        <li><a href="#" class="hover:text-green-600">Import bibliothèque</a></li>
-                        <li><a href="#" class="hover:text-green-600">Collections</a></li>
-                        <li><a href="#" class="hover:text-green-600">Découvrir</a></li>
-                    </ul>
-                </li>
-                <li class="mb-4 pl-8 flex items-center hover:text-green-600">
-                    <i class="fas fa-calendar-alt mr-2"></i>
-                    <span>Calendrier</span>
-                </li>
-                <li class="mb-4 pl-8 hover:text-green-600">
-                    <a href="{{ path('app_activity') }}">
-                        <div data-controller="activity" class="flex flew-row justify-between">
-                            <div class="flex flex-row">
-                                <i class="fas fa-clock mr-2"></i>
-                                <span>Activité</span>
-                            </div>
-{#                            TODO le texte doit être blanc au survol #}
-                            <span data-activity-target="activity"
-                                  class="bg-green-500 rounded px-2 mr-4 hover:text-white hidden"></span>
-                        </div>
+<div id="menu" class="h-full w-full bg-gray-600 text-white overflow-y-auto">
+    <nav>
+        <ul>
+            <li class="mb-4 border-l-4 border-green-600">
+                <div class="pl-4 p-4 items-center text-green-600 bg-gray-800">
+                    <a class="flex items-center" href="{{ path('app_manga') }}">
+                        <i class="fas fa-book mr-2"></i>
+                        <span>Mangas</span>
                     </a>
-                </li>
-                <li class="mb-4 pl-8 flex items-center hover:text-green-600">
-                    <i class="fas fa-cog mr-2"></i>
-                    <span>Paramètres</span>
-                </li>
-                <li class="mb-4 pl-8 flex items-center hover:text-green-600">
-                    <i class="fas fa-desktop mr-2"></i>
-                    <span>Système</span>
-                </li>
-            </ul>
-        </nav>
-    </aside>
+                </div>
+                <ul class="ml-8 mt-2 space-y-4">
+                    <li><a href="{{ path('add_new_manga') }}" class="hover:text-green-600">Ajouter un nouveau</a></li>
+                    <li><a href="{{ path('app_import') }}" class="hover:text-green-600">Import bibliothèque</a></li>
+                    <li><a href="#" class="hover:text-green-600">Collections</a></li>
+                    <li><a href="#" class="hover:text-green-600">Découvrir</a></li>
+                </ul>
+            </li>
+            <li class="mb-4 pl-4 flex items-center hover:text-green-600">
+                <i class="fas fa-calendar-alt mr-2"></i>
+                <span>Calendrier</span>
+            </li>
+            <li class="mb-4 pl-4 hover:text-green-600">
+                <a href="{{ path('app_activity') }}">
+                    <div data-controller="activity" class="flex flex-row justify-between items-center">
+                        <div class="flex flex-row items-center">
+                            <i class="fas fa-clock mr-2"></i>
+                            <span>Activité</span>
+                        </div>
+                        <span data-activity-target="activity"
+                              class="bg-green-500 rounded px-2 mr-2 hover:text-white hidden"></span>
+                    </div>
+                </a>
+            </li>
+            <li class="mb-4 pl-4 flex items-center hover:text-green-600">
+                <i class="fas fa-cog mr-2"></i>
+                <span>Paramètres</span>
+            </li>
+            <li class="mb-4 pl-4 flex items-center hover:text-green-600">
+                <i class="fas fa-desktop mr-2"></i>
+                <span>Système</span>
+            </li>
+        </ul>
+    </nav>
 </div>
