diff --git a/package-lock.json b/package-lock.json
index e392542f..06c35e7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "dynamites-ecomm-fe",
       "version": "0.0.0",
       "dependencies": {
+        "@mui/material": "^5.16.4",
         "@react-jvectormap/core": "^1.0.4",
         "@react-jvectormap/world": "^1.1.2",
         "@reduxjs/toolkit": "^2.2.5",
@@ -747,6 +748,28 @@
         "statuses": "^2.0.1"
       }
     },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.0.tgz",
+      "integrity": "sha512-hPV345J/tH0Cwk2wnU/3PBzORQ9HeX+kQSbwI+jslzpRCHE6fSGTohswksA/Ensr8znPzwfzKZCmAM9Lmlhp7g==",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/cache/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
@@ -760,11 +783,26 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
       "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz",
+      "integrity": "sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -2017,6 +2055,206 @@
         "node": ">=18"
       }
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.4.tgz",
+      "integrity": "sha512-rNdHXhclwjEZnK+//3SR43YRx0VtjdHnUFhMSGYmAMJve+KiwEja/41EYh8V3pZKqF2geKyfcFUenTfDTYUR4w==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.4.tgz",
+      "integrity": "sha512-dBnh3/zRYgEVIS3OE4oTbujse3gifA0qLMmuUk13ywsDCbngJsdgwW5LuYeiT5pfA8PGPGSqM7mxNytYXgiMCw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/core-downloads-tracker": "^5.16.4",
+        "@mui/system": "^5.16.4",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.4",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.4.tgz",
+      "integrity": "sha512-ZsAm8cq31SJ37SVWLRlu02v9SRthxnfQofaiv14L5Bht51B0dz6yQEoVU/V8UduZDCCIrWkBHuReVfKhE/UuXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.16.4",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.4.tgz",
+      "integrity": "sha512-0+mnkf+UiAmTVB8PZFqOhqf729Yh0Cxq29/5cA3VAyDVTRIUUQ8FXQhiAhUIbijFmM72rY80ahFPXIm4WDbzcA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.4.tgz",
+      "integrity": "sha512-ET1Ujl2/8hbsD611/mqUuNArMCGv/fIWO/f8B3ZqF5iyPHM2aS74vhTNyjytncc4i6dYwGxNk+tLa7GwjNS0/w==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.16.4",
+        "@mui/styled-engine": "^5.16.4",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.4",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.15",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.15.tgz",
+      "integrity": "sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.4.tgz",
+      "integrity": "sha512-nlppYwq10TBIFqp7qxY0SvbACOXeOjeVL3pOcDsK0FT8XjrEXh9/+lkg8AEIzD16z7YfiJDQjaJG2OLkE7BxNg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2096,6 +2334,15 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-jvectormap/core": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@react-jvectormap/core/-/core-1.0.4.tgz",
@@ -2854,6 +3101,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/reactcss": {
       "version": "1.2.12",
       "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.12.tgz",
@@ -4872,6 +5127,15 @@
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "peer": true
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.4.5",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
@@ -10024,6 +10288,21 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/reactcss": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
diff --git a/package.json b/package.json
index 0d92c666..d2e52ca0 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "pre-commit": "npm run lint:fix && npm run format"
   },
   "dependencies": {
+    "@mui/material": "^5.16.4",
     "@react-jvectormap/core": "^1.0.4",
     "@react-jvectormap/world": "^1.1.2",
     "@reduxjs/toolkit": "^2.2.5",
@@ -26,8 +27,6 @@
     "axios": "^1.7.2",
     "axios-mock-adapter": "^1.22.0",
     "chart.js": "^4.4.3",
-    "chart.js": "^4.4.3",
-    "date-fns": "^3.6.0",
     "cloudinary": "^2.2.0",
     "cloudinary-core": "^2.13.1",
     "date-fns": "^3.6.0",
@@ -88,6 +87,7 @@
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "husky": "^8.0.0",
     "jest": "^29.7.0",
     "jsdom": "^24.1.0",
     "lint-staged": "^15.2.5",
@@ -99,7 +99,6 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vitest": "^1.6.0",
-    "husky": "^8.0.0"
+    "vitest": "^1.6.0"
   }
 }
diff --git a/src/assets/icons/Airtel.png b/src/assets/icons/Airtel.png
new file mode 100644
index 00000000..895e2935
Binary files /dev/null and b/src/assets/icons/Airtel.png differ
diff --git a/src/assets/icons/MemberDiscount.png b/src/assets/icons/MemberDiscount.png
new file mode 100644
index 00000000..6f74e16b
Binary files /dev/null and b/src/assets/icons/MemberDiscount.png differ
diff --git a/src/assets/icons/add.svg b/src/assets/icons/add.svg
new file mode 100644
index 00000000..331b67e2
--- /dev/null
+++ b/src/assets/icons/add.svg
@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="19.2562" cy="19.3724" r="19.1493" fill="#6D31ED"/>
+<g clip-path="url(#clip0_492_2098)">
+<path d="M19.7352 28.6481C24.5935 28.6481 28.5319 24.7097 28.5319 19.8514C28.5319 14.9931 24.5935 11.0547 19.7352 11.0547C14.8769 11.0547 10.9385 14.9931 10.9385 19.8514C10.9385 24.7097 14.8769 28.6481 19.7352 28.6481Z" stroke="white" stroke-width="1.25667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9653 19.8516H23.5054" stroke="white" stroke-width="1.25667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.7354 16.0815V23.6216" stroke="white" stroke-width="1.25667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_492_2098">
+<rect width="20.1067" height="20.1067" fill="white" transform="translate(9.68164 9.79785)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/discount.svg b/src/assets/icons/discount.svg
new file mode 100644
index 00000000..b95b79d5
--- /dev/null
+++ b/src/assets/icons/discount.svg
@@ -0,0 +1,4 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26.861" cy="26.9353" r="26.861" fill="#F2F2F2"/>
+<path d="M20.7275 33.113C21.9586 33.113 22.9659 34.1203 22.9659 35.3514C22.9659 36.5826 21.9586 37.5898 20.7275 37.5898C19.4963 37.5898 18.489 36.5826 18.489 35.3514C18.489 34.1203 19.4963 33.113 20.7275 33.113ZM31.9196 33.113C33.1507 33.113 34.158 34.1203 34.158 35.3514C34.158 36.5826 33.1507 37.5898 31.9196 37.5898C30.6884 37.5898 29.6811 36.5826 29.6811 35.3514C29.6811 34.1203 30.6884 33.113 31.9196 33.113ZM20.9513 29.5315C20.9513 29.6434 21.0632 29.7554 21.1752 29.7554H34.158V31.9938H20.7275C19.4963 31.9938 18.489 30.9865 18.489 29.7554C18.489 29.3077 18.601 28.9719 18.7129 28.6362L20.1679 25.9501L16.2506 17.4441H14.0122V15.2056H17.7056L22.5182 25.2785H30.3527L34.7176 17.4441L36.6203 18.5633L32.2553 26.3977C31.9196 27.0693 31.1361 27.5169 30.3527 27.5169H21.9586L20.9513 29.3077V29.5315ZM23.4136 14.0864C24.3089 14.0864 24.9805 14.758 24.9805 15.6533C24.9805 16.5487 24.3089 17.2202 23.4136 17.2202C22.5182 17.2202 21.8467 16.5487 21.8467 15.6533C21.8467 14.758 22.6301 14.0864 23.4136 14.0864ZM29.2335 23.0401C28.3381 23.0401 27.6666 22.3686 27.6666 21.4732C27.6666 20.5778 28.3381 19.9063 29.2335 19.9063C30.1288 19.9063 30.8004 20.5778 30.8004 21.4732C30.8004 22.3686 30.0169 23.0401 29.2335 23.0401ZM23.1897 23.0401L21.8467 21.6971L29.4573 14.0864L30.8004 15.4295L23.1897 23.0401Z" fill="#6D31ED"/>
+</svg>
diff --git a/src/assets/icons/masterCARD.svg b/src/assets/icons/masterCARD.svg
new file mode 100644
index 00000000..56d537c3
--- /dev/null
+++ b/src/assets/icons/masterCARD.svg
@@ -0,0 +1,5 @@
+<svg width="68" height="46" viewBox="0 0 68 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.0845 9.32666H44.323V34.911H30.0845V9.32666Z" fill="#FF5F00"/>
+<path d="M30.9885 21.7698C30.9885 16.5716 33.4294 11.9609 37.181 8.97754C34.4239 6.80788 30.9434 5.49707 27.1465 5.49707C18.151 5.49707 10.8735 12.7745 10.8735 21.7698C10.8735 30.7651 18.151 38.0425 27.1463 38.0425C30.9432 38.0425 34.4237 36.7317 37.181 34.5619C33.4294 31.6238 30.9885 26.968 30.9885 21.7698Z" fill="#EB001B"/>
+<path d="M63.5338 21.7698C63.5338 30.7649 56.2563 38.0425 47.2609 38.0425C43.4639 38.0425 39.9834 36.7317 37.2261 34.5619C41.0231 31.5787 43.4188 26.968 43.4188 21.7698C43.4188 16.5716 40.9778 11.9609 37.2261 8.97754C39.9832 6.80788 43.4639 5.49707 47.2609 5.49707C56.2563 5.49707 63.5338 12.8198 63.5338 21.7698Z" fill="#F79E1B"/>
+</svg>
diff --git a/src/assets/icons/moneyReturn.png b/src/assets/icons/moneyReturn.png
new file mode 100644
index 00000000..efd7cd9f
Binary files /dev/null and b/src/assets/icons/moneyReturn.png differ
diff --git a/src/assets/icons/moneyReturn.svg b/src/assets/icons/moneyReturn.svg
new file mode 100644
index 00000000..0ea7fe08
--- /dev/null
+++ b/src/assets/icons/moneyReturn.svg
@@ -0,0 +1,13 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26.861" cy="26.9357" r="26.861" fill="#F2F2F2"/>
+<g clip-path="url(#clip0_492_2228)">
+<path d="M39.7541 36.4712L34.7177 39.8288V38.15H26.7433L30.1009 34.7924H34.7177V33.1136L39.7541 36.4712ZM12.8931 16.3254L17.9295 12.9678V14.6466H25.9039L22.5463 18.0042H17.9295V19.683L12.8931 16.3254ZM29.2447 12.9678L12.8931 29.3194L23.4024 39.8288L39.7541 23.4772L29.2447 12.9678ZM15.2266 29.3194L29.2447 15.3013L37.4206 23.4772L23.4024 37.4953L15.2266 29.3194Z" fill="#6D31ED"/>
+<path d="M19.8939 29.3193L18.7188 30.4945L22.2275 34.0032L23.4026 32.8281L24.645 33.9864L29.2449 29.3193C28.4663 30.0753 27.4216 30.4945 26.3364 30.4865C25.2513 30.4785 24.2128 30.0438 23.4455 29.2765C22.6781 28.5092 22.2435 27.4707 22.2355 26.3856C22.2275 25.3004 22.6467 24.2556 23.4026 23.4771L18.7355 28.077L19.8939 29.3193Z" fill="#6D31ED"/>
+<path d="M33.9117 22.3188L30.403 18.8101L29.2278 19.9852L28.0023 18.8101L23.4023 23.4772C24.1809 22.7212 25.2257 22.302 26.3108 22.31C27.396 22.318 28.4344 22.7526 29.2018 23.52C29.9691 24.2873 30.4038 25.3258 30.4118 26.4109C30.4198 27.4961 30.0005 28.5408 29.2446 29.3194L33.9117 24.7195L32.7366 23.5443L33.9117 22.3188Z" fill="#6D31ED"/>
+</g>
+<defs>
+<clipPath id="clip0_492_2228">
+<rect width="26.861" height="26.861" fill="white" transform="translate(12.8931 12.9678)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/mtn-momo.jpg b/src/assets/icons/mtn-momo.jpg
new file mode 100644
index 00000000..606a810e
Binary files /dev/null and b/src/assets/icons/mtn-momo.jpg differ
diff --git a/src/assets/icons/mtn_momo.png b/src/assets/icons/mtn_momo.png
new file mode 100644
index 00000000..bfbef758
Binary files /dev/null and b/src/assets/icons/mtn_momo.png differ
diff --git a/src/assets/icons/support.svg b/src/assets/icons/support.svg
new file mode 100644
index 00000000..4c2b7bcc
--- /dev/null
+++ b/src/assets/icons/support.svg
@@ -0,0 +1,11 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26.861" cy="26.9357" r="26.861" fill="#F2F2F2"/>
+<g clip-path="url(#clip0_492_2219)">
+<path d="M25.1024 30.0453L25.0966 30.0318C24.9808 30.0045 24.8657 29.9744 24.7513 29.9417L24.7426 29.9388C23.6483 29.6242 22.6377 29.0701 21.7841 28.3166C20.8453 27.4884 20.1233 26.4431 19.6811 25.2719C19.239 24.1007 19.09 22.8392 19.2473 21.5972C19.4046 20.3552 19.8633 19.1706 20.5834 18.1466C21.3036 17.1225 22.2633 16.2902 23.3789 15.7222C24.4945 15.1542 25.7321 14.8677 26.9838 14.8877C28.2355 14.9077 29.4634 15.2336 30.5602 15.837C31.6571 16.4405 32.5897 17.303 33.2767 18.3495C33.9638 19.3961 34.3843 20.5948 34.5018 21.8411C34.5392 22.2373 34.214 22.5606 33.8159 22.5606C33.4187 22.5606 33.1012 22.2373 33.0552 21.8421C32.9283 20.7516 32.5159 19.714 31.8595 18.834C31.203 17.954 30.3259 17.263 29.3168 16.8307C28.3077 16.3984 27.2023 16.2401 26.1125 16.372C25.0226 16.5038 23.9868 16.921 23.1099 17.5815C22.233 18.242 21.546 19.1222 21.1183 20.1333C20.6906 21.1444 20.5375 22.2505 20.6743 23.3398C20.8112 24.429 21.2332 25.4628 21.8977 26.3367C22.5622 27.2106 23.4456 27.8936 24.4587 28.3166L24.497 28.3329C24.6889 28.4115 24.8859 28.4809 25.088 28.541C25.2578 28.1308 25.5646 27.7921 25.9562 27.5827C26.3478 27.3734 26.7999 27.3063 27.2354 27.393C27.6709 27.4797 28.0628 27.7148 28.3444 28.0581C28.626 28.4015 28.7797 28.8318 28.7795 29.2759C28.7799 29.7168 28.6284 30.1445 28.3505 30.4868C28.0727 30.8292 27.6853 31.0654 27.2537 31.1557C26.8222 31.246 26.3726 31.1849 25.9808 30.9827C25.589 30.7804 25.2788 30.4494 25.1024 30.0453ZM24.1565 31.2655C22.4523 30.7355 20.9412 29.7168 19.8107 28.3358C19.1102 28.4178 18.4641 28.7543 17.9953 29.2813C17.5265 29.8083 17.2675 30.4892 17.2676 31.1945V31.8805C17.2676 35.4472 21.3063 37.9098 26.8608 37.9098C32.4153 37.9098 36.454 35.3119 36.454 31.8805V31.1945C36.454 30.4312 36.1508 29.6992 35.6111 29.1595C35.0714 28.6198 34.3394 28.3166 33.5761 28.3166H30.0793C30.3056 29.0745 30.2571 29.8879 29.9423 30.6135C29.6275 31.3391 29.0666 31.9303 28.3586 32.2829C27.6505 32.6354 26.8407 32.7266 26.072 32.5405C25.3032 32.3544 24.6249 31.9029 24.1565 31.2655ZM31.6574 22.5606C31.6574 21.1101 31.0147 19.8102 29.9968 18.9305C29.4861 18.49 28.8883 18.1621 28.2423 17.9683C27.5962 17.7744 26.9166 17.719 26.2477 17.8056C25.5789 17.8922 24.9358 18.1189 24.3604 18.4709C23.7851 18.8229 23.2905 19.2923 22.9088 19.8484C22.5272 20.4045 22.2671 21.0348 22.1456 21.6983C22.0241 22.3617 22.0438 23.0433 22.2036 23.6986C22.3633 24.3538 22.6595 24.968 23.0727 25.5011C23.4859 26.0342 24.0069 26.4741 24.6016 26.7922C25.2197 26.2299 26.0252 25.9183 26.8608 25.9183C27.6967 25.9181 28.5026 26.2297 29.121 26.7922C29.8874 26.3828 30.5282 25.7728 30.9749 25.0275C31.4217 24.2822 31.6576 23.4296 31.6574 22.5606Z" fill="#6D31ED"/>
+</g>
+<defs>
+<clipPath id="clip0_492_2219">
+<rect width="19.34" height="24.7122" fill="white" transform="translate(17.1909 14.0425)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/supportIcon.png b/src/assets/icons/supportIcon.png
new file mode 100644
index 00000000..be0b0e9d
Binary files /dev/null and b/src/assets/icons/supportIcon.png differ
diff --git a/src/assets/icons/truck.png b/src/assets/icons/truck.png
new file mode 100644
index 00000000..816173db
Binary files /dev/null and b/src/assets/icons/truck.png differ
diff --git a/src/assets/icons/truck.svg b/src/assets/icons/truck.svg
new file mode 100644
index 00000000..34fa8375
--- /dev/null
+++ b/src/assets/icons/truck.svg
@@ -0,0 +1,5 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26.861" cy="26.9357" r="26.861" fill="#F2F2F2"/>
+<path d="M39.0157 33.6286C39.0157 34.3707 38.7209 35.0824 38.1962 35.6071C37.6714 36.1318 36.9597 36.4266 36.2177 36.4266C35.4756 36.4266 34.7639 36.1318 34.2392 35.6071C33.7144 35.0824 33.4196 34.3707 33.4196 33.6286C33.4196 32.8865 33.7144 32.1748 34.2392 31.6501C34.7639 31.1254 35.4756 30.8306 36.2177 30.8306C36.9597 30.8306 37.6714 31.1254 38.1962 31.6501C38.7209 32.1748 39.0157 32.8865 39.0157 33.6286ZM27.8236 33.6286C27.8236 34.3707 27.5288 35.0824 27.0041 35.6071C26.4793 36.1318 25.7676 36.4266 25.0256 36.4266C24.2835 36.4266 23.5718 36.1318 23.0471 35.6071C22.5223 35.0824 22.2275 34.3707 22.2275 33.6286C22.2275 32.8865 22.5223 32.1748 23.0471 31.6501C23.5718 31.1254 24.2835 30.8306 25.0256 30.8306C25.7676 30.8306 26.4793 31.1254 27.0041 31.6501C27.5288 32.1748 27.8236 32.8865 27.8236 33.6286Z" stroke="#6D31ED" stroke-width="1.61166" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.4198 33.6284H27.8238M19.4297 18.519H30.6218C32.2044 18.519 32.9956 18.519 33.487 19.0115C33.9794 19.5017 33.9794 20.293 33.9794 21.8767V31.39M34.539 21.3171H36.5547C37.4837 21.3171 37.9481 21.3171 38.3331 21.5353C38.7182 21.7524 38.9565 22.1509 39.4344 22.9478L41.336 26.1151C41.5733 26.5113 41.6919 26.7105 41.7535 26.9299C41.8139 27.1504 41.8139 27.3809 41.8139 27.8432V30.8304C41.8139 31.8768 41.8139 32.3995 41.5889 32.789C41.4416 33.0442 41.2297 33.2561 40.9745 33.4034C40.585 33.6284 40.0623 33.6284 39.0159 33.6284M19.4297 28.5919V30.8304C19.4297 31.8768 19.4297 32.3995 19.6546 32.789C19.802 33.0442 20.0139 33.2561 20.2691 33.4034C20.6586 33.6284 21.1813 33.6284 22.2277 33.6284M19.4297 21.8767H26.1449M19.4297 25.2343H23.9065" stroke="#6D31ED" stroke-width="1.61166" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/visaIcon.svg b/src/assets/icons/visaIcon.svg
new file mode 100644
index 00000000..16f4c63c
--- /dev/null
+++ b/src/assets/icons/visaIcon.svg
@@ -0,0 +1,9 @@
+<svg width="68" height="23" viewBox="0 0 68 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.2071 7.74466C35.1685 10.7958 37.9263 12.4984 40.0038 13.5108C42.1383 14.5494 42.8552 15.2155 42.8467 16.1444C42.8308 17.5659 41.1442 18.1933 39.5659 18.2176C36.8122 18.2603 35.2111 17.4742 33.9383 16.8796L32.9463 21.5213C34.2234 22.1098 36.5881 22.623 39.0402 22.6455C44.7962 22.6455 48.562 19.8042 48.5824 15.3988C48.6049 9.80783 40.849 9.49837 40.902 6.99935C40.9203 6.24159 41.6433 5.43296 43.2277 5.22736C44.012 5.1235 46.1769 5.04401 48.6314 6.17429L49.5948 1.68338C48.2748 1.20275 46.5783 0.742533 44.4661 0.742533C39.0484 0.742533 35.2379 3.62255 35.2071 7.74466ZM58.8516 1.12936C57.8006 1.12936 56.9148 1.74246 56.5195 2.6833L48.2973 22.3156H54.0491L55.1937 19.1524H62.2223L62.8863 22.3156H67.9559L63.532 1.12936H58.8516ZM59.6563 6.85257L61.3162 14.8083H56.7702L59.6563 6.85257ZM28.2334 1.12963L23.6995 22.3154H29.1806L33.7123 1.1291L28.2334 1.12963ZM20.1251 1.12963L14.4201 15.5496L12.1124 3.28845C11.8416 1.91971 10.7723 1.12936 9.58479 1.12936H0.259039L0.128418 1.74458C2.04295 2.16002 4.2182 2.83008 5.53607 3.54704C6.34258 3.985 6.57256 4.36786 6.83751 5.40859L11.2084 22.3156H17.0005L25.8806 1.12936L20.1251 1.12963Z" fill="url(#paint0_linear_456_2138)"/>
+<defs>
+<linearGradient id="paint0_linear_456_2138" x1="3118.43" y1="66.5829" x2="3181.83" y2="-2182.88" gradientUnits="userSpaceOnUse">
+<stop stop-color="#222357"/>
+<stop offset="1" stop-color="#254AA5"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Cart/CartCollection.tsx b/src/components/Cart/CartCollection.tsx
new file mode 100644
index 00000000..5e48d5c9
--- /dev/null
+++ b/src/components/Cart/CartCollection.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+// interface CartProps {
+//   id: number;
+//   name: string;
+// }
+
+function CartCollection() {
+
+  return (
+    <div className="flex items-center justify-between border border-gray-200  bg-blue-100 rounded-lg bg-[15ABFF]">
+      <div className="grid grid-cols-2 mr-4">
+        <img src="https://images.pexels.com/photos/190819/pexels-photo-190819.jpeg" alt="Item 1" className="w-12 h-12 m-1 rounded-sm object-cover" />
+        <img src="https://images.pexels.com/photos/190819/pexels-photo-190819.jpeg" alt="Item 1" className="w-12 h-12 m-1 rounded-sm object-cover" /> 
+        <img src="https://images.pexels.com/photos/190819/pexels-photo-190819.jpeg" alt="Item 1" className="w-12 h-12 m-1  rounded-sm object-cover" />
+        <img src="https://images.pexels.com/photos/190819/pexels-photo-190819.jpeg" alt="Item 1" className="w-12 h-12 m-1 rounded-sm object-cover" />
+      </div>
+      <div className="flex flex-col">
+        <h2 className="text-xl font-semibold">Cart Collection</h2>
+        <p className="text-gray-500">My saved collection for summer sales</p>
+      </div>
+    </div>
+  );
+}
+
+export default CartCollection;
diff --git a/src/features/Payments/paymentSlice.ts b/src/features/Payments/paymentSlice.ts
new file mode 100644
index 00000000..b75fd431
--- /dev/null
+++ b/src/features/Payments/paymentSlice.ts
@@ -0,0 +1,122 @@
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { showErrorToast, showSuccessToast } from '@/utils/ToastConfig';
+
+interface PaymentState {
+  loading: boolean;
+  error: string | null;
+}
+
+const initialState: PaymentState = {
+  loading: false,
+  error: null,
+};
+
+interface MomoPaymentParams {
+  momoNumber: string;
+  orderId: number;
+}
+
+export const makeMomoPayment = createAsyncThunk(
+  'payment/momoPayment',
+  async ({ momoNumber, orderId }: MomoPaymentParams, { rejectWithValue }) => {
+    try {
+      const tokenFromStorage = localStorage.getItem('token') || '';
+      const response = await axios.post(
+        `${import.meta.env.VITE_BASE_URL}/buyer/momoPay`,
+        {
+          momoNumber,
+          orderId,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${tokenFromStorage}`,
+          },
+        }
+      );
+      showSuccessToast(response.data.message);
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error('Error response:', error.response);
+        const errorMessage = error.response?.data?.message || 'Payment failed';
+        showErrorToast(errorMessage);
+        return rejectWithValue(error.response?.data || 'Payment failed');
+      }
+      console.error('Unexpected error:', error);
+      showErrorToast('Payment failed');
+      return rejectWithValue('Payment failed');
+    }
+  }
+);
+
+interface StripePaymentParams {
+  token: string;
+  orderId: number;
+}
+
+export const makeStripePayment = createAsyncThunk(
+  'payment/stripePayment',
+  async ({ token, orderId }: StripePaymentParams, { rejectWithValue }) => {
+    try {
+      const tokenFromStorage = localStorage.getItem('token') || '';
+      const response = await axios.post(
+        `${import.meta.env.VITE_BASE_URL}/buyer/payment`,
+        {
+          token,
+          orderId,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${tokenFromStorage}`,
+          },
+        }
+      );
+      showSuccessToast(response.data.message);
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        console.error('Error response:', error.response);
+        const errorMessage = error.response?.data?.message || 'Payment failed';
+        showErrorToast(errorMessage);
+        return rejectWithValue(error.response?.data || 'Payment failed');
+      }
+      console.error('Unexpected error:', error);
+      showErrorToast('Payment failed');
+      return rejectWithValue('Payment failed');
+    }
+  }
+);
+
+const paymentSlice = createSlice({
+  name: 'payment',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(makeMomoPayment.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(makeMomoPayment.fulfilled, (state) => {
+        state.loading = false;
+      })
+      .addCase(makeMomoPayment.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message || 'Payment failed';
+      })
+      .addCase(makeStripePayment.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(makeStripePayment.fulfilled, (state) => {
+        state.loading = false;
+      })
+      .addCase(makeStripePayment.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message || 'Payment failed';
+      });
+  },
+});
+
+export default paymentSlice.reducer;
diff --git a/src/pages/OrderCompletion.tsx b/src/pages/OrderCompletion.tsx
new file mode 100644
index 00000000..e713b7fd
--- /dev/null
+++ b/src/pages/OrderCompletion.tsx
@@ -0,0 +1,197 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Select, MenuItem, FormControl } from '@mui/material';
+import { AppDispatch, RootState } from '@/app/store'; // Adjust the path as necessary
+import { makeMomoPayment, makeStripePayment } from '@/features/Payments/paymentSlice';
+import truck from '@/assets/icons/truck.svg';
+import moneyReturn from '@/assets/icons/moneyReturn.svg';
+import supportIcon from '@/assets/icons/support.svg';
+import discountIcon from '@/assets/icons/discount.svg';
+import visaIcon from '@/assets/icons/visaIcon.svg';
+import masterCardIcon from '@/assets/icons/masterCARD.svg';
+import airtel from '@/assets/icons/Airtel.png';
+import momo from '@/assets/icons/mtn_momo.png';
+import add from '@/assets/icons/add.svg';
+import CartCollection from '@/components/Cart/CartCollection';
+import HSButton from '@/components/form/HSButton';
+
+const OrderCompletion = () => {
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('Debit Card');
+  const [selectedCard, setSelectedCard] = useState('BK Bank');
+  const [selectedMomoOption, setSelectedMomoOption] = useState('MTN Mobile Money');
+  const dispatch = useDispatch<AppDispatch>();
+
+  const handlePaymentMethodChange = (event: { target: any }) => {
+    setSelectedPaymentMethod(event.target.value);
+  };
+
+  const handleCardChange = (event: { target: { value: React.SetStateAction<string> } }) => {
+    setSelectedCard(event.target.value);
+  };
+
+  const handleMomoOptionChange = (event: { target: { value: React.SetStateAction<string> } }) => {
+    setSelectedMomoOption(event.target.value);
+  };
+
+  const handlePayment = () => {
+    const orderId = 48; 
+    if (selectedPaymentMethod === 'Momo Payment') {
+      const momoNumber = '0780609878'; 
+      dispatch(makeMomoPayment({ momoNumber, orderId }));
+    } else if (selectedPaymentMethod === 'Debit Card Payment') {
+      const token = 'tok_visa'; 
+      dispatch(makeStripePayment({ token, orderId }));
+    }
+  };
+
+  const momoOptions = [
+    { value: 'MTN Mobile Money', label: 'MTN Mobile Money', icon: momo },
+    { value: 'Airtel Money', label: 'Airtel Money', icon: airtel },
+  ];
+
+  const cardOptions = [
+    { value: 'BK Bank', label: 'BK Bank **** **** **** 1234', icon: visaIcon },
+    { value: 'Equity Bank', label: 'Equity Bank **** **** **** 1234', icon: masterCardIcon },
+  ];
+
+  return (
+    <div className="p-6">
+      <div className="md:flex w-full justify-center">
+        <div className="flex flex-col   mb-6 mt-8 mr-20">
+          <h1 className="text-2xl font-semibold">Complete your Order</h1>
+          <p className="text-gray-600 mt-5">
+            You are just a few steps away to finish your order..
+          </p>
+        </div>
+
+        <div className="flex flex-col grid grid-cols-2 justify-between mb-6">
+          <div className="flex items-center p-4 rounded-md">
+            <img src={truck} alt="" className="bg-gray-100 rounded-full mr-2" />
+            <div>
+              <p>Free Delivery</p>
+              <p className="text-gray-400">Free shipping on all order</p>
+            </div>
+          </div>
+          <div className="flex items-center p-4 rounded-md">
+            <img
+              src={moneyReturn}
+              alt=""
+              className="bg-gray-100 rounded-full mr-2"
+            />
+            <div>
+              <p>Money Return</p>
+              <p className="text-gray-400">Back guarantee under 7 days</p>
+            </div>
+          </div>
+          <div className="flex items-center p-4 rounded-md">
+            <img
+              src={supportIcon}
+              alt=""
+              className="bg-gray-100 rounded-full mr-2"
+            />
+            <div>
+              <p>Online Support 24/7</p>
+              <p className="text-gray-400">Support Online 24 hours a day</p>
+            </div>
+          </div>
+          <div className="flex items-center p-4 rounded-md">
+            <img
+              src={discountIcon}
+              alt=""
+              className="bg-gray-100 rounded-full mr-2"
+            />
+            <div>
+              <p>Member Discount</p>
+              <p className="text-gray-400">On every order over $ 20.00</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex w-full justify-center">
+        <div className="w-1/2">
+          <h2 className="text-xl font-semibold mb-4">Payment Methods</h2>
+          <div className="flex flex-col w-4/5 mb-4">
+            <button
+              onClick={() => handlePaymentMethodChange({ target: { value: 'Momo Payment' } })}
+              className={`flex items-center justify-between py-2 px-4 mb-2 rounded-md border ${selectedPaymentMethod === 'Momo Payment' ? 'bg-gray-100' : 'bg-gray-100'}`}
+            >
+              <span>Momo Payment</span>
+              <i className={`fas ${selectedPaymentMethod === 'Momo Payment' ? 'fa-chevron-up' : 'fa-chevron-right'}`}></i>
+            </button>
+            <button
+              onClick={() => handlePaymentMethodChange({ target: { value: 'Debit Card Payment' } })}
+              className={`flex items-center justify-between py-2 px-4 rounded-md border ${selectedPaymentMethod === 'Debit Card Payment' ? 'bg-gray-300' : 'bg-gray-100'}`}
+            >
+              <span>Debit Card Payment</span>
+              <i className={`fas ${selectedPaymentMethod === 'Debit Card Payment' ? 'fa-chevron-up' : 'fa-chevron-right'}`}></i>
+            </button>
+          </div>
+          {selectedPaymentMethod === 'Momo Payment' && (
+            <div className="mb-4 w-4/5">
+              <h3 className="text-lg font-semibold mb-2">Momo Options</h3>
+              <FormControl fullWidth>
+                <Select labelId="momo-select-label" value={selectedMomoOption} onChange={handleMomoOptionChange}>
+                  {momoOptions.map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                      <img src={option.icon} alt="" className="inline-block mr-2 w-[35px]" />
+                      {option.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </div>
+          )}
+          {selectedPaymentMethod === 'Debit Card Payment' && (
+            <div className="mb-4 w-4/5">
+              <h3 className="text-lg font-semibold mb-2">My Cards</h3>
+              <FormControl fullWidth>
+                <Select labelId="card-select-label" value={selectedCard} onChange={handleCardChange}>
+                  {cardOptions.map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                      <img src={option.icon} alt="" className="inline-block mr-2 w-[40px]" />
+                      {option.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <div className="flex w-full p-2 bg-gray-100 border rounded-md">
+                <img src={add} alt="" className="inline-block mr-2 w-[25px]" />
+                <button className="">Add New Card</button>
+              </div>
+            </div>
+          )}
+          <div className="flex w-4/5 p-2 bg-gray-100 border rounded-md">
+            <img src={add} alt="" className="inline-block mr-2 w-[25px]" />
+            <button className="">Add New Payment</button>
+          </div>
+        </div>
+        <div className="bg-gray-50 p-4 w-1/3 rounded-md mb-6">
+          <CartCollection />
+          <div className="flex flex-col border border-gray-100 rounded-lg p-2 mt-2 ">
+            <p>Promo code</p>
+            <div className="flex items-center">
+              <input type="text" className="border h-[6vh] w-full p-2" />
+              <HSButton title="Apply" styles="m-5" />
+            </div>
+            <div className="flex w-full justify-between px-5">
+              <p>Total</p>
+              <p>$ 200.00</p>
+            </div>
+            <div className="flex w-full justify-between px-5 py-2 my-5 border-b border-gray-600">
+              <p>Shipping</p>
+              <p>$ 200.00</p>
+            </div>
+            <div className="flex w-full justify-between px-5 p-5">
+              <p>Total Cost</p>
+              <p>$ 400.00</p>
+            </div>
+            <HSButton title="Pay Here" styles="m-5" onClick={handlePayment} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrderCompletion;
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index d95608b8..4c6dc335 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -23,6 +23,7 @@ import Cart from '@/components/Cart/Cart';
 import Seller from '@/pages/Seller';
 import CheckoutPage from '@/pages/Checkout';
 import Aboutus from '@/components/home/Aboutus';
+import OrderCompletion from '@/pages/OrderCompletion';
 
 function AppRoutes() {
   return (
@@ -44,6 +45,7 @@ function AppRoutes() {
         <Route path="wishlist" element={<Wishlist />} />
         <Route path="/cart" element={<Cart />} />
         <Route path="/checkout" element={<CheckoutPage />} />
+        <Route path="/order-completion" element={<OrderCompletion />} />
       </Route>
       <Route path="/signup" element={<SignUp />} />
       <Route path="/signIn" element={<SignIn />} />