diff --git a/assets/styles/app.css b/assets/styles/app.css
index f52a8ac..d42a065 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -4,4 +4,33 @@
 
 body {
     background-color: skyblue;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
+
+html, body {
+    height: 100%; /* S'assurer que la hauteur de la page prend tout l'espace disponible */
+    margin: 0;
+}
+
+main {
+    flex-grow: 1; /* Permet au contenu principal de prendre l'espace restant */
+}
+
+footer {
+    background-color: #f8f9fa;
+    padding: 20px;
+    text-align: center;
+}
+
+.star {
+    cursor: pointer;
+    font-size: 2rem;
+    color: lightgray;
+    transition: color 0.3s;
+}
+
+.star.text-yellow-500 {
+    color: gold;
+}
\ No newline at end of file
diff --git a/src/Controller/MainController.php b/src/Controller/MainController.php
new file mode 100644
index 0000000..878d088
--- /dev/null
+++ b/src/Controller/MainController.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class MainController extends AbstractController
+{
+    #[Route('/', name: 'home')]
+    public function index(): Response
+    {
+        return $this->render('main/index.html.twig');
+    }
+}
diff --git a/templates/main/base.html.twig b/templates/main/base.html.twig
new file mode 100644
index 0000000..0980fde
--- /dev/null
+++ b/templates/main/base.html.twig
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Sortie</title>
+    {% block stylesheets %}
+        {{ encore_entry_link_tags('app') }}
+    {% endblock %}
+</head>
+
+<body>
+<header>
+    {% include 'main/header.html.twig' %}
+</header>
+<main>
+    {% for label, messages in app.flashes %}
+        {% for message in messages %}
+            {% if label == 'success' %}
+                <div class="p-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 text-center" role="alert">
+                    <span class="font-medium">
+                        {{ message }}
+                    </span>
+                </div>
+            {% endif %}
+            {% if label == 'error' %}
+                <div class="p-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 text-center" role="alert">
+                    <span class="font-medium">
+                        {{ message }}
+                    </span>
+                </div>
+            {% endif %}
+            {% if label == 'warning' %}
+                <div class="p-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400 text-center" role="alert">
+                    <span class="font-medium">
+                        {{ message }}
+                    </span>
+                </div>
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+    {% block content %}
+    {% endblock %}
+</main>
+<footer>
+    {% include 'main/footer.html.twig' %}
+</footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/main/footer.html.twig b/templates/main/footer.html.twig
new file mode 100644
index 0000000..12a68af
--- /dev/null
+++ b/templates/main/footer.html.twig
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Sortie</title>
+    {% block stylesheets %}
+        {{ encore_entry_link_tags('app') }}
+    {% endblock %}
+</head>
+
+<body>
+<div class="bg-gray-100 flex items-center justify-center">
+    &copy; Sortie {{ "now"|date("Y") }}
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/main/header.html.twig b/templates/main/header.html.twig
new file mode 100644
index 0000000..1fc566d
--- /dev/null
+++ b/templates/main/header.html.twig
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Sortie</title>
+    {% block stylesheets %}
+        {{ encore_entry_link_tags('app') }}
+    {% endblock %}
+</head>
+
+<body>
+<div class="mx-auto">
+    <nav class="flex justify-between items-center py-4 bg-gray-100 shadow-md">
+        <!-- Titre + Logo -->
+        <a href="/">
+            <div class="flex items-center space-x-3 pl-4">
+                <h3 class="text-2xl font-bold">Sortie</h3>
+                <img src="{{ asset('img/logo.png') }}" alt="Logo" class="h-10">
+            </div>
+        </a>
+        <!-- Liens de navigation -->
+        <div class="relative">
+            <button id="menu-button" class="p-2 pr-4 text-gray-700 font-bold hover:text-blue-500 focus:outline-none">
+                <img alt="burger-menu" src="{{ asset('img/burger-bar.png') }}">
+            </button>
+            <ul id="navbar" class="hidden absolute top-12 right-0 w-48 bg-white shadow-md p-4 flex-col space-y-4">
+                <li><a href="/" class="text-gray-700 font-bold hover:text-blue-500">Accueil</a></li>
+                <li><a href="/" class="text-gray-700 font-bold hover:text-blue-500">Sortie</a></li>
+                <li><a href="/" class="text-gray-700 font-bold hover:text-blue-500">ToDo</a></li>
+                <li><a href="/" class="text-gray-700 font-bold hover:text-blue-500">À propos</a></li>
+                {#        <li><a href="#Contact" class="text-gray-700 font-bold hover:text-blue-500">Contact</a></li>#}
+{#                {% if app.user %}#}
+{#                    <li><a href="{{ path('auth_logout') }}" class="text-gray-700 font-bold hover:text-blue-500">Se déconnecter</a></li>#}
+{#                {% else %}#}
+{#                    <li><a href="{{ path('auth_register') }}" class="text-gray-700 font-bold hover:text-blue-500">S'inscrire</a></li>#}
+{#                    <li><a href="{{ path('auth_login') }}" class="text-gray-700 font-bold hover:text-blue-500">Se connecter</a></li>#}
+{#                {% endif %}#}
+            </ul>
+        </div>
+    </nav>
+</div>
+</body>
+
+<script>
+    document.getElementById('menu-button').addEventListener('click', function () {
+        const navbar = document.getElementById('navbar');
+        navbar.classList.toggle('hidden');
+    });
+</script>
+
+</html>
\ No newline at end of file
diff --git a/templates/main/index.html.twig b/templates/main/index.html.twig
new file mode 100644
index 0000000..272aa1d
--- /dev/null
+++ b/templates/main/index.html.twig
@@ -0,0 +1,23 @@
+{% extends 'main/base.html.twig' %}
+{% block head %}
+    <head>
+        <meta charset="UTF-8">
+        <title>Sortie</title>
+        {% block stylesheets %}
+            {{ encore_entry_link_tags('app') }}
+        {% endblock %}
+    </head>
+{% endblock %}
+
+{%block content %}
+    <div class="flex justify-center items-center py-52">
+        <div class="bg-white shadow-lg rounded-lg p-8 max-w-md text-center">
+            <img src="{{ asset('img/logo-512.png') }}" alt="Logo" class="h-28 mx-auto mb-4">
+            <h3 class="text-2xl font-bold text-center pb-3">Créer une nouvelle sortie</h3>
+            <p class="text-gray-700 text-justify mb-4">Vous pouvez créer une liste de voeux facilement depuis mon application web ! Cliquer sur le bouton juste en dessous pour continuer</p>
+                <div class="flex flex-row justify-between">
+                    <p>test</p>
+                </div>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file
