diff --git a/package.json b/package.json
index ef6bc8de73..0967cbbd52 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "react-collapse": "^5.0.1",
     "react-collapsible": "^2.8.3",
     "react-country-flag": "^2.3.0",
+    "react-currency-input-field": "^3.6.4",
     "react-datepicker": "^3.6.0",
     "react-dom": "^16.12.0",
     "react-dropzone": "^11.3.4",
diff --git a/src/components/molecules/shipping-option/shipping-option.stories.tsx b/src/components/molecules/shipping-option/shipping-option.stories.tsx
index 1d548945da..acb887f2fb 100644
--- a/src/components/molecules/shipping-option/shipping-option.stories.tsx
+++ b/src/components/molecules/shipping-option/shipping-option.stories.tsx
@@ -3,7 +3,7 @@ import React from "react"
 import ShippingOption from "."
 
 export default {
-  title: "Molecules/ShippingOption",
+  title: "Atoms/ShippingOption",
   component: ShippingOption,
 } as ComponentMeta<typeof ShippingOption>
 
diff --git a/src/components/organisms/currency-input/currency-input.stories.tsx b/src/components/organisms/currency-input/currency-input.stories.tsx
new file mode 100644
index 0000000000..764a406e68
--- /dev/null
+++ b/src/components/organisms/currency-input/currency-input.stories.tsx
@@ -0,0 +1,43 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react"
+import CurrencyInput from "."
+
+export default {
+  title: "Organisms/CurrencyInput",
+  component: CurrencyInput,
+} as ComponentMeta<typeof CurrencyInput>
+
+const Template: ComponentStory<typeof CurrencyInput> = (args) => (
+  <CurrencyInput {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  currentCurrency: "usd",
+  currencyCodes: ["usd", "eur", "gbp"],
+}
+
+export const ReadOnly = Template.bind({})
+ReadOnly.args = {
+  currentCurrency: "usd",
+  readOnly: true,
+}
+
+const TemplateWithAmount = (args) => (
+  <CurrencyInput {...args.currencyArgs}>
+    <CurrencyInput.AmountInput {...args.amountArgs}></CurrencyInput.AmountInput>
+  </CurrencyInput>
+)
+
+export const WithAmount = TemplateWithAmount.bind({})
+WithAmount.args = {
+  currencyArgs: {
+    currentCurrency: "usd",
+    currencyCodes: ["usd", "eur", "krw"],
+    size: "small",
+  },
+  amountArgs: {
+    label: "Price",
+    amount: 10000,
+  },
+}
diff --git a/src/components/organisms/currency-input/index.tsx b/src/components/organisms/currency-input/index.tsx
new file mode 100644
index 0000000000..a8df6cb5b0
--- /dev/null
+++ b/src/components/organisms/currency-input/index.tsx
@@ -0,0 +1,228 @@
+import clsx from "clsx"
+import React, { useContext, useEffect, useRef, useState } from "react"
+import AmountField from "react-currency-input-field"
+import { Option } from "../../../types/shared"
+import { currencies, CurrencyType } from "../../../utils/currencies"
+import { getDecimalDigits, normalizeAmount } from "../../../utils/prices"
+import MinusIcon from "../../fundamentals/icons/minus-icon"
+import PlusIcon from "../../fundamentals/icons/plus-icon"
+import InputContainer from "../../fundamentals/input-container"
+import InputHeader from "../../fundamentals/input-header"
+import Input from "../../molecules/input"
+import Select from "../../molecules/select"
+
+type CurrencyInputProps = {
+  currencyCodes?: string[]
+  currentCurrency?: string
+  size?: "small" | "medium" | "full"
+  readOnly?: boolean
+  onChange?: (currencyCode: string) => void
+  className?: React.HTMLAttributes<HTMLDivElement>["className"]
+}
+
+type CurrencyInputState = {
+  currencyInfo: CurrencyType | undefined
+}
+
+type AmountInputProps = {
+  label: string
+  amount: number | undefined
+  required?: boolean
+  step?: number
+  allowNegative?: boolean
+  onChange?: (amount: number | undefined) => void
+}
+
+const CurrencyContext = React.createContext<CurrencyInputState>({
+  currencyInfo: undefined,
+})
+
+const getCurrencyInfo = (currencyCode?: string) => {
+  if (!currencyCode) {
+    return undefined
+  }
+  const currencyInfo = currencies[currencyCode.toUpperCase()]
+  return currencyInfo
+}
+
+const CurrencyInput: React.FC<CurrencyInputProps> & {
+  AmountInput: React.FC<AmountInputProps>
+} = ({
+  currentCurrency,
+  currencyCodes,
+  size = "full",
+  readOnly = false,
+  onChange,
+  children,
+  className,
+}) => {
+  const options: Option[] =
+    currencyCodes?.map((code) => ({
+      label: code.toUpperCase(),
+      value: code,
+    })) ?? []
+
+  const [selectedCurrency, setSelectedCurrency] = useState<
+    CurrencyType | undefined
+  >(getCurrencyInfo(currentCurrency))
+
+  const [value, setValue] = useState<Option | undefined>(
+    currentCurrency
+      ? {
+          label: currentCurrency.toUpperCase(),
+          value: currentCurrency,
+        }
+      : undefined
+  )
+
+  const onCurrencyChange = (currency: Option) => {
+    // Should not be nescessary, but the component we use for select input
+    // has a bug where it passes a null object if you click on the label
+    // of the already selected value
+    if (!currency) {
+      return
+    }
+
+    setValue(currency)
+    setSelectedCurrency(getCurrencyInfo(currency.value))
+
+    if (onChange) {
+      onChange(currency.value)
+    }
+  }
+
+  return (
+    <CurrencyContext.Provider
+      value={{
+        currencyInfo: selectedCurrency,
+      }}
+    >
+      <div className={clsx("flex items-center gap-x-2xsmall", className)}>
+        <div
+          className={clsx(
+            { "w-[144px]": size === "medium" },
+            { "w-[120px]": size === "small" },
+            { "w-full": size === "full" }
+          )}
+        >
+          {!readOnly ? (
+            <Select
+              enableSearch
+              label="Currency"
+              value={value}
+              onChange={onCurrencyChange}
+              options={options}
+              disabled={readOnly}
+            />
+          ) : (
+            <Input
+              label="Currency"
+              value={value?.label}
+              readOnly
+              className="pointer-events-none"
+              tabIndex={-1}
+            />
+          )}
+        </div>
+        {children && <div className="w-full">{children}</div>}
+      </div>
+    </CurrencyContext.Provider>
+  )
+}
+
+const AmountInput: React.FC<AmountInputProps> = ({
+  label,
+  required = false,
+  amount,
+  step = 1,
+  allowNegative = false,
+  onChange,
+}) => {
+  const { currencyInfo } = useContext(CurrencyContext)
+  const [value, setValue] = useState<string | undefined>(
+    amount ? `${normalizeAmount(currencyInfo?.code, amount)}` : undefined
+  )
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  useEffect(() => {
+    inputRef.current?.dispatchEvent(new Event("blur"))
+  }, [currencyInfo?.decimal_digits])
+
+  useEffect(() => {
+    if (currencyInfo && amount) {
+      setValue(`${normalizeAmount(currencyInfo?.code, amount)}`)
+    }
+  }, [amount])
+
+  const handleManualValueChange = (val: number) => {
+    const newValue = parseFloat(value ?? "0") + val
+
+    if (!allowNegative && newValue < 0) {
+      return
+    }
+
+    setValue(`${newValue}`)
+  }
+
+  const handleChange = (value) => {
+    let persistedAmount: number | undefined = undefined
+
+    if (!value) {
+      value = 0
+    }
+
+    if (currencyInfo) {
+      const amount = parseFloat(value)
+      const multiplier = getDecimalDigits(currencyInfo.code)
+      persistedAmount = multiplier * amount
+      setValue(`${value}`)
+    }
+
+    if (onChange && persistedAmount) {
+      onChange(persistedAmount)
+    }
+  }
+
+  return (
+    <InputContainer onClick={() => inputRef.current?.focus()}>
+      <InputHeader label={label} required={required} />
+      <div className="flex items-center mt-2xsmall">
+        {currencyInfo?.symbol_native && (
+          <span className="inter-base-regular text-grey-40 mr-xsmall">
+            {currencyInfo.symbol_native}
+          </span>
+        )}
+        <AmountField
+          className="bg-inherit outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40"
+          decimalScale={currencyInfo?.decimal_digits}
+          value={value}
+          onValueChange={handleChange}
+          ref={inputRef}
+          step={step}
+          allowNegativeValue={allowNegative}
+          placeholder="0.00"
+        />
+        <div className="flex self-end">
+          <button
+            className="mr-2 text-grey-50 w-4 h-4 hover:bg-grey-10 rounded-soft cursor-pointer"
+            type="button"
+            onClick={() => handleManualValueChange(-step)}
+          >
+            <MinusIcon size={16} />
+          </button>
+          <button
+            type="button"
+            className="text-grey-50 w-4 h-4 hover:bg-grey-10 rounded-soft cursor-pointer"
+            onClick={() => handleManualValueChange(step)}
+          >
+            <PlusIcon size={16} />
+          </button>
+        </div>
+      </div>
+    </InputContainer>
+  )
+}
+
+CurrencyInput.AmountInput = AmountInput
+
+export default CurrencyInput
diff --git a/src/components/templates/gift-card-table/index.tsx b/src/components/templates/gift-card-table/index.tsx
index f328b12d0d..eef6b43f54 100644
--- a/src/components/templates/gift-card-table/index.tsx
+++ b/src/components/templates/gift-card-table/index.tsx
@@ -1,7 +1,7 @@
+import moment from "moment"
 import React, { useEffect, useState } from "react"
-import StatusDot from "../../fundamentals/status-dot"
+import StatusDot from "../../fundamentals/status-indicator"
 import Table from "../../molecules/table"
-import moment from "moment"
 import { FilteringOptionProps } from "../../molecules/table/filtering-option"
 
 type GiftCardTableProps = {
diff --git a/src/domain/settings/regions/details.tsx b/src/domain/settings/regions/details.tsx
index 0d527c06ee..e3eea55c2c 100644
--- a/src/domain/settings/regions/details.tsx
+++ b/src/domain/settings/regions/details.tsx
@@ -15,8 +15,10 @@ import TrashIcon from "../../../components/fundamentals/icons/trash-icon"
 import Input from "../../../components/molecules/input"
 import Select from "../../../components/molecules/select"
 import BodyCard from "../../../components/organisms/body-card"
+import CurrencyInput from "../../../components/organisms/currency-input"
 import DeletePrompt from "../../../components/organisms/delete-prompt"
 import useToaster from "../../../hooks/use-toaster"
+import { Option } from "../../../types/shared"
 import { countries as countryData } from "../../../utils/countries"
 import { getErrorMessage } from "../../../utils/error-messages"
 import fulfillmentProvidersMapper from "../../../utils/fulfillment-providers.mapper"
@@ -25,12 +27,12 @@ import Shipping from "./shipping"
 
 const RegionDetails = ({ id, onDelete, handleSelect }) => {
   const [currencies, setCurrencies] = useState([])
-  const [countries, setCountries] = useState([])
-  const [selectedCurrency, setSelectedCurrency] = useState(null)
-  const [paymentOptions, setPaymentOptions] = useState([])
-  const [paymentProviders, setPaymentProviders] = useState([])
-  const [fulfillmentOptions, setFulfillmentOptions] = useState([])
-  const [fulfillmentProviders, setFulfillmentProviders] = useState([])
+  const [countries, setCountries] = useState<Option[]>([])
+  const [selectedCurrency, setSelectedCurrency] = useState<string>()
+  const [paymentOptions, setPaymentOptions] = useState<Option[]>([])
+  const [paymentProviders, setPaymentProviders] = useState<Option[]>([])
+  const [fulfillmentOptions, setFulfillmentOptions] = useState<Option[]>([])
+  const [fulfillmentProviders, setFulfillmentProviders] = useState<Option[]>([])
 
   const { register, reset, setValue, handleSubmit } = useForm()
   const toaster = useToaster()
@@ -39,14 +41,8 @@ const RegionDetails = ({ id, onDelete, handleSelect }) => {
   const createRegion = useAdminCreateRegion()
   const deleteRegion = useAdminDeleteRegion(id)
   const { region, isLoading: regionIsLoading } = useAdminRegion(id)
-  const {
-    payment_providers,
-    isLoading: paymentIsLoading,
-  } = useAdminStorePaymentProviders()
-  const {
-    fulfillment_options,
-    isLoading: fulfillmentIsLoading,
-  } = useAdminRegionFulfillmentOptions(id)
+  const { payment_providers } = useAdminStorePaymentProviders()
+  const { fulfillment_options } = useAdminRegionFulfillmentOptions(id)
   const updateRegion = useAdminUpdateRegion(id)
 
   const [showDanger, setShowDanger] = useState(false)
@@ -55,31 +51,26 @@ const RegionDetails = ({ id, onDelete, handleSelect }) => {
     if (!store || !region) return
     register({ name: "currency_code" })
     setValue("currency_code", region.currency_code)
-    setSelectedCurrency({
-      value: region.currency_code,
-      label: region.currency_code.toUpperCase(),
-    })
+    setSelectedCurrency(region.currency_code)
     setCurrencies(getCurrencies(store.currencies))
   }, [store, region])
 
   useEffect(() => {
-    if (paymentIsLoading) return
+    if (!payment_providers) return
     setPaymentOptions(
       payment_providers.map((c) => paymentProvidersMapper(c.id))
     )
-  }, [payment_providers, paymentIsLoading])
+  }, [payment_providers])
 
   useEffect(() => {
-    if (fulfillmentIsLoading) return
+    if (!fulfillment_options) return
     setFulfillmentOptions(
-      fulfillment_options?.map((c) =>
-        fulfillmentProvidersMapper(c.provider_id)
-      ) ?? []
+      fulfillment_options.map((c) => fulfillmentProvidersMapper(c.provider_id))
     )
-  }, [fulfillment_options, fulfillmentIsLoading])
+  }, [fulfillment_options])
 
   useEffect(() => {
-    if (regionIsLoading) return
+    if (!region) return
     reset({ ...region, tax_rate: region.tax_rate / 100 })
     register({ name: "countries" })
     register({ name: "payment_providers" })
@@ -103,25 +94,20 @@ const RegionDetails = ({ id, onDelete, handleSelect }) => {
 
     setValue(
       "fulfillment_providers",
-      region.fulfillment_providers.map((v) => v.id)
+      region?.fulfillment_providers.map((v) => v.id)
     )
     setFulfillmentProviders(
       region.fulfillment_providers.map((v) => fulfillmentProvidersMapper(v.id))
     )
-  }, [region, regionIsLoading])
+  }, [region])
 
   const getCurrencies = (storeCurrencies) => {
     let currs = storeCurrencies
-      .filter((item) => item.code !== region.currency_code)
+      .filter((item) => item.code !== region?.currency_code)
       .map((el) => el.code)
-    currs.unshift(region.currency_code)
+    currs.unshift(region?.currency_code)
 
-    return (
-      currs.map((c) => ({
-        value: c,
-        label: c.toUpperCase(),
-      })) || []
-    )
+    return currs ?? []
   }
 
   const handlePaymentChange = (values) => {
@@ -178,6 +164,11 @@ const RegionDetails = ({ id, onDelete, handleSelect }) => {
   }))
 
   const handleDuplicate = () => {
+    if (!region) {
+      toaster("Region not found", "error")
+      return
+    }
+
     const payload = {
       currency_code: region.currency_code,
       tax_rate: region.tax_rate,
@@ -200,7 +191,7 @@ const RegionDetails = ({ id, onDelete, handleSelect }) => {
   }
 
   const handleDelete = async () => {
-    deleteRegion.mutate(null, {
+    deleteRegion.mutate(undefined, {
       onSuccess: () => {
         if (onDelete) onDelete(null)
       },
@@ -255,12 +246,9 @@ const RegionDetails = ({ id, onDelete, handleSelect }) => {
                   ref={register}
                   className="mb-base"
                 />
-                <Select
-                  enableSearch
-                  label="Currency"
-                  name="currency_code"
-                  options={currencies}
-                  value={selectedCurrency}
+                <CurrencyInput
+                  currentCurrency={selectedCurrency}
+                  currencyCodes={currencies}
                   onChange={handleChangeCurrency}
                   className="mb-base"
                 />
diff --git a/src/domain/settings/regions/edit-shipping.tsx b/src/domain/settings/regions/edit-shipping.tsx
index d79ebed6bf..2df9a8eb89 100644
--- a/src/domain/settings/regions/edit-shipping.tsx
+++ b/src/domain/settings/regions/edit-shipping.tsx
@@ -7,12 +7,13 @@ import { useForm } from "react-hook-form"
 import Button from "../../../components/fundamentals/button"
 import Input from "../../../components/molecules/input"
 import Modal from "../../../components/molecules/modal"
+import CurrencyInput from "../../../components/organisms/currency-input"
 import DeletePrompt from "../../../components/organisms/delete-prompt"
 import useToaster from "../../../hooks/use-toaster"
 import { getErrorMessage } from "../../../utils/error-messages"
 
 const EditShipping = ({ shippingOption, region, onDone, onClick }) => {
-  const { register, reset, handleSubmit } = useForm()
+  const { register, reset, handleSubmit, setValue } = useForm()
   const [adminOnly, setAdminOnly] = useState(shippingOption?.admin_only)
   const [showDelete, setShowDelete] = useState(false)
   const deleteOption = useAdminDeleteShippingOption(shippingOption.id)
@@ -20,17 +21,13 @@ const EditShipping = ({ shippingOption, region, onDone, onClick }) => {
   const toaster = useToaster()
 
   useEffect(() => {
-    const option = {
-      ...shippingOption,
-    }
-
     if (shippingOption.requirements) {
       const minSubtotal = shippingOption.requirements.find(
         (req) => req.type === "min_subtotal"
       )
       if (minSubtotal) {
-        option.requirements.min_subtotal = {
-          amount: minSubtotal.amount / 100,
+        shippingOption.requirements.min_subtotal = {
+          amount: minSubtotal.amount,
           id: minSubtotal.id,
         }
       }
@@ -38,18 +35,32 @@ const EditShipping = ({ shippingOption, region, onDone, onClick }) => {
         (req) => req.type === "max_subtotal"
       )
       if (maxSubtotal) {
-        option.requirements.max_subtotal = {
-          amount: maxSubtotal.amount / 100,
+        shippingOption.requirements.max_subtotal = {
+          amount: maxSubtotal.amount,
           id: maxSubtotal.id,
         }
       }
     }
 
-    reset({ ...option, amount: option.amount / 100 })
+    reset({ ...shippingOption })
+    register("amount")
+    setValue("amount", shippingOption?.amount)
+
+    register("requirements.min_subtotal.amount")
+    setValue(
+      "requirements.min_subtotal.amount",
+      shippingOption?.requirements?.min_subtotal?.amount
+    )
+
+    register("requirements.max_subtotal.amount")
+    setValue(
+      "requirements.max_subtotal.amount",
+      shippingOption?.requirements?.max_subtotal?.amount
+    )
   }, [shippingOption])
 
   const handleDelete = async () => {
-    deleteOption.mutate(null, {
+    deleteOption.mutate(void {}, {
       onSuccess: () => {
         onClick()
         if (onDone) {
@@ -70,7 +81,12 @@ const EditShipping = ({ shippingOption, region, onDone, onClick }) => {
       return null
     }
 
-    return Object.entries(requirements).reduce((acc, [key, value]) => {
+    return Object.entries(requirements).reduce<
+      (
+        | { type: string; amount: number; id: string }
+        | { type: string; amount: number }
+      )[]
+    >((acc, [key, value]) => {
       if (value.amount && value.amount > 0) {
         const reqType = shippingOption.requirements.find(
           (req) => req.type === key
@@ -78,13 +94,13 @@ const EditShipping = ({ shippingOption, region, onDone, onClick }) => {
         if (reqType) {
           acc.push({
             type: key,
-            amount: Math.round(value.amount * 100),
+            amount: value.amount,
             id: reqType.id,
           })
         } else {
           acc.push({
             type: key,
-            amount: Math.round(value.amount * 100),
+            amount: value.amount,
           })
         }
         return acc
@@ -94,6 +110,24 @@ const EditShipping = ({ shippingOption, region, onDone, onClick }) => {
     }, [])
   }
 
+  const handleMinChange = (amount: number | undefined) => {
+    if (amount) {
+      setValue("requirements.min_subtotal.amount", amount)
+    }
+  }
+
+  const handleMaxChange = (amount: number | undefined) => {
+    if (amount) {
+      setValue("requirements.max_subtotal.amount", amount)
+    }
+  }
+
+  const handleAmountChange = (amount: number | undefined) => {
+    if (amount) {
+      setValue("amount", amount)
+    }
+  }
+
   const handleSave = (data: {
     requirements: { amount: number; type: string }[]
     name: any
@@ -103,11 +137,12 @@ const EditShipping = ({ shippingOption, region, onDone, onClick }) => {
 
     const payload = {
       name: data.name,
-      amount: Math.round(data.amount * 100),
-      requirements: reqs,
+      amount: data.amount,
+      requirements: reqs ?? [],
       admin_only: adminOnly,
     }
 
+    //TODO: fix AdminPostShippingOptionsOptionReq type
     updateOption.mutate(payload, {
       onSuccess: () => {
         toaster("Successfully updated shipping option", "success")
@@ -158,23 +193,17 @@ const EditShipping = ({ shippingOption, region, onDone, onClick }) => {
                     ref={register}
                     className="flex-grow"
                   />
-                  <div className="flex items-center gap-2xsmall">
-                    <Input
-                      label="Currency"
-                      value={region.currency_code.toUpperCase()}
-                      readOnly
-                      className="w-[120px] pointer-events-none"
-                      tabIndex={-1}
-                    />
-                    <Input
+                  <CurrencyInput
+                    readOnly
+                    currentCurrency={region.currency_code}
+                    size="small"
+                  >
+                    <CurrencyInput.AmountInput
+                      amount={shippingOption.amount}
                       label="Price"
-                      type="number"
-                      ref={register}
-                      name={"amount"}
-                      min={0}
-                      step={0.1}
+                      onChange={handleAmountChange}
                     />
-                  </div>
+                  </CurrencyInput>
                 </div>
                 <div className="mt-large mb-xlarge">
                   <label className="inline-flex items-center inter-base-semibold">
@@ -190,43 +219,39 @@ const EditShipping = ({ shippingOption, region, onDone, onClick }) => {
                     Show on website
                   </label>
                 </div>
-                <p className="inter-base-semibold mb-base">Requirements</p>
-                <div className="grid grid-cols-1 medium:grid-cols-2 gap-base">
-                  <div className="flex items-center gap-2xsmall">
-                    <Input
-                      label="Currency"
-                      value={region.currency_code.toUpperCase()}
-                      readOnly
-                      className="w-[120px] pointer-events-none"
-                      tabIndex={-1}
-                    />
-                    <Input
-                      label="Min. subtotal"
-                      type="number"
-                      name={`requirements.min_subtotal.amount`}
-                      min={0}
-                      ref={register}
-                      placeholder="0"
-                    />
-                  </div>
-                  <div className="flex items-center gap-2xsmall">
-                    <Input
-                      label="Currency"
-                      value={region.currency_code.toUpperCase()}
-                      readOnly
-                      className="w-[120px] pointer-events-none"
-                      tabIndex={-1}
-                    />
-                    <Input
-                      label="Max. subtotal"
-                      type="number"
-                      min={0}
-                      name={`requirements.max_subtotal.amount`}
-                      ref={register}
-                      placeholder="100"
-                    />
-                  </div>
-                </div>
+                {!shippingOption.is_return && (
+                  <>
+                    <p className="inter-base-semibold mb-base">Requirements</p>
+                    <div className="grid grid-cols-1 medium:grid-cols-2 gap-base">
+                      <CurrencyInput
+                        readOnly
+                        currentCurrency={region.currency_code}
+                        size="small"
+                      >
+                        <CurrencyInput.AmountInput
+                          amount={
+                            shippingOption.requirements?.min_subtotal?.amount
+                          }
+                          label="Min. subtotal"
+                          onChange={handleMinChange}
+                        />
+                      </CurrencyInput>
+                      <CurrencyInput
+                        readOnly
+                        currentCurrency={region.currency_code}
+                        size="small"
+                      >
+                        <CurrencyInput.AmountInput
+                          amount={
+                            shippingOption.requirements?.max_subtotal?.amount
+                          }
+                          label="Max. subtotal"
+                          onChange={handleMaxChange}
+                        />
+                      </CurrencyInput>
+                    </div>
+                  </>
+                )}
                 <div className="mt-xlarge">
                   <p className="inter-base-semibold">Danger Zone</p>
                   <p className="inter-base-regular text-grey-50 mb-base">
diff --git a/src/domain/settings/regions/index.tsx b/src/domain/settings/regions/index.tsx
index 4a7fd2540a..c0b807e57a 100644
--- a/src/domain/settings/regions/index.tsx
+++ b/src/domain/settings/regions/index.tsx
@@ -13,13 +13,15 @@ import NewRegion from "./new"
 
 const Regions = () => {
   const { regions, isLoading, refetch } = useAdminRegions()
-  const [selectedRegion, setSelectedRegion] = useState<string | null>(null)
+  const [selectedRegion, setSelectedRegion] = useState<string | undefined>(
+    undefined
+  )
   const [addRegion, setAddRegion] = useState(false)
 
   useEffect(() => {
     const setRegion = () => {
       if (!isLoading && selectedRegion === null) {
-        setSelectedRegion(regions[0].id)
+        setSelectedRegion(regions?.[0]?.id)
       }
     }
 
@@ -28,9 +30,12 @@ const Regions = () => {
 
   const handleDelete = () => {
     refetch().then(({ data }) => {
-      const id = data.regions[0].id
+      const id = data?.regions?.[0]?.id
+
+      if (!id) return
+
       setSelectedRegion(id)
-      document.getElementById(id).scrollIntoView({
+      document.getElementById(id)?.scrollIntoView({
         behavior: "smooth",
         block: "start",
         inline: "nearest",
@@ -41,7 +46,7 @@ const Regions = () => {
   const handleSelect = (id: string) => {
     refetch().then(() => {
       setSelectedRegion(id)
-      document.getElementById(id).scrollIntoView({
+      document.getElementById(id)?.scrollIntoView({
         behavior: "smooth",
       })
     })
@@ -67,7 +72,7 @@ const Regions = () => {
               },
             ]}
           >
-            {isLoading || !selectedRegion ? (
+            {isLoading || !regions ? (
               <div className="flex-grow h-full flex items-center justify-center">
                 <Spinner size="large" variant="secondary" />
               </div>
@@ -76,14 +81,14 @@ const Regions = () => {
                 value={selectedRegion}
                 onValueChange={setSelectedRegion}
               >
-                {regions.map(r => {
+                {regions.map((r) => {
                   const providers = `Payment providers: ${
                     r.payment_providers
-                      .map(pp => paymentProvidersMapper(pp.id).label)
+                      .map((pp) => paymentProvidersMapper(pp.id).label)
                       .join(", ") || "not configured"
                   } - Fulfillment providers: ${
                     r.fulfillment_providers
-                      .map(fp => fulfillmentProvidersMapper(fp.id).label)
+                      .map((fp) => fulfillmentProvidersMapper(fp.id).label)
                       .join(", ") || "not configured"
                   }`
                   return (
@@ -92,9 +97,9 @@ const Regions = () => {
                       sublabel={
                         r.countries.length
                           ? `(${r.countries
-                              .map(c => c.display_name)
+                              .map((c) => c.display_name)
                               .join(", ")})`
-                          : null
+                          : undefined
                       }
                       description={providers}
                       value={r.id}
diff --git a/src/domain/settings/regions/new-shipping.tsx b/src/domain/settings/regions/new-shipping.tsx
index ceb1458e10..bc1ec3e7c0 100644
--- a/src/domain/settings/regions/new-shipping.tsx
+++ b/src/domain/settings/regions/new-shipping.tsx
@@ -9,7 +9,9 @@ import Button from "../../../components/fundamentals/button"
 import Input from "../../../components/molecules/input"
 import Modal from "../../../components/molecules/modal"
 import Select from "../../../components/molecules/select"
+import CurrencyInput from "../../../components/organisms/currency-input"
 import useToaster from "../../../hooks/use-toaster"
+import { Option } from "../../../types/shared"
 import { getErrorMessage } from "../../../utils/error-messages"
 import fulfillmentProvidersMapper from "../../../utils/fulfillment-providers.mapper"
 
@@ -20,7 +22,7 @@ const NewShipping = ({
   onCreated,
   onClick,
 }) => {
-  const { register, setValue, handleSubmit, errors } = useForm()
+  const { register, setValue, handleSubmit } = useForm()
   const {
     shipping_profiles,
     isLoading: isProfilesLoading,
@@ -28,11 +30,21 @@ const NewShipping = ({
   const [adminOnly, setAdminOnly] = useState(false)
   const [options, setOptions] = useState([])
   const [selectedOption, setSelectedOption] = useState(null)
-  const [profileOptions, setProfileOptions] = useState([])
+  const [profileOptions, setProfileOptions] = useState<Option[]>([])
   const [selectedProfile, setSelectedProfile] = useState(null)
   const createShippingOption = useAdminCreateShippingOption()
   const toaster = useToaster()
 
+  useEffect(() => {
+    register("amount", { required: true })
+    register("requirements.max_subtotal.amount")
+    register("requirements.min_subtotal.amount")
+  }, [])
+
+  const handleAmountChange = (fieldName: string, amount?: number) => {
+    setValue(fieldName, amount)
+  }
+
   const handleSave = (data: {
     name: string
     requirements: { amount: number; type: string }[]
@@ -40,9 +52,9 @@ const NewShipping = ({
     profile_id: { value: string; label: string }
     amount: number
   }) => {
-    const fOptions = fulfillmentOptions.map(provider => {
+    const fOptions = fulfillmentOptions.map((provider) => {
       const filtered = provider.options.filter(
-        o => !!o.is_return === !!isReturn
+        (o) => !!o.is_return === !!isReturn
       )
 
       return {
@@ -60,7 +72,7 @@ const NewShipping = ({
     if (data.requirements) {
       reqs = Object.entries(data.requirements).reduce((acc, [key, value]) => {
         if (value.amount && value.amount > 0) {
-          acc.push({ type: key, amount: Math.round(value.amount * 100) })
+          acc.push({ type: key, amount: value.amount })
           return acc
         } else {
           return acc
@@ -75,7 +87,7 @@ const NewShipping = ({
       profile_id: data.profile_id?.value,
       requirements: reqs,
       price_type: "flat_rate",
-      amount: Math.round(data.amount * 100),
+      amount: data.amount,
       is_return: isReturn,
       provider_id,
       admin_only: adminOnly,
@@ -89,7 +101,7 @@ const NewShipping = ({
         }
         onClick()
       },
-      onError: error => {
+      onError: (error) => {
         toaster(getErrorMessage(error), "error")
       },
     })
@@ -98,7 +110,7 @@ const NewShipping = ({
   useEffect(() => {
     const opts = fulfillmentOptions.reduce((acc, provider, p) => {
       const filtered = provider.options.filter(
-        o => !!o.is_return === !!isReturn
+        (o) => !!o.is_return === !!isReturn
       )
 
       return acc.concat(
@@ -117,9 +129,9 @@ const NewShipping = ({
   }, [fulfillmentOptions])
 
   useEffect(() => {
-    const opts = isProfilesLoading
+    const opts = !shipping_profiles
       ? []
-      : shipping_profiles.map(p => ({
+      : shipping_profiles.map((p) => ({
           label: p.name,
           value: p.id,
         }))
@@ -131,12 +143,12 @@ const NewShipping = ({
     }
   }, [isProfilesLoading, shipping_profiles])
 
-  const handleProfileChange = value => {
+  const handleProfileChange = (value) => {
     setValue("profile_id", value)
     setSelectedProfile(value)
   }
 
-  const handleFulfillmentChange = value => {
+  const handleFulfillmentChange = (value) => {
     setValue("fulfillment_option", value)
     setSelectedOption(value)
   }
@@ -160,25 +172,13 @@ const NewShipping = ({
                 placeholder="New Shipping Option"
                 className="flex-grow"
               />
-              <div className="flex items-center gap-2xsmall">
-                <Input
-                  label="Currency"
-                  value={region.currency_code.toUpperCase()}
-                  readOnly
-                  className="w-[120px] pointer-events-none"
-                  tabIndex={-1}
-                />
-                <Input
+              <CurrencyInput currentCurrency={region.currency_code} readOnly>
+                <CurrencyInput.AmountInput
                   label="Price"
-                  type="number"
-                  ref={register({ required: true })}
-                  name={"amount"}
-                  placeholder="10"
-                  required
-                  min={0}
-                  step={0.1}
+                  onChange={(v) => handleAmountChange("amount", v)}
+                  amount={undefined}
                 />
-              </div>
+              </CurrencyInput>
             </div>
             <div className="mt-large mb-xlarge">
               <label className="inline-flex items-center inter-base-semibold">
@@ -228,40 +228,36 @@ const NewShipping = ({
               <div>
                 <p className="inter-base-semibold mb-base">Requirements</p>
                 <div className="grid grid-cols-1 medium:grid-cols-2 gap-base">
-                  <div className="flex items-center gap-2xsmall">
-                    <Input
-                      label="Currency"
-                      value={region.currency_code.toUpperCase()}
-                      readOnly
-                      className="w-[120px] pointer-events-none"
-                      tabIndex={-1}
-                    />
-                    <Input
-                      label="Min. subtotal"
-                      type="number"
-                      name={`requirements.min_subtotal.amount`}
-                      min={0}
-                      ref={register}
-                      placeholder="0"
+                  <CurrencyInput
+                    currentCurrency={region.currency_code}
+                    readOnly
+                  >
+                    <CurrencyInput.AmountInput
+                      label="Price"
+                      onChange={(v) =>
+                        handleAmountChange(
+                          "requirements.min_subtotal.amount",
+                          v
+                        )
+                      }
+                      amount={undefined}
                     />
-                  </div>
-                  <div className="flex items-center gap-2xsmall">
-                    <Input
-                      label="Currency"
-                      value={region.currency_code.toUpperCase()}
-                      readOnly
-                      className="w-[120px] pointer-events-none"
-                      tabIndex={-1}
+                  </CurrencyInput>
+                  <CurrencyInput
+                    currentCurrency={region.currency_code}
+                    readOnly
+                  >
+                    <CurrencyInput.AmountInput
+                      label="Price"
+                      onChange={(v) =>
+                        handleAmountChange(
+                          "requirements.max_subtotal.amount",
+                          v
+                        )
+                      }
+                      amount={undefined}
                     />
-                    <Input
-                      label="Max. subtotal"
-                      type="number"
-                      min={0}
-                      name={`requirements.max_subtotal.amount`}
-                      ref={register}
-                      placeholder="100"
-                    />
-                  </div>
+                  </CurrencyInput>
                 </div>
               </div>
             )}
diff --git a/src/domain/settings/regions/new.tsx b/src/domain/settings/regions/new.tsx
index c4d1321ea9..9e46901b5d 100644
--- a/src/domain/settings/regions/new.tsx
+++ b/src/domain/settings/regions/new.tsx
@@ -5,13 +5,16 @@ import Button from "../../../components/fundamentals/button"
 import Input from "../../../components/molecules/input"
 import Modal from "../../../components/molecules/modal"
 import Select from "../../../components/molecules/select"
+import CurrencyInput from "../../../components/organisms/currency-input"
 import useToaster from "../../../hooks/use-toaster"
 import { countries as countryData } from "../../../utils/countries"
 import { getErrorMessage } from "../../../utils/error-messages"
 
 const NewRegion = ({ onDone, onClick }) => {
-  const [currencies, setCurrencies] = useState([])
-  const [selectedCurrency, setSelectedCurrency] = useState(null)
+  const [currencies, setCurrencies] = useState<string[]>([])
+  const [selectedCurrency, setSelectedCurrency] = useState<string | undefined>(
+    undefined
+  )
   const [countries, setCountries] = useState([])
   const [paymentOptions, setPaymentOptions] = useState([])
   const [paymentProviders, setPaymentProviders] = useState([])
@@ -24,23 +27,18 @@ const NewRegion = ({ onDone, onClick }) => {
   const toaster = useToaster()
 
   useEffect(() => {
-    if (storeIsLoading) return
+    if (storeIsLoading || !store) return
     register({ name: "currency_code" })
-    setCurrencies(
-      store.currencies.map(c => ({
-        value: c.code,
-        label: c.code.toUpperCase(),
-      }))
-    )
+    setCurrencies(store.currencies.map((currency) => currency.code))
     setPaymentOptions(
-      store.payment_providers.map(c => ({
+      store.payment_providers.map((c) => ({
         // Store Type is wrong, fix
         value: c.id,
         label: c.id,
       }))
     )
     setFulfillmentOptions(
-      store.fulfillment_providers.map(c => ({
+      store.fulfillment_providers.map((c) => ({
         // Store Type is wrong, fix
         value: c.id,
         label: c.id,
@@ -48,34 +46,34 @@ const NewRegion = ({ onDone, onClick }) => {
     )
   }, [store, storeIsLoading])
 
-  const handlePaymentChange = values => {
+  const handlePaymentChange = (values) => {
     setPaymentProviders(values)
     register({ name: "payment_providers" })
     setValue(
       "payment_providers",
-      values.map(c => c.value)
+      values.map((c) => c.value)
     )
   }
 
-  const handleFulfillmentChange = values => {
+  const handleFulfillmentChange = (values) => {
     setFulfillmentProviders(values)
     register({ name: "fulfillment_providers" })
     setValue(
       "fulfillment_providers",
-      values.map(c => c.value)
+      values.map((c) => c.value)
     )
   }
 
-  const handleChange = values => {
+  const handleChange = (values) => {
     setCountries(values)
     register({ name: "countries", required: true })
     setValue(
       "countries",
-      values.map(c => c.value)
+      values.map((c) => c.value)
     )
   }
 
-  const onSave = data => {
+  const onSave = (data) => {
     if (!data.countries?.length) {
       toaster("Choose at least one country", "error")
       return
@@ -84,7 +82,7 @@ const NewRegion = ({ onDone, onClick }) => {
     createRegion.mutate(
       {
         ...data,
-        currency_code: data.currency_code.value,
+        currency_code: data.currency_code,
         tax_rate: data.tax_rate * 100,
       },
       {
@@ -95,21 +93,21 @@ const NewRegion = ({ onDone, onClick }) => {
           }
           onClick()
         },
-        onError: error => {
+        onError: (error) => {
           toaster(getErrorMessage(error), "error")
         },
       }
     )
   }
 
-  const countryOptions = countryData.map(c => ({
+  const countryOptions = countryData.map((c) => ({
     label: c.name,
     value: c.alpha2,
   }))
 
-  const handleChangeCurrency = value => {
-    setValue("currency_code", value)
-    setSelectedCurrency(value)
+  const handleChangeCurrency = (currency: string) => {
+    setValue("currency_code", currency)
+    setSelectedCurrency(currency)
   }
 
   return (
@@ -131,14 +129,11 @@ const NewRegion = ({ onDone, onClick }) => {
                   ref={register}
                   className="mb-base min-w-[335px] w-full"
                 />
-                <Select
-                  enableSearch
-                  label="Currency"
-                  name="currency_code"
-                  options={currencies}
-                  value={selectedCurrency}
+                <CurrencyInput
+                  currencyCodes={currencies}
+                  currentCurrency={selectedCurrency}
                   onChange={handleChangeCurrency}
-                  className="mb-base min-w-[335px] w-full"
+                  className="items-baseline"
                 />
                 <Input
                   className="mb-base min-w-[335px] w-full"
diff --git a/src/domain/settings/regions/shipping.tsx b/src/domain/settings/regions/shipping.tsx
index fe4111f11d..e622e730e9 100644
--- a/src/domain/settings/regions/shipping.tsx
+++ b/src/domain/settings/regions/shipping.tsx
@@ -45,7 +45,7 @@ const Shipping = ({ region }) => {
 
   const outbound = []
   const inbound = []
-  if (!loadingOptions) {
+  if (shipping_options) {
     for (const o of shipping_options) {
       if (o.is_return) {
         inbound.push(o)
@@ -63,7 +63,7 @@ const Shipping = ({ region }) => {
           <Actionables actions={outboundOptions} />
         </div>
         <div className="flex flex-col">
-          {loadingOptions ? (
+          {!shipping_options ? (
             <Flex
               flexDirection="column"
               alignItems="center"
@@ -76,8 +76,8 @@ const Shipping = ({ region }) => {
             </Flex>
           ) : (
             shipping_options
-              .filter(o => o.is_return === false && o.region_id === region.id)
-              .map(option => {
+              .filter((o) => o.is_return === false && o.region_id === region.id)
+              .map((option) => {
                 return (
                   <div key={option.id} className="mb-xsmall last:mb-0">
                     <ShippingOption
@@ -110,8 +110,8 @@ const Shipping = ({ region }) => {
             </Flex>
           ) : shipping_options ? (
             shipping_options
-              .filter(o => o.is_return && o.region_id === region.id)
-              .map(option => {
+              .filter((o) => o.is_return && o.region_id === region.id)
+              .map((option) => {
                 return (
                   <div key={option.id} className="mb-xsmall last:mb-0">
                     <ShippingOption
diff --git a/src/types/shared.ts b/src/types/shared.ts
new file mode 100644
index 0000000000..bafaf50c48
--- /dev/null
+++ b/src/types/shared.ts
@@ -0,0 +1,4 @@
+export type Option = {
+  value: string
+  label: string
+}
diff --git a/src/utils/currencies.ts b/src/utils/currencies.ts
index 229905abc0..7a3784624e 100644
--- a/src/utils/currencies.ts
+++ b/src/utils/currencies.ts
@@ -1,4 +1,4 @@
-type CurrencyType = {
+export type CurrencyType = {
   symbol: string
   name: string
   symbol_native: string
diff --git a/src/utils/prices.ts b/src/utils/prices.ts
index b739c5c66d..d69b0666aa 100644
--- a/src/utils/prices.ts
+++ b/src/utils/prices.ts
@@ -55,8 +55,10 @@ export function persistedPrice(currency: string, amount: number): number {
 /**
  * Checks the list of currencies and returns the divider/multiplier
  * that should be used to calculate the persited and display amount.
+ * @param currency
+ * @returns {number}
  */
-function getDecimalDigits(currency: string) {
+export function getDecimalDigits(currency: string) {
   const divisionDigits = currencies[currency.toUpperCase()].decimal_digits
   return Math.pow(10, divisionDigits)
 }
diff --git a/yarn.lock b/yarn.lock
index 8bfca8c9f3..1c4812649e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14361,6 +14361,11 @@ react-country-flag@^2.3.0:
   resolved "https://registry.yarnpkg.com/react-country-flag/-/react-country-flag-2.3.1.tgz#5f9ab50c8fe206f8aaa8d48f8f9c396e7ee67eea"
   integrity sha512-pG2DYhx8NPoo6FMwdtSaFonqGOPAEODVxc4ZmTaPr87DZRwhG3yFxe/KFvltDWyiHwMRdPN5Ys5li7DvVE9d3w==
 
+react-currency-input-field@^3.6.4:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/react-currency-input-field/-/react-currency-input-field-3.6.4.tgz#8063f9a445ba246063f0254ced4015210c90593a"
+  integrity sha512-0SifhqMirGt5+inzHslfbf71ZYoBt420pkMM6oBSGS40CsuPcLIOV19B1LPSCz7dWPGYi/kw5TOFQ0qALrn6Wg==
+
 react-datepicker@^3.6.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-3.8.0.tgz#c3bccd3e3f47aa66864a2fa75651be097414430b"