diff --git a/assets/scripts/scripts.js b/assets/scripts/scripts.js
new file mode 100644
index 0000000..599fcb7
--- /dev/null
+++ b/assets/scripts/scripts.js
@@ -0,0 +1,17 @@
+// public/js/scripts.js
+
+function openPopup() {
+    document.getElementById("followPopup").style.display = "block";
+}
+
+function closePopup() {
+    document.getElementById("followPopup").style.display = "none";
+}
+
+// Close the popup if the user clicks outside of it
+window.onclick = function(event) {
+    var popup = document.getElementById("followPopup");
+    if (event.target == popup) {
+        popup.style.display = "none";
+    }
+}
diff --git a/assets/styles/app.css b/assets/styles/app.css
index dd6181a..0238c29 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,3 +1,104 @@
 body {
-    background-color: skyblue;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    color: #1a2c4c;
+}
+
+.profile-container {
+    background-color: #fff;
+    border: 1px solid #5c5d7f;
+    border-radius: 8px;
+    max-width: 600px;
+    margin: 20px auto;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.profile-header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #5c5d7f;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+}
+
+.profile-image {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+    margin-right: 20px;
+}
+
+.profile-info {
+    flex-grow: 1;
+}
+
+.profile-info h1 {
+    font-size: 24px;
+    margin: 0;
+    color: #1a2c4c;
+}
+
+.profile-info p {
+    margin: 5px 0;
+    color: #38476b;
+}
+
+.follow-button {
+    background-color: #38476b;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+}
+
+.follow-button:hover {
+    background-color: #5c5d7f;
+}
+
+
+/* public/css/styles.css */
+
+/* Ajoutez les styles existants ici */
+
+.popup {
+    display: none; /* Hidden by default */
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+.popup-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 400px;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
 }
diff --git a/config/routes.yaml b/config/routes.yaml
index 41ef814..3f8c5a6 100644
--- a/config/routes.yaml
+++ b/config/routes.yaml
@@ -3,3 +3,6 @@ controllers:
         path: ../src/Controller/
         namespace: App\Controller
     type: attribute
+profile_follow:
+    path: /profil/{id}/follow
+    controller: App\Controller\ProfileController::follow
diff --git a/public/images/userFiller.png b/public/images/userFiller.png
new file mode 100644
index 0000000..7b5068c
Binary files /dev/null and b/public/images/userFiller.png differ
diff --git a/src/Controller/ProfilController.php b/src/Controller/ProfilController.php
index 5b5250e..2322baa 100644
--- a/src/Controller/ProfilController.php
+++ b/src/Controller/ProfilController.php
@@ -10,25 +10,42 @@ use Symfony\Component\Routing\Attribute\Route;
 
 class ProfilController extends AbstractController
 {
+    private Profil $curentUser;
 
-    public function __construct(private EntityManager $mgr) {}
+    public function __construct(private EntityManager $mgr)
+    {
+    }
 
-    #[Route('/profil/{id}',requirements: ['page' => '\d+'])]
-    public function profil(int $id): Response    
-    {   
-        $profil = $this->mgr->find(Profil::class,$id);
+    #[Route('/profil/{id}', requirements: ['page' => '\d+'])]
+    public function profil(int $id): Response
+    {
+        $profil = $this->mgr->find(Profil::class, $id);
         return $this->render('profil/index.html.twig', [
             'profil' => $profil
         ]);
     }
 
-    #[Route('/profil/{id}/follow',requirements: ['page' => '\d+'])]
-    public function followProfil(int $id): Response    
-    {   
+    #[Route('/profil/{id}/follow', requirements: ['page' => '\d+'])]
+    public function followProfil(int $id): Response
+    {
+        $profil = $this->mgr->find(Profil::class, $id);
+        if ($profil instanceof Profil) {
+            $this->curentUser->addFollowing($profil);
+            return $this->render('profil/index.html.twig', [
+            ]);
+        } else {
+            return $this->render('error.html.twig', []);
+        }
         // $profil = $this->mgr->find(Profil::class,$id);
-        return $this->render('profil/index.html.twig', [
-            // 'profil' => $profil
-        ]);
+        // 'profil' => $profil
+    }
+
+    #[Route('/profil/new', name: 'profil_new')]
+    public function new(): Response
+    {
+        $profil = new Profil();
+
+        return $this->redirectToRoute('profil_show', ['id' => $profil->getId()]);
     }
 
 
diff --git a/templates/error.html.twig b/templates/error.html.twig
new file mode 100644
index 0000000..3cd56e1
--- /dev/null
+++ b/templates/error.html.twig
@@ -0,0 +1,56 @@
+<!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>Something went wrong</h1>
+        <p>We're sorry, but something went wrong. Please try again later.</p>
+        {# <a href="{{ path('homepage') }}">Go to Homepage</a> #}
+    </div>
+</body>
+</html>
diff --git a/templates/profil/followed.html.twig b/templates/profil/followed.html.twig
new file mode 100644
index 0000000..e69de29
diff --git a/templates/profil/index.html.twig b/templates/profil/index.html.twig
index 9056ea7..834c16f 100644
--- a/templates/profil/index.html.twig
+++ b/templates/profil/index.html.twig
@@ -4,8 +4,34 @@
 
 {% block title %}Profil - {{ profil.name }}{% endblock %}
 
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
+{% endblock %}
+
 {% block body %}
-    <h1>Profil: {{ profil.name }}</h1>
-    <p>ID: {{ profil.id }}</p>
-    <p>Description: {{ profil.description }}</p>
-{% endblock %}
\ No newline at end of file
+    <div class="profile-container">
+        <div class="profile-header">
+            <img src="{{ asset('images/userFiller.png') }}" alt="Profile Image" class="profile-image">
+            <div class="profile-info">
+                <h1>{{ profil.name }}</h1>
+                <p>ID: {{ profil.id }}</p>
+                <p>Description: {{ profil.description }}</p>
+            </div>
+        </div>
+        <button class="follow-button" onclick="openPopup()">Follow</button>
+    </div>
+
+    <!-- Pop-up Modal -->
+    <div id="followPopup" class="popup">
+        <div class="popup-content">
+            <span class="close" onclick="closePopup()">&times;</span>
+            <p>Are you sure you want to follow {{ profil.name }}?</p>
+            <a href="{{ path('profile_follow', {id: profil.id}) }}" class="follow-button">Yes</a>
+            <button class="follow-button" onclick="closePopup()">No</button>
+        </div>
+    </div>
+{% endblock %}
+
+{% block javascripts %}
+    <script src="{{ asset('scripts/scripts.js') }}"></script>
+{% endblock %}