diff --git a/.github/workflows/translations.yml b/.github/workflows/translations.yml
new file mode 100644
index 00000000..1e4a4bb5
--- /dev/null
+++ b/.github/workflows/translations.yml
@@ -0,0 +1,26 @@
+name: Check translations
+
+on:
+  push:
+    branches:
+      - master
+      - '*.x'
+  pull_request:
+
+jobs:
+  translations:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.3'
+          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv, imagick
+          coverage: none
+      - name: Install dependencies
+        run: composer install --prefer-dist --no-interaction
+      - name: Check translations
+        uses: rapidez/laravel-translation-checker@master
diff --git a/README.md b/README.md
index 9c73214d..7e22e50a 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,8 @@ php artisan vendor:publish --tag=payment-icons
 
 ## Customizations
 
+It is recommended to edit the `config/rapidez/frontend.php` and remove the `login` step. This will enable two step checkout.
+
 If you want you *could* publish the views. But it's recommended to only publish and change the views you need so when there is an update you don't have to compare all views with the new version. Also keep in mind this is an opinionated theme, if you want/need to change a lot it's better to build your own in terms of upgradability.
 ```
 php artisan vendor:publish --provider="Rapidez\CheckoutTheme\ServiceProvider" --tag=views
diff --git a/composer.json b/composer.json
index 5c805237..98d19a9b 100644
--- a/composer.json
+++ b/composer.json
@@ -19,7 +19,7 @@
     "require": {
         "php": "^8.0|^8.1|^8.2",
         "blade-ui-kit/blade-heroicons": "^2.0",
-        "rapidez/core": "^2.0"
+        "rapidez/core": "^3.0"
     },
     "autoload": {
         "psr-4": {
diff --git a/lang/nl.json b/lang/nl.json
index 2b189d9e..426fb8c9 100644
--- a/lang/nl.json
+++ b/lang/nl.json
@@ -15,6 +15,7 @@
     "and use a different e-mail address.": "en gebruik een ander e-mailadres.",
     "Back to account": "Terug naar account",
     "Back to cart": "Terug naar winkelwagen",
+    "This product it out of stock, remove it to continue your order.": "Dit product is niet op voorraad, verwijder het om verder te gaan met je bestelling.",
     "Back to credentials": "Terug naar inloggegevens",
     "Back to dashboard": "Terug naar dashboard",
     "Back to login": "Terug naar inloggen",
@@ -72,7 +73,6 @@
     "Select as billing": "Selecteer als factuuradres",
     "Select as shipping": "Selecteer als verzendadres",
     "Send": "Versturen",
-    "Step 1 of 4": "Stap 1 van 4",
     "Step :step out of :total": "Stap :step van :total",
     "Subscribe to newsletter": "Inschrijven voor nieuwsbrief",
     "Thank you for subscribing": "Bedankt voor uw inschrijving",
diff --git a/resources/core-overwrites/checkout/overview.blade.php b/resources/core-overwrites/checkout/overview.blade.php
deleted file mode 100644
index 08ed49ac..00000000
--- a/resources/core-overwrites/checkout/overview.blade.php
+++ /dev/null
@@ -1 +0,0 @@
-@include('rapidez-ct::checkout.overview')
diff --git a/resources/core-overwrites/checkout/pages/credentials.blade.php b/resources/core-overwrites/checkout/pages/credentials.blade.php
new file mode 100644
index 00000000..514f804a
--- /dev/null
+++ b/resources/core-overwrites/checkout/pages/credentials.blade.php
@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.pages.credentials')
diff --git a/resources/core-overwrites/checkout/pages/login.blade.php b/resources/core-overwrites/checkout/pages/login.blade.php
new file mode 100644
index 00000000..7da99067
--- /dev/null
+++ b/resources/core-overwrites/checkout/pages/login.blade.php
@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.pages.login')
diff --git a/resources/core-overwrites/checkout/pages/payment.blade.php b/resources/core-overwrites/checkout/pages/payment.blade.php
new file mode 100644
index 00000000..cb13cdd3
--- /dev/null
+++ b/resources/core-overwrites/checkout/pages/payment.blade.php
@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.pages.payment')
diff --git a/resources/core-overwrites/checkout/steps/payment_method.blade.php b/resources/core-overwrites/checkout/steps/payment_method.blade.php
new file mode 100644
index 00000000..d2c21dc1
--- /dev/null
+++ b/resources/core-overwrites/checkout/steps/payment_method.blade.php
@@ -0,0 +1 @@
+@include('rapidez-ct::checkout.steps.payment_method')
\ No newline at end of file
diff --git a/resources/js/components/CheckoutAddress.vue b/resources/js/components/CheckoutAddress.vue
index 69454e52..34d4d469 100644
--- a/resources/js/components/CheckoutAddress.vue
+++ b/resources/js/components/CheckoutAddress.vue
@@ -13,26 +13,6 @@
         methods: {
             toggleEdit() {
                 this.editing = !this.editing
-
-                if (this.editing) {
-                    this.$root.checkout['billing_address'].customer_address_id = null
-                    this.$root.checkout['shipping_address'].customer_address_id = null
-                }
-            },
-
-            isType(type, address) {
-                let check = this.$root.checkout[`${type}_address`]
-
-                if (!check) {
-                    return false
-                }
-
-                return check.id == address.id || check.customer_address_id == address.id
-            },
-
-            select(type, address) {
-                this.$root.checkout[`${type}_address`] = address
-                this.$root.checkout[`${type}_address`].customer_address_id = address.id
             },
         },
 
diff --git a/resources/js/components/CheckoutSuccessAddresses.vue b/resources/js/components/CheckoutSuccessAddresses.vue
index 3b6202c6..b1a3b9a6 100644
--- a/resources/js/components/CheckoutSuccessAddresses.vue
+++ b/resources/js/components/CheckoutSuccessAddresses.vue
@@ -32,30 +32,15 @@
             },
 
             shipping() {
-                if(!this.order?.sales_order_addresses) {
-                    return null;
-                }
-
-                let shipping = this.order.sales_order_addresses.filter(e => e.address_type == 'shipping')
-                return shipping.length > 1 ? null : shipping.at(-1)
+                return this.order.shipping_address
             },
 
             billing() {
-                if(!this.order?.sales_order_addresses) {
-                    return null;
-                }
-
-                let billing = this.order.sales_order_addresses.filter(e => e.address_type == 'billing')
-                return billing.at(-1)
+                return this.order.billing_address
             },
 
             pickup() {
-                if(!this.order?.sales_order_addresses) {
-                    return null;
-                }
-
-                let shipping = this.order.sales_order_addresses.filter(e => e.address_type == 'shipping')
-                return shipping.length > 1 ? shipping[0] : null
+                return this.shipping
             }
         }
     }
diff --git a/resources/js/package.js b/resources/js/package.js
index 5d61ae20..dc88cc91 100644
--- a/resources/js/package.js
+++ b/resources/js/package.js
@@ -1,15 +1,3 @@
 Vue.component('checkout-address', () => import('./components/CheckoutAddress.vue'))
 Vue.component('checkout-success-addresses', () => import('./components/CheckoutSuccessAddresses.vue'))
-Vue.component('address-card', () => import('./components/AddressCard.vue'))
-
-Vue.mixin({
-    computed: {
-        billingAndShippingAreTheSame() {
-            if (this.$root.checkout.shipping_address?.customer_address_id) {
-                this.$root.checkout.hide_billing = this.$root.checkout.shipping_address?.customer_address_id == this.$root.checkout.billing_address?.customer_address_id
-            }
-
-            return this.$root.checkout.hide_billing
-        }
-    }
-})
+Vue.component('address-card', () => import('./components/AddressCard.vue'))
\ No newline at end of file
diff --git a/resources/views/account/order.blade.php b/resources/views/account/order.blade.php
index 44758972..ec75d012 100644
--- a/resources/views/account/order.blade.php
+++ b/resources/views/account/order.blade.php
@@ -20,8 +20,9 @@
     <graphql
         query='@include('rapidez::account.partials.queries.order')'
         check="customer.orders.items[0]"
+        :callback="async (variables, response) => {return await updateOrder(variables, {data: response.data.customer.orders.items})}"
     >
-        <div v-if="data" slot-scope="{ data }">
+        <div slot-scope="{ order: data }" v-if="order">
             <x-rapidez-ct::sections>
                 @include('rapidez-ct::account.partials.order.products')
                 @include('rapidez-ct::account.partials.order.order-info')
@@ -31,7 +32,7 @@
                     @lang('Back to my orders')
                 </x-rapidez-ct::button.outline>
                 <span class="text-ct-inactive">
-                    @lang('Order date'): @{{ (new Date(data.customer.orders.items[0].order_date)).toLocaleDateString() }}
+                    @lang('Order date'): @{{ (new Date(order.order_date)).toLocaleDateString() }}
                 </span>
             </x-rapidez-ct::toolbar>
         </div>
diff --git a/resources/views/account/partials/address-cards.blade.php b/resources/views/account/partials/address-cards.blade.php
index ab2d70c2..4d17f1a3 100644
--- a/resources/views/account/partials/address-cards.blade.php
+++ b/resources/views/account/partials/address-cards.blade.php
@@ -1,7 +1,7 @@
 <x-rapidez-ct::title.lg>
     @lang('My addresses')
 </x-rapidez-ct::title.lg>
-<div class="grid gap-5 sm:grid-cols-2 my-5">
+<div class="grid gap-5 md:grid-cols-2 my-5">
     <template v-if="data.customer.shipping_address?.default_billing || !data.customer.shipping_address || !data.customer.billing_address">
         <template v-if="data.customer.shipping_address || data.customer.billing_address">
             <x-rapidez-ct::card.address v-bind:address="data.customer.shipping_address ?? data.customer.billing_address" shipping billing check>
@@ -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-sm:hidden">
+        <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">
             <span>+</span>
             <span>@lang('Add new address')</span>
         </a>
@@ -28,7 +28,7 @@
         </x-rapidez-ct::card.address>
     </template>
 </div>
-<div class="flex gap-5">
+<div class="flex flex-wrap gap-3">
     <x-rapidez-ct::button.accent :href="route('account.address.create')">
         @lang('Add a new address')
     </x-rapidez-ct::button.accent>
diff --git a/resources/views/account/partials/login.blade.php b/resources/views/account/partials/login.blade.php
index 94d3dd46..b6353eda 100644
--- a/resources/views/account/partials/login.blade.php
+++ b/resources/views/account/partials/login.blade.php
@@ -1,19 +1,17 @@
-<login :checkout-login="false" v-slot="{ email, password, go, loginInputChange }" redirect="{{ $redirect ?? route('account.overview') }}">
+<login :checkout-login="false" v-slot="login" redirect="{{ $redirect ?? route('account.overview') }}">
     <x-rapidez-ct::card.inactive>
-        <form class="space-y-5" v-on:submit.prevent="go()">
+        <form class="space-y-5" v-on:submit.prevent="login.go()">
             <x-rapidez-ct::input
                 name="email"
                 type="email"
                 label="Email"
-                v-bind:value="email"
-                v-on:input="loginInputChange"
+                v-model="login.email"
                 required
             />
             <x-rapidez-ct::input.password
                 name="password"
                 label="Password"
-                v-bind:value="password"
-                v-on:input="loginInputChange"
+                v-model="login.password"
                 required
             />
             <div class="flex items-center justify-between">
diff --git a/resources/views/account/partials/order/order-info.blade.php b/resources/views/account/partials/order/order-info.blade.php
index 1d9ed1f2..e25b6b12 100644
--- a/resources/views/account/partials/order/order-info.blade.php
+++ b/resources/views/account/partials/order/order-info.blade.php
@@ -1,9 +1,9 @@
 <x-rapidez-ct::card.inactive>
     <div class="flex flex-wrap -space-x-px max-sm:-space-y-px">
         <div class="flex flex-1 flex-col -space-y-px">
-            <template v-if="data.customer.orders.items[0].hide_billing || data.customer.orders.items[0].shipping_address?.customer_address_id == data.customer.orders.items[0].billing_address?.customer_address_id">
+            <template v-if="order.hide_billing || hideBilling || order.shipping_address?.customer_address_id == order.billing_address?.customer_address_id">
                 <x-rapidez-ct::card.address
-                    v-bind:address="data.customer.orders.items[0].shipping_address"
+                    v-bind:address="order.shipping_address"
                     shipping
                     billing
                     check
@@ -11,12 +11,12 @@
             </template>
             <template v-else>
                 <x-rapidez-ct::card.address
-                    v-bind:address="data.customer.orders.items[0].shipping_address"
+                    v-bind:address="order.shipping_address"
                     shipping
                     check
                 />
                 <x-rapidez-ct::card.address
-                    v-bind:address="data.customer.orders.items[0].billing_address"
+                    v-bind:address="order.billing_address"
                     billing
                     check
                 />
@@ -29,7 +29,7 @@
                 </x-rapidez-ct::title.lg>
                 <div class="flex flex-1 flex-wrap justify-between">
                     <ul class="flex flex-col gap-1">
-                        <li v-for="data in data.customer.orders.items[0].payment_methods">
+                        <li v-for="data in order.payment_methods">
                             @{{ data.name }}
                         </li>
                     </ul>
@@ -46,7 +46,7 @@
                 </x-rapidez-ct::title.lg>
                 <div class="flex flex-1 flex-wrap justify-between">
                     <ul class="flex flex-col gap-1">
-                        <li v-text="data.customer.orders.items[0].shipping_method"></li>
+                        <li v-text="order.shipping_method"></li>
                     </ul>
                     @if (!empty($slot))
                         <div class="mt-auto flex flex-col self-end">
diff --git a/resources/views/account/partials/order/products.blade.php b/resources/views/account/partials/order/products.blade.php
index ca3008f5..bef5758a 100644
--- a/resources/views/account/partials/order/products.blade.php
+++ b/resources/views/account/partials/order/products.blade.php
@@ -10,7 +10,7 @@
     </div>
 </div>
 <ul class="flex flex-col divide-y">
-    <li class="flex py-5" v-for="item in data.customer.orders.items[0].items">
+    <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
diff --git a/resources/views/account/partials/register-account.blade.php b/resources/views/account/partials/register-account.blade.php
index 4c13cf7e..6db59188 100644
--- a/resources/views/account/partials/register-account.blade.php
+++ b/resources/views/account/partials/register-account.blade.php
@@ -10,8 +10,8 @@
     <graphql-mutation
         query="@include('rapidez-ct::account.partials.queries.register-account')"
         redirect="{{ route('account.overview') }}"
-        :callback="async (variables, response) => { 
-            await registerCallback(variables, response); 
+        :callback="async (variables, response) => {
+            await registerCallback(variables, response);
             @if(config('rapidez.checkout-theme.register.create-address'))
                 await createAddress();
             @endif
@@ -24,9 +24,9 @@
                 <x-rapidez-ct::title.lg class="mb-5">
                     @lang('Register account')
                 </x-rapidez-ct::title.lg>
-                <form 
-                    id="register" 
-                    class="grid gap-5 sm:grid-cols-2"
+                <form
+                    id="register"
+                    class="grid gap-5 md:grid-cols-2"
                     @if(config('rapidez.checkout-theme.register.create-address'))
                         v-on:submit.prevent="window.document.getElementById('register-address').reportValidity() && mutate()"
                     @else
diff --git a/resources/views/cart/partials/cart-title.blade.php b/resources/views/cart/partials/cart-title.blade.php
index 6ebdf052..a507c8d6 100644
--- a/resources/views/cart/partials/cart-title.blade.php
+++ b/resources/views/cart/partials/cart-title.blade.php
@@ -1,3 +1,5 @@
-<x-rapidez-ct::title-progress-bar>
-    @lang('Cart')
-</x-rapidez-ct::title-progress-bar>
+<div class="flex flex-wrap gap-1 items-baseline justify-between">
+    <x-rapidez-ct::title>
+        @lang('Cart')
+    </x-rapidez-ct::title>
+</div>
\ No newline at end of file
diff --git a/resources/views/cart/partials/product/description.blade.php b/resources/views/cart/partials/product/description.blade.php
index fbdc99a9..07ed41ca 100644
--- a/resources/views/cart/partials/product/description.blade.php
+++ b/resources/views/cart/partials/product/description.blade.php
@@ -9,6 +9,9 @@
             <div v-for="option in item.customizable_options">
                 @{{ option.label }}: @{{ option.values[0].label || option.values[0].value }}
             </div>
+            <div class="text-red-600" v-if="!canOrderCartItem(item)">
+                @lang('This product it out of stock, remove it to continue your order.')
+            </div>
             <div v-for="option in config.cart_attributes">
                 <template v-if="item.product.attribute_values?.[option] && typeof item.product.attribute_values[option] === 'object'">
                     @{{ option }}: <span v-html="item.product.attribute_values[option]?.join(', ')"></span>
diff --git a/resources/views/cart/partials/product/image.blade.php b/resources/views/cart/partials/product/image.blade.php
index 0995d6f7..dc720ec2 100644
--- a/resources/views/cart/partials/product/image.blade.php
+++ b/resources/views/cart/partials/product/image.blade.php
@@ -1,4 +1,4 @@
-<td class="h-24 w-40 !pl-0 max-md:flex max-md:w-1/2">
+<td class="h-24 w-32 !pl-0 max-md:flex max-md:w-1/2">
     <img v-if="item.product.image" class="object-contain" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'">
     <x-rapidez::no-image v-else />
 </td>
diff --git a/resources/views/cart/partials/sidebar/summary.blade.php b/resources/views/cart/partials/sidebar/summary.blade.php
index ed7450b6..90615469 100644
--- a/resources/views/cart/partials/sidebar/summary.blade.php
+++ b/resources/views/cart/partials/sidebar/summary.blade.php
@@ -29,12 +29,17 @@
             <dd>@{{ cart.prices.grand_total.value | price }}</dd>
         </div>
     </x-rapidez-ct::separated-listing>
-
-    <x-rapidez-ct::button.enhanced :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-rapidez-ct::button.enhanced>
-
+    <div class="w-full" :class="{ 'cursor-not-allowed': !canOrder }">
+        <x-rapidez-ct::button.enhanced 
+            :href="route('checkout')" 
+            class="flex w-full items-center justify-center gap-1 mt-6" 
+            v-bind:class="{ 'pointer-events-none': !canOrder }"
+            dusk="checkout"
+        >
+            @lang('To checkout')
+            <x-heroicon-o-arrow-right class="h-4" />
+        </x-rapidez-ct::button.enhanced>
+    </div>
     <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" />
         @lang('Ordered within 2 minutes')
diff --git a/resources/views/cart/partials/top-bar.blade.php b/resources/views/cart/partials/top-bar.blade.php
deleted file mode 100644
index 44c8be39..00000000
--- a/resources/views/cart/partials/top-bar.blade.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="flex flex-wrap justify-between items-baseline">
-    <x-rapidez-ct::title tag="h1">
-        @lang('Cart')
-    </x-rapidez-ct::title>
-    <div class="flex wrap">
-        <div>
-            @lang('Step 1 of 4')
-        </div>
-    </div>
-</div>
diff --git a/resources/views/checkout/overview.blade.php b/resources/views/checkout/overview.blade.php
deleted file mode 100644
index 8c3e88fc..00000000
--- a/resources/views/checkout/overview.blade.php
+++ /dev/null
@@ -1,13 +0,0 @@
-@extends('rapidez::layouts.app')
-
-@section('title', __('Checkout'))
-
-@section('robots', 'NOINDEX,NOFOLLOW')
-
-@section('content')
-    <checkout v-slot="{ checkout, save, goToStep, forceAccount }" :set="checkout.step = Math.max(checkout.step, 2)" v-cloak>
-        <div class="container">
-            @include('rapidez-ct::checkout.partials.layout')
-        </div>
-    </checkout>
-@endsection
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
new file mode 100644
index 00000000..70ece139
--- /dev/null
+++ b/resources/views/checkout/pages/credentials.blade.php
@@ -0,0 +1,40 @@
+@extends('rapidez::layouts.app')
+
+@section('title', __('Checkout'))
+
+@section('robots', 'NOINDEX,NOFOLLOW')
+
+@section('content')
+    <div class="container">
+        <x-rapidez-ct::layout class="mt-8 sm:mt-14" v-cloak>
+            <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
+                @lang('Credentials')
+            </x-rapidez-ct::title-progress-bar>
+
+            <form
+                class="contents"
+                v-on:submit.prevent="(e) => {
+                    submitPartials(e.target?.form ?? e.target)
+                        .then((result) =>
+                            window.app.$emit('checkout-credentials-saved')
+                            && window.Turbo.visit(window.url('{{ route('checkout', ['step' => 'payment']) }}'))
+                        ).catch();
+                }"
+            >
+                @include('rapidez-ct::checkout.steps.credentials')
+                <x-rapidez-ct::toolbar>
+                    <x-rapidez-ct::button.outline :href="route('cart')">
+                        @lang('Back to cart')
+                    </x-rapidez-ct::button.outline>
+
+                    <x-rapidez-ct::button.accent loader>
+                        @lang('Next')
+                    </x-rapidez-ct::button.accent>
+                </x-rapidez-ct::toolbar>
+            </form>
+            <x-slot:sidebar>
+                @include('rapidez-ct::checkout.partials.sidebar.sidebar')
+            </x-slot:sidebar>
+        </x-rapidez-ct::layout>
+    </div>
+@endsection
diff --git a/resources/views/checkout/pages/login.blade.php b/resources/views/checkout/pages/login.blade.php
new file mode 100644
index 00000000..564366f9
--- /dev/null
+++ b/resources/views/checkout/pages/login.blade.php
@@ -0,0 +1,31 @@
+@extends('rapidez::layouts.app')
+
+@section('title', __('Checkout'))
+
+@section('robots', 'NOINDEX,NOFOLLOW')
+
+@section('content')
+    <div class="container">
+        <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
+            @lang('Credentials')
+        </x-rapidez-ct::title-progress-bar>
+
+        <form
+            v-if="hasCart"
+            v-on:submit.prevent="(e) => {
+                submitPartials(e.target?.form ?? e.target)
+                    .then((result) =>
+                        window.Turbo.visit(window.url('{{ route('checkout', ['step' => 'credentials']) }}'))
+                    ).catch();
+            }"
+            class="max-w-md mx-auto"
+            v-cloak
+        >
+            @include('rapidez-ct::checkout.steps.login')
+
+            <x-rapidez-ct::button.accent loader type="submit" dusk="continue" class="mt-3">
+                @lang('Next')
+            </x-rapidez-ct::button.accent>
+        </form>
+    </div>
+@endsection
diff --git a/resources/views/checkout/pages/payment.blade.php b/resources/views/checkout/pages/payment.blade.php
new file mode 100644
index 00000000..7ae641f9
--- /dev/null
+++ b/resources/views/checkout/pages/payment.blade.php
@@ -0,0 +1,30 @@
+@extends('rapidez::layouts.app')
+
+@section('title', __('Checkout'))
+
+@section('robots', 'NOINDEX,NOFOLLOW')
+
+@section('content')
+    <div class="container">
+        <x-rapidez-ct::layout class="mt-8 sm:mt-14">
+            <x-rapidez-ct::title-progress-bar :href="route('checkout', ['step' => 'credentials'])" :$checkoutSteps :$currentStep :$currentStepKey>
+                @lang('Payment')
+            </x-rapidez-ct::title-progress-bar>
+            <form
+                class="contents"
+                v-on:submit.prevent="(e) => {
+                    submitPartials(e.target?.form ?? e.target)
+                        .then((result) =>
+                            window.app.$emit('checkout-payment-saved')
+                            && window.app.$emit('placeOrder')
+                        ).catch();
+                }"
+            >
+                @include('rapidez::checkout.steps.payment_method')
+            </form>
+            <x-slot:sidebar>
+                @include('rapidez-ct::checkout.partials.sidebar.sidebar')
+            </x-slot:sidebar>
+        </x-rapidez-ct::layout>
+    </div>
+@endsection
diff --git a/resources/views/checkout/partials/address-card.blade.php b/resources/views/checkout/partials/address-card.blade.php
index ea2e98ad..e59f4422 100644
--- a/resources/views/checkout/partials/address-card.blade.php
+++ b/resources/views/checkout/partials/address-card.blade.php
@@ -1,19 +1,52 @@
-<div class="grid gap-5 lg:grid-cols-2">
-    <template v-for="userAddress in $root.user.addresses">
-        <x-rapidez-ct::card.address
-            v-bind:key="userAddress.id"
-            v-bind:address="userAddress"
-            v-bind:billing="isType('billing', userAddress)"
-            v-bind:shipping="isType('shipping', userAddress)"
-            v-bind:check="isType('billing', userAddress) || isType('shipping', userAddress)"
-            class="w-full sm:min-w-[350px]"
-        >
-            <x-rapidez-ct::button.link v-if="!isType('shipping', userAddress)" v-on:click.prevent="select('shipping', userAddress)">
-                @lang('Select as shipping')
-            </x-rapidez-ct::button.link>
-            <x-rapidez-ct::button.link v-if="!isType('billing', userAddress)" v-on:click.prevent="select('billing', userAddress)">
-                @lang('Select as billing')
-            </x-rapidez-ct::button.link>
-        </x-rapidez-ct::card.address>
-    </template>
-</div>
+<graphql-mutation
+    :query="config.queries.setExistingShippingAddressesOnCart"
+    :variables="{
+        cart_id: mask,
+        customer_address_id: cart.shipping_addresses[0]?.customer_address_id,
+    }"
+    :callback="updateCart"
+    :error-callback="checkResponseForExpiredCart"
+    mutate-event="setShippingAddressesOnCart"
+    v-slot="setShippingAddress"
+>
+    <graphql-mutation
+        :query="config.queries.setExistingBillingAddressOnCart"
+        :variables="{
+            cart_id: mask,
+            customer_address_id: cart.billing_address?.customer_address_id,
+        }"
+        :callback="updateCart"
+        :error-callback="checkResponseForExpiredCart"
+        mutate-event="setBillingAddressOnCart"
+        v-slot="setBillingAddress"
+    >
+        <div class="grid gap-5 lg:grid-cols-2">
+            <template v-for="userAddress in $root.user.addresses">
+                <x-rapidez-ct::card.address
+                    v-bind:key="userAddress.id"
+                    v-bind:address="userAddress"
+                    v-bind:billing="setBillingAddress.variables.customer_address_id === userAddress.id"
+                    v-bind:shipping="setShippingAddress.variables.customer_address_id === userAddress.id"
+                    v-bind:check="setBillingAddress.variables.customer_address_id === userAddress.id || setShippingAddress.variables.customer_address_id === userAddress.id"
+                    class="w-full sm:min-w-[350px]"
+                >
+                        <x-rapidez-ct::button.link
+                            v-if="!cart.is_virtual && setShippingAddress.variables.customer_address_id !== userAddress.id"
+                            v-on:click.prevent="() => window.app.$set(setShippingAddress.variables, 'customer_address_id', userAddress.id) && setShippingAddress.mutate()"
+                            v-bind:class="{'blur pointer-events-none': setShippingAddress.mutating}"
+                        >
+                            @lang('Select as shipping')
+                        </x-rapidez-ct::button.link>
+
+                        <x-rapidez-ct::button.link
+                            v-if="setBillingAddress.variables.customer_address_id !== userAddress.id"
+                            v-on:click.prevent="() => window.app.$set(setBillingAddress.variables, 'customer_address_id', userAddress.id) && setBillingAddress.mutate()"
+                            v-bind:class="{'blur pointer-events-none': setBillingAddress.mutating}"
+                        >
+                            @lang('Select as billing')
+                        </x-rapidez-ct::button.link>
+                </x-rapidez-ct::card.address>
+            </template>
+        </div>
+    </graphql-mutation>
+</graphql-mutation>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/address-cards.blade.php b/resources/views/checkout/partials/address-cards.blade.php
index bfad83ba..3525c981 100644
--- a/resources/views/checkout/partials/address-cards.blade.php
+++ b/resources/views/checkout/partials/address-cards.blade.php
@@ -1,6 +1,6 @@
-<div class="grid gap-5 sm:grid-cols-2">
-    <template v-if="billingAndShippingAreTheSame">
-        <x-rapidez-ct::card.address v-bind:address="checkout.shipping_address" shipping billing check>
+<div class="grid gap-5 md:grid-cols-2">
+    <template v-if="cart.billing_address?.same_as_shipping">
+        <x-rapidez-ct::card.address v-bind:address="cart.shipping_addresses[0]" shipping billing check>
             <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
                 @lang('Edit')
             </x-rapidez-ct::button.link>
@@ -8,7 +8,7 @@
         @include('rapidez-ct::checkout.partials.buttons.new-address')
     </template>
     <template v-else>
-        <x-rapidez-ct::card.address v-bind:address="checkout.shipping_address" shipping check class="h-full">
+        <x-rapidez-ct::card.address v-bind:address="cart.shipping_addresses[0]" shipping check class="h-full">
             <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
                 @lang('Edit')
             </x-rapidez-ct::button.link>
@@ -20,7 +20,7 @@
                 <input type="checkbox" oninvalid="this.setCustomValidity('{{ __('Please select an address') }}')" required class="absolute w-full h-full inset-0 opacity-0 pointer-events-none">
             </x-slot>
         </x-rapidez-ct::card.address>
-        <x-rapidez-ct::card.address v-bind:address="checkout.billing_address" billing check class="h-full">
+        <x-rapidez-ct::card.address v-bind:address="cart.billing_address" billing check class="h-full">
             <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">
                 @lang('Edit')
             </x-rapidez-ct::button.link>
diff --git a/resources/views/checkout/partials/buttons/address.blade.php b/resources/views/checkout/partials/buttons/address.blade.php
index cac66a07..b99be4cb 100644
--- a/resources/views/checkout/partials/buttons/address.blade.php
+++ b/resources/views/checkout/partials/buttons/address.blade.php
@@ -1,4 +1,4 @@
-<div class="mt-5">
+<div class="flex flex-wrap gap-3 mt-5">
     <x-rapidez-ct::button.accent v-on:click.prevent="toggleEdit">
         @lang('Use a new address')
     </x-rapidez-ct::button.accent>
diff --git a/resources/views/checkout/partials/buttons/new-address.blade.php b/resources/views/checkout/partials/buttons/new-address.blade.php
index fd89f45d..5bd4fed9 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-sm:hidden">
+<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">
     <span>+</span>
     <span>@lang('Add new address')</span>
 </button>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/address.blade.php b/resources/views/checkout/partials/sections/address.blade.php
index 2dd8476f..ff13c6b2 100644
--- a/resources/views/checkout/partials/sections/address.blade.php
+++ b/resources/views/checkout/partials/sections/address.blade.php
@@ -1,14 +1,55 @@
-<checkout-address v-slot="{ useCards, editing, toggleEdit, isType, select }">
+<checkout-address v-slot="{ useCards, editing, toggleEdit }">
     <x-rapidez-ct::card.inactive v-if="useCards && !editing">
         @include('rapidez-ct::checkout.partials.address-cards')
         @include('rapidez-ct::checkout.partials.buttons.address')
     </x-rapidez-ct::card.inactive>
 
     <x-rapidez-ct::card.inactive v-else>
-        @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'shipping'])
+        <graphql-mutation
+            :query="config.queries.setNewShippingAddressesOnCart"
+            :variables="{
+                cart_id: mask,
+                ...window.address_defaults,
+                ...cart.shipping_addresses[0],
+                country_code: cart.shipping_addresses[0]?.country.code || window.address_defaults.country_code
+            }"
+            group="shipping"
+            :before-request="(query, variables, options) => [variables.customer_address_id ? config.queries.setExistingShippingAddressesOnCart : query, variables, options]"
+            :callback="updateCart"
+            :error-callback="checkResponseForExpiredCart"
+            :watch="false"
+            mutate-event="setShippingAddressesOnCart"
+            v-slot="{ mutate, variables }"
+            v-if="!cart.is_virtual"
+        >
+            <fieldset partial-submit="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
+                @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'shipping'])
+            </fieldset>
+        </graphql-mutation>
 
-        <div class="mt-9 pt-7 border-t-2 border-white" v-if="!checkout.hide_billing">
-            @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'billing'])
+
+        <div class="mt-9 pt-7 border-t-2 border-white">
+            <graphql-mutation
+                :query="config.queries.setNewBillingAddressOnCart"
+                :variables="JSON.parse(JSON.stringify({
+                    cart_id: mask,
+                    ...window.address_defaults,
+                    ...cart.billing_address,
+                    same_as_shipping: !cart.is_virtual && (cart?.billing_address?.same_as_shipping ?? true),
+                    country_code: cart.billing_address?.country.code || window.address_defaults.country_code
+                }))"
+                :before-request="(query, variables, options) => [variables.customer_address_id ? config.queries.setExistingBillingAddressOnCart : query, variables, options]"
+                :callback="updateCart"
+                :error-callback="checkResponseForExpiredCart"
+                :watch="false"
+                group="billing"
+                mutate-event="setBillingAddressOnCart"
+                v-slot="{ mutate, variables }"
+            >
+                <fieldset partial-submit="mutate" v-on:change="function (e) {e.target.closest('fieldset').querySelector(':invalid') === null && mutate().then(() => (cart?.billing_address?.same_as_shipping ?? true) && window.app.$emit('setBillingAddressOnCart'))}">
+                    @include('rapidez-ct::checkout.partials.shipping-billing-fields', ['type' => 'billing'])
+                </fieldset>
+            </graphql-mutation>
         </div>
     </x-rapidez-ct::card.inactive>
 </checkout-address>
diff --git a/resources/views/checkout/partials/sections/login.blade.php b/resources/views/checkout/partials/sections/login.blade.php
index 9972543e..74e9638e 100644
--- a/resources/views/checkout/partials/sections/login.blade.php
+++ b/resources/views/checkout/partials/sections/login.blade.php
@@ -1,12 +1,12 @@
 <login v-slot="{ email, password, go, loginInputChange, emailAvailable, logout }">
     <x-rapidez-ct::card.inactive>
-        <div class="grid gap-4 sm:gap-5 md:grid-cols-2 md:items-end">
-            <template v-if="!loggedIn">
-                @include('rapidez-ct::checkout.partials.sections.login.logged-out')
-            </template>
-            <template v-else>
+        <template v-if="!loggedIn">
+            @include('rapidez-ct::checkout.partials.sections.login.logged-out')
+        </template>
+        <template v-else>
+            <div class="grid gap-4 sm:gap-5 md:grid-cols-2 md:items-end">
                 @include('rapidez-ct::checkout.partials.sections.login.logged-in')
-            </template>
-        </div>
+            </div>
+        </template>
     </x-rapidez-ct::card.inactive>
 </login>
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 ccf811ce..318fc471 100644
--- a/resources/views/checkout/partials/sections/login/logged-in.blade.php
+++ b/resources/views/checkout/partials/sections/login/logged-in.blade.php
@@ -12,7 +12,11 @@ class="justify-center"
     <p class="text-sm font-medium text-ct-neutral">@lang('Welcome back') @{{ $root.user?.firstname }}!</p>
     <span class="text-ct-inactive text-sm">
         @lang('Is this not your account?')
-        <button class="underline" v-on:click.prevent="logout('/login')">@lang('Log out')</button>
+        <user>
+            <template v-slot="user">
+                <button class="underline" v-on:click.prevent="user.logout('/login')">@lang('Log out')</button>
+            </template>
+        </user>
         @lang('and use a different e-mail address.')
     </span>
 </div>
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 d7b9f3ab..a54a4c2b 100644
--- a/resources/views/checkout/partials/sections/login/logged-out.blade.php
+++ b/resources/views/checkout/partials/sections/login/logged-out.blade.php
@@ -1,32 +1,74 @@
-<x-rapidez-ct::input
-    name="email"
-    type="email"
-    label="Email"
-    v-bind:value="email"
-    v-on:input="loginInputChange"
-    v-on:blur="$root.guestEmail = email; if(!password) { go() }"
-    class="justify-center"
-    required
-    :placeholder="__('Enter your e-mail address')"
-/>
+<checkout-login v-slot="checkoutLogin">
+    <fieldset partial-submit="go" class="grid gap-4 md:gap-5 md:grid-cols-2">
+        <x-rapidez-ct::input
+            label="Email"
+            name="email"
+            type="email"
+            v-model="checkoutLogin.email"
+            v-bind:disabled="loggedIn"
+            class="justify-center"
+            required
+            :placeholder="__('Enter your e-mail address')"
+        />
 
-    <x-rapidez-ct::input
-    name="password"
-    type="password"
-    v-if="!emailAvailable"
-    label="Password"
-    ref="password"
-    v-on:input="loginInputChange"
-    required
-/>
+        <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>
+
+        <template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
+            <x-rapidez-ct::input.password
+                label="Password"
+                name="password"
+                v-model="checkoutLogin.password"
+                required
+            />
+        </template>
+        <p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
+            @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>
+        @if (App::providerIsLoaded('Rapidez\Account\AccountServiceProvider'))
+            <a href="{{ route('account.forgotpassword') }}" class="inline-block text-sm hover:underline mt-5" v-if="!checkoutLogin.isEmailAvailable">
+                @lang('Forgot your password?')
+            </a>
+        @endif
+        <template v-if="!loggedIn && checkoutLogin.createAccount">
+            <x-rapidez-ct::input.password
+                label="Repeat password"
+                name="password_repeat"
+                v-model="checkoutLogin.password_repeat"
+                required
+            />
+            <x-rapidez-ct::input
+                label="Firstname"
+                name="firstname"
+                type="text"
+                v-model="checkoutLogin.firstname"
+                required
+            />
+            <x-rapidez-ct::input
+                label="Lastname"
+                name="lastname"
+                type="text"
+                v-model="checkoutLogin.lastname"
+                required
+            />
+        </template>
+
+        <template v-if="!loggedIn && checkoutLogin.isEmailAvailable">
+            <div class="col-span-full">
+                <x-rapidez-ct::input.checkbox v-model="checkoutLogin.createAccount" dusk="create_account" class="">
+                    @lang('Create an account')
+                </x-rapidez-ct::input.checkbox>
+            </div>
+        </template>
+
+        <x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="checkoutLogin.isEmailAvailable && checkoutLogin.createAccount" dusk="register">
+            @lang('Register')
+        </x-rapidez-ct::button.accent>
+        <x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="!checkoutLogin.isEmailAvailable" dusk="register">
+            @lang('Login')
+        </x-rapidez-ct::button.accent>
+    </fieldset>
+</checkout-login>
 
-<p v-if="!emailAvailable" class="self-end text-ct-inactive">
-    @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>
-<p v-else 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>
-<x-rapidez-ct::button.accent v-if="!emailAvailable" v-on:click.prevent="go" dusk="continue">
-    @lang('Login')
-</x-rapidez-ct::button.accent>
diff --git a/resources/views/checkout/partials/sections/newsletter.blade.php b/resources/views/checkout/partials/sections/newsletter.blade.php
index f2ce217d..0cbcc87d 100644
--- a/resources/views/checkout/partials/sections/newsletter.blade.php
+++ b/resources/views/checkout/partials/sections/newsletter.blade.php
@@ -1 +1 @@
-<x-rapidez-ct::newsletter v-model="checkout.newsletter_subscribe" />
\ No newline at end of file
+<x-rapidez-ct::newsletter/>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/payment.blade.php b/resources/views/checkout/partials/sections/payment.blade.php
index a299d12e..eb3459d8 100644
--- a/resources/views/checkout/partials/sections/payment.blade.php
+++ b/resources/views/checkout/partials/sections/payment.blade.php
@@ -1,7 +1,22 @@
-<form id="payment" class="flex flex-col gap-2" v-on:submit.prevent="save(['payment_method'], 4)">
-    <div v-for="(method, index) in checkout.payment_methods">
-        @include('rapidez-ct::checkout.partials.sections.payment.payment-methods')
-    </div>
+    <graphql-mutation
+        :query="config.queries.setPaymentMethodOnCart"
+        :variables="{
+            cart_id: mask,
+            code: cart.selected_payment_method.code,
+        }"
+        group="payment"
+        :before-request="handleBeforePaymentMethodHandlers"
+        :callback="updateCart"
+        :error-callback="checkResponseForExpiredCart"
+        mutate-event="setPaymentMethodOnCart"
+        v-slot="{ mutate, variables }"
+    >
+        <div partial-submit="mutate">
+            <div v-for="(method, index) in cart.available_payment_methods">
+                @include('rapidez-ct::checkout.partials.sections.payment.payment-methods')
+            </div>
+        </div>
+    </graphql-mutation>
     <graphql query="{ checkoutAgreements { agreement_id name checkbox_text content is_html mode } }">
         <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">
@@ -25,4 +40,3 @@ class="text-ct-primary cursor-pointer text-sm underline"
             </div>
         </div>
     </graphql>
-</form>
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 e41cce51..5777baf0 100644
--- a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
+++ b/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
@@ -1,7 +1,6 @@
 <x-rapidez-ct::input.checkbox
     name="agreement_ids[]"
     v-bind:value="agreement.agreement_id"
-    v-model="checkout.agreement_ids"
     dusk="agreements"
     required
 >
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 e362a501..e9a49c20 100644
--- a/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
+++ b/resources/views/checkout/partials/sections/payment/payment-methods.blade.php
@@ -1,15 +1,21 @@
-<x-rapidez-ct::input.radio
-    name="payment_method"
-    v-bind:value="method.code"
-    v-bind:dusk="'method-'+index"
-    v-model="checkout.payment_method"
-    required
->
-    <div>@{{ method.title }}</div>
-    <img
-        class="max-h-10 w-12"
-        v-bind:alt="method.code"
-        v-bind:src="`/payment-icons/${method.code}.svg`"
-        onerror="this.onerror=null; this.src='/payment-icons/default.svg'"
-    />
-</x-rapidez-ct::input.radio>
\ No newline at end of file
+<template v-if="false"></template>
+@stack('payment_methods')
+<template v-else>
+    <x-rapidez-ct::input.radio
+        name="payment_method"
+        v-model="variables.code"
+        v-bind:value="method.code"
+        v-bind:dusk="'payment-method-'+index"
+        v-on:change="mutate"
+        required
+    >
+        <div class="flex items-center">
+            <span>@{{ method.title }}</span>
+            <img
+                class="absolute right-5 size-8"
+                v-bind:src="`/payment-icons/${method.code}.svg`"
+                onerror="this.onerror=null; this.src=`/payment-icons/default.svg`"
+            >
+        </div>
+    </x-rapidez-ct::input.radio>
+</template>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/success/newsletter.blade.php b/resources/views/checkout/partials/sections/success/newsletter.blade.php
index e3fea69c..b71f40b9 100644
--- a/resources/views/checkout/partials/sections/success/newsletter.blade.php
+++ b/resources/views/checkout/partials/sections/success/newsletter.blade.php
@@ -1,8 +1,8 @@
-<template v-if="$root.loggedIn">
+<template v-if="user.is_logged_in">
     <x-rapidez-ct::newsletter/>
 </template>
 @if (Rapidez::config('newsletter/subscription/allow_guest_subscribe', 1))
     <template v-else>
-        <x-rapidez-ct::newsletter.input email="$root.guestEmail" />
+        <x-rapidez-ct::newsletter.input email="order.email" />
     </template>
 @endif
diff --git a/resources/views/checkout/partials/sections/success/order-completed-note.blade.php b/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
index 1a7a3e42..b06fef87 100644
--- a/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
+++ b/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
@@ -3,6 +3,7 @@
         @lang('We will get to work for you right away')
     </x-rapidez-ct::title.lg>
     <p class="mt-4 text-sm">
-        @lang('We will send a confirmation of your order :orderid to :email', ['orderid' => '@{{ order.increment_id }}', 'email' => '@{{ order.customer_email }}'])
+        @lang('We will send a confirmation of your order :orderid to :email', ['orderid' => '@{{ order.number }}', 'email' => '@{{ order.email }}'])
     </p>
+    <p class="mt-4 text-sm">@lang('Your order is currently'): <span class="font-bold" v-blur>@{{ order.status }}</span> <a class="inline-block" href="#" v-on:click.prevent="(e) => {e.target.classList.add('animate-spin'); refreshOrder().finally(() => e.target.classList.remove('animate-spin'))}">&#8635;</a></p>
 </x-rapidez-ct::card.inactive>
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 1d84f1c7..4b8db4b2 100644
--- a/resources/views/checkout/partials/sections/success/order-info.blade.php
+++ b/resources/views/checkout/partials/sections/success/order-info.blade.php
@@ -17,8 +17,8 @@
                 </x-rapidez-ct::title.lg>
                 <div class="flex flex-1 flex-wrap justify-between">
                     <ul class="flex flex-col gap-1">
-                        <li v-for="method in order.sales_order_payments">
-                            @{{ method.additional_information.method_title || method.additional_information.raw_details_info.method_title }}
+                        <li v-for="method in order.payment_methods">
+                            @{{ method.name || method.type }}
                         </li>
                     </ul>
                     @if (!empty($slot))
@@ -34,7 +34,7 @@
                 </x-rapidez-ct::title.lg>
                 <div class="flex flex-1 flex-wrap justify-between">
                     <ul class="flex flex-col gap-1">
-                        <li v-text="order.shipping_description"></li>
+                        <li v-text="order.shipping_method"></li>
                     </ul>
                     @if (!empty($slot))
                         <div class="mt-auto flex flex-col self-end">
diff --git a/resources/views/checkout/partials/sections/success/products.blade.php b/resources/views/checkout/partials/sections/success/products.blade.php
index 048aad46..d64c885f 100644
--- a/resources/views/checkout/partials/sections/success/products.blade.php
+++ b/resources/views/checkout/partials/sections/success/products.blade.php
@@ -9,27 +9,30 @@
 </div>
 
 <ul class="flex flex-col divide-y">
-    <li v-for="(item, productId, index) in order.sales_order_items" class="flex py-5">
+    <li v-for="(item, productId, index) in order.items" class="flex py-5">
         <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.sku}`"
+                    :alt="item.product_name"
+                    :src="`/storage/{{ config('rapidez.store') }}/resizes/200/sku/${item.product_sku}`"
                     height="100"
-                    v-if="item.sku"
+                    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.name }}</a>
-                <div v-for="(optionValue, option) in item.options">
-                    @{{ option }}: @{{ optionValue }}
+                <a :href="item.url" dusk="cart-item-name">@{{ item.product_name }}</a>
+                <div v-for="option in item.selected_options">
+                    @{{ option.label }}: @{{ option.value }}
+                </div>
+                <div v-for="option in item.entered_options">
+                    @{{ option.label }}: @{{ option.value }}
                 </div>
             </div>
             <div class="flex items-center justify-between gap-10 font-medium max-sm:flex-1 sm:ml-auto">
                 <div class="h-14 w-16 border flex items-center justify-center text-sm">
-                    @{{ Math.round(item.qty_ordered) }}
+                    @{{ Math.round(item.quantity_ordered) }}
                 </div>
             </div>
         </div>
diff --git a/resources/views/checkout/partials/shipping-billing-fields.blade.php b/resources/views/checkout/partials/shipping-billing-fields.blade.php
index c0b56ad4..8890a42b 100644
--- a/resources/views/checkout/partials/shipping-billing-fields.blade.php
+++ b/resources/views/checkout/partials/shipping-billing-fields.blade.php
@@ -6,11 +6,13 @@
     @endif
 </p>
 
-<x-rapidez-ct::address-form :$type/>
+<template @if($type == 'billing') v-if="!variables.same_as_shipping" @endif >
+    <x-rapidez-ct::address-form :$type/>
+</template>
 
-@if ($type == 'shipping')
-    <div class="mt-5">
-        <x-rapidez-ct::input.checkbox v-model="checkout.hide_billing">
+@if ($type == 'billing')
+    <div class="mt-5" v-if="!cart.is_virtual">
+        <x-rapidez-ct::input.checkbox v-model="variables.same_as_shipping">
             @lang('My billing and shipping address are the same')
         </x-rapidez-ct::input.checkbox>
     </div>
diff --git a/resources/views/checkout/partials/shipping/methods.blade.php b/resources/views/checkout/partials/shipping/methods.blade.php
index 92ce3860..95ec74e3 100644
--- a/resources/views/checkout/partials/shipping/methods.blade.php
+++ b/resources/views/checkout/partials/shipping/methods.blade.php
@@ -1,18 +1,42 @@
-<div v-for="(method, index) in checkout.shipping_methods" class="mt-5 flex flex-col gap-2">
-    <x-rapidez-ct::input.radio
-        v-bind:value="method.carrier_code+'_'+method.method_code"
-        v-bind:dusk="'method-'+index"
-        v-model="checkout.shipping_method"
-        name="shipping_method"
-        required
-    >
-        <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 > 0" class="text-ct-inactive">@{{ method.amount | price }}</div>
-            <div v-else class="text-ct-enhanced">
-                @lang('Free')
-            </div>
+<graphql-mutation
+    :query="config.queries.setShippingMethodsOnCart"
+    :variables="{
+        cart_id: mask,
+        method: cart.shipping_addresses[0]?.selected_shipping_method?.carrier_code+'/'+cart.shipping_addresses[0]?.selected_shipping_method?.method_code,
+    }"
+    group="shipping"
+    :callback="updateCart"
+    :error-callback="checkResponseForExpiredCart"
+    :before-request="function (query, variables, options) {
+        variables.carrier_code = variables.method.split('/')[0]
+        variables.method_code = variables.method.split('/')[1]
+        return [query, variables, options]
+    }"
+    mutate-event="setShippingMethodsOnCart"
+    v-slot="{ mutate, variables }"
+    v-if="!cart.is_virtual"
+>
+    <fieldset class="mt-5 flex flex-col gap-2" partial-submit="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
+        <div class="p-5 border rounded bg-white" v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
+            <x-rapidez-ct::input.radio
+                name="shipping_method"
+                v-model="variables.method"
+                v-bind:value="method.carrier_code+'/'+method.method_code"
+                v-bind:disabled="!method.available"
+                v-bind:dusk="'shipping-method-'+index"
+                v-on:change="mutate"
+                required
+            >
+                <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">
+                        @lang('Free')
+                    </div>
+                </div>
+            </x-rapidez-ct::input.radio>
         </div>
-    </x-rapidez-ct::input.radio>
-</div>
\ No newline at end of file
+    </fieldset>
+</graphql-mutation>
+
diff --git a/resources/views/checkout/partials/sidebar/segment.blade.php b/resources/views/checkout/partials/sidebar/segment.blade.php
deleted file mode 100644
index e43294b9..00000000
--- a/resources/views/checkout/partials/sidebar/segment.blade.php
+++ /dev/null
@@ -1,15 +0,0 @@
-<div>
-    <template v-if="segment.code !== 'shipping'">
-        <dt>@{{ segment.title }}</dt>
-        <dd>@{{ segment.value | price }}</dd>
-    </template>
-    <template v-else>
-        <dt>@lang('Shipping')</dt>
-        <dd v-if="checkout.totals.shipping_amount > 0">
-            @{{ checkout.totals.shipping_amount | price }}
-        </dd>
-        <dd v-else class="text-ct-enhanced font-medium">
-            @lang('Free')
-        </dd>
-    </template>
-</div>
diff --git a/resources/views/checkout/partials/sidebar/summary.blade.php b/resources/views/checkout/partials/sidebar/summary.blade.php
index 0e8a4aac..5ca753f5 100644
--- a/resources/views/checkout/partials/sidebar/summary.blade.php
+++ b/resources/views/checkout/partials/sidebar/summary.blade.php
@@ -1,5 +1,5 @@
 <x-rapidez-ct::card class="relative">
-    <a href="{{ url('/') }}" class="absolute inset-x-0 bottom-full -translate-y-6 max-md:hidden [&>*]:h-auto [&>*]:max-h-20 [&>*]:w-full [&>*]:object-contain">
+    <a href="{{ url('/') }}" class="absolute inset-x-0 bottom-full -translate-y-6 max-lg:hidden *:h-auto *:max-h-20 *:w-full *:object-contain">
         <x-rapidez-ct::logo />
     </a>
     <x-rapidez-ct::title.lg class="mb-4">
@@ -11,8 +11,6 @@
         </li>
     </x-rapidez-ct::separated-listing>
     <x-rapidez-ct::separated-listing tag="dl">
-        <template v-for="segment in checkout.totals.total_segments" v-if="segment.title">
-            @include('rapidez-ct::checkout.partials.sidebar.segment')
-        </template>
+            @include('rapidez-ct::checkout.partials.sidebar.totals')
     </x-rapidez-ct::separated-listing>
 </x-rapidez-ct::card>
diff --git a/resources/views/checkout/partials/sidebar/totals.blade.php b/resources/views/checkout/partials/sidebar/totals.blade.php
new file mode 100644
index 00000000..38bd5d96
--- /dev/null
+++ b/resources/views/checkout/partials/sidebar/totals.blade.php
@@ -0,0 +1,26 @@
+<div>
+    <dt>@lang('Subtotal')</dt>
+    <dd>@{{ cart.prices.subtotal_including_tax.value | price }}</dd>
+</div>
+<div v-if="cart.prices.applied_taxes.length">
+    <dt>@lang('Tax')</dt>
+    <dd>@{{ cart.prices.applied_taxes[0].amount.value | price }}</dd>
+</div>
+<div v-if="cart.shipping_addresses.length && cart.shipping_addresses[0]?.selected_shipping_method">
+    <dt>
+        @lang('Shipping')<br>
+        <small>@{{ cart.shipping_addresses[0]?.selected_shipping_method.carrier_title }} - @{{ cart.shipping_addresses[0]?.selected_shipping_method.method_title }}</small>
+    </dt>
+    <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="text-ct-enhanced font-medium">
+        @lang('Free')
+    </dd>
+</div>
+<div v-for="discount in cart.prices.discounts">
+    <dt>@{{ discount.label }}</dt>
+    <dd>-@{{ discount.amount.value | price }}</dd>
+</div>
+<div class="font-bold">
+    <dt>@lang('Total')</dt>
+    <dd>@{{ cart.prices.grand_total.value | price }}</dd>
+</div>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sidebar/user-info.blade.php b/resources/views/checkout/partials/sidebar/user-info.blade.php
index 9a35e6fa..2e1308da 100644
--- a/resources/views/checkout/partials/sidebar/user-info.blade.php
+++ b/resources/views/checkout/partials/sidebar/user-info.blade.php
@@ -1,27 +1,25 @@
-<template v-if="checkout.step < 4">
-    <template v-if="billingAndShippingAreTheSame">
-        <x-rapidez-ct::card>
-            <x-rapidez-ct::address v-bind:address="checkout.shipping_address" shipping billing>
-                <x-rapidez-ct::button.link v-if="checkout.step == 3" v-on:click="goToStep(2)">
-                    @lang('Edit')
-                </x-rapidez-ct::button.link>
-            </x-rapidez-ct::address>
-        </x-rapidez-ct::card>
-    </template>
-    <template v-else>
-        <x-rapidez-ct::card>
-            <x-rapidez-ct::address v-bind:address="checkout.shipping_address" shipping>
-                <x-rapidez-ct::button.link v-if="checkout.step == 3" v-on:click="goToStep(2)">
-                    @lang('Edit')
-                </x-rapidez-ct::button.link>
-            </x-rapidez-ct::address>
-        </x-rapidez-ct::card>
-        <x-rapidez-ct::card>
-            <x-rapidez-ct::address v-bind:address="checkout.billing_address" billing>
-                <x-rapidez-ct::button.link v-if="checkout.step == 3" v-on:click="goToStep(2)">
-                    @lang('Edit')
-                </x-rapidez-ct::button.link>
-            </x-rapidez-ct::address>
-        </x-rapidez-ct::card>
-    </template>
+<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">
+    <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'])">
+                @lang('Edit')
+            </x-rapidez-ct::button.link>
+        </x-rapidez-ct::address>
+    </x-rapidez-ct::card>
+</template>
+<template v-else>
+    <x-rapidez-ct::card v-if="cart.shipping_addresses[0]">
+        <x-rapidez-ct::address v-bind:address="cart.shipping_addresses[0]" shipping>
+            <x-rapidez-ct::button.link :href="route('checkout', ['step' => 'credentials'])">
+                @lang('Edit')
+            </x-rapidez-ct::button.link>
+        </x-rapidez-ct::address>
+    </x-rapidez-ct::card>
+    <x-rapidez-ct::card>
+        <x-rapidez-ct::address v-bind:address="cart.billing_address" billing>
+            <x-rapidez-ct::button.link :href="route('checkout', ['step' => 'credentials'])">
+                @lang('Edit')
+            </x-rapidez-ct::button.link>
+        </x-rapidez-ct::address>
+    </x-rapidez-ct::card>
 </template>
diff --git a/resources/views/checkout/steps/credentials.blade.php b/resources/views/checkout/steps/credentials.blade.php
index da21d6aa..cbced8c7 100644
--- a/resources/views/checkout/steps/credentials.blade.php
+++ b/resources/views/checkout/steps/credentials.blade.php
@@ -1,22 +1,6 @@
-<x-rapidez-ct::title-progress-bar :href="route('cart')">
-    @lang('Credentials')
-</x-rapidez-ct::title-progress-bar>
-
-<form id="credentials" v-on:submit.prevent="save(['credentials'], 3)">
-    <x-rapidez-ct::sections>
-        @include('rapidez-ct::checkout.partials.sections.login')
-        @include('rapidez-ct::checkout.partials.sections.address')
-        @include('rapidez-ct::checkout.partials.sections.newsletter')
-        @include('rapidez-ct::checkout.partials.sections.shipping')
-    </x-rapidez-ct::sections>
-</form>
-
-<x-rapidez-ct::toolbar>
-    <x-rapidez-ct::button.outline :href="route('cart')">
-        @lang('Back to cart')
-    </x-rapidez-ct::button.outline>
-
-    <x-rapidez-ct::button.accent form="credentials" loader>
-        @lang('Next')
-    </x-rapidez-ct::button.accent>
-</x-rapidez-ct::toolbar>
+<x-rapidez-ct::sections>
+    @includeWhen(!in_array('login', $checkoutSteps), 'rapidez-ct::checkout.partials.sections.login')
+    @include('rapidez-ct::checkout.partials.sections.address')
+    @include('rapidez-ct::checkout.partials.sections.newsletter')
+    @include('rapidez-ct::checkout.partials.sections.shipping')
+</x-rapidez-ct::sections>
\ No newline at end of file
diff --git a/resources/views/checkout/steps/login.blade.php b/resources/views/checkout/steps/login.blade.php
new file mode 100644
index 00000000..3e5cc91d
--- /dev/null
+++ b/resources/views/checkout/steps/login.blade.php
@@ -0,0 +1,10 @@
+<x-rapidez-ct::card.inactive>
+    <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>
+        <template v-else>
+            @include('rapidez-ct::checkout.partials.sections.login.logged-in')
+        </template>
+    </div>
+</x-rapidez-ct::card.inactive>
diff --git a/resources/views/checkout/steps/payment.blade.php b/resources/views/checkout/steps/payment.blade.php
deleted file mode 100644
index 3068e106..00000000
--- a/resources/views/checkout/steps/payment.blade.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<x-rapidez-ct::title-progress-bar href="#" v-on:click.prevent="goToStep(1)">
-    @lang('Payment')
-</x-rapidez-ct::title-progress-bar>
-
-<x-rapidez-ct::sections>
-    <x-rapidez-ct::card.inactive>
-        @include('rapidez-ct::checkout.partials.sections.payment')
-    </x-rapidez-ct::card.inactive>
-</x-rapidez-ct::sections>
-
-<x-rapidez-ct::toolbar>
-    <x-rapidez-ct::button.outline v-on:click.prevent="goToStep(1)">
-        @lang('Back to credentials')
-    </x-rapidez-ct::button.outline>
-
-    <x-rapidez-ct::button.accent class="relative" form="payment" type="submit" dusk="continue" loader>
-        @lang('Place order')
-    </x-rapidez-ct::button.accent>
-</x-rapidez-ct::toolbar>
diff --git a/resources/views/checkout/steps/payment_method.blade.php b/resources/views/checkout/steps/payment_method.blade.php
new file mode 100644
index 00000000..17a0f6f0
--- /dev/null
+++ b/resources/views/checkout/steps/payment_method.blade.php
@@ -0,0 +1,29 @@
+<x-rapidez-ct::sections>
+    <x-rapidez-ct::card.inactive>
+        @include('rapidez-ct::checkout.partials.sections.payment')
+    </x-rapidez-ct::card.inactive>
+</x-rapidez-ct::sections>
+
+<x-rapidez-ct::toolbar>
+    <x-rapidez-ct::button.outline :href="route('checkout', ['step' => 'credentials'])">
+        @lang('Back to credentials')
+    </x-rapidez-ct::button.outline>
+
+
+    <graphql-mutation
+        :query="config.queries.placeOrder"
+        :variables="{ cart_id: mask }"
+        :before-request="handleBeforePlaceOrderHandlers"
+        :callback="handlePlaceOrder"
+        mutate-event="placeOrder"
+        redirect="{{ route('checkout.success') }}"
+        v-slot="{ mutate, variables }"
+    >
+        <fieldset>
+            <x-rapidez-ct::button.accent class="relative" type="submit" dusk="continue" loader>
+                @lang('Place order')
+            </x-rapidez-ct::button.accent>
+        </fieldset>
+    </graphql-mutation>
+
+</x-rapidez-ct::toolbar>
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
index f6342fc3..261e85dc 100644
--- a/resources/views/checkout/steps/success.blade.php
+++ b/resources/views/checkout/steps/success.blade.php
@@ -1,8 +1,11 @@
+@php($checkoutSteps = config('rapidez.frontend.checkout_steps.' . config('rapidez.store_code')) ?: config('rapidez.frontend.checkout_steps.default'))
 <checkout-success>
-    <div slot-scope="{ order }" dusk="checkout-success">
-        <x-rapidez-ct::title-progress-bar>
-            @lang('Thank you for your order')
-        </x-rapidez-ct::title-progress-bar>
+    <div slot-scope="{ order, refreshOrder, hideBilling, shipping, billing, items }" dusk="checkout-success" class="container">
+        <div class="flex flex-wrap gap-1 items-baseline justify-between">
+            <x-rapidez-ct::title>
+                @lang('Thank you for your order')
+            </x-rapidez-ct::title>
+        </div>
         <x-rapidez-ct::sections>
             @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
         </x-rapidez-ct::sections>
diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index 6d39c903..3b02842e 100644
--- a/resources/views/components/address-form.blade.php
+++ b/resources/views/components/address-form.blade.php
@@ -1,13 +1,13 @@
-@props(['type' => 'shipping', 'address' => 'checkout.'.$type.'_address', 'countryKey' => 'country_id'])
+@props(['type' => 'shipping', 'address' => 'variables', 'countryKey' => 'country_code'])
 
-<div class="grid gap-4 sm:gap-5 sm:grid-cols-4">
+<div class="grid gap-4 md:gap-5 md:grid-cols-4">
     @if (Rapidez::config('customer/address/company_show', 0) || Rapidez::config('customer/address/taxvat_show', 0))
         @if (Rapidez::config('customer/address/company_show', 0))
             <x-rapidez-ct::input
                 class="sm:col-span-2"
                 name="{{ $type }}_company"
                 label="Company"
-                v-model.lazy="{{ $address }}.company"
+                v-model="{{ $address }}.company"
             />
         @endif
 
@@ -16,7 +16,7 @@ class="sm:col-span-2"
                 class="sm:col-span-2"
                 name="{{ $type }}_vat_id"
                 label="Tax ID"
-                v-model.lazy="{{ $address }}.vat_id"
+                v-model="{{ $address }}.vat_id"
                 v-on:change="window.app.$emit('vat-change', $event)"
                 :required="Rapidez::config('customer/address/taxvat_show', 0) == 'req'"
             />
@@ -33,7 +33,7 @@ class="sm:col-span-2"
     <x-rapidez-ct::input
         name="{{ $type }}_firstname"
         label="Firstname"
-        v-model.lazy="{{ $address }}.firstname"
+        v-model="{{ $address }}.firstname"
         @class([
             'sm:col-span-2' => !Rapidez::config('customer/address/middlename_show', 0),
         ])
@@ -43,28 +43,28 @@ class="sm:col-span-2"
         <x-rapidez-ct::input
             name="{{ $type }}_middlename"
             label="Middlename"
-            v-model.lazy="{{ $address }}.middlename"
+            v-model="{{ $address }}.middlename"
         />
     @endif
     <x-rapidez-ct::input
         class="sm:col-span-2"
         name="{{ $type }}_lastname"
         label="Lastname"
-        v-model.lazy="{{ $address }}.lastname"
+        v-model="{{ $address }}.lastname"
         required
     />
     @if (Rapidez::config('customer/address/telephone_show', 'req'))
         <x-rapidez-ct::input
             name="{{ $type }}_telephone"
             label="Telephone"
-            v-model.lazy="{{ $address }}.telephone"
+            v-model="{{ $address }}.telephone"
             :required="Rapidez::config('customer/address/telephone_show', 'req') == 'req'"
         />
     @endif
     <x-rapidez-ct::input
         name="{{ $type }}_postcode"
         label="Postcode"
-        v-model.lazy="{{ $address }}.postcode"
+        v-model="{{ $address }}.postcode"
         v-on:change="window.app.$emit('postcode-change', {{ $address }})"
         required
     />
@@ -72,7 +72,7 @@ class="sm:col-span-2"
         <x-rapidez-ct::input
             name="{{ $type }}_housenumber"
             label="Housenumber"
-            v-model.lazy="{{ $address }}.street[1]"
+            v-model="{{ $address }}.street[1]"
             v-on:change="window.app.$emit('postcode-change', {{ $address }})"
             type="{{ Rapidez::config('customer/address/street_lines', 3) == 3 ? 'number' : 'text' }}"
             required
@@ -82,21 +82,21 @@ class="sm:col-span-2"
         <x-rapidez-ct::input
             name="{{ $type }}_addition"
             label="Addition"
-            v-model.lazy="{{ $address }}.street[2]"
+            v-model="{{ $address }}.street[2]"
         />
     @endif
     <x-rapidez-ct::input
         class="sm:col-span-2"
         name="{{ $type }}_street"
         label="Street"
-        v-model.lazy="{{ $address }}.street[0]"
+        v-model="{{ $address }}.street[0]"
         required
     />
     <x-rapidez-ct::input
         class="sm:col-span-2"
         name="{{ $type }}_city"
         label="City"
-        v-model.lazy="{{ $address }}.city"
+        v-model="{{ $address }}.city"
         required
     />
 </div>
diff --git a/resources/views/components/card/index.blade.php b/resources/views/components/card/index.blade.php
index 9cfab734..138659ed 100644
--- a/resources/views/components/card/index.blade.php
+++ b/resources/views/components/card/index.blade.php
@@ -1,4 +1,4 @@
-<div {{ $attributes->class('flex bg-ct-inactive-100 p-3 rounded md:w-[370px]') }}>
+<div {{ $attributes->class('flex bg-ct-inactive-100 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/input/checkbox.blade.php b/resources/views/components/input/checkbox.blade.php
index 3331475a..571355b3 100644
--- a/resources/views/components/input/checkbox.blade.php
+++ b/resources/views/components/input/checkbox.blade.php
@@ -8,6 +8,6 @@ class="text-ct-accent peer h-6 w-6 cursor-pointer rounded border-ct-border trans
         {{ $attributes->except('class') }}
     />
     @isset($slot)
-        <span {{ $slot->attributes ?? '' }}>{{ $slot }}</span>
+        <span {{ $slot->attributes->class('mt-0.5') ?? '' }}>{{ $slot }}</span>
     @endisset
 </label>
diff --git a/resources/views/components/input/password.blade.php b/resources/views/components/input/password.blade.php
index 345eba1b..cdc8cfab 100644
--- a/resources/views/components/input/password.blade.php
+++ b/resources/views/components/input/password.blade.php
@@ -5,7 +5,6 @@
                 class="[&>input]:pr-12"
                 type="password"
                 v-bind:type="isOpen ? 'text' : 'password'"
-                label="Password"
                 {{ $attributes }}
             />
             @if (!$attributes['disabled'] ?? false)
diff --git a/resources/views/components/layout/index.blade.php b/resources/views/components/layout/index.blade.php
index 1a5a06d8..55459e62 100644
--- a/resources/views/components/layout/index.blade.php
+++ b/resources/views/components/layout/index.blade.php
@@ -1,4 +1,4 @@
-<div {{ $attributes->class('text-ct-primary flex flex-wrap gap-x-8 text-sm max-md:flex-col') }}>
+<div {{ $attributes->class('text-ct-primary flex flex-wrap gap-x-8 text-sm max-lg:flex-col') }}>
     <div class="flex-1">
         {{ $slot }}
     </div>
diff --git a/resources/views/components/layout/sidebar.blade.php b/resources/views/components/layout/sidebar.blade.php
index beb51706..40af6b48 100644
--- a/resources/views/components/layout/sidebar.blade.php
+++ b/resources/views/components/layout/sidebar.blade.php
@@ -1,3 +1,3 @@
-<div {{ $attributes->class('mt-10 space-y-5 md:mt-[52px] md:w-[370px]') }}>
+<div {{ $attributes->class('mt-10 space-y-5 lg:mt-[52px] lg:w-[340px] xl:w-[370px]') }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/layout/two-column.blade.php b/resources/views/components/layout/two-column.blade.php
index 5be568a4..c8a77c9b 100644
--- a/resources/views/components/layout/two-column.blade.php
+++ b/resources/views/components/layout/two-column.blade.php
@@ -1,6 +1,6 @@
 <div {{ $attributes->class('flex flex-col mx-auto max-w-4xl w-full') }}>
     {{ $slot }}
-    <div class="mt-5 grid content-center items-start gap-8 sm:grid-cols-2">
+    <div class="mt-5 grid content-center items-start gap-8 lg:grid-cols-2">
         {{ $columns }}
     </div>
 </div>
diff --git a/resources/views/components/newsletter/index.blade.php b/resources/views/components/newsletter/index.blade.php
index 2cf90100..d4c6873c 100644
--- a/resources/views/components/newsletter/index.blade.php
+++ b/resources/views/components/newsletter/index.blade.php
@@ -13,10 +13,10 @@
         @endphp
         <graphql-mutation
             v-cloak
-            query="mutation subscribeNewsletter ($is_subscribed: Boolean!) { updateCustomerV2(input: { is_subscribed: $is_subscribed }) { customer { is_subscribed } } }"
+            :query="user.is_logged_in ? 'mutation subscribeNewsletter ($is_subscribed: Boolean!) { updateCustomerV2(input: { is_subscribed: $is_subscribed }) { customer { is_subscribed } } }' : 'mutation visitor ($email: String!) { subscribeEmailToNewsletter(email: $email) { status } }'"
             :alert="false"
             :clear="false"
-            :variables="{ is_subscribed: {{ $subscribedData }} }"
+            :variables="{ is_subscribed: {{ $subscribedData }}, email: {{ $email ?? 'user.email || cart.email' }} }"
             v-slot="{ mutate, variables }"
         >
     @endif
diff --git a/resources/views/components/progress-bar/index.blade.php b/resources/views/components/progress-bar/index.blade.php
index 7f7bb243..708a2a60 100644
--- a/resources/views/components/progress-bar/index.blade.php
+++ b/resources/views/components/progress-bar/index.blade.php
@@ -1,20 +1,19 @@
-@php($steps = config('rapidez.frontend.checkout_steps.' . config('rapidez.store_code'), config('rapidez.checkout_steps.' . config('rapidez.store_code'), config('rapidez.frontend.checkout_steps.default'), config('rapidez.checkout_steps.default'))))
-<div class="flex items-center space-x-3.5 sm:space-x-[18px] text-xs" v-cloak>
+@aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
+<div class="flex items-center space-x-3.5 sm:space-x-[18px] text-xs">
     <span class="whitespace-nowrap font-medium text-ct-inactive">
         @lang('Step :step out of :total', [
-            'step' => '@{{ checkout.step }}',
-            'total' => count($steps) - 1,
+            'step' => $currentStepKey + 1,
+            'total' => count($checkoutSteps),
         ])
     </span>
-    @foreach (array_slice($steps, 0, -1) as $stepTitle)
-        <div
-            class="aspect-square w-3 rounded"
-            v-on:click="goToStep({{ $stepTitle == 'Credentials' ? 3 : $loop->index }})"
-            :class="{
-                'bg-ct-accent cursor-pointer': {{ $loop->index + 1 }} <= checkout.step,
-                'bg-ct-border pointer-events-none': {{ $loop->index + 1 }} > checkout.step,
-                'outline-4 outline outline-ct-accent/20': {{ $loop->index + 1 }} === checkout.step
-            }"
-        ></div>
+    @foreach ($checkoutSteps as $checkoutStepKey => $checkoutStep)
+        <a href="{{ route('checkout', $checkoutStep) }}" @class([
+            'aspect-square w-3 rounded text-center',
+            'bg-ct-accent cursor-pointer' => $currentStepKey < $checkoutStepKey,
+            'bg-ct-border pointer-events-none' => $checkoutStepKey > $currentStepKey,
+            'outline-4 outline outline-ct-accent/20' => $checkoutStepKey === $currentStepKey
+        ])>
+            {{ $checkoutStepKey + 1 }}
+        </a>
     @endforeach
 </div>
diff --git a/resources/views/components/title-progress-bar.blade.php b/resources/views/components/title-progress-bar.blade.php
index f9a0e7de..b617dd25 100644
--- a/resources/views/components/title-progress-bar.blade.php
+++ b/resources/views/components/title-progress-bar.blade.php
@@ -1,5 +1,6 @@
+@aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
 <div class="flex flex-wrap gap-1 items-baseline justify-between">
-    <x-rapidez-ct::title {{ $attributes }}>
+    <x-rapidez-ct::title {{ $attributes->except(['checkoutSteps', 'currentStep', 'currentStepKey']) }}>
         {{ $slot }}
     </x-rapidez-ct::title>
     <x-rapidez-ct::progress-bar />
diff --git a/resources/views/components/title/base.blade.php b/resources/views/components/title/base.blade.php
index 2c99abd0..4c7e618f 100644
--- a/resources/views/components/title/base.blade.php
+++ b/resources/views/components/title/base.blade.php
@@ -1,7 +1,7 @@
 @props(['tag' => ($isAnchor = $attributes->filter(null)->hasAny('href', ':href', 'v-bind:href')) ? 'a' : 'p'])
 <x-tag is="{{ $tag }}" {{ $attributes->class('font-medium relative group') }}>
     @if ($isAnchor)
-        <x-heroicon-o-arrow-left class="lg:absolute max-lg:mb-5 left-0 top-1/2 h-4 lg:-translate-x-full lg:-translate-y-1/2 lg:pr-6 text-ct-inactive group-hover:text-ct-primary transition" />
+        <x-heroicon-o-arrow-left class="xl:absolute max-xl:mb-5 left-0 top-1/2 h-4 xl:-translate-x-full xl:-translate-y-1/2 xl:pr-6 text-ct-inactive group-hover:text-ct-primary transition" />
     @endif
     {{ $slot }}
 </x-tag>