diff --git a/README.md b/README.md
index 325eda40..27b4cd69 100644
--- a/README.md
+++ b/README.md
@@ -46,30 +46,7 @@ php artisan vendor:publish --provider="Rapidez\CheckoutTheme\ServiceProvider" --
 
 If you've already overwritten these by yourself before you installed this package, you will have to manually overwrite these as the publish command will not overwrite already existing files.
 
-Add these colors to your `tailwind.config.js` and modify them to your liking:
-(Alternatively, you could add these to a separate file and add it as a preset to your tailwind.config.js)
-```
-colors: {
-    ct: {
-        enhanced: {
-            DEFAULT: '#40C42A',
-        },
-        inactive: {
-            DEFAULT: '#8A8275',
-            100: '#F6F4EE',
-        },
-        disabled: '#EBE8DE',
-        accent: {
-            DEFAULT: '#FEAB05',
-        },
-        primary: {
-            DEFAULT: '#625B50',
-        },
-        border: '#EAE7DC',
-        error: '#DF241D',
-    },
-},
-```
+If you want more information about how we use color variables; Check our [https://docs.rapidez.io/3.x/theming.html#colors](Rapidez docs).
 
 This package also requires the `SKU` functionality to be enabled in the image resizer. This is normally enabled by default.
 
diff --git a/composer.json b/composer.json
index 365a670a..50970a3c 100644
--- a/composer.json
+++ b/composer.json
@@ -20,7 +20,7 @@
         "php": "^8.0|^8.1|^8.2",
         "blade-ui-kit/blade-heroicons": "^2.0",
         "rapidez/account": "^3.0",
-        "rapidez/core": "^3.0"
+        "rapidez/core": "^3.1"
     },
     "autoload": {
         "psr-4": {
diff --git a/lang/nl.json b/lang/nl.json
index 5fba9b97..fae15382 100644
--- a/lang/nl.json
+++ b/lang/nl.json
@@ -8,7 +8,8 @@
     "Address created successfully": "Adres succesvol aangemaakt",
     "Address data": "Adresgegevens",
     "Already logged in": "Al ingelogd",
-    "Amount": "Aantal",
+    "Quantity": "Aantal",
+    "Amount": "Bedrag",
     "Back to account": "Terug naar account",
     "Back to cart": "Terug naar winkelwagen",
     "Back to credentials": "Terug naar inloggegevens",
@@ -22,6 +23,7 @@
     "Continue shopping": "Verder winkelen",
     "Coupon code": "Kortingscode",
     "Customer centre": "Klantenservice",
+    "Decrease quantity": "Aantal verlagen",
     "Delete address": "Adres verwijderen",
     "Delivery method": "Bezorgmethode",
     "Deselect as billing": "Deselecteer als factuuradres",
@@ -32,6 +34,8 @@
     "Enter your email address below, you will receive an email within minutes to reset the password.": "Voer hieronder uw e-mailadres in, u ontvangt binnen enkele minuten een e-mail om het wachtwoord te resetten.",
     "Everything centralized in 1 place such as returns, exchanges and customer service": "Alles gecentraliseerd op 1 plek zoals retouren, ruilingen en klantenservice",
     "Free": "Gratis",
+    "Go to step :step": "Ga naar stap :step",
+    "Increase quantity": "Aantal verhogen",
     "Is this not your account?": "Is dit niet uw account?",
     "Log out": "Uitloggen",
     "Logout from your account": "Uitloggen van uw account",
@@ -71,7 +75,7 @@
     "Vat ID": "BTW-nummer",
     "We will also check if you already have an account so you can checkout more efficiently.": "We zullen ook controleren of u al een account heeft, zodat u efficiënter kunt afrekenen.",
     "We will send a confirmation of your order :orderid to :email": "We sturen een orderbevestiging van bestelling :orderid naar :email",
-    "We will send your order confirmation to this e-mail address. We will also check if you already have an account so you can checkout more efficiently.": "We sturen uw orderbevestiging naar dit e-mailadres. We zullen ook controleren of u al een account heeft om het bestelproces te versnellen.",
+    "We'll email your order confirmation and check if you have an account for faster checkout.": "Op dit e-mailadres ontvang je de orderbevestiging. Ook checken we of je al een account hebt.",
     "Welcome back": "Welkom terug",
     "Yes, I want to subscribe to the newsletter": "Ja, ik wil me inschrijven voor de nieuwsbrief",
     "You already have an account with this e-mail address. Please log in to continue.": "U heeft al een account met dit e-mailadres. Log in om verder te gaan.",
diff --git a/resources/core-overwrites/layouts/checkout/footer.blade.php b/resources/core-overwrites/layouts/checkout/footer.blade.php
index 1d266560..a5e9b7fb 100644
--- a/resources/core-overwrites/layouts/checkout/footer.blade.php
+++ b/resources/core-overwrites/layouts/checkout/footer.blade.php
@@ -1,5 +1,5 @@
 <footer class="mt-auto">
-    <div class="mt-10 flex items-center justify-center gap-6 border-b-4 border-b-ct-enhanced bg-ct-inactive-100 py-4 text-sm text-ct-inactive">
+    <div class="mt-10 flex items-center justify-center gap-6 border-b-4 border-b-primary bg py-4 text-sm text-muted">
         @foreach (['Privacy Policy', 'Terms & Conditions'] as $link)
             <a class="hover:underline" href="#">
                 {{ $link }}
diff --git a/resources/core-overwrites/layouts/checkout/header.blade.php b/resources/core-overwrites/layouts/checkout/header.blade.php
index 3bb4c336..4b70579e 100644
--- a/resources/core-overwrites/layouts/checkout/header.blade.php
+++ b/resources/core-overwrites/layouts/checkout/header.blade.php
@@ -1,16 +1,18 @@
-<div class="bg-inactive-100 text-ct-inactive relative py-3 text-xs font-semibold">
-    <slider reference="header-usp-slider" autoplay loop>
-        <div
+<div class="bg text-muted relative py-3 text-xs font-semibold">
+    <slider reference="header-usp-slider" autoplay>
+        <ul
             ref="header-usp-slider"
             class="scrollbar-hide flex snap-x snap-mandatory items-center gap-7 overflow-x-auto lg:justify-center"
             slot-scope="{ navigate, currentSlide, slidesTotal }"
+            tabindex="0"
+            aria-label="USP features"
         >
             @foreach (['Wide range of products', 'Free returns', 'All items shown are in stock', 'Free shipping'] as $usp)
-                <div class="flex shrink-0 snap-center items-center justify-center gap-2 max-lg:w-full">
-                    <x-heroicon-o-check class="size-4 text-ct-enhanced stroke-2" />
+                <li class="flex shrink-0 snap-center items-center justify-center gap-2 max-lg:w-full">
+                    <x-heroicon-o-check class="size-4 text-primary stroke-2" />
                     <span>{{ $usp }}</span>
-                </div>
+                </li>
             @endforeach
-        </div>
+        </ul>
     </slider>
 </div>
diff --git a/resources/js/components/CheckoutSuccessAddresses.vue b/resources/js/components/CheckoutSuccessAddresses.vue
index b1a3b9a6..34c7aae5 100644
--- a/resources/js/components/CheckoutSuccessAddresses.vue
+++ b/resources/js/components/CheckoutSuccessAddresses.vue
@@ -38,10 +38,6 @@
             billing() {
                 return this.order.billing_address
             },
-
-            pickup() {
-                return this.shipping
-            }
         }
     }
 </script>
diff --git a/resources/views/account/address-edit.blade.php b/resources/views/account/address-edit.blade.php
index 61b2af42..ec41c44d 100644
--- a/resources/views/account/address-edit.blade.php
+++ b/resources/views/account/address-edit.blade.php
@@ -8,7 +8,7 @@
     <x-rapidez-ct::sections>
         <graphql
             query="{ customer { addresses { id firstname middlename lastname street city postcode country_code telephone company vat_id default_billing default_shipping } } }"
-            check="(data) => data.customer?.addresses.find(a => a.id == {{ request()->id }})"
+            :check="(data) => data.customer?.addresses.find(a => a.id == {{ request()->id }})"
             redirect="{{ route('account.edit') }}"
         >
             <div v-if="data && data?.customer?.addresses" slot-scope="{ data }">
diff --git a/resources/views/account/order.blade.php b/resources/views/account/order.blade.php
index 01eead5a..9df31665 100644
--- a/resources/views/account/order.blade.php
+++ b/resources/views/account/order.blade.php
@@ -4,7 +4,7 @@
 @section('title', __('Order') . ' #' . $id)
 @section('button')
     <graphql-mutation
-        query='mutation { reorderItems(orderNumber: "{{ request()->id }}") { cart { id } userInputErrors { message } } }'
+        :query='`mutation { reorderItems(orderNumber: "{{ request()->id }}") { cart { ...cart } userInputErrors { message } } } ${config.fragments.cart}`'
         redirect="{{ route('cart') }}"
         :callback="reorderCallback"
     >
@@ -19,7 +19,7 @@
 @section('account-content')
     <graphql
         query='@include('rapidez::account.partials.queries.order')'
-        check="(data) => data.customer.orders.items[0]"
+        :check="(data) => data.customer.orders.items[0]"
         :callback="async (variables, response) => {return await updateOrder(variables, {data: response.data.customer.orders.items})}"
     >
         <div slot-scope="{ order: data }" v-if="order">
@@ -33,7 +33,7 @@
                 <x-rapidez::button.outline href="/account/orders">
                     @lang('Back to my orders')
                 </x-rapidez::button.outline>
-                <span class="text-ct-inactive">
+                <span class="text-muted">
                     @lang('Order date'): @{{ (new Date(order.order_date)).toLocaleDateString() }}
                 </span>
             </x-rapidez-ct::toolbar>
diff --git a/resources/views/account/partials/account-features.blade.php b/resources/views/account/partials/account-features.blade.php
index 88e00193..48624744 100644
--- a/resources/views/account/partials/account-features.blade.php
+++ b/resources/views/account/partials/account-features.blade.php
@@ -4,15 +4,15 @@
     </x-rapidez-ct::title.lg>
     <x-rapidez-ct::usp-list>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Track status of your order and view order history')</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Quick and easy ordering without having to fill in your details every time')</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 size-5 text-primary" stroke-width="2.5" />
             <span>@lang('Everything centralized in 1 place such as returns, exchanges and customer service')</span>
         </li>
     </x-rapidez-ct::usp-list>
diff --git a/resources/views/account/partials/address-cards.blade.php b/resources/views/account/partials/address-cards.blade.php
index 215bc350..6ab72c58 100644
--- a/resources/views/account/partials/address-cards.blade.php
+++ b/resources/views/account/partials/address-cards.blade.php
@@ -10,7 +10,7 @@
                 </x-rapidez-ct::button.link>
             </x-rapidez-ct::card.address>
         </template>
-        <a href="/account/address/new" class="min-h-[180px] flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-md:hidden">
+        <a href="/account/address/new" class="min-h-[180px] flex flex-col items-center justify-center gap-y-2 font-medium bg-emphasis rounded max-md:hidden">
             <span>+</span>
             <span>@lang('Add a new address')</span>
         </a>
diff --git a/resources/views/account/partials/default-addresses.blade.php b/resources/views/account/partials/default-addresses.blade.php
index 3bb3073f..69d6f5c7 100644
--- a/resources/views/account/partials/default-addresses.blade.php
+++ b/resources/views/account/partials/default-addresses.blade.php
@@ -5,7 +5,7 @@
         v-bind:set-billing="data.customer.billing_address = data.customer.addresses.find(e => e.default_billing)"
         v-bind:set-shipping="data.customer.shipping_address = data.customer.addresses.find(e => e.default_shipping)"
     >
-        <x-rapidez-ct::separated-listing>
+        <x-rapidez-ct::separated-listing tag="div">
             <template v-if="data.customer.addresses.length">
                 <template v-if="data.customer.shipping_address?.default_billing || !data.customer.shipping_address || !data.customer.billing_address">
                     <x-rapidez-ct::address v-bind:address="data.customer.shipping_address" shipping billing/>
@@ -23,7 +23,7 @@
             </div>
             <a href="{{ route('account.edit') }}" class="font-medium">
                 <span>@lang('Account settings')</span>
-                <x-heroicon-o-cog class="h-6 stroke-[1.5px]" />
+                <x-heroicon-o-cog class="size-6 stroke-[1.5px]" />
             </a>
         </x-rapidez-ct::separated-listing>
     </x-rapidez-ct::card>
diff --git a/resources/views/account/partials/forgotpassword.blade.php b/resources/views/account/partials/forgotpassword.blade.php
index 908e7087..611bfd8a 100644
--- a/resources/views/account/partials/forgotpassword.blade.php
+++ b/resources/views/account/partials/forgotpassword.blade.php
@@ -22,7 +22,7 @@
             />
         </label>
         <div class="mt-5 flex items-center justify-between">
-            <a href="{{ route('account.login') }}" class="text-sm text-ct-inactive underline">
+            <a href="{{ route('account.login') }}" class="text-sm text-muted underline">
                 @lang('Back to login')
             </a>
             <x-rapidez::button.secondary
@@ -32,7 +32,7 @@ class="flex items-center gap-1"
                 loader
             >
                 @lang('Send')
-                <x-heroicon-o-arrow-right class="h-4" />
+                <x-heroicon-o-arrow-right class="size-4" />
             </x-rapidez::button.secondary>
         </div>
     </form>
diff --git a/resources/views/account/partials/login.blade.php b/resources/views/account/partials/login.blade.php
index 66198c14..779003c4 100644
--- a/resources/views/account/partials/login.blade.php
+++ b/resources/views/account/partials/login.blade.php
@@ -18,7 +18,7 @@
             />
         </label>
         <div class="flex items-center justify-between">
-            <a href="{{ route('account.forgotpassword') }}" class="text-sm text-ct-inactive underline">
+            <a href="{{ route('account.forgotpassword') }}" class="text-sm text-muted underline">
                 @lang('Forgot your password?')
             </a>
             <x-rapidez::button.secondary
@@ -28,7 +28,7 @@ class="flex items-center gap-1"
                 loader
             >
                 @lang('Login')
-                <x-heroicon-o-arrow-right class="h-4" />
+                <x-heroicon-o-arrow-right class="size-4" />
             </x-rapidez::button.secondary>
         </div>
     </form>
diff --git a/resources/views/account/partials/order/order-total.blade.php b/resources/views/account/partials/order/order-total.blade.php
index f76c7a6d..d1c16fc4 100644
--- a/resources/views/account/partials/order/order-total.blade.php
+++ b/resources/views/account/partials/order/order-total.blade.php
@@ -1,6 +1,6 @@
 <graphql
     query='@include('rapidez::account.partials.queries.order')'
-    check="(data) => data.customer.orders.items[0]"
+    :check="(data) => data.customer.orders.items[0]"
     cache="orderdetail{{ $id }}"
 >
     <x-rapidez-ct::card v-if="data" slot-scope="{ data }">
diff --git a/resources/views/account/partials/order/products.blade.php b/resources/views/account/partials/order/products.blade.php
index bef5758a..dbab7629 100644
--- a/resources/views/account/partials/order/products.blade.php
+++ b/resources/views/account/partials/order/products.blade.php
@@ -1,47 +1,49 @@
-<div class="mt-5 rounded bg-ct-inactive-100 py-4 text-sm">
-    <div class="flex w-full flex-wrap gap-y-3 gap-x-3 text-sm sm:gap-x-6 sm:pr-6 md:items-center">
-        <div class="sm:w-[150px]"></div>
-        <div class="flex-1 sm:w-[150px]">@lang('Product')</div>
-        <div class="flex items-center justify-between gap-10 font-medium max-md:hidden max-sm:flex-1 sm:ml-auto">
-            <div class="w-[60px]">@lang('Price')</div>
-            <div class="w-16 text-center">@lang('Amount')</div>
-            <div class="w-[60px]">@lang('Subtotal')</div>
-        </div>
-    </div>
-</div>
-<ul class="flex flex-col divide-y">
-    <li class="flex py-5" v-for="item in order.items">
+<div class="mt-5">
+    <div class="rounded bg py-4 text-sm">
         <div class="flex w-full flex-wrap gap-y-3 gap-x-3 text-sm sm:gap-x-6 sm:pr-6 md:items-center">
-            <div class="flex h-[100px] w-[150px] items-center justify-center">
-                <img
-                    class="max-h-[100px] max-w-[150px]"
-                    :alt="item.name"
-                    :src="`/storage/{{ config('rapidez.store') }}/resizes/200/sku/${item.product_sku}`"
-                    height="100"
-                    v-if="item.product_sku"
-                >
-                <x-rapidez::no-image v-else class="h-[100px] w-[150px]"/>
-            </div>
-            <div class="flex w-[150px] flex-1 flex-col items-start">
-                <a :href="item.url" dusk="cart-item-name">@{{ item.product_name }}</a>
-                <div class="text-xs text-ct-inactive">
-                    @{{ item.product_sku }}
-                </div>
-                <div v-for="(optionValue, option) in item.options">
-                    @{{ option }}: @{{ optionValue }}
-                </div>
+            <div class="sm:w-[150px]"></div>
+            <div class="flex-1 sm:w-[150px]">@lang('Product')</div>
+            <div class="flex items-center justify-between gap-10 font-medium max-md:hidden max-sm:flex-1 sm:ml-auto">
+                <div class="w-[60px]">@lang('Price')</div>
+                <div class="w-16 text-center">@lang('Quantity')</div>
+                <div class="w-[60px]">@lang('Subtotal')</div>
             </div>
-            <div class="flex items-center justify-between gap-10 font-medium max-sm:flex-1 sm:ml-auto">
-                <div class="flex flex-col gap-px text-sm sm:w-[60px]">
-                    @{{ item.product_sale_price.value | price }}
+        </div>
+    </div>
+    <ul class="flex flex-col divide-y">
+        <li class="flex py-5" v-for="item in order.items">
+            <div class="flex w-full flex-wrap gap-y-3 gap-x-3 text-sm sm:gap-x-6 sm:pr-6 md:items-center">
+                <div class="flex h-[100px] w-[150px] items-center justify-center">
+                    <img
+                        class="max-h-[100px] max-w-[150px]"
+                        :alt="item.product_name"
+                        :src="`/storage/{{ config('rapidez.store') }}/resizes/200/sku/${item.product_sku}`"
+                        height="100"
+                        v-if="item.product_sku"
+                    >
+                    <x-rapidez::no-image v-else class="h-[100px] w-[150px]"/>
                 </div>
-                <div class="flex h-14 w-16 items-center justify-center border text-sm">
-                    @{{ Math.round(item.quantity_ordered) }}
+                <div class="flex w-[150px] flex-1 flex-col items-start">
+                    <a :href="item.url" dusk="cart-item-name">@{{ item.product_name }}</a>
+                    <div class="text-xs text-muted">
+                        @{{ item.product_sku }}
+                    </div>
+                    <div v-for="(optionValue, option) in item.options">
+                        @{{ option }}: @{{ optionValue }}
+                    </div>
                 </div>
-                <div class="text-sm sm:w-[60px]">
-                    @{{ item.product_sale_price.value * item.quantity_ordered | price }}
+                <div class="flex items-center justify-between gap-10 font-medium max-sm:flex-1 sm:ml-auto">
+                    <div class="flex flex-col gap-px text-sm sm:w-[60px]">
+                        @{{ item.product_sale_price.value | price }}
+                    </div>
+                    <div class="flex h-14 w-16 items-center justify-center border text-sm">
+                        @{{ Math.round(item.quantity_ordered) }}
+                    </div>
+                    <div class="text-sm sm:w-[60px]">
+                        @{{ item.product_sale_price.value * item.quantity_ordered | price }}
+                    </div>
                 </div>
             </div>
-        </div>
-    </li>
-</ul>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/resources/views/account/partials/orders.blade.php b/resources/views/account/partials/orders.blade.php
index 82686d18..a980aa3b 100644
--- a/resources/views/account/partials/orders.blade.php
+++ b/resources/views/account/partials/orders.blade.php
@@ -7,19 +7,19 @@
                         @lang('Order') #@{{ order.number }}
                     </x-rapidez-ct::title.lg>
                     <x-rapidez-ct::card.white class="mt-5 flex flex-wrap items-center gap-x-3 md:gap-x-8">
-                        <x-heroicon-s-shopping-cart class="h-5 text-ct-inactive" />
+                        <x-heroicon-s-shopping-cart class="size-5 text-muted" />
                         <div class="flex flex-col">
                             <span class="font-medium">
                                 @lang('Number of products')
                                 (@{{ order.items.length }})
                             </span>
-                            <span class="text-ct-inactive">
+                            <span class="text-muted">
                                 @lang('Total price'): @{{ order.total.grand_total.value | price }}
                                 /
                                 @lang('Order date'): @{{ (new Date(order.order_date)).toLocaleDateString() }}
                             </span>
                         </div>
-                        <x-heroicon-o-chevron-right class="ml-auto h-4 max-sm:hidden" />
+                        <x-heroicon-o-chevron-right class="ml-auto size-4 max-sm:hidden" />
                     </x-rapidez-ct::card.white>
                 </x-rapidez-ct::card.inactive>
             </a>
diff --git a/resources/views/account/partials/register-account-address.blade.php b/resources/views/account/partials/register-account-address.blade.php
index 1784d589..a0cd8de5 100644
--- a/resources/views/account/partials/register-account-address.blade.php
+++ b/resources/views/account/partials/register-account-address.blade.php
@@ -110,7 +110,7 @@
             <span class="relative flex flex-col gap-y-1.5 sm:gap-y-2 text-sm !mb-3">
                 <label>
                     <x-rapidez::label>@lang('Country')</x-rapidez::label>
-                    <x-rapidez::country-select
+                    <x-rapidez::input.select.country
                         name="country_code"
                         v-model="addressVariables.country_code"
                         v-on:change="window.app.$emit('postcode-change', addressVariables)"
diff --git a/resources/views/account/partials/register.blade.php b/resources/views/account/partials/register.blade.php
index a8260594..6abfae6f 100644
--- a/resources/views/account/partials/register.blade.php
+++ b/resources/views/account/partials/register.blade.php
@@ -6,5 +6,5 @@
 </p>
 <x-rapidez::button.outline :href="route('account.register')" class="flex w-fit items-center gap-1">
     @lang('Register')
-    <x-heroicon-o-arrow-right class="h-4" />
+    <x-heroicon-o-arrow-right class="size-4" />
 </x-rapidez::button.outline>
diff --git a/resources/views/cart/coupon.blade.php b/resources/views/cart/coupon.blade.php
index 33c247fc..854749f1 100644
--- a/resources/views/cart/coupon.blade.php
+++ b/resources/views/cart/coupon.blade.php
@@ -10,7 +10,7 @@
                     :error-callback="checkResponseForExpiredCart"
                     v-slot="{ mutate }"
                 >
-                    <form v-on:submit.prevent="mutate" class="text-ct-inactive mt-1 flex items-center gap-x-2">
+                    <form v-on:submit.prevent="mutate" class="text-muted mt-1 flex items-center gap-x-2">
                         <button type="submit">
                             <x-heroicon-s-x-mark class="size-4 text-black-400"/>
                         </button>
diff --git a/resources/views/cart/partials/product/image.blade.php b/resources/views/cart/partials/product/image.blade.php
index 6c18f016..e3298f9d 100644
--- a/resources/views/cart/partials/product/image.blade.php
+++ b/resources/views/cart/partials/product/image.blade.php
@@ -1,6 +1,12 @@
 <td class="h-24 w-32 !pl-0 max-md:flex max-md:w-1/2">
     <img
-        v-if="item.product.image"
+        v-if="item.configured_variant?.image"
+        class="object-contain"
+        :alt="item.product.name"
+        :src="resizedPath(item.configured_variant.image.url + '.webp', '200')"
+    />
+    <img
+        v-else-if="item.product.image"
         v-bind:class="{'opacity-20' : !item.is_available}"
         class="object-contain"
         :alt="item.product.name"
diff --git a/resources/views/cart/partials/product/price.blade.php b/resources/views/cart/partials/product/price.blade.php
index 7f2a7e8a..98d3da2a 100644
--- a/resources/views/cart/partials/product/price.blade.php
+++ b/resources/views/cart/partials/product/price.blade.php
@@ -2,7 +2,7 @@
     <div v-if="item.prices.specialPrice">
         @{{ item.prices.specialPrice | price }}
     </div>
-    <div :class="{ 'line-through text-xs text-ct-inactive font-normal': item.prices.specialPrice }">
+    <div :class="{ 'line-through text-xs text-muted font-normal': item.prices.specialPrice }">
         @{{ item.prices.price_including_tax.value | price }}
     </div>
 </td>
diff --git a/resources/views/cart/partials/product/remove-button.blade.php b/resources/views/cart/partials/product/remove-button.blade.php
index c3eeb074..85ef42f4 100644
--- a/resources/views/cart/partials/product/remove-button.blade.php
+++ b/resources/views/cart/partials/product/remove-button.blade.php
@@ -1,10 +1,10 @@
 <graphql-mutation
-    v-slot="{ mutate }"
-    :query="'mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id })  { ...cart } } ' + config.fragments.cart"
+    :query="'mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id }) { cart { ...cart } } } ' + config.fragments.cart"
     :variables="{ cart_id: mask, cart_item_id: item.id }"
     :notify="{ message: item.product.name + ' ' + config.translations.cart.remove }"
     :callback="updateCart"
     :error-callback="checkResponseForExpiredCart"
+    v-slot="{ mutate }"
 >
     <button
         v-on:click="mutate"
diff --git a/resources/views/cart/partials/products.blade.php b/resources/views/cart/partials/products.blade.php
index 58703680..e6c2b5a5 100644
--- a/resources/views/cart/partials/products.blade.php
+++ b/resources/views/cart/partials/products.blade.php
@@ -1,10 +1,10 @@
 <table class="w-full border-b">
-    <thead class="bg-ct-inactive-100 flex rounded md:table-header-group">
+    <thead class="bg flex rounded md:table-header-group">
         <tr class="text-xs *:py-4 *:font-normal *:px-5">
             <th class="!pl-0 max-md:hidden"></th>
             <th class="text-start">@lang('Product')</th>
             <th class="text-start max-md:hidden">@lang('Price')</th>
-            <th class="!text-center max-md:hidden">@lang('Amount')</th>
+            <th class="!text-center max-md:hidden">@lang('Quantity')</th>
             <th class="text-end max-md:hidden">@lang('Subtotal')</th>
         </tr>
     </thead>
diff --git a/resources/views/cart/partials/sidebar/summary.blade.php b/resources/views/cart/partials/sidebar/summary.blade.php
index c33bf1a7..1a84a081 100644
--- a/resources/views/cart/partials/sidebar/summary.blade.php
+++ b/resources/views/cart/partials/sidebar/summary.blade.php
@@ -12,7 +12,7 @@
             <dd v-if="cart.shipping_addresses[0].selected_shipping_method.amount.value > 0">
                 @{{ cart.shipping_addresses[0].selected_shipping_method.amount.value | price  }}
             </dd>
-            <dd v-else class="font-medium text-ct-enhanced">
+            <dd v-else class="font-medium text-primary">
                 @lang('Free')
             </dd>
         </div>
@@ -32,11 +32,11 @@
 
     <x-rapidez::button.conversion :href="route('checkout')" class="flex w-full items-center justify-center gap-1 mt-6" dusk="checkout">
         @lang('To checkout')
-        <x-heroicon-o-arrow-right class="h-4" />
+        <x-heroicon-o-arrow-right class="size-4" />
     </x-rapidez::button.conversion>
 
     <div class="mt-4 flex items-center justify-center gap-1 text-center text-sm">
-        <x-heroicon-o-check class="h-5 text-ct-accent" stroke-width="2.5" />
+        <x-heroicon-o-check class="size-5 text-primary" stroke-width="2.5" />
         @lang('Ordered within 2 minutes')
     </div>
 </x-rapidez-ct::card>
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
index 44ef9bf2..ecade39a 100644
--- a/resources/views/checkout/pages/credentials.blade.php
+++ b/resources/views/checkout/pages/credentials.blade.php
@@ -7,11 +7,11 @@
 @section('content')
     <div class="container">
         <x-rapidez-ct::layout class="lg:items-end">
-            <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
+            <x-rapidez-ct::title-progress-bar :aria-label="__('Back to cart')" :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Credentials')
             </x-rapidez-ct::title-progress-bar>
-            <x-slot:sidebar>
-                <a href="{{ url('/') }}" class="*:h-auto *:max-h-20 *:w-full *:object-contain max-lg:hidden">
+            <x-slot:sidebar class="max-lg:hidden">
+                <a href="{{ url('/') }}" aria-label="@lang('Home')" class="*:h-auto *:max-h-20 *:w-full *:object-contain">
                     <x-rapidez-ct::logo />
                 </a>
             </x-slot:sidebar>
diff --git a/resources/views/checkout/pages/login.blade.php b/resources/views/checkout/pages/login.blade.php
index e1cb64d9..0a9c9a88 100644
--- a/resources/views/checkout/pages/login.blade.php
+++ b/resources/views/checkout/pages/login.blade.php
@@ -7,11 +7,11 @@
 @section('content')
     <div class="container">
         <x-rapidez-ct::layout class="lg:items-end">
-            <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
+            <x-rapidez-ct::title-progress-bar :aria-label="__('Back to cart')" :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Login')
             </x-rapidez-ct::title-progress-bar>
-            <x-slot:sidebar>
-                <a href="{{ url('/') }}" class="*:h-auto *:max-h-20 *:w-full *:object-contain max-lg:hidden">
+            <x-slot:sidebar class="max-lg:hidden">
+                <a href="{{ url('/') }}" aria-label="@lang('Home')" class="*:h-auto *:max-h-20 *:w-full *:object-contain">
                     <x-rapidez-ct::logo />
                 </a>
             </x-slot:sidebar>
diff --git a/resources/views/checkout/pages/payment.blade.php b/resources/views/checkout/pages/payment.blade.php
index aa2a900b..9ae96b70 100644
--- a/resources/views/checkout/pages/payment.blade.php
+++ b/resources/views/checkout/pages/payment.blade.php
@@ -7,11 +7,11 @@
 @section('content')
     <div class="container">
         <x-rapidez-ct::layout class="lg:items-end">
-            <x-rapidez-ct::title-progress-bar :href="route('checkout', ['step' => 'credentials'])" :$checkoutSteps :$currentStep :$currentStepKey>
+            <x-rapidez-ct::title-progress-bar :aria-label="__('Back to credentials')" :href="route('checkout', ['step' => 'credentials'])" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Payment')
             </x-rapidez-ct::title-progress-bar>
-            <x-slot:sidebar>
-                <a href="{{ url('/') }}" class="*:h-auto *:max-h-20 *:w-full *:object-contain max-lg:hidden">
+            <x-slot:sidebar class="max-lg:hidden">
+                <a href="{{ url('/') }}" aria-label="@lang('Home')" class="*:h-auto *:max-h-20 *:w-full *:object-contain">
                     <x-rapidez-ct::logo />
                 </a>
             </x-slot:sidebar>
diff --git a/resources/views/checkout/partials/buttons/new-address.blade.php b/resources/views/checkout/partials/buttons/new-address.blade.php
index d5548f4c..4722ee24 100644
--- a/resources/views/checkout/partials/buttons/new-address.blade.php
+++ b/resources/views/checkout/partials/buttons/new-address.blade.php
@@ -1,4 +1,4 @@
-<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-md:hidden">
+<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 font-medium bg-emphasis rounded max-md:hidden">
     <span>+</span>
     <span>@lang('Add a new address')</span>
 </button>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/login.blade.php b/resources/views/checkout/partials/sections/login.blade.php
index 97b8fa4a..7d8eeb08 100644
--- a/resources/views/checkout/partials/sections/login.blade.php
+++ b/resources/views/checkout/partials/sections/login.blade.php
@@ -1,5 +1,5 @@
 <login v-slot="{ email, password, go, loginInputChange, emailAvailable, logout }">
-    <div class="grid gap-4 sm:gap-5 md:grid-cols-2 md:items-end">
+    <div class="grid gap-4 sm:gap-5 md:items-end">
         <template v-if="!loggedIn">
             @include('rapidez-ct::checkout.partials.sections.login.logged-out')
         </template>
diff --git a/resources/views/checkout/partials/sections/login/logged-in.blade.php b/resources/views/checkout/partials/sections/login/logged-in.blade.php
index d7acb368..dae7102d 100644
--- a/resources/views/checkout/partials/sections/login/logged-in.blade.php
+++ b/resources/views/checkout/partials/sections/login/logged-in.blade.php
@@ -9,8 +9,8 @@ class="justify-center"
     :placeholder="__('Enter your e-mail address')"
 />
 <div>
-    <p class="text-sm font-medium text-ct-neutral">@lang('Welcome back') @{{ $root.user?.firstname }}!</p>
-    <span class="text-ct-inactive text-sm">
+    <p class="text-sm font-medium">@lang('Welcome back') @{{ $root.user?.firstname }}!</p>
+    <span class="text-muted text-sm">
         @lang('Is this not your account?')
         <user>
             <template v-slot="user">
diff --git a/resources/views/checkout/partials/sections/login/logged-out.blade.php b/resources/views/checkout/partials/sections/login/logged-out.blade.php
index 083ef481..5ae2aef0 100644
--- a/resources/views/checkout/partials/sections/login/logged-out.blade.php
+++ b/resources/views/checkout/partials/sections/login/logged-out.blade.php
@@ -13,8 +13,8 @@ class="justify-center"
             />
         </label>
 
-        <p v-if="checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
-            @lang('We will send your order confirmation to this e-mail address. We will also check if you already have an account so you can checkout more efficiently.')
+        <p v-if="checkoutLogin.isEmailAvailable" class="self-end text-muted">
+            @lang('We\'ll email your order confirmation and check if you have an account for faster checkout.')
         </p>
 
         <template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
@@ -27,7 +27,7 @@ class="justify-center"
                 />
             </label>
         </template>
-        <p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
+        <p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-muted">
             @lang('You already have an account with this e-mail address. Please log in to continue.')
             <a href="{{ route('account.forgotpassword') }}" class="underline hover:no-underline">@lang('Forgot your password?')</a>
         </p>
diff --git a/resources/views/checkout/partials/sections/payment.blade.php b/resources/views/checkout/partials/sections/payment.blade.php
index da94b06c..3673e352 100644
--- a/resources/views/checkout/partials/sections/payment.blade.php
+++ b/resources/views/checkout/partials/sections/payment.blade.php
@@ -11,7 +11,7 @@
     mutate-event="setPaymentMethodOnCart"
     v-slot="{ mutate, variables }"
 >
-    <div partial-submit="mutate" class="flex flex-col gap-4">
+    <div partial-submit="mutate" class="flex flex-col gap-3">
         <div v-for="(method, index) in cart.available_payment_methods">
             @include('rapidez-ct::checkout.partials.sections.payment.payment-methods')
         </div>
@@ -21,7 +21,7 @@
     <div v-if="data?.checkoutAgreements?.length" class="mt-5 flex flex-col gap-y-4" slot-scope="{ data }">
         <div v-for="agreement in data.checkoutAgreements">
             <label
-                class="text-ct-primary cursor-pointer text-sm underline"
+                class="cursor-pointer text-sm underline"
                 v-bind:for="agreement.checkbox_text"
                 v-if="agreement.mode == 'AUTO'"
             >
@@ -30,13 +30,13 @@ class="text-ct-primary cursor-pointer text-sm underline"
             <template v-else>
                 @include('rapidez-ct::checkout.partials.sections.payment.agreement-checkbox')
             </template>
-            <x-rapidez-ct::slideover id="agreement.checkbox_text">
+            <x-rapidez::slideover id="agreement.checkbox_text">
                 <x-slot name="title">
                     @{{ agreement.name }}
                 </x-slot>
                 <div v-if="agreement.is_html" v-html="agreement.content"></div>
                 <div v-else class="whitespace-pre-wrap" v-text="agreement.content"></div>
-            </x-rapidez-ct::slideover>
+            </x-rapidez::slideover>
         </div>
     </div>
 </graphql>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php b/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
index 1f94dbd2..af6720d7 100644
--- a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
+++ b/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
@@ -5,7 +5,7 @@
         dusk="agreements"
         required
     />
-    <label class="text-ct-primary cursor-pointer text-sm underline" v-bind:for="agreement.checkbox_text">
+    <label class="cursor-pointer text-sm underline" v-bind:for="agreement.checkbox_text">
         @{{ agreement.checkbox_text }}
     </label>
 </div>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/payment/payment-methods.blade.php b/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
index 3713926f..b12f3593 100644
--- a/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
+++ b/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
@@ -15,7 +15,8 @@
                 class="absolute right-5 size-8"
                 v-bind:src="`/payment-icons/${method.code}.svg`"
                 onerror="this.onerror=null; this.src=`/payment-icons/default.svg`"
+                v-bind:alt="method.title"
             >
         </div>
     </x-rapidez-ct::input.radio.tile>
-</template>
\ No newline at end of file
+</template>
diff --git a/resources/views/checkout/partials/sections/success/features.blade.php b/resources/views/checkout/partials/sections/success/features.blade.php
index 9f29234f..7552633d 100644
--- a/resources/views/checkout/partials/sections/success/features.blade.php
+++ b/resources/views/checkout/partials/sections/success/features.blade.php
@@ -4,15 +4,15 @@
     </x-rapidez-ct::title.lg>
     <x-rapidez-ct::usp-list>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-primary" stroke-width="2.5" />
             <span>Success usp 1</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-primary" stroke-width="2.5" />
             <span>Success usp 2</span>
         </li>
         <li>
-            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute left-0 top-0 h-5 text-primary" stroke-width="2.5" />
             <span>Success usp 3</span>
         </li>
     </x-rapidez-ct::usp-list>
diff --git a/resources/views/checkout/partials/sections/success/order-info.blade.php b/resources/views/checkout/partials/sections/success/order-info.blade.php
index 4b8db4b2..868814eb 100644
--- a/resources/views/checkout/partials/sections/success/order-info.blade.php
+++ b/resources/views/checkout/partials/sections/success/order-info.blade.php
@@ -1,11 +1,10 @@
 <x-rapidez-ct::card.inactive>
     <div class="flex flex-wrap -space-x-px max-sm:-space-y-px">
         <checkout-success-addresses :order="order">
-            <div slot-scope="{ hideBilling, shipping, billing, pickup }" class="flex flex-1 flex-col -space-y-px">
+            <div slot-scope="{ hideBilling, shipping, billing }" class="flex flex-1 flex-col -space-y-px">
                 <template v-if="hideBilling">
                     <x-rapidez-ct::card.address v-bind:address="shipping" shipping billing check/>
                 </template>
-                <x-rapidez-ct::card.address v-if="pickup" v-bind:address="pickup" custom-title="Pickup address" check/>
                 <x-rapidez-ct::card.address v-if="!hideBilling && shipping" v-bind:address="shipping" shipping check/>
                 <x-rapidez-ct::card.address v-if="!hideBilling && billing" v-bind:address="billing" billing check/>
             </div>
diff --git a/resources/views/checkout/partials/sections/success/products.blade.php b/resources/views/checkout/partials/sections/success/products.blade.php
index d64c885f..544846aa 100644
--- a/resources/views/checkout/partials/sections/success/products.blade.php
+++ b/resources/views/checkout/partials/sections/success/products.blade.php
@@ -1,9 +1,9 @@
-<div class="mt-5 rounded bg-ct-inactive-100 py-4 text-sm">
+<div class="mt-5 rounded bg py-4 text-sm">
     <div class="flex w-full items-center gap-x-6 pr-6 text-xs">
         <div class="sm:w-[150px]"></div>
         <div class="flex-1 sm:w-[150px]">@lang('Product')</div>
         <div class="ml-auto w-16 text-center max-md:hidden">
-            @lang('Amount')
+            @lang('Quantity')
         </div>
     </div>
 </div>
diff --git a/resources/views/checkout/partials/shipping/methods.blade.php b/resources/views/checkout/partials/shipping/methods.blade.php
index c57c28b7..711fe2a9 100644
--- a/resources/views/checkout/partials/shipping/methods.blade.php
+++ b/resources/views/checkout/partials/shipping/methods.blade.php
@@ -30,8 +30,8 @@
                 <div class="sm:w-3/5">@{{ method.carrier_title }}</div>
                 <div class="flex-1">@{{ method.method_title }}</div>
                 <div class="text-right text-sm font-medium">
-                    <div v-if="method.amount.value > 0" class="text-ct-inactive">@{{ method.amount.value | price }}</div>
-                    <div v-else class="text-ct-enhanced">
+                    <div v-if="method.amount.value > 0" class="text-muted">@{{ method.amount.value | price }}</div>
+                    <div v-else class="text-primary">
                         @lang('Free')
                     </div>
                 </div>
diff --git a/resources/views/checkout/partials/sidebar/totals.blade.php b/resources/views/checkout/partials/sidebar/totals.blade.php
index 1fc8cc7c..364f11f9 100644
--- a/resources/views/checkout/partials/sidebar/totals.blade.php
+++ b/resources/views/checkout/partials/sidebar/totals.blade.php
@@ -12,7 +12,7 @@
         <small v-cloak>@{{ cart.shipping_addresses[0]?.selected_shipping_method.carrier_title }} - @{{ cart.shipping_addresses[0]?.selected_shipping_method.method_title }}</small>
     </dt>
     <dd v-cloak v-if="cart.shipping_addresses[0]?.selected_shipping_method.amount.value > 0">@{{ cart.shipping_addresses[0]?.selected_shipping_method.amount.value | price }}</dd>
-    <dd v-else class="text-ct-enhanced font-medium">
+    <dd v-else class="text-primary font-medium">
         @lang('Free')
     </dd>
 </div>
diff --git a/resources/views/checkout/partials/sidebar/user-info.blade.php b/resources/views/checkout/partials/sidebar/user-info.blade.php
index 2e1308da..466f3a3c 100644
--- a/resources/views/checkout/partials/sidebar/user-info.blade.php
+++ b/resources/views/checkout/partials/sidebar/user-info.blade.php
@@ -1,4 +1,4 @@
-<template v-if="cart.shipping_addresses[0]?.uid == cart.billing_address?.uid || cart.shipping_addresses[0]?.customer_address_id == cart.billing_address?.customer_address_id">
+<template v-if="!cart.billing_address || cart.billing_address?.same_as_shipping">
     <x-rapidez-ct::card v-if="cart.shipping_addresses[0]">
         <x-rapidez-ct::address v-bind:address="cart.shipping_addresses[0]" shipping billing>
             <x-rapidez-ct::button.link :href="route('checkout', ['step' => 'credentials'])">
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
index f1823678..93d18dc3 100644
--- a/resources/views/checkout/steps/success.blade.php
+++ b/resources/views/checkout/steps/success.blade.php
@@ -7,7 +7,7 @@
             </x-rapidez-ct::title>
         
             <x-rapidez-ct::sections>
-                <x-rapidez-ct::card.inactive class="!bg-ct-accent/20">
+                <x-rapidez-ct::card.inactive class="!bg-primary/20">
                 @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
             </x-rapidez-ct::card.inactive>
             </x-rapidez-ct::sections>
diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index 8af9b955..c62c673a 100644
--- a/resources/views/components/address-form.blade.php
+++ b/resources/views/components/address-form.blade.php
@@ -26,7 +26,7 @@
     @endif
     <label class="sm:col-span-2">
         <x-rapidez::label>@lang('Country')</x-rapidez::label>
-        <x-rapidez::country-select
+        <x-rapidez::input.select.country
             name="{{ $type }}_country"
             v-model="{{ $address }}.{{ $countryKey }}"
             required
diff --git a/resources/views/components/address.blade.php b/resources/views/components/address.blade.php
index ecc94f2e..708c65f4 100644
--- a/resources/views/components/address.blade.php
+++ b/resources/views/components/address.blade.php
@@ -10,8 +10,8 @@
     <div {{ $attributes->whereDoesntStartWith('v-')->class('flex flex-col') }}>
         <template v-if="!isEmpty">
             <template v-if="check">
-                <div class="bg-ct-accent absolute inset-y-0 left-0 w-1 rounded-l"></div>
-                <x-heroicon-o-check class="text-ct-accent absolute right-7 top-7 w-5" stroke-width="2.5" />
+                <div class="bg-primary absolute inset-y-0 left-0 w-1 rounded-l"></div>
+                <x-heroicon-o-check class="text-primary absolute right-7 top-7 w-5" stroke-width="2.5" />
             </template>
             <template v-else-if="disabled">
                 <x-heroicon-o-lock-closed class="absolute right-5 top-5 w-6" />
diff --git a/resources/views/components/button/link.blade.php b/resources/views/components/button/link.blade.php
index d8effaf8..e61ae406 100644
--- a/resources/views/components/button/link.blade.php
+++ b/resources/views/components/button/link.blade.php
@@ -1,7 +1,7 @@
 @props(['tag'])
 <x-rapidez::tag
     is="{{ $tag ?? ($attributes->has('href') || $attributes->has('v-bind:href') ? 'a' : 'button') }}"
-    {{ $attributes->merge(['class' => 'underline text-ct-inactive text-right disabled:no-underline disabled:cursor-not-allowed disabled:opacity-50']) }}
+    {{ $attributes->merge(['class' => 'underline text-muted text-right disabled:no-underline disabled:cursor-not-allowed disabled:opacity-50']) }}
 >
     {{ $slot }}
 </x-rapidez::tag>
diff --git a/resources/views/components/card/address.blade.php b/resources/views/components/card/address.blade.php
index 89d89c47..6c925b0b 100644
--- a/resources/views/components/card/address.blade.php
+++ b/resources/views/components/card/address.blade.php
@@ -8,7 +8,7 @@
 
 <x-rapidez-ct::card.white
     {{ $attributes->only('v-if') }}
-    v-bind:class="{!! $attributes['v-bind:disabled'] !!} ? '!bg-ct-disabled !text-ct-inactive' : ''"
+    v-bind:class="{!! $attributes['v-bind:disabled'] !!} ? '!bg-emphasis !text-muted' : ''"
     :$check
 >
     <x-rapidez-ct::address :$attributes :$customTitle>
diff --git a/resources/views/components/card/inactive.blade.php b/resources/views/components/card/inactive.blade.php
index 19f659c7..083c662d 100644
--- a/resources/views/components/card/inactive.blade.php
+++ b/resources/views/components/card/inactive.blade.php
@@ -1,3 +1,3 @@
-<div {{ $attributes->class('relative bg-ct-inactive-100 px-6 pt-6 pb-6 sm:px-9 sm:pt-7 sm:pb-9 rounded') }}>
+<div {{ $attributes->class('relative bg px-6 pt-6 pb-6 sm:px-9 sm:pt-7 sm:pb-9 rounded') }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/card/index.blade.php b/resources/views/components/card/index.blade.php
index b81d814d..6d8536b0 100644
--- a/resources/views/components/card/index.blade.php
+++ b/resources/views/components/card/index.blade.php
@@ -1,4 +1,4 @@
-<div {{ $attributes->class('relative flex bg-ct-inactive-100 p-3 rounded lg:w-[340px] xl:w-[370px]') }}>
+<div {{ $attributes->class('relative flex bg p-3 rounded lg:w-[340px] xl:w-[370px]') }}>
     <x-rapidez-ct::card.white>
         {{ $slot }}
     </x-rapidez-ct::card.white>
diff --git a/resources/views/components/card/white.blade.php b/resources/views/components/card/white.blade.php
index d5d58eee..c92a100f 100644
--- a/resources/views/components/card/white.blade.php
+++ b/resources/views/components/card/white.blade.php
@@ -2,7 +2,7 @@
 <div {{ $attributes->class('relative flex-1 rounded border bg-white px-8 py-6') }}>
     @if ($check)
         <template v-if="{{ $check }}">
-            <x-heroicon-o-check class="absolute right-7 top-7 w-5 text-ct-accent" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute right-7 top-7 w-5 text-primary" stroke-width="2.5" />
         </template>
     @endif
     {{ $slot }}
diff --git a/resources/views/components/coupon-field.blade.php b/resources/views/components/coupon-field.blade.php
index e254b22a..131e57bd 100644
--- a/resources/views/components/coupon-field.blade.php
+++ b/resources/views/components/coupon-field.blade.php
@@ -1,16 +1,15 @@
 <graphql-mutation
-    :query="'mutation ($cart_id: String!, $coupon_code: String!) { applyCouponToCart(input: { cart_id: $cart_id, coupon_code: $coupon_code })  { ...cart } } ' + config.fragments.cart"
+    :query="'mutation ($cart_id: String!, $coupon_code: String!) { applyCouponToCart(input: { cart_id: $cart_id, coupon_code: $coupon_code }) { cart { ...cart } } } ' + config.fragments.cart"
     :variables="{ cart_id: mask, coupon_code: '' }"
     :notify="{ message: config.translations.cart.coupon.applied }"
     :clear="true"
     :watch="false"
     :callback="updateCart"
-    :error-callback="checkResponseForExpiredCart"
     v-slot="{ mutate, variables }"
 >
     <form v-on:submit.prevent="mutate" class="flex w-full gap-x-3">
         <x-rapidez::input
-            class="text-ct-primary w-60"
+            class="w-60"
             name="couponCode"
             :placeholder="__('Coupon code')"
             v-model="variables.coupon_code"
diff --git a/resources/views/components/dashboard/item/index.blade.php b/resources/views/components/dashboard/item/index.blade.php
index bffb1015..03f5476f 100644
--- a/resources/views/components/dashboard/item/index.blade.php
+++ b/resources/views/components/dashboard/item/index.blade.php
@@ -5,7 +5,7 @@
     'is' => isset($item['href']) ? 'a' : 'button',
 ]) }}>
     @if ($item['icon'] ?? false)
-        <x-icon name="{{ $item['icon'] }}" class="h-6 w-6 stroke-[1.5px]"/>
+        <x-icon name="{{ $item['icon'] }}" class="size-6 stroke-[1.5px]"/>
     @endif
     <div class="flex flex-col gap-y-1">
         @if ($item['heading'] ?? false)
@@ -21,10 +21,10 @@
             </strong>
         @endif
         @if ($item['subheading'] ?? false)
-            <p class="text-ct-inactive">
+            <p class="text-muted">
                 @lang($item['subheading'])
             </p>
         @endif
     </div>
-    <x-heroicon-o-chevron-right class="ml-auto h-4" />
+    <x-heroicon-o-chevron-right class="ml-auto size-4" />
 </x-rapidez::tag>
diff --git a/resources/views/components/dashboard/sidebar-item/index.blade.php b/resources/views/components/dashboard/sidebar-item/index.blade.php
index 25ac5d36..7fbec7bb 100644
--- a/resources/views/components/dashboard/sidebar-item/index.blade.php
+++ b/resources/views/components/dashboard/sidebar-item/index.blade.php
@@ -12,5 +12,5 @@
             </template>
         </graphql>
     @endif
-    <x-heroicon-o-chevron-right class="h-4" />
+    <x-heroicon-o-chevron-right class="size-4" />
 </x-rapidez::tag>
diff --git a/resources/views/components/input/checkbox/tile.blade.php b/resources/views/components/input/checkbox/tile.blade.php
index 283ee680..7585ca27 100644
--- a/resources/views/components/input/checkbox/tile.blade.php
+++ b/resources/views/components/input/checkbox/tile.blade.php
@@ -1,13 +1,13 @@
 @props(['name' => '', 'id' => uniqid('checkbox-')])
-<label for="{{ $id }}" {{ $attributes->only('class')->class('text-ct-primary relative flex cursor-pointer select-none flex-wrap gap-x-3 text-sm [&>span]:flex-1') }}>
-    <input
-        class="text-ct-accent peer size-6 cursor-pointer rounded border-ct-border transition focus:outline-none focus:ring-0 focus:ring-offset-0"
+<label for="{{ $id }}" {{ $attributes->only('class')->class('relative flex cursor-pointer select-none gap-x-3 text-sm') }}>
+    <x-rapidez::input.checkbox.base
+        class="size-6 text-primary peer"
         id="{{ $id }}"
         name="{{ $name }}"
-        type="checkbox"
         {{ $attributes->except('class') }}
     />
     @isset($slot)
         <span {{ $slot->attributes->class('mt-0.5') ?? '' }}>{{ $slot }}</span>
     @endisset
+    <div class="absolute -inset-y-px -left-px w-1 rounded-l bg-primary opacity-0 transition-all peer-checked:opacity-100"></div>
 </label>
diff --git a/resources/views/components/input/quantity.blade.php b/resources/views/components/input/quantity.blade.php
index 687e6d98..6870b032 100644
--- a/resources/views/components/input/quantity.blade.php
+++ b/resources/views/components/input/quantity.blade.php
@@ -6,26 +6,30 @@
     :error-callback="checkResponseForExpiredCart"
     v-slot="{ mutate, variables }"
 >
-    <form v-on:submit.prevent="mutate" class="flex w-20 overflow-hidden border rounded">
-        <button
-            class="flex-1 bg-ct-inactive-100 transition hover:bg-opacity-80"
-            v-on:click.prevent="variables.quantity <= (item.product.stock_item?.min_sale_qty || 1) ? variables.quantity = variables.quantity : variables.quantity = +variables.quantity - (item.product.stock_item?.qty_increments || 1);mutate()"
-        >-</button>
-        <input
-            class="h-10 w-2/5 border-none px-0 text-center text-sm [appearance:textfield] focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-            name="qty"
-            type="number"
-            {{ $attributes }}
-            v-model="variables.quantity"
-            v-on:change="mutate"
-            v-bind:min="Math.max(item.product.stock_item?.min_sale_qty, item.product.stock_item?.qty_increments) || null"
-            v-bind:max="item.product.stock_item?.max_sale_qty"
-            v-bind:step="item.qty_increments"
-            v-bind:dusk="'qty-'+index"
-        />
-        <button
-            class="flex-1 bg-ct-inactive-100 transition hover:bg-opacity-80"
-            v-on:click.prevent="variables.quantity = +variables.quantity + (item.product.stock_item?.qty_increments || 1);mutate()"
-        >+</button>
+    <form v-on:submit.prevent="mutate" class="w-20">
+        <label class="flex overflow-hidden border rounded">
+            <button
+                class="flex-1 bg transition hover:bg-opacity-80"
+                v-on:click.prevent="variables.quantity <= (item.product.stock_item?.min_sale_qty || 1) ? variables.quantity = variables.quantity : variables.quantity = +variables.quantity - (item.product.stock_item?.qty_increments || 1);mutate()"
+                aria-label="@lang('Decrease quantity')"
+            >-</button>
+            <input
+                class="h-10 w-2/5 border-none px-0 text-center text-sm [appearance:textfield] focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                name="qty"
+                type="number"
+                {{ $attributes }}
+                v-model="variables.quantity"
+                v-on:change="mutate"
+                v-bind:min="Math.max(item.product.stock_item?.min_sale_qty, item.product.stock_item?.qty_increments) || null"
+                v-bind:max="item.product.stock_item?.max_sale_qty"
+                v-bind:step="item.qty_increments"
+                v-bind:dusk="'qty-'+index"
+            />
+            <button
+                class="flex-1 bg transition hover:bg-opacity-80"
+                v-on:click.prevent="variables.quantity = +variables.quantity + (item.product.stock_item?.qty_increments || 1);mutate()"
+                aria-label="@lang('Increase quantity')"
+            >+</button>
+        </label>
     </form>
 </graphql-mutation>
diff --git a/resources/views/components/input/radio/tile.blade.php b/resources/views/components/input/radio/tile.blade.php
index 2b554436..44387944 100644
--- a/resources/views/components/input/radio/tile.blade.php
+++ b/resources/views/components/input/radio/tile.blade.php
@@ -1,11 +1,13 @@
-<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded border bg-white px-5 sm:px-7 py-7 text-ct-sm text-ct-primary') }}>
-    <span class="flex aspect-square size-6 items-center justify-center rounded-full border bg-ct-white">
-        <input type="radio" {{ $attributes->except('class') }} class="peer size-3 border-none text-ct-accent transition checked:bg-none focus:ring-0 focus:ring-offset-0" />
-        <span class="absolute -inset-y-px -left-px w-1 rounded-l bg-ct-accent opacity-0 transition-all peer-checked:opacity-100"></span>
-    </span>
+<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded border bg-white px-5 sm:px-7 py-7') }}>
+    <x-rapidez::input.radio.base
+        class="size-6 text-primary peer"
+        name="{{ $name }}"
+        {{ $attributes->except('class') }}
+    />
     @isset($slot)
         <span class="flex w-full flex-wrap items-center justify-between gap-x-3">
             {{ $slot }}
         </span>
     @endisset
+    <div class="absolute -inset-y-px -left-px w-1 rounded-l bg-primary opacity-0 transition-all peer-checked:opacity-100"></div>
 </label>
diff --git a/resources/views/components/layout/index.blade.php b/resources/views/components/layout/index.blade.php
index 05e1d2e5..ad13ea3f 100644
--- a/resources/views/components/layout/index.blade.php
+++ b/resources/views/components/layout/index.blade.php
@@ -1,8 +1,8 @@
-<div {{ $attributes->class('text-ct-primary flex flex-wrap gap-8 text-sm max-lg:flex-col') }}>
+<div {{ $attributes->class('text flex flex-wrap gap-8 text-sm max-lg:flex-col') }}>
     <div class="flex-1">
         {{ $slot }}
     </div>
-    <x-rapidez-ct::layout.sidebar>
+    <x-rapidez-ct::layout.sidebar :attributes="$sidebar->attributes">
         {{ $sidebar }}
     </x-rapidez-ct::layout.sidebar>
 </div>
diff --git a/resources/views/components/newsletter-visual.blade.php b/resources/views/components/newsletter-visual.blade.php
index 9aef8a3a..5eb8311a 100644
--- a/resources/views/components/newsletter-visual.blade.php
+++ b/resources/views/components/newsletter-visual.blade.php
@@ -1,5 +1,5 @@
 <div class="absolute right-7 top-1/2 -translate-y-1/2 max-lg:hidden">
-    <div class="bg-ct-inactive-100 text-ct-inactive items-center justify-center rounded-full p-4">
-        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
+    <div class="bg text-muted items-center justify-center rounded-full p-3">
+        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
     </div>
 </div>
diff --git a/resources/views/components/newsletter/partials/checkbox.blade.php b/resources/views/components/newsletter/partials/checkbox.blade.php
index 36e69849..dba33836 100644
--- a/resources/views/components/newsletter/partials/checkbox.blade.php
+++ b/resources/views/components/newsletter/partials/checkbox.blade.php
@@ -1,15 +1,16 @@
 @props(['isPartOfAnotherForm' => false, 'id'])
 
 <x-rapidez-ct::input.checkbox.tile :attributes="$attributes->merge([
-    'class' => 'relative flex w-full cursor-pointer !items-start rounded border bg-white p-7',
+    'class' => 'relative flex w-full cursor-pointer !items-start rounded-md border bg-white px-7 py-5',
     'id' => $id,
 ])" v-on:change="() => {
         if (typeof mutate === 'function' && (!{{ (int)$isPartOfAnotherForm }})) { mutate() }
         if ($root.loggedIn) { $root.user.extension_attributes.is_subscribed={{ $attributes->get('v-model') }} }
     }">
+    
     <x-slot:slot class="flex flex-col gap-1">
-        <span class="text-ct-primary text-sm font-medium">@lang('Yes, I want to subscribe to the newsletter')</span>
-        <span class="text-ct-inactive text-xs font-normal">@lang('You will receive this newsletter approximately 2x a year')</span>
+        <span class="text-sm font-medium">@lang('Yes, I want to subscribe to the newsletter')</span>
+        <span class="text-muted text-xs font-normal">@lang('You will receive this newsletter approximately 2x a year')</span>
         <x-rapidez-ct::newsletter-visual />
     </x-slot:slot>
 </x-rapidez-ct::input.checkbox.tile>
diff --git a/resources/views/components/popup.blade.php b/resources/views/components/popup.blade.php
index 25b8c364..cf8e61d1 100644
--- a/resources/views/components/popup.blade.php
+++ b/resources/views/components/popup.blade.php
@@ -1,10 +1,10 @@
 @props(['title' => '', 'id' => 'popup'])
 
 <input type="checkbox" id="{{ $id }}" class="peer hidden"/>
-<div class="fixed inset-0 opacity-0 transition z-50 flex justify-center items-center pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto lg:py-5">
+<div class="fixed inset-0 opacity-0 transition z-popup flex justify-center items-center pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto lg:py-5">
     <x-rapidez-ct::sections class="relative z-10 max-h-full overflow-y-auto scrollbar-hide">
         <x-rapidez-ct::card.inactive>
-            <label for="{{ $id }}" class="absolute cursor-pointer z-10 top-7 right-7 w-5 h-5">
+            <label for="{{ $id }}" class="absolute cursor-pointer z-10 top-7 right-7 size-5">
                 <x-heroicon-o-x-mark />
             </label>
             @if($title)
@@ -15,5 +15,5 @@
             {{ $slot }}
         </x-rapidez-ct::card.inactive>
     </x-rapidez-ct::sections>
-    <label class="absolute inset-0 bg-ct-primary/60 cursor-pointer" for="{{ $id }}"></label>
+    <label class="absolute inset-0 bg-black/60 cursor-pointer" for="{{ $id }}"></label>
 </div>
diff --git a/resources/views/components/progress-bar/index.blade.php b/resources/views/components/progress-bar/index.blade.php
index f5569e0e..a0271ffc 100644
--- a/resources/views/components/progress-bar/index.blade.php
+++ b/resources/views/components/progress-bar/index.blade.php
@@ -1,6 +1,6 @@
 @aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
 <div class="flex items-center gap-x-3.5 sm:gap-x-4 text-xs">
-    <span class="whitespace-nowrap font-medium text-ct-inactive">
+    <span class="whitespace-nowrap font-medium text-muted">
         @lang('Step :step out of :total', [
             'step' => $currentStepKey + 1,
             'total' => count($checkoutSteps),
@@ -8,11 +8,12 @@
     </span>
     @foreach ($checkoutSteps as $checkoutStepKey => $checkoutStep)
         <a href="{{ route('checkout', $checkoutStep) }}"
+            aria-label="@lang('Go to step :step', ['step' => $checkoutStepKey + 1])"
             @class([
-                'size-3 rounded text-center bg-ct-accent',
+                'size-3 rounded text-center bg-primary',
                 'cursor-pointer' => $currentStepKey < $checkoutStepKey,
-                'pointer-events-none !bg-ct-border' => $checkoutStepKey > $currentStepKey,
-                'outline-4 outline outline-ct-accent/20' => $checkoutStepKey === $currentStepKey
+                'pointer-events-none !bg-emphasis' => $checkoutStepKey > $currentStepKey,
+                'outline-4 outline outline-primary/20' => $checkoutStepKey === $currentStepKey,
             ])
         ></a>
     @endforeach
diff --git a/resources/views/components/separated-listing/index.blade.php b/resources/views/components/separated-listing/index.blade.php
index 3e146167..adf715d9 100644
--- a/resources/views/components/separated-listing/index.blade.php
+++ b/resources/views/components/separated-listing/index.blade.php
@@ -1,4 +1,4 @@
 @props(['tag' => 'ul'])
-<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm mt-1 divide-y [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0 [&>*]:flex [&>*]:flex-wrap [&>*]:justify-between') }}>
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm mt-1 divide-y *:py-4 first:*:pt-0 last:*:pb-0 *:flex *:flex-wrap *:justify-between') }}>
     {{ $slot }}
 </x-rapidez::tag>
diff --git a/resources/views/components/slideover.blade.php b/resources/views/components/slideover.blade.php
deleted file mode 100644
index 113ebb3e..00000000
--- a/resources/views/components/slideover.blade.php
+++ /dev/null
@@ -1,14 +0,0 @@
-@props(['id', 'title' => ''])
-<input type="checkbox" v-bind:id="{{ $id }}" class="peer hidden"/>
-<label v-bind:for="{{ $id }}" class="pointer-events-none fixed inset-0 z-50 cursor-pointer bg-ct-primary/60 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
-<div class="pointer-events-none fixed top-0 -right-full z-50 flex h-screen w-full max-w-md flex-col bg-white transition-[right] duration-300 peer-checked:pointer-events-auto peer-checked:right-0">
-    <div class="flex w-full items-center justify-center bg-ct-primary py-4 px-5 text-lg font-bold text-white">
-        <div>{{ $title }}</div>
-        <label v-bind:for="{{ $id }}" class="absolute right-5 cursor-pointer">
-            <x-heroicon-o-x-mark class="h-6" />
-        </label>
-    </div>
-    <div class="overflow-y-auto overflow-x-hidden p-5">
-        {{ $slot }}
-    </div>
-</div>
diff --git a/resources/views/components/title-progress-bar.blade.php b/resources/views/components/title-progress-bar.blade.php
index a7a18b1c..f0332846 100644
--- a/resources/views/components/title-progress-bar.blade.php
+++ b/resources/views/components/title-progress-bar.blade.php
@@ -4,15 +4,15 @@
     <div class="flex gap-5 max-lg:flex-col lg:-translate-x-10">
         <div class="flex items-center gap-5 lg:items-center">
             @if ($isAnchor)
-                <a href="{{ $attributes->get('href', ':href', 'v-bind:href') }}" class="max-lg:size-14 max-lg:flex max-lg:items-center max-lg:justify-center max-lg:rounded-full max-lg:border">
-                    <x-heroicon-o-arrow-left class="text-ct-primary size-5" />
+                <a href="{{ $attributes->get('href', ':href', 'v-bind:href') }}" aria-label="{{ $attributes->get('aria-label') }}" class="max-lg:size-14 max-lg:flex max-lg:items-center max-lg:justify-center max-lg:rounded-full max-lg:border">
+                    <x-heroicon-o-arrow-left class="size-5" />
                 </a>
             @endif
-            <a href="{{ url('/') }}" class="*:h-auto *:max-h-16 *:w-full *:object-contain lg:hidden">
+            <a href="{{ url('/') }}" aria-label="@lang('Home')" class="*:h-auto *:max-h-16 *:w-full *:object-contain lg:hidden">
                 <x-rapidez-ct::logo />
             </a>
         </div>
-        <x-rapidez-ct::title {{ $attributes->except(['checkoutSteps', 'currentStep', 'currentStepKey']) }}>
+        <x-rapidez-ct::title {{ $attributes->except(['checkoutSteps', 'currentStep', 'currentStepKey', 'href', ':href', 'v-bind:href', 'aria-label']) }}>
             {{ $slot }}
         </x-rapidez-ct::title>
     </div>
diff --git a/resources/views/components/title/index.blade.php b/resources/views/components/title/index.blade.php
index fef9d670..9ad5b718 100644
--- a/resources/views/components/title/index.blade.php
+++ b/resources/views/components/title/index.blade.php
@@ -1,3 +1,3 @@
-<x-rapidez-ct::title.base {{ $attributes->class('text-2xl text-ct-neutral') }}>
+<x-rapidez-ct::title.base {{ $attributes->class('text-2xl') }}>
     {{ $slot }}
 </x-rapidez-ct::title.base>