diff --git a/resources/views/domains/index.blade.php b/resources/views/domains/index.blade.php
index ddf05e9..f002a2e 100644
--- a/resources/views/domains/index.blade.php
+++ b/resources/views/domains/index.blade.php
@@ -1,12 +1,8 @@
-@extends('layouts.index')
 @section('title', 'Domain names')
-@section('css_style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('header')
-    {{ __('Domains') }}
-@endsection
-@section('content')
+<x-app-layout>
+    <x-slot name="header">
+        {{ __('Domains') }}
+    </x-slot>
     <div class="container" id="app">
         <x-delete-confirm-modal></x-delete-confirm-modal>
         <x-card class="shadow mt-3">
@@ -67,4 +63,4 @@
     <x-modal-delete-script>
         <x-slot name="uri">domains</x-slot>
     </x-modal-delete-script>
-@endsection
+</x-app-layout>
diff --git a/resources/views/ips/index.blade.php b/resources/views/ips/index.blade.php
index 8f1d02e..e76e86a 100644
--- a/resources/views/ips/index.blade.php
+++ b/resources/views/ips/index.blade.php
@@ -1,80 +1,74 @@
-@section("title", "IP addresses")
-@section('css_links')
-    <link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
-@endsection
-@section('style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('scripts')
-    <script src="{{ asset('js/vue.min.js') }}"></script>
-@endsection
+@section('title', 'IP addresses')
 <x-app-layout>
     <x-slot name="header">
-        {{ __('IP Addresses') }}
+        {{ __('IP addresses') }}
     </x-slot>
     <div class="container" id="app">
-        <x-delete-confirm-modal></x-delete-confirm-modal>
-        <x-card class="shadow mt-3">
-            <a href="{{ route('IPs.create') }}" class="btn btn-primary mb-3">Add IP</a>
             <x-response-alerts></x-response-alerts>
-            <div class="table-responsive">
-                <table class="table table-bordered" id="ips-table">
-                    <thead class="table-light">
-                    <tr>
-                        <th class="text-nowrap">Type</th>
-                        <th class="text-nowrap">Address</th>
-                        <th class="text-nowrap">Actions</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    @if(!empty($ips))
-                        @foreach($ips as $ip)
-                            <tr>
-                                <td class="text-nowrap">@if ($ip->is_ipv4 === 1)
-                                        IPv4
-                                    @else
-                                        IPv6
-                                    @endif</td>
-                                <td class="text-nowrap">{{ $ip->address}}</td>
-                                <td class="text-nowrap">
-                                    <form action="{{ route('IPs.destroy', $ip->id) }}" method="POST">
-                                        @csrf
-                                        @method('DELETE')
-                                        <i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
-                                           id="{{$ip->id}}" title="{{$ip->address}}"></i>
-                                    </form>
-                                </td>
-                            </tr>
-                        @endforeach
-                    @else
+            <x-card class="shadow mt-3">
+                <a href="{{ route('IPs.create') }}" class="btn btn-primary mb-3">Add IP</a>
+                <x-response-alerts></x-response-alerts>
+                <div class="table-responsive">
+                    <table class="table table-bordered" id="ips-table">
+                        <thead class="table-light">
                         <tr>
-                            <td class="px-4 py-2 border text-red-500" colspan="3">No IPs found.</td>
+                            <th class="text-nowrap">Type</th>
+                            <th class="text-nowrap">Address</th>
+                            <th class="text-nowrap">Actions</th>
                         </tr>
-                    @endif
-                    </tbody>
-                </table>
-            </div>
-        </x-card>
+                        </thead>
+                        <tbody>
+                        @if(!empty($ips))
+                            @foreach($ips as $ip)
+                                <tr>
+                                    <td class="text-nowrap">@if ($ip->is_ipv4 === 1)
+                                            IPv4
+                                        @else
+                                            IPv6
+                                        @endif</td>
+                                    <td class="text-nowrap">{{ $ip->address}}</td>
+                                    <td class="text-nowrap">
+                                        <form action="{{ route('IPs.destroy', $ip->id) }}" method="POST">
+                                            @csrf
+                                            @method('DELETE')
+                                            <i class="fas fa-trash text-danger ms-3" @click="confirmDeleteModal"
+                                               id="{{$ip->id}}" title="{{$ip->address}}"></i>
+                                        </form>
+                                    </td>
+                                </tr>
+                            @endforeach
+                        @else
+                            <tr>
+                                <td class="px-4 py-2 border text-red-500" colspan="3">No IPs found.</td>
+                            </tr>
+                        @endif
+                        </tbody>
+                    </table>
+                </div>
+            </x-card>
         <x-details-footer></x-details-footer>
+        <x-delete-confirm-modal></x-delete-confirm-modal>
     </div>
-    <x-datatables-assets></x-datatables-assets>
-    <script type="text/javascript">
-        $(document).ready(function () {
-            $('#ips-table').DataTable({
-                "pageLength": 15,
-                "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
-                "columnDefs": [
-                    {"orderable": false, "targets": 1}
-                ],
-                "initComplete": function () {
-                    $('.dataTables_length,.dataTables_filter').addClass('mb-2');
-                    $('.dataTables_paginate').addClass('mt-2');
-                    $('.dataTables_info').addClass('mt-2 text-muted ');
-                }
-            });
-        });
-    </script>
     <x-modal-delete-script>
         <x-slot name="uri">IPs</x-slot>
     </x-modal-delete-script>
+    @section('scripts')
+        <script>
+            window.addEventListener('load', function () {
+                $('#ips-table').DataTable({
+                    "pageLength": 15,
+                    "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
+                    "columnDefs": [
+                        {"orderable": false, "targets": 1}
+                    ],
+                    "initComplete": function () {
+                        $('.dataTables_length,.dataTables_filter').addClass('mb-2');
+                        $('.dataTables_paginate').addClass('mt-2');
+                        $('.dataTables_info').addClass('mt-2 text-muted ');
+                    }
+                });
+            })
+        </script>
+    @endsection
 </x-app-layout>
+
diff --git a/resources/views/labels/index.blade.php b/resources/views/labels/index.blade.php
index e7ac675..bdca2c9 100644
--- a/resources/views/labels/index.blade.php
+++ b/resources/views/labels/index.blade.php
@@ -1,19 +1,9 @@
-@section("title", "Labels")
-@section('css_links')
-    <link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
-@endsection
-@section('style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('scripts')
-    <script src="{{ asset('js/vue.min.js') }}"></script>
-@endsection
+@section('title', 'Labels')
 <x-app-layout>
     <x-slot name="header">
         {{ __('Labels') }}
     </x-slot>
     <div class="container" id="app">
-        <x-delete-confirm-modal></x-delete-confirm-modal>
         <x-card class="shadow mt-3">
             <a href="{{ route('labels.create') }}" class="btn btn-primary mb-3">Add a label</a>
             <x-response-alerts></x-response-alerts>
@@ -49,26 +39,28 @@
                 </tbody>
             </table>
         </x-card>
-              <x-details-footer></x-details-footer>
+        <x-details-footer></x-details-footer>
+        <x-delete-confirm-modal></x-delete-confirm-modal>
     </div>
-    <x-datatables-assets></x-datatables-assets>
-    <script type="text/javascript">
-        $(document).ready(function () {
-            $('#labels-table').DataTable({
-                "pageLength": 15,
-                "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
-                "columnDefs": [
-                    {"orderable": false, "targets": 1}
-                ],
-                "initComplete": function () {
-                    $('.dataTables_length,.dataTables_filter').addClass('mb-2');
-                    $('.dataTables_paginate').addClass('mt-2');
-                    $('.dataTables_info').addClass('mt-2 text-muted ');
-                }
-            });
-        });
-    </script>
     <x-modal-delete-script>
         <x-slot name="uri">labels</x-slot>
     </x-modal-delete-script>
+    @section('scripts')
+        <script>
+            window.addEventListener('load', function () {
+                $('#labels-table').DataTable({
+                    "pageLength": 15,
+                    "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
+                    "columnDefs": [
+                        {"orderable": false, "targets": 1}
+                    ],
+                    "initComplete": function () {
+                        $('.dataTables_length,.dataTables_filter').addClass('mb-2');
+                        $('.dataTables_paginate').addClass('mt-2');
+                        $('.dataTables_info').addClass('mt-2 text-muted ');
+                    }
+                });
+            })
+        </script>
+    @endsection
 </x-app-layout>
diff --git a/resources/views/locations/index.blade.php b/resources/views/locations/index.blade.php
index 67421fc..f5b50f8 100644
--- a/resources/views/locations/index.blade.php
+++ b/resources/views/locations/index.blade.php
@@ -1,19 +1,9 @@
-@section("title", "Locations")
-@section('css_links')
-    <link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
-@endsection
-@section('style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('scripts')
-    <script src="{{ asset('js/vue.min.js') }}"></script>
-@endsection
+@section('title', 'Locations')
 <x-app-layout>
     <x-slot name="header">
         {{ __('Locations') }}
     </x-slot>
     <div class="container" id="app">
-        <x-delete-confirm-modal></x-delete-confirm-modal>
         <x-card class="shadow mt-3">
             <a href="{{ route('locations.create') }}" class="btn btn-primary mb-3">Add a location</a>
             <x-response-alerts></x-response-alerts>
@@ -49,25 +39,27 @@
             </table>
         </x-card>
         <x-details-footer></x-details-footer>
+        <x-delete-confirm-modal></x-delete-confirm-modal>
     </div>
-    <x-datatables-assets></x-datatables-assets>
-    <script type="text/javascript">
-        $(document).ready(function () {
-            $('#locations-table').DataTable({
-                "pageLength": 15,
-                "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
-                "columnDefs": [
-                    {"orderable": false, "targets": 1}
-                ],
-                "initComplete": function () {
-                    $('.dataTables_length,.dataTables_filter').addClass('mb-2');
-                    $('.dataTables_paginate').addClass('mt-2');
-                    $('.dataTables_info').addClass('mt-2 text-muted ');
-                }
-            });
-        });
-    </script>
     <x-modal-delete-script>
         <x-slot name="uri">locations</x-slot>
     </x-modal-delete-script>
+    @section('scripts')
+        <script>
+            window.addEventListener('load', function () {
+                $('#locations-table').DataTable({
+                    "pageLength": 15,
+                    "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
+                    "columnDefs": [
+                        {"orderable": false, "targets": 1}
+                    ],
+                    "initComplete": function () {
+                        $('.dataTables_length,.dataTables_filter').addClass('mb-2');
+                        $('.dataTables_paginate').addClass('mt-2');
+                        $('.dataTables_info').addClass('mt-2 text-muted ');
+                    }
+                });
+            })
+        </script>
+    @endsection
 </x-app-layout>
diff --git a/resources/views/misc/index.blade.php b/resources/views/misc/index.blade.php
index 8e13e33..ec74719 100644
--- a/resources/views/misc/index.blade.php
+++ b/resources/views/misc/index.blade.php
@@ -1,12 +1,8 @@
-@extends('layouts.index')
 @section('title', 'Misc services')
-@section('css_style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('header')
-    {{ __('Misc') }}
-@endsection
-@section('content')
+<x-app-layout>
+    <x-slot name="header">
+        {{ __('Misc') }}
+    </x-slot>
     <div class="container" id="app">
         <x-delete-confirm-modal></x-delete-confirm-modal>
         <x-card class="shadow mt-3">
@@ -68,4 +64,4 @@
     <x-modal-delete-script>
         <x-slot name="uri">misc</x-slot>
     </x-modal-delete-script>
-@endsection
+</x-app-layout>
diff --git a/resources/views/os/index.blade.php b/resources/views/os/index.blade.php
index 6eaac02..8259029 100644
--- a/resources/views/os/index.blade.php
+++ b/resources/views/os/index.blade.php
@@ -1,19 +1,9 @@
-@section("title", "Operating systems")
-@section('css_links')
-    <link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
-@endsection
-@section('style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('scripts')
-    <script src="{{ asset('js/vue.min.js') }}"></script>
-@endsection
+@section('title', 'Operating systems')
 <x-app-layout>
     <x-slot name="header">
         {{ __('Operating systems') }}
     </x-slot>
     <div class="container" id="app">
-        <x-delete-confirm-modal></x-delete-confirm-modal>
         <x-card class="shadow mt-3">
             <a href="{{ route('os.create') }}" class="btn btn-primary mb-3">Add an OS</a>
             <x-response-alerts></x-response-alerts>
@@ -46,25 +36,27 @@
             </table>
         </x-card>
         <x-details-footer></x-details-footer>
+        <x-delete-confirm-modal></x-delete-confirm-modal>
     </div>
-    <x-datatables-assets></x-datatables-assets>
-    <script type="text/javascript">
-        $(document).ready(function () {
-            $('#os-table').DataTable({
-                "pageLength": 15,
-                "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
-                "columnDefs": [
-                    {"orderable": false, "targets": 1}
-                ],
-                "initComplete": function () {
-                    $('.dataTables_length,.dataTables_filter').addClass('mb-2');
-                    $('.dataTables_paginate').addClass('mt-2');
-                    $('.dataTables_info').addClass('mt-2 text-muted ');
-                }
-            });
-        });
-    </script>
     <x-modal-delete-script>
         <x-slot name="uri">os</x-slot>
     </x-modal-delete-script>
+    @section('scripts')
+        <script>
+            window.addEventListener('load', function () {
+                $('#os-table').DataTable({
+                    "pageLength": 15,
+                    "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
+                    "columnDefs": [
+                        {"orderable": false, "targets": 1}
+                    ],
+                    "initComplete": function () {
+                        $('.dataTables_length,.dataTables_filter').addClass('mb-2');
+                        $('.dataTables_paginate').addClass('mt-2');
+                        $('.dataTables_info').addClass('mt-2 text-muted ');
+                    }
+                });
+            })
+        </script>
+    @endsection
 </x-app-layout>
diff --git a/resources/views/providers/index.blade.php b/resources/views/providers/index.blade.php
index e3cdae6..2661673 100644
--- a/resources/views/providers/index.blade.php
+++ b/resources/views/providers/index.blade.php
@@ -1,19 +1,9 @@
 @section("title", "Providers")
-@section('css_links')
-    <link rel="stylesheet" href="{{ asset('css/datatables.bootstrap.min.css') }}">
-@endsection
-@section('style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('scripts')
-    <script src="{{ asset('js/vue.min.js') }}"></script>
-@endsection
 <x-app-layout>
     <x-slot name="header">
         {{ __('Providers') }}
     </x-slot>
     <div class="container" id="app">
-        <x-delete-confirm-modal></x-delete-confirm-modal>
         <x-card class="shadow mt-3">
             <a href="{{ route('providers.create') }}" class="btn btn-primary mb-3">Add a provider</a>
             <x-response-alerts></x-response-alerts>
@@ -49,23 +39,25 @@
             </table>
         </x-card>
         <x-details-footer></x-details-footer>
+        <x-delete-confirm-modal></x-delete-confirm-modal>
     </div>
-    <x-datatables-assets></x-datatables-assets>
     <script type="text/javascript">
-        $(document).ready(function () {
-            $('#providers-table').DataTable({
-                "pageLength": 15,
-                "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
-                "columnDefs": [
-                    {"orderable": false, "targets": 1}
-                ],
-                "initComplete": function () {
-                    $('.dataTables_length,.dataTables_filter').addClass('mb-2');
-                    $('.dataTables_paginate').addClass('mt-2');
-                    $('.dataTables_info').addClass('mt-2 text-muted ');
-                }
+        window.addEventListener('load', function () {
+            $(document).ready(function () {
+                $('#providers-table').DataTable({
+                    "pageLength": 15,
+                    "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
+                    "columnDefs": [
+                        {"orderable": false, "targets": 1}
+                    ],
+                    "initComplete": function () {
+                        $('.dataTables_length,.dataTables_filter').addClass('mb-2');
+                        $('.dataTables_paginate').addClass('mt-2');
+                        $('.dataTables_info').addClass('mt-2 text-muted ');
+                    }
+                });
             });
-        });
+        })
     </script>
     <x-modal-delete-script>
         <x-slot name="uri">providers</x-slot>
diff --git a/resources/views/reseller/index.blade.php b/resources/views/reseller/index.blade.php
index 74cb1a1..d85e664 100644
--- a/resources/views/reseller/index.blade.php
+++ b/resources/views/reseller/index.blade.php
@@ -1,14 +1,9 @@
-@extends('layouts.index')
 @section('title', 'Resellers')
-@section('css_style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('header')
-    {{ __('Reseller') }}
-@endsection
-@section('content')
+<x-app-layout>
+    <x-slot name="header">
+        {{ __('Reseller') }}
+    </x-slot>
     <div class="container" id="app">
-        <x-delete-confirm-modal></x-delete-confirm-modal>
         <div class="card shadow mt-3">
             <div class="card-body">
                 <a href="{{ route('reseller.create') }}" class="btn btn-primary mb-3">Add a reseller</a>
@@ -68,8 +63,9 @@
             </div>
         </div>
         <x-details-footer></x-details-footer>
+        <x-delete-confirm-modal></x-delete-confirm-modal>
     </div>
     <x-modal-delete-script>
         <x-slot name="uri">reseller</x-slot>
     </x-modal-delete-script>
-@endsection
+</x-app-layout>
diff --git a/resources/views/seedboxes/index.blade.php b/resources/views/seedboxes/index.blade.php
index 8bf7a06..c6ea570 100644
--- a/resources/views/seedboxes/index.blade.php
+++ b/resources/views/seedboxes/index.blade.php
@@ -1,14 +1,9 @@
-@extends('layouts.index')
 @section('title', 'Seed boxes')
-@section('css_style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('header')
-    {{ __('Seed boxes') }}
-@endsection
-@section('content')
+<x-app-layout>
+    <x-slot name="header">
+        {{ __('Seed boxes') }}
+    </x-slot>
     <div class="container" id="app">
-        <x-delete-confirm-modal></x-delete-confirm-modal>
         <div class="card shadow mt-3">
             <div class="card-body">
                 <a href="{{ route('seedboxes.create') }}" class="btn btn-primary mb-3">Add a seed box</a>
@@ -90,8 +85,9 @@
             </div>
         </div>
         <x-details-footer></x-details-footer>
+        <x-delete-confirm-modal></x-delete-confirm-modal>
     </div>
     <x-modal-delete-script>
         <x-slot name="uri">seedboxes</x-slot>
     </x-modal-delete-script>
-@endsection
+</x-app-layout>
diff --git a/resources/views/shared/index.blade.php b/resources/views/shared/index.blade.php
index 8118ad9..30e680f 100644
--- a/resources/views/shared/index.blade.php
+++ b/resources/views/shared/index.blade.php
@@ -1,14 +1,9 @@
-@extends('layouts.index')
 @section('title', 'Shared hosting')
-@section('css_style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('header')
-    {{ __('Shared') }}
-@endsection
-@section('content')
+<x-app-layout>
+    <x-slot name="header">
+        {{ __('Shared') }}
+    </x-slot>
     <div class="container" id="app">
-        <x-delete-confirm-modal></x-delete-confirm-modal>
         <div class="card shadow mt-3">
             <div class="card-body">
                 <a href="{{ route('shared.create') }}" class="btn btn-primary mb-3">Add shared hosting</a>
@@ -70,8 +65,9 @@
             </div>
         </div>
         <x-details-footer></x-details-footer>
+        <x-delete-confirm-modal></x-delete-confirm-modal>
     </div>
     <x-modal-delete-script>
         <x-slot name="uri">shared</x-slot>
     </x-modal-delete-script>
-@endsection
+</x-app-layout>
diff --git a/resources/views/yabs/index.blade.php b/resources/views/yabs/index.blade.php
index f7f4abc..bbfc6d0 100644
--- a/resources/views/yabs/index.blade.php
+++ b/resources/views/yabs/index.blade.php
@@ -1,10 +1,4 @@
-@section("title", "YABS results")
-@section('style')
-    <x-modal-style></x-modal-style>
-@endsection
-@section('scripts')
-    <script src="{{ asset('js/vue.min.js') }}"></script>
-@endsection
+@section('title', 'YABS results')
 <x-app-layout>
     <x-slot name="header">
         {{ __('YABS') }}