diff --git a/components/ShippingRates/InfoModal.vue b/components/ShippingRates/InfoModal.vue
new file mode 100644
index 000000000..e2e2d5049
--- /dev/null
+++ b/components/ShippingRates/InfoModal.vue
@@ -0,0 +1,188 @@
+<template>
+  <UModal :model-value="modelValue">
+    <UCard :ui="{ header: { base: 'font-bold font-mono' } }">
+      <template #header>
+        <div class="flex justify-between items-center">
+          {{ modalTitle }}
+          <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-x-mark-20-solid"
+            @click="closeModal"
+          />
+        </div>
+      </template>
+
+      <component
+        :is="hasMultipleShippingRates ? 'ul' : 'div'"
+        v-if="shippingRates.length"
+        class="space-y-4"
+      >
+        <component
+          :is="hasMultipleShippingRates ? 'li' : 'div'"
+          v-for="(s, index) in shippingRates"
+          :key="s.index"
+        >
+          <UCard
+            :ui="{
+              body: { base: 'space-y-4' },
+              footer: { base: 'flex justify-end items-center' },
+            }"
+          >
+            <UFormGroup
+              label="Name of this shipping option"
+              :ui="{ container: 'space-y-2' }"
+            >
+              <UInput
+                :value="s.nameEn"
+                placeholder="Shipping option name"
+                :disabled="isViewMode"
+                @input="(e) => handleInputShippingRates(e, 'nameEn', index)"
+              />
+              <UInput
+                placeholder="運送選項名稱"
+                :value="s.nameZh"
+                :disabled="isViewMode"
+                @input="(e) => handleInputShippingRates(e, 'nameZh', index)"
+              />
+            </UFormGroup>
+
+            <UFormGroup label="Price(USD) of this shipping option">
+              <UInput
+                :value="s.price"
+                type="number"
+                step="0.01"
+                :min="0"
+                :disabled="isViewMode"
+                @input="(e) => handleInputShippingRates(e, 'price', index)"
+              />
+            </UFormGroup>
+
+            <template v-if="hasMultipleShippingRates && isEditMode" #footer>
+              <UButton
+                label="Delete"
+                variant="outline"
+                color="red"
+                @click="deleteShippingRate(index)"
+              />
+            </template>
+          </UCard>
+        </component>
+        <div class="flex justify-center">
+          <UButton
+            v-if="isEditMode"
+            label="Add Options"
+            variant="outline"
+            icon="i-heroicons-plus-20-solid"
+            @click="addMoreShippingRate"
+          />
+        </div>
+      </component>
+      <div v-else class="flex justify-center items-center w-full gap-[8px] py-[36px]">
+        <span>
+          No items
+        </span>
+        <UButton
+          v-if="isEditMode"
+          label="Add Options"
+          variant="outline"
+          icon="i-heroicons-plus-20-solid"
+          @click="addMoreShippingRate"
+        />
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end items-center">
+          <UButton v-if="isEditMode" label="Save" @click="handleOnSave" />
+          <div v-else class="flex justify-end items-center">
+            <UButton
+              label="Set Shipping Options"
+              variant="outline"
+              @click="updateShippingRates"
+            >
+              <template #trailing>
+                <UIcon name="i-heroicons-arrow-right-20-solid" />
+              </template>
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { v4 as uuidv4 } from 'uuid'
+
+definePageMeta({ layout: 'page' })
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  shippingInfo: {
+    type: Array,
+    default: () => []
+  }
+})
+const emit = defineEmits(['update:modelValue', 'on-update-shipping-rates'])
+const isEditMode = computed(() => !isReadOnlyMode.value)
+const isViewMode = computed(() => isReadOnlyMode.value)
+const modalTitle = computed(() =>
+  isEditMode.value ? 'Editing Shipping Options' : 'Shipping Options Info'
+)
+const shippingRates = ref<any[]>(
+  props.shippingInfo.length
+    ? props.shippingInfo.map((option: any) => ({
+      price: option.priceInDecimal / 100,
+      nameEn: option.name?.en,
+      nameZh: option.name?.zh
+    }))
+    : []
+)
+const hasMultipleShippingRates = computed(() => shippingRates.value.length > 1)
+const isReadOnlyMode = ref(props.readOnly)
+
+function closeModal () {
+  emit('update:modelValue', false)
+}
+
+function updateShippingRates () {
+  isReadOnlyMode.value = false
+}
+
+function handleInputShippingRates (e: InputEvent, key: string, index: number) {
+  shippingRates.value[index][key] = (e.target as HTMLInputElement)?.value
+}
+
+function addMoreShippingRate () {
+  if (!shippingRates.value.length) {
+    shippingRates.value.push({
+      index: uuidv4(),
+      price: 10,
+      nameEn: 'Standard Shipping',
+      nameZh: '標準寄送'
+    })
+    return
+  }
+  shippingRates.value.push({
+    index: uuidv4(),
+    price: 20,
+    nameEn: 'International Shipping',
+    nameZh: '國際寄送'
+  })
+}
+
+function deleteShippingRate (index: number) {
+  shippingRates.value.splice(index, 1)
+}
+
+function handleOnSave () {
+  emit('on-update-shipping-rates', shippingRates.value.map((option:any) => ({ name: { en: option.nameEn, zh: option.nameZh }, priceInDecimal: Math.round(Number(option.price) * 100) })))
+  closeModal()
+}
+</script>
diff --git a/components/ShippingRates/index.vue b/components/ShippingRates/index.vue
new file mode 100644
index 000000000..968cb3081
--- /dev/null
+++ b/components/ShippingRates/index.vue
@@ -0,0 +1,160 @@
+<template>
+  <UCard :ui="{ body: { padding: '' } }">
+    <template #header>
+      <div class="flex flex-row justify-between items-center">
+        <div class="flex justify-start items-center gap-[8px]">
+          <h3 class="font-bold font-mono">
+            Shipping Options
+          </h3>
+          <slot name="header" />
+        </div>
+        <UButton
+          v-if="!shouldHideViewButtonOnViewMode"
+          :icon="buttonConfig.icon"
+          :label="buttonConfig.text"
+          :loading="isLoading"
+          @click="buttonConfig.action"
+        />
+      </div>
+    </template>
+
+    <UTable
+      v-if="isEditMode"
+      :columns="[
+        { key: 'index' },
+        { key: 'name', label: 'Name' },
+        { key: 'price', label: 'Price (USD)' },
+      ]"
+      :rows="shippingRatesTableRows"
+    >
+      <template #name-data="{ row }">
+        <div class="flex flex-col gap-[8px] items-start">
+          <span class="text-center">en: {{ row.name.en }}</span>
+          <span class="text-center">zh: {{ row.name.zh }}</span>
+        </div>
+      </template>
+      <template #price-data="{ row }">
+        <span class="text-center">{{ row.price }}</span>
+      </template>
+    </UTable>
+
+    <div v-else class="px-[24px] py-[12px]">
+      <UFormGroup
+        label="Physical Goods"
+        :ui="{ label: { base: 'font-mono font-bold' } }"
+      >
+        <div class="flex flex-col gap-[16px]">
+          <UCheckbox
+            v-model="hasShipping"
+            name="hasShipping"
+            label="Includes physical good that requires shipping"
+            :disabled="!shippingInfo.length"
+          />
+          <UAlert
+            v-if="!shippingInfo.length"
+            icon="i-heroicons-face-frown-solid"
+            color="yellow"
+            variant="solid"
+            title="Please set the shipping options first to enable this feature."
+          />
+        </div>
+      </UFormGroup>
+    </div>
+    <ShippingRatesInfoModal
+      v-if="isShippingModalOpened"
+      v-model="isShippingModalOpened"
+      :read-only="isModalReadOnly"
+      :shipping-info="shippingInfo"
+      @on-update-shipping-rates="
+        (value) => emit('on-update-shipping-rates', value)"
+    />
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  shippingInfo: {
+    type: Array,
+    default: () => []
+  },
+  modelValue: {
+    type: Boolean
+  },
+  isNewListingPage: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['update:modelValue', 'on-update-shipping-rates'])
+const isShippingModalOpened = ref<Boolean>(false)
+
+const hasShipping = ref(props.modelValue)
+const isModalReadOnly = ref(props.readOnly)
+watch(() => props.modelValue, (newValue) => {
+  hasShipping.value = newValue
+})
+watch(hasShipping, (hasShipping) => {
+  emit('update:modelValue', hasShipping)
+})
+const isEditMode = computed(() => !(props.readOnly))
+const isViewMode = computed(() => (props.readOnly))
+const shouldHideViewButtonOnViewMode = computed(() => Boolean(isViewMode.value && props.isNewListingPage))
+const buttonConfig = computed(() => {
+  if (isEditMode.value) {
+    if (props.shippingInfo.length) {
+      return {
+        icon: 'i-heroicons-pencil-square',
+        text: 'Edit',
+        action: handleOpenShippingModal
+      }
+    } else {
+      return {
+        icon: 'i-heroicons-plus-20-solid',
+        text: 'Add',
+        action: handleOpenShippingModal
+      }
+    }
+  } else if (isViewMode.value) {
+    if (props.shippingInfo.length) {
+      return {
+        icon: 'i-heroicons-eye-20-solid',
+        text: 'View Current Shipping Options',
+        action: handleOpenShippingModal
+      }
+    } else {
+      return {
+        icon: 'i-heroicons-plus-20-solid',
+        text: 'Add Shipping Options',
+        action: handleOpenEditModal
+      }
+    }
+  }
+})
+const shippingRatesTableRows = computed(() => {
+  if (!props.shippingInfo.length) {
+    return []
+  }
+  return props.shippingInfo.map((r: any, index: number) => ({
+    index: index + 1,
+    name: r.name,
+    price: r.priceInDecimal / 100
+  }))
+})
+
+function handleOpenShippingModal () {
+  isShippingModalOpened.value = true
+}
+
+function handleOpenEditModal () {
+  isModalReadOnly.value = false
+  isShippingModalOpened.value = true
+}
+</script>
diff --git a/pages/nft-book-store/collection/new.vue b/pages/nft-book-store/collection/new.vue
index 3cbf35ea6..540a7ca85 100644
--- a/pages/nft-book-store/collection/new.vue
+++ b/pages/nft-book-store/collection/new.vue
@@ -108,62 +108,21 @@
             <UInput v-model="price.stock" type="number" step="0.01" :min="0" />
           </UFormGroup>
 
-          <UCard
-            :ui="{
-              divide: isStripeConnectChecked ? undefined : '',
-              header: { base: 'flex flex-wrap justify-between items-center gap-2' },
-              body: { padding: isStripeConnectChecked ? undefined : '', base: 'grid lg:grid-cols-2 gap-4' }
-            }"
+          <ShippingRates
+            :read-only="false"
+            :shipping-info="shippingRates"
+            :is-new-listing-page="true"
+            @on-update-shipping-rates="updateShippingRate"
           >
             <template #header>
-              <h3 class="font-bold font-mono">
-                Physical Goods
-              </h3>
-
-              <UCheckbox
-                v-model="price.hasShipping"
-                label="Includes physical good that requires shipping"
-              />
+              <span class="text-[14px] text-gray-500">
+                (Includes physical good that requires shipping)
+              </span>
             </template>
-          </UCard>
+          </ShippingRates>
         </div>
       </div>
 
-      <UCard
-        v-if="hasShipping"
-        :ui="{
-          divide: isStripeConnectChecked ? undefined : '',
-          header: { base: 'flex flex-wrap justify-between items-center gap-2' },
-          body: { padding: isStripeConnectChecked ? undefined : '', base: 'grid lg:grid-cols-2 gap-4' }
-        }"
-      >
-        <template #header>
-          <h3 class="font-bold font-mono">
-            Shipping Options and Prices
-          </h3>
-
-          <UButton
-            label="Add Option"
-            variant="outline"
-            @click="addMoreShippingRate"
-          />
-        </template>
-
-        <component :is="hasMultipleShippingRates ? 'ul' : 'div'">
-          <component :is="hasMultipleShippingRates ? 'li' : 'div'" v-for="s, index in shippingRates" :key="s.index" class="space-y-2 px-5 py-4">
-            <UDivider v-if="index > 0" />
-            <UFormGroup label="Price(USD) of this shipping option">
-              <UInput :value="s.price" type="number" step="0.01" :min="0" @input="e => updateShippingRate(e, 'price', index)" />
-            </UFormGroup>
-
-            <UFormGroup label="Name of this shipping option" :ui="{ container: 'space-y-2' }">
-              <UInput placeholder="Shipping option name" :value="s.nameEn" @input="e => updateShippingRate(e, 'nameEn', index)" />
-              <UInput placeholder="運送選項名稱" :value="s.nameZh" @input="e => updateShippingRate(e, 'nameZh', index)" />
-            </UFormGroup>
-          </component>
-        </component>
-      </UCard>
-
       <UCard
         :ui="{
           divide: isStripeConnectChecked ? undefined : '',
@@ -349,7 +308,6 @@ import { MdEditor, ToolbarNames, config } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 import DOMPurify from 'dompurify'
 
-import { v4 as uuidv4 } from 'uuid'
 import { LCD_URL, LIKE_CO_API } from '~/constant'
 import { useBookStoreApiStore } from '~/stores/book-store-api'
 import { useWalletStore } from '~/stores/wallet'
@@ -395,13 +353,7 @@ const price = ref({
   stock: Number(route.query.count as string || 1),
   hasShipping: false
 })
-const shippingRates = ref<any[]>([{
-  price: 10.0,
-  nameEn: 'Standard Shipping',
-  nameZh: '標準寄送'
-}])
-const hasShipping = computed(() => price.value.hasShipping)
-const hasMultipleShippingRates = computed(() => shippingRates.value.length > 1)
+const shippingRates = ref<any[]>([])
 const moderatorWallets = ref<string[]>([])
 const moderatorWalletsGrants = ref<any>({})
 const notificationEmails = ref<string[]>([])
@@ -508,17 +460,8 @@ function addMoreClassId () {
   classIdInput.value = ''
 }
 
-function updateShippingRate (e: InputEvent, key: string, index: number) {
-  shippingRates.value[index][key] = (e.target as HTMLInputElement)?.value
-}
-
-function addMoreShippingRate () {
-  shippingRates.value.push({
-    index: uuidv4(),
-    price: 20,
-    nameEn: 'International Shipping',
-    nameZh: '國際寄送'
-  })
+function updateShippingRate (options: any) {
+  shippingRates.value = options
 }
 
 function addModeratorWallet () {
@@ -542,7 +485,7 @@ function formatPrice (price: any) {
   return {
     priceInDecimal: Math.round(Number(price.price) * 100),
     stock: Number(price.stock),
-    hasShipping: price.hasShipping || false
+    hasShipping: Boolean(price.hasShipping || shippingRates.value.length || false)
   }
 }
 
@@ -606,7 +549,7 @@ async function submitNewCollection () {
           [stripeConnectWallet.value]: 100
         }
       : null
-    const s = hasShipping.value
+    const s = shippingRates.value.length
       ? shippingRates.value
         .map(rate => ({
           name: { en: rate.nameEn, zh: rate.nameZh },
diff --git a/pages/nft-book-store/collection/status/[collectionId].vue b/pages/nft-book-store/collection/status/[collectionId].vue
index 16c524eeb..8d7fd465c 100644
--- a/pages/nft-book-store/collection/status/[collectionId].vue
+++ b/pages/nft-book-store/collection/status/[collectionId].vue
@@ -22,7 +22,12 @@
 
     <template v-if="bookStoreApiStore.isAuthenticated">
       <UCard :ui="{ body: { padding: '' } }">
-        <UFormGroup label="Books in Collection">
+        <template #header>
+          <h3 class="font-bold font-mono">
+            Books in Collection
+          </h3>
+        </template>
+        <UFormGroup>
           <UTable
             :columns="[{ key: 'classId', label: 'Class ID' }, { key: 'name', label: 'Book Name'}]"
             :rows="collectionListingInfo?.classIds?.map((classId, index) => ({ index, classId, name: getClassMetadataById(classId)?.name }))"
@@ -60,29 +65,12 @@
         </table>
       </UCard>
 
-      <UCard
-        v-if="collectionListingInfo.shippingRates"
-        :ui="{ body: { padding: '' } }"
-      >
-        <template #header>
-          <h3 class="font-bold font-mono">
-            Shipping Options
-          </h3>
-        </template>
-
-        <UTable
-          :columns="[
-            { key: 'index', },
-            { key: 'name', label: 'Name' },
-            { key: 'price', label: 'Price (USD)' },
-          ]"
-          :rows="shippingRatesTableRows"
-        >
-          <template #price-data="{ row }">
-            <span class="text-right">{{ row.price }}</span>
-          </template>
-        </UTable>
-      </UCard>
+      <ShippingRates
+        :read-only="false"
+        :is-loading="isUpdatingShippingRates"
+        :shipping-info="collectionListingInfo.shippingRates"
+        @on-update-shipping-rates="updateShippingRates"
+      />
 
       <UCard :ui="{ body: { padding: '' } }">
         <template #header>
@@ -511,6 +499,7 @@ const activeCoupon = ref('')
 const collectionListingInfo = ref<any>({})
 const ordersData = ref<any>({})
 const connectStatus = ref<any>({})
+const isUpdatingShippingRates = ref(false)
 
 // Search
 const searchInput = ref('')
@@ -591,17 +580,6 @@ const couponsTableRows = computed(() => {
   }))
 })
 
-const shippingRatesTableRows = computed(() => {
-  if (!collectionListingInfo.value.shippingRates) {
-    return []
-  }
-  return collectionListingInfo.value.shippingRates.map((r: any, index: number) => ({
-    index: index + 1,
-    name: r.name,
-    price: r.priceInDecimal / 100
-  }))
-})
-
 const orderTableColumns = computed(() => {
   const columns = [
     { key: 'actions', label: 'Actions', sortable: false },
@@ -951,6 +929,21 @@ async function updateSettings () {
   }
 }
 
+async function updateShippingRates (value: any) {
+  isUpdatingShippingRates.value = true
+  try {
+    await updateNFTBookCollectionById(collectionId.value as string, {
+      shippingRates: value
+    })
+    collectionListingInfo.value = (await collectionStore.fetchCollectionById(collectionId.value as string)).value
+  } catch (err) {
+    const errorData = (err as any).data || err
+    error.value = errorData
+  } finally {
+    isUpdatingShippingRates.value = false
+  }
+}
+
 async function copyPurchaseLink () {
   await navigator.clipboard.writeText(purchaseLink.value)
   toast.add({
diff --git a/pages/nft-book-store/collection/status/[collectionId]/edit.vue b/pages/nft-book-store/collection/status/[collectionId]/edit.vue
index 173817ccb..157d0ae1c 100644
--- a/pages/nft-book-store/collection/status/[collectionId]/edit.vue
+++ b/pages/nft-book-store/collection/status/[collectionId]/edit.vue
@@ -84,22 +84,11 @@
           :sanitize="sanitizeHtml"
         />
 
-        <UCard
-          :ui="{
-            divide: '',
-            header: { base: 'flex flex-wrap justify-between items-center gap-2' },
-            body: { padding: '' },
-            footer: { base: 'grid lg:grid-cols-2 gap-4' },
-          }"
-        >
-          <template #header>
-            <h3 class="font-bold font-mono">
-              Physical Goods
-            </h3>
-
-            <UCheckbox v-model="hasShipping" label="Includes physical good that requires shipping" />
-          </template>
-        </UCard>
+        <ShippingRates
+          v-model="hasShipping"
+          :read-only="true"
+          :shipping-info="shippingRates"
+        />
 
         <template #footer>
           <UButton label="Save Changes" :loading="isLoading" size="lg" :disabled="isLoading" @click="handleSubmit" />
@@ -138,6 +127,7 @@ const descriptionEn = ref('')
 const descriptionZh = ref('')
 const image = ref('')
 const hasShipping = ref(false)
+const shippingRates = ref<any[]>([])
 
 const toolbarOptions = ref<string[]>([
   'bold',
@@ -186,6 +176,7 @@ onMounted(async () => {
     descriptionEn.value = collectionListingInfo.value.description?.en || ' '
     descriptionZh.value = collectionListingInfo.value.description?.zh || ' '
     hasShipping.value = collectionListingInfo.value.hasShipping || false
+    shippingRates.value = collectionListingInfo.value.shippingRates || []
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error(error)
diff --git a/pages/nft-book-store/new.vue b/pages/nft-book-store/new.vue
index 11d34d9c9..6bd9dd14c 100644
--- a/pages/nft-book-store/new.vue
+++ b/pages/nft-book-store/new.vue
@@ -42,10 +42,18 @@
           <UInput
             :value="`${totalStock}`"
             :readonly="true"
+            disabled
           />
         </UFormGroup>
       </UCard>
 
+      <ShippingRates
+        :read-only="false"
+        :is-new-listing-page="true"
+        :shipping-info="shippingRates"
+        @on-update-shipping-rates="updateShippingRate"
+      />
+
       <UCard :ui="{ header: { base: 'flex justify-between items-center gap-2' } }">
         <template #header>
           <h3 class="font-bold font-mono">
@@ -122,64 +130,16 @@
             :sanitize="sanitizeHtml"
           />
 
-          <UButton v-if="hasMultiplePrices" label="Delete" color="red" @click="deletePrice(index)" />
-
-          <UCard
-            :ui="{
-              divide: isStripeConnectChecked ? undefined : '',
-              header: { base: 'flex flex-wrap justify-between items-center gap-2' },
-              body: { padding: isStripeConnectChecked ? undefined : '', base: 'grid lg:grid-cols-2 gap-4' }
-            }"
-          >
-            <template #header>
-              <h3 class="font-bold font-mono">
-                Physical Goods
-              </h3>
-
-              <UCheckbox
-                :value="hasShipping"
-                label="Includes physical good that requires shipping"
-                @input="e => updatePrice(e, 'hasShipping', index)"
-              />
-            </template>
-          </UCard>
-        </component>
-      </component>
-
-      <UCard
-        v-if="hasShipping"
-        :ui="{
-          divide: isStripeConnectChecked ? undefined : '',
-          header: { base: 'flex flex-wrap justify-between items-center gap-2' },
-          body: { padding: isStripeConnectChecked ? undefined : '', base: 'grid lg:grid-cols-2 gap-4' }
-        }"
-      >
-        <template #header>
-          <h3 class="font-bold font-mono">
-            Shipping Options and Prices
-          </h3>
-
-          <UButton
-            label="Add Option"
-            variant="outline"
-            @click="addMoreShippingRate"
+          <ShippingRates
+            v-model="p.hasShipping"
+            :read-only="true"
+            :is-new-listing-page="true"
+            :shipping-info="shippingRates"
           />
-        </template>
 
-        <component :is="hasMultipleShippingRates ? 'ul' : 'div'">
-          <component :is="hasMultipleShippingRates ? 'li' : 'div'" v-for="s, index in shippingRates" :key="s.index" class="space-y-2 px-5 py-4">
-            <UDivider v-if="index > 0" />
-            <UFormGroup label="Price(USD) of this shipping option">
-              <UInput :value="s.price" type="number" step="0.01" :min="0" @input="e => updateShippingRate(e, 'price', index)" />
-            </UFormGroup>
-
-            <UFormGroup label="Name of this shipping option" :ui="{ container: 'space-y-2' }">
-              <UInput placeholder="Shipping option name" :value="s.nameEn" @input="e => updateShippingRate(e, 'nameEn', index)" />
-              <UInput placeholder="運送選項名稱" :value="s.nameZh" @input="e => updateShippingRate(e, 'nameZh', index)" />
-            </UFormGroup>
-          </component>
+          <UButton v-if="hasMultiplePrices" label="Delete" color="red" @click="deletePrice(index)" />
         </component>
-      </UCard>
+      </component>
 
       <UCard
         :ui="{
@@ -435,16 +395,11 @@ const prices = ref<any[]>([{
   nameEn: 'Standard Edition',
   nameZh: '標準版',
   descriptionEn: '',
-  descriptionZh: ''
-}])
-const shippingRates = ref<any[]>([{
-  price: 10.0,
-  nameEn: 'Standard Shipping',
-  nameZh: '標準寄送'
+  descriptionZh: '',
+  hasShipping: false
 }])
+const shippingRates = ref<any[]>([])
 const hasMultiplePrices = computed(() => prices.value.length > 1)
-const hasShipping = computed(() => prices.value.find(p => p.hasShipping))
-const hasMultipleShippingRates = computed(() => shippingRates.value.length > 1)
 const priceItemLabel = computed(() => hasMultiplePrices.value ? 'edition' : 'book')
 const moderatorWallets = ref<string[]>([])
 const moderatorWalletsGrants = ref<any>({})
@@ -612,7 +567,8 @@ function addMorePrice () {
     nameEn: `Tier ${nextPriceIndex.value}`,
     nameZh: `級別 ${nextPriceIndex.value}`,
     descriptionEn: '',
-    descriptionZh: ''
+    descriptionZh: '',
+    hasShipping: false
   })
 }
 
@@ -620,17 +576,8 @@ function deletePrice (index: number) {
   prices.value.splice(index, 1)
 }
 
-function updateShippingRate (e: InputEvent, key: string, index: number) {
-  shippingRates.value[index][key] = (e.target as HTMLInputElement)?.value
-}
-
-function addMoreShippingRate () {
-  shippingRates.value.push({
-    index: uuidv4(),
-    price: 20,
-    nameEn: 'International Shipping',
-    nameZh: '國際寄送'
-  })
+function updateShippingRate (options: any) {
+  shippingRates.value = options
 }
 
 function addModeratorWallet () {
@@ -664,7 +611,7 @@ function sanitizeHtml (html: string) {
 
 function mapPrices (prices:any) {
   return prices
-    .map(p => ({
+    .map((p: any) => ({
       name: { en: p.nameEn, zh: p.nameZh },
       description: {
         en: escapeHtml(p.descriptionEn),
@@ -714,7 +661,7 @@ async function submitNewClass () {
     }
 
     const p = mapPrices(prices.value)
-    if (p.find(price => price.price !== 0 && price.price < MINIMAL_PRICE)) {
+    if (p.find((price: any) => price.price !== 0 && price.price < MINIMAL_PRICE)) {
       throw new Error(`Price of each edition must be at least $${MINIMAL_PRICE} or free`)
     }
     await checkStripeConnect()
@@ -724,12 +671,12 @@ async function submitNewClass () {
           [stripeConnectWallet.value]: 100
         }
       : null
-    const s = hasShipping.value
+    const s = shippingRates.value.length
       ? shippingRates.value
         .map(rate => ({
-          name: { en: rate.nameEn, zh: rate.nameZh },
-          priceInDecimal: Math.round(Number(rate.price) * 100),
-          price: Number(rate.price)
+          name: { en: rate.name.en, zh: rate.name.zh },
+          priceInDecimal: rate.priceInDecimal,
+          price: rate.priceInDecimal / 100
         }))
       : undefined
 
diff --git a/pages/nft-book-store/status/[classId].vue b/pages/nft-book-store/status/[classId].vue
index e5cbe1bc5..38f52cd43 100644
--- a/pages/nft-book-store/status/[classId].vue
+++ b/pages/nft-book-store/status/[classId].vue
@@ -55,7 +55,7 @@
             <div class="flex justify-center">
               <UButton
                 icon="i-heroicons-plus-circle"
-                label="New Listing"
+                label="New Edition"
                 :to="{
                   name: 'nft-book-store-status-classId-edit-new',
                   params: { classId },
@@ -154,29 +154,12 @@
         </table>
       </UCard>
 
-      <UCard
-        v-if="classListingInfo.shippingRates"
-        :ui="{ body: { padding: '' } }"
-      >
-        <template #header>
-          <h3 class="font-bold font-mono">
-            Shipping Options
-          </h3>
-        </template>
-
-        <UTable
-          :columns="[
-            { key: 'index', },
-            { key: 'name', label: 'Name' },
-            { key: 'price', label: 'Price (USD)' },
-          ]"
-          :rows="shippingRatesTableRows"
-        >
-          <template #price-data="{ row }">
-            <span class="text-right">{{ row.price }}</span>
-          </template>
-        </UTable>
-      </UCard>
+      <ShippingRates
+        :read-only="false"
+        :is-loading="isUpdatingShippingRates"
+        :shipping-info="classListingInfo.shippingRates"
+        @on-update-shipping-rates="updateShippingRates"
+      />
 
       <UCard :ui="{ body: { padding: '' } }">
         <template #header>
@@ -594,7 +577,6 @@
         </QRCode>
       </UCard>
     </template>
-
     <NuxtPage :transition="false" />
   </main>
 </template>
@@ -631,6 +613,7 @@ const prices = ref<any[]>([])
 const isUpdatingPricesOrder = ref(false)
 const ordersData = ref<any>({})
 const connectStatus = ref<any>({})
+const isUpdatingShippingRates = ref(false)
 
 // Search
 const searchInput = ref('')
@@ -711,18 +694,6 @@ const couponsTableRows = computed(() => {
     discount: (value as any).discount
   }))
 })
-
-const shippingRatesTableRows = computed(() => {
-  if (!classListingInfo.value.shippingRates) {
-    return []
-  }
-  return classListingInfo.value.shippingRates.map((r: any, index: number) => ({
-    index: index + 1,
-    name: r.name,
-    price: r.priceInDecimal / 100
-  }))
-})
-
 const orderTableColumns = computed(() => {
   const columns = [
     { key: 'actions', label: 'Actions', sortable: false },
@@ -1140,6 +1111,29 @@ async function updateSettings () {
   }
 }
 
+async function updateShippingRates (value: any) {
+  isUpdatingShippingRates.value = true
+  try {
+    await updateBookListingSetting(classId.value as string, {
+      shippingRates: value
+    })
+    const { data: classData } = await useFetch(
+      `${LIKE_CO_API}/likernft/book/store/${classId.value}`,
+      {
+        headers: {
+          authorization: `Bearer ${token.value}`
+        }
+      }
+    )
+    classListingInfo.value = classData.value
+  } catch (err) {
+    const errorData = (err as any).data || err
+    error.value = errorData
+  } finally {
+    isUpdatingShippingRates.value = false
+  }
+}
+
 async function copyPurchaseLink () {
   await navigator.clipboard.writeText(purchaseLink.value)
   toast.add({
diff --git a/pages/nft-book-store/status/[classId]/edit/[editionIndex].vue b/pages/nft-book-store/status/[classId]/edit/[editionIndex].vue
index fea721e5f..f5fee2ce9 100644
--- a/pages/nft-book-store/status/[classId]/edit/[editionIndex].vue
+++ b/pages/nft-book-store/status/[classId]/edit/[editionIndex].vue
@@ -90,25 +90,13 @@
           :sanitize="sanitizeHtml"
         />
 
-        <UCard
-          :ui="{
-            divide: '',
-            header: { base: 'flex flex-wrap justify-between items-center gap-2' },
-            body: { padding: '' },
-            footer: { base: 'grid lg:grid-cols-2 gap-4' },
-          }"
-        >
-          <template #header>
-            <h3 class="font-bold font-mono">
-              Physical Goods
-            </h3>
-
-            <UCheckbox
-              v-model="hasShipping"
-              label="Includes physical good that requires shipping"
-            />
-          </template>
-        </UCard>
+        <ShippingRates
+          v-model="hasShipping"
+          :read-only="true"
+          :shipping-info="shippingRates"
+          :is-loading="isUpdatingShippingRates"
+          @on-update-shipping-rates="updateShippingRates"
+        />
 
         <template #footer>
           <UButton
@@ -129,7 +117,6 @@ import { storeToRefs } from 'pinia'
 import { MdEditor, config } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 import DOMPurify from 'dompurify'
-
 import { LIKE_CO_API } from '~/constant'
 
 import { useBookStoreApiStore } from '~/stores/book-store-api'
@@ -142,6 +129,7 @@ const bookStoreApiStore = useBookStoreApiStore()
 const { connect } = walletStore
 const { wallet, signer } = storeToRefs(walletStore)
 const { token } = storeToRefs(bookStoreApiStore)
+const { updateBookListingSetting } = bookStoreApiStore
 
 const router = useRouter()
 const route = useRoute()
@@ -167,6 +155,8 @@ const descriptionEn = ref('')
 const descriptionZh = ref('')
 const hasShipping = ref(false)
 const isPhysicalOnly = ref(false)
+const shippingRates = ref<any[]>([])
+const isUpdatingShippingRates = ref(false)
 const oldStock = ref(0)
 const oldIsAutoDeliver = ref(false)
 
@@ -227,6 +217,7 @@ onMounted(async () => {
 
     const classResData = classRes?.data?.value
     if (classResData) {
+      shippingRates.value = classResData?.shippingRates || []
       if (classResData?.ownerWallet !== wallet.value) {
         throw new Error('NOT_OWNER_OF_NFT_CLASS')
       }
@@ -243,7 +234,7 @@ onMounted(async () => {
         const legacyDescription = typeof currentEdition.description === 'string' ? currentEdition.description : undefined
         descriptionEn.value = currentEdition.description?.en || legacyDescription || ' '
         descriptionZh.value = currentEdition.description?.zh || legacyDescription || ' '
-        hasShipping.value = currentEdition.hasShipping || false
+        hasShipping.value = !!(currentEdition.hasShipping) || false
         isPhysicalOnly.value = currentEdition.isPhysicalOnly || false
 
         oldStock.value = currentEdition.stock
@@ -286,6 +277,29 @@ function handleClickBack () {
   })
 }
 
+async function updateShippingRates (value: any) {
+  isUpdatingShippingRates.value = true
+  try {
+    await updateBookListingSetting(classId.value as string, {
+      shippingRates: value
+    })
+    const { data: classData } = await useFetch(
+      `${LIKE_CO_API}/likernft/book/store/${classId.value}`,
+      {
+        headers: {
+          authorization: `Bearer ${token.value}`
+        }
+      }
+    )
+    shippingRates.value = classData.value?.shippingRates || []
+  } catch (err) {
+    const errorData = (err as any).data || err
+    error.value = errorData
+  } finally {
+    isUpdatingShippingRates.value = false
+  }
+}
+
 async function handleSubmit () {
   try {
     const editedPrice = {
diff --git a/pages/nft-book-store/status/[classId]/edit/new.vue b/pages/nft-book-store/status/[classId]/edit/new.vue
index 31477694a..95749ed8c 100644
--- a/pages/nft-book-store/status/[classId]/edit/new.vue
+++ b/pages/nft-book-store/status/[classId]/edit/new.vue
@@ -89,25 +89,13 @@
           :sanitize="sanitizeHtml"
         />
 
-        <UCard
-          :ui="{
-            divide: '',
-            header: { base: 'flex flex-wrap justify-between items-center gap-2' },
-            body: { padding: '' },
-            footer: { base: 'grid lg:grid-cols-2 gap-4' },
-          }"
-        >
-          <template #header>
-            <h3 class="font-bold font-mono">
-              Physical Goods
-            </h3>
-
-            <UCheckbox
-              v-model="hasShipping"
-              label="Includes physical good that requires shipping"
-            />
-          </template>
-        </UCard>
+        <ShippingRates
+          v-model="hasShipping"
+          :read-only="true"
+          :shipping-info="shippingRates"
+          :is-loading="isUpdatingShippingRates"
+          @on-update-shipping-rates="updateShippingRates"
+        />
 
         <template #footer>
           <UButton
@@ -141,6 +129,7 @@ const bookStoreApiStore = useBookStoreApiStore()
 const { connect } = walletStore
 const { wallet, signer } = storeToRefs(walletStore)
 const { token } = storeToRefs(bookStoreApiStore)
+const { updateBookListingSetting } = bookStoreApiStore
 
 const router = useRouter()
 const route = useRoute()
@@ -165,6 +154,9 @@ const nameZh = ref('標準版')
 const descriptionEn = ref('')
 const descriptionZh = ref('')
 const hasShipping = ref(false)
+const shippingRates = ref<any[]>([])
+const isUpdatingShippingRates = ref(false)
+
 const priceItemLabel = computed(() => hasMultiplePrices.value ? 'edition' : 'book')
 
 const toolbarOptions = [
@@ -207,6 +199,7 @@ onMounted(async () => {
 
     const classResData = classRes?.data?.value
     if (classResData) {
+      shippingRates.value = classResData.shippingRates
       if (classResData?.ownerWallet !== wallet.value) {
         throw new Error('NOT_OWNER_OF_NFT_CLASS')
       }
@@ -247,6 +240,29 @@ function handleClickBack () {
   })
 }
 
+async function updateShippingRates (value: any) {
+  isUpdatingShippingRates.value = true
+  try {
+    await updateBookListingSetting(classId.value as string, {
+      shippingRates: value
+    })
+    const { data: classData } = await useFetch(
+      `${LIKE_CO_API}/likernft/book/store/${classId.value}`,
+      {
+        headers: {
+          authorization: `Bearer ${token.value}`
+        }
+      }
+    )
+    shippingRates.value = classData.value?.shippingRates || []
+  } catch (err) {
+    const errorData = (err as any).data || err
+    error.value = errorData
+  } finally {
+    isUpdatingShippingRates.value = false
+  }
+}
+
 async function handleSubmit () {
   try {
     const editedPrice = {