diff --git a/app/Http/Controllers/CarController.php b/app/Http/Controllers/CarController.php
index ae1ddb2..6b4efca 100644
--- a/app/Http/Controllers/CarController.php
+++ b/app/Http/Controllers/CarController.php
@@ -218,28 +218,8 @@ class CarController extends Controller
         return [
             'id' => $contract->id,
             'date' => $contract->date_formatted,
-            'delivery_date' => $contract->delivery_date_formatted,
             'price' => $contract->price->format(),
-            'paid' => $contract->paid->format(),
-            'left_to_pay' => $contract->left_to_pay->format(),
-            'type' => $contract->type,
-            'notes' => $contract->notes,
-            'is_sell_contract' => $contract->isSellContract(),
-            'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue($contract->insurance_type)->key : null,
-            'contact' => [
-                'id' => $contact->id,
-                'name' => $contact->name,
-                'firstname' => $contact->firstname,
-                'lastname' => $contact->lastname,
-                'phone' => $contact->phone,
-                'address' => $contact->address,
-                'zip' => $contact->zip,
-                'city' => $contact->city,
-                'country' => $contact->country,
-                'company' => $contact->company,
-                'email' => $contact->email,
-                'link' => route('contacts.show', $contact),
-            ],
+            'contact' => $contact->full_title,
             'link' => route('contracts.show', $contract),
         ];
     }
@@ -389,13 +369,15 @@ class CarController extends Controller
                 'notes' => $car->notes,
                 'deleted_at' => $car->deleted_at,
                 'buy_contracts' => $car->buyContracts()
-                    ->orderBy('date', 'asc')
-                    ->paginate(50)
-                    ->through(fn ($contract) => $this->getContractFields($contract)),
+                    ->orderBy('date', 'desc')
+                    ->with('contact')
+                    ->get()
+                    ->map(function ($contract) { return $this->getContractFields($contract); }),
                 'sell_contracts' => $car->sellContracts()
-                    ->orderBy('date', 'asc')
-                    ->paginate(50)
-                    ->through(fn ($contract) => $this->getContractFields($contract)),
+                    ->orderBy('date', 'desc')
+                    ->with('contact')
+                    ->get()
+                    ->map(function ($contract) { return $this->getContractFields($contract); }),
             ],
         ]);
     }
diff --git a/app/Http/Controllers/ContactController.php b/app/Http/Controllers/ContactController.php
index 3d3ec71..5e04c6c 100644
--- a/app/Http/Controllers/ContactController.php
+++ b/app/Http/Controllers/ContactController.php
@@ -213,13 +213,15 @@ class ContactController extends Controller
                 'country' => $contact->country,
                 'deleted_at' => $contact->deleted_at,
                 'buy_contracts' => $contact->buyContracts()
+                    ->orderBy('date', 'desc')
                     ->with('car')
-                    ->paginate(50)
-                    ->through(fn ($contract) => $this->getContractFields($contract)),
+                    ->get()
+                    ->map(function ($contract) { return $this->getContractFields($contract); }),
                 'sell_contracts' => $contact->sellContracts()
+                    ->orderBy('date', 'desc')
                     ->with('car')
-                    ->paginate(50)
-                    ->through(fn ($contract) => $this->getContractFields($contract)),
+                    ->get()
+                    ->map(function ($contract) { return $this->getContractFields($contract); }),
             ]
         ]);
     }
@@ -232,27 +234,8 @@ class ContactController extends Controller
         return [
             'id' => $contract->id,
             'date' => $contract->date_formatted,
-            'delivery_date' => $contract->delivery_date_formatted,
             'price' => $contract->price->format(),
-            'paid' => $contract->paid->format(),
-            'left_to_pay' => $contract->left_to_pay->format(),
-            'type' => $contract->type,
-            'notes' => $contract->notes,
-            'is_sell_contract' => $contract->isSellContract(),
-            'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue($contract->insurance_type)->key : null,
-            'car' => [
-                 'id' => $car->id,
-                    'stammnummer' => $car->stammnummer,
-                    'vin' => $car->vin,
-                    'name' => $car->name,
-                    'initial_date' => $car->initial_date_formatted,
-                    'colour' => $car->colour,
-                    'last_check_date' => $car->last_check_date_formatted,
-                    'kilometers' => $car->kilometers_formatted,
-                    'known_damage' => $car->known_damage,
-                    'notes' => $car->notes,
-                    'link' => route('cars.show', $car),
-            ],
+            'car' => $car->name_with_year,
             'link' => route('contracts.show', $contract),
         ];
     }
diff --git a/app/Http/Controllers/ContractController.php b/app/Http/Controllers/ContractController.php
index a680581..b992880 100644
--- a/app/Http/Controllers/ContractController.php
+++ b/app/Http/Controllers/ContractController.php
@@ -238,42 +238,20 @@ class ContractController extends Controller
                         'created_at' => $document->created_at,
                     ];
                 }),
-            'payments' => $contract->payments()->orderBy('date', 'asc')->paginate(50)
-                ->through(fn ($payment) => [
+            'payments' => $contract->payments()->orderBy('date', 'asc')->get()
+                ->map(function ($payment) {
+                return [
                         'id' => $payment->id,
                         'date' => $payment->date,
                         'amount' => $payment->amount->format(),
                         'type' => $payment->type,
                         'delete_link' => $payment->delete_link,
-                ]),
+                ];
+            }),
             'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue($contract->insurance_type)->key : null,
             'deleted_at' => $contract->deleted_at,
-            'contact' => [
-                'id' => $contract->contact->id,
-                'name' => $contract->contact->name,
-                'firstname' => $contract->contact->firstname,
-                'lastname' => $contract->contact->lastname,
-                'phone' => $contract->contact->phone,
-                'address' => $contract->contact->address,
-                'zip' => $contract->contact->zip,
-                'city' => $contract->contact->city,
-                'country' => $contract->contact->country,
-                'company' => $contract->contact->company,
-                'email' => $contract->contact->email,
-                'link' => route('contacts.show', $contract->contact),
-            ],
-            'car' => [
-                'id' => $contract->car->id,
-                'stammnummer' => $contract->car->stammnummer,
-                'vin' => $contract->car->vin,
-                'car_model' => $contract->car->carModel->only('id', 'name'),
-                'brand' => $contract->car->brand,
-                'name' => $contract->car->name,
-                'initial_date' => $contract->car->initial_date_formatted,
-                'colour' => $contract->car->colour,
-                'deleted_at' => $contract->car->deleted_at,
-                'link' => route('cars.show', $contract->car),
-            ],
+            'contact' => $contract->contact->only(['id', 'full_title', 'link']),
+            'car' => $contract->car->only(['id', 'name_with_year', 'link']),
         ],
     ]);
     }
diff --git a/app/Models/Car.php b/app/Models/Car.php
index 836b398..6c9f429 100644
--- a/app/Models/Car.php
+++ b/app/Models/Car.php
@@ -32,6 +32,16 @@ class Car extends Model
         return $out;
     }
 
+    public function getNameWithYearAttribute()
+    {
+        return $this->name . ' (' . $this->year . ')';
+    }
+
+    public function getYearAttribute()
+    {
+        return Carbon::parse($this->initial_date)->format('Y');
+    }
+
     public function getKilometersFormattedAttribute()
     {
         return number_format($this->kilometers, 0, '.', '\'');
@@ -56,6 +66,11 @@ class Car extends Model
         return null;
     }
 
+    public function getLinkAttribute()
+    {
+        return route('cars.show', $this);
+    }
+
     public function brand()
     {
         return $this->carModel->brand();
diff --git a/app/Models/Contact.php b/app/Models/Contact.php
index 58780f6..693ace2 100644
--- a/app/Models/Contact.php
+++ b/app/Models/Contact.php
@@ -63,6 +63,11 @@ class Contact extends Model
         return $this->zip . ' ' . $this->city;
     }
 
+    public function getLinkAttribute()
+    {
+        return route('contacts.show', $this);
+    }
+
     public function scopeOrderByName($query, $direction)
     {
         $query->orderBy('lastname', $direction)->orderBy('firstname', $direction);
diff --git a/public/js/app.js b/public/js/app.js
index 954b2c7..88bc8e7 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -18270,13 +18270,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
 /* harmony import */ var _Item_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Item.vue */ "./resources/js/Components/Documents/Item.vue");
 /* harmony import */ var _Upload_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Upload.vue */ "./resources/js/Components/Documents/Upload.vue");
+/* harmony import */ var _SmallTitle_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./../SmallTitle.vue */ "./resources/js/Components/SmallTitle.vue");
+
 
 
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   components: {
     DocumentItem: _Item_vue__WEBPACK_IMPORTED_MODULE_1__.default,
-    DocumentUpload: _Upload_vue__WEBPACK_IMPORTED_MODULE_2__.default
+    DocumentUpload: _Upload_vue__WEBPACK_IMPORTED_MODULE_2__.default,
+    SmallTitle: _SmallTitle_vue__WEBPACK_IMPORTED_MODULE_3__.default
   },
   props: {
     initial_documents: Object,
@@ -18592,10 +18595,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _Layouts_Layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/Layouts/Layout */ "./resources/js/Layouts/Layout.vue");
+/* harmony import */ var _SmallTitle_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SmallTitle.vue */ "./resources/js/Components/SmallTitle.vue");
+
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   components: {
-    Layout: _Layouts_Layout__WEBPACK_IMPORTED_MODULE_0__.default
+    Layout: _Layouts_Layout__WEBPACK_IMPORTED_MODULE_0__.default,
+    SmallTitle: _SmallTitle_vue__WEBPACK_IMPORTED_MODULE_1__.default
   }
 });
 
@@ -18721,6 +18727,25 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/SmallTitle.vue?vue&type=script&lang=js":
+/*!****************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/SmallTitle.vue?vue&type=script&lang=js ***!
+  \****************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  props: {
+    title: String
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Jetstream/ActionMessage.vue?vue&type=script&lang=js":
 /*!******************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Jetstream/ActionMessage.vue?vue&type=script&lang=js ***!
@@ -20397,11 +20422,11 @@ __webpack_require__.r(__webpack_exports__);
       currentRoute: 'cars',
       columns: [{
         key: 'name',
-        value: 'Name',
+        value: 'Marke & Modell',
         sortable: true
       }, {
         key: 'stammnummer',
-        value: 'Stammummer',
+        value: 'Stammnummer',
         sortable: true
       }, {
         key: 'buy_contract.date',
@@ -20445,6 +20470,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Components/Buttons/EditButton.vue */ "./resources/js/Components/Buttons/EditButton.vue");
 /* harmony import */ var _Components_Buttons_DeleteButton_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Components/Buttons/DeleteButton.vue */ "./resources/js/Components/Buttons/DeleteButton.vue");
 /* harmony import */ var _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Components/Buttons/RestoreButton.vue */ "./resources/js/Components/Buttons/RestoreButton.vue");
+/* harmony import */ var _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Components/Buttons/StandardButton.vue */ "./resources/js/Components/Buttons/StandardButton.vue");
+/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+
+
 
 
 
@@ -20462,14 +20491,42 @@ __webpack_require__.r(__webpack_exports__);
     SellContractCard: _Components_SellContractCard_vue__WEBPACK_IMPORTED_MODULE_4__.default,
     EditButton: _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_5__.default,
     DeleteButton: _Components_Buttons_DeleteButton_vue__WEBPACK_IMPORTED_MODULE_6__.default,
-    RestoreButton: _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__.default
+    RestoreButton: _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__.default,
+    StandardButton: _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_8__.default,
+    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_9__.default
   },
   props: {
     car: Object
   },
   data: function data() {
     return {
-      currentRoute: 'cars.show'
+      currentRoute: 'cars.show',
+      buyContractColumns: [{
+        key: 'date',
+        value: 'Datum',
+        sortable: false
+      }, {
+        key: 'contact',
+        value: 'Verkäufer',
+        sortable: false
+      }, {
+        key: 'price',
+        value: 'Einkaufspreis',
+        sortable: false
+      }],
+      sellContractColumns: [{
+        key: 'date',
+        value: 'Datum',
+        sortable: false
+      }, {
+        key: 'contact',
+        value: 'Käufer',
+        sortable: false
+      }, {
+        key: 'price',
+        value: 'Verkaufspreis',
+        sortable: false
+      }]
     };
   }
 });
@@ -20509,11 +20566,11 @@ __webpack_require__.r(__webpack_exports__);
       currentRoute: 'cars.sold',
       columns: [{
         key: 'name',
-        value: 'Name',
+        value: 'Marke & Modell',
         sortable: true
       }, {
         key: 'stammnummer',
-        value: 'Stammummer',
+        value: 'Stammnummer',
         sortable: true
       }, {
         key: 'buy_contract.date',
@@ -20571,11 +20628,11 @@ __webpack_require__.r(__webpack_exports__);
       currentRoute: 'cars.unsold',
       columns: [{
         key: 'name',
-        value: 'Name',
+        value: 'Marke & Modell',
         sortable: true
       }, {
         key: 'stammnummer',
-        value: 'Stammummer',
+        value: 'Stammnummer',
         sortable: true
       }, {
         key: 'initial_date',
@@ -20993,6 +21050,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Components/Buttons/EditButton.vue */ "./resources/js/Components/Buttons/EditButton.vue");
 /* harmony import */ var _Components_Buttons_DeleteButton_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Components/Buttons/DeleteButton.vue */ "./resources/js/Components/Buttons/DeleteButton.vue");
 /* harmony import */ var _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/Components/Buttons/RestoreButton.vue */ "./resources/js/Components/Buttons/RestoreButton.vue");
+/* harmony import */ var _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Components/SimpleTable.vue */ "./resources/js/Components/SimpleTable.vue");
+/* harmony import */ var _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Components/Buttons/StandardButton.vue */ "./resources/js/Components/Buttons/StandardButton.vue");
+
+
 
 
 
@@ -21010,14 +21071,42 @@ __webpack_require__.r(__webpack_exports__);
     SellContractCard: _Components_SellContractCard_vue__WEBPACK_IMPORTED_MODULE_4__.default,
     EditButton: _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_5__.default,
     DeleteButton: _Components_Buttons_DeleteButton_vue__WEBPACK_IMPORTED_MODULE_6__.default,
-    RestoreButton: _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__.default
+    RestoreButton: _Components_Buttons_RestoreButton_vue__WEBPACK_IMPORTED_MODULE_7__.default,
+    SimpleTable: _Components_SimpleTable_vue__WEBPACK_IMPORTED_MODULE_8__.default,
+    StandardButton: _Components_Buttons_StandardButton_vue__WEBPACK_IMPORTED_MODULE_9__.default
   },
   props: {
     contact: Object
   },
   data: function data() {
     return {
-      currentRoute: 'contacts.show'
+      currentRoute: 'contacts.show',
+      buyContractColumns: [{
+        key: 'date',
+        value: 'Datum',
+        sortable: false
+      }, {
+        key: 'car',
+        value: 'Auto',
+        sortable: false
+      }, {
+        key: 'price',
+        value: 'Einkaufspreis',
+        sortable: false
+      }],
+      sellContractColumns: [{
+        key: 'date',
+        value: 'Datum',
+        sortable: false
+      }, {
+        key: 'car',
+        value: 'Auto',
+        sortable: false
+      }, {
+        key: 'price',
+        value: 'Verkaufspreis',
+        sortable: false
+      }]
     };
   }
 });
@@ -21510,6 +21599,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Components_Documents_View_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/Components/Documents/View.vue */ "./resources/js/Components/Documents/View.vue");
 /* harmony import */ var _Components_Payments_View_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/Components/Payments/View.vue */ "./resources/js/Components/Payments/View.vue");
 /* harmony import */ var _Components_Payments_Upload_vue__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @/Components/Payments/Upload.vue */ "./resources/js/Components/Payments/Upload.vue");
+/* harmony import */ var _Components_SmallTitle_vue__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../Components/SmallTitle.vue */ "./resources/js/Components/SmallTitle.vue");
+
 
 
 
@@ -21533,7 +21624,8 @@ __webpack_require__.r(__webpack_exports__);
     EditButton: _Components_Buttons_EditButton_vue__WEBPACK_IMPORTED_MODULE_7__.default,
     DocumentsView: _Components_Documents_View_vue__WEBPACK_IMPORTED_MODULE_8__.default,
     PaymentsView: _Components_Payments_View_vue__WEBPACK_IMPORTED_MODULE_9__.default,
-    PaymentsUpload: _Components_Payments_Upload_vue__WEBPACK_IMPORTED_MODULE_10__.default
+    PaymentsUpload: _Components_Payments_Upload_vue__WEBPACK_IMPORTED_MODULE_10__.default,
+    SmallTitle: _Components_SmallTitle_vue__WEBPACK_IMPORTED_MODULE_11__.default
   },
   props: {
     contract: Object
@@ -22522,7 +22614,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_inertia_link, {
     href: $props.href,
-    "class": "justify-center inline-flex items-center px-4 py-2  font-semibold text-xs text-red-300 hover:text-red-500 uppercase tracking-widest hover:font-underline transition"
+    "class": "justify-center inline-flex items-center px-4 py-2  font-semibold text-xs text-red-400 hover:text-red-500 uppercase tracking-widest hover:font-underline transition"
   }, {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
@@ -22746,58 +22838,58 @@ var _hoisted_1 = {
 };
 var _hoisted_2 = {
   key: 0,
-  "class": "font-bold pb-1 mb-1 text-2xl border-b"
+  "class": "font-bold"
 };
 var _hoisted_3 = {
-  "class": "grid grid-cols-2 xl:grid-cols-4 gap-2 w-full"
+  "class": "grid grid-cols-2 xl:grid-cols-4 gap-0 w-full"
 };
 var _hoisted_4 = {
   key: 0,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_5 = {
   key: 1,
-  "class": "col-span-1 xl:col-span-3"
+  "class": "col-span-2"
 };
 var _hoisted_6 = {
   key: 2,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_7 = {
   key: 3,
-  "class": "col-span-1 xl:col-span-3"
+  "class": "col-span-2"
 };
 var _hoisted_8 = {
   key: 4,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_9 = {
   key: 5,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_10 = {
   key: 6,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_11 = {
   key: 7,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_12 = {
   key: 8,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_13 = {
   key: 9,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_14 = {
   key: 10,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_15 = {
   key: 11,
-  "class": "col-span-1"
+  "class": "col-span-2"
 };
 var _hoisted_16 = {
   key: 1,
@@ -22833,7 +22925,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_inertia_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("inertia-link");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_1, [$props.car.name ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.car.name), 1
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_1, [!$props.hideEmpty || $props.car.name ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.car.name ? $props.car.name : '-'), 1
   /* TEXT */
   )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [!$props.hideEmpty || $props.car.stammnummer ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_4, " Stammnummer ")) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), !$props.hideEmpty || $props.car.stammnummer ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.car.stammnummer ? $props.car.stammnummer : '-'), 1
   /* TEXT */
@@ -23295,7 +23387,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     href: "#",
     "class": "absolute right-0 opacity-0 group-hover:opacity-80 transition"
   }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-    fill: "#f54242",
+    fill: "#f04040",
     "hover-fill": "red",
     "class": "p-2",
     height: "40",
@@ -23404,22 +23496,20 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
-
-var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", {
-  "class": "mb-3"
-}, "Dokumente", -1
-/* HOISTED */
-);
-
-var _hoisted_2 = {
-  "class": "grid sm:grid-cols-8 grid-cols-6 gap-3"
+var _hoisted_1 = {
+  "class": "grid md:grid-cols-6 sm:grid-cols-4 grid-cols-2 gap-3"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_small_title = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("small-title");
+
   var _component_document_item = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("document-item");
 
   var _component_document_upload = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("document-upload");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($data.documents, function (document) {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_small_title, {
+    title: "Dokumente",
+    "class": "mb-3"
+  }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_1, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($data.documents, function (document) {
     return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_document_item, {
       key: document.id,
       onDelete: $options.deleteDocument,
@@ -23813,7 +23903,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_payment_create_modal = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("payment-create-modal");
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_standard_button, {
-    "class": "mb-3",
     colour: "green",
     onClick: $options.openModal,
     href: _ctx.route('payments.create', $props.contract.id)
@@ -23862,41 +23951,32 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
-
-var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", {
-  "class": "w-full inline-flex items-end justify-between mb-3"
-}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", null, "Einzahlungen")], -1
-/* HOISTED */
-);
-
-var _hoisted_2 = {
+var _hoisted_1 = {
   "class": "w-full mx-auto"
 };
-var _hoisted_3 = {
+var _hoisted_2 = {
   "class": "py-5 text-xl"
 };
 
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("Total ");
+var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("Total ");
 
-var _hoisted_5 = {
+var _hoisted_4 = {
   "class": "font-bold ml-5"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
     data: $props.payments,
     columns: $data.columns,
     onDelete: $options.deletePayment
   }, null, 8
   /* PROPS */
-  , ["data", "columns", "onDelete"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", _hoisted_3, [_hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.paid), 1
+  , ["data", "columns", "onDelete"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", _hoisted_2, [_hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.paid), 1
   /* TEXT */
   ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" / " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.price), 1
   /* TEXT */
-  )])])], 64
-  /* STABLE_FRAGMENT */
-  );
+  )])]);
 }
 
 /***/ }),
@@ -23944,10 +24024,10 @@ var _hoisted_1 = {
   "class": "grid grid-cols-12 gap-12 mb-8"
 };
 var _hoisted_2 = {
-  "class": "xl:col-span-6 sm:col-span-8 col-span-12"
+  "class": "xl:col-span-6 col-span-12"
 };
 var _hoisted_3 = {
-  "class": "xl:col-span-3 sm:col-span-4 col-span-12"
+  "class": "xl:col-span-3 xl:col-end-13 col-span-12"
 };
 var _hoisted_4 = {
   "class": "w-full flex flex-col"
@@ -23956,6 +24036,8 @@ var _hoisted_5 = {
   "class": "grid grid-cols-12 gap-12"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_small_title = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("small-title");
+
   var _component_layout = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("layout");
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_layout, null, {
@@ -23963,7 +24045,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "header")];
     }),
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "info")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "actions")])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "more")])];
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "info")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_small_title, {
+        title: "Aktionen",
+        "class": "mb-3"
+      }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "actions")])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "more")])];
     }),
     _: 3
     /* FORWARDED */
@@ -24257,54 +24342,59 @@ __webpack_require__.r(__webpack_exports__);
 
 var _hoisted_1 = {
   key: 0,
-  "class": "font-semibold text-2xl font-medium mb-4 text-indigo-900 leading-tight"
+  "class": "flex justify-between items-end mb-4"
 };
 var _hoisted_2 = {
-  key: 1,
-  "class": "my-6 flex justify-between items-center"
+  key: 0,
+  "class": "font-semibold text-2xl font-medium text-indigo-900 leading-tight"
 };
 var _hoisted_3 = {
-  "class": "flex items-center w-full max-w-md mr-4"
+  key: 1,
+  "class": "my-4 flex justify-between items-center"
 };
 var _hoisted_4 = {
+  key: 0,
+  "class": "flex items-center w-full max-w-md mr-4"
+};
+var _hoisted_5 = {
   "class": "flex w-full bg-white shadow rounded"
 };
 
-var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Excel-Export ");
+var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Excel-Export ");
 
-var _hoisted_6 = {
+var _hoisted_7 = {
   key: 2,
   "class": "bg-white shadow rounded-md sm:rounded-lg overflow-x-auto"
 };
-var _hoisted_7 = {
+var _hoisted_8 = {
   "class": "w-full whitespace-nowrap"
 };
-var _hoisted_8 = {
+var _hoisted_9 = {
   "class": "text-left font-bold"
 };
-var _hoisted_9 = {
+var _hoisted_10 = {
   key: 1,
   "class": "flex items-center"
 };
-var _hoisted_10 = {
-  key: 2,
-  "class": "px-6 py-4 flex items-center"
-};
 var _hoisted_11 = {
+  key: 2,
+  "class": "px-6 xl:py-4 py-2 flex items-center"
+};
+var _hoisted_12 = {
   key: 0,
   "class": "border-t w-px"
 };
-var _hoisted_12 = {
+var _hoisted_13 = {
   key: 0
 };
-var _hoisted_13 = {
+var _hoisted_14 = {
   key: 3
 };
-var _hoisted_14 = {
+var _hoisted_15 = {
   "class": "inline-flex font-medium text-gray-500 ml-3"
 };
 
-var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Keine Einträge gefunden ");
+var _hoisted_16 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Keine Einträge gefunden ");
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _this = this;
@@ -24315,9 +24405,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_Paginator = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Paginator");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [$props.title ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("p", _hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.title), 1
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [$props.title ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_1, [$props.title ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("p", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.title), 1
   /* TEXT */
-  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $data.form ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("input", {
+  )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "actions", {
+    "class": ""
+  })])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $data.form || $props.print ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_3, [$data.form ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("input", {
     type: "text",
     ref: "search",
     "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
@@ -24336,8 +24428,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     type: "button",
     "class": "ml-3 text-sm text-gray-500 hover:text-gray-700 focus:text-blue-200"
-  }, "Reset")]), $props.print ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("a", {
-    key: 0,
+  }, "Reset")])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.print ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("a", {
+    key: 1,
     href: _ctx.route($props.currentRoute + '.print', {
       search: $data.form.search,
       sortBy: $data.sort.by,
@@ -24350,9 +24442,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     height: "24",
     width: "24",
     name: "chart"
-  }), _hoisted_5], 8
+  }), _hoisted_6], 8
   /* PROPS */
-  , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.data.total === undefined || $props.data.total > 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("table", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("tr", _hoisted_8, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.columns, function (col, index) {
+  , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.data.total === undefined && $props.data.length > 0 || $props.data.total > 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("table", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("tr", _hoisted_9, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.columns, function (col, index) {
     return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("th", {
       key: col.key,
       "class": "px-6 pt-4 pb-4",
@@ -24380,7 +24472,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       name: "arrow-down"
     })) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)], 8
     /* PROPS */
-    , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value), 1
+    , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(col.value), 1
     /* TEXT */
     ))], 8
     /* PROPS */
@@ -24397,7 +24489,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": "border-t"
       }, [row.link ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_inertia_link, {
         key: 0,
-        "class": "px-6 py-4 flex items-center",
+        "class": "px-6 xl:py-4 py-2 flex items-center",
         href: row.link
       }, {
         "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
@@ -24417,19 +24509,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           return _this.$emit('delete', row.id);
         }
       }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-        fill: "red",
+        fill: "#f04040",
+        "hover-fill": "red",
         height: "24",
         width: "24",
         name: "trash-alt"
       })], 8
       /* PROPS */
-      , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.resolve(col.key, row)), 1
+      , ["onClick"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.resolve(col.key, row)), 1
       /* TEXT */
       ))]);
     }), 128
     /* KEYED_FRAGMENT */
-    )), row.link && !$props.hideArrow ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
-      "class": "px-4 flex items-center",
+    )), row.link && !$props.hideArrow ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("td", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
+      "class": "xl:py-4 py-2 flex items-center",
       href: row.link,
       tabindex: "-1"
     }, {
@@ -24449,18 +24542,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
   }), 128
   /* KEYED_FRAGMENT */
-  )), $props.data.total === 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("tr", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("td", {
+  )), $props.data.total === 0 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("tr", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("td", {
     "class": "border-t px-6 py-4",
     colspan: $props.columns.length
   }, "Keine Einträge gefunden", 8
   /* PROPS */
-  , ["colspan"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+  , ["colspan"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
     fill: "#7e8491",
     "class": "mr-2",
     height: "24",
     width: "24",
     name: "meh"
-  }), _hoisted_15])])), $props.data.links ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Paginator, {
+  }), _hoisted_16])])), $props.data.links ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Paginator, {
     key: 4,
     "class": "mt-6",
     links: $props.data.links
@@ -24471,6 +24564,30 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/SmallTitle.vue?vue&type=template&id=6820f4c8":
+/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/SmallTitle.vue?vue&type=template&id=6820f4c8 ***!
+  \********************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+var _hoisted_1 = {
+  "class": "font-semibold"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("h3", _hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.title), 1
+  /* TEXT */
+  );
+}
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Jetstream/ActionMessage.vue?vue&type=template&id=bcb26626":
 /*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Jetstream/ActionMessage.vue?vue&type=template&id=bcb26626 ***!
@@ -28211,34 +28328,16 @@ var _hoisted_2 = {
   key: 3
 };
 var _hoisted_3 = {
-  "class": "sm:col-span-6 col-span-12"
-};
-var _hoisted_4 = {
-  "class": "whitespace-nowrap"
+  "class": "xl:col-span-6 col-span-12"
 };
+
+var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Ankaufsvertrag ");
+
 var _hoisted_5 = {
-  "class": "font-bold text-3xl"
-};
-var _hoisted_6 = {
-  key: 0
+  "class": "xl:col-span-6 col-span-12"
 };
 
-var _hoisted_7 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Neuer Ankaufsvertrag ");
-
-var _hoisted_8 = {
-  "class": "sm:col-span-6 col-span-12"
-};
-var _hoisted_9 = {
-  "class": "whitespace-nowrap"
-};
-var _hoisted_10 = {
-  "class": "font-bold text-3xl"
-};
-var _hoisted_11 = {
-  key: 0
-};
-
-var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Neuer Verkaufssvertrag ");
+var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Verkaufssvertrag ");
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_bread_crumb = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("bread-crumb");
@@ -28251,13 +28350,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_restore_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("restore-button");
 
-  var _component_buy_contract_card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("buy-contract-card");
-
   var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
 
-  var _component_inertia_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("inertia-link");
+  var _component_standard_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("standard-button");
 
-  var _component_sell_contract_card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("sell-contract-card");
+  var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
 
   var _component_show_page = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("show-page");
 
@@ -28300,67 +28397,75 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
     }),
     more: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h1", _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.car.buy_contracts.total > 1 ? $props.car.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag'), 1
-      /* TEXT */
-      )]), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.car.buy_contracts.data, function (contract) {
-        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", {
-          key: contract.id
-        }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_buy_contract_card, {
-          contract: contract
-        }, null, 8
-        /* PROPS */
-        , ["contract"])]);
-      }), 128
-      /* KEYED_FRAGMENT */
-      )), !$props.car.deleted_at && $props.car.buy_contracts.total <= $props.car.sell_contracts.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
-        href: _ctx.route('contracts.create_from_car', [0, $props.car.id]),
-        "class": "w-full py-6 mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition"
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+        title: $props.car.buy_contracts.total > 1 ? $props.car.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag',
+        data: $props.car.buy_contracts,
+        columns: $data.buyContractColumns,
+        currentRoute: $data.currentRoute,
+        hideArrow: true
       }, {
-        "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-            fill: "white",
-            "class": "mr-1",
-            height: "22",
-            width: "22",
-            name: "plus-circle"
-          }), _hoisted_7];
+        actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [!$props.car.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_standard_button, {
+            key: 0,
+            colour: "green",
+            href: _ctx.route('contracts.create_from_car', [0, $props.car.id])
+          }, {
+            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+              return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+                fill: "currentColor",
+                "class": "mr-1",
+                height: "22",
+                width: "22",
+                name: "plus-circle"
+              }), _hoisted_4];
+            }),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
         }),
         _: 1
         /* STABLE */
 
       }, 8
       /* PROPS */
-      , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h1", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.car.sell_contracts.total > 1 ? $props.car.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag'), 1
-      /* TEXT */
-      )]), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.car.sell_contracts.data, function (contract) {
-        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", {
-          key: contract.id
-        }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_sell_contract_card, {
-          contract: contract
-        }, null, 8
-        /* PROPS */
-        , ["contract"])]);
-      }), 128
-      /* KEYED_FRAGMENT */
-      )), !$props.car.deleted_at && $props.car.buy_contracts.total > $props.car.sell_contracts.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
-        href: _ctx.route('contracts.create_from_car', [1, $props.car.id]),
-        "class": "py-6 w-full mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition"
+      , ["title", "data", "columns", "currentRoute"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+        title: $props.car.sell_contracts.total > 1 ? $props.car.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag',
+        data: $props.car.sell_contracts,
+        columns: $data.sellContractColumns,
+        currentRoute: $data.currentRoute,
+        hideArrow: true
       }, {
-        "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-            fill: "white",
-            "class": "mr-1",
-            height: "22",
-            width: "22",
-            name: "plus-circle"
-          }), _hoisted_12];
+        actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [!$props.car.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_standard_button, {
+            key: 0,
+            colour: "green",
+            href: _ctx.route('contracts.create_from_car', [1, $props.car.id])
+          }, {
+            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+              return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+                fill: "currentColor",
+                "class": "mr-1",
+                height: "22",
+                width: "22",
+                name: "plus-circle"
+              }), _hoisted_6];
+            }),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
         }),
         _: 1
         /* STABLE */
 
       }, 8
       /* PROPS */
-      , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])];
+      , ["title", "data", "columns", "currentRoute"])])];
     }),
     _: 1
     /* STABLE */
@@ -29175,34 +29280,16 @@ var _hoisted_2 = {
   key: 3
 };
 var _hoisted_3 = {
-  "class": "sm:col-span-10 col-span-12"
-};
-var _hoisted_4 = {
-  "class": "whitespace-nowrap"
+  "class": "xl:col-span-6 col-span-12"
 };
+
+var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Ankaufsvertrag ");
+
 var _hoisted_5 = {
-  "class": "font-bold text-3xl"
-};
-var _hoisted_6 = {
-  key: 0
+  "class": "xl:col-span-6 col-span-12"
 };
 
-var _hoisted_7 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Neuer Ankaufsvertrag ");
-
-var _hoisted_8 = {
-  "class": "sm:col-span-10 col-span-12"
-};
-var _hoisted_9 = {
-  "class": "whitespace-nowrap"
-};
-var _hoisted_10 = {
-  "class": "font-bold text-3xl"
-};
-var _hoisted_11 = {
-  key: 0
-};
-
-var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Neuer Verkaufssvertrag ");
+var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Verkaufssvertrag ");
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_bread_crumb = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("bread-crumb");
@@ -29217,11 +29304,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
 
-  var _component_inertia_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("inertia-link");
+  var _component_standard_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("standard-button");
 
-  var _component_buy_contract_card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("buy-contract-card");
-
-  var _component_sell_contract_card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("sell-contract-card");
+  var _component_simple_table = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("simple-table");
 
   var _component_show_page = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("show-page");
 
@@ -29264,67 +29349,75 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
     }),
     more: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h1", _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contact.buy_contracts.total > 1 ? $props.contact.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag'), 1
-      /* TEXT */
-      )]), !$props.contact.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
-        href: _ctx.route('contracts.create_from_contact', [0, $props.contact.id]),
-        "class": "w-full py-6 mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition"
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+        title: $props.contact.buy_contracts.total > 1 ? $props.contact.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag',
+        data: $props.contact.buy_contracts,
+        columns: $data.buyContractColumns,
+        currentRoute: $data.currentRoute,
+        hideArrow: true
       }, {
-        "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-            fill: "white",
-            "class": "mr-1",
-            height: "22",
-            width: "22",
-            name: "plus-circle"
-          }), _hoisted_7];
+        actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [!$props.contact.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_standard_button, {
+            key: 0,
+            colour: "green",
+            href: _ctx.route('contracts.create_from_contact', [0, $props.contact.id])
+          }, {
+            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+              return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+                fill: "currentColor",
+                "class": "mr-1",
+                height: "22",
+                width: "22",
+                name: "plus-circle"
+              }), _hoisted_4];
+            }),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
         }),
         _: 1
         /* STABLE */
 
       }, 8
       /* PROPS */
-      , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.contact.buy_contracts.data, function (contract) {
-        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", {
-          key: contract.id
-        }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_buy_contract_card, {
-          contract: contract
-        }, null, 8
-        /* PROPS */
-        , ["contract"])]);
-      }), 128
-      /* KEYED_FRAGMENT */
-      ))]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h1", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contact.sell_contracts.total > 1 ? $props.contact.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag'), 1
-      /* TEXT */
-      )]), !$props.contact.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
-        href: _ctx.route('contracts.create_from_contact', [1, $props.contact.id]),
-        "class": "py-6 w-full mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition"
+      , ["title", "data", "columns", "currentRoute"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_simple_table, {
+        title: $props.contact.sell_contracts.total > 1 ? $props.contact.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag',
+        data: $props.contact.sell_contracts,
+        columns: $data.sellContractColumns,
+        currentRoute: $data.currentRoute,
+        hideArrow: true
       }, {
-        "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
-            fill: "white",
-            "class": "mr-1",
-            height: "22",
-            width: "22",
-            name: "plus-circle"
-          }), _hoisted_12];
+        actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [!$props.contact.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_standard_button, {
+            key: 0,
+            colour: "green",
+            href: _ctx.route('contracts.create_from_contact', [1, $props.contact.id])
+          }, {
+            "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+              return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+                fill: "currentColor",
+                "class": "mr-1",
+                height: "22",
+                width: "22",
+                name: "plus-circle"
+              }), _hoisted_6];
+            }),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
         }),
         _: 1
         /* STABLE */
 
       }, 8
       /* PROPS */
-      , ["href"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.contact.sell_contracts.data, function (contract) {
-        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", {
-          key: contract.id
-        }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_sell_contract_card, {
-          contract: contract
-        }, null, 8
-        /* PROPS */
-        , ["contract"])]);
-      }), 128
-      /* KEYED_FRAGMENT */
-      ))])];
+      , ["title", "data", "columns", "currentRoute"])])];
     }),
     _: 1
     /* STABLE */
@@ -30216,127 +30309,126 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
 var _hoisted_1 = {
-  "class": "p-5 bg-white shadow rounded-md font-medium"
-};
-var _hoisted_2 = {
-  "class": "font-bold pb-1 mb-1 text-2xl border-b"
-};
-var _hoisted_3 = {
-  "class": "grid grid-cols-4 gap-2 w-full"
+  "class": "grid  grid-cols-12 gap-2 p-5 bg-white shadow rounded-md font-medium"
 };
 
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
-  "class": "lg:col-span-1 col-span-2"
+var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
+  "class": "col-span-4"
 }, " Datum ", -1
 /* HOISTED */
 );
 
+var _hoisted_3 = {
+  "class": "col-span-8"
+};
+var _hoisted_4 = {
+  "class": "col-span-12 sm:col-span-4 pt-3 sm:pt-0"
+};
 var _hoisted_5 = {
-  "class": "lg:col-span-3 col-span-2"
+  "class": "col-span-12 sm:col-span-8"
 };
 
 var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
-  "class": "lg:col-span-1 col-span-2"
-}, " Lieferdatum ", -1
+  "class": "col-span-12 sm:col-span-4 pt-3 sm:pt-0"
+}, " Auto ", -1
 /* HOISTED */
 );
 
 var _hoisted_7 = {
-  "class": "lg:col-span-3 col-span-2"
-};
-var _hoisted_8 = {
-  key: 0,
-  "class": "lg:col-span-1 col-span-2"
-};
-var _hoisted_9 = {
-  key: 1,
-  "class": "lg:col-span-3 col-span-2"
+  "class": "col-span-12 sm:col-span-8 pb-3 sm:pb-0"
 };
 
-var _hoisted_10 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
-  "class": "lg:col-span-1 col-span-2"
+var _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
+  "class": "col-span-4"
+}, " Lieferdatum ", -1
+/* HOISTED */
+);
+
+var _hoisted_9 = {
+  "class": "col-span-8"
+};
+var _hoisted_10 = {
+  key: 0,
+  "class": "col-span-4"
+};
+var _hoisted_11 = {
+  key: 1,
+  "class": "col-span-8"
+};
+
+var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
+  "class": "col-span-4"
 }, " Betrag ", -1
 /* HOISTED */
 );
 
-var _hoisted_11 = {
-  "class": "lg:col-span-3 col-span-2 font-bold"
+var _hoisted_13 = {
+  "class": "col-span-8 font-bold"
 };
 
-var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
-  "class": "lg:col-span-1 col-span-2"
+var _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
+  "class": "col-span-4"
 }, " Bezahlt ", -1
 /* HOISTED */
 );
 
-var _hoisted_13 = {
-  "class": "lg:col-span-3 col-span-2"
+var _hoisted_15 = {
+  "class": "col-span-8"
 };
 
-var _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
-  "class": "lg:col-span-1 col-span-2"
+var _hoisted_16 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
+  "class": "col-span-4"
 }, " Offener Betrag ", -1
 /* HOISTED */
 );
 
-var _hoisted_15 = {
-  "class": "lg:col-span-3 col-span-2"
+var _hoisted_17 = {
+  "class": "col-span-8"
 };
-var _hoisted_16 = {
+var _hoisted_18 = {
   key: 2,
-  "class": "mt-3 col-span-4"
+  "class": "mt-3 col-span-12"
 };
 
-var _hoisted_17 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", {
+var _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", {
   "class": "font-bold"
 }, "Bemerkungen", -1
 /* HOISTED */
 );
 
-var _hoisted_18 = {
-  key: 4
+var _hoisted_20 = {
+  key: 3
 };
-var _hoisted_19 = {
-  "class": "lg:col-span-7 col-span-12"
-};
-
-var _hoisted_20 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", {
-  "class": "mb-3"
-}, "Auto", -1
-/* HOISTED */
-);
-
 var _hoisted_21 = {
-  "class": "lg:col-span-5 col-span-12"
+  "class": "xl:col-span-6 col-span-12"
 };
 var _hoisted_22 = {
-  "class": "mb-3"
+  "class": "w-full inline-flex items-end justify-between mb-3"
 };
 var _hoisted_23 = {
-  "class": "xl:col-span-7 col-span-12 mt-4"
-};
-var _hoisted_24 = {
-  "class": "xl:col-span-5 col-span-12"
+  "class": "xl:col-span-6 col-span-12 mt-4"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_small_title = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("small-title");
+
+  var _component_unicon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("unicon");
+
+  var _component_inertia_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("inertia-link");
+
   var _component_edit_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("edit-button");
 
   var _component_print_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("print-button");
 
-  var _component_payments_upload = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("payments-upload");
-
   var _component_delete_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("delete-button");
 
   var _component_restore_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("restore-button");
 
-  var _component_car_card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("car-card");
-
-  var _component_contact_card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("contact-card");
-
-  var _component_documents_view = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("documents-view");
+  var _component_payments_upload = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("payments-upload");
 
   var _component_payments_view = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("payments-view");
 
+  var _component_documents_view = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("documents-view");
+
   var _component_show_page = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("show-page");
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_show_page, null, {
@@ -30346,23 +30438,66 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       )];
     }),
     info: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.type_formatted) + " vom " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.date), 1
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_small_title, {
+        title: "Vertragsinformationen",
+        "class": "mb-3"
+      }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_1, [_hoisted_2, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.date), 1
       /* TEXT */
-      ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [_hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.date), 1
+      ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.contactTitle), 1
       /* TEXT */
-      ), _hoisted_6, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.delivery_date), 1
+      ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
+        href: $props.contract.contact.link,
+        "class": "font-bold flex items-center hover:text-indigo-600"
+      }, {
+        "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+            fill: "currentColor",
+            "class": "mr-1",
+            height: "22",
+            width: "22",
+            name: "arrow-right"
+          }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.contact.full_title), 1
+          /* TEXT */
+          )];
+        }),
+        _: 1
+        /* STABLE */
+
+      }, 8
+      /* PROPS */
+      , ["href"])]), _hoisted_6, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_inertia_link, {
+        href: $props.contract.car.link,
+        "class": "font-bold flex items-center hover:text-indigo-600"
+      }, {
+        "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_unicon, {
+            fill: "currentColor",
+            "class": "mr-1",
+            height: "22",
+            width: "22",
+            name: "arrow-right"
+          }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.car.name_with_year), 1
+          /* TEXT */
+          )];
+        }),
+        _: 1
+        /* STABLE */
+
+      }, 8
+      /* PROPS */
+      , ["href"])]), _hoisted_8, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.delivery_date), 1
       /* TEXT */
-      ), $props.contract.is_sell_contract && $props.contract.insurance_type ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_8, " Versicherung ")) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contract.is_sell_contract && $props.contract.insurance_type ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.insurance_type), 1
+      ), $props.contract.is_sell_contract && $props.contract.insurance_type ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_10, " Versicherung ")) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contract.is_sell_contract && $props.contract.insurance_type ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.insurance_type), 1
       /* TEXT */
-      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.price), 1
+      )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_13, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.price), 1
       /* TEXT */
-      ), _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_13, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.paid), 1
+      ), _hoisted_14, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.paid), 1
       /* TEXT */
-      ), _hoisted_14, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.left_to_pay), 1
+      ), _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_17, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.left_to_pay), 1
       /* TEXT */
-      ), $props.contract.notes ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_16, [_hoisted_17, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.notes), 1
+      ), $props.contract.notes ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_18, [_hoisted_19, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.notes), 1
       /* TEXT */
-      )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])];
+      )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])];
     }),
     actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [!$props.contract.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_edit_button, {
@@ -30374,50 +30509,41 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         href: _ctx.route('contracts.print', $props.contract.id)
       }, null, 8
       /* PROPS */
-      , ["href"]), !$props.contract.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_payments_upload, {
+      , ["href"]), !$props.contract.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_delete_button, {
         key: 1,
-        show_upload: !$props.contract.deleted_at,
-        contract: $props.contract
-      }, null, 8
-      /* PROPS */
-      , ["show_upload", "contract"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), !$props.contract.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_delete_button, {
-        key: 2,
         href: _ctx.route('contracts.destroy', $props.contract.id)
       }, null, 8
       /* PROPS */
       , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contract.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_restore_button, {
-        key: 3,
+        key: 2,
         href: _ctx.route('contracts.restore', $props.contract.id)
       }, null, 8
       /* PROPS */
-      , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contract.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_18, " gelöscht: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.deleted_at), 1
+      , ["href"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), $props.contract.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_20, " gelöscht: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.contract.deleted_at), 1
       /* TEXT */
       )) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
     }),
     more: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_19, [_hoisted_20, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_car_card, {
-        car: $props.contract.car,
-        hideEmpty: "true"
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_21, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_22, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_small_title, {
+        title: "Einzahlungen"
+      }), !$props.contract.deleted_at ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_payments_upload, {
+        key: 0,
+        show_upload: !$props.contract.deleted_at,
+        contract: $props.contract
       }, null, 8
       /* PROPS */
-      , ["car"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_21, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h3", _hoisted_22, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.contactTitle), 1
-      /* TEXT */
-      ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contact_card, {
-        contact: $props.contract.contact
+      , ["show_upload", "contract"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_payments_view, {
+        payments: $props.contract.payments,
+        contract: $props.contract
       }, null, 8
       /* PROPS */
-      , ["contact"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_23, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_documents_view, {
+      , ["payments", "contract"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_23, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_documents_view, {
         initial_documents: $props.contract.documents,
         id: $props.contract.id,
         show_upload: !$props.contract.deleted_at
       }, null, 8
       /* PROPS */
-      , ["initial_documents", "id", "show_upload"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_24, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_payments_view, {
-        payments: $props.contract.payments,
-        contract: $props.contract
-      }, null, 8
-      /* PROPS */
-      , ["payments", "contract"])])];
+      , ["initial_documents", "id", "show_upload"])])];
     }),
     _: 1
     /* STABLE */
@@ -63088,6 +63214,32 @@ _SimpleTable_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__
 
 /***/ }),
 
+/***/ "./resources/js/Components/SmallTitle.vue":
+/*!************************************************!*\
+  !*** ./resources/js/Components/SmallTitle.vue ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _SmallTitle_vue_vue_type_template_id_6820f4c8__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./SmallTitle.vue?vue&type=template&id=6820f4c8 */ "./resources/js/Components/SmallTitle.vue?vue&type=template&id=6820f4c8");
+/* harmony import */ var _SmallTitle_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SmallTitle.vue?vue&type=script&lang=js */ "./resources/js/Components/SmallTitle.vue?vue&type=script&lang=js");
+
+
+
+_SmallTitle_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _SmallTitle_vue_vue_type_template_id_6820f4c8__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_SmallTitle_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/Components/SmallTitle.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_SmallTitle_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/Jetstream/ActionMessage.vue":
 /*!**************************************************!*\
   !*** ./resources/js/Jetstream/ActionMessage.vue ***!
@@ -65341,6 +65493,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_SimpleTable_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./SimpleTable.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/SimpleTable.vue?vue&type=script&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/Components/SmallTitle.vue?vue&type=script&lang=js":
+/*!************************************************************************!*\
+  !*** ./resources/js/Components/SmallTitle.vue?vue&type=script&lang=js ***!
+  \************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_SmallTitle_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__.default)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_SmallTitle_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./SmallTitle.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/SmallTitle.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/Jetstream/ActionMessage.vue?vue&type=script&lang=js":
@@ -66797,6 +66965,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_SimpleTable_vue_vue_type_template_id_62481b7e__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./SimpleTable.vue?vue&type=template&id=62481b7e */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/SimpleTable.vue?vue&type=template&id=62481b7e");
 
 
+/***/ }),
+
+/***/ "./resources/js/Components/SmallTitle.vue?vue&type=template&id=6820f4c8":
+/*!******************************************************************************!*\
+  !*** ./resources/js/Components/SmallTitle.vue?vue&type=template&id=6820f4c8 ***!
+  \******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_SmallTitle_vue_vue_type_template_id_6820f4c8__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_SmallTitle_vue_vue_type_template_id_6820f4c8__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./SmallTitle.vue?vue&type=template&id=6820f4c8 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Components/SmallTitle.vue?vue&type=template&id=6820f4c8");
+
+
 /***/ }),
 
 /***/ "./resources/js/Jetstream/ActionMessage.vue?vue&type=template&id=bcb26626":
diff --git a/resources/js/Components/Buttons/DeleteButton.vue b/resources/js/Components/Buttons/DeleteButton.vue
index 847df3d..e906318 100644
--- a/resources/js/Components/Buttons/DeleteButton.vue
+++ b/resources/js/Components/Buttons/DeleteButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <inertia-link :href="href" class="justify-center inline-flex items-center px-4 py-2  font-semibold text-xs text-red-300 hover:text-red-500 uppercase tracking-widest hover:font-underline transition">
+  <inertia-link :href="href" class="justify-center inline-flex items-center px-4 py-2  font-semibold text-xs text-red-400 hover:text-red-500 uppercase tracking-widest hover:font-underline transition">
     <unicon fill="currentColor" class="mr-1" height="22" width="22" name="trash-alt"></unicon>
     löschen
   </inertia-link>
diff --git a/resources/js/Components/BuyContractCard.vue b/resources/js/Components/BuyContractCard.vue
deleted file mode 100644
index e8b8a5a..0000000
--- a/resources/js/Components/BuyContractCard.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <contract-card :contract="contract" :meta="meta" />
-</template>
-
-<script>
-import ContractCard from '@/Components/ContractCard.vue';
-
-export default {
-  components: {
-    ContractCard,
-  },
-  props: {
-    contract: Object,
-  },
-  data() {
-    return {
-      meta: {
-        contact: 'Verkäufer',
-      },
-    };
-  },
-};
-</script>
diff --git a/resources/js/Components/CarCard.vue b/resources/js/Components/CarCard.vue
index c9e39e9..1822642 100644
--- a/resources/js/Components/CarCard.vue
+++ b/resources/js/Components/CarCard.vue
@@ -1,43 +1,43 @@
 <template>
     <div class="p-5 bg-white shadow rounded-md font-medium">
-        <div v-if="car.name" class="font-bold pb-1 mb-1 text-2xl border-b">
-            {{ car.name }}
-        </div>
-        <div class="grid grid-cols-2 xl:grid-cols-4 gap-2 w-full">
-            <div v-if="!hideEmpty || car.stammnummer" class="col-span-1">
+        <div v-if="!hideEmpty || car.name" class="font-bold">
+                {{ car.name ? car.name : '-' }}
+            </div>
+        <div class="grid grid-cols-2 xl:grid-cols-4 gap-0 w-full">
+            <div v-if="!hideEmpty || car.stammnummer" class="col-span-2">
                 Stammnummer
             </div>
-            <div v-if="!hideEmpty || car.stammnummer" class="col-span-1 xl:col-span-3">
+            <div v-if="!hideEmpty || car.stammnummer" class="col-span-2">
                 {{ car.stammnummer ? car.stammnummer : '-' }}
             </div>
-            <div v-if="!hideEmpty || car.vin" class="col-span-1">
+            <div v-if="!hideEmpty || car.vin" class="col-span-2">
                 Chassisnummer
             </div>
-            <div v-if="!hideEmpty || car.vin" class="col-span-1 xl:col-span-3">
+            <div v-if="!hideEmpty || car.vin" class="col-span-2">
                 {{ car.vin ? car.vin : '-'}}
             </div>
-            <div v-if="!hideEmpty || car.colour" class="col-span-1">
+            <div v-if="!hideEmpty || car.colour" class="col-span-2">
                 Farbe
             </div>
-            <div v-if="!hideEmpty || car.colour" class="col-span-1">
+            <div v-if="!hideEmpty || car.colour" class="col-span-2">
                 {{ car.colour ? car.colour : '-' }}
             </div>
-            <div v-if="!hideEmpty || car.kilometers" class="col-span-1">
+            <div v-if="!hideEmpty || car.kilometers" class="col-span-2">
                 Kilometerstand
             </div>
-            <div v-if="!hideEmpty || car.kilometers" class="col-span-1">
+            <div v-if="!hideEmpty || car.kilometers" class="col-span-2">
                 {{ car.kilometers ? car.kilometers + ' KM' : '-' }}
             </div>
-            <div v-if="!hideEmpty || car.initial_date" class="col-span-1">
+            <div v-if="!hideEmpty || car.initial_date" class="col-span-2">
                 Erstzulassung
             </div>
-            <div v-if="!hideEmpty || car.initial_date" class="col-span-1">
+            <div v-if="!hideEmpty || car.initial_date" class="col-span-2">
                 {{ car.initial_date ? car.initial_date  : '-' }}
             </div>
-            <div v-if="!hideEmpty || car.last_check_date" class="col-span-1">
+            <div v-if="!hideEmpty || car.last_check_date" class="col-span-2">
                 Letzte Prüfung
             </div>
-            <div v-if="!hideEmpty || car.last_check_date" class="col-span-1">
+            <div v-if="!hideEmpty || car.last_check_date" class="col-span-2">
                 {{ car.last_check_date ? car.last_check_date  : '-' }}
             </div>
         </div>
diff --git a/resources/js/Components/ContractCard.vue b/resources/js/Components/ContractCard.vue
deleted file mode 100644
index c33f5ed..0000000
--- a/resources/js/Components/ContractCard.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-    <div class="py-3 grid grid-cols-12 gap-3 w-full">
-        <div v-if="contract.contact" class="sm:col-span-6 col-span-12">
-            <h3 class="mb-3">{{ meta.contact }}</h3>
-            <contact-card :contact="contract.contact" />
-        </div>
-        <div v-if="contract.car" class="sm:col-span-8 col-span-12">
-            <h3 class="mb-3">Auto</h3>
-            <car-card hide-empty="true" :car="contract.car" />
-        </div>
-        <div :class="contractClasses">
-            <h3>Vertragsinformationen</h3>
-            <div class="mt-3 p-5 bg-white shadow rounded-md font-medium">
-                <div class="grid grid-cols-4 gap-2">
-                    <div class="col-span-2">
-                        Datum
-                    </div>
-                    <div class="col-span-2">
-                        {{ contract.date }}
-                    </div>
-                    <div class="col-span-2">
-                        Lieferdatum
-                    </div>
-                    <div class="col-span-2">
-                        {{ contract.delivery_date }}
-                    </div>
-                    <div class="col-span-2" v-if="contract.is_sell_contract && contract.insurance_type">
-                        Versicherung
-                    </div>
-                    <div class="col-span-2" v-if="contract.is_sell_contract && contract.insurance_type">
-                        {{ contract.insurance_type }}
-                    </div>
-                    <div class="col-span-2">
-                        Betrag
-                    </div>
-                    <div class="col-span-2 font-bold">
-                        {{ contract.price }}
-                    </div>
-                    <div class="col-span-2">
-                        Bezahlt
-                    </div>
-                    <div class="col-span-2">
-                        {{ contract.paid }}
-                    </div>
-                    <div class="col-span-2">
-                        Offener Betrag
-                    </div>
-                    <div class="col-span-2">
-                        {{ contract.left_to_pay }}
-                    </div>
-                    <div v-if="contract.notes" class="col-span-2">
-                        Bemerkung
-                    </div>
-                    <div v-if="contract.notes" class="col-span-2">
-                        {{ contract.notes }}
-                    </div>
-                </div>
-                <div v-if="contract.link" class="pt-3 mt-3 border-t">
-                    <inertia-link :href="contract.link" class="pt-1 pb-1 flex items-center hover:text-indigo-600">
-                        <unicon fill="currentColor" class="mr-1" height="22" width="22" name="arrow-right"></unicon>
-                        Zum Vertrag
-                    </inertia-link>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import SimpleTable from '@/Components/SimpleTable.vue';
-import ContactCard from '@/Components/ContactCard.vue';
-import CarCard from '@/Components/CarCard.vue';
-import PrintButton from './Buttons/PrintButton.vue';
-
-export default {
-  components: {
-    SimpleTable,
-    ContactCard,
-    CarCard,
-    PrintButton,
-  },
-  props: {
-    contract: Object,
-    meta: Object,
-  },
-  computed: {
-    contractClasses() {
-      return `col-span-12 h-full relative sm:col-span-${this.contract.car ? '4' : '6'}`;
-    },
-  },
-  data() {
-    return {
-      sellContractsColumns: [
-        { key: 'buyer', value: 'Käufer' },
-        { key: 'date', value: 'Verkaufsdatum' },
-        { key: 'price', value: 'Verkaufspreis' },
-        { key: 'insurance_type', value: 'Versicherungstyp' },
-      ],
-    };
-  },
-};
-</script>
diff --git a/resources/js/Components/Documents/Item.vue b/resources/js/Components/Documents/Item.vue
index 08f0b19..635db19 100644
--- a/resources/js/Components/Documents/Item.vue
+++ b/resources/js/Components/Documents/Item.vue
@@ -1,7 +1,7 @@
 <template>
     <a target="_blank" :href="document.link" class="p-3 col-span-2 grid relative grid-flow-rows cursor-pointer group auto-rows-max hover:bg-gray-50 bg-white transition shadow rounded-md font-medium">
         <a @click="deleteDocument" href="#" class="absolute right-0 opacity-0 group-hover:opacity-80 transition">
-            <unicon fill="#f54242" hover-fill="red" class="p-2" height="40" width="40" name="trash-alt"></unicon>
+            <unicon fill="#f04040" hover-fill="red" class="p-2" height="40" width="40" name="trash-alt"></unicon>
         </a>
         <span class="justify-center inline-flex text-indigo-800 group-hover:text-indigo-700 items-center mx-auto">
             <unicon fill="currentColor" class="p-2" height="70" width="70" name="file-alt"></unicon>
diff --git a/resources/js/Components/Documents/View.vue b/resources/js/Components/Documents/View.vue
index 6b7f2f1..201f6f8 100644
--- a/resources/js/Components/Documents/View.vue
+++ b/resources/js/Components/Documents/View.vue
@@ -1,6 +1,6 @@
 <template>
-    <h3 class="mb-3">Dokumente</h3>
-    <div class="grid sm:grid-cols-8 grid-cols-6 gap-3">
+    <small-title title="Dokumente" class="mb-3" />
+    <div class="grid md:grid-cols-6 sm:grid-cols-4 grid-cols-2 gap-3">
         <template v-for="document in documents" :key="document.id">
             <document-item @delete="deleteDocument" :document="document" />
         </template>
@@ -12,11 +12,13 @@
 import { useForm } from '@inertiajs/inertia-vue3';
 import DocumentItem from './Item.vue';
 import DocumentUpload from './Upload.vue';
+import SmallTitle from './../SmallTitle.vue';
 
 export default {
   components: {
     DocumentItem,
     DocumentUpload,
+    SmallTitle,
   },
   props: {
     initial_documents: Object,
diff --git a/resources/js/Components/Payments/Upload.vue b/resources/js/Components/Payments/Upload.vue
index 36ff8f4..336130b 100644
--- a/resources/js/Components/Payments/Upload.vue
+++ b/resources/js/Components/Payments/Upload.vue
@@ -1,5 +1,5 @@
 <template>
-    <standard-button class="mb-3" colour="green" @click="openModal" :href="route('payments.create', contract.id)">
+    <standard-button colour="green" @click="openModal" :href="route('payments.create', contract.id)">
         <unicon fill="white" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
         Neue Einzahlung
     </standard-button>
diff --git a/resources/js/Components/Payments/View.vue b/resources/js/Components/Payments/View.vue
index b1c6585..f31c833 100644
--- a/resources/js/Components/Payments/View.vue
+++ b/resources/js/Components/Payments/View.vue
@@ -1,7 +1,4 @@
 <template>
-    <span class="w-full inline-flex items-end justify-between mb-3">
-        <h3>Einzahlungen</h3>
-    </span>
     <div class="w-full mx-auto">
         <simple-table :data="payments" :columns="columns" @delete="deletePayment" />
         <p class="py-5 text-xl">Total <span class="font-bold ml-5">{{ contract.paid }}</span> / {{ contract.price }}</p>
diff --git a/resources/js/Components/SellContractCard.vue b/resources/js/Components/SellContractCard.vue
deleted file mode 100644
index a54d154..0000000
--- a/resources/js/Components/SellContractCard.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <contract-card :contract="contract" :meta="meta" />
-</template>
-
-<script>
-import ContractCard from '@/Components/ContractCard.vue';
-
-export default {
-  components: {
-    ContractCard,
-  },
-  props: {
-    contract: Object,
-  },
-  data() {
-    return {
-      meta: {
-        contact: 'Käufer',
-      },
-    };
-  },
-};
-</script>
diff --git a/resources/js/Components/ShowPage.vue b/resources/js/Components/ShowPage.vue
index 660310b..cc75042 100644
--- a/resources/js/Components/ShowPage.vue
+++ b/resources/js/Components/ShowPage.vue
@@ -4,11 +4,12 @@
             <slot name="header"></slot>
         </template>
         <div class="grid grid-cols-12 gap-12 mb-8">
-            <div class="xl:col-span-6 sm:col-span-8 col-span-12">
+            <div class="xl:col-span-6 col-span-12">
                 <slot name="info"></slot>
             </div>
-            <div class="xl:col-span-3 sm:col-span-4 col-span-12">
+            <div class="xl:col-span-3 xl:col-end-13 col-span-12">
                 <div class="w-full flex flex-col">
+                    <small-title title="Aktionen" class="mb-3" />
                     <slot name="actions"></slot>
                 </div>
             </div>
@@ -21,10 +22,12 @@
 
 <script>
 import Layout from '@/Layouts/Layout';
+import SmallTitle from './SmallTitle.vue';
 
 export default {
   components: {
     Layout,
+    SmallTitle,
   },
 };
 </script>
diff --git a/resources/js/Components/SimpleTable.vue b/resources/js/Components/SimpleTable.vue
index 6fa15ec..e3be395 100644
--- a/resources/js/Components/SimpleTable.vue
+++ b/resources/js/Components/SimpleTable.vue
@@ -1,8 +1,11 @@
 <template>
     <div>
-        <p v-if="title" class="font-semibold text-2xl font-medium mb-4 text-indigo-900 leading-tight">{{ title }}</p>
-        <div v-if="form" class="my-6 flex justify-between items-center">
-            <div class="flex items-center w-full max-w-md mr-4">
+        <span v-if="title" class="flex justify-between items-end mb-4">
+          <p v-if="title" class="font-semibold text-2xl font-medium text-indigo-900 leading-tight">{{ title }}</p>
+          <slot name="actions" class=""></slot>
+        </span>
+        <div v-if="form || print" class="my-4 flex justify-between items-center">
+            <div v-if="form" class="flex items-center w-full max-w-md mr-4">
                 <div class="flex w-full bg-white shadow rounded">
                     <input type="text" ref="search" v-model="form.search" autofocus="true" name="search" placeholder="Suchen..." class="relative border-gray-200 w-full px-6 py-3 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded" autocomplete="off">
                 </div>
@@ -13,7 +16,7 @@
                 Excel-Export
             </a>
         </div>
-        <div v-if="data.total === undefined || data.total > 0" class="bg-white shadow rounded-md sm:rounded-lg overflow-x-auto">
+        <div v-if="(data.total === undefined && data.length > 0) || data.total > 0" class="bg-white shadow rounded-md sm:rounded-lg overflow-x-auto">
             <table class="w-full whitespace-nowrap">
                 <tr class="text-left font-bold">
                     <th v-for="(col, index) in columns" :key="col.key" class="px-6 pt-4 pb-4" :colspan="[index == (columns.length - 1) ? 2 : 1]">
@@ -29,18 +32,18 @@
                 </tr>
                 <tr v-for="row in (this.data.data ? this.data.data : this.data)" :key="row.link" class="hover:bg-indigo-100 focus-within:bg-indigo-100">
                     <td v-for="col in columns" :key="col.key" class="border-t">
-                        <inertia-link v-if="row.link" class="px-6 py-4 flex items-center" :href="row.link">
+                        <inertia-link v-if="row.link" class="px-6 xl:py-4 py-2 flex items-center" :href="row.link">
                             {{ resolve(col.key, row) }}
                         </inertia-link>
                         <span v-else-if="col.key == 'delete'" class="p-3 cursor-pointer" @click="this.$emit('delete', row.id)">
-                            <unicon fill="red" height="24" width="24" name="trash-alt"></unicon>
+                            <unicon fill="#f04040" hover-fill="red" height="24" width="24" name="trash-alt"></unicon>
                         </span>
-                        <span v-else class="px-6 py-4 flex items-center">
+                        <span v-else class="px-6 xl:py-4 py-2 flex items-center">
                             {{ resolve(col.key, row) }}
                         </span>
                     </td>
                     <td v-if="row.link && !hideArrow" class="border-t w-px">
-                        <inertia-link class="px-4 flex items-center" :href="row.link" tabindex="-1">
+                        <inertia-link class="xl:py-4 py-2 flex items-center" :href="row.link" tabindex="-1">
                             <unicon class="m-2" height="22" width="22" name="angle-right"></unicon>
                         </inertia-link>
                     </td>
diff --git a/resources/js/Components/SmallTitle.vue b/resources/js/Components/SmallTitle.vue
new file mode 100644
index 0000000..154befd
--- /dev/null
+++ b/resources/js/Components/SmallTitle.vue
@@ -0,0 +1,12 @@
+<template>
+    <h3 class="font-semibold">{{ title }}</h3>
+</template>
+
+<script>
+
+export default ({
+    props: {
+        title: String,
+    },
+})
+</script>
diff --git a/resources/js/Pages/Cars/Index.vue b/resources/js/Pages/Cars/Index.vue
index 8e1fb67..6d7c013 100644
--- a/resources/js/Pages/Cars/Index.vue
+++ b/resources/js/Pages/Cars/Index.vue
@@ -32,8 +32,8 @@ export default {
     return {
       currentRoute: 'cars',
       columns: [
-        { key: 'name', value: 'Name', sortable: true },
-        { key: 'stammnummer', value: 'Stammummer', sortable: true },
+        { key: 'name', value: 'Marke & Modell', sortable: true },
+        { key: 'stammnummer', value: 'Stammnummer', sortable: true },
         { key: 'buy_contract.date', value: 'Einkaufsdatum', sortable: true },
         { key: 'buy_contract.price', value: 'Einkaufspreis', sortable: true },
         { key: 'sell_contract.date', value: 'Verkaufssdatum', sortable: true },
diff --git a/resources/js/Pages/Cars/Show.vue b/resources/js/Pages/Cars/Show.vue
index 3985234..9743b06 100644
--- a/resources/js/Pages/Cars/Show.vue
+++ b/resources/js/Pages/Cars/Show.vue
@@ -18,33 +18,25 @@
             </div>
         </template>
         <template #more>
-            <div class="sm:col-span-6 col-span-12">
-                <div class="whitespace-nowrap">
-                    <h1 class="font-bold text-3xl">{{ car.buy_contracts.total > 1 ? car.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag' }}</h1>
-                </div>
-                <div v-for="contract in car.buy_contracts.data" :key="contract.id">
-                    <buy-contract-card :contract="contract"/>
-                </div>
-                <div v-if="!car.deleted_at && car.buy_contracts.total <= car.sell_contracts.total">
-                    <inertia-link :href="route('contracts.create_from_car', [0, car.id])" class="w-full py-6 mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition" >
-                        <unicon fill="white" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
-                        Neuer Ankaufsvertrag
-                    </inertia-link>
-                </div>
+            <div class="xl:col-span-6 col-span-12">
+                <simple-table :title="car.buy_contracts.total > 1 ? car.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag'" :data="car.buy_contracts" :columns="buyContractColumns" :currentRoute="currentRoute" :hideArrow="true">
+                    <template #actions>
+                        <standard-button v-if="!car.deleted_at" colour="green" :href="route('contracts.create_from_car', [0, car.id])">
+                        <unicon fill="currentColor" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                        Ankaufsvertrag
+                    </standard-button>
+                    </template>
+                </simple-table>
             </div>
-            <div class="sm:col-span-6 col-span-12">
-                <div class="whitespace-nowrap">
-                    <h1 class="font-bold text-3xl">{{ car.sell_contracts.total > 1 ? car.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag' }}</h1>
-                </div>
-                <div v-for="contract in car.sell_contracts.data" :key="contract.id">
-                    <sell-contract-card :contract="contract"/>
-                </div>
-                <div v-if="!car.deleted_at && car.buy_contracts.total > car.sell_contracts.total">
-                    <inertia-link :href="route('contracts.create_from_car', [1, car.id])" class="py-6 w-full mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition" >
-                        <unicon fill="white" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
-                        Neuer Verkaufssvertrag
-                    </inertia-link>
-                </div>
+            <div class="xl:col-span-6 col-span-12">
+                <simple-table :title="car.sell_contracts.total > 1 ? car.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag'" :data="car.sell_contracts" :columns="sellContractColumns" :currentRoute="currentRoute" :hideArrow="true">
+                    <template #actions>
+                        <standard-button v-if="!car.deleted_at" colour="green" :href="route('contracts.create_from_car', [1, car.id])">
+                            <unicon fill="currentColor" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                            Verkaufssvertrag
+                        </standard-button>
+                    </template>
+                </simple-table>
             </div>
         </template>
     </show-page>
@@ -59,6 +51,8 @@ import SellContractCard from '@/Components/SellContractCard.vue';
 import EditButton from '@/Components/Buttons/EditButton.vue';
 import DeleteButton from '@/Components/Buttons/DeleteButton.vue';
 import RestoreButton from '@/Components/Buttons/RestoreButton.vue';
+import StandardButton from '@/Components/Buttons/StandardButton.vue';
+import SimpleTable from '@/Components/SimpleTable.vue';
 
 export default {
   components: {
@@ -70,6 +64,8 @@ export default {
     EditButton,
     DeleteButton,
     RestoreButton,
+    StandardButton,
+    SimpleTable,
   },
   props: {
     car: Object,
@@ -77,6 +73,16 @@ export default {
   data() {
     return {
       currentRoute: 'cars.show',
+      buyContractColumns: [
+        { key: 'date', value: 'Datum', sortable: false },
+        { key: 'contact', value: 'Verkäufer', sortable: false },
+        { key: 'price', value: 'Einkaufspreis', sortable: false },
+      ],
+      sellContractColumns: [
+        { key: 'date', value: 'Datum', sortable: false },
+        { key: 'contact', value: 'Käufer', sortable: false },
+        { key: 'price', value: 'Verkaufspreis', sortable: false },
+      ],
     };
   },
 };
diff --git a/resources/js/Pages/Cars/Sold.vue b/resources/js/Pages/Cars/Sold.vue
index 84ff141..dc5a5c4 100644
--- a/resources/js/Pages/Cars/Sold.vue
+++ b/resources/js/Pages/Cars/Sold.vue
@@ -32,8 +32,8 @@ export default {
     return {
       currentRoute: 'cars.sold',
       columns: [
-        { key: 'name', value: 'Name', sortable: true },
-        { key: 'stammnummer', value: 'Stammummer', sortable: true },
+        { key: 'name', value: 'Marke & Modell', sortable: true },
+        { key: 'stammnummer', value: 'Stammnummer', sortable: true },
         { key: 'buy_contract.date', value: 'Einkaufsdatum', sortable: true },
         { key: 'buy_contract.price', value: 'Einkaufspreis', sortable: true },
         { key: 'sell_contract.date', value: 'Verkaufssdatum', sortable: true },
diff --git a/resources/js/Pages/Cars/Unsold.vue b/resources/js/Pages/Cars/Unsold.vue
index 96beb7d..93956b9 100644
--- a/resources/js/Pages/Cars/Unsold.vue
+++ b/resources/js/Pages/Cars/Unsold.vue
@@ -32,8 +32,8 @@ export default {
     return {
       currentRoute: 'cars.unsold',
       columns: [
-        { key: 'name', value: 'Name', sortable: true },
-        { key: 'stammnummer', value: 'Stammummer', sortable: true },
+        { key: 'name', value: 'Marke & Modell', sortable: true },
+        { key: 'stammnummer', value: 'Stammnummer', sortable: true },
         { key: 'initial_date', value: 'Inverkehrssetzung', sortable: true },
         { key: 'buy_contract.date', value: 'Einkaufsdatum', sortable: true },
         { key: 'buy_contract.price', value: 'Einkaufspreis', sortable: true },
diff --git a/resources/js/Pages/Contacts/Show.vue b/resources/js/Pages/Contacts/Show.vue
index 5fd06fa..c860347 100644
--- a/resources/js/Pages/Contacts/Show.vue
+++ b/resources/js/Pages/Contacts/Show.vue
@@ -21,33 +21,25 @@
         </template>
 
         <template #more>
-            <div class="sm:col-span-10 col-span-12">
-                <div class="whitespace-nowrap">
-                    <h1 class="font-bold text-3xl">{{ contact.buy_contracts.total > 1 ? contact.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag' }}</h1>
-                </div>
-                <div v-if="!contact.deleted_at">
-                    <inertia-link :href="route('contracts.create_from_contact', [0, contact.id])" class="w-full py-6 mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition" >
-                        <unicon fill="white" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
-                        Neuer Ankaufsvertrag
-                    </inertia-link>
-                </div>
-                <div v-for="contract in contact.buy_contracts.data" :key="contract.id">
-                    <buy-contract-card :contract="contract"/>
-                </div>
+            <div class="xl:col-span-6 col-span-12">
+                <simple-table :title="contact.buy_contracts.total > 1 ? contact.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag'" :data="contact.buy_contracts" :columns="buyContractColumns" :currentRoute="currentRoute" :hideArrow="true">
+                    <template #actions>
+                        <standard-button v-if="!contact.deleted_at" colour="green" :href="route('contracts.create_from_contact', [0, contact.id])">
+                        <unicon fill="currentColor" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                        Ankaufsvertrag
+                    </standard-button>
+                    </template>
+                </simple-table>
             </div>
-            <div class="sm:col-span-10 col-span-12">
-                <div class="whitespace-nowrap">
-                    <h1 class="font-bold text-3xl">{{ contact.sell_contracts.total > 1 ? contact.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag' }}</h1>
-                </div>
-                <div v-if="!contact.deleted_at">
-                    <inertia-link :href="route('contracts.create_from_contact', [1, contact.id])" class="py-6 w-full mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition" >
-                        <unicon fill="white" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
-                        Neuer Verkaufssvertrag
-                    </inertia-link>
-                </div>
-                <div v-for="contract in contact.sell_contracts.data" :key="contract.id">
-                    <sell-contract-card :contract="contract"/>
-                </div>
+            <div class="xl:col-span-6 col-span-12">
+                <simple-table :title="contact.sell_contracts.total > 1 ? contact.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag'" :data="contact.sell_contracts" :columns="sellContractColumns" :currentRoute="currentRoute" :hideArrow="true">
+                    <template #actions>
+                        <standard-button v-if="!contact.deleted_at" colour="green" :href="route('contracts.create_from_contact', [1, contact.id])">
+                            <unicon fill="currentColor" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                            Verkaufssvertrag
+                        </standard-button>
+                    </template>
+                </simple-table>
             </div>
         </template>
     </show-page>
@@ -62,6 +54,8 @@ import SellContractCard from '@/Components/SellContractCard.vue';
 import EditButton from '@/Components/Buttons/EditButton.vue';
 import DeleteButton from '@/Components/Buttons/DeleteButton.vue';
 import RestoreButton from '@/Components/Buttons/RestoreButton.vue';
+import SimpleTable from '@/Components/SimpleTable.vue';
+import StandardButton from '@/Components/Buttons/StandardButton.vue';
 
 export default {
   components: {
@@ -73,6 +67,8 @@ export default {
     EditButton,
     DeleteButton,
     RestoreButton,
+    SimpleTable,
+    StandardButton,
   },
 
   props: {
@@ -81,6 +77,16 @@ export default {
   data() {
     return {
       currentRoute: 'contacts.show',
+      buyContractColumns: [
+        { key: 'date', value: 'Datum', sortable: false },
+        { key: 'car', value: 'Auto', sortable: false},
+        { key: 'price', value: 'Einkaufspreis', sortable: false },
+      ],
+      sellContractColumns: [
+        { key: 'date', value: 'Datum', sortable: false },
+        { key: 'car', value: 'Auto', sortable: false},
+        { key: 'price', value: 'Verkaufspreis', sortable: false },
+      ],
     };
   },
 };
diff --git a/resources/js/Pages/Contracts/Show.vue b/resources/js/Pages/Contracts/Show.vue
index 74e768a..d1dfeb6 100644
--- a/resources/js/Pages/Contracts/Show.vue
+++ b/resources/js/Pages/Contracts/Show.vue
@@ -4,58 +4,71 @@
             {{ contract.type_formatted }} vom {{ contract.date }}
         </template>
         <template #info>
-            <div class="p-5 bg-white shadow rounded-md font-medium">
-                <div class="font-bold pb-1 mb-1 text-2xl border-b">
-                    {{ contract.type_formatted }} vom {{ contract.date }}
-                </div>
-                <div class="grid grid-cols-4 gap-2 w-full">
-                    <div class="lg:col-span-1 col-span-2">
-                        Datum
+                    <small-title title="Vertragsinformationen" class="mb-3" />
+                    <div class="grid  grid-cols-12 gap-2 p-5 bg-white shadow rounded-md font-medium">
+                        <div class="col-span-4">
+                            Datum
+                        </div>
+                        <div class="col-span-8">
+                            {{ contract.date }}
+                        </div>
+                        <div class="col-span-12 sm:col-span-4 pt-3 sm:pt-0">
+                            {{ contactTitle }}
+                        </div>
+                        <div class="col-span-12 sm:col-span-8">
+                            <inertia-link :href="contract.contact.link" class="font-bold flex items-center hover:text-indigo-600">
+                                <unicon fill="currentColor" class="mr-1" height="22" width="22" name="arrow-right"></unicon>
+                                {{ contract.contact.full_title }}
+                            </inertia-link>
+                        </div>
+                        <div class="col-span-12 sm:col-span-4 pt-3 sm:pt-0">
+                           Auto
+                        </div>
+                        <div class="col-span-12 sm:col-span-8 pb-3 sm:pb-0">
+                            <inertia-link :href="contract.car.link" class="font-bold flex items-center hover:text-indigo-600">
+                                <unicon fill="currentColor" class="mr-1" height="22" width="22" name="arrow-right"></unicon>
+                                {{ contract.car.name_with_year }}
+                            </inertia-link>
+                        </div>
+                        <div class="col-span-4">
+                            Lieferdatum
+                        </div>
+                        <div class="col-span-8">
+                            {{ contract.delivery_date }}
+                        </div>
+                        <div v-if="contract.is_sell_contract && contract.insurance_type" class="col-span-4">
+                            Versicherung
+                        </div>
+                        <div v-if="contract.is_sell_contract && contract.insurance_type" class="col-span-8">
+                            {{ contract.insurance_type }}
+                        </div>
+                        <div class="col-span-4">
+                            Betrag
+                        </div>
+                        <div class="col-span-8 font-bold">
+                            {{ contract.price }}
+                        </div>
+                        <div class="col-span-4">
+                            Bezahlt
+                        </div>
+                        <div class="col-span-8">
+                            {{ contract.paid }}
+                        </div>
+                        <div class="col-span-4">
+                            Offener Betrag
+                        </div>
+                        <div class="col-span-8">
+                            {{ contract.left_to_pay }}
+                        </div>
+                        <div v-if="contract.notes" class="mt-3 col-span-12">
+                            <p class="font-bold">Bemerkungen</p>
+                            {{ contract.notes }}
+                        </div>
                     </div>
-                    <div class="lg:col-span-3 col-span-2">
-                        {{ contract.date }}
-                    </div>
-                    <div class="lg:col-span-1 col-span-2">
-                        Lieferdatum
-                    </div>
-                    <div class="lg:col-span-3 col-span-2">
-                        {{ contract.delivery_date }}
-                    </div>
-                    <div v-if="contract.is_sell_contract && contract.insurance_type" class="lg:col-span-1 col-span-2">
-                        Versicherung
-                    </div>
-                    <div v-if="contract.is_sell_contract && contract.insurance_type" class="lg:col-span-3 col-span-2">
-                        {{ contract.insurance_type }}
-                    </div>
-                    <div class="lg:col-span-1 col-span-2">
-                        Betrag
-                    </div>
-                    <div class="lg:col-span-3 col-span-2 font-bold">
-                        {{ contract.price }}
-                    </div>
-                    <div class="lg:col-span-1 col-span-2">
-                        Bezahlt
-                    </div>
-                    <div class="lg:col-span-3 col-span-2">
-                        {{ contract.paid }}
-                    </div>
-                    <div class="lg:col-span-1 col-span-2">
-                        Offener Betrag
-                    </div>
-                    <div class="lg:col-span-3 col-span-2">
-                        {{ contract.left_to_pay }}
-                    </div>
-                    <div v-if="contract.notes" class="mt-3 col-span-4">
-                        <p class="font-bold">Bemerkungen</p>
-                        {{ contract.notes }}
-                    </div>
-                </div>
-            </div>
         </template>
         <template #actions>
             <edit-button v-if="!contract.deleted_at" :href="route('contracts.edit', contract.id)" />
             <print-button :href="route('contracts.print', contract.id)" />
-            <payments-upload v-if="!contract.deleted_at" :show_upload="!contract.deleted_at" :contract="contract" />
             <delete-button v-if="!contract.deleted_at" :href="route('contracts.destroy', contract.id)" />
             <restore-button v-if="contract.deleted_at" :href="route('contracts.restore', contract.id)" />
             <div v-if="contract.deleted_at">
@@ -63,20 +76,16 @@
             </div>
         </template>
         <template #more>
-            <div class="lg:col-span-7 col-span-12">
-                <h3 class="mb-3">Auto</h3>
-                <car-card :car="contract.car" hideEmpty="true" />
-            </div>
-            <div class="lg:col-span-5 col-span-12">
-                <h3 class="mb-3">{{ contactTitle }}</h3>
-                <contact-card :contact="contract.contact" />
-            </div>
-            <div class="xl:col-span-7 col-span-12 mt-4">
-                <documents-view :initial_documents="contract.documents" :id="contract.id" :show_upload="!contract.deleted_at" />
-            </div>
-            <div class="xl:col-span-5 col-span-12">
+            <div class="xl:col-span-6 col-span-12">
+                <span class="w-full inline-flex items-end justify-between mb-3">
+                    <small-title title="Einzahlungen" />
+                    <payments-upload v-if="!contract.deleted_at" :show_upload="!contract.deleted_at" :contract="contract" />
+                </span>
                 <payments-view :payments="contract.payments" :contract="contract" />
             </div>
+            <div class="xl:col-span-6 col-span-12 mt-4">
+                <documents-view :initial_documents="contract.documents" :id="contract.id" :show_upload="!contract.deleted_at" />
+            </div>
         </template>
     </show-page>
 </template>
@@ -93,6 +102,7 @@ import EditButton from '@/Components/Buttons/EditButton.vue';
 import DocumentsView from '@/Components/Documents/View.vue';
 import PaymentsView from '@/Components/Payments/View.vue';
 import PaymentsUpload from '@/Components/Payments/Upload.vue';
+import SmallTitle from '../../Components/SmallTitle.vue';
 
 export default {
   components: {
@@ -107,6 +117,7 @@ export default {
     DocumentsView,
     PaymentsView,
     PaymentsUpload,
+    SmallTitle,
   },
   props: {
     contract: Object,