diff --git a/resources/views/checkout_select_form.blade.php b/resources/views/checkout_select_form.blade.php
index 6775521..5d8de86 100644
--- a/resources/views/checkout_select_form.blade.php
+++ b/resources/views/checkout_select_form.blade.php
@@ -1,6 +1,34 @@
 @extends('tablar::page')
 
 @section('content')
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
+<style>
+    .ts-wrapper .ts-control, .ts-wrapper .ts-control input { background-color: #ffffff !important; border: 1px solid #ced4da !important; }
+    .ts-dropdown { background-color: #ffffff !important; }
+</style>
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        document.querySelectorAll('select').forEach((el) => {
+            if (el.tomselect) return;
+            new TomSelect(el, {
+                copyClassesToDropdown: false,
+                dropdownParent: 'body',
+                controlInput: '<input>',
+                sortField: {
+                    field: 'text',
+                    direction: 'asc',
+                    func: function(a, b) {
+                        const numA = parseInt(a.text, 10);
+                        const numB = parseInt(b.text, 10);
+                        return numA - numB;
+                    }
+                }
+            });
+        });
+    });
+</script>
+
 <div class="page-header d-print-none">
     <div class="container-xl">
         <div class="row g-2 align-items-center">
@@ -37,7 +65,3 @@
     </div>
 </div>
 @endsection
-@push('js')
-@include('components.tomselect')
-@endpush
-@include('components.tomselect')