diff --git a/navbar.php b/navbar.php
index 585b5fb..4d67933 100644
--- a/navbar.php
+++ b/navbar.php
@@ -8,8 +8,7 @@
     <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/starter-template/">
 
     <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@@ -21,8 +20,7 @@
 <body>
     <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
         <a class="navbar-brand" href="/">Ticket System</a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
-            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
 
diff --git a/tickets/modal-assign-ticket.php b/tickets/modal-assign-ticket.php
index 45c926d..f0ea7c5 100644
--- a/tickets/modal-assign-ticket.php
+++ b/tickets/modal-assign-ticket.php
@@ -11,10 +11,11 @@
                 <form id='myForm' action='assign-ticket.php'>
                     <input class="form-control" type="hidden">
                     <div class="form-group">
-                        <label col-md-4 control-label>Zuordnen:*</label>
+                        <label style='margin-left:170px' col-md-4 control-label>Zuordnen:*</label>
                         <div>
-                            <select name="assign" required>
-                                <option value="Babete">Babete</option>
+                            <select class="form-select" style='margin-left:120px' name="assign" required>
+                                <option value="">Bitte Jemanden wählen</option>
+                                <option value="Babette">Babette</option>
                                 <option value="Jessica">Jessica</option>
                                 <option value="Josua">Josua</option>
                                 <option value="Lorenzo">Lorenzo</option>
@@ -26,8 +27,8 @@
                         </div>
                     </div>
                     <input type='hidden' id="dataid" value=''>
-                    <button type='submit' id='submitButton' onclick='submitHandler()' class="btn btn-primary">Zuordnen</button>
-                    <button type="button" class="btn btn-danger float-right" data-dismiss="modal">Schliessen</button>
+                    <button type="button" class="btn float-right" data-dismiss="modal">Schliessen</button>
+                    <button type='submit' id='submitButton' onclick='submitHandler()' class="btn btn-primary float-right">Zuordnen</button>
                 </form>
                 <script>
                     function submitHandler() {
@@ -43,8 +44,9 @@ function submitHandler() {
     </div>
 </div>
 
+
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
+<script src="https://code.jquery.com/jquery-3.2.1.js">
 </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous">
 </script>
diff --git a/tickets/modal-create-ticket.php b/tickets/modal-create-ticket.php
index 05205ab..1e47077 100644
--- a/tickets/modal-create-ticket.php
+++ b/tickets/modal-create-ticket.php
@@ -26,7 +26,8 @@
                     <div class="form-group">
                         <label col-md-4 control-label>Abteilung:*</label>
                         <div>
-                            <select name="abteilung" id="abteilung" required>
+                            <select class="form-select" name="abteilung" id="abteilung" required>
+                                <option selected value="">Bitte Abteilung auswählen.</option>
                                 <option value="Digital Business">Digital Business</option>
                                 <option value="Liegenschaftsservice">Liegenschaftsservice</option>
                                 <option value="Verwaltung">Verwaltung</option>
diff --git a/tickets/modal-delete-ticket.php b/tickets/modal-delete-ticket.php
index a1d1fb1..d828287 100644
--- a/tickets/modal-delete-ticket.php
+++ b/tickets/modal-delete-ticket.php
@@ -1,5 +1,4 @@
-<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
-    aria-hidden="true">
+<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
@@ -10,14 +9,16 @@
                 <p>Dies kann <strong>nicht</strong> rückgängig gemacht werden!</p>
             </div>
             <div class="modal-footer">
-                <a class="btn btn-danger btn-ok">Delete</a>
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                <a class="btn btn-danger btn-ok">Löschen</a>
+                <button type="button" class="btn btn-default" data-dismiss="modal">Schliessen</button>
             </div>
         </div>
     </div>
 </div>
 <script>
-$('#confirm-delete').on('show.bs.modal', function(e) {
-    $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
-});
+    $('#confirm-delete').on('show.bs.modal', function(e) {
+        $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
+    });
+</script>
+<script src="https://code.jquery.com/jquery-3.2.1.js">
 </script>
\ No newline at end of file
diff --git a/tickets/ticket-list.php b/tickets/ticket-list.php
index 8be7151..03252c6 100644
--- a/tickets/ticket-list.php
+++ b/tickets/ticket-list.php
@@ -1,18 +1,24 @@
-<body>
+<?php
+require_once('../database/config.php');
+include_once('../navbar.php');
+include_once('modal-delete-ticket.php');
+include_once('modal-assign-ticket.php');
+?>
+
+<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
+<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
+<script src="https://cdn.datatables.net/plug-ins/1.11.3/sorting/any-number.js"></script>
+<script src="https://cdn.datatables.net/plug-ins/1.11.3/sorting/natural.js"></script>
+<script src="https://cdn.datatables.net/plug-ins/1.11.3/sorting/date-de.js"></script>
 
+<body>
     <div class="container">
 
         <div class="text-center mt-5 pt-5">
             <h3>Ticket Liste</h3>
         </div>
-        <input class="form-control" id="myInput" type="text" placeholder="Search..">
 
         <?php
-        require_once('../database/config.php');
-        include_once('../navbar.php');
-        include_once('modal-assign-ticket.php');
-        include_once('modal-delete-ticket.php');
-
         #get DB content
         $sql = "SELECT TicketID,Datum,Abteilung,Name,Problem,Assign FROM ticket_table";
         $result = $link->query($sql);
@@ -21,24 +27,25 @@
             <?php
 
             echo "
-  <table class='table'>
-      <thead class='thead-dark'>
+  <table id='table1' class='display'>
+      <thead>
           <tr>
-              <th scope='col'>Ticket ID</th>
-              <th scope='col'>Abteilung</th>
-              <th scope='col'>Name</th>
-              <th scope='col'>Problem</th>
-              <th scope='col'>Erfasst am</th>
-              <th scope='col'>Bearbeitet von</th>
-              <th scope='col'></th>
-              <th scope='col'></th>
+              <th>Ticket ID</th>
+              <th>Abteilung</th>
+              <th>Name</th>
+              <th>Problem</th>
+              <th>Erfasst am</th>
+              <th>Bearbeitet von</th>
+              <th></th>
+              <th></th>
           </tr>
-      </thead>";
+      </thead>
+      <tbody> ";
 
             while ($row = $result->fetch_assoc()) {
                 $ticketID = $row['TicketID'];
                 echo "
-        <tbody id='myTable'>        
+               
         <tr>
             <th scope='row'>$row[TicketID]</th>
             <td>$row[Abteilung]</td>
@@ -46,11 +53,13 @@
             <td>$row[Problem]</td>
             <td>$row[Datum]</td>
             <td>$row[Assign]</td>
-            <td><button class='btn btn-info' data-toggle='modal' data-id='$ticketID' onclick=\"$('#dataid').text($(this).data('id'));$('#modalAssignTicket').modal('show');\">Assign</button></td>
-            <td><a data-toggle='modal' data-target='#confirm-delete' data-href='delete-ticket.php?id=" . $row['TicketID'] . "'><button class='btn btn-danger' >Delete</button></a></td>
-                </tr>";
+            <td><button class='btn btn-info' data-toggle='modal' data-id='$ticketID' onclick=\"$('#dataid').text($(this).data('id'));$('#modalAssignTicket').modal('show');\">Zuordnen</button></td>
+            <td><a data-toggle='modal' data-target='#confirm-delete' data-href='delete-ticket.php?id=" . $row['TicketID'] . "'><button class='btn btn-danger' >Löschen</button></a></td>
+                </tr>
+                ";
             }
-            echo "</tbody>
+            echo "
+            </tbody>
   </table>";
             ?>
 
@@ -60,11 +69,20 @@
 <!-- Search Ticket Table -->
 <script>
     $(document).ready(function() {
-        $("#myInput").on("keyup", function() {
-            var value = $(this).val().toLowerCase();
-            $("#myTable tr").filter(function() {
-                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
-            });
+        $('#table1').dataTable({
+            "columnDefs": [{
+                    "type": "any-number",
+                    targets: 0
+                },
+                {
+                    "type": "natural",
+                    targets: 1
+                },
+                {
+                    "type": "date-de",
+                    targets: 4
+                },
+            ]
         });
     });
 </script>
\ No newline at end of file
