diff --git a/assets/rush-upgrades/rush.svg b/assets/rush-upgrades/rush.svg
new file mode 100644
index 000000000..e5ac2ce2e
--- /dev/null
+++ b/assets/rush-upgrades/rush.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V12C11 12.2652 11.1054 12.5196 11.2929 12.7071L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L13 11.5858V6Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/assets/rush-upgrades/standard.svg b/assets/rush-upgrades/standard.svg
new file mode 100644
index 000000000..3cf818fa0
--- /dev/null
+++ b/assets/rush-upgrades/standard.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4V6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6V4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V5H17V4C17 3.44772 16.5523 3 16 3C15.4477 3 15 3.44772 15 4V5H13V4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V5H9V4C9 3.44772 8.55228 3 8 3C7.44772 3 7 3.44772 7 4V5H5V4ZM16 7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V7H8H12H16ZM13 11C11.8954 11 11 11.8954 11 13V15C11 16.1046 11.8954 17 13 17H15C16.1046 17 17 16.1046 17 15V13C17 11.8954 16.1046 11 15 11H13ZM13 13H15V15H13V13Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/assets/rush-upgrades/super-rush.svg b/assets/rush-upgrades/super-rush.svg
new file mode 100644
index 000000000..12bc52789
--- /dev/null
+++ b/assets/rush-upgrades/super-rush.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8202 1.17444L12.7809 2.37532C13.9186 3.7975 14.3379 5.20075 14.299 6.54704C14.2612 7.85605 13.7915 9.02304 13.3225 9.98619C13.1649 10.3098 12.9946 10.6349 12.8386 10.9327C12.7663 11.0708 12.697 11.203 12.6335 11.3265C12.4214 11.739 12.2593 12.0804 12.1563 12.3799C12.0528 12.6806 12.0336 12.8708 12.0468 12.991C12.0567 13.0817 12.0872 13.173 12.2071 13.2929C12.4054 13.4912 12.5517 13.5469 12.6404 13.5639C12.731 13.5814 12.8515 13.5757 13.0239 13.5049C13.4095 13.3463 13.8803 12.9334 14.3743 12.314C14.8488 11.719 15.2631 11.0384 15.5634 10.4938C15.712 10.2242 15.8295 9.99387 15.9091 9.83234C15.9488 9.75168 15.979 9.6885 15.9988 9.64651L16.0205 9.59999L16.0252 9.58959L16.0259 9.58824L16.026 9.5879L16.0261 9.58776L16.0261 9.58771L16.6117 8.29169L17.6332 9.28206C19.946 11.5244 20.6617 14.7623 19.1415 17.7019C17.8195 20.2583 15.1123 22 12 22C7.60499 22 4 18.5172 4 14.1697C4 11.8793 5.26687 10.2404 6.64671 8.62914C6.82673 8.41894 7.0107 8.20711 7.19757 7.99194C8.47882 6.5167 9.89649 4.88437 11.1122 2.5397L11.8202 1.17444ZM17.1269 11.7924C16.8148 12.3321 16.4089 12.9705 15.9379 13.561C15.3851 14.2542 14.6528 14.9975 13.7846 15.3546C13.33 15.5415 12.8109 15.6335 12.2624 15.5279C11.7119 15.4219 11.2196 15.1338 10.7929 14.7071C10.3617 14.2759 10.1196 13.7664 10.0586 13.2082C10.0008 12.6794 10.1126 12.1723 10.2651 11.729C10.4181 11.2846 10.6372 10.8353 10.8549 10.412C10.9327 10.2606 11.0095 10.114 11.0856 9.96886C11.2338 9.68618 11.3792 9.40866 11.5243 9.11064C11.9559 8.22433 12.2745 7.36712 12.2998 6.48929C12.3134 6.01847 12.2432 5.51449 12.0273 4.9728C10.9109 6.77097 9.71215 8.14915 8.69763 9.31555C8.51377 9.52693 8.33596 9.73135 8.16579 9.93006C6.7748 11.5543 6 12.6877 6 14.1697C6 17.3667 8.66302 20 12 20C14.3543 20 16.3818 18.6846 17.365 16.7832C18.2267 15.1169 18.1049 13.3127 17.1269 11.7924Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/components/customization-system/customization-option.vue b/components/customization-system/customization-option.vue
index 7264e4a7f..656bc73e3 100644
--- a/components/customization-system/customization-option.vue
+++ b/components/customization-system/customization-option.vue
@@ -85,6 +85,7 @@ import SearchFieldWidget from './widgets/search-field-widget.vue';
 import TextAreaWidget from './widgets/textarea-widget.vue';
 import TextInputWidget from './widgets/text-input-widget.vue';
 import ThumbnailsListWidget from './widgets/thumbnails-list-widget.vue';
+import ProductionTimeTimelineWidget from './widgets/production-time-timeline-widget.vue';
 
 type WidgetComponent = InstanceType<typeof CardsListWidget> |
 InstanceType<typeof CheckboxWidget> |
@@ -94,7 +95,8 @@ InstanceType<typeof ImageUploadWidget> |
 InstanceType<typeof SearchFieldWidget> |
 InstanceType<typeof TextAreaWidget> |
 InstanceType<typeof TextInputWidget> |
-InstanceType<typeof ThumbnailsListWidget>;
+InstanceType<typeof ThumbnailsListWidget> |
+InstanceType<typeof ProductionTimeTimelineWidget>;
 
 const customizationWidgetBusyStateChangedEventName =
   'customization-option-busy-state-changed';
@@ -111,6 +113,7 @@ export default defineComponent({
     TextAreaWidget,
     TextInputWidget,
     ThumbnailsListWidget,
+    ProductionTimeTimelineWidget,
     ValidationProvider
   },
   props: {
diff --git a/components/customization-system/production-time-option-card.vue b/components/customization-system/production-time-option-card.vue
new file mode 100644
index 000000000..f5d812660
--- /dev/null
+++ b/components/customization-system/production-time-option-card.vue
@@ -0,0 +1,412 @@
+<template>
+  <div
+    class="production-time-option-card"
+    :class="{
+      '-selected': isSelected,
+      '-disabled': isDisabled
+    }"
+  >
+    <span class="_checkmark" aria-hidden="true">
+      <SfIcon icon="check" size="12px" color="white" />
+    </span>
+
+    <span v-if="isFastestAvailable" class="_fastest-available-badge">
+      {{ fastestAvailableTitle }}
+    </span>
+
+    <div class="_icon-wrapper" aria-hidden="true">
+      <span
+        class="_icon"
+        :style="iconStyle"
+      />
+    </div>
+
+    <div class="_content">
+      <span class="_title">
+        {{ shipTitle }}
+      </span>
+
+      <p class="_subtitle">
+        {{ optionWeeksTitle }}
+      </p>
+
+      <span
+        class="_slots-left -mobile"
+        :class="slotsLeftClasses"
+      >
+        {{ slotsLeftTitle }}
+      </span>
+    </div>
+
+    <div class="_meta">
+      <div class="_price">
+        {{ priceTitle }}
+      </div>
+
+      <span
+        class="_slots-left -desktop"
+        :class="slotsLeftClasses"
+      >
+        {{ slotsLeftTitle }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  PropType
+} from '@vue/composition-api';
+import { SfIcon } from '@storefront-ui/vue';
+import { PriceHelper } from '@vue-storefront/core/helpers';
+
+import { Currency, GET_ACTIVE_CURRENCY } from 'src/modules/currency';
+
+import rushIcon from '../../assets/rush-upgrades/rush.svg';
+import standardIcon from '../../assets/rush-upgrades/standard.svg';
+import superRushIcon from '../../assets/rush-upgrades/super-rush.svg';
+
+const oneWeekInDays = 7;
+
+function addDays (date: Date, days: number): Date {
+  const newDate = new Date(date.getTime());
+
+  newDate.setDate(newDate.getDate() + days);
+
+  return newDate;
+}
+
+function formatShortDate (date: Date): string {
+  const month = date.toLocaleString('en-US', { month: 'short' });
+
+  return `${month} ${date.getDate()}`;
+}
+
+export default defineComponent({
+  name: 'ProductionTimeOptionCard',
+  components: {
+    SfIcon
+  },
+  props: {
+    optionName: {
+      type: String,
+      required: true
+    },
+    optionValueSku: {
+      type: String,
+      required: true
+    },
+    price: {
+      type: Object as PropType<PriceHelper.ProductPrice>,
+      required: true
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    isFastestAvailable: {
+      type: Boolean,
+      default: false
+    },
+    isSelected: {
+      type: Boolean,
+      default: false
+    },
+    slotsLeft: {
+      type: Number,
+      required: true
+    },
+    turnaroundTime: {
+      type: Number,
+      required: true
+    }
+  },
+  setup (props, { root }) {
+    const selectedCurrency = computed<Currency>(() => {
+      return root.$store.getters[GET_ACTIVE_CURRENCY];
+    });
+
+    const weeks = computed<number>(() => {
+      return Math.ceil(props.turnaroundTime / oneWeekInDays);
+    });
+
+    const shipDate: ComputedRef<Date> = computed(() => {
+      return addDays(new Date(), props.turnaroundTime);
+    });
+
+    const shipTitle = computed<string>(() => {
+      return root.$t('Ships {date}', { date: formatShortDate(shipDate.value) }).toString();
+    });
+
+    const optionWeeksTitle = computed<string>(() => {
+      const title = weeks.value === 1
+        ? root.$t('{optionName} - 1 week', { optionName: props.optionName })
+        : root.$t('{optionName} - {weeks} weeks', { optionName: props.optionName, weeks: weeks.value });
+
+      return title.toString();
+    });
+
+    const iconSrc = computed<string>(() => {
+      const optionValueSku = props.optionValueSku.toLowerCase();
+
+      if (optionValueSku.includes('super_rush')) {
+        return superRushIcon;
+      }
+
+      if (optionValueSku.includes('rush')) {
+        return rushIcon;
+      }
+
+      return standardIcon;
+    });
+
+    const iconStyle = computed<Record<string, string>>(() => {
+      const iconMask = `url(${iconSrc.value}) center / contain no-repeat`;
+
+      return {
+        mask: iconMask,
+        '-webkit-mask': iconMask
+      };
+    });
+
+    const priceTitle = computed<string>(() => {
+      const finalPrice = PriceHelper.getFinalPrice(props.price);
+
+      if (finalPrice === 0) {
+        return root.$t('Free').toString();
+      }
+
+      return `+ ${PriceHelper.formatPrice(finalPrice, selectedCurrency.value.symbol)}`;
+    });
+
+    const fastestAvailableTitle = computed<string>(() => {
+      return root.$t('Fastest available').toString();
+    });
+
+    const hasInfiniteSlots = computed<boolean>(() => {
+      return !Number.isFinite(props.slotsLeft);
+    });
+
+    const isSoldOut = computed<boolean>(() => {
+      return props.slotsLeft === 0;
+    });
+
+    const slotsLeftTitle = computed<string>(() => {
+      if (hasInfiniteSlots.value) {
+        return root.$t('Always Available').toString();
+      }
+
+      if (props.slotsLeft === 0) {
+        return root.$t('Sold out').toString();
+      }
+
+      if (props.slotsLeft === 1) {
+        return root.$t('Only 1 slot left').toString();
+      }
+
+      return root.$t('Only {slotsLeft} slots left', { slotsLeft: props.slotsLeft }).toString();
+    });
+
+    const slotsLeftClasses = computed<Record<string, boolean>>(() => {
+      return {
+        '-always-available': hasInfiniteSlots.value,
+        '-sold-out': isSoldOut.value
+      };
+    });
+
+    return {
+      fastestAvailableTitle,
+      hasInfiniteSlots,
+      iconStyle,
+      isSoldOut,
+      optionWeeksTitle,
+      priceTitle,
+      shipTitle,
+      slotsLeftClasses,
+      slotsLeftTitle
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@storefront-ui/shared/styles/helpers/breakpoints";
+
+.production-time-option-card {
+  $section-gap: var(--spacer-xs);
+  $item-gap: var(--spacer-2xs);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: 23px minmax(0, 1fr) auto;
+  column-gap: var(--spacer-sm);
+  align-items: center;
+  padding: var(--spacer-sm);
+  box-sizing: border-box;
+  background: var(--c-white);
+  color: var(--c-text);
+  font-family: var(--font-family-secondary);
+  border: 1.5px solid #D2D2D2;
+
+  &.-selected {
+    background: var(--c-secondary);
+
+    ._checkmark {
+      visibility: visible;
+    }
+  }
+
+  &.-disabled {
+    ._icon {
+      background: var(--c-text-muted);
+    }
+  }
+
+  ._checkmark {
+    display: flex;
+    visibility: hidden;
+    align-items: center;
+    justify-content: center;
+    width: 23px;
+    height: 23px;
+    background: var(--c-primary);
+  }
+
+  ._fastest-available-badge {
+    position: absolute;
+    top: 0;
+    right: var(--spacer-sm);
+    z-index: 1;
+    padding: 2px var(--spacer-xs);
+    background: var(--c-primary);
+    color: var(--c-white);
+    font-size: var(--font-sm);
+    font-weight: var(--font-bold);
+    line-height: 1.2;
+    transform: translateY(-50%);
+    white-space: nowrap;
+  }
+
+  ._icon-wrapper {
+    display: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ._icon {
+    display: block;
+    width: 36px;
+    height: 36px;
+    background: var(--c-primary);
+  }
+
+  ._content {
+    display: flex;
+    flex-direction: column;
+    row-gap: $item-gap;
+    text-align: left;
+  }
+
+  ._title {
+    margin: 0;
+    font-size: var(--font-lg);
+    font-weight: var(--font-bold);
+  }
+
+  ._subtitle {
+    margin: 0;
+    color: var(--c-text-muted);
+    font-size: var(--font-base);
+  }
+
+  ._meta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    row-gap: $item-gap;
+  }
+
+  ._price {
+    color: var(--c-accent);
+    font-size: var(--font-base);
+    font-weight: var(--font-bold);
+    white-space: nowrap;
+  }
+
+  ._slots-left {
+    display: inline-block;
+    color: var(--c-warning);
+    font-size: var(--font-sm);
+    font-weight: var(--font-bold);
+    text-align: center;
+    white-space: normal;
+
+    &.-always-available,
+    &.-sold-out {
+      color: var(--c-text-muted);
+    }
+
+    &.-desktop {
+      display: none;
+    }
+
+    &.-mobile {
+      text-align: left;
+    }
+  }
+
+  @include for-desktop {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    row-gap: $section-gap;
+    width: 100%;
+    min-height: 253px;
+    padding: var(--spacer-lg) var(--spacer-sm) var(--spacer-sm);
+
+    &.-selected {
+      ._checkmark {
+        display: flex;
+      }
+    }
+
+    ._checkmark {
+      position: absolute;
+      top: var(--spacer-xs);
+      left: var(--spacer-xs);
+      display: none;
+      visibility: visible;
+    }
+
+    ._fastest-available-badge {
+      right: auto;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    ._icon-wrapper {
+      display: flex;
+    }
+
+    ._content {
+      text-align: center;
+    }
+
+    ._meta {
+      align-items: center;
+    }
+
+    ._slots-left {
+      &.-desktop {
+        display: inline-block;
+      }
+
+      &.-mobile {
+        display: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/components/customization-system/types/production-time-option-card-data.interface.ts b/components/customization-system/types/production-time-option-card-data.interface.ts
new file mode 100644
index 000000000..f53f8cc31
--- /dev/null
+++ b/components/customization-system/types/production-time-option-card-data.interface.ts
@@ -0,0 +1,9 @@
+import { PriceHelper } from '@vue-storefront/core/helpers';
+
+export interface ProductionTimeOptionCardData {
+  optionName: string,
+  optionValueSku: string,
+  price: PriceHelper.ProductPrice,
+  slotsLeft: number,
+  turnaroundTime: number
+}
diff --git a/components/customization-system/widgets/production-time-timeline-widget.vue b/components/customization-system/widgets/production-time-timeline-widget.vue
new file mode 100644
index 000000000..caf882dd7
--- /dev/null
+++ b/components/customization-system/widgets/production-time-timeline-widget.vue
@@ -0,0 +1,472 @@
+<template>
+  <div
+    class="production-time-timeline-widget"
+    :role="groupRole"
+    :aria-labelledby="ariaLabelledby"
+  >
+    <ul class="_options-list">
+      <li
+        v-for="optionValue in sortedValues"
+        :key="optionValue.id"
+        class="_option"
+        :class="{
+          '-selected': isSelected(optionValue),
+          '-disabled': isOptionValueDisabled(optionValue)
+        }"
+      >
+        <span
+          class="_timeline"
+          :class="{
+            '-selected': isSelected(optionValue),
+            '-disabled': isOptionValueDisabled(optionValue)
+          }"
+          aria-hidden="true"
+        >
+          <span class="_timeline-mark" />
+        </span>
+
+        <label class="_label">
+          <input
+            class="_input"
+            :type="inputType"
+            :name="radioInputName"
+            :value="optionValue.id"
+            :aria-describedby="ariaDescribedby"
+            :aria-invalid="ariaInvalid"
+            :disabled="isOptionValueDisabled(optionValue)"
+            @click="onInputClick(optionValue)"
+            v-model="selectedOption"
+          >
+
+          <production-time-option-card
+            class="_card"
+            :is-disabled="isOptionValueDisabled(optionValue)"
+            :is-fastest-available="isFastestAvailable(optionValue)"
+            :is-selected="isSelected(optionValue)"
+            v-bind="productionTimeOptionCardDataByOptionValueId[optionValue.id]"
+          />
+        </label>
+      </li>
+    </ul>
+
+    <div
+      :id="errorMessageId"
+      class="_error-message"
+      aria-live="polite"
+    >
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  toRefs
+} from '@vue/composition-api';
+
+import { RushAddon } from 'src/modules/budsies';
+import {
+  ListWidgetInputType,
+  OptionValue,
+  PRODUCTION_TIME_SELECTOR_STANDARD_OPTION_VALUE_ID,
+  useListWidget,
+  useOptionValuesPrice
+} from 'src/modules/customization-system';
+import { useErrorAccessibility } from 'theme/helpers/use-error-accessibility';
+
+import ProductionTimeOptionCard from '../production-time-option-card.vue';
+import { ProductionTimeOptionCardData } from '../types/production-time-option-card-data.interface';
+
+function getRushAddonForOptionValue (
+  optionValue: OptionValue,
+  standardAddon: RushAddon | undefined,
+  addonBySku: Record<string, RushAddon>
+): RushAddon | undefined {
+  if (optionValue.id === PRODUCTION_TIME_SELECTOR_STANDARD_OPTION_VALUE_ID) {
+    return standardAddon;
+  }
+
+  if (!optionValue.sku) {
+    return;
+  }
+
+  return addonBySku[optionValue.sku];
+}
+
+export default defineComponent({
+  name: 'ProductionTimeTimelineWidget',
+  components: {
+    ProductionTimeOptionCard
+  },
+  props: {
+    ariaLabelledby: {
+      type: String as PropType<string | undefined>,
+      default: undefined
+    },
+    error: {
+      type: String,
+      default: undefined
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    maxValuesCount: {
+      type: Number as PropType<number | undefined>,
+      default: undefined
+    },
+    productId: {
+      type: Number,
+      required: true
+    },
+    radioGroupName: {
+      type: String as PropType<string | undefined>,
+      default: undefined
+    },
+    value: {
+      type: [String, Array] as PropType<string | string[] | undefined>,
+      default: undefined
+    },
+    values: {
+      type: Array as PropType<OptionValue[]>,
+      default: () => []
+    }
+  },
+  setup (props, context) {
+    const { maxValuesCount, radioGroupName, value, values } = toRefs(props);
+    const hasError = computed<boolean>(() => !!props.error);
+    const listWidgetFields = useListWidget(value, maxValuesCount, context);
+    const { optionValuePriceDictionary } = useOptionValuesPrice(values, context);
+
+    const groupRole = computed<string>(() => {
+      return listWidgetFields.inputType.value === ListWidgetInputType.RADIO
+        ? 'radiogroup'
+        : 'group';
+    });
+
+    const radioInputName = computed<string | undefined>(() => {
+      return listWidgetFields.inputType.value === ListWidgetInputType.RADIO
+        ? radioGroupName.value
+        : undefined;
+    });
+
+    const productRushAddons = computed<RushAddon[]>(() => {
+      return context.root.$store.getters['budsies/getProductRushAddons'](props.productId);
+    });
+
+    const productionTimeOptionCardDataByOptionValueId = computed<Record<string, ProductionTimeOptionCardData>>(() => {
+      const dictionary: Record<string, ProductionTimeOptionCardData> = {};
+      const standardAddon = productRushAddons.value.find((addon) => !addon.id);
+      const addonBySku: Record<string, RushAddon> = {};
+
+      for (const addon of productRushAddons.value) {
+        if (addon.id) {
+          addonBySku[addon.id] = addon;
+        }
+      }
+
+      for (const optionValue of values.value) {
+        const addon = getRushAddonForOptionValue(
+          optionValue,
+          standardAddon,
+          addonBySku
+        );
+        const price = optionValuePriceDictionary.value[optionValue.id];
+
+        if (!addon || !price) {
+          continue;
+        }
+
+        dictionary[optionValue.id] = {
+          optionName: optionValue.name || addon.text,
+          optionValueSku: optionValue.sku || '',
+          price,
+          slotsLeft: typeof addon.slotsLeft === 'number' ? addon.slotsLeft : Infinity,
+          turnaroundTime: addon.turnaroundTime
+        };
+      }
+
+      return dictionary;
+    });
+
+    const sortedValues = computed<OptionValue[]>(() => {
+      const cardDataByOptionValueId = productionTimeOptionCardDataByOptionValueId.value;
+
+      return [...values.value].sort((a, b) => {
+        const firstCardData = cardDataByOptionValueId[a.id];
+        const secondCardData = cardDataByOptionValueId[b.id];
+        const firstTurnaroundTime = firstCardData && firstCardData.turnaroundTime;
+        const secondTurnaroundTime = secondCardData && secondCardData.turnaroundTime;
+
+        if (firstTurnaroundTime !== undefined && secondTurnaroundTime !== undefined) {
+          return firstTurnaroundTime - secondTurnaroundTime;
+        }
+
+        if (firstTurnaroundTime !== undefined) {
+          return -1;
+        }
+
+        if (secondTurnaroundTime !== undefined) {
+          return 1;
+        }
+
+        if (a.sn !== b.sn) {
+          return a.sn - b.sn;
+        }
+
+        return a.id.localeCompare(b.id);
+      });
+    });
+
+    const fastestAvailableOptionValueId = computed<string | undefined>(() => {
+      if (props.isDisabled) {
+        return;
+      }
+
+      const cardDataByOptionValueId = productionTimeOptionCardDataByOptionValueId.value;
+      const optionValue = sortedValues.value.find((value) => {
+        const cardData = cardDataByOptionValueId[value.id];
+
+        return !!cardData && cardData.slotsLeft !== 0;
+      });
+
+      return optionValue && optionValue.id;
+    });
+
+    function isOptionValueSoldOut (optionValue: OptionValue): boolean {
+      const cardData = productionTimeOptionCardDataByOptionValueId.value[optionValue.id];
+
+      return !!cardData && cardData.slotsLeft === 0;
+    }
+
+    function isOptionValueDisabled (optionValue: OptionValue): boolean {
+      return props.isDisabled || isOptionValueSoldOut(optionValue);
+    }
+
+    function isFastestAvailable (optionValue: OptionValue): boolean {
+      return optionValue.id === fastestAvailableOptionValueId.value;
+    }
+
+    function onInputClick (optionValue: OptionValue): void {
+      if (listWidgetFields.inputType.value !== ListWidgetInputType.RADIO) {
+        return;
+      }
+
+      if (!listWidgetFields.isSelected(optionValue)) {
+        return;
+      }
+
+      context.emit('input', undefined);
+    }
+
+    const { ariaDescribedby, ariaInvalid, errorMessageId } = useErrorAccessibility(
+      'production-time-timeline-widget',
+      hasError
+    );
+
+    return {
+      ariaDescribedby,
+      ariaInvalid,
+      errorMessageId,
+      groupRole,
+      isFastestAvailable,
+      isOptionValueDisabled,
+      onInputClick,
+      productionTimeOptionCardDataByOptionValueId,
+      radioInputName,
+      sortedValues,
+      ...listWidgetFields
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@storefront-ui/shared/styles/helpers/breakpoints";
+
+.production-time-timeline-widget {
+  $timeline-mark-size: 14px;
+  $timeline-mark-border-width: 3px;
+  $timeline-line-width: 2px;
+  $timeline-color-incomplete: var(--c-divider);
+  $timeline-color-selected: var(--c-primary);
+  $desktop-option-max-width: 15rem;
+
+  width: 100%;
+
+  ._options-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    row-gap: var(--spacer-sm);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  ._option {
+    position: relative;
+    width: 100%;
+    display: grid;
+    grid-template-columns: $timeline-mark-size 1fr;
+    column-gap: var(--spacer-sm);
+
+    &.-disabled {
+      ._label {
+        cursor: default;
+      }
+    }
+
+    &:has(._input:focus-visible) {
+      outline: var(--c-black) auto 1px;
+      outline: -webkit-focus-ring-color auto 1px;
+      outline: AccentColor auto 1px;
+      outline-offset: 2px;
+    }
+  }
+
+  ._timeline {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100%;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      left: calc(#{$timeline-mark-size} / 2 - #{$timeline-line-width} / 2);
+      width: $timeline-line-width;
+      background: $timeline-color-incomplete;
+    }
+
+    &::before {
+      top: 0;
+      bottom: calc(50% + #{$timeline-mark-size} / 2);
+    }
+
+    &::after {
+      top: calc(50% + #{$timeline-mark-size} / 2);
+      bottom: calc(0px - var(--spacer-sm));
+    }
+
+    &.-selected {
+      ._timeline-mark {
+        border-color: $timeline-color-selected;
+        background: $timeline-color-selected;
+      }
+    }
+
+    &.-disabled {
+      opacity: 0.65;
+    }
+  }
+
+  ._option:first-child {
+    ._timeline::before {
+      display: none;
+    }
+  }
+
+  ._option:last-child {
+    ._timeline::after {
+      display: none;
+    }
+  }
+
+  ._timeline-mark {
+    position: relative;
+    z-index: 1;
+    width: $timeline-mark-size;
+    height: $timeline-mark-size;
+    border: $timeline-mark-border-width solid $timeline-color-incomplete;
+    border-radius: 50%;
+    box-sizing: border-box;
+    background: var(--c-white);
+  }
+
+  ._label {
+    display: block;
+    cursor: pointer;
+  }
+
+  ._input {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+
+      + ._card {
+        opacity: 0.6;
+      }
+    }
+  }
+
+  ._card {
+    pointer-events: none;
+  }
+
+  ._error-message {
+    margin-top: var(--spacer-xs);
+    color: var(--c-danger);
+    font-size: var(--font-xs);
+  }
+
+  @include for-desktop {
+    ._options-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: var(--spacer-sm);
+      margin: 0 auto;
+    }
+
+    ._option {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      max-width: $desktop-option-max-width;
+    }
+
+    ._label {
+      display: flex;
+      justify-content: center;
+    }
+
+    ._timeline {
+      align-items: center;
+      min-height: auto;
+      margin-bottom: var(--spacer-sm);
+
+      &::before,
+      &::after {
+        top: calc(#{$timeline-mark-size} / 2 - #{$timeline-line-width} / 2);
+        bottom: auto;
+        width: calc(50% + var(--spacer-sm));
+        height: $timeline-line-width;
+      }
+
+      &::before {
+        right: 50%;
+        left: auto;
+      }
+
+      &::after {
+        right: auto;
+        left: 50%;
+      }
+    }
+  }
+}
+</style>
diff --git a/helpers/use-alteration-products-loader.ts b/helpers/use-alteration-products-loader.ts
index 9ac0eb345..a5e3cc2a6 100644
--- a/helpers/use-alteration-products-loader.ts
+++ b/helpers/use-alteration-products-loader.ts
@@ -32,20 +32,6 @@ export function useAlterationProductsLoader (
     return items;
   });
 
-  const orderItemIdToShippingCountryId = computed<Record<number, string | undefined>>(() => {
-    const mapping: Record<number, string | undefined> = {};
-
-    for (const order of orders.value) {
-      const shippingCountryId = order.shipping_address?.country_id;
-
-      for (const item of order.items) {
-        mapping[item.item_id] = shippingCountryId;
-      }
-    }
-
-    return mapping;
-  });
-
   const alterationProductSkus = computed<string[]>(() => {
     const skus = new Set<string>();
 
@@ -85,13 +71,10 @@ export function useAlterationProductsLoader (
         continue;
       }
 
-      const shippingCountryId = orderItemIdToShippingCountryId.value[orderItem.item_id];
-
       const updatedProduct = updateProductProductionTimeCustomizationData(
         product,
         root.$store,
         {
-          shippingCountryId,
           makeProductionTimeRequired: false
         }
       );
diff --git a/helpers/use-order-item-alteration-product-loader.ts b/helpers/use-order-item-alteration-product-loader.ts
index 667a41634..55b0ec9de 100644
--- a/helpers/use-order-item-alteration-product-loader.ts
+++ b/helpers/use-order-item-alteration-product-loader.ts
@@ -33,10 +33,6 @@ export function useOrderItemAlterationProductLoader (
     return orderItem.value.extension_attributes?.alteration_product?.sku;
   });
 
-  const shippingCountryId = computed<string | undefined>(() => {
-    return order.value?.shipping_address?.country_id;
-  });
-
   const productBySkuDictionary = computed<Record<string, Product>>(() => {
     return root.$store.getters['product/getProductBySkuDictionary'] || {};
   });
@@ -58,7 +54,6 @@ export function useOrderItemAlterationProductLoader (
       product,
       root.$store,
       {
-        shippingCountryId: shippingCountryId.value,
         makeProductionTimeRequired: false
       }
     );
diff --git a/resource/i18n/en-US.csv b/resource/i18n/en-US.csv
index bd424fb88..8074251cc 100644
--- a/resource/i18n/en-US.csv
+++ b/resource/i18n/en-US.csv
@@ -43,6 +43,7 @@
 "All quantity discounts applied automatically at checkout:","All quantity discounts applied automatically at checkout:"
 "Allow notification about the order","Allow notification about the order"
 "Allow order notifications","Allow order notifications"
+"Always Available","Always Available"
 "Amount","Amount"
 "An error occured while loading the component.","An error occured while loading the component."
 "Another coupon is already applied.","Another coupon is already applied."
@@ -264,6 +265,7 @@
 "Failed to load draft order item data.","Failed to load draft order item data."
 "Failed to submit Tax ID","Failed to submit Tax ID"
 "Faster checkout","Faster checkout"
+"Fastest available","Fastest available"
 "Feel free to edit any of your details below so your account is always up to date","Feel free to edit any of your details below so your account is always up to date"
 "Field is not valid","Field is not valid"
 "Field is required","Field is required"
@@ -283,6 +285,7 @@
 "Forgot the password?","Forgot the password?"
 "Forgotten password?","Forgotten password?"
 "Form components","Form components"
+"Free","Free"
 "Full rewards program benefits","Full rewards program benefits"
 "Fur Color","Fur Color"
 "General agreement","General agreement"
@@ -450,6 +453,8 @@
 "Notify Customer Support","Notify Customer Support"
 "Now you can get a custom plush lookalike of your pet from @PetsiesOfficial. Check it out! https://t.co/YxtXW7CYJQ","Now you can get a custom plush lookalike of your pet from @PetsiesOfficial. Check it out! https://t.co/YxtXW7CYJQ"
 "OK","OK"
+"Only 1 slot left","Only 1 slot left"
+"Only {slotsLeft} slots left","Only {slotsLeft} slots left"
 "Open Cart","Open Cart"
 "Open menu","Open menu"
 "Open microcart","Open microcart"
@@ -692,6 +697,7 @@
 "Shipping method","Shipping method"
 "Shipping","Shipping"
 "Ships in approx. {weeks} weeks","Ships in approx. {weeks} weeks"
+"Ships {date}","Ships {date}"
 "Shopping Cart","Shopping Cart"
 "Shopping cart is empty. Please add some products before entering Checkout","Shopping cart is empty. Please add some products before entering Checkout"
 "Shopping cart","Shopping cart"
@@ -711,6 +717,7 @@
 "Skip to download","Skip to download"
 "Social","Social"
 "Socks","Socks"
+"Sold out","Sold out"
 "Some fields are invalid","Some fields are invalid"
 "Some of the ordered products are not available!","Some of the ordered products are not available!"
 "Some products you've ordered are out of stock. Your order has been canceled.","Some products you've ordered are out of stock. Your order has been canceled."
@@ -1012,4 +1019,6 @@
 "{filesCount} images were not uploaded because the maximum number of images reached","{filesCount} images were not uploaded because the maximum number of images reached"
 "{name} Homepage","{name} Homepage"
 "{name} gift card template","{name} gift card template"
+"{optionName} - 1 week","{optionName} - 1 week"
+"{optionName} - {weeks} weeks","{optionName} - {weeks} weeks"
 "{slotsLeft} rush slots left","{slotsLeft} rush slots left"