diff --git a/src/routes/commission/commission.tsx b/src/routes/commission/commission.tsx
index 23032cd..ad455dd 100644
--- a/src/routes/commission/commission.tsx
+++ b/src/routes/commission/commission.tsx
@@ -116,14 +116,12 @@ export const Commission = () => {
               <Drawer.Header>
                 <Drawer.Title>Create Rule</Drawer.Title>
               </Drawer.Header>
-              <Drawer.Body>
                 <CreateCommissionRuleForm
                   onSuccess={() => {
                     setCreateRuleOpen(false);
                     refetch();
                   }}
                 />
-              </Drawer.Body>
             </Drawer.Content>
           </Drawer>
         </div>
diff --git a/src/routes/commission/components/create-commission-rule-form.tsx b/src/routes/commission/components/create-commission-rule-form.tsx
index a977af9..55f1cc4 100644
--- a/src/routes/commission/components/create-commission-rule-form.tsx
+++ b/src/routes/commission/components/create-commission-rule-form.tsx
@@ -1,10 +1,27 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo } from "react";
 
-import { Button, Input, Label, Select, Switch, toast } from "@medusajs/ui";
+import {
+  Button,
+  Drawer,
+  Input,
+  Label,
+  Select,
+  Switch,
+  toast,
+} from "@medusajs/ui";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+
+import { Form } from "@components/common/form";
+import { SwitchBox } from "@components/common/switch-box";
+import { KeyboundForm } from "@components/utilities/keybound-form";
 
 import { useProductCategories, useProductTypes, useStores } from "@hooks/api";
 import { useCreateCommisionRule } from "@hooks/api/commission";
 import { useSellers } from "@hooks/api/sellers";
+import { useDocumentDirection } from "@hooks/use-document-direction";
 
 type Props = {
   onSuccess?: () => void;
@@ -12,21 +29,152 @@ type Props = {
 
 type Price = { amount: number; currency_code: string };
 
+const ReferenceType = {
+  SELLER: "seller",
+  PRODUCT_TYPE: "product_type",
+  PRODUCT_CATEGORY: "product_category",
+  SELLER_PRODUCT_TYPE: "seller+product_type",
+  SELLER_PRODUCT_CATEGORY: "seller+product_category",
+} as const;
+
+const RateType = {
+  FLAT: "flat",
+  PERCENTAGE: "percentage",
+} as const;
+
+type ReferenceTypeValue = (typeof ReferenceType)[keyof typeof ReferenceType];
+
+const referenceRequirements = {
+  needsSeller: (reference: ReferenceTypeValue) =>
+    (
+      [
+        ReferenceType.SELLER,
+        ReferenceType.SELLER_PRODUCT_TYPE,
+        ReferenceType.SELLER_PRODUCT_CATEGORY,
+      ] as ReferenceTypeValue[]
+    ).includes(reference),
+  needsType: (reference: ReferenceTypeValue) =>
+    (
+      [
+        ReferenceType.PRODUCT_TYPE,
+        ReferenceType.SELLER_PRODUCT_TYPE,
+      ] as ReferenceTypeValue[]
+    ).includes(reference),
+  needsCategory: (reference: ReferenceTypeValue) =>
+    (
+      [
+        ReferenceType.PRODUCT_CATEGORY,
+        ReferenceType.SELLER_PRODUCT_CATEGORY,
+      ] as ReferenceTypeValue[]
+    ).includes(reference),
+};
+
+const validateReferenceFields = (
+  data: {
+    reference: ReferenceTypeValue;
+    seller?: string;
+    type?: string;
+    category?: string;
+  },
+  ctx: z.RefinementCtx,
+) => {
+  if (referenceRequirements.needsSeller(data.reference) && !data.seller) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Seller is required for this rule type",
+      path: ["seller"],
+    });
+  }
+
+  if (referenceRequirements.needsType(data.reference) && !data.type) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Product type is required for this rule type",
+      path: ["type"],
+    });
+  }
+
+  if (referenceRequirements.needsCategory(data.reference) && !data.category) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Product category is required for this rule type",
+      path: ["category"],
+    });
+  }
+};
+
+const validateRateFields = (
+  data: {
+    rateType: string;
+    ratePercentValue?: number;
+    rateFlatValue?: Record<string, number>;
+  },
+  ctx: z.RefinementCtx,
+) => {
+  if (data.rateType === RateType.PERCENTAGE && !data.ratePercentValue) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Percentage value is required",
+      path: ["ratePercentValue"],
+    });
+  }
+
+  if (data.rateType === RateType.FLAT) {
+    if (!data.rateFlatValue || Object.keys(data.rateFlatValue).length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "At least one flat fee value is required",
+        path: ["rateFlatValue"],
+      });
+
+      return;
+    }
+
+    const hasValidValue = Object.values(data.rateFlatValue).some(
+      (value) => value > 0,
+    );
+
+    if (!hasValidValue) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "At least one flat fee value must be greater than 0",
+        path: ["rateFlatValue"],
+      });
+    }
+  }
+};
+
+const CreateCommissionRuleSchema = z
+  .object({
+    name: z.string().min(1, "Name is required"),
+    reference: z.enum([
+      ReferenceType.SELLER,
+      ReferenceType.PRODUCT_TYPE,
+      ReferenceType.PRODUCT_CATEGORY,
+      ReferenceType.SELLER_PRODUCT_TYPE,
+      ReferenceType.SELLER_PRODUCT_CATEGORY,
+    ]),
+    seller: z.string().optional(),
+    type: z.string().optional(),
+    category: z.string().optional(),
+    includeTax: z.boolean(),
+    rateType: z.enum([RateType.FLAT, RateType.PERCENTAGE]),
+    ratePercentValue: z.number().min(0).max(100).optional(),
+    rateFlatValue: z.record(z.string(), z.number().min(0)).optional(),
+    minCommissionEnabled: z.boolean(),
+    minCommission: z.record(z.string(), z.number().min(0)).optional(),
+    maxCommissionEnabled: z.boolean(),
+    maxCommission: z.record(z.string(), z.number().min(0)).optional(),
+  })
+  .superRefine((data, ctx) => {
+    validateReferenceFields(data, ctx);
+    validateRateFields(data, ctx);
+  });
+
+type CreateCommissionRuleFormData = z.infer<typeof CreateCommissionRuleSchema>;
+
 const CreateCommissionRuleForm = ({ onSuccess }: Props) => {
-  const [name, setName] = useState("");
-  const [reference, setReference] = useState("seller");
-  const [rateType, setRateType] = useState("flat");
-  const [ratePercentValue, setRatePercentValue] = useState(0);
-  const [rateFlatValue, setRateFlatValue] = useState<Price[]>([]);
-  const [includeTax, setIncludeTax] = useState(false);
-  const [currencies, setCurrencies] = useState<string[]>([]);
-  const [minCommissionEnabled, setMinCommissionEnabled] =
-    useState<boolean>(false);
-  const [maxCommissionEnabled, setMaxCommissionEnabled] =
-    useState<boolean>(false);
-  const [minCommission, setMinCommission] = useState<Price[]>([]);
-  const [maxCommission, setMaxCommission] = useState<Price[]>([]);
-  const [loading, setLoading] = useState(false);
+  const direction = useDocumentDirection();
 
   const { product_types } = useProductTypes({
     fields: "id,value",
@@ -37,368 +185,463 @@ const CreateCommissionRuleForm = ({ onSuccess }: Props) => {
     limit: 9999,
   });
   const { sellers } = useSellers({ fields: "id,name", limit: 9999 });
+  const { stores } = useStores();
+
+  const currencies = useMemo(
+    () => stores?.[0]?.supported_currencies.map((c) => c.currency_code) ?? [],
+    [stores],
+  );
+
+  const form = useForm<CreateCommissionRuleFormData>({
+    defaultValues: {
+      name: "",
+      reference: ReferenceType.SELLER,
+      seller: "",
+      type: "",
+      category: "",
+      includeTax: false,
+      rateType: RateType.FLAT,
+      ratePercentValue: 0,
+      rateFlatValue: {},
+      minCommissionEnabled: false,
+      minCommission: {},
+      maxCommissionEnabled: false,
+      maxCommission: {},
+    },
+    resolver: zodResolver(CreateCommissionRuleSchema),
+  });
 
-  const [showSellers, setShowSellers] = useState(false);
-  const [showProductTypes, setShowProductTypes] = useState(false);
-  const [showProductCategories, setShowProductCategories] = useState(false);
+  const reference = useWatch({ control: form.control, name: "reference" });
+  const rateType = useWatch({ control: form.control, name: "rateType" });
+  const minCommissionEnabled = useWatch({
+    control: form.control,
+    name: "minCommissionEnabled",
+  });
+  const maxCommissionEnabled = useWatch({
+    control: form.control,
+    name: "maxCommissionEnabled",
+  });
 
-  const [seller, setSeller] = useState("");
-  const [type, setType] = useState("");
-  const [category, setCategory] = useState("");
+  const showSellers = useMemo(
+    () =>
+      reference === ReferenceType.SELLER ||
+      reference === ReferenceType.SELLER_PRODUCT_TYPE ||
+      reference === ReferenceType.SELLER_PRODUCT_CATEGORY,
+    [reference],
+  );
 
-  const { mutateAsync: createCommissionRule } = useCreateCommisionRule({});
+  const showProductTypes = useMemo(
+    () =>
+      reference === ReferenceType.PRODUCT_TYPE ||
+      reference === ReferenceType.SELLER_PRODUCT_TYPE,
+    [reference],
+  );
 
-  const { stores } = useStores();
+  const showProductCategories = useMemo(
+    () =>
+      reference === ReferenceType.PRODUCT_CATEGORY ||
+      reference === ReferenceType.SELLER_PRODUCT_CATEGORY,
+    [reference],
+  );
 
-  useEffect(() => {
-    if (stores && stores[0]) {
-      setCurrencies(stores[0].supported_currencies.map((c) => c.currency_code));
+  const { mutateAsync: createCommissionRule, isPending } =
+    useCreateCommisionRule({});
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const referenceIdParts: string[] = [];
+
+    if (showSellers && data.seller) {
+      referenceIdParts.push(data.seller);
     }
-  }, [stores]);
-
-  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      let reference_id = "";
-      switch (reference) {
-        case "seller":
-          reference_id = seller;
-          break;
-        case "product_type":
-          reference_id = type;
-          break;
-        case "product_category":
-          reference_id = category;
-          break;
-        case "seller+product_type":
-          reference_id = `${seller}+${type}`;
-          break;
-        case "seller+product_category":
-          reference_id = `${seller}+${category}`;
-          break;
-      }
-
-      const rule_payload = {
-        name,
-        reference,
-        reference_id,
-        is_active: true,
-        rate: {
-          type: rateType as "flat" | "percentage",
-          percentage_rate:
-            rateType === "percentage" ? ratePercentValue : undefined,
-          include_tax: includeTax,
-          price_set: rateType === "flat" ? rateFlatValue : undefined,
-          min_price_set: minCommissionEnabled ? minCommission : undefined,
-          max_price_set: maxCommissionEnabled ? maxCommission : undefined,
-        },
-      };
-
-      await createCommissionRule(rule_payload);
-      setLoading(false);
-      toast.success("Created!");
-      onSuccess?.();
-    } catch (e: unknown) {
-      toast.error("Error!");
-      console.error(e);
-      setLoading(false);
+    if (showProductTypes && data.type) {
+      referenceIdParts.push(data.type);
     }
-  };
-  useEffect(() => {
-    if (reference === "seller") {
-      setShowSellers(true);
-      setShowProductCategories(false);
-      setShowProductTypes(false);
+    if (showProductCategories && data.category) {
+      referenceIdParts.push(data.category);
     }
 
-    if (reference === "product_category") {
-      setShowSellers(false);
-      setShowProductCategories(true);
-      setShowProductTypes(false);
-    }
+    const reference_id = referenceIdParts.join("+");
 
-    if (reference === "product_type") {
-      setShowSellers(false);
-      setShowProductCategories(false);
-      setShowProductTypes(true);
-    }
+    const convertRecordToArray = (
+      record: Record<string, number> | undefined,
+    ): Price[] | undefined => {
+      if (!record) return undefined;
 
-    if (reference === "seller+product_type") {
-      setShowSellers(true);
-      setShowProductCategories(false);
-      setShowProductTypes(true);
-    }
+      return Object.entries(record).map(([currency_code, amount]) => ({
+        currency_code,
+        amount,
+      }));
+    };
+
+    const rule_payload = {
+      name: data.name,
+      reference: data.reference,
+      reference_id,
+      is_active: true,
+      rate: {
+        type: data.rateType,
+        percentage_rate:
+          data.rateType === RateType.PERCENTAGE
+            ? data.ratePercentValue
+            : undefined,
+        include_tax: data.includeTax,
+        price_set:
+          data.rateType === RateType.FLAT
+            ? convertRecordToArray(data.rateFlatValue)
+            : undefined,
+        min_price_set: data.minCommissionEnabled
+          ? convertRecordToArray(data.minCommission)
+          : undefined,
+        max_price_set: data.maxCommissionEnabled
+          ? convertRecordToArray(data.maxCommission)
+          : undefined,
+      },
+    };
 
-    if (reference === "seller+product_category") {
-      setShowSellers(true);
-      setShowProductCategories(true);
-      setShowProductTypes(false);
+    await createCommissionRule(rule_payload, {
+      onSuccess: () => {
+        toast.success("Commission rule created successfully");
+        onSuccess?.();
+      },
+      onError: (error) => {
+        toast.error(error.message || "Failed to create commission rule");
+      },
+    });
+  });
+
+  useEffect(() => {
+    if (!showSellers) {
+      form.setValue("seller", "");
+    }
+    if (!showProductTypes) {
+      form.setValue("type", "");
     }
-  }, [reference]);
+    if (!showProductCategories) {
+      form.setValue("category", "");
+    }
+  }, [reference, showSellers, showProductTypes, showProductCategories, form]);
 
   return (
-    <form onSubmit={onSubmit}>
-      <fieldset>
-        <legend className="mb-2">Rule Name</legend>
-        <Input
-          name="name"
-          placeholder="Name"
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-      </fieldset>
-      <fieldset className="my-4">
-        <legend className="mb-2">Rule Type</legend>
-        <Select
-          value={reference}
-          onValueChange={(value) => {
-            setReference(value);
-          }}
-        >
-          <Select.Trigger>
-            <Select.Value placeholder="Type" />
-          </Select.Trigger>
-          <Select.Content>
-            <Select.Item value="seller">Seller</Select.Item>
-            <Select.Item value="product_type">Product type</Select.Item>
-            <Select.Item value="product_category">Product category</Select.Item>
-            <Select.Item value="seller+product_type">
-              Seller + Product type
-            </Select.Item>
-            <Select.Item value="seller+product_category">
-              Seller + Product category
-            </Select.Item>
-          </Select.Content>
-        </Select>
-      </fieldset>
-      <fieldset className="my-4">
-        <legend className="mb-2">Attribute</legend>
-        {showSellers && sellers && (
-          <Select
-            value={seller}
-            onValueChange={(value) => {
-              setSeller(value);
-            }}
-          >
-            <Select.Trigger>
-              <Select.Value placeholder="Seller" />
-            </Select.Trigger>
-            <Select.Content>
-              {sellers.map((s) => {
-                return (
-                  <Select.Item key={s.id} value={s.id}>
-                    {s.name}
-                  </Select.Item>
-                );
-              })}
-            </Select.Content>
-          </Select>
-        )}
-        {showProductCategories && product_categories && (
-          <Select
-            value={category}
-            onValueChange={(value) => {
-              setCategory(value);
-            }}
-          >
-            <Select.Trigger>
-              <Select.Value placeholder="Product category" />
-            </Select.Trigger>
-            <Select.Content>
-              {product_categories.map((s) => {
-                return (
-                  <Select.Item key={s.id} value={s.id}>
-                    {s.name}
-                  </Select.Item>
-                );
-              })}
-            </Select.Content>
-          </Select>
-        )}
-        {showProductTypes && product_types && (
-          <Select
-            value={type}
-            onValueChange={(value) => {
-              setType(value);
-            }}
-          >
-            <Select.Trigger>
-              <Select.Value placeholder="Product type" />
-            </Select.Trigger>
-            <Select.Content>
-              {product_types.map((s) => {
-                return (
-                  <Select.Item key={s.id} value={s.id}>
-                    {s.value}
-                  </Select.Item>
-                );
-              })}
-            </Select.Content>
-          </Select>
-        )}
-      </fieldset>
-      <fieldset className="my-4">
-        <div className="flex items-center gap-x-2">
-          <Switch
-            id="include_tax"
-            onCheckedChange={(val) => {
-              setIncludeTax(val);
-            }}
+    <Form {...form}>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex flex-1 flex-col overflow-hidden"
+      >
+        <Drawer.Body className="flex flex-1 flex-col gap-y-4 overflow-y-auto">
+          <Form.Field
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <Form.Item>
+                <Form.Label>Rule Name</Form.Label>
+                <Form.Control>
+                  <Input {...field} placeholder="Enter rule name" />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )}
           />
-          <Label>Commission charged including tax</Label>
-        </div>
-      </fieldset>
-      <fieldset className="my-4">
-        <legend className="mb-2">Fee type</legend>
-        <div className="flex items-center gap-x-2">
-          <Label>Flat fee</Label>
-          <Switch
-            id="rate_type"
-            onCheckedChange={(val) => {
-              setRateType(val ? "percentage" : "flat");
-            }}
+
+          <Form.Field
+            control={form.control}
+            name="reference"
+            render={({ field: { onChange, ref, ...field } }) => (
+              <Form.Item>
+                <Form.Label>Rule Type</Form.Label>
+                <Form.Control>
+                  <Select dir={direction} {...field} onValueChange={onChange}>
+                    <Select.Trigger ref={ref}>
+                      <Select.Value placeholder="Select rule type" />
+                    </Select.Trigger>
+                    <Select.Content>
+                      <Select.Item value={ReferenceType.SELLER}>
+                        Seller
+                      </Select.Item>
+                      <Select.Item value={ReferenceType.PRODUCT_TYPE}>
+                        Product type
+                      </Select.Item>
+                      <Select.Item value={ReferenceType.PRODUCT_CATEGORY}>
+                        Product category
+                      </Select.Item>
+                      <Select.Item value={ReferenceType.SELLER_PRODUCT_TYPE}>
+                        Seller + Product type
+                      </Select.Item>
+                      <Select.Item
+                        value={ReferenceType.SELLER_PRODUCT_CATEGORY}
+                      >
+                        Seller + Product category
+                      </Select.Item>
+                    </Select.Content>
+                  </Select>
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )}
           />
-          <Label>Percentage</Label>
-        </div>
-      </fieldset>
-      <fieldset className="my-4">
-        <legend className="mb-2">Fee value</legend>
-        {rateType === "percentage" && (
-          <Input
-            name="rate_percent_value"
-            type="number"
-            value={ratePercentValue}
-            onChange={(e) => setRatePercentValue(parseFloat(e.target.value))}
+
+          {showSellers && sellers && (
+            <Form.Field
+              control={form.control}
+              name="seller"
+              render={({ field: { onChange, ref, ...field } }) => (
+                <Form.Item>
+                  <Form.Label>Seller</Form.Label>
+                  <Form.Control>
+                    <Select dir={direction} {...field} onValueChange={onChange}>
+                      <Select.Trigger ref={ref}>
+                        <Select.Value placeholder="Select seller" />
+                      </Select.Trigger>
+                      <Select.Content>
+                        {sellers.map((s) => (
+                          <Select.Item key={s.id} value={s.id}>
+                            {s.name}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select>
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+          )}
+
+          {showProductCategories && product_categories && (
+            <Form.Field
+              control={form.control}
+              name="category"
+              render={({ field: { onChange, ref, ...field } }) => (
+                <Form.Item>
+                  <Form.Label>Product Category</Form.Label>
+                  <Form.Control>
+                    <Select dir={direction} {...field} onValueChange={onChange}>
+                      <Select.Trigger ref={ref}>
+                        <Select.Value placeholder="Select product category" />
+                      </Select.Trigger>
+                      <Select.Content>
+                        {product_categories.map((c) => (
+                          <Select.Item key={c.id} value={c.id}>
+                            {c.name}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select>
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+          )}
+
+          {showProductTypes && product_types && (
+            <Form.Field
+              control={form.control}
+              name="type"
+              render={({ field: { onChange, ref, ...field } }) => (
+                <Form.Item>
+                  <Form.Label>Product Type</Form.Label>
+                  <Form.Control>
+                    <Select dir={direction} {...field} onValueChange={onChange}>
+                      <Select.Trigger ref={ref}>
+                        <Select.Value placeholder="Select product type" />
+                      </Select.Trigger>
+                      <Select.Content>
+                        {product_types.map((t) => (
+                          <Select.Item key={t.id} value={t.id}>
+                            {t.value}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select>
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+          )}
+
+          <SwitchBox
+            control={form.control}
+            name="includeTax"
+            label="Commission charged including tax"
+            description="Enable if commission should include tax in calculations"
           />
-        )}
-        {rateType === "flat" &&
-          currencies &&
-          currencies.map((currency) => {
-            return (
-              <>
-                <Label>{currency.toUpperCase()}</Label>
-                <Input
-                  name={"rate_flat_val" + { currency }}
-                  type="number"
-                  value={
-                    rateFlatValue.filter((v) => v.currency_code === currency)[0]
-                      ?.amount || 0
-                  }
-                  onChange={(e) =>
-                    setRateFlatValue((prevValue) => {
-                      return [
-                        ...prevValue.filter(
-                          (v) => v.currency_code !== currency,
-                        ),
-                        {
-                          currency_code: currency,
-                          amount: parseFloat(e.target.value),
-                        },
-                      ];
-                    })
-                  }
-                />
-              </>
-            );
-          })}
-      </fieldset>
-      {rateType === "percentage" && (
-        <>
-          <fieldset className="my-4">
-            <div className="flex items-center gap-x-2">
-              <Label>Minimum commission value</Label>
-              <Switch
-                id="min_com"
-                checked={minCommissionEnabled}
-                onCheckedChange={(val) => {
-                  setMinCommissionEnabled(val);
-                }}
-              />
-            </div>
-            {minCommissionEnabled &&
-              currencies &&
-              currencies.map((currency) => {
-                return (
-                  <>
-                    <Label>{currency.toUpperCase()}</Label>
-                    <Input
-                      name={"min_com_val" + { currency }}
-                      type="number"
-                      value={
-                        minCommission.filter(
-                          (v) => v.currency_code === currency,
-                        )[0]?.amount || 0
-                      }
-                      onChange={(e) =>
-                        setMinCommission((prevValue) => {
-                          return [
-                            ...prevValue.filter(
-                              (v) => v.currency_code !== currency,
-                            ),
-                            {
-                              currency_code: currency,
-                              amount: parseFloat(e.target.value),
-                            },
-                          ];
-                        })
+
+          <Form.Field
+            control={form.control}
+            name="rateType"
+            render={({ field: { onChange, value } }) => (
+              <Form.Item>
+                <Form.Label>Fee Type</Form.Label>
+                <Form.Control>
+                  <div className="flex items-center gap-x-2">
+                    <Label>Flat fee</Label>
+                    <Switch
+                      checked={value === RateType.PERCENTAGE}
+                      onCheckedChange={(checked) =>
+                        onChange(checked ? RateType.PERCENTAGE : RateType.FLAT)
                       }
                     />
-                  </>
-                );
-              })}
-          </fieldset>
-          <fieldset className="my-4">
-            <div className="flex items-center gap-x-2">
-              <Label>Maximum commission value</Label>
-              <Switch
-                id="max_com"
-                checked={maxCommissionEnabled}
-                onCheckedChange={(val) => {
-                  setMaxCommissionEnabled(val);
-                }}
-              />
-            </div>
-            {maxCommissionEnabled &&
-              currencies &&
-              currencies.map((currency) => {
-                return (
-                  <>
-                    <Label>{currency.toUpperCase()}</Label>
+                    <Label>Percentage</Label>
+                  </div>
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )}
+          />
+
+          {rateType === RateType.PERCENTAGE && (
+            <Form.Field
+              control={form.control}
+              name="ratePercentValue"
+              render={({ field: { onChange, value, ...field } }) => (
+                <Form.Item>
+                  <Form.Label>Percentage Value</Form.Label>
+                  <Form.Control>
                     <Input
-                      name={"max_com_val" + { currency }}
+                      {...field}
                       type="number"
-                      value={
-                        maxCommission.filter(
-                          (v) => v.currency_code === currency,
-                        )[0]?.amount || 0
-                      }
+                      min={0}
+                      max={100}
+                      step={0.01}
+                      value={value ?? 0}
                       onChange={(e) =>
-                        setMaxCommission((prevValue) => {
-                          return [
-                            ...prevValue.filter(
-                              (v) => v.currency_code !== currency,
-                            ),
-                            {
-                              currency_code: currency,
-                              amount: parseFloat(e.target.value),
-                            },
-                          ];
-                        })
+                        onChange(parseFloat(e.target.value) || 0)
                       }
+                      placeholder="Enter percentage (0-100)"
                     />
-                  </>
-                );
-              })}
-          </fieldset>
-        </>
-      )}
-      <Button type="submit" isLoading={loading}>
-        Create
-      </Button>
-    </form>
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+          )}
+
+          {rateType === RateType.FLAT && currencies.length > 0 && (
+            <Form.Field
+              control={form.control}
+              name="rateFlatValue"
+              render={({ field: { value = {}, onChange } }) => (
+                <Form.Item>
+                  <Form.Label>Flat Fee Values</Form.Label>
+                  <div className="flex flex-col gap-y-2">
+                    {currencies.map((currency) => (
+                      <div key={currency}>
+                        <Label className="mb-1">{currency.toUpperCase()}</Label>
+                        <Input
+                          type="number"
+                          min={0}
+                          step={0.01}
+                          value={value[currency] ?? 0}
+                          onChange={(e) =>
+                            onChange({
+                              ...value,
+                              [currency]: parseFloat(e.target.value) || 0,
+                            })
+                          }
+                          placeholder={`Enter amount in ${currency.toUpperCase()}`}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+          )}
+
+          {rateType === RateType.PERCENTAGE && (
+            <>
+              <SwitchBox
+                control={form.control}
+                name="minCommissionEnabled"
+                label="Minimum commission value"
+                description="Set a minimum commission amount"
+              />
+
+              {minCommissionEnabled && currencies.length > 0 && (
+                <div className="flex flex-col gap-y-2">
+                  <Label>Minimum Commission Values</Label>
+                  {currencies.map((currency) => (
+                    <Form.Field
+                      key={currency}
+                      control={form.control}
+                      name="minCommission"
+                      render={({ field: { value = {}, onChange } }) => (
+                        <Form.Item>
+                          <Form.Label>{currency.toUpperCase()}</Form.Label>
+                          <Form.Control>
+                            <Input
+                              type="number"
+                              min={0}
+                              step={0.01}
+                              value={value[currency] ?? 0}
+                              onChange={(e) =>
+                                onChange({
+                                  ...value,
+                                  [currency]: parseFloat(e.target.value) || 0,
+                                })
+                              }
+                              placeholder={`Enter minimum in ${currency.toUpperCase()}`}
+                            />
+                          </Form.Control>
+                        </Form.Item>
+                      )}
+                    />
+                  ))}
+                </div>
+              )}
+
+              <SwitchBox
+                control={form.control}
+                name="maxCommissionEnabled"
+                label="Maximum commission value"
+                description="Set a maximum commission amount"
+              />
+
+              {maxCommissionEnabled && currencies.length > 0 && (
+                <div className="flex flex-col gap-y-2">
+                  <Label>Maximum Commission Values</Label>
+                  {currencies.map((currency) => (
+                    <Form.Field
+                      key={currency}
+                      control={form.control}
+                      name="maxCommission"
+                      render={({ field: { value = {}, onChange } }) => (
+                        <Form.Item>
+                          <Form.Label>{currency.toUpperCase()}</Form.Label>
+                          <Form.Control>
+                            <Input
+                              type="number"
+                              min={0}
+                              step={0.01}
+                              value={value[currency] ?? 0}
+                              onChange={(e) =>
+                                onChange({
+                                  ...value,
+                                  [currency]: parseFloat(e.target.value) || 0,
+                                })
+                              }
+                              placeholder={`Enter maximum in ${currency.toUpperCase()}`}
+                            />
+                          </Form.Control>
+                        </Form.Item>
+                      )}
+                    />
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </Drawer.Body>
+
+        <Drawer.Footer className="mt-8 flex items-center justify-end gap-x-2">
+          <Button type="submit" isLoading={isPending} size="small">
+            Create
+          </Button>
+        </Drawer.Footer>
+      </KeyboundForm>
+    </Form>
   );
 };