diff --git a/src/modules/products/components/product-actions/index.tsx b/src/modules/products/components/product-actions/index.tsx
index facbbd27..2ab64260 100644
--- a/src/modules/products/components/product-actions/index.tsx
+++ b/src/modules/products/components/product-actions/index.tsx
@@ -20,9 +20,9 @@ type ProductActionsProps = {
   disabled?: boolean
 }
 
-const optionsAsKeymap = (variantOptions: any) => {
+const optionsAsKeymap = (variantOptions: HttpTypes.StoreProductVariant["options"]) => {
   return variantOptions?.reduce((acc: Record<string, string>, varopt: any) => {
-    acc[varopt.option.title] = varopt.value
+    acc[varopt.option_id] = varopt.value
     return acc
   }, {})
 }
@@ -56,10 +56,10 @@ export default function ProductActions({
   }, [product.variants, options])
 
   // update the options when a variant is selected
-  const setOptionValue = (title: string, value: string) => {
+  const setOptionValue = (optionId: string, value: string) => {
     setOptions((prev) => ({
       ...prev,
-      [title]: value,
+      [optionId]: value,
     }))
   }
 
@@ -117,7 +117,7 @@ export default function ProductActions({
                   <div key={option.id}>
                     <OptionSelect
                       option={option}
-                      current={options[option.title ?? ""]}
+                      current={options[option.id]}
                       updateOption={setOptionValue}
                       title={option.title ?? ""}
                       data-testid="product-options"
diff --git a/src/modules/products/components/product-actions/option-select.tsx b/src/modules/products/components/product-actions/option-select.tsx
index ec943d87..6ccaeaec 100644
--- a/src/modules/products/components/product-actions/option-select.tsx
+++ b/src/modules/products/components/product-actions/option-select.tsx
@@ -19,7 +19,7 @@ const OptionSelect: React.FC<OptionSelectProps> = ({
   "data-testid": dataTestId,
   disabled,
 }) => {
-  const filteredOptions = option.values?.map((v) => v.value)
+  const filteredOptions = (option.values ?? []).map((v) => v.value)
 
   return (
     <div className="flex flex-col gap-y-3">
@@ -28,10 +28,10 @@ const OptionSelect: React.FC<OptionSelectProps> = ({
         className="flex flex-wrap justify-between gap-2"
         data-testid={dataTestId}
       >
-        {filteredOptions?.map((v) => {
+        {filteredOptions.map((v) => {
           return (
             <button
-              onClick={() => updateOption(option.title ?? "", v ?? "")}
+              onClick={() => updateOption(option.id, v)}
               key={v}
               className={clx(
                 "border-ui-border-base bg-ui-bg-subtle border text-small-regular h-10 rounded-rounded p-2 flex-1 ",