diff --git a/packages/admin/config/components.php b/packages/admin/config/components.php
index 2f0e7179d..48b918ccf 100644
--- a/packages/admin/config/components.php
+++ b/packages/admin/config/components.php
@@ -104,8 +104,6 @@
     'modals.add-product-attribute' => Livewire\Modals\AddProductAttribute::class,
     'modals.add-variant' => Livewire\Modals\AddVariant::class,
     'modals.archived-order' => Livewire\Modals\ArchiveOrder::class,
-    'modals.choose-skeleton' => Livewire\Modals\ChooseSkeleton::class,
-    'modals.create-mailable' => Livewire\Modals\CreateMailable::class,
     'modals.create-payment-method' => Livewire\Modals\CreatePaymentMethod::class,
     'modals.create-permission' => Livewire\Modals\CreatePermission::class,
     'modals.create-role' => Livewire\Modals\CreateRole::class,
@@ -113,11 +111,9 @@
     'modals.delete-customer' => Livewire\Modals\DeleteCustomer::class,
     'modals.delete-discount' => Livewire\Modals\DeleteDiscount::class,
     'modals.delete-inventory' => Livewire\Modals\DeleteInventory::class,
-    'modals.delete-mailable' => Livewire\Modals\DeleteMailable::class,
     'modals.delete-product' => Livewire\Modals\DeleteProduct::class,
     'modals.delete-review' => Livewire\Modals\DeleteReview::class,
     'modals.delete-role' => Livewire\Modals\DeleteRole::class,
-    'modals.delete-template' => Livewire\Modals\DeleteTemplate::class,
     'modals.discount-products' => Livewire\Modals\DiscountProducts::class,
     'modals.discount-customers' => Livewire\Modals\DiscountCustomers::class,
     'modals.logout-others-browser' => Livewire\Modals\LogoutOthersBrowser::class,
diff --git a/packages/admin/public/css/shopper.css b/packages/admin/public/css/shopper.css
index f0a4a8f31..597cdd1b0 100644
--- a/packages/admin/public/css/shopper.css
+++ b/packages/admin/public/css/shopper.css
@@ -4054,6 +4054,9 @@ html {
 .bottom-18{
   bottom: 4.5rem;
 }
+.bottom-2{
+  bottom: 0.5rem;
+}
 .left-0{
   left: 0px;
 }
@@ -4075,6 +4078,9 @@ html {
 .right-4{
   right: 1rem;
 }
+.right-6{
+  right: 1.5rem;
+}
 .top-0{
   top: 0px;
 }
@@ -4093,15 +4099,6 @@ html {
 .top-6{
   top: 1.5rem;
 }
-.right-10{
-  right: 2.5rem;
-}
-.bottom-2{
-  bottom: 0.5rem;
-}
-.right-6{
-  right: 1.5rem;
-}
 .z-0{
   z-index: 0;
 }
@@ -4120,12 +4117,6 @@ html {
 .z-50{
   z-index: 50;
 }
-.order-2{
-  order: 2;
-}
-.order-1{
-  order: 1;
-}
 .col-span-1{
   grid-column: span 1 / span 1;
 }
@@ -5107,6 +5098,11 @@ html {
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
+.space-y-12 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
 .space-y-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -5137,11 +5133,6 @@ html {
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
-.space-y-12 > :not([hidden]) ~ :not([hidden]){
-  --tw-space-y-reverse: 0;
-  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
-}
 .space-x-reverse > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 1;
 }
@@ -5168,6 +5159,10 @@ html {
   --tw-divide-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-divide-opacity));
 }
+.divide-primary-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-divide-opacity));
+}
 .divide-secondary-100 > :not([hidden]) ~ :not([hidden]){
   --tw-divide-opacity: 1;
   border-color: rgb(241 245 249 / var(--tw-divide-opacity));
@@ -5176,10 +5171,6 @@ html {
   --tw-divide-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-divide-opacity));
 }
-.divide-primary-500 > :not([hidden]) ~ :not([hidden]){
-  --tw-divide-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-divide-opacity));
-}
 .self-start{
   align-self: flex-start;
 }
@@ -5400,9 +5391,9 @@ html {
   --tw-border-opacity: 1;
   border-color: rgb(34 197 94 / var(--tw-border-opacity));
 }
-.border-green-700{
+.border-green-600{
   --tw-border-opacity: 1;
-  border-color: rgb(21 128 61 / var(--tw-border-opacity));
+  border-color: rgb(22 163 74 / var(--tw-border-opacity));
 }
 .border-indigo-500{
   --tw-border-opacity: 1;
@@ -5563,10 +5554,6 @@ html {
   --tw-border-opacity: 1;
   border-color: rgb(113 113 122 / var(--tw-border-opacity));
 }
-.border-green-600{
-  --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity));
-}
 .border-opacity-75{
   --tw-border-opacity: 0.75;
 }
@@ -6293,9 +6280,6 @@ html {
 .pt-8{
   padding-top: 2rem;
 }
-.pr-5{
-  padding-right: 1.25rem;
-}
 .text-left{
   text-align: left;
 }
@@ -7140,13 +7124,13 @@ html {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
+.ring-yellow-600\/20{
+  --tw-ring-color: rgb(202 138 4 / 0.2);
+}
 .ring-zinc-500{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(113 113 122 / var(--tw-ring-opacity));
 }
-.ring-yellow-600\/20{
-  --tw-ring-color: rgb(202 138 4 / 0.2);
-}
 .ring-opacity-5{
   --tw-ring-opacity: 0.05;
 }
@@ -8326,11 +8310,6 @@ html {
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
 
-.focus\:text-green-800:focus{
-  --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
-}
-
 .focus\:text-primary-600:focus{
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -9218,10 +9197,6 @@ html {
   background-color: rgb(15 23 42 / var(--tw-bg-opacity));
 }
 
-:is(.dark .dark\:bg-secondary-900\/30){
-  background-color: rgb(15 23 42 / 0.3);
-}
-
 :is(.dark .dark\:bg-secondary-900\/50){
   background-color: rgb(15 23 42 / 0.5);
 }
@@ -9270,18 +9245,6 @@ html {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
-:is(.dark .dark\:bg-primary-800\/50){
-  background-color: rgb(30 64 175 / 0.5);
-}
-
-:is(.dark .dark\:bg-primary-800\/20){
-  background-color: rgb(30 64 175 / 0.2);
-}
-
-:is(.dark .dark\:bg-primary-600\/20){
-  background-color: rgb(37 99 235 / 0.2);
-}
-
 :is(.dark .dark\:bg-opacity-60){
   --tw-bg-opacity: 0.6;
 }
@@ -10353,14 +10316,6 @@ html {
     order: 9999;
   }
 
-  .sm\:order-1{
-    order: 1;
-  }
-
-  .sm\:order-2{
-    order: 2;
-  }
-
   .sm\:col-span-1{
     grid-column: span 1 / span 1;
   }
@@ -10418,16 +10373,6 @@ html {
     margin-right: -1.5rem;
   }
 
-  .sm\:-mx-8{
-    margin-left: -2rem;
-    margin-right: -2rem;
-  }
-
-  .sm\:-my-0{
-    margin-top: -0px;
-    margin-bottom: -0px;
-  }
-
   .sm\:mx-0{
     margin-left: 0px;
     margin-right: 0px;
@@ -10438,10 +10383,6 @@ html {
     margin-bottom: 2rem;
   }
 
-  .sm\:ml-0{
-    margin-left: 0px;
-  }
-
   .sm\:ml-3{
     margin-left: 0.75rem;
   }
@@ -10913,11 +10854,6 @@ html {
     padding-right: 1.5rem;
   }
 
-  .sm\:px-8{
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
   .sm\:py-10{
     padding-top: 2.5rem;
     padding-bottom: 2.5rem;
@@ -11768,10 +11704,6 @@ html {
     padding-top: 2.5rem;
   }
 
-  .lg\:pt-4{
-    padding-top: 1rem;
-  }
-
   .lg\:pt-5{
     padding-top: 1.25rem;
   }
diff --git a/packages/admin/public/js/shopper.js b/packages/admin/public/js/shopper.js
index e9e3c7c47..3a4e0ee35 100644
--- a/packages/admin/public/js/shopper.js
+++ b/packages/admin/public/js/shopper.js
@@ -31,16 +31,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
-/***/ "./packages/admin/resources/js/helpers/darkMode.js":
-/*!*********************************************************!*\
-  !*** ./packages/admin/resources/js/helpers/darkMode.js ***!
-  \*********************************************************/
-/***/ (() => {
-
-eval("/**\n * Make dark mode switch.\n *\n * @type {HTMLCollectionOf<Element>}\n */\nvar darkModeToggles = document.getElementsByClassName('darkModeToggle');\nif (localStorage.theme === 'dark' || !('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n  document.documentElement.classList.add('dark');\n} else {\n  document.documentElement.classList.remove('dark');\n}\nfor (var i = 0; i < darkModeToggles.length; i++) {\n  darkModeToggles[i].onclick = function () {\n    if (localStorage.theme === 'light') {\n      localStorage.theme = 'dark';\n      document.querySelector('html').classList.add('dark');\n      document.querySelector('html').classList.remove('light');\n    } else {\n      localStorage.theme = 'light';\n      document.querySelector('html').classList.remove('dark');\n      document.querySelector('html').classList.add('light');\n    }\n  };\n}//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJkYXJrTW9kZVRvZ2dsZXMiLCJkb2N1bWVudCIsImdldEVsZW1lbnRzQnlDbGFzc05hbWUiLCJsb2NhbFN0b3JhZ2UiLCJ0aGVtZSIsIndpbmRvdyIsIm1hdGNoTWVkaWEiLCJtYXRjaGVzIiwiZG9jdW1lbnRFbGVtZW50IiwiY2xhc3NMaXN0IiwiYWRkIiwicmVtb3ZlIiwiaSIsImxlbmd0aCIsIm9uY2xpY2siLCJxdWVyeVNlbGVjdG9yIl0sInNvdXJjZXMiOlsid2VicGFjazovL3Nob3BwZXIvLi9wYWNrYWdlcy9hZG1pbi9yZXNvdXJjZXMvanMvaGVscGVycy9kYXJrTW9kZS5qcz9mMjYzIl0sInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogTWFrZSBkYXJrIG1vZGUgc3dpdGNoLlxuICpcbiAqIEB0eXBlIHtIVE1MQ29sbGVjdGlvbk9mPEVsZW1lbnQ+fVxuICovXG5jb25zdCBkYXJrTW9kZVRvZ2dsZXMgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCdkYXJrTW9kZVRvZ2dsZScpO1xuXG5pZiAobG9jYWxTdG9yYWdlLnRoZW1lID09PSAnZGFyaycgfHwgKCEoJ3RoZW1lJyBpbiBsb2NhbFN0b3JhZ2UpICYmIHdpbmRvdy5tYXRjaE1lZGlhKCcocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspJykubWF0Y2hlcykpIHtcbiAgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmNsYXNzTGlzdC5hZGQoJ2RhcmsnKTtcbn0gZWxzZSB7XG4gIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5jbGFzc0xpc3QucmVtb3ZlKCdkYXJrJyk7XG59XG5cbmZvciAobGV0IGkgPSAwOyBpIDwgZGFya01vZGVUb2dnbGVzLmxlbmd0aDsgaSsrKSB7XG4gIGRhcmtNb2RlVG9nZ2xlc1tpXS5vbmNsaWNrID0gKCkgPT4ge1xuICAgIGlmIChsb2NhbFN0b3JhZ2UudGhlbWUgPT09ICdsaWdodCcpIHtcbiAgICAgIGxvY2FsU3RvcmFnZS50aGVtZSA9ICdkYXJrJztcbiAgICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2h0bWwnKS5jbGFzc0xpc3QuYWRkKCdkYXJrJyk7XG4gICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdodG1sJykuY2xhc3NMaXN0LnJlbW92ZSgnbGlnaHQnKTtcbiAgICB9IGVsc2Uge1xuICAgICAgbG9jYWxTdG9yYWdlLnRoZW1lID0gJ2xpZ2h0JztcbiAgICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2h0bWwnKS5jbGFzc0xpc3QucmVtb3ZlKCdkYXJrJyk7XG4gICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdodG1sJykuY2xhc3NMaXN0LmFkZCgnbGlnaHQnKTtcbiAgICB9XG4gIH07XG59XG5cbiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLElBQU1BLGVBQWUsR0FBR0MsUUFBUSxDQUFDQyxzQkFBc0IsQ0FBQyxnQkFBZ0IsQ0FBQztBQUV6RSxJQUFJQyxZQUFZLENBQUNDLEtBQUssS0FBSyxNQUFNLElBQUssRUFBRSxPQUFPLElBQUlELFlBQVksQ0FBQyxJQUFJRSxNQUFNLENBQUNDLFVBQVUsQ0FBQyw4QkFBOEIsQ0FBQyxDQUFDQyxPQUFRLEVBQUU7RUFDOUhOLFFBQVEsQ0FBQ08sZUFBZSxDQUFDQyxTQUFTLENBQUNDLEdBQUcsQ0FBQyxNQUFNLENBQUM7QUFDaEQsQ0FBQyxNQUFNO0VBQ0xULFFBQVEsQ0FBQ08sZUFBZSxDQUFDQyxTQUFTLENBQUNFLE1BQU0sQ0FBQyxNQUFNLENBQUM7QUFDbkQ7QUFFQSxLQUFLLElBQUlDLENBQUMsR0FBRyxDQUFDLEVBQUVBLENBQUMsR0FBR1osZUFBZSxDQUFDYSxNQUFNLEVBQUVELENBQUMsRUFBRSxFQUFFO0VBQy9DWixlQUFlLENBQUNZLENBQUMsQ0FBQyxDQUFDRSxPQUFPLEdBQUcsWUFBTTtJQUNqQyxJQUFJWCxZQUFZLENBQUNDLEtBQUssS0FBSyxPQUFPLEVBQUU7TUFDbENELFlBQVksQ0FBQ0MsS0FBSyxHQUFHLE1BQU07TUFDM0JILFFBQVEsQ0FBQ2MsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDTixTQUFTLENBQUNDLEdBQUcsQ0FBQyxNQUFNLENBQUM7TUFDcERULFFBQVEsQ0FBQ2MsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDTixTQUFTLENBQUNFLE1BQU0sQ0FBQyxPQUFPLENBQUM7SUFDMUQsQ0FBQyxNQUFNO01BQ0xSLFlBQVksQ0FBQ0MsS0FBSyxHQUFHLE9BQU87TUFDNUJILFFBQVEsQ0FBQ2MsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDTixTQUFTLENBQUNFLE1BQU0sQ0FBQyxNQUFNLENBQUM7TUFDdkRWLFFBQVEsQ0FBQ2MsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDTixTQUFTLENBQUNDLEdBQUcsQ0FBQyxPQUFPLENBQUM7SUFDdkQ7RUFDRixDQUFDO0FBQ0giLCJmaWxlIjoiLi9wYWNrYWdlcy9hZG1pbi9yZXNvdXJjZXMvanMvaGVscGVycy9kYXJrTW9kZS5qcyIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./packages/admin/resources/js/helpers/darkMode.js\n");
-
-/***/ }),
-
 /***/ "./packages/admin/resources/js/helpers/trix.js":
 /*!*****************************************************!*\
   !*** ./packages/admin/resources/js/helpers/trix.js ***!
@@ -92,7 +82,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! alpinejs */ \"./node_modules/alpinejs/dist/module.esm.js\");\n/* harmony import */ var _alpinejs_focus__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @alpinejs/focus */ \"./node_modules/@alpinejs/focus/dist/module.esm.js\");\n/* harmony import */ var _ryangjchandler_alpine_tooltip__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @ryangjchandler/alpine-tooltip */ \"./node_modules/@ryangjchandler/alpine-tooltip/dist/module.esm.js\");\n/* harmony import */ var _awcodes_alpine_floating_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @awcodes/alpine-floating-ui */ \"./node_modules/@awcodes/alpine-floating-ui/dist/module.esm.js\");\n/* harmony import */ var sortablejs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! sortablejs */ \"./node_modules/sortablejs/modular/sortable.esm.js\");\n/* harmony import */ var filepond__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! filepond */ \"./node_modules/filepond/dist/filepond.js\");\n/* harmony import */ var filepond__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(filepond__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _vendor_filament_notifications_dist_module_esm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../vendor/filament/notifications/dist/module.esm */ \"./vendor/filament/notifications/dist/module.esm.js\");\n/* harmony import */ var _helpers_window__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./helpers/window */ \"./packages/admin/resources/js/helpers/window.js\");\n/* harmony import */ var _helpers_darkMode__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./helpers/darkMode */ \"./packages/admin/resources/js/helpers/darkMode.js\");\n/* harmony import */ var _helpers_darkMode__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_helpers_darkMode__WEBPACK_IMPORTED_MODULE_8__);\n/* harmony import */ var _helpers_trix__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./helpers/trix */ \"./packages/admin/resources/js/helpers/trix.js\");\n/* harmony import */ var _plugins_internationalNumber__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./plugins/internationalNumber */ \"./packages/admin/resources/js/plugins/internationalNumber.js\");\n/* harmony import */ var _plugins_mapBox__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./plugins/mapBox */ \"./packages/admin/resources/js/plugins/mapBox.js\");\n\n\n\n\n\n\n\n\n\n\n\n\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].plugin(_ryangjchandler_alpine_tooltip__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].plugin(_alpinejs_focus__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].plugin(_awcodes_alpine_floating_ui__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].plugin(_vendor_filament_notifications_dist_module_esm__WEBPACK_IMPORTED_MODULE_6__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].data('internationalNumber', _plugins_internationalNumber__WEBPACK_IMPORTED_MODULE_10__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].data('mapBox', _plugins_mapBox__WEBPACK_IMPORTED_MODULE_11__[\"default\"]);\nwindow.Alpine = alpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\nwindow.Sortable = sortablejs__WEBPACK_IMPORTED_MODULE_4__[\"default\"];\nwindow.FilePond = filepond__WEBPACK_IMPORTED_MODULE_5__;\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].start();//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9wYWNrYWdlcy9hZG1pbi9yZXNvdXJjZXMvanMvc2hvcHBlci5qcyIsIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7QUFBNkI7QUFDTTtBQUNpQjtBQUNNO0FBQ3pCO0FBQ0c7QUFDNkQ7QUFFeEU7QUFDRTtBQUNKO0FBQ3dDO0FBQzFCO0FBRXJDQSxnREFBTSxDQUFDUyxNQUFNLENBQUNQLHNFQUFPLENBQUM7QUFDdEJGLGdEQUFNLENBQUNTLE1BQU0sQ0FBQ1IsdURBQUssQ0FBQztBQUNwQkQsZ0RBQU0sQ0FBQ1MsTUFBTSxDQUFDTixtRUFBZ0IsQ0FBQztBQUMvQkgsZ0RBQU0sQ0FBQ1MsTUFBTSxDQUFDSCxzRkFBeUIsQ0FBQztBQUN4Q04sZ0RBQU0sQ0FBQ1UsSUFBSSxDQUFDLHFCQUFxQixFQUFFSCxxRUFBbUIsQ0FBQztBQUN2RFAsZ0RBQU0sQ0FBQ1UsSUFBSSxDQUFDLFFBQVEsRUFBRUYsd0RBQU0sQ0FBQztBQUU3QkcsTUFBTSxDQUFDWCxNQUFNLEdBQUdBLGdEQUFNO0FBQ3RCVyxNQUFNLENBQUNQLFFBQVEsR0FBR0Esa0RBQVE7QUFDMUJPLE1BQU0sQ0FBQ04sUUFBUSxHQUFHQSxxQ0FBUTtBQUUxQkwsZ0RBQU0sQ0FBQ1ksS0FBSyxDQUFDLENBQUMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9zaG9wcGVyLy4vcGFja2FnZXMvYWRtaW4vcmVzb3VyY2VzL2pzL3Nob3BwZXIuanM/NWUzMiJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgQWxwaW5lIGZyb20gJ2FscGluZWpzJ1xuaW1wb3J0IEZvY3VzIGZyb20gJ0BhbHBpbmVqcy9mb2N1cydcbmltcG9ydCBUb29sdGlwIGZyb20gJ0ByeWFuZ2pjaGFuZGxlci9hbHBpbmUtdG9vbHRpcCdcbmltcG9ydCBBbHBpbmVGbG9hdGluZ1VJIGZyb20gJ0Bhd2NvZGVzL2FscGluZS1mbG9hdGluZy11aSdcbmltcG9ydCBTb3J0YWJsZSBmcm9tICdzb3J0YWJsZWpzJ1xuaW1wb3J0ICogYXMgRmlsZVBvbmQgZnJvbSAnZmlsZXBvbmQnXG5pbXBvcnQgTm90aWZpY2F0aW9uc0FscGluZVBsdWdpbiBmcm9tICcuLi8uLi8uLi8uLi92ZW5kb3IvZmlsYW1lbnQvbm90aWZpY2F0aW9ucy9kaXN0L21vZHVsZS5lc20nXG5cbmltcG9ydCAnLi9oZWxwZXJzL3dpbmRvdydcbmltcG9ydCAnLi9oZWxwZXJzL2RhcmtNb2RlJ1xuaW1wb3J0ICcuL2hlbHBlcnMvdHJpeCdcbmltcG9ydCBpbnRlcm5hdGlvbmFsTnVtYmVyIGZyb20gJy4vcGx1Z2lucy9pbnRlcm5hdGlvbmFsTnVtYmVyJ1xuaW1wb3J0IG1hcEJveCBmcm9tICcuL3BsdWdpbnMvbWFwQm94J1xuXG5BbHBpbmUucGx1Z2luKFRvb2x0aXApXG5BbHBpbmUucGx1Z2luKEZvY3VzKVxuQWxwaW5lLnBsdWdpbihBbHBpbmVGbG9hdGluZ1VJKVxuQWxwaW5lLnBsdWdpbihOb3RpZmljYXRpb25zQWxwaW5lUGx1Z2luKVxuQWxwaW5lLmRhdGEoJ2ludGVybmF0aW9uYWxOdW1iZXInLCBpbnRlcm5hdGlvbmFsTnVtYmVyKVxuQWxwaW5lLmRhdGEoJ21hcEJveCcsIG1hcEJveClcblxud2luZG93LkFscGluZSA9IEFscGluZVxud2luZG93LlNvcnRhYmxlID0gU29ydGFibGVcbndpbmRvdy5GaWxlUG9uZCA9IEZpbGVQb25kXG5cbkFscGluZS5zdGFydCgpXG4iXSwibmFtZXMiOlsiQWxwaW5lIiwiRm9jdXMiLCJUb29sdGlwIiwiQWxwaW5lRmxvYXRpbmdVSSIsIlNvcnRhYmxlIiwiRmlsZVBvbmQiLCJOb3RpZmljYXRpb25zQWxwaW5lUGx1Z2luIiwiaW50ZXJuYXRpb25hbE51bWJlciIsIm1hcEJveCIsInBsdWdpbiIsImRhdGEiLCJ3aW5kb3ciLCJzdGFydCJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./packages/admin/resources/js/shopper.js\n");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! alpinejs */ \"./node_modules/alpinejs/dist/module.esm.js\");\n/* harmony import */ var _alpinejs_focus__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @alpinejs/focus */ \"./node_modules/@alpinejs/focus/dist/module.esm.js\");\n/* harmony import */ var _ryangjchandler_alpine_tooltip__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @ryangjchandler/alpine-tooltip */ \"./node_modules/@ryangjchandler/alpine-tooltip/dist/module.esm.js\");\n/* harmony import */ var _awcodes_alpine_floating_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @awcodes/alpine-floating-ui */ \"./node_modules/@awcodes/alpine-floating-ui/dist/module.esm.js\");\n/* harmony import */ var sortablejs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! sortablejs */ \"./node_modules/sortablejs/modular/sortable.esm.js\");\n/* harmony import */ var filepond__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! filepond */ \"./node_modules/filepond/dist/filepond.js\");\n/* harmony import */ var filepond__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(filepond__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _vendor_filament_notifications_dist_module_esm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../vendor/filament/notifications/dist/module.esm */ \"./vendor/filament/notifications/dist/module.esm.js\");\n/* harmony import */ var _helpers_window__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./helpers/window */ \"./packages/admin/resources/js/helpers/window.js\");\n/* harmony import */ var _helpers_trix__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./helpers/trix */ \"./packages/admin/resources/js/helpers/trix.js\");\n/* harmony import */ var _plugins_internationalNumber__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./plugins/internationalNumber */ \"./packages/admin/resources/js/plugins/internationalNumber.js\");\n/* harmony import */ var _plugins_mapBox__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./plugins/mapBox */ \"./packages/admin/resources/js/plugins/mapBox.js\");\n\n\n\n\n\n\n\n\n\n\n\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].plugin(_ryangjchandler_alpine_tooltip__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].plugin(_alpinejs_focus__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].plugin(_awcodes_alpine_floating_ui__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].plugin(_vendor_filament_notifications_dist_module_esm__WEBPACK_IMPORTED_MODULE_6__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].data('internationalNumber', _plugins_internationalNumber__WEBPACK_IMPORTED_MODULE_9__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].data('mapBox', _plugins_mapBox__WEBPACK_IMPORTED_MODULE_10__[\"default\"]);\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].store('theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');\nwindow.addEventListener('dark-mode-toggled', function (event) {\n  alpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].store('theme', event.detail);\n});\nwindow.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (event) {\n  alpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].store('theme', event.matches ? 'dark' : 'light');\n});\nwindow.Alpine = alpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\nwindow.Sortable = sortablejs__WEBPACK_IMPORTED_MODULE_4__[\"default\"];\nwindow.FilePond = filepond__WEBPACK_IMPORTED_MODULE_5__;\nalpinejs__WEBPACK_IMPORTED_MODULE_0__[\"default\"].start();//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9wYWNrYWdlcy9hZG1pbi9yZXNvdXJjZXMvanMvc2hvcHBlci5qcyIsIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7O0FBQTZCO0FBQ007QUFDaUI7QUFDTTtBQUN6QjtBQUNHO0FBQzZEO0FBRXhFO0FBQ0Y7QUFDd0M7QUFDMUI7QUFFckNBLGdEQUFNLENBQUNTLE1BQU0sQ0FBQ1Asc0VBQU8sQ0FBQztBQUN0QkYsZ0RBQU0sQ0FBQ1MsTUFBTSxDQUFDUix1REFBSyxDQUFDO0FBQ3BCRCxnREFBTSxDQUFDUyxNQUFNLENBQUNOLG1FQUFnQixDQUFDO0FBQy9CSCxnREFBTSxDQUFDUyxNQUFNLENBQUNILHNGQUF5QixDQUFDO0FBQ3hDTixnREFBTSxDQUFDVSxJQUFJLENBQUMscUJBQXFCLEVBQUVILG9FQUFtQixDQUFDO0FBQ3ZEUCxnREFBTSxDQUFDVSxJQUFJLENBQUMsUUFBUSxFQUFFRix3REFBTSxDQUFDO0FBRTdCUixnREFBTSxDQUFDVyxLQUFLLENBQ1YsT0FBTyxFQUNQQyxNQUFNLENBQUNDLFVBQVUsQ0FBQyw4QkFBOEIsQ0FBQyxDQUFDQyxPQUFPLEdBQ3JELE1BQU0sR0FDTixPQUNOLENBQUM7QUFFREYsTUFBTSxDQUFDRyxnQkFBZ0IsQ0FBQyxtQkFBbUIsRUFBRSxVQUFDQyxLQUFLLEVBQUs7RUFDdERoQixnREFBTSxDQUFDVyxLQUFLLENBQUMsT0FBTyxFQUFFSyxLQUFLLENBQUNDLE1BQU0sQ0FBQztBQUNyQyxDQUFDLENBQUM7QUFFRkwsTUFBTSxDQUNIQyxVQUFVLENBQUMsOEJBQThCLENBQUMsQ0FDMUNFLGdCQUFnQixDQUFDLFFBQVEsRUFBRSxVQUFDQyxLQUFLLEVBQUs7RUFDckNoQixnREFBTSxDQUFDVyxLQUFLLENBQUMsT0FBTyxFQUFFSyxLQUFLLENBQUNGLE9BQU8sR0FBRyxNQUFNLEdBQUcsT0FBTyxDQUFDO0FBQ3pELENBQUMsQ0FBQztBQUVKRixNQUFNLENBQUNaLE1BQU0sR0FBR0EsZ0RBQU07QUFDdEJZLE1BQU0sQ0FBQ1IsUUFBUSxHQUFHQSxrREFBUTtBQUMxQlEsTUFBTSxDQUFDUCxRQUFRLEdBQUdBLHFDQUFRO0FBRTFCTCxnREFBTSxDQUFDa0IsS0FBSyxDQUFDLENBQUMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9zaG9wcGVyLy4vcGFja2FnZXMvYWRtaW4vcmVzb3VyY2VzL2pzL3Nob3BwZXIuanM/NWUzMiJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgQWxwaW5lIGZyb20gJ2FscGluZWpzJ1xuaW1wb3J0IEZvY3VzIGZyb20gJ0BhbHBpbmVqcy9mb2N1cydcbmltcG9ydCBUb29sdGlwIGZyb20gJ0ByeWFuZ2pjaGFuZGxlci9hbHBpbmUtdG9vbHRpcCdcbmltcG9ydCBBbHBpbmVGbG9hdGluZ1VJIGZyb20gJ0Bhd2NvZGVzL2FscGluZS1mbG9hdGluZy11aSdcbmltcG9ydCBTb3J0YWJsZSBmcm9tICdzb3J0YWJsZWpzJ1xuaW1wb3J0ICogYXMgRmlsZVBvbmQgZnJvbSAnZmlsZXBvbmQnXG5pbXBvcnQgTm90aWZpY2F0aW9uc0FscGluZVBsdWdpbiBmcm9tICcuLi8uLi8uLi8uLi92ZW5kb3IvZmlsYW1lbnQvbm90aWZpY2F0aW9ucy9kaXN0L21vZHVsZS5lc20nXG5cbmltcG9ydCAnLi9oZWxwZXJzL3dpbmRvdydcbmltcG9ydCAnLi9oZWxwZXJzL3RyaXgnXG5pbXBvcnQgaW50ZXJuYXRpb25hbE51bWJlciBmcm9tICcuL3BsdWdpbnMvaW50ZXJuYXRpb25hbE51bWJlcidcbmltcG9ydCBtYXBCb3ggZnJvbSAnLi9wbHVnaW5zL21hcEJveCdcblxuQWxwaW5lLnBsdWdpbihUb29sdGlwKVxuQWxwaW5lLnBsdWdpbihGb2N1cylcbkFscGluZS5wbHVnaW4oQWxwaW5lRmxvYXRpbmdVSSlcbkFscGluZS5wbHVnaW4oTm90aWZpY2F0aW9uc0FscGluZVBsdWdpbilcbkFscGluZS5kYXRhKCdpbnRlcm5hdGlvbmFsTnVtYmVyJywgaW50ZXJuYXRpb25hbE51bWJlcilcbkFscGluZS5kYXRhKCdtYXBCb3gnLCBtYXBCb3gpXG5cbkFscGluZS5zdG9yZShcbiAgJ3RoZW1lJyxcbiAgd2luZG93Lm1hdGNoTWVkaWEoJyhwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyayknKS5tYXRjaGVzXG4gICAgPyAnZGFyaydcbiAgICA6ICdsaWdodCcsXG4pXG5cbndpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdkYXJrLW1vZGUtdG9nZ2xlZCcsIChldmVudCkgPT4ge1xuICBBbHBpbmUuc3RvcmUoJ3RoZW1lJywgZXZlbnQuZGV0YWlsKVxufSlcblxud2luZG93XG4gIC5tYXRjaE1lZGlhKCcocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspJylcbiAgLmFkZEV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIChldmVudCkgPT4ge1xuICAgIEFscGluZS5zdG9yZSgndGhlbWUnLCBldmVudC5tYXRjaGVzID8gJ2RhcmsnIDogJ2xpZ2h0JylcbiAgfSlcblxud2luZG93LkFscGluZSA9IEFscGluZVxud2luZG93LlNvcnRhYmxlID0gU29ydGFibGVcbndpbmRvdy5GaWxlUG9uZCA9IEZpbGVQb25kXG5cbkFscGluZS5zdGFydCgpXG4iXSwibmFtZXMiOlsiQWxwaW5lIiwiRm9jdXMiLCJUb29sdGlwIiwiQWxwaW5lRmxvYXRpbmdVSSIsIlNvcnRhYmxlIiwiRmlsZVBvbmQiLCJOb3RpZmljYXRpb25zQWxwaW5lUGx1Z2luIiwiaW50ZXJuYXRpb25hbE51bWJlciIsIm1hcEJveCIsInBsdWdpbiIsImRhdGEiLCJzdG9yZSIsIndpbmRvdyIsIm1hdGNoTWVkaWEiLCJtYXRjaGVzIiwiYWRkRXZlbnRMaXN0ZW5lciIsImV2ZW50IiwiZGV0YWlsIiwic3RhcnQiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./packages/admin/resources/js/shopper.js\n");
 
 /***/ }),
 
diff --git a/packages/admin/public/mix-manifest.json b/packages/admin/public/mix-manifest.json
index 6e6c1f7db..5e2941c52 100644
--- a/packages/admin/public/mix-manifest.json
+++ b/packages/admin/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/shopper.js": "/js/shopper.js?id=1b7bc571c5c58c741e3e45427e23dac5",
-    "/css/shopper.css": "/css/shopper.css?id=aa3691f84740bb3829659e4c86e003ee"
+    "/js/shopper.js": "/js/shopper.js?id=cd0c5b99f4b5c6d4c4de87527d409e1f",
+    "/css/shopper.css": "/css/shopper.css?id=c7fe2ba225a5a553365313c49a7226d4"
 }
diff --git a/packages/admin/resources/js/helpers/darkMode.js b/packages/admin/resources/js/helpers/darkMode.js
deleted file mode 100644
index da4c1934e..000000000
--- a/packages/admin/resources/js/helpers/darkMode.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Make dark mode switch.
- *
- * @type {HTMLCollectionOf<Element>}
- */
-const darkModeToggles = document.getElementsByClassName('darkModeToggle');
-
-if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-  document.documentElement.classList.add('dark');
-} else {
-  document.documentElement.classList.remove('dark');
-}
-
-for (let i = 0; i < darkModeToggles.length; i++) {
-  darkModeToggles[i].onclick = () => {
-    if (localStorage.theme === 'light') {
-      localStorage.theme = 'dark';
-      document.querySelector('html').classList.add('dark');
-      document.querySelector('html').classList.remove('light');
-    } else {
-      localStorage.theme = 'light';
-      document.querySelector('html').classList.remove('dark');
-      document.querySelector('html').classList.add('light');
-    }
-  };
-}
-
diff --git a/packages/admin/resources/js/shopper.js b/packages/admin/resources/js/shopper.js
index 9b713b1c3..deebd0242 100644
--- a/packages/admin/resources/js/shopper.js
+++ b/packages/admin/resources/js/shopper.js
@@ -7,7 +7,6 @@ import * as FilePond from 'filepond'
 import NotificationsAlpinePlugin from '../../../../vendor/filament/notifications/dist/module.esm'
 
 import './helpers/window'
-import './helpers/darkMode'
 import './helpers/trix'
 import internationalNumber from './plugins/internationalNumber'
 import mapBox from './plugins/mapBox'
@@ -19,6 +18,23 @@ Alpine.plugin(NotificationsAlpinePlugin)
 Alpine.data('internationalNumber', internationalNumber)
 Alpine.data('mapBox', mapBox)
 
+Alpine.store(
+  'theme',
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light',
+)
+
+window.addEventListener('dark-mode-toggled', (event) => {
+  Alpine.store('theme', event.detail)
+})
+
+window
+  .matchMedia('(prefers-color-scheme: dark)')
+  .addEventListener('change', (event) => {
+    Alpine.store('theme', event.matches ? 'dark' : 'light')
+  })
+
 window.Alpine = Alpine
 window.Sortable = Sortable
 window.FilePond = FilePond
diff --git a/packages/admin/resources/views/components/layouts/base.blade.php b/packages/admin/resources/views/components/layouts/base.blade.php
index 99196742a..67af11bdc 100644
--- a/packages/admin/resources/views/components/layouts/base.blade.php
+++ b/packages/admin/resources/views/components/layouts/base.blade.php
@@ -1,7 +1,12 @@
 @props(['title' => null])
 
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+<html
+    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+    class="scroll-smooth"
+    x-data="{ darkMode: localStorage.getItem('theme') === 'dark'}"
+    x-bind:class="{ 'dark': darkMode }"
+>
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/packages/admin/resources/views/livewire/account/dropdown.blade.php b/packages/admin/resources/views/livewire/account/dropdown.blade.php
index c972ed1b3..eb7923460 100644
--- a/packages/admin/resources/views/livewire/account/dropdown.blade.php
+++ b/packages/admin/resources/views/livewire/account/dropdown.blade.php
@@ -49,11 +49,55 @@ class="absolute inset-x-0 bottom-18 z-10 mt-1 origin-bottom-left rounded-lg back
             </div>
             <div class="border-t border-secondary-100 dark:border-secondary-700"></div>
             <div class="py-1" role="none">
-                <div class="flex items-center px-4 py-2 gap-x-4 text-sm leading-5 text-secondary-700 dark:text-secondary-400 transition duration-150 ease-in-out">
+                <div
+                    x-data="{
+                        theme: null,
+                        mode: null,
+
+                        init: function () {
+                            this.theme = localStorage.getItem('theme') || (this.isSystemDark() ? 'dark' : 'light')
+                            this.mode = localStorage.getItem('theme') ? 'manual' : 'auto'
+
+                            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+                                if (this.mode === 'manual') return
+
+                                if (event.matches && (! document.documentElement.classList.contains('dark'))) {
+                                    this.theme = 'dark'
+
+                                    document.documentElement.classList.add('dark')
+                                } else if ((! event.matches) && document.documentElement.classList.contains('dark')) {
+                                    this.theme = 'light'
+
+                                    document.documentElement.classList.remove('dark')
+                                }
+                            })
+
+                            $watch('theme', () => {
+                                if (this.mode === 'auto') return
+
+                                localStorage.setItem('theme', this.theme)
+
+                                if (this.theme === 'dark' && (! document.documentElement.classList.contains('dark'))) {
+                                    document.documentElement.classList.add('dark')
+                                } else if (this.theme === 'light' && document.documentElement.classList.contains('dark')) {
+                                    document.documentElement.classList.remove('dark')
+                                }
+
+                                $dispatch('dark-mode-toggled', this.theme)
+                            })
+                        },
+
+                        isSystemDark: function () {
+                            return window.matchMedia('(prefers-color-scheme: dark)').matches
+                        },
+                    }"
+                    class="flex items-center px-4 py-2 gap-x-4 text-sm leading-5 text-secondary-700 dark:text-secondary-400 transition duration-150 ease-in-out"
+                >
                     <button
                         type="button"
                         aria-pressed="false"
-                        class="darkModeToggle bg-secondary-200 dark:bg-secondary-900 relative flex items-center shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-primary-800 focus:ring-secondary-500"
+                        @click="mode = 'manual'; theme === 'dark' ? theme = 'light' : theme = 'dark'"
+                        class="bg-secondary-200 dark:bg-secondary-900 relative flex items-center shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-primary-800 focus:ring-secondary-500"
                     >
                         <span class="translate-x-0 dark:translate-x-5 relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200">
                             <span class="dark:hidden ease-in-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center" aria-hidden="true">
diff --git a/packages/admin/resources/views/livewire/modals/choose-skeleton.blade.php b/packages/admin/resources/views/livewire/modals/choose-skeleton.blade.php
deleted file mode 100644
index 34bd0adae..000000000
--- a/packages/admin/resources/views/livewire/modals/choose-skeleton.blade.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<x-shopper::modal
-    headerClasses="p-4 sm:px-6 sm:py-4 border-b border-secondary-100 dark:border-secondary-700"
-    contentClasses="relative p-4 sm:px-6 sm:px-5"
-    footerClasses="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
->
-
-    <x-slot name="title">
-        <span class="text-lg leading-6 font-medium text-secondary-900 capitalize dark:text-white">
-            {{ $name }}
-        </span>
-    </x-slot>
-
-    <x-slot name="content">
-        <div class="grid gap-4 sm:grid-cols-3 sm:gap-6">
-            @foreach($skeletons as $skeleton)
-                <div class="relative rounded-md border border-secondary-300 bg-white px-3 py-2 shadow-sm flex items-center hover:border-secondary-400 dark:bg-secondary-700 dark:border-secondary-700 dark:hover:border-secondary-600">
-                    <div class="flex-1 min-w-0">
-                        <a href="{{ route('shopper.settings.mails.create-template', ['type' => $type, 'name' => $name, 'skeleton' => $skeleton]) }}" class="focus:outline-none">
-                            <span class="absolute inset-0" aria-hidden="true"></span>
-                            <p class="text-sm font-medium text-secondary-900 capitalize dark:text-white">
-                                {{ $skeleton }}
-                            </p>
-                        </a>
-                    </div>
-                </div>
-            @endforeach
-        </div>
-    </x-slot>
-
-    <x-slot name="buttons">
-        <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
-            <x-shopper::buttons.default wire:click="$emit('closeModal')" type="button">
-                {{ __('shopper::layout.forms.actions.cancel') }}
-            </x-shopper::buttons.default>
-        </span>
-    </x-slot>
-
-</x-shopper::modal>
diff --git a/packages/admin/resources/views/livewire/modals/create-mailable.blade.php b/packages/admin/resources/views/livewire/modals/create-mailable.blade.php
deleted file mode 100644
index 7055c300f..000000000
--- a/packages/admin/resources/views/livewire/modals/create-mailable.blade.php
+++ /dev/null
@@ -1,82 +0,0 @@
-<x-shopper::modal
-    headerClasses="p-4 sm:px-6 sm:py-4 border-b border-secondary-100 dark:border-secondary-700"
-    contentClasses="relative p-4 sm:px-6 sm:px-5"
-    footerClasses="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
->
-
-    <x-slot name="title">
-        {{ __('shopper::pages/settings.mailable.new_mailable') }}
-    </x-slot>
-
-    <x-slot name="content">
-        <div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
-            <x-shopper::forms.group
-                :label="__('shopper::layout.forms.label.name')"
-                for="name"
-                class="sm:col-span-2"
-                :error="$errors->first('name')"
-                :helpText="__('shopper::pages/settings.mailable.mailable_placeholder')"
-                isRequired
-            >
-                <x-shopper::forms.input wire:model.defer="name" type="text" id="name" />
-            </x-shopper::forms.group>
-            <div class="sm:col-span-2">
-                <div class="relative flex items-start">
-                    <div class="flex items-center h-5">
-                        <x-shopper::forms.checkbox wire:model.defer="isMarkdown" id="is_markdown" />
-                    </div>
-                    <div class="ml-3 text-sm leading-5">
-                        <label for="is_markdown" class="font-medium text-secondary-700 dark:text-secondary-300">
-                            {{ __('shopper::pages/settings.mailable.markdown_template') }}
-                        </label>
-                        <p class="text-secondary-500 dark:text-secondary-400">
-                            {{ __('shopper::pages/settings.mailable.markdown_template_helper') }}
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            @if($isMarkdown)
-                <x-shopper::forms.group
-                    for="markdown"
-                    class="sm:col-span-2"
-                    :label="__('shopper::layout.forms.label.markdown')"
-                    :error="$errors->first('markdownView')"
-                    isRequired
-                >
-                    <x-shopper::forms.input wire:model.defer="markdownView" type="text" id="markdown" placeholder="Eg. markdown.view" />
-                </x-shopper::forms.group>
-            @endif
-
-            <div class="sm:col-span-2">
-                <div class="relative flex items-start">
-                    <div class="flex items-center h-5">
-                        <x-shopper::forms.checkbox wire:model.defer="isForce" id="is_force" />
-                    </div>
-                    <div class="ml-3 text-sm leading-5">
-                        <label for="is_force" class="font-medium text-secondary-700 dark:text-secondary-300">
-                            {{ __('shopper::layout.forms.label.force') }}
-                        </label>
-                        <p class="text-secondary-500 dark:text-secondary-400">
-                            {{ __('shopper::pages/settings.mailable.force_mailable') }}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </x-slot>
-
-    <x-slot name="buttons">
-        <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
-            <x-shopper::buttons.primary wire:click="generateMailable" type="button" wire:loading.attr="disabled">
-                <x-shopper::loader wire:loading wire:target="generateMailable" class="text-white" />
-                {{ __('shopper::layout.forms.actions.save') }}
-            </x-shopper::buttons.primary>
-        </span>
-        <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
-            <x-shopper::buttons.default wire:click="$emit('closeModal')" type="button">
-                {{ __('shopper::layout.forms.actions.cancel') }}
-            </x-shopper::buttons.default>
-        </span>
-    </x-slot>
-</x-shopper::modal>
diff --git a/packages/admin/resources/views/livewire/modals/delete-mailable.blade.php b/packages/admin/resources/views/livewire/modals/delete-mailable.blade.php
deleted file mode 100644
index 5bdccc68a..000000000
--- a/packages/admin/resources/views/livewire/modals/delete-mailable.blade.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<x-shopper::modal footerClasses="px-4 pb-5 sm:px-6 sm:flex sm:flex-row-reverse">
-    <x-slot name="content">
-        <div class="sm:flex sm:items-start">
-            <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                <svg class="h-6 w-6 text-red-600" x-description="Heroicon name: exclamation" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                </svg>
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                <h3 class="text-lg leading-6 font-medium text-secondary-900" id="modal-headline">
-                    {{ __('shopper::modals.mailable.delete_title', ['class' => $item]) }}
-                </h3>
-                <div class="mt-2">
-                    <p class="text-sm leading-5 text-secondary-500">
-                        {{ __('shopper::modals.mailable.confirm_delete_msg') }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </x-slot>
-
-    <x-slot name="buttons">
-        <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
-            <x-shopper::buttons.danger wire:click="delete" type="button">
-                <x-shopper::loader wire:loading wire:target="delete" class="text-white" />
-                {{ __('shopper::layout.forms.actions.confirm') }}
-            </x-shopper::buttons.danger>
-        </span>
-        <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
-            <x-shopper::buttons.default wire:click="$emit('closeModal')" type="button">
-                {{ __('shopper::layout.forms.actions.cancel') }}
-            </x-shopper::buttons.default>
-        </span>
-    </x-slot>
-</x-shopper::modal>
diff --git a/packages/admin/resources/views/livewire/modals/delete-template.blade.php b/packages/admin/resources/views/livewire/modals/delete-template.blade.php
deleted file mode 100644
index 84899332f..000000000
--- a/packages/admin/resources/views/livewire/modals/delete-template.blade.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<x-shopper::modal footerClasses="px-4 pb-5 sm:px-6 sm:flex sm:flex-row-reverse">
-    <x-slot name="content">
-        <div class="sm:flex sm:items-start">
-            <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-danger-100 sm:mx-0 sm:h-10 sm:w-10">
-                <x-heroicon-o-exclamation class="h-6 w-6 text-danger-600" />
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                <h3 class="text-lg leading-6 font-medium text-secondary-900" id="modal-headline">
-                    {{ __('shopper::modals.mailable.delete_template', ['template' => $name]) }}
-                </h3>
-                <div class="mt-2">
-                    <p class="text-sm leading-5 text-secondary-500">
-                        {{ __('shopper::modals.mailable.confirm_delete_template') }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </x-slot>
-
-    <x-slot name="buttons">
-        <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
-            <x-shopper::buttons.danger wire:click="delete" type="button">
-                <x-shopper::loader wire:loading wire:target="delete" class="text-white" />
-                {{ __('shopper::layout.forms.actions.confirm') }}
-            </x-shopper::buttons.danger>
-        </span>
-        <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
-            <x-shopper::buttons.default wire:click="$emit('closeModal')" type="button">
-                {{ __('shopper::layout.forms.actions.cancel') }}
-            </x-shopper::buttons.default>
-        </span>
-    </x-slot>
-</x-shopper::modal>
diff --git a/packages/admin/src/Http/Livewire/Modals/ChooseSkeleton.php b/packages/admin/src/Http/Livewire/Modals/ChooseSkeleton.php
deleted file mode 100644
index f95b903ec..000000000
--- a/packages/admin/src/Http/Livewire/Modals/ChooseSkeleton.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Shopper\Http\Livewire\Modals;
-
-use Illuminate\Contracts\View\View;
-use LivewireUI\Modal\ModalComponent;
-
-class ChooseSkeleton extends ModalComponent
-{
-    public string $name;
-
-    public string $type = 'html';
-
-    public array $skeletons;
-
-    public function mount(string $name, string $type, array $skeletons): void
-    {
-        $this->name = $name;
-        $this->type = $type;
-        $this->skeletons = $skeletons;
-    }
-
-    public static function modalMaxWidth(): string
-    {
-        return 'lg';
-    }
-
-    public function render(): View
-    {
-        return view('shopper::livewire.modals.choose-skeleton');
-    }
-}
diff --git a/packages/admin/src/Http/Livewire/Modals/CreateMailable.php b/packages/admin/src/Http/Livewire/Modals/CreateMailable.php
deleted file mode 100644
index d7a038469..000000000
--- a/packages/admin/src/Http/Livewire/Modals/CreateMailable.php
+++ /dev/null
@@ -1,83 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Shopper\Http\Livewire\Modals;
-
-use Filament\Notifications\Notification;
-use Illuminate\Contracts\View\View;
-use Illuminate\Support\Facades\Artisan;
-use Illuminate\Support\Str;
-use LivewireUI\Modal\ModalComponent;
-use Shopper\Services\Mailable;
-
-class CreateMailable extends ModalComponent
-{
-    public string $name = '';
-
-    public ?string $markdownView = null;
-
-    public bool $isMarkdown = false;
-
-    public bool $isForce = false;
-
-    public static function modalMaxWidth(): string
-    {
-        return 'lg';
-    }
-
-    public function generateMailable(): void
-    {
-        $this->validate(['name' => 'required']);
-
-        if ($this->isMarkdown) {
-            $this->validate(['markdownView' => 'required']);
-        }
-
-        $name = ucwords(Str::camel(preg_replace('/\s+/', '_', $this->name)));
-
-        if (! Mailable::getMailable('name', $name)->isEmpty() && ! $this->isForce) {
-            $this->addError(
-                'name',
-                __('This mailable name already exists. Name should be unique! to override it, enable "force" option.')
-            );
-
-            return;
-        }
-
-        if ('mailable' === mb_strtolower($name)) {
-            $this->addError('name', __('You cannot use this name'));
-
-            return;
-        }
-
-        $params = collect(['name' => $name]);
-
-        if ($this->isMarkdown) {
-            $params->put('--markdown', $this->isMarkdown); // @phpstan-ignore-line
-        }
-
-        if ($this->isForce) {
-            $params->put('--force', true); // @phpstan-ignore-line
-        }
-
-        $exitCode = Artisan::call('make:mail', $params->all());
-
-        if ($exitCode > -1) {
-            Notification::make()
-                ->title(__('Mailable Created'))
-                ->body(__('You Mailable class has been created under the app/Mail folder on your project!'))
-                ->success()
-                ->send();
-
-            $this->emit('onMailableAction');
-
-            $this->closeModal();
-        }
-    }
-
-    public function render(): View
-    {
-        return view('shopper::livewire.modals.create-mailable');
-    }
-}
diff --git a/packages/admin/src/Http/Livewire/Modals/DeleteMailable.php b/packages/admin/src/Http/Livewire/Modals/DeleteMailable.php
deleted file mode 100644
index 0a15de05d..000000000
--- a/packages/admin/src/Http/Livewire/Modals/DeleteMailable.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Shopper\Http\Livewire\Modals;
-
-use Filament\Notifications\Notification;
-use Illuminate\Contracts\View\View;
-use LivewireUI\Modal\ModalComponent;
-
-class DeleteMailable extends ModalComponent
-{
-    public string $item;
-
-    public function mount(string $item): void
-    {
-        $this->item = $item;
-    }
-
-    public static function modalMaxWidth(): string
-    {
-        return 'lg';
-    }
-
-    public function delete(): void
-    {
-        $mailableFile = config('shopper.mails.mailables_dir') . $this->item . '.php';
-
-        if (file_exists($mailableFile)) {
-            unlink($mailableFile);
-
-            Notification::make()
-                ->title(__('Removed'))
-                ->body(__('You have removed the :class', ['class' => $this->item]))
-                ->success()
-                ->send();
-        } else {
-            session()->flash('error', __("This file don't exist."));
-        }
-
-        $this->emit('onMailableAction');
-
-        $this->closeModal();
-    }
-
-    public function render(): View
-    {
-        return view('shopper::livewire.modals.delete-mailable');
-    }
-}
diff --git a/packages/admin/src/Http/Livewire/Modals/DeleteTemplate.php b/packages/admin/src/Http/Livewire/Modals/DeleteTemplate.php
deleted file mode 100644
index a8fdda4cf..000000000
--- a/packages/admin/src/Http/Livewire/Modals/DeleteTemplate.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Shopper\Http\Livewire\Modals;
-
-use Filament\Notifications\Notification;
-use Illuminate\Contracts\View\View;
-use LivewireUI\Modal\ModalComponent;
-use Shopper\Services\Mailable;
-
-class DeleteTemplate extends ModalComponent
-{
-    public string $name;
-
-    public string $slug;
-
-    public function mount(string $name, string $slug): void
-    {
-        $this->name = $name;
-        $this->slug = $slug;
-    }
-
-    public static function modalMaxWidth(): string
-    {
-        return 'lg';
-    }
-
-    public function delete(): void
-    {
-        Mailable::deleteTemplate($this->slug);
-
-        Notification::make()
-            ->title(__('Removed'))
-            ->body(__('You have removed the :template template', ['template' => $this->name]))
-            ->success()
-            ->send();
-
-        $this->emit('onTemplateRemoved');
-
-        $this->closeModal();
-    }
-
-    public function render(): View
-    {
-        return view('shopper::livewire.modals.delete-template');
-    }
-}
diff --git a/packages/core/src/Models/Product.php b/packages/core/src/Models/Product.php
index c4cd14588..b136955a2 100644
--- a/packages/core/src/Models/Product.php
+++ b/packages/core/src/Models/Product.php
@@ -26,6 +26,8 @@
  * @property-read int $id
  * @property-read int|null $parent_id
  * @property-read int|null $price_amount
+ * @property-read int|null $old_price_amount
+ * @property-read int|null $cost_amount
  */
 class Product extends Model implements SpatieHasMedia, ReviewRateable
 {
diff --git a/phpstan.neon b/phpstan.neon
index 14eda2ce6..2c473d492 100644
--- a/phpstan.neon
+++ b/phpstan.neon
@@ -9,9 +9,9 @@ parameters:
         - packages/admin/src/Events/
         - packages/admin/src/Http/Livewire/Components/Discounts/WithDiscountActions.php
         - packages/admin/src/Http/Livewire/Pages/Auth/
-        - packages/admin/src/Services/Mailable.php
         - packages/core/src/Traits/
     ignoreErrors:
         - "#Called 'take' on Laravel collection, but could have been retrieved as a query.#"
         - "#^Call to an undefined method Shopper\\\\Core\\\\Repositories\\\\BaseRepository\\:\\:whereNull\\(\\)\\.$#"
     checkMissingIterableValueType: true
+    treatPhpDocTypesAsCertain: false