diff --git a/app/page.tsx b/app/page.tsx
index 5d42795..61b8b3b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,7 +3,14 @@
 import axios from "axios";
 import { FormEvent, useEffect, useState } from "react";
 import toast, { Toaster } from 'react-hot-toast';
-const localOptionsDefault = [
+
+type LocalPaymentOption = {
+  operator: string;
+  shortNumber: string;
+  isSelected: boolean;
+}
+
+const localOptionsDefault: LocalPaymentOption[] = [
 
   {
     operator: "zaad",
@@ -171,12 +178,12 @@ export default function Home() {
               <h2 className="text-xl mb-2">Local Payment Options</h2>
 
               {
-                localPaymentOptions.map((option, index) => (
+                localPaymentOptions.map(({operator, isSelected}, index) => (
                   <div
                     onClick={() => handlePaymentClickOption(index)}
 
-                    className={`w-full bg-gray-50 rounded border-2 ${option.isSelected && "border-blue-500"}  p-2  my-2 cursor-pointer`} key={option.operator}>
-                    <h2>{option.operator}</h2>
+                    className={`w-full bg-gray-50 rounded border-2 ${isSelected && "border-blue-500"}  p-2  my-2 cursor-pointer`} key={operator}>
+                    <h2>{operator}</h2>
                   </div>
                 ))
               }
diff --git a/package-lock.json b/package-lock.json
index 1065d13..f89b957 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1158,8 +1158,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -5386,7 +5385,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv": {
       "version": "6.12.6",
@@ -5774,8 +5774,7 @@
     "csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -6343,7 +6342,8 @@
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
       "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-scope": {
       "version": "7.2.2",
@@ -6680,7 +6680,8 @@
     "goober": {
       "version": "2.1.14",
       "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
-      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg=="
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "requires": {}
     },
     "gopd": {
       "version": "1.0.1",
@@ -8169,7 +8170,8 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
       "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ts-interface-checker": {
       "version": "0.1.13",