diff --git a/app/Livewire/BillingPortal/Cart/OptionalRecurringProducts.php b/app/Livewire/BillingPortal/Cart/OptionalRecurringProducts.php
index 81c7acfbfc83..261fcdf71947 100644
--- a/app/Livewire/BillingPortal/Cart/OptionalRecurringProducts.php
+++ b/app/Livewire/BillingPortal/Cart/OptionalRecurringProducts.php
@@ -19,6 +19,13 @@ class OptionalRecurringProducts extends Component
 {
     public Subscription $subscription;
 
+    public array $context;
+
+    public function quantity($id, $value): void
+    {
+        $this->dispatch('purchase.context', property: "bundle.optional_recurring_products.{$id}.quantity", value: $value);
+    }
+
     public function render(): \Illuminate\View\View
     {
         return view('billing-portal.v3.cart.optional-recurring-products');
diff --git a/resources/views/billing-portal/v3/cart/optional-recurring-products.blade.php b/resources/views/billing-portal/v3/cart/optional-recurring-products.blade.php
index 751814b396d0..5a4b0b129c50 100644
--- a/resources/views/billing-portal/v3/cart/optional-recurring-products.blade.php
+++ b/resources/views/billing-portal/v3/cart/optional-recurring-products.blade.php
@@ -1,15 +1,20 @@
 <div class="space-y-10">
-    @unless(empty($subscription->optional_recurring_product_ids))
-        @foreach($subscription->service()->optional_recurring_products() as $index => $product)
+    @isset($context['bundle']['optional_recurring_products'])
+        @foreach($context['bundle']['optional_recurring_products'] as $key => $entry)
+        
+        @php
+            $product = $entry['product'];
+        @endphp
+
         <div>
             <div class="flex items-start justify-between space-x-4">
                 <div class="flex flex-start">
-                    @if(filter_var($product->product_image, FILTER_VALIDATE_URL))
+                    @if(filter_var($product['product_image'], FILTER_VALIDATE_URL))
                     <div
                         class="h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 mr-2"
                     >
                         <img
-                            src="{{ $product->product_image }}"
+                            src="{{ $product['product_image'] }}"
                             alt=""
                             class="h-full w-full object-cover object-center border rounded-md"
                         />
@@ -17,24 +22,24 @@
                     @endif
 
                     <div class="flex flex-col">
-                        <h2 class="text-lg font-medium">{{ $product->product_key }}</h2>
-                        <p class="block text-sm">{{ \App\Utils\Number::formatMoney($product->price, $subscription->company) }} / <span class="lowercase">{{ App\Models\RecurringInvoice::frequencyForKey($subscription->frequency_id) }}</span></p>
+                        <h2 class="text-lg font-medium">{{ $product['product_key'] }}</h2>
+                        <p class="block text-sm">{{ \App\Utils\Number::formatMoney($product['price'], $subscription['company']) }} / <span class="lowercase">{{ App\Models\RecurringInvoice::frequencyForKey($subscription->frequency_id) }}</span></p>
                     </div>
                 </div>
 
                 <div class="flex flex-col-reverse space-y-3">
                     <div class="flex">
-                        @if(is_numeric($product->max_quantity))
-                            @if($subscription->use_inventory_management && $product->in_stock_quantity == 0)
+                        @if($subscription->per_seat_enabled)
+                            @if($subscription->use_inventory_management && $product['in_stock_quantity'] == 0)
                                 <p class="text-sm font-light text-red-500 text-right mr-2 mt-2">{{ ctrans('texts.out_of_stock') }}</p>
                             @else
                                 <p class="text-sm font-light text-gray-700 text-right mr-2 mt-2">{{ ctrans('texts.qty') }}</p>
                             @endif
-        
-                            <select class="rounded-md border-gray-300 shadow-sm sm:text-sm" @if($subscription->use_inventory_management && $product->in_stock_quantity == 0) disabled @endif>
-                                <option value="0" selected="selected">0</option>
-                                @for ($i = 1; $i <= ($subscription->use_inventory_management ? min($product->in_stock_quantity, max(100,$product->max_quantity)) : max(100,$product->max_quantity)); $i++)
-                                    <option value="{{ $i }}">{{ $i }}</option>
+
+                            <select id="{{ $product['hashed_id'] }}" wire:change="quantity($event.target.id, $event.target.value)" class="rounded-md border-gray-300 shadow-sm sm:text-sm" @if($subscription->use_inventory_management && $product['in_stock_quantity'] == 0) disabled @endif>
+                                <option {{ $entry['quantity'] == '0' ? 'selected' : '' }} value="0" selected="selected">0</option>
+                                @for ($i = 1; $i <= ($subscription->use_inventory_management ? min($product['in_stock_quantity'], max(100,$product['max_quantity'])) : max(100,$product['max_quantity'])); $i++)
+                                    <option {{ $entry['quantity'] == $i ? 'selected' : '' }} value="{{ $i }}">{{ $i }}</option>
                                 @endfor
                             </select>
                         @endif
@@ -43,9 +48,9 @@
             </div>
 
             <article class="prose my-3 text-sm">
-                {!! $product->markdownNotes() !!}
+                {!! $product['notes'] !!}
             </article>
         </div>
         @endforeach 
-    @endunless
+    @endisset
 </div>