diff --git a/src/new/src/PSC/Shop/ContactBundle/Resources/views/backend/list/index.html.twig b/src/new/src/PSC/Shop/ContactBundle/Resources/views/backend/list/index.html.twig
index 2785db8e5..9c672ea4f 100755
--- a/src/new/src/PSC/Shop/ContactBundle/Resources/views/backend/list/index.html.twig
+++ b/src/new/src/PSC/Shop/ContactBundle/Resources/views/backend/list/index.html.twig
@@ -1,97 +1,134 @@
-{% extends 'backend_base.html.twig' %}
+{% extends 'backend_tailwind_base.html.twig' %}
+{% form_theme form 'tailwind_formtheme.html.twig' %}
 {% trans_default_domain 'core_contact_list' %}
-{% block body %}
-    <div class="header">
-        <div class="row">
-            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
-                <h3>
-                    <i class="fa-fw fa fa-user"></i>
-                    {{ 'customers'|trans }} <span>>
-                    {{ 'list'|trans }} </span>
-                </h3>
-            </div>
+
+{% block header %}
+    <div class="flex flex-wrap items-center gap-4 justify-between w-full">
+        <div>
+            <h1 class="text-psc text-2xl font-medium flex flex-row gap-1">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-8">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+                </svg>
+                {{ 'customers'|trans }}
+            </h1>
         </div>
-    </div>
-    <div class="body">
-        <div class="panel">
-            <div class="body">
-                <a class="btn btn-info btn-sm" href="{{ path("psc_shop_contact_backend_create") }}"><span class="fa fa-plus"></span> {{ 'addcustomers'|trans }}</a>
-            </div>
-        </div>
-        <div class="panel">
-            <div class="body">
-                {{ form_start(form, { 'attr': {'class': 'searchForm'}}) }}
-                <div class="form-group form-group-sm row">
-                    <label class="col-md-1 form-control-label">
-                        {{ 'search'|trans }}
-                    </label>
-                    <div class="col-md-3">
-                        <div class="input-group input-group-sm">
-                            {{ form_widget(form.term, {attr: {class:'form-control'}}) }}
-                            <span class="input-group-btn">
-                                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
-                                </span>
-                        </div>
-                    </div>
-                </div>
-
-                {{ form_rest(form) }}
-
-                {{ form_end(form) }}
-
-                <div class="navigation">
-                    {{ knp_pagination_render(pagination) }}
-                </div>
-                <table class="table">
-                    <thead class="thead-dark">
-                    <tr>
-                        <th>{{ knp_pagination_sortable(pagination, 'Uid', 'contact.uid') }}</th>
-                        <th>{{ knp_pagination_sortable(pagination, 'Loginname'|trans, 'contact.username') }}</th>
-                        <th>{{ knp_pagination_sortable(pagination, 'generated'|trans, 'contact.createdAt') }}</th>
-                        <th>{{ knp_pagination_sortable(pagination, 'changed'|trans, 'contact.updatedAt') }}</th>
-                        <th>{{ knp_pagination_sortable(pagination, 'firstname'|trans, 'contact.selffirstname') }}</th>
-                        <th>{{ knp_pagination_sortable(pagination, 'lastname'|trans, 'contact.lastname') }}</th>
-                        <th>{{ knp_pagination_sortable(pagination, 'street'|trans, 'contact.street') }}/{{ knp_pagination_sortable(pagination, 'housenumber'|trans, 'contact.houseNumber') }}</th>
-                        <th>{{ knp_pagination_sortable(pagination, 'zip'|trans, 'contact.zip') }}</th>
-                        <th>{{ knp_pagination_sortable(pagination, 'city'|trans, 'contact.city') }}</th>
-                        <th>{{ 'virtual'|trans }}</th>
-                        <th>{{ 'shops'|trans }}</th>
-                        <th></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {% for contact in pagination %}
-                        <tr {% if loop.index is odd %}class="color"{% endif %}>
-                            <td>{{ contact.id }}</td>
-                            <td><a href="mailto:{{ contact.username }}">{{ contact.username }}</a></td>
-                            <td>{{ contact.createdAt|date('d.m.Y') }}</td>
-                            <td>{{ contact.updatedAt|date('d.m.Y') }}</td>
-                            <td>{{ contact.firstname }}</td>
-                            <td>{{ contact.lastname }}</td>
-                            <td>{{ contact.street }} {{ contact.houseNumber }}</td>
-                            <td>{{ contact.zip }}</td>
-                            <td>{{ contact.city }}</td>
-                            <td>{% if contact.virtual == 1 %}<span class="badge bg-danger">{{ 'yes'|trans }}</span>{% else %}<span class="badge bg-secondary">{{ 'no'|trans }}</span>{% endif %}</td>
-                            <td>{% if contact.shops|length > 1 %}
-                                <span class="badge bg-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% for shop in contact.shops %}{% if selectedShop.id != shop.id %}{{ shop.title }}{% if loop.last == false %},{% endif %}{% endif %}{% endfor %}">
-                                    {{ 'yes'|trans }}
-                                </span>
-                                    {% for shop in contact.shops %}
-                                    <span class="mr-1">{{ shop.title }}</span>
-                                    {% endfor %}
-                            {% else %}
-                                <span class="badge bg-secondary">{{ 'no'|trans }}</span>
-                            {% endif %}</td>
-                            <td class="text-end">
-                                <a href="{{ path("psc_shop_contact_backend_edit", {uuid: contact.uuid}) }}" class="btn btn-info btn-sm"><span class="fa fa-edit"></span></a></td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
-                <div class="navigation">
-                    {{ knp_pagination_render(pagination) }}
-                </div>
-            </div>
+        <div class="flex flex-wrap items-center gap-4 justify-end shrink-0 ml-auto">
+            <a href="{{ path("psc_shop_contact_backend_create") }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-sm px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                </svg>
+                {{ 'addcustomers'|trans }}
+            </a>
         </div>
     </div>
 {% endblock %}
+
+{% block body %}
+<div class="flex flex-col gap-6">
+    <div class="rounded-sm border bg-white px-7.5 py-6 shadow-lg dark:border-strokedark dark:bg-boxdark">
+        <div class="mb-6 px-4">
+            {{ form_start(form, { 'attr': {'class': ''}}) }}
+            <div class="flex items-center gap-6">
+                <label class="font-medium text-gray-700 text-sm min-w-fit">
+                    Suche:
+                </label>
+                <div class="flex-1 max-w-xl">
+                    <div class="relative flex gap-3">
+                        <div class="relative flex-1">
+                            <div class="absolute inset-y-0 left-3.5 flex items-center pointer-events-none z-10">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-gray-400">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                                </svg>
+                            </div>
+                            {{ form_widget(form.term, {attr: {
+                                class:'w-full pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-psc-500 focus:border-psc-500 transition-all text-sm',
+                                placeholder: 'Kunden suchen...',
+                                style: 'padding-left: 2.75rem !important;'
+                            }}) }}
+                        </div>
+                        <button type="submit" class="inline-flex items-center justify-center gap-2 font-medium rounded-lg px-5 py-2.5 text-sm text-white shadow-md bg-psc-500 hover:bg-psc-600 hover:shadow-lg transition-all duration-200">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                            </svg>
+                            Suchen
+                        </button>
+                    </div>
+                </div>
+            </div>
+            {{ form_rest(form) }}
+            {{ form_end(form) }}
+        </div>
+
+        <div class="overflow-x-auto">
+            <table class="min-w-full text-sm">
+                <thead class="bg-slate-100 border-t border-stroke">
+                    <tr>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ knp_pagination_sortable(pagination, 'Uid', 'contact.uid') }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ knp_pagination_sortable(pagination, 'Loginname'|trans, 'contact.username') }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ knp_pagination_sortable(pagination, 'generated'|trans, 'contact.createdAt') }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ knp_pagination_sortable(pagination, 'changed'|trans, 'contact.updatedAt') }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ knp_pagination_sortable(pagination, 'firstname'|trans, 'contact.selffirstname') }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ knp_pagination_sortable(pagination, 'lastname'|trans, 'contact.lastname') }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ knp_pagination_sortable(pagination, 'street'|trans, 'contact.street') }}/{{ knp_pagination_sortable(pagination, 'housenumber'|trans, 'contact.houseNumber') }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ knp_pagination_sortable(pagination, 'zip'|trans, 'contact.zip') }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ knp_pagination_sortable(pagination, 'city'|trans, 'contact.city') }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ 'virtual'|trans }}</th>
+                        <th class="px-2 py-3 text-left font-medium text-gray-700">{{ 'shops'|trans }}</th>
+                        <th class="px-2 py-3 text-right font-medium text-gray-700">Aktionen</th>
+                    </tr>
+                </thead>
+                <tbody>
+                {% for contact in pagination %}
+                    <tr class="border-t border-stroke hover:bg-gray-50">
+                        <td class="px-2 py-3 font-medium">{{ contact.id }}</td>
+                        <td class="px-2 py-3">
+                            <a href="mailto:{{ contact.username }}" class="text-psc-500 hover:underline">{{ contact.username }}</a>
+                        </td>
+                        <td class="px-2 py-3 whitespace-nowrap">{{ contact.createdAt|date('d.m.Y') }}</td>
+                        <td class="px-2 py-3 whitespace-nowrap">{{ contact.updatedAt|date('d.m.Y') }}</td>
+                        <td class="px-2 py-3">{{ contact.firstname }}</td>
+                        <td class="px-2 py-3">{{ contact.lastname }}</td>
+                        <td class="px-2 py-3">{{ contact.street }} {{ contact.houseNumber }}</td>
+                        <td class="px-2 py-3">{{ contact.zip }}</td>
+                        <td class="px-2 py-3">{{ contact.city }}</td>
+                        <td class="px-2 py-3">
+                            {% if contact.virtual == 1 %}
+                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">{{ 'yes'|trans }}</span>
+                            {% else %}
+                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">{{ 'no'|trans }}</span>
+                            {% endif %}
+                        </td>
+                        <td class="px-2 py-3">
+                            {% if contact.shops|length > 1 %}
+                                <div class="flex flex-wrap gap-1">
+                                    {% for shop in contact.shops %}
+                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">{{ shop.title }}</span>
+                                    {% endfor %}
+                                </div>
+                            {% else %}
+                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">{{ 'no'|trans }}</span>
+                            {% endif %}
+                        </td>
+                        <td class="px-2 py-3 text-right">
+                            <div class="flex flex-row gap-2 justify-end">
+                                <a href="{{ path("psc_shop_contact_backend_edit", {uuid: contact.uuid}) }}" class="">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="table-icon">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                                    </svg>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+
+        <div class="mt-4">
+            {{ knp_pagination_render(pagination, 'tailwind_pagination.html.twig', {}, {
+                'sortableTemplate': 'tailwind_sortable.html.twig'
+            }) }}
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/src/new/src/PSC/Shop/OrderBundle/Resources/views/backend/list/index.html.twig b/src/new/src/PSC/Shop/OrderBundle/Resources/views/backend/list/index.html.twig
index 7e93108b7..5acaa34d5 100755
--- a/src/new/src/PSC/Shop/OrderBundle/Resources/views/backend/list/index.html.twig
+++ b/src/new/src/PSC/Shop/OrderBundle/Resources/views/backend/list/index.html.twig
@@ -134,27 +134,24 @@
                                         {% endfor %}
                                     </div>
                                 </div>
-                                <div class="flex gap-1">
-                                    <a href="{{ path("psc_shop_order_backend_detail_package_download", {uuid: order.uuid}) }}" target="_blank" class="flex-1 inline-flex items-center justify-center gap-1 px-2 py-1.5 text-xs font-medium text-white bg-green-600 hover:bg-green-700 rounded-sm">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
+                                <div class="flex gap-2">
+                                    <a href="{{ path("psc_shop_order_backend_detail_package_download", {uuid: order.uuid}) }}" target="_blank" class="" title="Package Download">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="table-icon text-green-600">
                                             <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                                         </svg>
-                                        Package
                                     </a>
-                                    <a href="{{ path("psc_shop_order_backend_detail_show", {uuid: order.uuid}) }}" class="flex-1 inline-flex items-center justify-center gap-1 px-2 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
+                                    <a href="{{ path("psc_shop_order_backend_detail_show", {uuid: order.uuid}) }}" class="" title="Details anzeigen">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="table-icon text-blue-600">
                                             <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                             <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                         </svg>
-                                        Details
+                                    </a>
+                                    <a href="{{ path("psc_shop_order_backend_upload_deleteAll", {uuid: order.uuid}) }}" class="" title="Uploads löschen">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="table-icon text-red-600">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                                        </svg>
                                     </a>
                                 </div>
-                                <a href="{{ path("psc_shop_order_backend_upload_deleteAll", {uuid: order.uuid}) }}" class="inline-flex items-center justify-center gap-1 px-2 py-1.5 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded-sm">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
-                                    </svg>
-                                    Uploads löschen
-                                </a>
                             </div>
                         </td>
                     </tr>