diff --git a/resources/css/csp-safe.css b/resources/css/csp-safe.css
index 3544e01ca..712364856 100644
--- a/resources/css/csp-safe.css
+++ b/resources/css/csp-safe.css
@@ -1,3 +1,37 @@
+/* Checkbox Styling - Improved for Dark Mode */
+.form-checkbox {
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.form-checkbox:checked {
+    background-color: rgb(37, 99, 235); /* blue-600 */
+    border-color: rgb(37, 99, 235);
+}
+
+.dark .form-checkbox {
+    background-color: rgb(55, 65, 81); /* gray-700 */
+    border-color: rgb(75, 85, 99); /* gray-600 */
+}
+
+.dark .form-checkbox:checked {
+    background-color: rgb(59, 130, 246); /* blue-500 */
+    border-color: rgb(59, 130, 246);
+}
+
+.dark .form-checkbox:hover {
+    border-color: rgb(96, 165, 250); /* blue-400 */
+}
+
+.form-checkbox:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+}
+
+.dark .form-checkbox:focus {
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
+}
+
 /* Admin Dashboard - Recent Activity Styles */
 .activity-item {
     transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
@@ -151,24 +185,40 @@ code.api-token::-webkit-scrollbar-thumb:hover {
 /* Toast Notifications */
 #toast-container {
     position: fixed;
-    top: 1rem;
+    top: 5rem;
     right: 1rem;
-    z-index: 9999;
-    max-width: 400px;
+    z-index: 99999;
+    max-width: 420px;
     pointer-events: none;
 }
 
+@media (max-width: 640px) {
+    #toast-container {
+        top: 1rem;
+        right: 0.5rem;
+        left: 0.5rem;
+        max-width: none;
+    }
+}
+
 .toast-notification {
     display: flex;
     align-items: center;
-    min-width: 300px;
-    padding: 1rem;
-    margin-bottom: 0.5rem;
+    min-width: 320px;
+    padding: 1rem 1.25rem;
+    margin-bottom: 0.75rem;
     border-radius: 0.5rem;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     animation: slideIn 0.3s ease-out;
     transition: all 0.3s ease-in-out;
     pointer-events: auto;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 640px) {
+    .toast-notification {
+        min-width: auto;
+    }
 }
 
 .toast-notification.removing {
@@ -177,39 +227,43 @@ code.api-token::-webkit-scrollbar-thumb:hover {
 }
 
 .toast-notification.success {
-    background-color: rgb(16, 185, 129); /* green-600 */
+    background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
     color: white;
 }
 
 .dark .toast-notification.success {
-    background-color: rgb(5, 150, 105); /* green-700 */
+    background: linear-gradient(135deg, rgb(5, 150, 105) 0%, rgb(4, 120, 87) 100%);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
 }
 
 .toast-notification.error {
-    background-color: rgb(239, 68, 68); /* red-600 */
+    background: linear-gradient(135deg, rgb(239, 68, 68) 0%, rgb(220, 38, 38) 100%);
     color: white;
 }
 
 .dark .toast-notification.error {
-    background-color: rgb(220, 38, 38); /* red-700 */
+    background: linear-gradient(135deg, rgb(220, 38, 38) 0%, rgb(185, 28, 28) 100%);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
 }
 
 .toast-notification.info {
-    background-color: rgb(59, 130, 246); /* blue-600 */
+    background: linear-gradient(135deg, rgb(59, 130, 246) 0%, rgb(37, 99, 235) 100%);
     color: white;
 }
 
 .dark .toast-notification.info {
-    background-color: rgb(29, 78, 216); /* blue-700 */
+    background: linear-gradient(135deg, rgb(29, 78, 216) 0%, rgb(30, 64, 175) 100%);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
 }
 
 .toast-notification.warning {
-    background-color: rgb(245, 158, 11); /* amber-600 */
+    background: linear-gradient(135deg, rgb(245, 158, 11) 0%, rgb(217, 119, 6) 100%);
     color: white;
 }
 
 .dark .toast-notification.warning {
-    background-color: rgb(217, 119, 6); /* amber-700 */
+    background: linear-gradient(135deg, rgb(217, 119, 6) 0%, rgb(180, 83, 9) 100%);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
 }
 
 .toast-icon {
@@ -258,3 +312,242 @@ code.api-token::-webkit-scrollbar-thumb:hover {
     }
 }
 
+/* Confirmation Modal - Cart Delete Confirmation */
+.confirmation-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    animation: fadeIn 0.2s ease-out;
+    padding: 1rem;
+}
+
+.dark .confirmation-modal {
+    background-color: rgba(0, 0, 0, 0.85);
+}
+
+.confirmation-modal-content {
+    background-color: white;
+    border-radius: 0.75rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    max-width: 28rem;
+    width: 100%;
+    overflow: hidden;
+    animation: modalSlideIn 0.3s ease-out;
+}
+
+.dark .confirmation-modal-content {
+    background-color: rgb(31, 41, 55); /* gray-800 */
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.confirmation-modal-header {
+    display: flex;
+    align-items: center;
+    padding: 1.5rem;
+    border-bottom: 1px solid rgb(229, 231, 235); /* gray-200 */
+}
+
+.dark .confirmation-modal-header {
+    border-bottom-color: rgb(55, 65, 81); /* gray-700 */
+}
+
+.confirmation-modal-icon {
+    flex-shrink: 0;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgb(254, 226, 226) 0%, rgb(254, 202, 202) 100%); /* red-100 to red-200 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1rem;
+}
+
+.dark .confirmation-modal-icon {
+    background: linear-gradient(135deg, rgb(127, 29, 29) 0%, rgb(153, 27, 27) 100%); /* red-900 to red-800 */
+}
+
+.confirmation-modal-icon i {
+    color: rgb(220, 38, 38); /* red-600 */
+    font-size: 1.5rem;
+}
+
+.dark .confirmation-modal-icon i {
+    color: rgb(248, 113, 113); /* red-400 */
+}
+
+.confirmation-modal-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: rgb(17, 24, 39); /* gray-900 */
+    margin: 0;
+}
+
+.dark .confirmation-modal-title {
+    color: rgb(243, 244, 246); /* gray-100 */
+}
+
+.confirmation-modal-body {
+    padding: 1.5rem;
+    color: rgb(55, 65, 81); /* gray-700 */
+    font-size: 0.9375rem;
+    line-height: 1.625;
+}
+
+.dark .confirmation-modal-body {
+    color: rgb(209, 213, 219); /* gray-300 */
+}
+
+.confirmation-modal-body strong {
+    color: rgb(17, 24, 39); /* gray-900 */
+    font-weight: 600;
+}
+
+.dark .confirmation-modal-body strong {
+    color: rgb(243, 244, 246); /* gray-100 */
+}
+
+.confirmation-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    padding: 1.25rem 1.5rem;
+    background-color: rgb(249, 250, 251); /* gray-50 */
+}
+
+.dark .confirmation-modal-footer {
+    background-color: rgb(17, 24, 39); /* gray-900 */
+}
+
+.confirmation-modal-footer .btn-cancel {
+    padding: 0.625rem 1.25rem;
+    background-color: white;
+    border: 1px solid rgb(209, 213, 219); /* gray-300 */
+    border-radius: 0.375rem;
+    color: rgb(55, 65, 81); /* gray-700 */
+    font-weight: 500;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.dark .confirmation-modal-footer .btn-cancel {
+    background-color: rgb(55, 65, 81); /* gray-700 */
+    border-color: rgb(75, 85, 99); /* gray-600 */
+    color: rgb(229, 231, 235); /* gray-200 */
+}
+
+.confirmation-modal-footer .btn-cancel:hover {
+    background-color: rgb(249, 250, 251); /* gray-50 */
+    border-color: rgb(156, 163, 175); /* gray-400 */
+}
+
+.dark .confirmation-modal-footer .btn-cancel:hover {
+    background-color: rgb(75, 85, 99); /* gray-600 */
+    border-color: rgb(107, 114, 128); /* gray-500 */
+}
+
+.confirmation-modal-footer .btn-cancel:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+}
+
+.dark .confirmation-modal-footer .btn-cancel:focus {
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
+}
+
+.confirmation-modal-footer .btn-confirm {
+    padding: 0.625rem 1.25rem;
+    background: linear-gradient(135deg, rgb(220, 38, 38) 0%, rgb(185, 28, 28) 100%); /* red-600 to red-700 */
+    border: 1px solid rgb(220, 38, 38);
+    border-radius: 0.375rem;
+    color: white;
+    font-weight: 500;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.dark .confirmation-modal-footer .btn-confirm {
+    background: linear-gradient(135deg, rgb(185, 28, 28) 0%, rgb(153, 27, 27) 100%); /* red-700 to red-800 */
+    border-color: rgb(185, 28, 28);
+}
+
+.confirmation-modal-footer .btn-confirm:hover {
+    background: linear-gradient(135deg, rgb(185, 28, 28) 0%, rgb(153, 27, 27) 100%);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.dark .confirmation-modal-footer .btn-confirm:hover {
+    background: linear-gradient(135deg, rgb(153, 27, 27) 0%, rgb(127, 29, 29) 100%);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+}
+
+.confirmation-modal-footer .btn-confirm:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.5);
+}
+
+.dark .confirmation-modal-footer .btn-confirm:focus {
+    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.5);
+}
+
+.confirmation-modal-footer .btn-confirm:active {
+    transform: translateY(0);
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+/* Mobile responsiveness for confirmation modal */
+@media (max-width: 640px) {
+    .confirmation-modal-content {
+        margin: 0 1rem;
+    }
+
+    .confirmation-modal-header {
+        padding: 1.25rem 1rem;
+    }
+
+    .confirmation-modal-body {
+        padding: 1.25rem 1rem;
+    }
+
+    .confirmation-modal-footer {
+        padding: 1rem;
+        flex-direction: column-reverse;
+    }
+
+    .confirmation-modal-footer .btn-cancel,
+    .confirmation-modal-footer .btn-confirm {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
diff --git a/resources/views/cart/index.blade.php b/resources/views/cart/index.blade.php
index d76d30e79..b4a9451d4 100644
--- a/resources/views/cart/index.blade.php
+++ b/resources/views/cart/index.blade.php
@@ -53,7 +53,7 @@
                             <tr>
                                 <th class="px-4 py-3 text-left" style="width: 30px">
                                     <label class="inline-flex items-center cursor-pointer">
-                                        <input id="check-all" type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
+                                        <input id="check-all" type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2">
                                     </label>
                                 </th>
                                 <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-300">Name</th>
@@ -68,7 +68,7 @@
                                         <input id="chk{{ substr($result->release->guid, 0, 7) }}"
                                                type="checkbox"
                                                name="table_records"
-                                               class="cart-checkbox form-checkbox h-4 w-4 text-blue-600"
+                                               class="cart-checkbox form-checkbox h-4 w-4 text-blue-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2 cursor-pointer"
                                                value="{{ $result->release->guid }}">
                                     </td>
                                     <td class="px-4 py-3">