diff --git a/components/common/shoppingCart/utils.ts b/components/common/shoppingCart/utils.ts
index 0a26a181fe..e6edf56fdf 100644
--- a/components/common/shoppingCart/utils.ts
+++ b/components/common/shoppingCart/utils.ts
@@ -91,13 +91,14 @@ export const nftToListingCartItem = (
   }
 }
 
-export const nftToOfferItem = (nft: NFT & TokenId): MakingOfferItem => {
+export const nftToOfferItem = (nft: NFT & TokenId, highestOffer?: string): MakingOfferItem => {
   const { urlPrefix } = usePrefix()
 
   return {
     id: nft.id,
     name: nameWithIndex(nft.name, nft.sn),
     price: nft.price ?? '0',
+    highestOffer,
     urlPrefix: urlPrefix.value,
     collection: nft.collection,
     metadata: nft.metadata,
diff --git a/components/gallery/GalleryItem.vue b/components/gallery/GalleryItem.vue
index cec1e90bac..92677d1db2 100644
--- a/components/gallery/GalleryItem.vue
+++ b/components/gallery/GalleryItem.vue
@@ -166,7 +166,10 @@
               v-if="nft && isAssetHub"
               :nft="nft"
             />
-            <GalleryItemAction :nft="nft" />
+            <GalleryItemAction
+              :nft="nft"
+              :highest-offer="nftHighestOffer"
+            />
             <UnlockableTag
               v-if="isUnlockable && !isMobile"
               :link="unlockLink"
@@ -259,6 +262,7 @@ const {
   nftAnimationMimeType,
   nftMimeType,
   nftResources,
+  nftHighestOffer,
 } = galleryItem
 const collection = computed(() => nft.value?.collection)
 
diff --git a/components/gallery/GalleryItemAction/GalleryItemAction.vue b/components/gallery/GalleryItemAction/GalleryItemAction.vue
index b4ccd70561..a1b4105a4a 100644
--- a/components/gallery/GalleryItemAction/GalleryItemAction.vue
+++ b/components/gallery/GalleryItemAction/GalleryItemAction.vue
@@ -7,8 +7,10 @@
     />
     <!-- make offer -->
     <GalleryItemOffer
-      v-if="offerVisible(urlPrefix) && !isOwner && nft"
+      v-if="offerVisible(urlPrefix) && nft"
+      :hide-action-button="isOwner"
       :nft="nft"
+      :highest-offer="highestOffer"
       class="mt-2"
     />
 
@@ -34,11 +36,13 @@ import GalleryItemOffer from './GalleryItemActionType/GalleryItemOffer.vue'
 import GalleryItemPriceRelist from './GalleryItemActionType/GalleryItemRelist.vue'
 import GalleryItemPriceTransfer from './GalleryItemActionType/GalleryItemTransfer.vue'
 import { listVisible, offerVisible } from '@/utils/config/permission.config'
+import type { NFTOffer } from '@/composables/useNft'
 
 import type { NFT } from '@/components/rmrk/service/scheme'
 
 const props = defineProps<{
   nft: NFT | undefined
+  highestOffer: NFTOffer | undefined
 }>()
 
 const { urlPrefix } = usePrefix()
diff --git a/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue b/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue
index 7d36d0a382..c8e654c639 100644
--- a/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue
+++ b/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue
@@ -1,14 +1,21 @@
 <template>
-  <div class="flex justify-end gallery-item-offer">
-    <NeoButton
-      :label="$t('transaction.offer')"
-      variant="k-blue"
-      size="large"
-      class="w-[calc(10rem+55px)]"
-      @click="openOfferModal"
-    />
-    <MakeOffer />
-  </div>
+  <GalleryItemPriceSection
+    :title="$t('offer.highestOffer')"
+    :price="highestOfferPrice"
+    class="mt-4"
+  >
+    <div class="flex justify-end gallery-item-offer">
+      <NeoButton
+        v-if="!hideActionButton"
+        :label="$t('transaction.offer')"
+        variant="k-blue"
+        size="large"
+        class="w-[calc(10rem+55px)]"
+        @click="onMakeOfferClick"
+      />
+      <MakeOffer />
+    </div>
+  </GalleryItemPriceSection>
 </template>
 
 <script setup lang="ts">
@@ -18,22 +25,40 @@ import { nftToOfferItem } from '@/components/common/shoppingCart/utils'
 import { usePreferencesStore } from '@/stores/preferences'
 import { useMakingOfferStore } from '@/stores/makeOffer'
 import MakeOffer from '@/components/offer/MakeOffer.vue'
+import GalleryItemPriceSection from '@/components/gallery/GalleryItemAction/GalleryItemActionSection.vue'
+import type { NFTOffer } from '@/composables/useNft'
 
 const props = defineProps<{
   nft: NFT
+  highestOffer?: NFTOffer
+  hideActionButton?: boolean
 }>()
-
 const preferencesStore = usePreferencesStore()
 const makeOfferStore = useMakingOfferStore()
+const { doAfterLogin } = useDoAfterlogin()
+const { isCurrentOwner } = useAuth()
+const isOwner = computed(() => isCurrentOwner(props.nft?.currentOwner))
+
+const highestOfferPrice = computed(() => props.highestOffer?.price || '')
 
 const openOfferModal = () => {
   makeOfferStore.clear()
-  const item = nftToOfferItem(props.nft)
+  const item = nftToOfferItem(props.nft, highestOfferPrice.value)
   makeOfferStore.setItem(item)
 
   preferencesStore.setMakeOfferModalOpen(true)
 }
 
+const onMakeOfferClick = () => {
+  doAfterLogin({
+    onLoginSuccess: () => {
+      if (!isOwner.value) {
+        openOfferModal()
+      }
+    },
+  })
+}
+
 useModalIsOpenTracker({
   isOpen: computed(() => preferencesStore.makeOfferModalOpen),
   onChange: () => makeOfferStore.clear(),
diff --git a/components/gallery/useGalleryItem.ts b/components/gallery/useGalleryItem.ts
index 59bca6ff6c..d801a6079e 100644
--- a/components/gallery/useGalleryItem.ts
+++ b/components/gallery/useGalleryItem.ts
@@ -5,7 +5,7 @@ import { getNftMetadata } from '@/composables/useNft'
 import useSubscriptionGraphql from '@/composables/useSubscriptionGraphql'
 import { getCloudflareMp4 } from '@/services/imageWorker'
 import type { NFT } from '@/components/rmrk/service/scheme'
-import type { NFTWithMetadata, NftResources } from '@/composables/useNft'
+import type { NFTWithMetadata, NftResources, NFTOffer } from '@/composables/useNft'
 import { getMimeType } from '@/utils/gallery/media'
 
 interface NFTData {
@@ -20,6 +20,7 @@ export interface GalleryItem {
   nftAnimationMimeType: Ref<string>
   nftImage: Ref<string>
   nftResources: Ref<NftResources[] | undefined>
+  nftHighestOffer: Ref<NFTOffer | undefined>
 }
 
 export const useGalleryItem = (nftId?: string): GalleryItem => {
@@ -32,6 +33,8 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
   const nftMimeType = ref('')
   const nftMetadata = ref<NFTWithMetadata>()
   const nftResources = ref<NftResources[]>()
+  const nftHighestOffer = ref<NFTOffer>()
+  const isOfferIndexerDisabled = computed(() => urlPrefix.value !== 'ahp')
 
   const { params } = useRoute()
   const id = nftId || params.id
@@ -53,6 +56,14 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     },
   })
 
+  const { data: nftOfferData, refetch: refetchHighestOffer } = useGraphql({
+    queryName: 'highestOfferByNftId',
+    disabled: isOfferIndexerDisabled,
+    variables: {
+      id,
+    },
+  })
+
   useSubscriptionGraphql({
     query: `   nft: nftEntityById(id: "${id}") {
       id
@@ -66,6 +77,14 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     onChange: refetch,
   })
 
+  useSubscriptionGraphql({
+    query: `offers(where: {status_eq: ACTIVE, desired: {id_eq: "${id}"}}, orderBy: price_DESC, limit: 1) {
+      id
+    }`,
+    disabled: isOfferIndexerDisabled,
+    onChange: refetchHighestOffer,
+  })
+
   watch(data as unknown as NFTData, async (newData) => {
     const nftEntity = newData?.nftEntity
     if (!nftEntity) {
@@ -152,6 +171,12 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     })
   })
 
+  watch(nftOfferData as unknown as { offers: NFTOffer[] }, (newData) => {
+    if (newData && newData.offers && newData.offers[0]) {
+      nftHighestOffer.value = newData.offers[0]
+    }
+  })
+
   return {
     nft,
     nftImage,
@@ -160,5 +185,6 @@ export const useGalleryItem = (nftId?: string): GalleryItem => {
     nftMimeType,
     nftMetadata,
     nftResources,
+    nftHighestOffer,
   }
 }
diff --git a/components/offer/MakeOffer.vue b/components/offer/MakeOffer.vue
index f56bdd23d1..95b30105e6 100644
--- a/components/offer/MakeOffer.vue
+++ b/components/offer/MakeOffer.vue
@@ -9,23 +9,6 @@
       @try-again="submitOffer"
     />
 
-    <NeoModal
-      :value="isSuccessModalOpen"
-      append-to-body
-      @close="handleSuccessModalClose"
-    >
-      <ModalBody
-        :title="$t('success')"
-        @close="handleSuccessModalClose"
-      >
-        <SuccessfulMakingOfferBody
-          :tx-hash="txHash"
-          :items="items"
-          :status="status"
-        />
-      </ModalBody>
-    </NeoModal>
-
     <NeoModal
       :value="preferencesStore.makeOfferModalOpen"
       append-to-body
@@ -39,7 +22,10 @@
         :loading="!autoTeleportLoaded"
         @close="onClose"
       >
-        <div class="px-6 max-h-[50vh] overflow-y-auto">
+        <div
+          v-if="preferencesStore.makeOfferModalOpen"
+          class="px-6 max-h-[50vh] overflow-y-auto"
+        >
           <ModalIdentityItem />
 
           <MakingOfferSingleItem />
@@ -49,6 +35,7 @@
           <AutoTeleportActionButton
             ref="autoTeleportButton"
             :actions="actions"
+            :amount="totalOfferAmount"
             :disabled="confirmButtonDisabled"
             :fees="{ forceActionAutoFees: true }"
             :label="confirmListingLabel"
@@ -80,37 +67,34 @@ import AutoTeleportActionButton, {
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import { hasOperationsDisabled } from '@/utils/prefix'
 import MakingOfferSingleItem from '@/components/offer/MakingOfferSingleItem.vue'
-import SuccessfulMakingOfferBody from '@/components/offer/SuccessfulMakingOfferBody.vue'
 import { offerVisible } from '@/utils/config/permission.config'
 import useAutoTeleportActionButton from '@/composables/autoTeleport/useAutoTeleportActionButton'
+import { sum } from '@/utils/math'
+import type { NotificationAction } from '@/utils/notification'
 
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
 const offerStore = useMakingOfferStore()
+const { accountId } = useAuth()
 const {
   transaction,
   isLoading,
   status,
   isError,
   blockNumber,
-  txHash,
   clear: clearTransaction,
-} = useTransaction()
-
-const { isTransactionSuccessful } = useTransactionSuccessful({
-  status,
-  isError,
+} = useTransaction({
+  disableSuccessNotification: true,
+})
+const offerSession = ref<{ state: LoadingNotificationState, closeNotification?: () => void }>({
+  state: 'loading',
 })
+const { itemsInChain, hasInvalidOfferPrices, count } = storeToRefs(offerStore)
 
 const { decimals } = useChain()
 const { $i18n } = useNuxtApp()
-const itemCount = ref(offerStore.count)
 const items = ref<MakingOfferItem[]>([])
 
-const isSuccessModalOpen = computed(
-  () => Boolean(items.value.length) && isTransactionSuccessful.value,
-)
-
 const getAction = (items: MakingOfferItem[]): Actions => {
   return {
     interaction: ShoppingActions.MAKE_OFFER,
@@ -118,18 +102,20 @@ const getAction = (items: MakingOfferItem[]): Actions => {
     token: items.map(item => ({
       price: String(calculateBalance(Number(item.offerPrice), decimals.value)),
       collectionId: item.collection.id,
+      duration: item.offerExpiration || 7,
       nftSn: item.sn,
     } as TokenToOffer)),
-    duration: 300,
-    successMessage: $i18n.t('transaction.price.offer') as string,
-    errorMessage: $i18n.t('transaction.price.error') as string,
   }
 }
 
 const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded } = useAutoTeleportActionButton({
-  getActionFn: () => getAction(offerStore.itemsInChain),
+  getActionFn: () => getAction(itemsInChain.value),
 })
 
+const totalOfferAmount = computed(
+  () => calculateBalance(sum(itemsInChain.value.map(nft => Number(nft.offerPrice))), decimals.value),
+)
+
 const actions = computed<AutoTeleportAction[]>(() => [
   {
     action: action.value,
@@ -146,7 +132,7 @@ const actions = computed<AutoTeleportAction[]>(() => [
 const confirmButtonDisabled = computed(
   () =>
     hasOperationsDisabled(urlPrefix.value)
-    || offerStore.hasInvalidOfferPrices
+    || hasInvalidOfferPrices.value
     || !autoTeleportButton.value?.isReady,
 )
 
@@ -155,6 +141,14 @@ const confirmListingLabel = computed(() => {
     return $i18n.t('toast.unsupportedOperation')
   }
 
+  if (!totalOfferAmount.value) {
+    return $i18n.t('offer.emptyInput')
+  }
+
+  if (hasInvalidOfferPrices.value) {
+    return $i18n.t('offer.invalidPrice')
+  }
+
   if (!autoTeleportButton.value?.isReady) {
     return $i18n.t('autoTeleport.checking')
   }
@@ -162,7 +156,7 @@ const confirmListingLabel = computed(() => {
 })
 
 const submitOffer = () => {
-  return transaction(getAction(offerStore.itemsInChain))
+  return transaction(getAction(items.value))
 }
 
 async function confirm({ autoteleport }: AutoTeleportActionButtonConfirmEvent) {
@@ -170,8 +164,7 @@ async function confirm({ autoteleport }: AutoTeleportActionButtonConfirmEvent) {
     clearTransaction()
 
     autoTeleport.value = autoteleport
-    itemCount.value = offerStore.count
-    items.value = [...offerStore.itemsInChain]
+    items.value = [...itemsInChain.value]
 
     if (!autoteleport) {
       await submitOffer()
@@ -188,15 +181,33 @@ async function confirm({ autoteleport }: AutoTeleportActionButtonConfirmEvent) {
 const onClose = () => {
   closeMakingOfferModal()
 }
-
-const handleSuccessModalClose = () => {
-  items.value = []
+const closeMakingOfferModal = () => (preferencesStore.makeOfferModalOpen = false)
+
+const showOfferCreationNotification = (session) => {
+  const isSessionState = (state: LoadingNotificationState) =>
+    session.value?.state === state
+
+  session.value.closeNotification = loadingMessage({
+    title: ref($i18n.t('offer.offerCreation')),
+    state: computed(() => session?.value.state as LoadingNotificationState),
+    action: computed<NotificationAction | undefined>(() => {
+      if (isSessionState('succeeded')) {
+        return {
+          label: $i18n.t('offer.manageOffers'),
+          icon: 'arrow-up-right',
+          url: `/${urlPrefix.value}/u/${accountId.value}`,
+        }
+      }
+
+      return undefined
+    }),
+  })
 }
 
 watch(
-  () => offerStore.count,
+  () => count.value,
   () => {
-    if (offerStore.count === 0) {
+    if (count.value === 0) {
       closeMakingOfferModal()
     }
   },
@@ -209,8 +220,22 @@ useModalIsOpenTracker({
   },
 })
 
-const closeMakingOfferModal = () =>
-  (preferencesStore.makeOfferModalOpen = false)
+watch(isError, (error) => {
+  if (error) {
+    offerSession.value.closeNotification?.()
+  }
+})
+
+watch(status, (status) => {
+  switch (status) {
+    case TransactionStatus.Block:
+      showOfferCreationNotification(offerSession)
+      break
+    case TransactionStatus.Finalized:
+      offerSession.value.state = 'succeeded'
+      break
+  }
+})
 
 onBeforeMount(closeMakingOfferModal)
 onUnmounted(closeMakingOfferModal)
diff --git a/components/offer/MakingOfferSingleItem.vue b/components/offer/MakingOfferSingleItem.vue
index 51758444c7..e4595b257b 100644
--- a/components/offer/MakingOfferSingleItem.vue
+++ b/components/offer/MakingOfferSingleItem.vue
@@ -6,24 +6,53 @@
           {{ itemPrice }}
         </div>
       </template>
+
+      <template #footer>
+        <hr class="my-4">
+
+        <div class="mb-2 flex justify-between">
+          <div>
+            {{ $t('offer.bestOffer') }}
+          </div>
+          <div>
+            {{ highestOfferPrice }}
+          </div>
+        </div>
+        <div class="flex justify-between">
+          <div>
+            {{ $t('offer.collectionFloorPrice') }}
+          </div>
+          <div>
+            {{ collectionFloorPrice }}
+          </div>
+        </div>
+      </template>
     </CartItemDetails>
 
-    <hr class="my-5">
+    <hr class="my-4">
 
     <div class="font-bold">
       {{ $t('offer.yourOfferAmount') }}
     </div>
 
-    <ListingCartPriceInput
-      v-model="offerStoreItem"
+    <OfferPriceInput
+      v-model="offerPriceStoreItem"
+      class="pt-2"
+    />
+    <div class="font-bold pt-4">
+      {{ $t('offer.expiration') }}
+    </div>
+
+    <OfferExpirationSelector
+      v-model="offerExpirationStoreItem"
       class="pt-2"
-      full-width
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import ListingCartPriceInput from '@/components/common/listingCart/shared/ListingCartPriceInput.vue'
+import OfferPriceInput from '@/components/offer/OfferPriceInput.vue'
+import OfferExpirationSelector from '@/components/offer/OfferExpirationSelector.vue'
 import { useMakingOfferStore } from '@/stores/makeOffer'
 import formatBalance from '@/utils/format/balance'
 import CartItemDetails from '@/components/common/CartItemDetails.vue'
@@ -49,10 +78,20 @@ const itemPrice = computed(() => formatWithBlank(Number(item.value.price)))
 const formatWithBlank = (value: number) => {
   return value ? formatBalance(value, decimals.value, chainSymbol.value) : '--'
 }
-const offerStoreItem = computed({
+const offerPriceStoreItem = computed({
   get: () => offerStore.getItem(item.value?.id)?.offerPrice,
   set: price => offerStore.updateItem({ id: item.value.id, offerPrice: price }),
 })
+const offerExpirationStoreItem = computed({
+  get: () => offerStore.getItem(item.value?.id)?.offerExpiration,
+  set: v => offerStore.updateItem({ id: item.value.id, offerExpiration: v }),
+})
+
+const highestOfferPrice = computed(() => formatWithBlank(Number(item.value.highestOffer) || 0) || '--')
+
+const collectionFloorPrice = computed(() =>
+  formatWithBlank(Number(item.value.collection.floorPrice?.[0]?.price || '0')) || '--',
+)
 
 watch(
   () => props.offerPrice,
diff --git a/components/offer/OfferExpirationSelector.vue b/components/offer/OfferExpirationSelector.vue
new file mode 100644
index 0000000000..e2af28733f
--- /dev/null
+++ b/components/offer/OfferExpirationSelector.vue
@@ -0,0 +1,78 @@
+<template>
+  <NeoDropdown
+    v-model="selected"
+    aria-role="list"
+    :triggers="['click']"
+    position="bottom-left"
+    append-to-body
+    class="w-full"
+    menu-class="!min-w-[8rem]"
+  >
+    <template #trigger="{ active }">
+      <div
+        class="flex items-center justify-between border border-k-grey px-4 py-2"
+        :class="{
+          '!border-black': active,
+        }"
+      >
+        <span class="text-k-grey">{{ formattedExpirationTime }}</span>
+        <div
+          class="flex items-center gap-1 cursor-pointer"
+        >
+          {{ selectedItem?.text }}
+
+          <NeoIcon
+            icon="chevron-down"
+          />
+        </div>
+      </div>
+    </template>
+
+    <NeoDropdownItem
+      v-for="option in options"
+      :key="option.value"
+      class="text-center"
+      aria-role="listitem"
+      :value="option.value"
+      :class="{ 'is-active': selected === option.value }"
+    >
+      {{ option.text }}
+    </NeoDropdownItem>
+  </NeoDropdown>
+</template>
+
+<script setup lang="ts">
+import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
+
+const EXPIRATION_DAYS_LIST = [1, 3, 7, 14, 30]
+
+const options = EXPIRATION_DAYS_LIST.map(value => ({
+  value,
+  text: `${value} Day${value > 1 ? 's' : ''}`,
+}))
+
+const selectedItem = computed(() => options.find(option => option.value === selected.value))
+
+const props = defineProps<{
+  modelValue?: number
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const selected = useVModel(props, 'modelValue', emit, {
+  defaultValue: 7,
+})
+
+const formattedExpirationTime = computed(() => {
+  const date = new Date()
+  date.setDate(date.getDate() + selected.value!)
+  return date.toLocaleString(undefined, {
+    month: 'numeric',
+    day: '2-digit',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true,
+  })
+})
+</script>
diff --git a/components/offer/OfferPriceInput.vue b/components/offer/OfferPriceInput.vue
new file mode 100644
index 0000000000..088cd98cba
--- /dev/null
+++ b/components/offer/OfferPriceInput.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="flex gap-4">
+      <div
+        class="flex focus-within:!border-border-color border border-k-shade h-10 w-full flex-1"
+      >
+        <input
+          v-model="model"
+          type="number"
+          step="0.01"
+          min="0.0001"
+          pattern="[0-9]+([\.,][0-9]+)?"
+          class="indent-2.5 border-none outline-none bg-background-color text-text-color w-full"
+          :placeholder="$t('offer.typeOffer')"
+        >
+      </div>
+
+      <NeoButton
+        no-shadow
+        expanded
+        class="w-fit !border-k-grey"
+        @click="switchSymbolMode"
+      >
+        <div class="flex items-center gap-1">
+          <div class="flex items-center">
+            {{ isSymbolMode ? chainSymbol : 'USD' }}
+          </div>
+          <NeoIcon
+            class="text-k-grey"
+            icon="arrows-cross"
+          />
+        </div>
+      </NeoButton>
+    </div>
+
+    <div class="flex justify-end text-k-grey text-xs mt-3 gap-1">
+      {{ $t('general.balance') }}:
+      <span v-if="isSymbolMode">
+        {{ balance }} {{ chainSymbol }}
+      </span>
+      <span v-else>
+        {{ balanceUsd }} USD
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoIcon } from '@kodadot1/brick'
+
+const props = defineProps<{
+  modelValue?: number | string
+  check?: boolean
+}>()
+const { chainSymbol } = useChain()
+const { urlPrefix } = usePrefix()
+const { balance } = useDeposit(urlPrefix)
+const fiatStore = useFiatStore()
+const emit = defineEmits(['update:modelValue'])
+
+const isSymbolMode = ref(true)
+const tokenPrice = computed(() => fiatStore.getCurrentTokenValue(chainSymbol.value as Token) as number)
+const switchSymbolMode = () => {
+  isSymbolMode.value = !isSymbolMode.value
+}
+
+const balanceUsd = computed(() => {
+  return balance.value * tokenPrice.value
+})
+
+const tokenAmount = ref<string | number | undefined>(props.modelValue || '')
+
+const model = computed({
+  get: () => tokenAmount.value,
+  set: (value) => {
+    const newTokenAmount = value === ''
+      ? undefined
+      : (isSymbolMode.value ? value : (Number(value) / tokenPrice.value))
+    emit('update:modelValue', newTokenAmount)
+    tokenAmount.value = value
+  },
+})
+
+onMounted(() => {
+  if (fiatStore.incompleteFiatValues) {
+    fiatStore.fetchFiatPrice()
+  }
+})
+
+watch(isSymbolMode, async (isSymbol) => {
+  if (isSymbol) {
+    model.value = (Number(model.value) / tokenPrice.value)
+  }
+  else {
+    model.value = (Number(model.value) * tokenPrice.value)
+  }
+})
+</script>
diff --git a/components/offer/SuccessfulMakingOfferBody.vue b/components/offer/SuccessfulMakingOfferBody.vue
deleted file mode 100644
index fac0c2ff7e..0000000000
--- a/components/offer/SuccessfulMakingOfferBody.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <SuccessfulModalBody
-    :tx-hash="txHash"
-    :share="share"
-    :status="status"
-    :action-buttons="actionButtons"
-  >
-    <SuccessfulItemsMedia
-      :header="{
-        single: $t('offer.newOffer'),
-        multiple: $t('offer.newOffer'),
-      }"
-      :items="mediaItems"
-      show-price
-    />
-  </SuccessfulModalBody>
-</template>
-
-<script lang="ts" setup>
-import type { MakingOfferItem } from './types'
-import type { ItemMedia } from '@/components/common/successfulModal/SuccessfulItemsMedia.vue'
-import type { TransactionStatus } from '@/composables/useTransactionStatus'
-
-const props = defineProps<{
-  items: MakingOfferItem[]
-  txHash: string | undefined
-  status: TransactionStatus
-}>()
-
-const { $i18n } = useNuxtApp()
-const { decimals } = useChain()
-const { urlPrefix } = usePrefix()
-
-const mediaItems = computed<ItemMedia[]>(() =>
-  props.items.map(item => ({
-    id: item.id,
-    image: (item.meta?.image) as string,
-    name: item.name,
-    collection: item.collection.id,
-    collectionName: item.collection.name,
-    mimeType: item.meta?.mimeType,
-    price: item.offerPrice
-      ? String(Number(item.offerPrice) * Math.pow(10, decimals.value))
-      : undefined,
-    metadata: item.meta?.mediaUri as string,
-  })),
-)
-
-const singleListing = computed(() => props.items.length === 1)
-
-const url = computed(() => window.location.origin)
-
-const nftPath = computed(
-  () => `/${urlPrefix.value}/gallery/${props.items[0].id}`,
-)
-
-const shareUrl = computed(() => `${url.value}${nftPath.value}`,
-)
-
-const share = computed(() => ({
-  text: $i18n.t('sharing.makeOfferNft'),
-  withCopy: singleListing.value,
-  url: shareUrl.value,
-}))
-
-const actionButtons = computed(() => ({
-  primary: {
-    label: $i18n.t('viewNft', props.items.length),
-    onClick: handleViewNft,
-  },
-}))
-
-const handleViewNft = () => {
-  window.open(shareUrl.value, '_blank')
-}
-</script>
diff --git a/components/offer/types.ts b/components/offer/types.ts
index 3f07015b3c..65da5c908e 100644
--- a/components/offer/types.ts
+++ b/components/offer/types.ts
@@ -7,7 +7,9 @@ import type {
 export type MakingOfferItem = {
   urlPrefix: string
   price?: string
+  highestOffer?: string
   offerPrice?: string
+  offerExpiration?: number
   id: string
   name: string
   currentOwner: string
diff --git a/components/profile/create/Modal.vue b/components/profile/create/Modal.vue
index f883269fbd..01205eedb3 100644
--- a/components/profile/create/Modal.vue
+++ b/components/profile/create/Modal.vue
@@ -39,6 +39,7 @@ import type { ProfileFormData } from './stages/index'
 import { Form, Introduction, Select } from './stages/index'
 import { deleteProfile } from '@/services/profile'
 import { appClient, createChannel } from '@/services/farcaster'
+import type { NotificationAction } from '@/utils/notification'
 
 type SessionState = {
   state: LoadingNotificationState
diff --git a/composables/transaction/transactionOffer.ts b/composables/transaction/transactionOffer.ts
index 88817a846b..ae896b360a 100644
--- a/composables/transaction/transactionOffer.ts
+++ b/composables/transaction/transactionOffer.ts
@@ -15,11 +15,13 @@ export const getOfferCollectionId = (prefix: Prefix) => {
 
 const OFFER_MINT_PRICE = '500000000'
 
+const BLOCKS_PER_DAY = 300 * 24 // 12sec /block --> 300blocks/hr
+
 async function execMakingOffer(item: ActionOffer, api, executeTransaction) {
   const { accountId } = useAuth()
   const nfts = Array.isArray(item.token) ? item.token : [item.token]
   const transactions = await Promise.all(
-    nfts.map(async ({ price, nftSn, collectionId }) => {
+    nfts.map(async ({ price, nftSn, collectionId, duration }) => {
       const offerId = getOfferCollectionId(item.urlPrefix as Prefix)
       const nextId = Number.parseInt(await generateId())
       const create = api.tx.nfts.mint(
@@ -31,7 +33,6 @@ async function execMakingOffer(item: ActionOffer, api, executeTransaction) {
         },
       )
 
-      const duration = 300 * 24 * 7 // Temporarily set to one week (12sec /block --> 300blocks/hr)
       const offer = api.tx.nfts.createSwap(
         offerId,
         nextId,
@@ -41,7 +42,7 @@ async function execMakingOffer(item: ActionOffer, api, executeTransaction) {
           amount: Number(price) || 0,
           direction: 'Send',
         },
-        duration,
+        BLOCKS_PER_DAY * duration,
       )
 
       return [create, offer]
diff --git a/composables/transaction/types.ts b/composables/transaction/types.ts
index 90cda2848d..2039f0a03c 100644
--- a/composables/transaction/types.ts
+++ b/composables/transaction/types.ts
@@ -154,6 +154,7 @@ export type TokenToOffer = {
   price: string
   collectionId: string
   nftSn: string
+  duration: number
 }
 
 export type ActionList = {
@@ -182,7 +183,6 @@ export type ActionOffer = {
   interaction: typeof ShoppingActions.MAKE_OFFER
   urlPrefix: string
   token: TokenToOffer | TokenToOffer[]
-  duration: number
   successMessage?: string | ((blockNumber: string) => string)
   errorMessage?: string
 }
diff --git a/composables/useMetaTransaction.ts b/composables/useMetaTransaction.ts
index ddc6f5022d..256a84ec0f 100644
--- a/composables/useMetaTransaction.ts
+++ b/composables/useMetaTransaction.ts
@@ -107,7 +107,8 @@ function useMetaTransaction() {
 
   const onCatchError = (e) => {
     if (e instanceof Error) {
-      const isCancelled = e.message === 'Cancelled'
+      const errorMessage = e.message?.toLowerCase() || ''
+      const isCancelled = errorMessage.includes('cancelled') || errorMessage.includes('rejected')
       if (isCancelled) {
         warningMessage($i18n.t('general.tx.cancelled'), { reportable: false })
 
diff --git a/composables/useNft.ts b/composables/useNft.ts
index 6ec3a0d0d5..70398782f2 100644
--- a/composables/useNft.ts
+++ b/composables/useNft.ts
@@ -64,6 +64,13 @@ export type TokenEntity = {
   }
 }
 
+export type NFTOffer = {
+  id: string
+  price: string
+  expiration: number
+  status: string
+}
+
 export const isTokenEntity = (
   entity: NFTWithMetadata | TokenEntity,
 ): entity is TokenEntity =>
diff --git a/composables/useSubscriptionGraphql.ts b/composables/useSubscriptionGraphql.ts
index 522d73e032..116270f392 100644
--- a/composables/useSubscriptionGraphql.ts
+++ b/composables/useSubscriptionGraphql.ts
@@ -7,19 +7,21 @@ export default function ({
   onChange,
   onError,
   pollingInterval = 6000,
+  disabled,
 }: {
   clientName?: string
   query: string
   onChange: (data) => void
   onError?: (error) => void
   pollingInterval?: number
+  disabled?: ComputedRef<boolean>
 }) {
   const { client: prefixClient } = usePrefix()
   const { $consola } = useNuxtApp()
   const client = clientName || prefixClient.value
   const httpUrl = apolloClientConfig[client]?.httpEndpoint
 
-  if (!httpUrl) {
+  if (disabled?.value || !httpUrl) {
     return () => {}
   }
 
diff --git a/locales/en.json b/locales/en.json
index db59d42b89..c4b6f77ab2 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1363,6 +1363,7 @@
     "addressIncorrect": "Address Incorrect",
     "wrongAddressCannotRecoveredWarning": "Items sent to the wrong address cannot be recovered.",
     "selfTransfer": "You can't transfer to yourself",
+    "offerError": "Offer creation failed",
     "price": {
       "change": "Change Price",
       "new": "Your New Price",
@@ -1636,12 +1637,20 @@
   },
   "offer": {
     "yourOfferAmount": "Your Offer Amount" ,
+    "newOffer": "New Offer",
+    "bestOffer": "Best Offer",
+    "manageOffers": "Manage Offers",
+    "offerCreation": "Offer Creation",
+    "collectionFloorPrice": "Collection Floor",
+    "expiration": "Offer Expiration",
+    "typeOffer": "Type An Offer",
+    "highestOffer": "Highest Offer",
+    "invalidPrice": "Your offer must greater than 0.0001",
+    "emptyInput": "Please enter your offer",
     "yourOffer": "Your Offer",
     "cancelOffer": "Cancel Offer",
     "floorDifference": "Floor Difference",
-    "newOffer": "New Offer",
     "incomingOffer": "Incoming Offer",
-    "manageOffers": "Manage Offer",
     "offerWithdrawl": "Offer Cancelation",
     "offerAccept": "Accepting Offer"
   },
@@ -1821,6 +1830,10 @@
       "consume": {
         "confirm": "Teleport and Burn NFT",
         "title": "Burning NFT"
+      },
+      "make_offer": {
+        "confirm": "Teleport and Create Offer",
+        "title": "Creating Offer"
       }
     }
   },
diff --git a/queries/subsquid/general/highestOfferByNftId.graphql b/queries/subsquid/general/highestOfferByNftId.graphql
new file mode 100644
index 0000000000..20c47b8845
--- /dev/null
+++ b/queries/subsquid/general/highestOfferByNftId.graphql
@@ -0,0 +1,8 @@
+query highestOfferByNftId($id: String!) {
+  offers(where: {status_eq: ACTIVE, desired: {id_eq: $id}}, orderBy: price_DESC, limit: 1) {
+    expiration
+    status
+    price
+    id
+  }
+}
\ No newline at end of file
diff --git a/stores/makeOffer.ts b/stores/makeOffer.ts
index cf9c542308..edcd55197d 100644
--- a/stores/makeOffer.ts
+++ b/stores/makeOffer.ts
@@ -26,7 +26,7 @@ export const useMakingOfferStore = defineStore('makingOffer', {
       return this.itemsInChain.length
     },
     hasInvalidOfferPrices(): boolean {
-      return this.itemsInChain.some(item => Number(item.offerPrice || 0) <= 0)
+      return this.itemsInChain.some(item => Number(item.offerPrice || 0) <= 0.0001)
     },
   },