diff --git a/frontend/pages/cart/checkout.vue b/frontend/pages/cart/checkout.vue
index 4fe5265..6a41544 100644
--- a/frontend/pages/cart/checkout.vue
+++ b/frontend/pages/cart/checkout.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // meta
 
+const route = useRoute();
+
 definePageMeta({
     layout: "cart",
     middleware: "check-is-logged-in",
@@ -9,45 +11,63 @@ definePageMeta({
     nextPage: { name: "checkout", label: "پرداخت" },
 });
 
-// types
-
-type PaymentGateway = {
-    id: number;
-    picture: string;
-    title: string;
-};
-
 // state
 
+const router = useRouter();
+
 const paymentGateways = ref<PaymentGateway[]>([
     {
         id: 1,
-        picture: "/zarinpal.png",
+        picture: "/img/gateways/zarinpal.png",
         title: "زرین پال",
+        type: "ZARINPAL",
     },
     {
         id: 2,
-        picture: "/saman-bank.png",
-        title: "بانک سامان",
+        picture: "/img/gateways/sep.png",
+        title: "سپ",
+        type: "SEP",
     },
     {
         id: 3,
-        picture: "/mellat-bank.png",
+        picture: "/img/gateways/mellat-bank.png",
         title: "بانک ملت",
+        type: "MELLAT",
     },
     {
         id: 4,
-        picture: "/jibimo.png",
-        title: "جیبی مو",
+        picture: "/img/gateways/idpay.png",
+        title: "آی دی پی",
+        type: "IDPAY",
     },
     {
         id: 5,
-        picture: "/idpay.png",
-        title: "آی دی پی",
+        picture: "/img/gateways/zibal.png",
+        title: "زیبال",
+        type: "ZIBAL",
+    },
+    {
+        id: 6,
+        picture: "/img/gateways/bahamta.png",
+        title: "باهمتا",
+        type: "BAHAMTA",
+    },
+    {
+        id: 7,
+        picture: "/img/gateways/bmi.png",
+        title: "بانک ملی",
+        type: "BMI",
     },
 ]);
 
-const selectedGateway = ref<PaymentGateway>(paymentGateways.value[0]);
+const selectedGateway = computed({
+    get: () => {
+        return !!route.query["gw"]
+            ? paymentGateways.value.find((i) => i.type == route.query["gw"])
+            : paymentGateways.value[0];
+    },
+    set: (nv: PaymentGateway) => router.push({ query: { gw: nv.type } }),
+});
 </script>
 
 <template>
@@ -64,24 +84,13 @@ const selectedGateway = ref<PaymentGateway>(paymentGateways.value[0]);
             <div
                 class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"
             >
-                <div
+                <Gateway
                     v-for="(gateway, index) in paymentGateways"
-                    @click="selectedGateway = { ...gateway }"
-                    :key="index"
-                    :class="
-                        selectedGateway.id == gateway.id
-                            ? 'ring-2 ring-offset-2 ring-black border-black'
-                            : 'border-slate-200'
-                    "
-                    class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer"
-                >
-                    <div class="aspect-square flex-center">
-                        <NuxtImg :src="gateway.picture" class="object-cover" />
-                    </div>
-                    <span class="typo-label-sm text-black">
-                        {{ gateway.title }}
-                    </span>
-                </div>
+                    :index="index"
+                    :gateway="gateway"
+                    :isSelected="selectedGateway?.id == gateway.id"
+                    @select="selectedGateway = { ...gateway }"
+                />
             </div>
         </div>
         <OrderSummary />