diff --git a/package.json b/package.json
index 2ed051c8ae..be2641c53a 100644
--- a/package.json
+++ b/package.json
@@ -11,21 +11,19 @@
         "start": "npm run watch"
     },
     "devDependencies": {
+        "@popperjs/core": "^2.6.0",
         "@tailwindcss/forms": "^0.2.1",
         "@tailwindcss/typography": "^0.4.0",
+        "alpinejs": "^2.8.0",
         "browser-sync": "^2.26.13",
         "browser-sync-webpack-plugin": "^2.3.0",
         "dotenv": "^8.2.0",
+        "focus-visible": "^5.2.0",
         "laravel-mix": "^6.0.10",
         "lodash": "^4.17.20",
         "postcss": "^8.2.4",
         "postcss-import": "^14.0.0",
         "postcss-nested": "^5.0.3",
         "tailwindcss": "^2.0.2"
-    },
-    "dependencies": {
-        "@popperjs/core": "^2.6.0",
-        "alpinejs": "^2.8.0",
-        "focus-visible": "^5.2.0"
     }
 }
diff --git a/resources/views/pagination-simple.blade.php b/resources/views/pagination-simple.blade.php
new file mode 100644
index 0000000000..a8c3fddc5d
--- /dev/null
+++ b/resources/views/pagination-simple.blade.php
@@ -0,0 +1,29 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
+        <span>
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default leading-5 rounded">
+                    {!! __('pagination.previous') !!}
+                </span>
+            @else
+                <button wire:click="previousPage" wire:loading.attr="disabled" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.previous') !!}
+                </button>
+            @endif
+        </span>
+
+        <span>
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <button wire:click="nextPage" wire:loading.attr="disabled" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.next') !!}
+                </button>
+            @else
+                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default leading-5 rounded">
+                    {!! __('pagination.next') !!}
+                </span>
+            @endif
+        </span>
+    </nav>
+@endif
diff --git a/resources/views/pagination.blade.php b/resources/views/pagination.blade.php
new file mode 100644
index 0000000000..9141c5950a
--- /dev/null
+++ b/resources/views/pagination.blade.php
@@ -0,0 +1,104 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
+        <div class="flex justify-between flex-1 sm:hidden">
+            <span>
+                @if ($paginator->onFirstPage())
+                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default leading-5 rounded">
+                        {!! __('pagination.previous') !!}
+                    </span>
+                @else
+                    <button wire:click="previousPage" wire:loading.attr="disabled" dusk="previousPage.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                        {!! __('pagination.previous') !!}
+                    </button>
+                @endif
+            </span>
+
+            <span>
+                @if ($paginator->hasMorePages())
+                    <button wire:click="nextPage" wire:loading.attr="disabled" dusk="nextPage.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                        {!! __('pagination.next') !!}
+                    </button>
+                @else
+                    <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default leading-5 rounded">
+                        {!! __('pagination.next') !!}
+                    </span>
+                @endif
+            </span>
+        </div>
+
+        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+            <div>
+                <p class="text-sm text-gray-700 leading-5">
+                    <span>{!! __('Showing') !!}</span>
+                    <span class="font-medium">{{ $paginator->firstItem() }}</span>
+                    <span>{!! __('to') !!}</span>
+                    <span class="font-medium">{{ $paginator->lastItem() }}</span>
+                    <span>{!! __('of') !!}</span>
+                    <span class="font-medium">{{ $paginator->total() }}</span>
+                    <span>{!! __('results') !!}</span>
+                </p>
+            </div>
+
+            <div>
+                <span class="relative z-0 inline-flex shadow-sm">
+                    <span>
+                        {{-- Previous Page Link --}}
+                        @if ($paginator->onFirstPage())
+                            <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
+                                <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default rounded-l leading-5" aria-hidden="true">
+                                    <x-heroicon-o-chevron-left class="w-5 h-5" />
+                                </span>
+                            </span>
+                        @else
+                            <button wire:click="previousPage" dusk="previousPage.after" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
+                                <x-heroicon-o-chevron-left class="w-5 h-5" />
+                            </button>
+                        @endif
+                    </span>
+
+                    {{-- Pagination Elements --}}
+                    @foreach ($elements as $element)
+                        {{-- "Three Dots" Separator --}}
+                        @if (is_string($element))
+                            <span aria-disabled="true">
+                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
+                            </span>
+                        @endif
+
+                        {{-- Array Of Links --}}
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                <span wire:key="paginator-page{{ $page }}">
+                                    @if ($page == $paginator->currentPage())
+                                        <span aria-current="page">
+                                            <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 cursor-default leading-5">{{ $page }}</span>
+                                        </span>
+                                    @else
+                                        <button wire:click="gotoPage({{ $page }})" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                            {{ $page }}
+                                        </button>
+                                    @endif
+                                </span>
+                            @endforeach
+                        @endif
+                    @endforeach
+
+                    <span>
+                        {{-- Next Page Link --}}
+                        @if ($paginator->hasMorePages())
+                            <button wire:click="nextPage" dusk="nextPage.after" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
+                                <x-heroicon-o-chevron-right class="w-5 h-5" />
+                            </button>
+                        @else
+                            <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
+                                <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default rounded-r leading-5" aria-hidden="true">
+                                    <x-heroicon-o-chevron-right class="w-5 h-5" />
+                                </span>
+                            </span>
+                        @endif
+                    </span>
+                </span>
+            </div>
+        </div>
+    </nav>
+@endif