diff --git a/src/components/Icon/Gift.vue b/src/components/Icon/Gift.vue
new file mode 100644
index 000000000..51806402d
--- /dev/null
+++ b/src/components/Icon/Gift.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10 1.7639C10.5308 1.28885 11.2316 1 12 1C13.6569 1 15 2.34315 15 4C15 4.35064 14.9398 4.68722 14.8293 5H16C17.6569 5 19 6.34315 19 8V9C19 10.3062 18.1652 11.4175 17 11.8293V16C17 17.6569 15.6569 19 14 19H6C4.34315 19 3 17.6569 3 16V11.8293C1.83481 11.4175 1 10.3062 1 9V8C1 6.34315 2.34315 5 4 5H5.17071C5.06015 4.68722 5 4.35064 5 4C5 2.34315 6.34315 1 8 1C8.76836 1 9.46924 1.28885 10 1.7639ZM11 4V5H12C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4ZM9 7H8H4C3.44772 7 3 7.44772 3 8V9C3 9.55228 3.44772 10 4 10H9V7ZM11 7H12H16C16.5523 7 17 7.44772 17 8V9C17 9.55228 16.5523 10 16 10H11V7ZM8 5H9V4C9 3.44772 8.55228 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5ZM5 12V16C5 16.5523 5.44772 17 6 17H9V12H5ZM11 17H14C14.5523 17 15 16.5523 15 16V12H11V17Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/NFTBook/GiftDialog.vue b/src/components/NFTBook/GiftDialog.vue
new file mode 100644
index 000000000..7d26525f6
--- /dev/null
+++ b/src/components/NFTBook/GiftDialog.vue
@@ -0,0 +1,127 @@
+<template>
+  <Dialog
+    :open="open"
+    panel-container-class="phone:max-w-[520px] laptop:w-[520px]"
+    panel-component="CardV2"
+    panel-class="overflow-y-scroll shadow-lg"
+    @close="$emit('close')"
+  >
+    <Label
+      preset="h2"
+      class="text-like-green"
+      :text="$t('nft_book_gift_dialog_title')"
+    >
+      <template #prepend>
+        <IconGift class="w-[32px] text-like-green" />
+      </template>
+    </Label>
+    <Label
+      class="text-dark-gray my-[12px]"
+      :text="$t('nft_book_gift_dialog_description')"
+    />
+    <hr class="w-full border-shade-gray" />
+    <form
+      class="flex flex-col w-full gap-[12px] my-[20px]"
+      @submit.prevent="submitGiftInfo"
+    >
+      <div class="flex flex-col">
+        <Label
+          preset="p6"
+          class="text-medium-gray"
+          :text="$t('nft_book_gift_dialog_label_to_email')"
+        />
+        <TextField
+          v-model="toEmail"
+          class="mt-[4px]"
+          :placeholder="$t('nft_book_gift_dialog_placeholder_to_email')"
+        />
+      </div>
+      <div class="flex flex-col">
+        <Label
+          preset="p6"
+          class="text-medium-gray"
+          :text="$t('nft_book_gift_dialog_label_to_name')"
+        />
+        <TextField
+          v-model="toName"
+          class="mt-[4px]"
+          :placeholder="$t('nft_book_gift_dialog_placeholder_to_name')"
+        />
+      </div>
+      <div class="flex flex-col justify-start">
+        <Label
+          preset="p6"
+          content-class="flex-grow-0"
+          class="text-medium-gray"
+          :text="$t('nft_book_gift_dialog_label_message')"
+        >
+          <template #append>
+            <IconMessage class="text-dark-gray" />
+          </template>
+        </Label>
+        <TextField
+          v-model="message"
+          class="mt-[4px]"
+          :is-textarea="true"
+          :placeholder="$t('nft_book_gift_dialog_placeholder_message')"
+        />
+      </div>
+      <div class="flex flex-col">
+        <Label
+          preset="p6"
+          class="text-medium-gray"
+          :text="$t('nft_book_gift_dialog_label_from_name')"
+        />
+        <TextField
+          v-model="fromName"
+          class="mt-[4px]"
+          :placeholder="$t('nft_book_gift_dialog_placeholder_from_name')"
+        />
+      </div>
+      <hr class="w-full border-shade-gray mt-[20px]" />
+      <ButtonV2
+        type="submit"
+        preset="outline"
+        class="mt-[12px]"
+        :text="$t('nft_book_gift_dialog_label_submit')"
+      />
+    </form>
+  </Dialog>
+</template>
+
+<script>
+export default {
+  name: 'NFTBookGiftDialog',
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    selectedValue: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      fromName: '',
+      toName: '',
+      toEmail: '',
+      message: '',
+    };
+  },
+  methods: {
+    submitGiftInfo() {
+      this.$emit('submit', {
+        selectedValue: this.selectedValue,
+        giftInfo: {
+          fromName: this.fromName,
+          toName: this.toName,
+          toEmail: this.toEmail,
+          message: this.message,
+        },
+      });
+    },
+  },
+};
+</script>
diff --git a/src/components/NFTEditionSelect.vue b/src/components/NFTEditionSelect.vue
index 50b7d3fea..0cd1583af 100644
--- a/src/components/NFTEditionSelect.vue
+++ b/src/components/NFTEditionSelect.vue
@@ -45,6 +45,17 @@
         />
       </template>
 
+      <ButtonV2
+        v-if="!isAllSoldOut && selectedItem.price > 0"
+        :is-disabled="!selectedItem"
+        preset="secondary"
+        :text="$t('nft_edition_select_confirm_button_text_gift')"
+        @click="handleClickGiftButton"
+      >
+        <template #prepend>
+          <IconGift class="w-[16px]" />
+        </template>
+      </ButtonV2>
       <ButtonV2
         v-if="!isAllSoldOut"
         :is-disabled="!selectedItem"
@@ -173,6 +184,9 @@ export default {
       this.$emit('change', value);
       this.$emit('update:value', value);
     },
+    handleClickGiftButton() {
+      this.$emit('click-gift', this.selectedValue);
+    },
     handleClickCollectButton() {
       this.$emit('click-collect', this.selectedValue);
     },
diff --git a/src/components/NFTViewOptionList.vue b/src/components/NFTViewOptionList.vue
index e096602b4..6ec90c030 100644
--- a/src/components/NFTViewOptionList.vue
+++ b/src/components/NFTViewOptionList.vue
@@ -42,7 +42,7 @@
         <Dropdown>
           <template #trigger="{ toggle }">
             <ButtonV2
-              class="mt-[12px] w-full"
+              class="w-full"
               preset="outline"
               :is-disabled="!isContentViewable"
               @click="toggle"
diff --git a/src/locales/en.json b/src/locales/en.json
index b966977b9..5f4610c74 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -337,12 +337,30 @@
     "LikeCoin staking"
   ],
   "month": "month",
+  "nft_book_gift_dialog_title": "Gift an eBook",
+  "nft_book_gift_dialog_description": "Send an eBook gift to your friend via email, share the joy of reading!",
+  "nft_book_gift_dialog_label_from_name": "Your Name",
+  "nft_book_gift_dialog_label_message": "Your message to the receiver",
+  "nft_book_gift_dialog_label_submit": "Checkout",
+  "nft_book_gift_dialog_label_to_email": "Email of receiver",
+  "nft_book_gift_dialog_label_to_name": "Name of receiver",
+  "nft_book_gift_dialog_placeholder_from_name": "Love",
+  "nft_book_gift_dialog_placeholder_message": "Here is a gift for you!",
+  "nft_book_gift_dialog_placeholder_to_email": "friend@example.com",
+  "nft_book_gift_dialog_placeholder_to_name": "John Smith",
+  "nft_book_gift_page_description_0": "Your eBook gift has been sent via email. You will be notified when the receiver has claimed the gift.",
+  "nft_book_gift_page_description_1": "Thank you for sharing the joy of reading!",
+  "nft_book_gift_page_view_class_button": "Return to Book",
   "nft_book_hero_replay_animation_button": "Replay Animation",
   "nft_book_hero_skip_animation_button": "Skip Animation",
   "nft_book_shelf_multiple_nft_class_dialog_title": "Please select a version",
   "nft_claim_access_nft_book": "Proceed",
   "nft_claim_claim": "Proceed",
   "nft_claim_claimed": "NFT is claimed",
+  "nft_claim_claimed_gift_title": "This book was selected by {name} as a special gift for you, hope you like it!",
+  "nft_claim_claimed_gift_toName": "To {name}:",
+  "nft_claim_claimed_gift_fromName": "—— {name}",
+  "nft_claim_claimed_download": "Or just download the eBook?",
   "nft_claim_claimed_nft_book": "You have successfully completed the required verification to claim your eBook. Please await the addition of the creator's digital signature or personalized message, after which the eBook will be delivered to you. Thank you for your valued support!",
   "nft_claim_claimed_retry_button": "Try Again",
   "nft_claim_claimed_view_button": "View Collected",
@@ -461,6 +479,7 @@
   "nft_edition_label": "Edition",
   "nft_edition_select_compare_button_text": "Compare editions",
   "nft_edition_select_confirm_button_text_collect": "Collect",
+  "nft_edition_select_confirm_button_text_gift": "Gift",
   "nft_edition_select_confirm_button_text_purchase": "Purchase",
   "nft_edition_select_notify_button_text": "Notify when available",
   "nft_featured_likenft126qja5m48w4gtz0e84w4fpsew3z0dfpqkncxc6we5x7qk2jgcuxsrz2mtk_description": "The GPT language model will fundamentally change the writing habits of the future, which will undoubtedly impact literature, which is based on language. Writers and lovers of literature are thus forced to rethink \"what is literature\" and attempt to define its uniqueness by focusing on what AI cannot do, but...",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index 268fd7bf6..caae72e18 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -337,19 +337,37 @@
     "委託 LikeCoin"
   ],
   "month": "月",
+  "nft_book_gift_dialog_title": "贈送電子書",
+  "nft_book_gift_dialog_description": "贈送電子書給親朋好友，分享閲讀的喜悦。",
+  "nft_book_gift_dialog_label_from_name": "署名",
+  "nft_book_gift_dialog_label_message": "給收禮者的信息",
+  "nft_book_gift_dialog_label_submit": "發送",
+  "nft_book_gift_dialog_label_to_email": "收禮者的電郵地址",
+  "nft_book_gift_dialog_label_to_name": "收禮者的名字",
+  "nft_book_gift_dialog_placeholder_from_name": "祝英台",
+  "nft_book_gift_dialog_placeholder_message": "推薦這本書給你！",
+  "nft_book_gift_dialog_placeholder_to_email": "friend@example.com",
+  "nft_book_gift_dialog_placeholder_to_name": "梁山伯",
+  "nft_book_gift_page_description_0": "你的電子書禮物已經經電郵發送。收件人領取電子書後將會有電郵通知你。",
+  "nft_book_gift_page_description_1": "感謝你分享閲讀的喜悦。",
+  "nft_book_gift_page_view_class_button": "返回書頁",
   "nft_book_hero_replay_animation_button": "重播動畫",
   "nft_book_hero_skip_animation_button": "略過動畫",
   "nft_book_shelf_multiple_nft_class_dialog_title": "請選擇版本",
   "nft_claim_access_nft_book": "下一步",
   "nft_claim_claim": "下一步",
   "nft_claim_claimed": "已領取 NFT",
+  "nft_claim_claimed_gift_title": "這本書籍是由 {name} 精心挑選，特別贈送給你的，希望你會喜歡！",
+  "nft_claim_claimed_gift_toName": "給 {name} :",
+  "nft_claim_claimed_gift_fromName": "—— {name}",
+  "nft_claim_claimed_download": "想先睹為快？",
   "nft_claim_claimed_nft_book": "已完成驗證。請候作者簽署及發送電子書，大約需 1-3 天時間。感謝支持！",
   "nft_claim_claimed_retry_button": "再試一次",
   "nft_claim_claimed_view_button": "檢視收藏",
   "nft_claim_claimed_view_class_button": "檢視詳情",
   "nft_claim_claiming": "正在驗證",
   "nft_claim_class_not_found": "找不到 NFT Class",
-  "nft_claim_enter_address_label": "輸入錢包地址以加進書架",
+  "nft_claim_enter_address_label": "輸入錢包地址以將這本書加進書架",
   "nft_claim_enter_address_placeholder": "like1.... 或登入以獲取地址",
   "nft_claim_error_message": "加進書架時出現錯誤：{error}",
   "nft_claim_error_message_unknown": "加進書架時出現不明錯誤",
@@ -462,6 +480,7 @@
   "nft_edition_select_compare_button_text": "比較不同版本",
   "nft_edition_select_confirm_button_text_collect": "收集",
   "nft_edition_select_confirm_button_text_purchase": "購買",
+  "nft_edition_select_confirm_button_text_gift": "送書",
   "nft_edition_select_notify_button_text": "有貨時通知我",
   "nft_featured_likenft126qja5m48w4gtz0e84w4fpsew3z0dfpqkncxc6we5x7qk2jgcuxsrz2mtk_description": "GPT語言模型將會徹底改變未來的書寫習慣，這對以語言為本體的文學肯定會造成衝擊。 文學創作者和愛好者也因此被迫重新思考「文學是甚麼」，嘗試以AI做不到的事情來定義文學的獨特之處，但是……",
   "nft_featured_likenft126qja5m48w4gtz0e84w4fpsew3z0dfpqkncxc6we5x7qk2jgcuxsrz2mtk_title": "AI與文學究竟是對立，還是共生？🤖",
diff --git a/src/pages/nft/claim/index.vue b/src/pages/nft/claim/index.vue
index f9be0346f..a35371dd4 100644
--- a/src/pages/nft/claim/index.vue
+++ b/src/pages/nft/claim/index.vue
@@ -27,162 +27,218 @@
     <MobileStickyCard
       class="flex flex-col justify-center items-center w-full laptop:max-w-[400px] mx-auto py-[1.5rem]"
     >
-      <NFTViewOptionList
-        v-if="canViewContentDirectly"
-        class="mb-[2rem]"
-        :url="externalUrl"
-        :class-id="classId"
-        :content-urls="iscnContentUrls"
-        :iscn-url="iscnUrl"
-        :is-nft-book="nftIsNFTBook"
-        :is-content-viewable="true"
-        :is-content-downloadable="isContentDownloadable"
-        @view-content-url="handleClickViewContentDirectly"
-      />
-      <template v-if="!claimingAddress">
-        <template v-if="walletIsLoggingIn">
-          <ProgressIndicator />
+      <template v-if="giftInfo && state === 'GIFTING'">
+        <div class="flex flex-col mt-[12px] mb-[18px]">
           <Label
-            class="text-medium-gray w-full mt-[4px]"
-            preset="p6"
+            class="text-like-green"
+            :text="
+              $t('nft_claim_claimed_gift_title', { name: giftInfo.fromName })
+            "
+          >
+            <template #prepend>
+              <IconGift class="w-[32px]" />
+            </template>
+          </Label>
+        </div>
+        <div
+          class="w-full flex flex-col gap-[8px] px-[12px] py-[8px] rounded-[12px] bg-shade-gray"
+        >
+          <Label
+            class="text-dark-gray"
+            :text="
+              $t('nft_claim_claimed_gift_toName', { name: giftInfo.toName })
+            "
+          />
+          <Label
+            class="text-dark-gray"
             align="center"
-            :text="$t('auth_required_view_hint_label_loading')"
+            :text="giftInfo.message"
+          />
+          <Label
+            class="text-medium-gray mt-[8px]"
+            align="right"
+            :text="
+              $t('nft_claim_claimed_gift_fromName', { name: giftInfo.fromName })
+            "
           />
-        </template>
-        <template v-else>
-          <template v-if="isFreePurchase">
-            <template v-if="state === 'INITIAL'">
+        </div>
+        <ButtonV2
+          class="self-center mt-[24px]"
+          :text="$t('nft_claim_claim')"
+          preset="secondary"
+          @click="handleClickNext"
+        />
+      </template>
+      <template v-else>
+        <div v-if="!claimingAddress" class="w-full">
+          <template v-if="walletIsLoggingIn">
+            <ProgressIndicator />
+            <Label
+              class="text-medium-gray w-full mt-[4px]"
+              preset="p6"
+              align="center"
+              :text="$t('auth_required_view_hint_label_loading')"
+            />
+          </template>
+          <template v-else>
+            <template v-if="isFreePurchase">
+              <div
+                v-if="state === 'INITIAL'"
+                class="flex flex-col justify-center w-full"
+              >
+                <Label
+                  class="text-medium-gray"
+                  preset="p6"
+                  :text="$t('nft_free_claim_email_label')"
+                  align="center"
+                />
+                <div
+                  class="flex w-full py-[10px] px-[16px] gap-[12px] bg-shade-gray rounded-[12px]"
+                >
+                  <input
+                    v-model="claimingFreeEmail"
+                    class="w-full bg-transparent border-0 focus-visible:outline-none"
+                    :placeholder="$t('nft_free_claim_enter_email')"
+                    type="email"
+                  />
+                </div>
+                <div class="flex justify-center w-full">
+                  <ButtonV2
+                    class="self-center mt-[24px]"
+                    :text="$t('nft_free_claim_claim')"
+                    preset="secondary"
+                    @click="startFreePurchase"
+                  />
+                </div>
+              </div>
               <Label
+                v-else
                 class="text-medium-gray"
                 preset="p6"
-                :text="$t('nft_free_claim_email_label')"
+                :text="$t('nft_free_claim_check_email_label')"
                 align="center"
               />
-              <div
-                class="flex w-full py-[10px] px-[16px] gap-[12px] bg-shade-gray rounded-[12px]"
-              >
-                <input
-                  v-model="claimingFreeEmail"
-                  class="w-full bg-transparent border-0 focus-visible:outline-none"
-                  :placeholder="$t('nft_free_claim_enter_email')"
-                  type="email"
+            </template>
+            <div v-else class="flex flex-col justify-center w-full">
+              <Label
+                class="text-medium-gray"
+                preset="p6"
+                :text="$t('nft_claim_enter_address_label')"
+                align="center"
+              />
+              <div class="flex justify-center w-full gap-[12px] mt-[6px]">
+                <div
+                  class="flex w-full py-[10px] px-[16px] gap-[12px] bg-shade-gray rounded-[12px]"
+                >
+                  <input
+                    v-model="claimingAddressInput"
+                    class="w-full bg-transparent border-0 focus-visible:outline-none"
+                    :placeholder="$t('nft_claim_enter_address_placeholder')"
+                    type="input"
+                  />
+                </div>
+                <ButtonV2
+                  v-if="!claimingAddressInput"
+                  class="flex-shrink-0"
+                  :text="$t('settings_page_content_with_auth_login_button')"
+                  preset="secondary"
+                  @click="onClickLogin"
                 />
               </div>
               <ButtonV2
                 class="self-center mt-[24px]"
-                :text="$t('nft_free_claim_claim')"
+                :text="
+                  $t(
+                    nftIsNFTBook && nftMustClaimToView
+                      ? 'nft_claim_access_nft_book'
+                      : 'nft_claim_claim'
+                  )
+                "
                 preset="secondary"
-                @click="startFreePurchase"
+                :is-disabled="
+                  !claimingAddressInput || !isValidAddress(claimingAddressInput)
+                "
+                @click="onEnterClaimingAddress"
               />
-            </template>
-            <Label
-              v-else
-              class="text-medium-gray"
-              preset="p6"
-              :text="$t('nft_free_claim_check_email_label')"
-              align="center"
-            />
+            </div>
           </template>
-          <template v-else>
+        </div>
+        <div v-else class="flex flex-col justify-center w-full">
+          <Label v-if="text" class="mb-[16px]" :text="text" align="center" />
+          <template v-if="state === 'INITIAL'">
             <Label
-              class="text-medium-gray"
               preset="p6"
-              :text="$t('nft_claim_enter_address_label')"
-              align="center"
+              class="text-medium-gray mb-[6px]"
+              :text="$t('nft_collect_modal_leave_message')"
             />
-            <div class="flex justify-center w-full gap-[12px] mt-[6px]">
-              <div
-                class="flex w-full py-[10px] px-[16px] gap-[12px] bg-shade-gray rounded-[12px]"
-              >
-                <input
-                  v-model="claimingAddressInput"
-                  class="w-full bg-transparent border-0 focus-visible:outline-none"
-                  :placeholder="$t('nft_claim_enter_address_placeholder')"
-                  type="input"
-                />
-              </div>
-              <ButtonV2
-                v-if="!claimingAddressInput"
-                class="flex-shrink-0"
-                :text="$t('settings_page_content_with_auth_login_button')"
-                preset="secondary"
-                @click="onClickLogin"
+            <div
+              class="flex w-full py-[10px] px-[16px] gap-[12px] bg-shade-gray rounded-[12px]"
+            >
+              <IconMessage class="text-dark-gray" />
+              <input
+                v-model="collectorMessage"
+                class="w-full bg-transparent border-0 focus-visible:outline-none"
+                :placeholder="
+                  $t('nft_collect_modal_leave_message_to_name', {
+                    name: creatorDisplayName,
+                  })
+                "
+                type="input"
+                @input.once="onInputCollectorMessage"
               />
             </div>
             <ButtonV2
               class="self-center mt-[24px]"
-              :text="
-                $t(
-                  nftIsNFTBook && nftMustClaimToView
-                    ? 'nft_claim_access_nft_book'
-                    : 'nft_claim_claim'
-                )
-              "
+              :text="$t('nft_claim_claim')"
               preset="secondary"
-              :is-disabled="
-                !claimingAddressInput || !isValidAddress(claimingAddressInput)
-              "
-              @click="onEnterClaimingAddress"
+              @click="claim"
             />
           </template>
-        </template>
-      </template>
-      <template v-else>
-        <Label v-if="text" class="mb-[16px]" :text="text" align="center" />
-        <template v-if="state === 'INITIAL'">
-          <Label
-            preset="p6"
-            class="text-medium-gray mb-[6px]"
-            :text="$t('nft_collect_modal_leave_message')"
+          <ProgressIndicator
+            v-else-if="state === 'CLAIMING'"
+            class="self-center"
           />
-          <div
-            class="flex w-full py-[10px] px-[16px] gap-[12px] bg-shade-gray rounded-[12px]"
-          >
-            <IconMessage class="text-dark-gray" />
-            <input
-              v-model="collectorMessage"
-              class="w-full bg-transparent border-0 focus-visible:outline-none"
-              :placeholder="
-                $t('nft_collect_modal_leave_message_to_name', {
-                  name: creatorDisplayName,
-                })
-              "
-              type="input"
-              @input.once="onInputCollectorMessage"
+          <template v-else-if="state === 'CLAIMED'">
+            <ButtonV2
+              v-if="nftId"
+              :text="$t('nft_claim_claimed_view_button')"
+              preset="tertiary"
+              @click="handleClickView"
             />
-          </div>
+            <ButtonV2
+              v-else
+              :text="$t('nft_claim_claimed_view_class_button')"
+              preset="tertiary"
+              @click="handleClickViewClass"
+            />
+          </template>
+
           <ButtonV2
-            class="self-center mt-[24px]"
-            :text="$t('nft_claim_claim')"
-            preset="secondary"
-            @click="claim"
+            v-else-if="state === 'ERROR'"
+            :text="$t('nft_claim_claimed_retry_button')"
+            preset="outline"
+            @click="handleClickRetry"
           />
-        </template>
-        <ProgressIndicator
-          v-else-if="state === 'CLAIMING'"
-          class="self-center"
-        />
-        <template v-else-if="state === 'CLAIMED'">
-          <ButtonV2
-            v-if="nftId"
-            :text="$t('nft_claim_claimed_view_button')"
-            preset="tertiary"
-            @click="handleClickView"
+        </div>
+        <div
+          v-if="canViewContentDirectly"
+          class="flex items-center justify-center gap-[4px] mt-[18px]"
+        >
+          <Label
+            class="text-medium-gray text-[12px]"
+            :text="$t('nft_claim_claimed_download')"
           />
-          <ButtonV2
-            v-else
-            :text="$t('nft_claim_claimed_view_class_button')"
-            preset="tertiary"
-            @click="handleClickViewClass"
+          <NFTViewOptionList
+            :url="externalUrl"
+            :class-id="classId"
+            :content-urls="iscnContentUrls"
+            :iscn-url="iscnUrl"
+            :is-nft-book="nftIsNFTBook"
+            :is-content-viewable="true"
+            :is-content-downloadable="isContentDownloadable"
+            @view-content-url="handleClickViewContentDirectly"
           />
-        </template>
-
-        <ButtonV2
-          v-else-if="state === 'ERROR'"
-          :text="$t('nft_claim_claimed_retry_button')"
-          preset="outline"
-          @click="handleClickRetry"
-        />
+        </div>
       </template>
     </MobileStickyCard>
   </main>
@@ -210,6 +266,7 @@ import nftMixin from '~/mixins/nft';
 import walletMixin from '~/mixins/wallet';
 
 const NFT_CLAIM_STATE = {
+  GIFTING: 'GIFTING',
   INITIAL: 'INITIAL',
   CLAIMING: 'CLAIMING',
   CLAIMED: 'CLAIMED',
@@ -253,6 +310,7 @@ export default {
       claimingAddressInput: '',
       claimingAddress: '',
       claimingFreeEmail: '',
+      giftInfo: null,
     };
   },
   computed: {
@@ -322,20 +380,24 @@ export default {
   },
   async mounted() {
     const { redirect, free, from, ...query } = this.$route.query;
-    if (!free && redirect && query.type === 'nft_book') {
-      let price;
-      try {
-        const { data } = await this.$api.get(
-          getNFTBookPaymentStatusEndpoint({
-            classId: this.classId,
-            paymentId: this.paymentId,
-          })
-        );
-        ({ price } = data);
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.error(err);
+    let price;
+    try {
+      const { data } = await this.$api.get(
+        getNFTBookPaymentStatusEndpoint({
+          classId: this.classId,
+          paymentId: this.paymentId,
+        })
+      );
+      ({ price } = data);
+      this.giftInfo = data.giftInfo;
+      if (this.giftInfo) {
+        this.state = NFT_CLAIM_STATE.GIFTING;
       }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+    }
+    if (!free && redirect && query.type === 'nft_book') {
       logPurchaseFlowEvent(this, 'purchase', {
         items: [
           {
@@ -582,6 +644,9 @@ export default {
     handleClickViewContentDirectly(e, contentUrl, type) {
       logTrackerEvent(this, 'NFT', 'ClaimViewContentDirect', this.classId, 1);
     },
+    handleClickNext() {
+      this.state = NFT_CLAIM_STATE.INITIAL;
+    },
   },
 };
 </script>
diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
index 6ca86b961..ce3531a7c 100644
--- a/src/pages/nft/class/_classId/index.vue
+++ b/src/pages/nft/class/_classId/index.vue
@@ -79,6 +79,7 @@
                 :value="defaultSelectedValue"
                 @change="handleEditionSelectChange"
                 @click-collect="handleCollectFromEditionSelector"
+                @click-gift="handleGiftFromEditionSelector"
                 @click-compare="handleClickCompareItemsButton"
               />
             </template>
@@ -290,6 +291,12 @@
         </section>
       </div>
     </div>
+    <NFTBookGiftDialog
+      :open="isGiftDialogOpen"
+      :selected-value="giftSelectedValue"
+      @submit="handleGiftSubmit"
+      @close="() => (isGiftDialogOpen = false)"
+    />
   </Page>
 </template>
 
@@ -328,6 +335,9 @@ export default {
       isTransferring: false,
       isCollecting: false,
 
+      isGiftDialogOpen: false,
+      giftSelectedValue: 0,
+
       trimmedCount: 10,
     };
   },
@@ -877,7 +887,7 @@ export default {
       );
       return this.handleCollect();
     },
-    async handleCollectFromEdition(selectedValue) {
+    async handleCollectFromEdition(selectedValue, giftInfo = undefined) {
       const editions = this.getNFTBookStorePricesByClassId(this.classId) || {};
       const edition = editions[selectedValue];
       const hasStock = edition?.stock;
@@ -911,7 +921,8 @@ export default {
               },
             })
           );
-        } else if (edition.price > 0 && this.nftPriceInLIKE > 0) {
+          // gift does not support LIKE payment for now
+        } else if (!giftInfo && edition.price > 0 && this.nftPriceInLIKE > 0) {
           await this.initIfNecessary();
           if (this.hasConnectedWallet) {
             logPurchaseFlowEvent(
@@ -929,9 +940,16 @@ export default {
             classId: this.classId,
             priceIndex: edition.index,
             platform: this.platform,
+          });
+          const { url } = await this.$axios.$post(link, {
             gaClientId,
+            giftInfo,
           });
-          window.open(link, '_blank', 'noopener');
+          if (url) {
+            window.location.href = url;
+          } else {
+            throw new Error('Failed to get purchase link');
+          }
         }
       } else if (this.nftIsCollectable) {
         this.handleGotoCollectFromControlBar();
@@ -947,6 +965,28 @@ export default {
         1
       );
     },
+    async handleGiftSubmit({ selectedValue, giftInfo }) {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'nft_class_details_gift_submit',
+        this.classId,
+        1
+      );
+      await this.handleCollectFromEdition(selectedValue, giftInfo);
+      this.isGiftDialogOpen = false;
+    },
+    handleGiftFromEditionSelector(selectedValue) {
+      this.giftSelectedValue = selectedValue;
+      this.isGiftDialogOpen = true;
+      logTrackerEvent(
+        this,
+        'NFT',
+        'nft_class_details_edition_selector_gift',
+        this.classId,
+        1
+      );
+    },
     async handleCollectFromEditionCompareTable(selectedValue) {
       await this.handleCollectFromEdition(selectedValue);
       logTrackerEvent(
diff --git a/src/pages/nft/gift/index.vue b/src/pages/nft/gift/index.vue
new file mode 100644
index 000000000..d24d6108a
--- /dev/null
+++ b/src/pages/nft/gift/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <main>
+    <div class="w-full max-w-[400px] mx-auto p-[1rem] laptop:p-0 pt-0">
+      <NFTWidgetBaseCard>
+        <NuxtLink
+          :to="
+            localeLocation({ name: 'nft-class-classId', params: { classId } })
+          "
+          target="_blank"
+        >
+          <NFTWidgetContentPreview
+            :class="[
+              'transition-shadow',
+              'cursor-pointer',
+              'min-h-[300px]',
+              'w-full',
+            ]"
+            :title="NFTName"
+            :description="NFTDescription"
+            :img-src="NFTImageUrl"
+            @click="handleClickViewDetails"
+          />
+        </NuxtLink>
+      </NFTWidgetBaseCard>
+    </div>
+
+    <MobileStickyCard
+      class="flex flex-col justify-center items-center w-full laptop:max-w-[400px] mx-auto py-[1.5rem]"
+    >
+      <IconGift class="w-[32px] mb-[8px] text-dark-gray" />
+      <Label
+        class="text-medium-gray w-full my-[4px]"
+        preset="p6"
+        align="center"
+        :text="$t('nft_book_gift_page_description_0')"
+      />
+      <Label
+        class="text-medium-gray w-full my-[4px]"
+        preset="p6"
+        align="center"
+        :text="$t('nft_book_gift_page_description_1')"
+      />
+      <ButtonV2
+        class="my-[8px]"
+        :text="$t('nft_book_gift_page_view_class_button')"
+        preset="tertiary"
+        @click="handleClickViewClass"
+      />
+    </MobileStickyCard>
+  </main>
+</template>
+
+<script>
+import { logTrackerEvent } from '~/util/EventLogger';
+import { getNFTClassCollectionType, nftClassCollectionType } from '~/util/nft';
+
+import nftMixin from '~/mixins/nft';
+
+export default {
+  name: 'NFTGiftSuccessPage',
+  mixins: [nftMixin],
+  async asyncData({ query, store, error, i18n }) {
+    const { class_id: classId } = query;
+    if (!classId) {
+      error({ statusCode: 400, message: i18n.t('nft_gift_missing_qs') });
+      return;
+    }
+    try {
+      await store.dispatch('lazyGetNFTClassMetadata', classId);
+      const classCollectionType = getNFTClassCollectionType(
+        store.getters.getNFTClassMetadataById(classId)
+      );
+      if (classCollectionType === nftClassCollectionType.NFTBook) {
+        await store.dispatch('fetchNFTBookInfoByClassId', classId);
+      }
+    } catch (err) {
+      error({ statusCode: 404, message: i18n.t('nft_gift_class_not_found') });
+    }
+  },
+  data() {
+    return {
+      priceIndex: this.$route.query.price_index,
+    };
+  },
+  computed: {
+    classId() {
+      return this.$route.query.class_id;
+    },
+  },
+  methods: {
+    handleClickViewDetails() {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'nft_gift_view_details_clicked',
+        this.classId,
+        1
+      );
+    },
+    handleClickViewClass() {
+      logTrackerEvent(this, 'NFT', 'nft_gift_view_class_button_clicked', '', 1);
+      this.$router.push(
+        this.localeLocation({
+          name: 'nft-class-classId',
+          params: {
+            classId: this.classId,
+          },
+        })
+      );
+    },
+  },
+};
+</script>