diff --git a/build.gradle b/build.gradle
index ef38ad2..41a096a 100644
--- a/build.gradle
+++ b/build.gradle
@@ -30,7 +30,7 @@ dependencies {
   implementation 'org.webjars:font-awesome:7.1.0'
   implementation 'org.webjars:jquery:3.7.1'
   implementation 'org.webjars:popper.js:2.11.7'
-  implementation 'org.webjars:datatables:2.3.5'
+  implementation 'org.webjars:datatables:2.3.6'
   implementation 'org.webjars:jquery-ui:1.14.1'
   implementation 'org.webjars.npm:fullcalendar:6.1.19'
 
diff --git a/src/main/java/de/jottyfan/timetrack/modules/projectmanagement/AppRepository.java b/src/main/java/de/jottyfan/timetrack/modules/projectmanagement/AppRepository.java
index 84505fd..ec1a1fe 100644
--- a/src/main/java/de/jottyfan/timetrack/modules/projectmanagement/AppRepository.java
+++ b/src/main/java/de/jottyfan/timetrack/modules/projectmanagement/AppRepository.java
@@ -1,12 +1,15 @@
 package de.jottyfan.timetrack.modules.projectmanagement;
 
-import static de.jottyfan.timetrack.db.project.Tables.T_PROJECT;
 import static de.jottyfan.timetrack.db.project.Tables.T_APP;
 import static de.jottyfan.timetrack.db.project.Tables.T_BUNDLE;
+import static de.jottyfan.timetrack.db.project.Tables.T_PROJECT;
 import static de.jottyfan.timetrack.db.project.Tables.T_WORKPACKAGE;
 import static de.jottyfan.timetrack.db.project.Tables.T_WORKPACKAGE_APP;
 
+import java.time.LocalDate;
+import java.util.ArrayList;
 import java.util.HashMap;
+import java.util.Iterator;
 import java.util.List;
 import java.util.Map;
 
@@ -19,6 +22,7 @@ import org.jooq.Record7;
 import org.jooq.Record8;
 import org.jooq.SelectConditionStep;
 import org.jooq.SelectHavingStep;
+import org.jooq.SelectSeekStep1;
 import org.jooq.impl.DSL;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Repository;
@@ -101,7 +105,36 @@ public class AppRepository {
    * @return the list; an empty list at least
    */
   public List<WorkpackageBean> getWorkpackages() {
-    return jooq.selectFrom(T_WORKPACKAGE).fetchInto(WorkpackageBean.class);
+    SelectSeekStep1<Record8<Integer, String, String, Integer, String, String, LocalDate, String>, String> sql = jooq
+    // @formatter:off
+      .select(T_WORKPACKAGE.PK_WORKPACKAGE,
+              T_WORKPACKAGE.NAME,
+              T_WORKPACKAGE.DESCRIPTION,
+              T_WORKPACKAGE.FK_PROJECT,
+              T_WORKPACKAGE.CONTRACT_URL,
+              T_WORKPACKAGE.MILESTONE_URL,
+              T_WORKPACKAGE.PLANNED_DUEDATE,
+              T_PROJECT.NAME)
+      .from(T_WORKPACKAGE)
+      .leftJoin(T_PROJECT).on(T_PROJECT.PK_PROJECT.eq(T_WORKPACKAGE.FK_PROJECT))
+      .orderBy(T_WORKPACKAGE.NAME);
+    // @formatter:off
+    List<WorkpackageBean> list = new ArrayList<>();
+    Iterator<Record8<Integer, String, String, Integer, String, String, LocalDate, String>> i = sql.fetch().iterator();
+    while (i.hasNext()) {
+      Record8<Integer, String, String, Integer, String, String, LocalDate, String> r = i.next();
+      WorkpackageBean bean = new WorkpackageBean();
+      bean.setPkWorkpackage(r.get(T_WORKPACKAGE.PK_WORKPACKAGE));
+      bean.setName(r.get(T_WORKPACKAGE.NAME));
+      bean.setDescription(r.get(T_WORKPACKAGE.DESCRIPTION));
+      bean.setFkProject(r.get(T_WORKPACKAGE.FK_PROJECT));
+      bean.setContractUrl(r.get(T_WORKPACKAGE.CONTRACT_URL));
+      bean.setMilestoneUrl(r.get(T_WORKPACKAGE.MILESTONE_URL));
+      bean.setPlannedDuedate(r.get(T_WORKPACKAGE.PLANNED_DUEDATE));
+      bean.setProjectName(r.get(T_PROJECT.NAME));
+      list.add(bean);
+    }
+    return list;
   }
 
   /**
@@ -230,7 +263,7 @@ public class AppRepository {
       .execute();
     // @formatter:on
   }
-  
+
   /**
    * insert the bean
    * 
diff --git a/src/main/java/de/jottyfan/timetrack/modules/projectmanagement/model/WorkpackageBean.java b/src/main/java/de/jottyfan/timetrack/modules/projectmanagement/model/WorkpackageBean.java
index 815c323..2258674 100644
--- a/src/main/java/de/jottyfan/timetrack/modules/projectmanagement/model/WorkpackageBean.java
+++ b/src/main/java/de/jottyfan/timetrack/modules/projectmanagement/model/WorkpackageBean.java
@@ -22,6 +22,8 @@ public class WorkpackageBean implements Serializable {
   private String milestoneUrl;
   private String contractUrl;
   private LocalDate plannedDuedate;
+  
+  private String projectName;
 
   public static final WorkpackageBean of(TWorkpackageRecord r) {
     WorkpackageBean bean = new WorkpackageBean();
@@ -142,4 +144,18 @@ public class WorkpackageBean implements Serializable {
   public void setPlannedDuedate(LocalDate plannedDuedate) {
     this.plannedDuedate = plannedDuedate;
   }
+
+  /**
+   * @return the projectName
+   */
+  public String getProjectName() {
+    return projectName;
+  }
+
+  /**
+   * @param projectName the projectName to set
+   */
+  public void setProjectName(String projectName) {
+    this.projectName = projectName;
+  }
 }
diff --git a/src/main/resources/templates/layout/main.html b/src/main/resources/templates/layout/main.html
index 10f3938..9732d50 100644
--- a/src/main/resources/templates/layout/main.html
+++ b/src/main/resources/templates/layout/main.html
@@ -6,7 +6,8 @@
 <title>Timetrack</title>
 
 <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/5.3.8/css/bootstrap.min.css}" />
-<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/2.3.5/css/dataTables.dataTables.min.css}" />
+<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/2.3.6/css/dataTables.dataTables.min.css}" />
+<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/2.3.6/css/dataTables.bootstrap5.min.css}" />
 <link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/7.1.0/css/all.min.css}" />
 <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
 <link rel="stylesheet" type="text/css" th:href="@{/public/dynamicstyle.css}">
@@ -15,7 +16,9 @@
 
 <script type="text/javascript" th:src="@{/webjars/jquery/3.7.1/jquery.min.js}"></script>
 <script type="text/javascript" th:src="@{/webjars/bootstrap/5.3.8/js/bootstrap.bundle.min.js}"></script>
-<script type="text/javascript" th:src="@{/webjars/datatables/2.3.5/js/dataTables.dataTables.min.js}"></script>
+<script type="text/javascript" th:src="@{/webjars/datatables/2.3.6/js/dataTables.min.js}"></script>
+<script type="text/javascript" th:src="@{/webjars/datatables/2.3.6/js/dataTables.dataTables.min.js}"></script>
+<script type="text/javascript" th:src="@{/webjars/datatables/2.3.6/js/dataTables.bootstrap5.min.js}"></script>
 <script type="text/javascript" th:src="@{/webjars/fullcalendar/6.1.19/index.global.min.js}"></script>
 <script type="text/javascript" th:src="@{/js/helper.js}"></script>
 <script type="text/javascript" th:src="@{/js/clock.js}"></script>
diff --git a/src/main/resources/templates/projectmanagement/app/assign.html b/src/main/resources/templates/projectmanagement/app/assign.html
index 49f27c2..7670126 100644
--- a/src/main/resources/templates/projectmanagement/app/assign.html
+++ b/src/main/resources/templates/projectmanagement/app/assign.html
@@ -7,7 +7,7 @@
 	<font layout:fragment="title">Projekt</font>
 	<ul layout:fragment="menu">
 		<li class="nav-item" sec:authorize="hasRole('timetrack_user')">
-			<a class="nav-link btn btn-secondary btn-white-text" th:href="@{/projectmanagement}">zur Projektübersicht</a>
+			<a class="btn btn-outline-secondary" th:href="@{/projectmanagement}">zur Projektübersicht</a>
 		</li>
 	</ul>
 	<main layout:fragment="content">
@@ -39,7 +39,7 @@
 				</div>
 			</div>
 			<div class="card-footer">
-				<table class="table table-striped">
+				<table name="table" class="table table-striped">
 					<thead>
 						<tr>
 							<th>Name</th>
@@ -49,13 +49,23 @@
 					</thead>
 					<tbody>
 						<tr th:each="p : ${workpackages}">
-							<td><input type="checkbox" th:checked="${p.isIn(linked)}" /> <a th:href="@{/projectmanagement/workpackage/{w}/apps(w=${p.pkWorkpackage})}" th:text="${p.name}"></a></td>
+							<td><input type="checkbox" th:checked="${p.isIn(linked)}" /> <a th:href="@{/projectmanagement/workpackage/{w}/apps(w=${p.pkWorkpackage})}" th:text="${p.name}" th:title="${p.projectName}"></a></td>
 							<td th:text="${p.description}"></td>
 							<td><a th:href="@{/projectmanagement/workpackage/{w}/app/{a}/toggle(w=${p.pkWorkpackage},a=${app.pkApp})}" class="btn btn-outline-secondary">
 									<span th:if="${p.isIn(linked)}">rausschmeißen</span> <span th:unless="${p.isIn(linked)}">zuweisen</span>
 								</a></td>
 						</tr>
 				</table>
+				<script type="text/javascript">
+					$(document).ready(function() {
+						var localeUrl = '[[@{/js/dataTables/de.json}]]';
+						$("#table").DataTable({
+							"language" : {
+								"url" : localeUrl
+							}
+						});
+					});
+				</script>
 			</div>
 		</div>
 	</main>
diff --git a/src/main/resources/templates/projectmanagement/dashboard.html b/src/main/resources/templates/projectmanagement/dashboard.html
index 84fc2fe..ed8342c 100644
--- a/src/main/resources/templates/projectmanagement/dashboard.html
+++ b/src/main/resources/templates/projectmanagement/dashboard.html
@@ -7,8 +7,8 @@
 	<font layout:fragment="title">Projekte</font>
 	<ul layout:fragment="menu">
 		<li class="nav-item" sec:authorize="hasRole('timetrack_user')">
-			<a class="btn btn-outline-success" th:href="@{/projectmanagement/project/add}">Neues Projekt anlegen</a>
 			<a class="btn btn-outline-secondary" th:href="@{/projectmanagement/download}">Export</a>
+			<a class="btn btn-outline-secondary" th:href="@{/projectmanagement/apps}">alle Apps</a>
 		</li>
 	</ul>
 	<main layout:fragment="content">
@@ -32,10 +32,11 @@
 				</div>
 				<div class="col-sm-12 col-md-3 col-lg-2 dashboardcard">
 					<div class="card">
-						<div class="card-header">Alles</div>
-						<div class="card-body">
-							<a th:href="@{/projectmanagement/apps}">alle apps auflisten</a>
+						<div class="card-header">
+							<a class="btn btn-outline-secondary" th:href="@{/projectmanagement/project/add}">Projekt anlegen</a>
 						</div>
+						<div class="card-body"></div>
+						<div class="card-footer"></div>
 					</div>
 				</div>
 			</div>
diff --git a/src/main/resources/templates/projectmanagement/project/item.html b/src/main/resources/templates/projectmanagement/project/item.html
index 17b00dc..7e88bce 100644
--- a/src/main/resources/templates/projectmanagement/project/item.html
+++ b/src/main/resources/templates/projectmanagement/project/item.html
@@ -7,7 +7,7 @@
 	<font layout:fragment="title">Projekt</font>
 	<ul layout:fragment="menu">
 		<li class="nav-item" sec:authorize="hasRole('timetrack_user')">
-			<a class="nav-link btn btn-secondary btn-white-text" th:href="@{/projectmanagement}">abbrechen</a>
+			<a class="btn btn-outline-secondary" th:href="@{/projectmanagement}">abbrechen</a>
 		</li>
 	</ul>
 	<main layout:fragment="content">
@@ -30,7 +30,7 @@
 						</div>
 						<div class="col-2">Geldgeber</div>
 						<div class="col-10">
-							<select th:field="*{fkFunder}" class="select-field">
+							<select th:field="*{fkFunder}" class="form-select">
 								<option value="" label="--- bitte wählen ---" />
 								<option th:each="f : ${funders}" th:label="${f.name}" th:value="${f.pkFunder}" />
 							</select>
diff --git a/src/main/resources/templates/projectmanagement/workpackage/item.html b/src/main/resources/templates/projectmanagement/workpackage/item.html
index a38d5a4..23ff7fe 100644
--- a/src/main/resources/templates/projectmanagement/workpackage/item.html
+++ b/src/main/resources/templates/projectmanagement/workpackage/item.html
@@ -7,7 +7,7 @@
 	<font layout:fragment="title">Workpackage</font>
 	<ul layout:fragment="menu">
 		<li class="nav-item" sec:authorize="hasRole('timetrack_user')">
-			<a class="nav-link btn btn-secondary btn-white-text" th:href="@{/projectmanagement}">abbrechen</a>
+			<a class="btn btn-outline-secondary" th:href="@{/projectmanagement}">abbrechen</a>
 		</li>
 	</ul>
 	<main layout:fragment="content">