diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index 476401d..c647adb 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -325,4 +325,36 @@
     .vpd-controls button {
         @apply flex justify-center items-center;
     }
+
+    .pattern {
+        width: 100%;
+        height: 100%;
+        --color: #191a1a10;
+        background-color: white;
+        background-image: linear-gradient(
+                0deg,
+                transparent 24%,
+                var(--color) 25%,
+                var(--color) 26%,
+                transparent 27%,
+                transparent 74%,
+                var(--color) 75%,
+                var(--color) 76%,
+                transparent 77%,
+                transparent
+            ),
+            linear-gradient(
+                90deg,
+                transparent 24%,
+                var(--color) 25%,
+                var(--color) 26%,
+                transparent 27%,
+                transparent 74%,
+                var(--color) 75%,
+                var(--color) 76%,
+                transparent 77%,
+                transparent
+            );
+        background-size: 55px 55px;
+    }
 }
diff --git a/frontend/components/cart/global/CartSummary.vue b/frontend/components/cart/global/CartSummary.vue
index 90aca8b..037dcaa 100644
--- a/frontend/components/cart/global/CartSummary.vue
+++ b/frontend/components/cart/global/CartSummary.vue
@@ -90,7 +90,9 @@ const handlePayment = () => {
         },
         {
             onSuccess: (data) => {
-                window.location.href = data.url;
+                setTimeout(() => {
+                    window.location.href = data.url;
+                }, 2000);
             },
             onError: () => {
                 addToast({
diff --git a/frontend/components/global/Avatar.vue b/frontend/components/global/Avatar.vue
index f6c9d29..54ab6ca 100644
--- a/frontend/components/global/Avatar.vue
+++ b/frontend/components/global/Avatar.vue
@@ -8,6 +8,7 @@ import { useImage } from "@vueuse/core";
 type Props = {
     src: string | null | undefined;
     alt: string;
+    iconClass?: string;
 };
 
 // props
@@ -18,7 +19,7 @@ const { src } = toRefs(props);
 
 // state
 
-const { isLoading } = useImage({ src: src.value ?? '' });
+const { isLoading } = useImage({ src: src.value ?? "" });
 </script>
 
 <template>
@@ -41,7 +42,12 @@ const { isLoading } = useImage({ src: src.value ?? '' });
                 :delay-ms="600"
             >
                 <div class="size-full rounded-full flex-center">
-                    <Icon name="ci:profile" size="16" class="**:stroke-black" />
+                    <Icon
+                        name="ci:profile"
+                        size="16"
+                        class="**:stroke-black"
+                        :class="iconClass"
+                    />
                 </div>
             </AvatarFallback>
         </template>
diff --git a/frontend/components/global/Footer.vue b/frontend/components/global/Footer.vue
index a30a190..e8eb37d 100644
--- a/frontend/components/global/Footer.vue
+++ b/frontend/components/global/Footer.vue
@@ -10,7 +10,7 @@
             class="flex flex-col gap-4 items-center justify-center relative z-20"
         >
             <div
-                class="flex items-center flex-col gap-8 pb-[10px] pt-[80px] lg:py-[150px] justify-center"
+                class="flex items-center flex-col gap-8 pb-[10px] pt-[80px] lg:pt-[150px] lg:pb-[50px] justify-center"
             >
                 <img
                     src="/img/heymlz/heymlz-small-idle.gif"
@@ -28,13 +28,13 @@
             >
                 <div class="flex flex-col gap-4 max-w-[300px]">
                     <h3
-                        class="font-bold text-xl xl:text-3xl max-lg:text-center text-white"
+                        class="font-bold text-lg xl:text-3xl max-lg:text-center text-white"
                     >
                         با ما در ارتباط باشید...
                     </h3>
 
                     <p
-                        class="text-md font-thin leading-[175%] mt-4 max-lg:text-center text-slate-300"
+                        class="text-md font-thin leading-[175%] mt-4 max-lg:text-center text-slate-300 max-lg:text-xs"
                     >
                         لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنگی با
                         تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان
@@ -77,7 +77,7 @@
                     <div class="flex flex-col gap-6 max-lg:text-center">
                         <h3 class="font-bold text-white">لینک های مفید</h3>
                         <ul
-                            class="flex flex-col gap-4 font-thin text-slate-300"
+                            class="flex flex-col gap-4 font-thin text-slate-300 max-lg:text-xs"
                         >
                             <li>از طراحان گرافیک است</li>
                             <li>تولید نامفهوم</li>
@@ -90,7 +90,7 @@
                     <div class="flex flex-col gap-6 max-lg:text-center">
                         <h3 class="font-bold text-white">لینک های مفید</h3>
                         <ul
-                            class="flex flex-col gap-4 font-thin text-slate-300"
+                            class="flex flex-col gap-4 font-thin text-slate-300 max-lg:text-xs"
                         >
                             <li>از طراحان گرافیک است</li>
                             <li>تولید نامفهوم</li>
@@ -105,7 +105,7 @@
                             لینک های مفید
                         </h3>
                         <ul
-                            class="flex flex-col gap-4 font-thin text-slate-300"
+                            class="flex flex-col gap-4 font-thin text-slate-300 max-lg:text-xs"
                         >
                             <li>از طراحان گرافیک است</li>
                             <li>تولید نامفهوم</li>
diff --git a/frontend/components/global/Header.vue b/frontend/components/global/Header.vue
index 57fde5f..681cb0d 100644
--- a/frontend/components/global/Header.vue
+++ b/frontend/components/global/Header.vue
@@ -32,7 +32,10 @@ const isHomePage = computed(() => route.path === "/");
         <div
             class="size-full flex items-center justify-between container h-[65px] lg:h-[85px] shrink-0 grow-0"
         >
-            <button class="md:hidden header-navbar-item" @click="isSideDrawerOpen = true">
+            <button
+                class="md:hidden header-navbar-item"
+                @click="isSideDrawerOpen = true"
+            >
                 <Icon name="humbleicons:bars" size="28" />
             </button>
             <div class="max-md:hidden flex items-center gap-8 lg:gap-16">
@@ -46,6 +49,7 @@ const isHomePage = computed(() => route.path === "/");
                         >
                             <Avatar
                                 class="!size-7"
+                                iconClass="header-navbar-item"
                                 :src="account.profile_photo"
                                 :alt="
                                     account.first_name && account.last_name
@@ -61,12 +65,15 @@ const isHomePage = computed(() => route.path === "/");
                         <NuxtLink to="/signin" class="flex-center">
                             <Icon
                                 name="ci:profile"
-                                class="**:stroke-black size-5 lg:size-6"
+                                class="**:stroke-black size-5 lg:size-6 header-navbar-item"
                             />
                         </NuxtLink>
                     </Tooltip>
                     <Tooltip title="محصولات">
-                        <NuxtLink to="/products" class="flex-center header-navbar-item">
+                        <NuxtLink
+                            to="/products"
+                            class="flex-center header-navbar-item"
+                        >
                             <Icon
                                 name="ci:search"
                                 class="**:stroke-black size-4.5 lg:size-[21px]"
@@ -106,7 +113,7 @@ const isHomePage = computed(() => route.path === "/");
             <div class="header-navbar-item">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 lg:h-6 "
+                    class="h-5 lg:h-6"
                     fill="none"
                     viewBox="0 0 220 40"
                 >
diff --git a/frontend/components/global/ServiceHighlights.vue b/frontend/components/global/ServiceHighlights.vue
index f3873aa..5e86ae1 100644
--- a/frontend/components/global/ServiceHighlights.vue
+++ b/frontend/components/global/ServiceHighlights.vue
@@ -36,15 +36,12 @@ const highlights = ref<Highlight[]>([
 <template>
     <section class="w-full border-t-[0.5px] border-slate-200">
         <div
-            class="w-full py-[5rem] gap-8 sm:gap-12 xl:gap-0 container grid grid-cols-2 lg:grid-cols-4"
+            class="w-full py-[3rem] lg:py-[5rem] gap-8 sm:gap-12 xl:gap-0 container grid grid-cols-2 lg:grid-cols-4"
         >
             <template v-for="(highlight, index) in highlights" :key="index">
                 <div class="flex flex-col-center gap-[.75rem] px-5">
                     <div class="size-[70px] md:size-[100px] flex-center">
-                        <NuxtImg
-                            :src="highlight.icon"
-                            class="w-full"
-                        />
+                        <NuxtImg :src="highlight.icon" class="w-full" />
                     </div>
 
                     <div class="w-full flex-col-center gap-[.25rem]">
diff --git a/frontend/components/global/products/FilterProducts.vue b/frontend/components/global/products/FilterProducts.vue
index 8c47859..6d16c15 100644
--- a/frontend/components/global/products/FilterProducts.vue
+++ b/frontend/components/global/products/FilterProducts.vue
@@ -27,7 +27,9 @@ const in_stock = ref(Boolean(params.in_stock) ?? false);
 
 const sliderValueDebounced = refDebounced(sliderValue, 1000);
 
-const filtersSuccessMessage = ref<{ title: string; status: string } | null>(null);
+const filtersSuccessMessage = ref<{ title: string; status: string } | null>(
+    null
+);
 
 // queries
 
@@ -137,7 +139,7 @@ watch(
                                 ? 'bg-black text-white'
                                 : 'bg-slate-100'
                         "
-                        class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-full text-sm"
+                        class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-md text-sm"
                     >
                         {{ sort.title }}
                     </button>
diff --git a/frontend/components/products/FilterButton.vue b/frontend/components/products/FilterButton.vue
index 507d938..7b3d950 100644
--- a/frontend/components/products/FilterButton.vue
+++ b/frontend/components/products/FilterButton.vue
@@ -6,7 +6,7 @@
             <Button
                 end-icon="ci:filter"
                 variant="outlined"
-                class="max-lg:size-11 rounded-full max-lg:aspect-square"
+                class="max-lg:size-11 rounded-xl max-lg:aspect-square lg:py-3.5"
             >
                 <span class="hidden lg:block"> فیلتر محصولات </span>
             </Button>
diff --git a/frontend/composables/api/orders/useGetTransaction.ts b/frontend/composables/api/orders/useGetTransaction.ts
new file mode 100644
index 0000000..9951ac6
--- /dev/null
+++ b/frontend/composables/api/orders/useGetTransaction.ts
@@ -0,0 +1,32 @@
+// imports
+
+import { useQuery } from "@tanstack/vue-query";
+import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
+
+// types
+
+export type GetTransactionResponse = Transaction;
+
+export type GetTransactionRequest = string;
+
+const useGetTransaction = (params: ComputedRef<GetTransactionRequest>) => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleGetTransaction = async (tc: GetTransactionRequest) => {
+        const { data } = await axios.get<GetTransactionResponse>(
+            `${API_ENDPOINTS.orders.checkout.transaction}/${tc}`
+        );
+        return data;
+    };
+
+    return useQuery({
+        queryKey: [QUERY_KEYS.transaction, params],
+        queryFn: () => handleGetTransaction(params.value),
+    });
+};
+
+export default useGetTransaction;
diff --git a/frontend/composables/global/usePersianDate.ts b/frontend/composables/global/usePersianDate.ts
new file mode 100644
index 0000000..e09c77b
--- /dev/null
+++ b/frontend/composables/global/usePersianDate.ts
@@ -0,0 +1,23 @@
+// composables/usePersianDate.ts
+import { format, toDate } from "date-fns-jalali";
+import { faIR } from "date-fns-jalali/locale";
+
+export default function usePersianDate() {
+    const formatToPersian = (isoDate: string): string => {
+        try {
+            const date = toDate(new Date(isoDate));
+
+            const persianDate = format(date, "yyyy/MM/dd", { locale: faIR });
+
+            const persianTime = format(date, "HH:mm", { locale: faIR });
+
+            return `${persianDate} | ${persianTime}`;
+        } catch (error) {
+            return "Invalid date";
+        }
+    };
+
+    return {
+        formatToPersian,
+    };
+}
diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index 3f466ab..4ac059c 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -78,6 +78,7 @@ export const QUERY_KEYS = {
     ticket: "ticket",
     orders: "orders",
     cart: "cart",
+    transaction: "transaction",
 };
 
 export const MUTATION_KEYS = {
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 2b80190..68e50a1 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -20,17 +20,11 @@ export default defineNuxtConfig({
             title: "فروشگاه هی ملز",
         },
         pageTransition: {
-            enterActiveClass:
-                "animate__animated animate__fadeIn animate__faster",
-            leaveActiveClass:
-                "animate__animated animate__fadeOut animate__faster",
+            name: "fade",
             mode: "out-in",
         },
         layoutTransition: {
-            enterActiveClass:
-                "animate__animated animate__fadeIn animate__faster",
-            leaveActiveClass:
-                "animate__animated animate__fadeOut animate__faster",
+            name: "fade",
             mode: "out-in",
         },
     },
diff --git a/frontend/package.json b/frontend/package.json
index e3e4692..ff3c169 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,7 +37,7 @@
         "nuxt": "^3.15.4",
         "reka-ui": "^1.0.0-alpha.6",
         "sanitize-html": "^2.15.0",
-        "swiper": "^11.2.4",
+        "swiper": "^11.2.6",
         "universal-cookie": "^7.2.2",
         "vue": "latest",
         "vue-router": "latest",
diff --git a/frontend/pages/cart/delivery.vue b/frontend/pages/cart/delivery.vue
index b42ac6d..f3cafd0 100644
--- a/frontend/pages/cart/delivery.vue
+++ b/frontend/pages/cart/delivery.vue
@@ -100,7 +100,7 @@ whenever(
                 <Icon
                     name="svg-spinners:180-ring-with-bg"
                     size="20"
-                    v-if="!setOrderAddressIsPending"
+                    v-if="setOrderAddressIsPending"
                     class="pb-0.5"
                 />
             </div>
diff --git a/frontend/pages/category.vue b/frontend/pages/category.vue
index 6cae6a1..642c489 100644
--- a/frontend/pages/category.vue
+++ b/frontend/pages/category.vue
@@ -55,27 +55,34 @@ if (response.isError) {
 
 <template>
     <div class="container">
-        <div class="pt-20 pb-8 sm:py-20 flex gap-12 sm:gap-6 justify-between items-center max-sm:flex-col max-sm:items-start">
-            <span class="typo-h-5 lg:typo-h-4 text-black">دسته بندی ها</span>
-            <div class="flex items-center gap-4 sm:gap-8 max-sm:w-full">
+        <div
+            class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5"
+        >
+            <div class="flex flex-col items-center lg:items-start w-full">
+                <h1 class="typo-h-5 lg:typo-h-4 text-black">دسته بندی ها</h1>
+            </div>
+
+            <div
+                class="w-full flex items-center justify-between lg:justify-end gap-4"
+            >
                 <Input
-                    class="max-w-[400px] w-full rounded-full h-[38px] lg:h-[50px]"
-                    variant="outlined"
-                    placeholder="جستجو..."
+                    placeholder="جست و جو محصول ..."
                     v-model="search"
+                    variant="outlined"
+                    class="!rounded-xl w-full lg:w-8/12"
                 >
                     <template #endItem>
                         <div class="flex items-center gap-1">
                             <Icon
-                                class="translate-y-[-1px] size-[18px] lg:size-[24px]"
+                                class="translate-y-[-1px] text-[20px] lg:text-[24px]"
                                 name="ci:search"
                             />
                         </div>
                     </template>
                 </Input>
-
                 <Select
-                    class="whitespace-nowrap max-sm:w-full"
+                    class="shrink-0 max-lg:w-[5rem] lg:w-[6.5rem] py-0.5"
+                    triggerRootClass="!rounded-xl whitespace-nowrap max-sm:w-full shrink-0 "
                     :options="mainCategoriesMenu"
                     variant="outlined"
                     placeholder="انتخاب کنید"
@@ -106,7 +113,10 @@ if (response.isError) {
                 <div
                     class="flex-col flex-grow py-32 sm:py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
                 >
-                    <Icon name="bi:search" class="**:fill-gray-500 size-[40px] sm:size-[50px]" />
+                    <Icon
+                        name="bi:search"
+                        class="**:fill-gray-500 size-[40px] sm:size-[50px]"
+                    />
                     <span class="text-lg text-gray-500">
                         دسته بندی یافت نشد :(
                     </span>
diff --git a/frontend/pages/products.vue b/frontend/pages/products.vue
index 71ec07c..d0577a3 100644
--- a/frontend/pages/products.vue
+++ b/frontend/pages/products.vue
@@ -65,13 +65,13 @@ watch(
             <div
                 class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full"
             >
-                <div class="flex-center gap-[.75rem]">
+                <!-- <div class="flex-center gap-[.75rem]">
                     <span class="text-xs lg:text-sm">خانه</span>
                     <span class="text-xs lg:text-sm">/</span>
                     <span class="text-xs lg:text-sm">محصولات</span>
                     <span class="text-xs lg:text-sm">/</span>
                     <span class="text-xs lg:text-sm">همه</span>
-                </div>
+                </div> -->
                 <h1 class="typo-h-5 lg:typo-h-4">لیست محصولات</h1>
             </div>
 
@@ -82,7 +82,7 @@ watch(
                     placeholder="جست و جو محصول ..."
                     v-model="search"
                     variant="outlined"
-                    class="!rounded-full w-full lg:w-8/12"
+                    class="!rounded-xl w-full lg:w-8/12"
                 >
                     <template #endItem>
                         <div class="flex items-center gap-1">
@@ -97,7 +97,7 @@ watch(
                     <FilterButton />
                     <template #fallback>
                         <Skeleton
-                            class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-full"
+                            class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-xl"
                         />
                     </template>
                 </Suspense>
diff --git a/frontend/pages/signin.vue b/frontend/pages/signin.vue
index 2e1b50d..9e8911b 100644
--- a/frontend/pages/signin.vue
+++ b/frontend/pages/signin.vue
@@ -151,13 +151,7 @@ const resetForm = () => {
 
 <template>
     <div class="w-full flex h-svh items-center relative container">
-        <div
-            class="bg-[url(/img/pattern-1.png)] -z-10 size-full fixed inset-0 opacity-70"
-            :style="{
-                backgroundSize: 150,
-                mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0.3) 80%)',
-            }"
-        />
+        <div class="pattern -z-10 size-full fixed inset-0" />
         <div
             class="flex items-center justify-center flex-col size-full translate-y-[-100px]"
         >
@@ -172,7 +166,9 @@ const resetForm = () => {
             <div
                 class="max-w-[600px] w-full p-6 h-[350px] sm:h-[400px] flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-3xl"
             >
-                <h1 class="typo-h-6 sm:typo-h-5 mt-8">شماره خود را وارد کنید</h1>
+                <h1 class="typo-h-6 sm:typo-h-5 mt-8">
+                    شماره خود را وارد کنید
+                </h1>
 
                 <form @submit.prevent class="max-w-[500px] w-full mt-12">
                     <Input
diff --git a/frontend/pages/transaction.vue b/frontend/pages/transaction.vue
index 0e099d1..eb9ec4d 100644
--- a/frontend/pages/transaction.vue
+++ b/frontend/pages/transaction.vue
@@ -1,75 +1,214 @@
 <script setup lang="ts">
+// imports
+
+import useGetTransaction from "~/composables/api/orders/useGetTransaction";
+import usePersianDate from "~/composables/global/usePersianDate";
+
 // meta
 
 definePageMeta({
     layout: "none",
 });
+
+// state
+
+const route = useRoute();
+
+const { formatToPersian } = usePersianDate();
+
+// computed
+
+const tracking_code = computed(() => route.query["tc"] as string);
+
+// queries
+
+const {
+    data: transaction,
+    isLoading: transactionIsLoading,
+    suspense,
+} = useGetTransaction(tracking_code);
+
+await suspense();
+
+// computed
+
+const statusVariants = computed(() => {
+    if (transaction.value?.bank_result?.status == "succeeded") {
+        return {
+            background_color: "bg-success-500",
+            text_color: "text-white",
+            after_background_color:
+                "bg-success-600/50 shadow-[0px_40px_175px_1px] shadow-success-100",
+            icon: "bi:check",
+            title: "تراکنش موفق",
+            hue_deg: "[filter:_hue-rotate(260deg)] ",
+        };
+    } else if (transaction.value?.bank_result?.status == "canceled") {
+        return {
+            background_color: "bg-danger-500",
+            text_color: "text-white",
+            after_background_color:
+                "bg-danger-600/50 shadow-[0px_40px_175px_1px] shadow-danger-100",
+            icon: "bi:x",
+            title: "تراکنش ناموفق",
+            hue_deg: "[filter:_hue-rotate(120deg)]",
+        };
+    } else {
+        return {
+            background_color: "bg-slate-300",
+            text_color: "text-black",
+            after_background_color:
+                "bg-slate-600/50 shadow-[0px_40px_175px_1px] shadow-slate-100",
+            icon: "bi:question-circle",
+            title: "تراکنش معلق",
+            hue_deg: "[filter:_hue-rotate(0deg)]",
+        };
+    }
+});
+
+const statusTitle = computed(() => {
+    if (transaction.value?.bank_result?.status == "succeeded") {
+        return "";
+    } else if (transaction.value?.bank_result?.status == "canceled") {
+        return "";
+    } else {
+        return "";
+    }
+});
 </script>
 
 <template>
-    <div class="w-full flex-col-center gap-3 h-svh relative">
+    <div class="w-full flex-col-center container gap-3 h-svh">
         <div
-            class="bg-[url(/img/pattern-1.png)] -z-10 size-full fixed inset-0 opacity-70"
+            class="pattern -z-10 size-full fixed inset-0 opacity-90"
             :style="{
                 backgroundSize: 150,
                 mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0.3) 80%)',
             }"
         />
 
-        <NuxtImg src="/logo/logo-col.png" class="size-44 -mt-12" />
+        <div class="max-w-[500px] w-full relative">
+            <NuxtImg
+                class="aspect-square w-[220px] md:w-[280px] lg:w-[320px] absolute -top-[70px] md:-top-[110px] lg:-top-[138px] left-1/2 -translate-x-1/2 z-10 [filter:_drop-shadow(0px_4px_20px_rgba(0, 0, 0, 0.15))]"
+                src="/img/heymlz/heymlz-seat.gif"
+                :class="statusVariants.hue_deg"
+            />
 
-        <div
-            class="max-w-[500px] w-full p-6 gap-6 flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-3xl relative overflow-hidden"
-        >
             <div
-                class="w-full h-[5rem] bg-success-500 absolute left-0 top-0 flex-center gap-2 text-white"
+                class="w-full h-5/6 absolute rounded-3xl -z-3 -bottom-1 left-1/2 -translate-x-1/2"
+                :class="statusVariants.after_background_color"
+            />
+
+            <div
+                class="w-full p-5 lg:p-6 gap-5 lg:gap-6 flex flex-col items-center bg-white border shadow-black/10 justify-center overflow-hidden border-slate-300 rounded-3xl relative mt-20 z-1"
             >
-                <Icon name="bi:check" size="28" />
-                <h1 class="typo-h-6 font-normal">تراکنش موفق</h1>
-            </div>
+                <div
+                    class="w-full h-[4rem] lg:h-[5.2rem] absolute left-0 top-0 flex-center gap-2"
+                    :class="[
+                        statusVariants.background_color,
+                        statusVariants.text_color,
+                    ]"
+                >
+                    <Icon
+                        :name="statusVariants.icon"
+                        class="text-2xl lg:text-3xl"
+                    />
+                    <h1 class="text-lg lg:text-2xl font-normal">
+                        {{ statusVariants.title }}
+                    </h1>
+                </div>
 
-            <div class="w-full flex flex-col gap-5 pt-[5.5rem] p-1">
                 <div
-                    class="w-full flex flex-row-reverse items-center justify-between"
+                    class="w-full flex flex-col gap-4 lg:gap-5 pt-[4.5rem] lg:pt-[5.5rem] p-1"
                 >
-                    <span>مبلغ تراكنش </span>
-                    <span>١٢٣ تومان</span>
-                </div>
-                <div
-                    class="w-full flex flex-row-reverse items-center justify-between"
-                >
-                    <span>شماره پيكَيرى </span>
-                    <span>١٢٣ تومان</span>
-                </div>
-                <div
-                    class="w-full flex flex-row-reverse items-center justify-between"
-                >
-                    <span>شماره ارجاع </span>
-                    <span>١٢٣ تومان</span>
-                </div>
-                <div
-                    class="w-full flex flex-row-reverse items-center justify-between"
-                >
-                    <span>تاريخ و ساعت </span>
-                    <span>١٢٣ تومان</span>
-                </div>
-            </div>
-
-            <div class="w-full flex items-center justify-between gap-5">
-                <NuxtLink to="/" class="w-full">
-                    <Button
-                        class="w-full rounded-full"
-                        start-icon="ci:left-rotation"
-                        variant="secondary"
-                        >بازگشت به فروشگاه</Button
+                    <div
+                        v-if="transaction?.bank_result?.bank_type"
+                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                     >
-                </NuxtLink>
-                <Button
-                    class="w-full rounded-full bg-success-500 hover:text-success-500 hover:border-success-500 hover:**:!stroke-success-500"
-                    start-icon="ci:share"
-                    variant="primary"
-                    >دانلود فاکتور</Button
+                        <span class="font-medium">درگاه پرداخت</span>
+                        <span class="opacity-50">{{
+                            transaction?.bank_result?.bank_type
+                        }}</span>
+                    </div>
+                    <div
+                        v-if="transaction?.bank_result?.tracking_code"
+                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
+                    >
+                        <span class="font-medium">کد پیگیری</span>
+                        <span class="opacity-50 underline"
+                            >#{{
+                                transaction?.bank_result?.tracking_code
+                            }}</span
+                        >
+                    </div>
+                    <div
+                        v-if="transaction?.bank_result?.reference_number"
+                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
+                    >
+                        <span class="font-medium">کد ارجاع</span>
+                        <span class="opacity-50 underline"
+                            >#{{
+                                transaction?.bank_result?.reference_number
+                            }}</span
+                        >
+                    </div>
+                    <div
+                        v-if="transaction?.bank_result?.amount"
+                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
+                    >
+                        <span class="font-medium">مبلغ</span>
+                        <span class="opacity-50">{{
+                            transaction?.bank_result?.amount
+                        }}</span>
+                    </div>
+                    <div
+                        v-if="transaction?.bank_result?.created_at"
+                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
+                    >
+                        <span class="font-medium">تاریخ</span>
+                        <span class="opacity-50">{{
+                            formatToPersian(
+                                transaction?.bank_result?.created_at
+                            )
+                        }}</span>
+                    </div>
+                    <div
+                        v-if="transaction?.bank_result?.response_result"
+                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
+                    >
+                        <span class="font-medium">وضعیت پرداخت</span>
+                        <span class="opacity-50">{{
+                            transaction?.bank_result?.status_detail
+                        }}</span>
+                    </div>
+                </div>
+
+                <div
+                    v-if="transaction?.detail"
+                    class="w-full text-center opacity-50 text-sm lg:text-sm leading-[175%]"
                 >
+                    {{ transaction?.detail }}
+                </div>
+
+                <div
+                    class="w-full flex flex-col-reverse lg:flex-row items-center justify-between gap-4 lg:gap-5"
+                >
+                    <NuxtLink to="/" class="w-full">
+                        <Button
+                            class="w-full rounded-full max-lg:py-2"
+                            start-icon="ci:left-rotation"
+                            variant="secondary"
+                            >بازگشت به فروشگاه</Button
+                        >
+                    </NuxtLink>
+                    <Button
+                        v-if="transaction?.bank_result?.status == 'succeeded'"
+                        class="w-full rounded-full max-lg:py-2 bg-success-500 hover:text-success-500 hover:border-success-500 hover:**:!stroke-success-500"
+                        start-icon="ci:share"
+                        variant="primary"
+                        >دانلود فاکتور</Button
+                    >
+                </div>
             </div>
         </div>
     </div>
diff --git a/frontend/types/global.d.ts b/frontend/types/global.d.ts
index c353263..be20f78 100644
--- a/frontend/types/global.d.ts
+++ b/frontend/types/global.d.ts
@@ -290,4 +290,18 @@ declare global {
             | "BAHAMTA"
             | "BMI";
     };
+
+    type Transaction = {
+        detail: string;
+        bank_result?: {
+            status: "succeeded" | "canceled" | "pending";
+            bank_type: string;
+            tracking_code: string;
+            amount: string | null;
+            created_at: string;
+            response_result: string | null;
+            reference_number: string | null;
+            status_detail: string | null;
+        };
+    };
 }