diff --git a/assets/app.js b/assets/app.js
index b6aa815..bc24b10 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -21,3 +21,4 @@ import './js/hoverable-collapse.js';
 import './js/cookies.js';
 import 'choices.js';
 import 'quill'
+import 'tabulator-tables'
diff --git a/assets/controllers/organization_controller.js b/assets/controllers/organization_controller.js
new file mode 100644
index 0000000..fae9cf4
--- /dev/null
+++ b/assets/controllers/organization_controller.js
@@ -0,0 +1,49 @@
+import {Controller} from '@hotwired/stimulus'
+import {TabulatorFull as Tabulator} from "tabulator-tables";
+
+export default class extends Controller {
+    static values = {data: String, aws: String};
+
+    connect() {
+
+        this.table = new Tabulator("#tabulator-org", {
+            data: JSON.parse(this.dataValue), layout: "fitColumns", columns: [
+                {
+                    title: "Logo", field: "logoUrl", formatter: "image",
+                    width: 100,
+                    formatterParams: {height: "50px", width: "50px", urlPrefix: this.awsValue, urlSuffix: ""},
+                },
+                {title: "Nom", field: "name", headerFilter: "input"},
+                {title: "Email", field: "email", headerFilter: "input"},
+                {
+                    title: "Actions",
+                    field: "showUrl",
+                    hozAlign: "center",
+                    width: 80,
+                    headerSort: false,
+                    formatter: (cell) => {
+                        const url = cell.getValue();
+                        if (url) {
+                            return `
+                <a href="${url}" class="p-3 align-middle color-primary" title="Voir">
+                    <svg xmlns="http://www.w3.org/2000/svg" 
+                    width="30px" 
+                    height="30px" 
+                    viewBox="0 0 576 512">
+                    <path fill="currentColor" 
+                    d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256C63 286 89.6 328.5 128 364.3c41.2 38.1 94.8 67.7 160 67.7s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80M95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6M288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80h-2c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2v2c0 44.2 35.8 80 80 80m0-208a128 128 0 1 1 0 256a128 128 0 1 1 0-256"/></svg>
+                </a>
+            `;
+                        }
+                        return '';
+                    }
+                }]
+        });
+    }
+
+    disconnect() {
+        if (this.table) {
+            this.table.destroy();
+        }
+    }
+}
\ No newline at end of file
diff --git a/assets/styles/tabulator.css b/assets/styles/tabulator.css
new file mode 100644
index 0000000..48a29c1
--- /dev/null
+++ b/assets/styles/tabulator.css
@@ -0,0 +1,52 @@
+
+/* Remove outer table border */
+.tabulator {
+    border: none !important;
+}
+
+/* Remove header and row cell borders */
+.tabulator-header,
+.tabulator-header .tabulator-col,
+.tabulator-tableholder,
+.tabulator-table,
+.tabulator-row,
+.tabulator-row .tabulator-cell {
+    border: none !important;
+}
+
+/* Remove column header bottom border and row separators */
+.tabulator-header {
+    border-bottom: none !important;
+    background-color: transparent !important;
+    /*border-top-left-radius: 25%;*/
+    /*border-top-right-radius: 25%;*/
+}
+.tabulator-row {
+    border-bottom: none !important;
+    background-color: transparent !important;
+}
+
+/* Remove look on hover/selected without borders */
+.tabulator-row:hover {
+    box-shadow: none !important;
+}
+.tabulator-row.tabulator-selected {
+    box-shadow: none !important;
+}
+
+.tabulator-row.tabulator-row-odd {
+    background-color: transparent !important;
+}
+
+/* Rounded border for images in cells */
+.tabulator-cell img {
+    border-radius: 50%;
+    object-fit: cover;
+}
+/* Scope to this table only */
+.tabulator,
+ .tabulator-header,
+ .tabulator-header .tabulator-header-contents,
+ .tabulator-header .tabulator-col{
+    background: none !important;
+}
diff --git a/src/Controller/OrganizationController.php b/src/Controller/OrganizationController.php
index 675d9bd..33a8a5b 100644
--- a/src/Controller/OrganizationController.php
+++ b/src/Controller/OrganizationController.php
@@ -39,8 +39,21 @@ class OrganizationController extends AbstractController
     {
         $this->denyAccessUnlessGranted('ROLE_ADMIN');
         $user = $this->userService->getUserByIdentifier($this->getUser()->getUserIdentifier());
+
         if ($this->isGranted("ROLE_SUPER_ADMIN")) {
-            $organizations = $this->entityManager->getRepository(Organizations::class)->findBy([ 'isDeleted' => false ]);
+            $organizations = $this->entityManager->getRepository(Organizations::class)->findBy(['isDeleted' => false]);
+
+            // Map the entities for tabulator
+            $organizationsData = array_map(function($org) {
+                return [
+                    'id' => $org->getId(),
+                    'name' => $org->getName(),
+                    'email' => $org->getEmail(),
+                    'logoUrl' => $org->getLogoUrl() ? $org->getLogoUrl() : null, // or prepend base URL if needed
+                    'active' => $org->isActive(),
+                    'showUrl' => $this->generateUrl('organization_show', ['id' => $org->getId()]),
+                ];
+            }, $organizations);
         } else {
             //get all the UO of the user
             $uos = $this->entityManager->getRepository(UsersOrganizations::class)->findBy(['users' => $user]);
@@ -57,9 +70,8 @@ class OrganizationController extends AbstractController
             }
 
         }
-
         return $this->render('organization/index.html.twig', [
-            'organizations' => $organizations,
+            'organizationsData' => $organizationsData,
         ]);
     }
 
diff --git a/templates/organization/index.html.twig b/templates/organization/index.html.twig
index 560c999..6ff1ab3 100644
--- a/templates/organization/index.html.twig
+++ b/templates/organization/index.html.twig
@@ -10,7 +10,7 @@
                 <a href="{{ path('organization_new') }}" class="btn btn-primary">Ajouter une organisation</a>
             {% endif %}
         </div>
-        {% if organizations|length == 0 %}
+        {% if organizationsData|length == 0 %}
             <tr>
                 <td colspan="4" class="text-center">Aucune organisation trouvée.</td>
                 <td colspan="4" class="text-center">
@@ -18,44 +18,14 @@
                 </td>
             </tr>
         {% else %}
-            <table class="table align-middle shadow">
-                <thead class="table-light shadow-sm">
-                <tr>
-                    <th>Logo</th>
-                    <th>Nom</th>
-                    <th>Email</th>
-                    <th>Visualiser</th>
-                    <th>Status</th>
-                </tr>
-                </thead>
-                <tbody>
-                {% for organization in organizations %}
-                    <tr>
-                        <td>
-                            {% if organization.logoUrl %}
-                                <img src="{{ aws_url ~ organization.logoUrl }}" alt="Organization logo"
-                                     class="rounded-circle" style="width:40px; height:40px;">
-                            {% endif %}
-                        </td>
-                        <td>{{ organization.name }}</td>
-                        <td>{{ organization.email }}</td>
-                        <td>
-                            {% if organization.active %}
-                                <span class="badge bg-success">Active</span>
-                            {% else %}
-                                <span class="badge bg-danger">Inactive</span>
-                            {% endif %}
-                        </td>
-                        <td>
-                            <a href="{{ path('organization_show', {'id': organization.id}) }}"
-                               class="p-3 align-middle color-primary">
-                                {{ ux_icon('fa6-regular:eye', {height: '30px', width: '30px'}) }}
-                            </a>
-                        </td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-            </table>
+            <div class="card">
+                <div class="card-body">
+                    <div id="tabulator-org" data-controller="organization"
+                         data-organization-data-value="{{ organizationsData|json_encode(constant("JSON_UNESCAPED_UNICODE"))|e("html_attr") }}"
+                         data-organization-aws-value="{{ aws_url }}"></div>
+                </div>
+            </div>
+
         {% endif %}
 
     </div>