diff --git a/Thomy Noel/liste.html b/Thomy Noel/liste.html
index 7188402..ceb8fca 100644
--- a/Thomy Noel/liste.html	
+++ b/Thomy Noel/liste.html	
@@ -7,6 +7,9 @@
     <link rel="stylesheet" href="style.css">
     <!--Lien bootstrap-->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <!--DataTable-->
+    
+    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css" />
 </head>
 <body>
     <nav id="navig" class="navbar navbar-expand-lg bg-body-tertiary">
@@ -49,7 +52,7 @@
       </div>
       <h1>Listes des étudiants</h1>
       <div class="Liste">
-        <table class="table">
+        <table class="table" id="maTable">
             <thead>
               <tr>
                 <th scope="col">#</th>
@@ -105,5 +108,12 @@
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
         <!--Jquery-->
         <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+        <!--DataBase-->
+        <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
+        <script>
+        $(document).ready( function () {
+            $('#maTable').DataTable();
+        } );
+        </script>
 </body>
 </html>
diff --git a/Thomy Noel/style.css b/Thomy Noel/style.css
index 663bd58..48dd444 100644
--- a/Thomy Noel/style.css	
+++ b/Thomy Noel/style.css	
@@ -30,7 +30,7 @@ a{
     border-radius: 10px;
 }
 .Liste{
-    width: 50%;
+    width: 60%;
     margin: 64px auto;
 }
 .header{
