diff --git a/src/Controller/Teamer/Application/IndexController.php b/src/Controller/Teamer/Application/IndexController.php
index 9c1a227..0aad37d 100644
--- a/src/Controller/Teamer/Application/IndexController.php
+++ b/src/Controller/Teamer/Application/IndexController.php
@@ -43,6 +43,7 @@ class IndexController extends AbstractController
         );
 
         return $this->render('teamer/application/index.html.twig', [
+            'teamer' => $teamer,
             'pagination' => $pagination,
         ]);
     }
diff --git a/src/Controller/Teamer/Disposition/RecentController.php b/src/Controller/Teamer/Disposition/RecentController.php
index c9bd1f8..0b09af9 100644
--- a/src/Controller/Teamer/Disposition/RecentController.php
+++ b/src/Controller/Teamer/Disposition/RecentController.php
@@ -43,6 +43,7 @@ class RecentController extends AbstractController
         );
 
         return $this->render('teamer/disposition/recent.html.twig', [
+            'teamer'  => $teamer,
             'pagination' => $pagination,
         ]);
     }
diff --git a/src/Controller/Teamer/Disposition/UpcomingController.php b/src/Controller/Teamer/Disposition/UpcomingController.php
index 1efd9a7..cea139e 100644
--- a/src/Controller/Teamer/Disposition/UpcomingController.php
+++ b/src/Controller/Teamer/Disposition/UpcomingController.php
@@ -43,6 +43,7 @@ class UpcomingController extends AbstractController
         );
 
         return $this->render('teamer/disposition/upcoming.html.twig', [
+            'teamer' => $teamer,
             'pagination' => $pagination,
         ]);
     }
diff --git a/templates/teamer/application/index.html.twig b/templates/teamer/application/index.html.twig
index a8446ae..d150187 100644
--- a/templates/teamer/application/index.html.twig
+++ b/templates/teamer/application/index.html.twig
@@ -6,92 +6,60 @@
     <h1 class="text-2xl font-bold pb-8">
         Meine offenen Bewerbungen
     </h1>
-    <div class="data-table-wrapper">
-        <div class="data-table-wrapper__inner">
-            <table class="data-table">
-                <thead>
-                <tr>
-                    <th>
-                        {{ knp_pagination_sortable(pagination, 'Einsatz&shy;beginn', 'assignment.dateFrom') }}
-                    </th>
-                    <th>
-                        {{ knp_pagination_sortable(pagination, 'Einsatz&shy;ende', 'assignment.dateTo') }}
-                    </th>
-                    <th>
-                        {{ knp_pagination_sortable(pagination, 'Jobprofil', 'assignment.jobProfile') }}
-                    </th>
-                    <th>
-                        {{ knp_pagination_sortable(pagination, 'Destination', 'destination.dateFrom') }}
-                    </th>
-                    <th>
-                        {{ knp_pagination_sortable(pagination, 'Busbegleitung', 'assignment.pickup') }}
-                    </th>
-                    <th>
-                        {{ knp_pagination_sortable(pagination, 'Status', 'application.status') }}
-                    </th>
-                    <th></th>
-                </tr>
-                </thead>
-                <tbody>
-                {% for application in pagination %}
-                    {% set assignment = application.assignment %}
-                    <tr>
-                        <td>
-                            {% set dateFrom = assignment.dateFrom ? assignment.dateFrom : assignment.destination.dateFrom %}
-                            {{ dateFrom|date('d.m.Y') }}
-                        </td>
-                        <td>
-                            {% set dateTo = assignment.dateTo ? assignment.dateTo : assignment.destination.dateTo %}
-                            {{ dateTo|date('d.m.Y') }}
-                        </td>
-                        <td>
-                            {{ assignment.jobProfile.name }}
-                        </td>
-                        <td>
-                            {{ assignment.destination.product }}
-                            <br>
-                            {{ assignment.destination.hotel }}
-                        </td>
-                        <td>
-                            {{ assignment.pickup ? assignment.pickup|bpn_pickup_label|default('-') : '-' }}
-                            <br>
-                            {{ assignment.pickupDate ? assignment.pickupDate|date('d.m.Y') : '' }}
-                        </td>
-                        <td>
-                            {{ ('label.application.status.' ~ application.status)|trans }}
-                        </td>
-                        <td>
-                            <div class="flex items-center space-x-1 justify-end">
-                                {% if is_granted('VIEW', application) %}
-                                    <a href="{{ path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) }}">
-                                        {{ icon('info', 'w-5 h-5') }}
-                                    </a>
-                                {% endif %}
-                                {% if is_granted('DELETE', application) %}
-                                    <button type="button"
-                                            title="Bewerbung löschen"
-                                            {{ stimulus_controller('modal-button', [], [], {'confirmation-modal': '#confirmation-modal'}) }}
-                                            {{ stimulus_action('modal-button', 'confirmation', null, {
-                                                'title': 'Bist du sicher?',
-                                                'content': 'Möchtest du die Bewerbing wirklich zurückziehen/löschen?',
-                                                'target-url': path('app_teamer_application_delete', { 'uuid': application.uuid })
-                                            }) }}>
-                                        {{ icon('delete', 'w-5 h-5 text-red-500') }}
-                                    </button>
-                                {% endif %}
-                            </div>
-                        </td>
-                    </tr>
-                {% else %}
-                    <tr>
-                        <td colspan="6">
-                            Keine Daten...
-                        </td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-            </table>
-            {{ knp_pagination_render(pagination) }}
-        </div>
+    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 pb-4">
+        {% for application in pagination %}
+            {% set assignment = application.assignment %}
+            <div class="relative flex flex-col justify-between rounded-md border border-gray-200 bg-gray-100 p-4">
+                <div class="flex flex-col space-y-2 pb-2">
+                    <div class="flex items-start space-x-2">
+                        {{ icon('flag-' ~ assignment.destination.country, 'w-5 h-5 shrink-0') }}
+                        <span class="flex-1 font-bold">{{ assignment.destination.product }}</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        {{ icon('calendar', 'w-5 h-5 shrink-0') }}
+                        <span class="flex-1">{{ assignment.effectivePeriod.start|date('d.m.Y') }} - {{ assignment.effectivePeriod.end|date('d.m.Y') }}</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        {{ icon('profile', 'w-5 h-5 shrink-0') }}
+                        <span class="flex-1">{{ assignment.jobProfile.name }}</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        {{ icon('house', 'w-5 h-5 shrink-0') }}
+                        <span class="flex-1">{{ assignment.destination.hotel }}</span>
+                    </div>
+                    {% if assignment.pickup %}
+                        <div class="flex items-start space-x-2">
+                            {{ icon('bus', 'w-5 h-5 shrink-0') }}
+                            <span>{{ assignment.pickup|bpn_pickup_label|default('-') }} {{ assignment.effectivePickupDate ? assignment.effectivePickupDate|date('d.m.Y') : '' }}</span>
+                        </div>
+                    {% endif %}
+                </div>
+                <div class="flex flex-col space-y-2">
+                    <a href="{{ path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) }}"
+                       class="btn btn--small flex items-center space-x-2">
+                        {{ icon('info', 'w-4 h-4 shrink-0') }}
+                        <span>Details</span>
+                    </a>
+                    {% if is_granted('DELETE', application) %}
+                        <button type="button"
+                                title="Bewerbung löschen"
+                                class="btn btn--small bg-red-100 text-red-800 hover:bg-red-50"
+                                {{ stimulus_controller('modal-button', [], [], {'confirmation-modal': '#confirmation-modal'}) }}
+                                {{ stimulus_action('modal-button', 'confirmation', null, {
+                                    'title': 'Bist du sicher?',
+                                    'content': 'Möchtest du die Bewerbing wirklich zurückziehen/löschen?',
+                                    'target-url': path('app_teamer_application_delete', { 'uuid': application.uuid })
+                                }) }}>
+                            {{ icon('delete', 'w-4 h-4 shrink-0') }}
+                            <span>Löschen</span>
+                        </button>
+                    {% endif %}
+                </div>
+                {% if teamer.bookmarks.contains(assignment) %}
+                    {{ icon('star', 'w-5 h-5 text-yellow-500 absolute top-0 right-0 mt-2 mr-2') }}
+                {% endif %}
+            </div>
+        {% endfor %}
     </div>
+    {{ knp_pagination_render(pagination, 'paginator/sliding_boxes.html.twig') }}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/teamer/disposition/_table.html.twig b/templates/teamer/disposition/_table.html.twig
index 0d296ed..6339849 100644
--- a/templates/teamer/disposition/_table.html.twig
+++ b/templates/teamer/disposition/_table.html.twig
@@ -1,68 +1,40 @@
-<div class="data-table-wrapper">
-    <div class="data-table-wrapper__inner">
-        <table class="data-table">
-            <thead>
-            <tr>
-                <th>
-                    {{ knp_pagination_sortable(pagination, 'Einsatz&shy;beginn', 'assignment.dateFrom') }}
-                </th>
-                <th>
-                    {{ knp_pagination_sortable(pagination, 'Einsatz&shy;ende', 'assignment.dateTo') }}
-                </th>
-                <th>
-                    {{ knp_pagination_sortable(pagination, 'Jobprofil', 'assignment.jobProfile') }}
-                </th>
-                <th>
-                    {{ knp_pagination_sortable(pagination, 'Destination', 'destination.dateFrom') }}
-                </th>
-                <th>
-                    {{ knp_pagination_sortable(pagination, 'Busbegleitung ab', 'assignment.pickup') }}
-                </th>
-                <th></th>
-            </tr>
-            </thead>
-            <tbody>
-            {% for disposition in pagination %}
-                {% set assignment = disposition.assignment %}
-                <tr>
-                    <td>
-                        {% set dateFrom = assignment.dateFrom ? assignment.dateFrom : assignment.destination.dateFrom %}
-                        {{ dateFrom|date('d.m.Y') }}
-                    </td>
-                    <td>
-                        {% set dateTo = assignment.dateTo ? assignment.dateTo : assignment.destination.dateTo %}
-                        {{ dateTo|date('d.m.Y') }}
-                    </td>
-                    <td>
-                        {{ assignment.jobProfile.name }}
-                    </td>
-                    <td>
-                        {{ assignment.destination.product }}
-                        <br>
-                        {{ assignment.destination.hotel }}
-                    </td>
-                    <td>
-                        {{ assignment.pickup ? assignment.pickup|bpn_pickup_label|default('-') : '-' }}
-                        <br>
-                        {{ assignment.pickupDate ? assignment.pickupDate|date('d.m.Y') : '' }}
-                    </td>
-                    <td>
-                        <div class="flex items-center space-x-1 justify-end">
-                            <a href="{{ path('app_teamer_disposition_detail', { 'uuid': disposition.uuid, 'r': return_url() }) }}">
-                                {{ icon('info', 'w-5 h-5') }}
-                            </a>
-                        </div>
-                    </td>
-                </tr>
-            {% else %}
-                <tr>
-                    <td colspan="6">
-                        Keine Daten...
-                    </td>
-                </tr>
-            {% endfor %}
-            </tbody>
-        </table>
-        {{ knp_pagination_render(pagination) }}
-    </div>
+<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 pb-4">
+    {% for disposition in pagination %}
+        {% set assignment = disposition.assignment %}
+        <div class="relative flex flex-col justify-between rounded-md border border-gray-200 bg-gray-100 p-4">
+            <div class="flex flex-col space-y-2 pb-2">
+                <div class="flex items-start space-x-2">
+                    {{ icon('flag-' ~ assignment.destination.country, 'w-5 h-5 shrink-0') }}
+                    <span class="flex-1 font-bold">{{ assignment.destination.product }}</span>
+                </div>
+                <div class="flex items-start space-x-2">
+                    {{ icon('calendar', 'w-5 h-5 shrink-0') }}
+                    <span class="flex-1">{{ assignment.effectivePeriod.start|date('d.m.Y') }} - {{ assignment.effectivePeriod.end|date('d.m.Y') }}</span>
+                </div>
+                <div class="flex items-start space-x-2">
+                    {{ icon('profile', 'w-5 h-5 shrink-0') }}
+                    <span class="flex-1">{{ assignment.jobProfile.name }}</span>
+                </div>
+                <div class="flex items-start space-x-2">
+                    {{ icon('house', 'w-5 h-5 shrink-0') }}
+                    <span class="flex-1">{{ assignment.destination.hotel }}</span>
+                </div>
+                {% if assignment.pickup %}
+                    <div class="flex items-start space-x-2">
+                        {{ icon('bus', 'w-5 h-5 shrink-0') }}
+                        <span>{{ assignment.pickup|bpn_pickup_label|default('-') }} {{ assignment.effectivePickupDate ? assignment.effectivePickupDate|date('d.m.Y') : '' }}</span>
+                    </div>
+                {% endif %}
+            </div>
+            <a href="{{ path('app_teamer_disposition_detail', { 'uuid': disposition.uuid, 'r': return_url() }) }}"
+               class="btn btn--small flex items-center space-x-2">
+                {{ icon('info', 'w-4 h-4 shrink-0') }}
+                <span>Details</span>
+            </a>
+            {% if teamer.bookmarks.contains(assignment) %}
+                {{ icon('star', 'w-5 h-5 text-yellow-500 absolute top-0 right-0 mt-2 mr-2') }}
+            {% endif %}
+        </div>
+    {% endfor %}
 </div>
+{{ knp_pagination_render(pagination, 'paginator/sliding_boxes.html.twig') }}
diff --git a/templates/teamer/index.html.twig b/templates/teamer/index.html.twig
index 3b0a0fc..9dd7448 100644
--- a/templates/teamer/index.html.twig
+++ b/templates/teamer/index.html.twig
@@ -58,13 +58,13 @@
                         {% set label = 'eingeteilt' %}
                     {% else %}
                         {% set icon = 'info' %}
-                        {% set class = 'btn--info' %}
+                        {% set class = '' %}
                         {% set url = path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) %}
                         {% set label = 'bewerben' %}
                     {% endif %}
                     <a href="{{ url }}"
                        class="btn btn--small flex items-center space-x-2 {{ class }}">
-                        {{ icon(icon, 'w-4 h-4') }}
+                        {{ icon(icon, 'w-4 h-4 shrink-0') }}
                         <span>{{ label }}</span>
                     </a>
                 </div>