diff --git a/TODO.md b/TODO.md
index 3ea3f79..2eed767 100644
--- a/TODO.md
+++ b/TODO.md
@@ -6,15 +6,18 @@
 > https://next-s3-upload.codingvalue.com/setup
 
 > API changes
-
+-   [] purpose of passing location details in the listing create api?
 -   [] add a new field `hash` to image entity and have max length of 100(even though actually needed is less than 25)
 -   [] always sort images to make the preview image as the first image (specially in the detail screen)
 -   [] vehicle description needs to be at least 1000 characters?
 // new!
 -   [] make postal code into alpha numeric (need to be able to save 00500 as a postal code)
 -   [] make trim as optional
--   [] only return name for city api call, only return  name and state code for state api call, remove id from country list & detail api call
-
+-   [] only return name for city api call, only return name and state code for state api call, remove id from country list & detail api call
+-   [] is lease field really necessary?
+-   [] vehicle brands have duplicate values
+-   [] return empty array instead of 404 if no cities or states found
+-   [] state city sql query should also use like instead of ==
 
 > Web app todo list
 
@@ -31,9 +34,13 @@
 -   [] add country code as inputPrefix for phone numbers
 -   [] show currency as inputPrefix for price inputs
 -   [] avoid session?.user?.sub!
--   [] if city list is empty, use the selected state name as city
 -   [] verify how emtpy, unauthorized and error component redirects & links work
 -   [] refer create t3 structure and eslint
+-   [] add watermark to uploaded image
+-   [] frequently going fowrard and backward in search screen triggers loading bug
+-   [] having debouncer in search inputs in search screen causes issues when page load during typing
+-   [] show expiry date in listings throughout. specially when renewing listings
+-   [] handle when visting posted listing from different country
 
 > Need to verify
 -   [] loading bug when changing query (while loading type something) (Added a possible fix)
@@ -51,3 +58,14 @@
 
 > SEO Todo list
 -   [] https://webmasters.stackexchange.com/questions/104987/how-to-change-which-image-from-website-is-shown-in-google-search-result
+
+
+> Update next 14
+-   https://nextjs.org/blog/next-14
+-   https://nextjs.org/blog/security-nextjs-server-components-actions
+-   https://www.google.com/search?q=useOptimistic+nextjs&sca_esv=577069831&sxsrf=AM9HkKl0JJWRR2DdtSSLbVHT4AmJA5u_aw%3A1698382865056&ei=EUQ7ZbyLA_XCkPIPyYSlwAI&ved=0ahUKEwj81_SauZWCAxV1IUQIHUlCCSgQ4dUDCBA&uact=5&oq=useOptimistic+nextjs&gs_lp=Egxnd3Mtd2l6LXNlcnAiFHVzZU9wdGltaXN0aWMgbmV4dGpzMgUQABiABDIIEAAYFhgeGAoyCBAAGBYYHhgKSMgNUMACWL8McAF4AZABAJgB7AKgAeQNqgEDMy01uAEDyAEA-AEBwgIKEAAYRxjWBBiwA8ICChAAGIoFGLADGEPCAgcQABiABBgKwgIGEAAYHhgKwgIIEAAYBRgeGAriAwQYACBBiAYBkAYK&sclient=gws-wiz-serp
+-   https://www.google.com/search?q=useformstate+nextjs&sca_esv=577069831&sxsrf=AM9HkKlXzXTdtiS0i24ryrvOEp6sfjRWpw%3A1698382869133&ei=FUQ7ZcvkB9_AkPIP6__W6Qo&oq=useFormState+ne&gs_lp=Egxnd3Mtd2l6LXNlcnAiD3VzZUZvcm1TdGF0ZSBuZSoCCAAyBRAAGIAESOczUOoEWJEHcAF4AZABAJgB6gKgAakIqgEDMy0zuAEDyAEA-AEBwgIKEAAYRxjWBBiwA8ICChAAGIoFGLADGEPCAgoQABiABBgUGIcCwgIHEAAYigUYQ8ICBhAAGBYYHuIDBBgAIEGIBgGQBgk&sclient=gws-wiz-serp
+-   https://www.google.com/search?q=useFormStatus+nextjs&sca_esv=577069831&sxsrf=AM9HkKkgd25RRusBkihkQcRbdAx9pu63Sw%3A1698382873110&ei=GUQ7ZbWwBpfvkPIP8q6OyAk&ved=0ahUKEwj1oOCeuZWCAxWXN0QIHXKXA5kQ4dUDCBA&uact=5&oq=useFormStatus+nextjs&gs_lp=Egxnd3Mtd2l6LXNlcnAiFHVzZUZvcm1TdGF0dXMgbmV4dGpzMgcQABiABBgKMggQABgWGB4YCkjAFlC0AVjHC3ABeAGQAQCYAYUDoAH6E6oBAzMtN7gBA8gBAPgBAcICChAAGEcY1gQYsAPCAgoQABiKBRiwAxhDwgIFEAAYgATiAwQYACBBiAYBkAYJ&sclient=gws-wiz-serp
+-   https://nextjs.org/docs/app/api-reference/functions/generate-viewport
+-   https://nextjs.org/docs/app/api-reference/functions/unstable_cache
+
diff --git a/next.config.mjs b/next.config.mjs
index c13fbea..b203b3d 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -7,13 +7,9 @@ await import("./src/env.mjs");
 /** @type {import("next").NextConfig} */
 const config = {
     reactStrictMode: true,
-    swcMinify: true,
     images: {
         formats: ["image/avif", "image/webp"],
         domains: ["ik.imagekit.io"],
     },
-    experimental: {
-        serverActions: true,
-    },
 };
 export default config;
diff --git a/package.json b/package.json
index dd61812..f6e7b65 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
         "fslightbox-react": "^1.7.6",
         "lodash.debounce": "^4.0.8",
         "nanoid": "^5.0.1",
-        "next": "13.5.6",
+        "next": "14.0.0",
         "postcss": "8.4.23",
         "prop-types": "^15.8.1",
         "query-string": "^8.1.0",
@@ -53,12 +53,12 @@
     "devDependencies": {
         "@types/fslightbox-react": "^1.7.4",
         "@types/lodash.debounce": "^4.0.7",
-        "@types/react": "^18.2.14",
+        "@types/react": "^18.2.33",
         "@types/react-datepicker": "^4.15.0",
-        "@types/react-dom": "^18.2.6",
+        "@types/react-dom": "^18.2.14",
         "@typescript-eslint/parser": "^6.7.3",
         "eslint": "8.50.0",
-        "eslint-config-next": "13.5.4",
+        "eslint-config-next": "14.0.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.28.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ecbf0bb..86d36c8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,9 +12,9 @@ specifiers:
   '@types/fslightbox-react': ^1.7.4
   '@types/lodash.debounce': ^4.0.7
   '@types/node': 20.1.3
-  '@types/react': ^18.2.14
+  '@types/react': ^18.2.33
   '@types/react-datepicker': ^4.15.0
-  '@types/react-dom': ^18.2.6
+  '@types/react-dom': ^18.2.14
   '@typescript-eslint/parser': ^6.7.3
   autoprefixer: 10.4.14
   browser-image-compression: ^2.0.2
@@ -25,7 +25,7 @@ specifiers:
   embla-carousel-autoplay: 8.0.0-rc14
   embla-carousel-react: 8.0.0-rc14
   eslint: 8.50.0
-  eslint-config-next: 13.5.4
+  eslint-config-next: 14.0.0
   eslint-config-prettier: ^9.0.0
   eslint-import-resolver-typescript: ^3.6.1
   eslint-plugin-import: ^2.28.1
@@ -36,7 +36,7 @@ specifiers:
   fslightbox-react: ^1.7.6
   lodash.debounce: ^4.0.8
   nanoid: ^5.0.1
-  next: 13.5.6
+  next: 14.0.0
   postcss: 8.4.23
   prettier: ^3.0.3
   prop-types: ^15.8.1
@@ -55,7 +55,7 @@ specifiers:
   zod: ^3.21.4
 
 dependencies:
-  '@auth0/nextjs-auth0': 3.1.0_next@13.5.6
+  '@auth0/nextjs-auth0': 3.1.0_next@14.0.0
   '@aws-sdk/client-s3': 3.421.0
   '@aws-sdk/s3-request-presigner': 3.421.0
   '@formkit/auto-animate': 0.8.0
@@ -76,7 +76,7 @@ dependencies:
   fslightbox-react: 1.7.6_v2m5e27vhdewzwhryxwfaorcca
   lodash.debounce: 4.0.8
   nanoid: 5.0.1
-  next: 13.5.6_biqbaboplfbrettd7655fr4n2y
+  next: 14.0.0_biqbaboplfbrettd7655fr4n2y
   postcss: 8.4.23
   prop-types: 15.8.1
   query-string: 8.1.0
@@ -96,12 +96,12 @@ dependencies:
 devDependencies:
   '@types/fslightbox-react': 1.7.4
   '@types/lodash.debounce': 4.0.7
-  '@types/react': 18.2.14
+  '@types/react': 18.2.33
   '@types/react-datepicker': 4.15.0_biqbaboplfbrettd7655fr4n2y
-  '@types/react-dom': 18.2.6
+  '@types/react-dom': 18.2.14
   '@typescript-eslint/parser': 6.7.3_jk7qbkaijtltyu4ajmze3dfiwa
   eslint: 8.50.0
-  eslint-config-next: 13.5.4_jk7qbkaijtltyu4ajmze3dfiwa
+  eslint-config-next: 14.0.0_jk7qbkaijtltyu4ajmze3dfiwa
   eslint-config-prettier: 9.0.0_eslint@8.50.0
   eslint-import-resolver-typescript: 3.6.1_3j3omiadvlpv5rpfrjr5lycjfu
   eslint-plugin-import: 2.28.1_7juwwq4lilwvkas6knc4dqepxq
@@ -121,7 +121,7 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  /@auth0/nextjs-auth0/3.1.0_next@13.5.6:
+  /@auth0/nextjs-auth0/3.1.0_next@14.0.0:
     resolution: {integrity: sha512-K00wD7hlMRcmDgDVRN5pP/SLV7odBnvAXvput1kJHGRJUp9FwFzg6BEGEWVHhr2YOXcn+VdVMMjXlmWYV+aZ1A==}
     engines: {node: '>=16'}
     peerDependencies:
@@ -132,7 +132,7 @@ packages:
       debug: 4.3.4
       joi: 17.10.2
       jose: 4.14.4
-      next: 13.5.6_biqbaboplfbrettd7655fr4n2y
+      next: 14.0.0_biqbaboplfbrettd7655fr4n2y
       oauth4webapi: 2.3.0
       openid-client: 5.4.2
       tslib: 2.6.2
@@ -736,6 +736,13 @@ packages:
     dependencies:
       regenerator-runtime: 0.13.11
 
+  /@babel/runtime/7.23.2:
+    resolution: {integrity: sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: true
+
   /@eslint-community/eslint-utils/4.4.0_eslint@8.50.0:
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -855,18 +862,18 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
-  /@next/env/13.5.6:
-    resolution: {integrity: sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==}
+  /@next/env/14.0.0:
+    resolution: {integrity: sha512-cIKhxkfVELB6hFjYsbtEeTus2mwrTC+JissfZYM0n+8Fv+g8ucUfOlm3VEDtwtwydZ0Nuauv3bl0qF82nnCAqA==}
     dev: false
 
-  /@next/eslint-plugin-next/13.5.4:
-    resolution: {integrity: sha512-vI94U+D7RNgX6XypSyjeFrOzxGlZyxOplU0dVE5norIfZGn/LDjJYPHdvdsR5vN1eRtl6PDAsOHmycFEOljK5A==}
+  /@next/eslint-plugin-next/14.0.0:
+    resolution: {integrity: sha512-Ye37nNI09V3yt7pzuzSQtwlvuJ2CGzFszHXkcTHHZgNr7EhTMFLipn3VSJChy+e5+ahTdNApPphc3qCPUsn10A==}
     dependencies:
       glob: 7.1.7
     dev: true
 
-  /@next/swc-darwin-arm64/13.5.6:
-    resolution: {integrity: sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==}
+  /@next/swc-darwin-arm64/14.0.0:
+    resolution: {integrity: sha512-HQKi159jCz4SRsPesVCiNN6tPSAFUkOuSkpJsqYTIlbHLKr1mD6be/J0TvWV6fwJekj81bZV9V/Tgx3C2HO9lA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -874,8 +881,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64/13.5.6:
-    resolution: {integrity: sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==}
+  /@next/swc-darwin-x64/14.0.0:
+    resolution: {integrity: sha512-4YyQLMSaCgX/kgC1jjF3s3xSoBnwHuDhnF6WA1DWNEYRsbOOPWjcYhv8TKhRe2ApdOam+VfQSffC4ZD+X4u1Cg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -883,8 +890,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu/13.5.6:
-    resolution: {integrity: sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==}
+  /@next/swc-linux-arm64-gnu/14.0.0:
+    resolution: {integrity: sha512-io7fMkJ28Glj7SH8yvnlD6naIhRDnDxeE55CmpQkj3+uaA2Hko6WGY2pT5SzpQLTnGGnviK85cy8EJ2qsETj/g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -892,8 +899,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl/13.5.6:
-    resolution: {integrity: sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==}
+  /@next/swc-linux-arm64-musl/14.0.0:
+    resolution: {integrity: sha512-nC2h0l1Jt8LEzyQeSs/BKpXAMe0mnHIMykYALWaeddTqCv5UEN8nGO3BG8JAqW/Y8iutqJsaMe2A9itS0d/r8w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -901,8 +908,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu/13.5.6:
-    resolution: {integrity: sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==}
+  /@next/swc-linux-x64-gnu/14.0.0:
+    resolution: {integrity: sha512-Wf+WjXibJQ7hHXOdNOmSMW5bxeJHVf46Pwb3eLSD2L76NrytQlif9NH7JpHuFlYKCQGfKfgSYYre5rIfmnSwQw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -910,8 +917,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl/13.5.6:
-    resolution: {integrity: sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==}
+  /@next/swc-linux-x64-musl/14.0.0:
+    resolution: {integrity: sha512-WTZb2G7B+CTsdigcJVkRxfcAIQj7Lf0ipPNRJ3vlSadU8f0CFGv/ST+sJwF5eSwIe6dxKoX0DG6OljDBaad+rg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -919,8 +926,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc/13.5.6:
-    resolution: {integrity: sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==}
+  /@next/swc-win32-arm64-msvc/14.0.0:
+    resolution: {integrity: sha512-7R8/x6oQODmNpnWVW00rlWX90sIlwluJwcvMT6GXNIBOvEf01t3fBg0AGURNKdTJg2xNuP7TyLchCL7Lh2DTiw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -928,8 +935,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc/13.5.6:
-    resolution: {integrity: sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==}
+  /@next/swc-win32-ia32-msvc/14.0.0:
+    resolution: {integrity: sha512-RLK1nELvhCnxaWPF07jGU4x3tjbyx2319q43loZELqF0+iJtKutZ+Lk8SVmf/KiJkYBc7Cragadz7hb3uQvz4g==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -937,8 +944,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc/13.5.6:
-    resolution: {integrity: sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==}
+  /@next/swc-win32-x64-msvc/14.0.0:
+    resolution: {integrity: sha512-g6hLf1SUko+hnnaywQQZzzb3BRecQsoKkF3o/C+F+dOA4w/noVAJngUVkfwF0+2/8FzNznM7ofM6TGZO9svn7w==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -983,8 +990,8 @@ packages:
   /@popperjs/core/2.11.8:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
-  /@rushstack/eslint-patch/1.4.0:
-    resolution: {integrity: sha512-cEjvTPU32OM9lUFegJagO0mRnIn+rbqrG89vV8/xLnLFX0DoR0r1oy5IlTga71Q7uT3Qus7qm7wgeiMT/+Irlg==}
+  /@rushstack/eslint-patch/1.5.1:
+    resolution: {integrity: sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==}
     dev: true
 
   /@sideway/address/4.1.4:
@@ -1482,7 +1489,7 @@ packages:
   /@types/fslightbox-react/1.7.4:
     resolution: {integrity: sha512-SlP/3d/qIF6TpslYiGpxxM5y9sZIA01l6bNc8NNpYeZ7POzlmJqRcpYn41PO4Mp6CFsUyiGMYNuRnEZX+H+eNw==}
     dependencies:
-      '@types/react': 18.2.14
+      '@types/react': 18.2.33
     dev: true
 
   /@types/json-schema/7.0.13:
@@ -1507,15 +1514,15 @@ packages:
     resolution: {integrity: sha512-NP2yfZpgmf2eDRPmgGq+fjGjSwFgYbihA8/gK+ey23qT9RkxsgNTZvGOEpXgzIGqesTYkElELLgtKoMQTys5vA==}
     dev: false
 
-  /@types/prop-types/15.7.5:
-    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+  /@types/prop-types/15.7.9:
+    resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
     dev: true
 
   /@types/react-datepicker/4.15.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-kr10s8ex4+MmCJmzdhA9kfmoMQBmsW5uDYDlH+8f/PgStrp7rRaz23Y/cvTiMgvESVq8ujDh4SOo6jlSwEw13g==}
     dependencies:
       '@popperjs/core': 2.11.8
-      '@types/react': 18.2.14
+      '@types/react': 18.2.33
       date-fns: 2.30.0
       react-popper: 2.3.0_i7i4ysnnic4ssxw6fnjnyxwzui
     transitivePeerDependencies:
@@ -1523,22 +1530,22 @@ packages:
       - react-dom
     dev: true
 
-  /@types/react-dom/18.2.6:
-    resolution: {integrity: sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==}
+  /@types/react-dom/18.2.14:
+    resolution: {integrity: sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==}
     dependencies:
-      '@types/react': 18.2.14
+      '@types/react': 18.2.33
     dev: true
 
-  /@types/react/18.2.14:
-    resolution: {integrity: sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==}
+  /@types/react/18.2.33:
+    resolution: {integrity: sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==}
     dependencies:
-      '@types/prop-types': 15.7.5
-      '@types/scheduler': 0.16.3
+      '@types/prop-types': 15.7.9
+      '@types/scheduler': 0.16.5
       csstype: 3.1.2
     dev: true
 
-  /@types/scheduler/0.16.3:
-    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
+  /@types/scheduler/0.16.5:
+    resolution: {integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==}
     dev: true
 
   /@types/semver/7.5.3:
@@ -1735,10 +1742,10 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
-  /aria-query/5.1.3:
-    resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
+  /aria-query/5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
-      deep-equal: 2.2.1
+      dequal: 2.0.3
     dev: true
 
   /array-buffer-byte-length/1.0.0:
@@ -1759,6 +1766,17 @@ packages:
       is-string: 1.0.7
     dev: true
 
+  /array-includes/3.1.7:
+    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      get-intrinsic: 1.2.2
+      is-string: 1.0.7
+    dev: true
+
   /array-union/2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
@@ -1785,6 +1803,16 @@ packages:
       es-shim-unscopables: 1.0.0
     dev: true
 
+  /array.prototype.flat/1.3.2:
+    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.2
+    dev: true
+
   /array.prototype.flatmap/1.3.1:
     resolution: {integrity: sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==}
     engines: {node: '>= 0.4'}
@@ -1795,14 +1823,24 @@ packages:
       es-shim-unscopables: 1.0.0
     dev: true
 
-  /array.prototype.tosorted/1.1.1:
-    resolution: {integrity: sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==}
+  /array.prototype.flatmap/1.3.2:
+    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.2
+    dev: true
+
+  /array.prototype.tosorted/1.1.2:
+    resolution: {integrity: sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.2
+      get-intrinsic: 1.2.2
     dev: true
 
   /arraybuffer.prototype.slice/1.0.2:
@@ -1854,15 +1892,15 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /axe-core/4.7.0:
-    resolution: {integrity: sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==}
+  /axe-core/4.8.2:
+    resolution: {integrity: sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==}
     engines: {node: '>=4'}
     dev: true
 
-  /axobject-query/3.1.1:
-    resolution: {integrity: sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==}
+  /axobject-query/3.2.1:
+    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
     dependencies:
-      deep-equal: 2.2.1
+      dequal: 2.0.3
     dev: true
 
   /balanced-match/1.0.2:
@@ -1938,6 +1976,14 @@ packages:
       get-intrinsic: 1.2.1
     dev: true
 
+  /call-bind/1.0.5:
+    resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
+    dependencies:
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.2
+      set-function-length: 1.1.1
+    dev: true
+
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -1951,6 +1997,10 @@ packages:
     resolution: {integrity: sha512-83564Z3yWGqXsh2vaH/mhXfEM0wX+NlBCm1jYHOb97TrTWJEmPTccZgeLTPBUUb0PNVo+oomb7wkimZBIERClA==}
     dev: false
 
+  /caniuse-lite/1.0.30001555:
+    resolution: {integrity: sha512-NzbUFKUnJ3DTcq6YyZB6+qqhfD112uR3uoEnkmfzm2wVzUNsFkU7AwBjKQ654Sp5cau0JxhFyRSn/tQZ+XfygA==}
+    dev: false
+
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1971,7 +2021,7 @@ packages:
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
 
   /classnames/2.3.2:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
@@ -2087,29 +2137,6 @@ packages:
     engines: {node: '>=14.16'}
     dev: false
 
-  /deep-equal/2.2.1:
-    resolution: {integrity: sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==}
-    dependencies:
-      array-buffer-byte-length: 1.0.0
-      call-bind: 1.0.2
-      es-get-iterator: 1.1.3
-      get-intrinsic: 1.2.1
-      is-arguments: 1.1.1
-      is-array-buffer: 3.0.2
-      is-date-object: 1.0.5
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.2
-      isarray: 2.0.5
-      object-is: 1.1.5
-      object-keys: 1.1.1
-      object.assign: 4.1.4
-      regexp.prototype.flags: 1.5.1
-      side-channel: 1.0.4
-      which-boxed-primitive: 1.0.2
-      which-collection: 1.0.1
-      which-typed-array: 1.1.11
-    dev: true
-
   /deep-is/0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
@@ -2141,6 +2168,15 @@ packages:
       has-property-descriptors: 1.0.0
     dev: true
 
+  /define-data-property/1.1.1:
+    resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.2
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.1
+    dev: true
+
   /define-lazy-prop/3.0.0:
     resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
     engines: {node: '>=12'}
@@ -2163,6 +2199,11 @@ packages:
       object-keys: 1.1.1
     dev: true
 
+  /dequal/2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: true
+
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -2321,35 +2362,66 @@ packages:
       which-typed-array: 1.1.11
     dev: true
 
-  /es-get-iterator/1.1.3:
-    resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
+  /es-abstract/1.22.3:
+    resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
+      array-buffer-byte-length: 1.0.0
+      arraybuffer.prototype.slice: 1.0.2
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.5
+      es-set-tostringtag: 2.0.2
+      es-to-primitive: 1.2.1
+      function.prototype.name: 1.1.6
+      get-intrinsic: 1.2.2
+      get-symbol-description: 1.0.0
+      globalthis: 1.0.3
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.1
+      has-proto: 1.0.1
       has-symbols: 1.0.3
-      is-arguments: 1.1.1
-      is-map: 2.0.2
-      is-set: 2.0.2
+      hasown: 2.0.0
+      internal-slot: 1.0.6
+      is-array-buffer: 3.0.2
+      is-callable: 1.2.7
+      is-negative-zero: 2.0.2
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
       is-string: 1.0.7
-      isarray: 2.0.5
-      stop-iteration-iterator: 1.0.0
+      is-typed-array: 1.1.12
+      is-weakref: 1.0.2
+      object-inspect: 1.13.1
+      object-keys: 1.1.1
+      object.assign: 4.1.4
+      regexp.prototype.flags: 1.5.1
+      safe-array-concat: 1.0.1
+      safe-regex-test: 1.0.0
+      string.prototype.trim: 1.2.8
+      string.prototype.trimend: 1.0.7
+      string.prototype.trimstart: 1.0.7
+      typed-array-buffer: 1.0.0
+      typed-array-byte-length: 1.0.0
+      typed-array-byte-offset: 1.0.0
+      typed-array-length: 1.0.4
+      unbox-primitive: 1.0.2
+      which-typed-array: 1.1.13
     dev: true
 
   /es-iterator-helpers/1.0.15:
     resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
     dependencies:
       asynciterator.prototype: 1.0.0
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       define-properties: 1.2.1
-      es-abstract: 1.22.2
-      es-set-tostringtag: 2.0.1
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
+      es-abstract: 1.22.3
+      es-set-tostringtag: 2.0.2
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.2
       globalthis: 1.0.3
-      has-property-descriptors: 1.0.0
+      has-property-descriptors: 1.0.1
       has-proto: 1.0.1
       has-symbols: 1.0.3
-      internal-slot: 1.0.5
+      internal-slot: 1.0.6
       iterator.prototype: 1.1.2
       safe-array-concat: 1.0.1
     dev: true
@@ -2363,12 +2435,27 @@ packages:
       has-tostringtag: 1.0.0
     dev: true
 
+  /es-set-tostringtag/2.0.2:
+    resolution: {integrity: sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.2
+      has-tostringtag: 1.0.0
+      hasown: 2.0.0
+    dev: true
+
   /es-shim-unscopables/1.0.0:
     resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
     dependencies:
       has: 1.0.3
     dev: true
 
+  /es-shim-unscopables/1.0.2:
+    resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
+    dependencies:
+      hasown: 2.0.0
+    dev: true
+
   /es-to-primitive/1.2.1:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
@@ -2388,8 +2475,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-config-next/13.5.4_jk7qbkaijtltyu4ajmze3dfiwa:
-    resolution: {integrity: sha512-FzQGIj4UEszRX7fcRSJK6L1LrDiVZvDFW320VVntVKh3BSU8Fb9kpaoxQx0cdFgf3MQXdeSbrCXJ/5Z/NndDkQ==}
+  /eslint-config-next/14.0.0_jk7qbkaijtltyu4ajmze3dfiwa:
+    resolution: {integrity: sha512-jtXeE+/pGQ3h9n11QyyuPN50kO13GO5XvjU5ZRq6W+XTpOMjyobWmK2s7aowy0FtzA49krJzYzEU9s1RMwoJ6g==}
     peerDependencies:
       eslint: ^7.23.0 || ^8.0.0
       typescript: '>=3.3.1'
@@ -2397,12 +2484,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@next/eslint-plugin-next': 13.5.4
-      '@rushstack/eslint-patch': 1.4.0
+      '@next/eslint-plugin-next': 14.0.0
+      '@rushstack/eslint-patch': 1.5.1
       '@typescript-eslint/parser': 6.7.3_jk7qbkaijtltyu4ajmze3dfiwa
       eslint: 8.50.0
-      eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.6.1_gyqjyyifavsfczauyngji7kw6m
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.1_o23aiopppmru2xcybrthvzqwfe
       eslint-plugin-import: 2.28.1_7juwwq4lilwvkas6knc4dqepxq
       eslint-plugin-jsx-a11y: 6.7.1_eslint@8.50.0
       eslint-plugin-react: 7.33.2_eslint@8.50.0
@@ -2432,6 +2519,16 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-import-resolver-node/0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.13.1
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-import-resolver-typescript/3.6.1_3j3omiadvlpv5rpfrjr5lycjfu:
     resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2455,7 +2552,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-import-resolver-typescript/3.6.1_gyqjyyifavsfczauyngji7kw6m:
+  /eslint-import-resolver-typescript/3.6.1_o23aiopppmru2xcybrthvzqwfe:
     resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -2465,7 +2562,7 @@ packages:
       debug: 4.3.4
       enhanced-resolve: 5.14.0
       eslint: 8.50.0
-      eslint-module-utils: 2.8.0_lu5o4ybagphrhgn4ouqblhsfgi
+      eslint-module-utils: 2.8.0_3mddcwg22vuwxq34sdgo4nhj2a
       eslint-plugin-import: 2.28.1_7juwwq4lilwvkas6knc4dqepxq
       fast-glob: 3.3.1
       get-tsconfig: 4.5.0
@@ -2478,6 +2575,36 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-module-utils/2.8.0_3mddcwg22vuwxq34sdgo4nhj2a:
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.7.3_jk7qbkaijtltyu4ajmze3dfiwa
+      debug: 3.2.7
+      eslint: 8.50.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.1_o23aiopppmru2xcybrthvzqwfe
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-module-utils/2.8.0_7juwwq4lilwvkas6knc4dqepxq:
     resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
     engines: {node: '>=4'}
@@ -2578,22 +2705,22 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
     dependencies:
-      '@babel/runtime': 7.21.5
-      aria-query: 5.1.3
-      array-includes: 3.1.6
-      array.prototype.flatmap: 1.3.1
+      '@babel/runtime': 7.23.2
+      aria-query: 5.3.0
+      array-includes: 3.1.7
+      array.prototype.flatmap: 1.3.2
       ast-types-flow: 0.0.7
-      axe-core: 4.7.0
-      axobject-query: 3.1.1
+      axe-core: 4.8.2
+      axobject-query: 3.2.1
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
       eslint: 8.50.0
-      has: 1.0.3
-      jsx-ast-utils: 3.3.3
+      has: 1.0.4
+      jsx-ast-utils: 3.3.5
       language-tags: 1.0.5
       minimatch: 3.1.2
-      object.entries: 1.1.6
-      object.fromentries: 2.0.6
+      object.entries: 1.1.7
+      object.fromentries: 2.0.7
       semver: 6.3.1
     dev: true
 
@@ -2633,23 +2760,23 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
     dependencies:
-      array-includes: 3.1.6
-      array.prototype.flatmap: 1.3.1
-      array.prototype.tosorted: 1.1.1
+      array-includes: 3.1.7
+      array.prototype.flatmap: 1.3.2
+      array.prototype.tosorted: 1.1.2
       doctrine: 2.1.0
       es-iterator-helpers: 1.0.15
       eslint: 8.50.0
       estraverse: 5.3.0
-      jsx-ast-utils: 3.3.3
+      jsx-ast-utils: 3.3.5
       minimatch: 3.1.2
-      object.entries: 1.1.6
-      object.fromentries: 2.0.6
-      object.hasown: 1.1.2
-      object.values: 1.1.6
+      object.entries: 1.1.7
+      object.fromentries: 2.0.7
+      object.hasown: 1.1.3
+      object.values: 1.1.7
       prop-types: 15.8.1
-      resolve: 2.0.0-next.4
+      resolve: 2.0.0-next.5
       semver: 6.3.1
-      string.prototype.matchall: 4.0.8
+      string.prototype.matchall: 4.0.10
     dev: true
 
   /eslint-plugin-tailwindcss/3.13.0_tailwindcss@3.3.3:
@@ -2921,8 +3048,8 @@ packages:
   /fs.realpath/1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
-  /fsevents/2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+  /fsevents/2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
@@ -2943,6 +3070,10 @@ packages:
   /function-bind/1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
 
+  /function-bind/1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+    dev: true
+
   /function.prototype.name/1.1.5:
     resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
     engines: {node: '>= 0.4'}
@@ -2976,6 +3107,15 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
+  /get-intrinsic/1.2.2:
+    resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==}
+    dependencies:
+      function-bind: 1.1.2
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+      hasown: 2.0.0
+    dev: true
+
   /get-stream/6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
@@ -3103,6 +3243,12 @@ packages:
       get-intrinsic: 1.2.1
     dev: true
 
+  /has-property-descriptors/1.0.1:
+    resolution: {integrity: sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==}
+    dependencies:
+      get-intrinsic: 1.2.2
+    dev: true
+
   /has-proto/1.0.1:
     resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
     engines: {node: '>= 0.4'}
@@ -3126,6 +3272,18 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
+  /has/1.0.4:
+    resolution: {integrity: sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==}
+    engines: {node: '>= 0.4.0'}
+    dev: true
+
+  /hasown/2.0.0:
+    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+    dev: true
+
   /human-signals/2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -3172,12 +3330,13 @@ packages:
       side-channel: 1.0.4
     dev: true
 
-  /is-arguments/1.1.1:
-    resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
+  /internal-slot/1.0.6:
+    resolution: {integrity: sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
+      get-intrinsic: 1.2.2
+      hasown: 2.0.0
+      side-channel: 1.0.4
     dev: true
 
   /is-array-buffer/3.0.2:
@@ -3231,6 +3390,12 @@ packages:
       has: 1.0.3
     dev: true
 
+  /is-core-module/2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+    dependencies:
+      hasown: 2.0.0
+    dev: true
+
   /is-date-object/1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
     engines: {node: '>= 0.4'}
@@ -3257,7 +3422,7 @@ packages:
   /is-finalizationregistry/1.0.2:
     resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
     dev: true
 
   /is-generator-function/1.0.10:
@@ -3379,8 +3544,8 @@ packages:
   /is-weakset/2.0.2:
     resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
     dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
+      call-bind: 1.0.5
+      get-intrinsic: 1.2.2
     dev: true
 
   /is-wsl/2.2.0:
@@ -3402,7 +3567,7 @@ packages:
     resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
     dependencies:
       define-properties: 1.2.1
-      get-intrinsic: 1.2.1
+      get-intrinsic: 1.2.2
       has-symbols: 1.0.3
       reflect.getprototypeof: 1.0.4
       set-function-name: 2.0.1
@@ -3455,12 +3620,14 @@ packages:
       minimist: 1.2.8
     dev: true
 
-  /jsx-ast-utils/3.3.3:
-    resolution: {integrity: sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==}
+  /jsx-ast-utils/3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
     dependencies:
-      array-includes: 3.1.6
+      array-includes: 3.1.7
+      array.prototype.flat: 1.3.2
       object.assign: 4.1.4
+      object.values: 1.1.7
     dev: true
 
   /language-subtag-registry/0.3.22:
@@ -3582,9 +3749,9 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
-  /next/13.5.6_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==}
-    engines: {node: '>=16.14.0'}
+  /next/14.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-J0jHKBJpB9zd4+c153sair0sz44mbaCHxggs8ryVXSFBuBqJ8XdE9/ozoV85xGh2VnSjahwntBZZgsihL9QznA==}
+    engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
@@ -3597,25 +3764,25 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.5.6
+      '@next/env': 14.0.0
       '@swc/helpers': 0.5.2
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001487
+      caniuse-lite: 1.0.30001555
       postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       styled-jsx: 5.1.1_react@18.2.0
       watchpack: 2.4.0
     optionalDependencies:
-      '@next/swc-darwin-arm64': 13.5.6
-      '@next/swc-darwin-x64': 13.5.6
-      '@next/swc-linux-arm64-gnu': 13.5.6
-      '@next/swc-linux-arm64-musl': 13.5.6
-      '@next/swc-linux-x64-gnu': 13.5.6
-      '@next/swc-linux-x64-musl': 13.5.6
-      '@next/swc-win32-arm64-msvc': 13.5.6
-      '@next/swc-win32-ia32-msvc': 13.5.6
-      '@next/swc-win32-x64-msvc': 13.5.6
+      '@next/swc-darwin-arm64': 14.0.0
+      '@next/swc-darwin-x64': 14.0.0
+      '@next/swc-linux-arm64-gnu': 14.0.0
+      '@next/swc-linux-arm64-musl': 14.0.0
+      '@next/swc-linux-x64-gnu': 14.0.0
+      '@next/swc-linux-x64-musl': 14.0.0
+      '@next/swc-win32-arm64-msvc': 14.0.0
+      '@next/swc-win32-ia32-msvc': 14.0.0
+      '@next/swc-win32-x64-msvc': 14.0.0
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -3669,12 +3836,8 @@ packages:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
     dev: true
 
-  /object-is/1.1.5:
-    resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.1
+  /object-inspect/1.13.1:
+    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
     dev: true
 
   /object-keys/1.1.1:
@@ -3692,13 +3855,13 @@ packages:
       object-keys: 1.1.1
     dev: true
 
-  /object.entries/1.1.6:
-    resolution: {integrity: sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==}
+  /object.entries/1.1.7:
+    resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       define-properties: 1.2.1
-      es-abstract: 1.22.2
+      es-abstract: 1.22.3
     dev: true
 
   /object.fromentries/2.0.6:
@@ -3710,6 +3873,15 @@ packages:
       es-abstract: 1.21.2
     dev: true
 
+  /object.fromentries/2.0.7:
+    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
   /object.groupby/1.0.1:
     resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
     dependencies:
@@ -3719,11 +3891,11 @@ packages:
       get-intrinsic: 1.2.1
     dev: true
 
-  /object.hasown/1.1.2:
-    resolution: {integrity: sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==}
+  /object.hasown/1.1.3:
+    resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==}
     dependencies:
       define-properties: 1.2.1
-      es-abstract: 1.22.2
+      es-abstract: 1.22.3
     dev: true
 
   /object.values/1.1.6:
@@ -3735,6 +3907,15 @@ packages:
       es-abstract: 1.22.2
     dev: true
 
+  /object.values/1.1.7:
+    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.5
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
   /oidc-token-hash/5.0.3:
     resolution: {integrity: sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==}
     engines: {node: ^10.13.0 || >=12.0.0}
@@ -4098,10 +4279,10 @@ packages:
     resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
+      es-abstract: 1.22.3
+      get-intrinsic: 1.2.2
       globalthis: 1.0.3
       which-builtin-type: 1.1.3
     dev: true
@@ -4109,6 +4290,10 @@ packages:
   /regenerator-runtime/0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 
+  /regenerator-runtime/0.14.0:
+    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+    dev: true
+
   /regexp.prototype.flags/1.5.0:
     resolution: {integrity: sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==}
     engines: {node: '>= 0.4'}
@@ -4140,11 +4325,20 @@ packages:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  /resolve/2.0.0-next.4:
-    resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
+  /resolve/1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
     dependencies:
-      is-core-module: 2.13.0
+      is-core-module: 2.13.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /resolve/2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.13.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
@@ -4208,6 +4402,16 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
+  /set-function-length/1.1.1:
+    resolution: {integrity: sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.1
+      get-intrinsic: 1.2.2
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.1
+    dev: true
+
   /set-function-name/2.0.1:
     resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
     engines: {node: '>= 0.4'}
@@ -4255,28 +4459,22 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /stop-iteration-iterator/1.0.0:
-    resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      internal-slot: 1.0.5
-    dev: true
-
   /streamsearch/1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
     dev: false
 
-  /string.prototype.matchall/4.0.8:
-    resolution: {integrity: sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==}
+  /string.prototype.matchall/4.0.10:
+    resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       define-properties: 1.2.1
-      es-abstract: 1.22.2
-      get-intrinsic: 1.2.1
+      es-abstract: 1.22.3
+      get-intrinsic: 1.2.2
       has-symbols: 1.0.3
-      internal-slot: 1.0.5
+      internal-slot: 1.0.6
       regexp.prototype.flags: 1.5.1
+      set-function-name: 2.0.1
       side-channel: 1.0.4
     dev: true
 
@@ -4663,7 +4861,7 @@ packages:
       isarray: 2.0.5
       which-boxed-primitive: 1.0.2
       which-collection: 1.0.1
-      which-typed-array: 1.1.11
+      which-typed-array: 1.1.13
     dev: true
 
   /which-collection/1.0.1:
@@ -4686,6 +4884,17 @@ packages:
       has-tostringtag: 1.0.0
     dev: true
 
+  /which-typed-array/1.1.13:
+    resolution: {integrity: sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.5
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.0
+    dev: true
+
   /which-typed-array/1.1.9:
     resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==}
     engines: {node: '>= 0.4'}
diff --git a/src/actions/cacheActions.ts b/src/actions/cacheActions.ts
index c4b3244..f10ca3d 100644
--- a/src/actions/cacheActions.ts
+++ b/src/actions/cacheActions.ts
@@ -7,9 +7,8 @@ export const revalidateFeaturesAction = async () => {
     revalidateTag(apiTags.getFeaturesList());
 };
 
-export const revalidateBrandsAndModelsAction = async () => {
+export const revalidateBrandsAction = async () => {
     revalidateTag(apiTags.getVehicleBrands());
-    revalidateTag(apiTags.getVehicleModels());
 };
 
 export const revalidatePosedListingsAction = async () => {
diff --git a/src/actions/localtionActions.ts b/src/actions/localtionActions.ts
new file mode 100644
index 0000000..fdcb752
--- /dev/null
+++ b/src/actions/localtionActions.ts
@@ -0,0 +1,6 @@
+"use server";
+import { api } from "@/utils/api";
+
+export const getStatesOfCountry = async (countryCode: string) => api.getStates(countryCode);
+
+export const getCitiesOfState = async (countryCode: string, stateCode: string) => api.getCities(countryCode, stateCode);
diff --git a/src/app/[locale]/dashboard/listings/edit/[id]/page.tsx b/src/app/[locale]/dashboard/listings/edit/[id]/page.tsx
index fcb67bd..5441781 100644
--- a/src/app/[locale]/dashboard/listings/edit/[id]/page.tsx
+++ b/src/app/[locale]/dashboard/listings/edit/[id]/page.tsx
@@ -1,3 +1,4 @@
+import { getSession } from "@auth0/nextjs-auth0/edge";
 import { BreadCrumbs } from "@/components/Common";
 import { EditListingForm } from "@/components/Forms/Listings/EditListingForm";
 import { api } from "@/utils/api";
@@ -5,7 +6,13 @@ import { transformListingResponse } from "@/utils/helpers";
 import { ListingIdPathParam } from "@/utils/types";
 
 export default async function Page({ params }: ListingIdPathParam) {
-    const [itemDetails, features] = await Promise.all([transformListingResponse(await api.getListingsItem(params.id)), api.getFeaturesList()]);
+    const session = await getSession();
+    const [itemDetails, features, brands, profile] = await Promise.all([
+        transformListingResponse(await api.getListingsItem(params.id)),
+        api.getFeaturesList(),
+        api.getVehicleBrands(),
+        api.getMyProfileDetails(session?.user?.sub!),
+    ]);
 
     return (
         <>
@@ -18,7 +25,14 @@ export default async function Page({ params }: ListingIdPathParam) {
                     { title: itemDetails.title, href: `/dashboard/listings/${params.id}` },
                 ]}
             />
-            <EditListingForm features={features} listingItem={itemDetails} successRedirectPath="/dashboard/listings" />
+            <EditListingForm
+                brands={brands}
+                features={features}
+                listingItem={itemDetails}
+                profile={profile}
+                successRedirectPath="/dashboard/listings"
+                userId={session?.user?.sub}
+            />
         </>
     );
 }
diff --git a/src/app/[locale]/dashboard/my-listings/edit/[id]/page.tsx b/src/app/[locale]/dashboard/my-listings/edit/[id]/page.tsx
index d6be4f6..c9c4123 100644
--- a/src/app/[locale]/dashboard/my-listings/edit/[id]/page.tsx
+++ b/src/app/[locale]/dashboard/my-listings/edit/[id]/page.tsx
@@ -1,3 +1,4 @@
+import { getSession } from "@auth0/nextjs-auth0/edge";
 import { BreadCrumbs } from "@/components/Common";
 import { EditListingForm } from "@/components/Forms/Listings/EditListingForm";
 import { api } from "@/utils/api";
@@ -5,7 +6,13 @@ import { transformListingResponse } from "@/utils/helpers";
 import { ListingIdPathParam } from "@/utils/types";
 
 export default async function Page({ params }: ListingIdPathParam) {
-    const [itemDetails, features] = await Promise.all([transformListingResponse(await api.getMyListingsItem(params.id)), api.getFeaturesList()]);
+    const session = await getSession();
+    const [itemDetails, features, brands, profile] = await Promise.all([
+        transformListingResponse(await api.getMyListingsItem(params.id)),
+        api.getFeaturesList(),
+        api.getVehicleBrands(),
+        api.getMyProfileDetails(session?.user?.sub!),
+    ]);
 
     return (
         <>
@@ -21,7 +28,14 @@ export default async function Page({ params }: ListingIdPathParam) {
                     },
                 ]}
             />
-            <EditListingForm features={features} listingItem={itemDetails} successRedirectPath="/dashboard/my-listings" />
+            <EditListingForm
+                brands={brands}
+                features={features}
+                listingItem={itemDetails}
+                profile={profile}
+                successRedirectPath="/dashboard/my-listings"
+                userId={session?.user?.sub}
+            />
         </>
     );
 }
diff --git a/src/app/[locale]/dashboard/new-listing/page.tsx b/src/app/[locale]/dashboard/new-listing/page.tsx
index 4e38ad9..53c8ec1 100644
--- a/src/app/[locale]/dashboard/new-listing/page.tsx
+++ b/src/app/[locale]/dashboard/new-listing/page.tsx
@@ -4,6 +4,10 @@ import { api } from "@/utils/api";
 
 export default async function Page() {
     const session = await getSession();
-    const [features, profile] = await Promise.all([api.getFeaturesList(), api.getMyProfileDetails(session?.user?.sub!)]);
-    return <CreateListingForm features={features} profile={profile} userId={session?.user?.sub} />;
+    const [features, profile, brands] = await Promise.all([
+        api.getFeaturesList(),
+        api.getMyProfileDetails(session?.user?.sub!),
+        api.getVehicleBrands(),
+    ]);
+    return <CreateListingForm brands={brands} features={features} profile={profile} userId={session?.user?.sub} />;
 }
diff --git a/src/app/[locale]/search/(list)/@searchFilters/(page)/page.tsx b/src/app/[locale]/search/(list)/@searchFilters/(page)/page.tsx
index c636835..232ff20 100644
--- a/src/app/[locale]/search/(list)/@searchFilters/(page)/page.tsx
+++ b/src/app/[locale]/search/(list)/@searchFilters/(page)/page.tsx
@@ -1,5 +1,8 @@
 import { SearchFilters } from "@/components/Search";
+import { api } from "@/utils/api";
+import { LocalePathParam } from "@/utils/types";
 
-export default async function Page() {
-    return <SearchFilters />;
+export default async function Page({ params }: LocalePathParam) {
+    const [brands, states] = await Promise.all([api.getVehicleBrands(), api.getStates(params.locale)])
+    return <SearchFilters vehicleBrands={brands} states={states}/>;
 }
diff --git a/src/app/[locale]/search/(list)/@searchGrid/(page)/page.tsx b/src/app/[locale]/search/(list)/@searchGrid/(page)/page.tsx
index fabdfc6..22cd0b4 100644
--- a/src/app/[locale]/search/(list)/@searchGrid/(page)/page.tsx
+++ b/src/app/[locale]/search/(list)/@searchGrid/(page)/page.tsx
@@ -9,7 +9,7 @@ import { LocalePathParam, SearchParams } from "@/utils/types";
 export default async function Page({ searchParams, params }: SearchParams & LocalePathParam) {
     const page = searchParams["PageNumber"] ?? "1";
     const parsedSearchParams = PostedListingsFilterSchema.parse(searchParams);
-    const listings = transformListingsListResponse(await api.getPostedListings({ PageNumber: Number(page), PageSize: 12, ...parsedSearchParams }));
+    const listings = transformListingsListResponse(await api.getPostedListings(params.locale, { PageNumber: Number(page), PageSize: 12, ...parsedSearchParams }));
 
     if (listings.items?.length === 0 && page !== "1") {
         redirect(`/${params.locale}/search?${qs.stringify({ ...parsedSearchParams, PageNumber: 1 }, { skipEmptyString: true })}`);
diff --git a/src/components/Common/ListingItem/ListingItem.tsx b/src/components/Common/ListingItem/ListingItem.tsx
index c277eed..be98d37 100644
--- a/src/components/Common/ListingItem/ListingItem.tsx
+++ b/src/components/Common/ListingItem/ListingItem.tsx
@@ -1,8 +1,9 @@
 import { clsx } from "clsx";
 import { FC } from "react";
 import { LinkWithLocale, ListingImage } from "@/components/Common";
-import { getFormattedCurrency, getLocationString, getRandomItem, numberWithCommas, timeAgo, unCamelCase } from "@/utils/helpers";
+import { getFormattedCurrency, getFormattedDistance, getLocationString, getRandomItem, numberWithCommas, timeAgo, unCamelCase } from "@/utils/helpers";
 import { ListingItem as ListingItemType } from "@/utils/types";
+import { COUNTRIES } from "@/utils/countries";
 
 interface Props {
     detailed?: boolean;
@@ -15,6 +16,8 @@ export const ListingItem: FC<Props> = ({ item, detailed = false, loading, tinted
     const vehicleImages = item?.vehicle?.vehicleImages || [];
     const image = vehicleImages[0];
 
+    // todo: check how the white overlay loading screen looks like in landing page
+
     const ListingItemContent = (
         <>
             <figure className="relative">
@@ -31,18 +34,18 @@ export const ListingItem: FC<Props> = ({ item, detailed = false, loading, tinted
                         width={450}
                     />
                 ) : (
-                    <div className="aspect-video w-full bg-neutral bg-opacity-50" />
+                    <div className="aspect-video w-full bg-base-200 bg-opacity-50" />
                 )}
 
                 {tinted && <div className="image-hover-tint absolute h-full w-full bg-hero bg-opacity-20 duration-300" />}
 
-                <div className="absolute bottom-0 left-0 mt-5 flex min-h-fit w-full flex-col justify-end bg-gradient-to-t from-neutral to-transparent  px-3 py-0 pt-6">
+                <div className={clsx("absolute bottom-0 left-0 mt-5 flex min-h-fit w-full flex-col justify-end bg-gradient-to-t to-transparent  px-3 py-0 pt-6", item ? "from-neutral" : "from-base-200")}>
                     {item ? (
                         <div className="badge-hover-translucent badge badge-secondary badge-lg font-bold duration-300 image-text-shadow ">
-                            {getFormattedCurrency(item?.price?.amount, item?.price?.currency)}
+                            {getFormattedCurrency(item?.price?.amount, item?.price?.currencySymbol)}
                         </div>
                     ) : (
-                        <div className="badge badge-accent badge-lg w-32 opacity-50" />
+                        <div className="badge badge-accent badge-lg w-32 opacity-30" />
                     )}
 
                     {item ? (
@@ -55,25 +58,25 @@ export const ListingItem: FC<Props> = ({ item, detailed = false, loading, tinted
                             {item?.title}
                         </div>
                     ) : (
-                        <div className={clsx("my-2 h-8 bg-white opacity-50", getRandomItem(["w-4/5", "w-5/6", "w-9/12"]))} />
+                        <div className={clsx("my-2 h-8 bg-base-300 opacity-50", getRandomItem(["w-4/5", "w-5/6", "w-9/12"]))} />
                     )}
                 </div>
             </figure>
-            <div className={clsx("card-body flex flex-col gap-0  bg-gradient-to-t from-black to-neutral px-3 pb-2 pt-0")}>
+            <div className={clsx("card-body flex flex-col gap-0 bg-gradient-to-t  px-3 pb-2 pt-0",item ? "from-black to-neutral" :"from-base-300 to-base-200")}>
                 {item ? (
-                    <div className="text-sm font-medium text-base-200">{getLocationString(item?.location)}</div>
+                    <div className="text-sm font-medium text-base-200">{getLocationString(item?.location, COUNTRIES[item?.location?.country ?? '']?.[0])}</div>
                 ) : (
-                    <div className={clsx("mt-2 h-3 bg-base-200 opacity-50", getRandomItem(["w-1/2", "w-4/6", "w-5/12"]))} />
+                    <div className={clsx("mt-2 h-3 bg-base-300 opacity-50", getRandomItem(["w-1/2", "w-4/6", "w-5/12"]))} />
                 )}
                 <div className="flex items-end justify-between text-base-300">
                     {item ? (
                         <div className="line-clamp-1 flex-1 text-sm font-light">
                             {`${unCamelCase(item?.vehicle?.condition)} ${
-                                item?.vehicle?.millage ? `| ${numberWithCommas(item?.vehicle?.millage)} km ` : ""
+                                item?.vehicle?.millage ? `| ${getFormattedDistance(item?.vehicle?.millage.distance,item?.location?.country)} ` : ""
                             }| ${unCamelCase(item?.vehicle?.type)}`}
                         </div>
                     ) : (
-                        <div className={clsx("mt-1 h-3 bg-base-200 opacity-50", getRandomItem(["w-3/5", "w-8/12", "w-4/6"]))} />
+                        <div className={clsx("mt-1 h-3 bg-base-300 opacity-50", getRandomItem(["w-3/5", "w-8/12", "w-4/6"]))} />
                     )}
                     {detailed && item?.createdOn && <div className="text-xs font-extralight">{timeAgo(new Date(item?.createdOn))}</div>}
                 </div>
diff --git a/src/components/Common/Modal/Modal.tsx b/src/components/Common/Modal/Modal.tsx
index 1569683..1432600 100644
--- a/src/components/Common/Modal/Modal.tsx
+++ b/src/components/Common/Modal/Modal.tsx
@@ -3,6 +3,7 @@ import { FC, PropsWithChildren } from "react";
 
 interface Props {
     cancelable?: boolean;
+    childrenClassnames?: string;
     modalClassnames?: string;
     onVisibleChange: (visible: boolean) => void;
     title?: string;
@@ -17,19 +18,23 @@ export const Modal: FC<PropsWithChildren<Props>> = ({
     children,
     title,
     titleClassNames,
+    childrenClassnames,
     cancelable = true,
 }) => {
     return (
         <>
             <div className={clsx({ modal: true, "modal-open": visible })}>
-                <div className={clsx("modal-box cursor-default", modalClassnames)} onClick={(event) => event.preventDefault()}>
+                <div className={clsx("modal-box cursor-default p-0", modalClassnames)} onClick={(event) => event.preventDefault()}>
                     {cancelable && (
-                        <button className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2" onClick={() => onVisibleChange(false)}>
+                        <button
+                            className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2 text-base-content"
+                            onClick={() => onVisibleChange(false)}
+                        >
                             ✕
                         </button>
                     )}
-                    <div className={clsx("mb-2 text-lg font-bold", titleClassNames)}>{title}</div>
-                    <div className="text-base-content opacity-90">{children}</div>
+                    <div className={clsx("mb-2 px-4 pt-4 text-lg font-bold text-neutral lg:px-6 lg:pt-6", titleClassNames)}>{title}</div>
+                    <div className={clsx("p-4 pt-2 text-base-content opacity-90 lg:p-6 lg:pt-2", childrenClassnames)}>{children}</div>
                 </div>
                 <label
                     className="modal-backdrop backdrop-blur-sm backdrop-brightness-75"
diff --git a/src/components/DashboardListings/DashboardListingItem.tsx b/src/components/DashboardListings/DashboardListingItem.tsx
index d146fef..a59ba2e 100644
--- a/src/components/DashboardListings/DashboardListingItem.tsx
+++ b/src/components/DashboardListings/DashboardListingItem.tsx
@@ -6,6 +6,7 @@ import { ContextMenuLoading } from "@/components/Common/ContextMenu";
 import { ListingStatusTypes } from "@/utils/enum";
 import { getFormattedCurrency, getLocationString, getRandomItem, timeAgo, unCamelCase } from "@/utils/helpers";
 import { ListingItem } from "@/utils/types";
+import { COUNTRIES } from "@/utils/countries";
 
 const DashboardListingItemMenu = dynamic(() => import("./DashboardListingItemMenu").then((mod) => mod.DashboardListingItemMenu), {
     loading: () => <ContextMenuLoading />,
@@ -22,8 +23,8 @@ interface Props {
 export const DashboardListingItem: FC<Props> = (props) => {
     const { basePath, listingItem = {}, loading, isAdmin } = props;
     const { title, price, description, status, id, vehicle, location, createdOn } = listingItem as ListingItem;
-    const locationStr = getLocationString(location);
-    const priceStr = getFormattedCurrency(price?.amount, price?.currency);
+    const locationStr = getLocationString(location, COUNTRIES[location?.country ?? '']?.[0]);
+    const priceStr = getFormattedCurrency(price?.amount, price?.currencyCode);
 
     const listingItemContent = (
         <div className="grid grid-cols-12 gap-0.5 p-3 md:gap-2 md:p-4 xl:gap-4">
diff --git a/src/components/DashboardProfile/ProfileDetails.tsx b/src/components/DashboardProfile/ProfileDetails.tsx
index aa3dd8b..f40c2fc 100644
--- a/src/components/DashboardProfile/ProfileDetails.tsx
+++ b/src/components/DashboardProfile/ProfileDetails.tsx
@@ -1,8 +1,9 @@
 import { Session } from "@auth0/nextjs-auth0/edge";
 import { clsx } from "clsx";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { Avatar, LinkWithLocale } from "@/components/Common";
 import { AlertCircleIcon, EditIcon } from "@/icons";
+import { COUNTRIES } from "@/utils/countries";
 import { getRandomItem, isIncompleteUserProfile } from "@/utils/helpers";
 import { ListingUser } from "@/utils/types";
 import { CloseAccountButton } from "./CloseAccountButton";
@@ -13,7 +14,7 @@ interface Props {
     session?: Session | null;
 }
 
-const DetailsItem = ({ title, value, loading }: { loading?: boolean; title: string; value: string }) => (
+const DetailsItem = ({ title, value, loading }: { loading?: boolean; title: string; value: ReactNode }) => (
     <div>
         <div className="text-xs opacity-50">{title}</div>
 
@@ -34,6 +35,9 @@ export const ProfileDetails: FC<Props> = ({ profile, session, loading }) => {
     } else if (session?.user.isAdmin) {
         userType = "Admin";
     }
+
+    const countryPhoneCode = COUNTRIES[profile?.address?.country || ""]?.[3];
+
     return (
         <>
             {!loading && isProfileIncomplete && (
@@ -72,16 +76,25 @@ export const ProfileDetails: FC<Props> = ({ profile, session, loading }) => {
                         <div className="text-lg font-bold">Contact Details</div>
                         <div className="flex flex-col gap-2">
                             <DetailsItem loading={loading} title="Email" value={profile?.email ?? "-"} />
-                            <DetailsItem loading={loading} title="Phone Number" value={profile?.phone ?? "-"} />
+                            <DetailsItem
+                                loading={loading}
+                                title="Phone Number"
+                                value={
+                                    <>
+                                        <span className="font-light opacity-70">{countryPhoneCode ? `${countryPhoneCode} ` : ""}</span>
+                                        {profile?.phone ?? "-"}
+                                    </>
+                                }
+                            />
                         </div>
                     </div>
                     <div className="flex flex-col gap-1">
                         <div className="text-lg font-bold">Location Details</div>
                         <div className="flex flex-col gap-2">
-                            <DetailsItem loading={loading} title="City" value={profile?.address?.city ?? "-"} />
+                            <DetailsItem loading={loading} title="Country" value={COUNTRIES[profile?.address?.country!]?.[0] ?? "-"} />
                             <DetailsItem loading={loading} title="State" value={profile?.address?.state ?? "-"} />
+                            <DetailsItem loading={loading} title="City" value={profile?.address?.city ?? "-"} />
                             <DetailsItem loading={loading} title="Postal Code" value={profile?.address?.postalCode ?? "-"} />
-                            <DetailsItem loading={loading} title="Country" value={profile?.address?.country ?? "-"} />
                         </div>
                     </div>
                 </div>
diff --git a/src/components/FormElements/AutoComplete/Autocomplete.tsx b/src/components/FormElements/AutoComplete/Autocomplete.tsx
index e571dd8..7a42114 100644
--- a/src/components/FormElements/AutoComplete/Autocomplete.tsx
+++ b/src/components/FormElements/AutoComplete/Autocomplete.tsx
@@ -67,7 +67,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, Props>((props, ref) =>
                     <Combobox.Button className="w-full bg-transparent" onClick={resetQueryIfNoMatch}>
                         <Combobox.Input
                             className={clsx(
-                                "select-bordered select w-full bg-transparent font-normal",
+                                "select select-bordered w-full bg-transparent font-normal",
                                 error && "select-error",
                                 disabled && "text-opacity-90",
                                 selectClassNames,
@@ -89,7 +89,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, Props>((props, ref) =>
                     <div className={clsx("dropdown-end dropdown absolute inset-x-0 bottom-0 w-full", open && "dropdown-open")}>
                         <div
                             className={clsx(
-                                "dropdown-content menu z-[1] mt-1 grid max-h-60 w-full overflow-y-auto rounded rounded-t-none bg-base-200 shadow-lg",
+                                "menu dropdown-content z-[1] mt-1 grid max-h-60 w-full overflow-y-auto rounded rounded-t-none bg-base-200 shadow-lg",
                                 gridCols,
                             )}
                         >
@@ -101,7 +101,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, Props>((props, ref) =>
                                         key={option.value}
                                         className={({ active, selected }) =>
                                             clsx({
-                                                "hover:bg-base-200": true,
+                                                "hover:bg-base-200 w-full truncate line-clamp-1 overflow-hidden": true,
                                                 "font-bold": selected,
                                                 "bg-base-300 hover:bg-base-300": active,
                                             })
diff --git a/src/components/FormElements/Checkbox/Checkbox.tsx b/src/components/FormElements/Checkbox/Checkbox.tsx
index 6bcc454..77cd56e 100644
--- a/src/components/FormElements/Checkbox/Checkbox.tsx
+++ b/src/components/FormElements/Checkbox/Checkbox.tsx
@@ -14,19 +14,20 @@ export interface ControllerProps extends ComponentProps<"input"> {
 export interface Props extends Omit<ControllerProps, "fieldName" | "control"> {}
 
 export const Checkbox = forwardRef<HTMLInputElement, Props>((props, ref) => {
-    const { label, checkboxClassNames, loading, ...rest } = props;
+    const { label, checkboxClassNames, loading, disabled, ...rest } = props;
     return (
         <label
             className={clsx(
                 "label rounded-lg border-2 border-opacity-50 py-3 duration-200 hover:bg-base-200 hover:bg-opacity-50",
-                !loading && "cursor-pointer",
+                !loading && !disabled && "cursor-pointer",
+                disabled && "opacity-50",
             )}
             onClick={(event) => event.stopPropagation()}
         >
             <span className="label-text">{label}</span>
             <input
                 className={clsx("checkbox checkbox-md border-2", loading && "animate-pulse !bg-base-300", checkboxClassNames)}
-                disabled={loading}
+                disabled={loading || disabled}
                 ref={ref}
                 type="checkbox"
                 {...rest}
diff --git a/src/components/FormElements/Checkbox/CheckboxController.tsx b/src/components/FormElements/Checkbox/CheckboxController.tsx
index c222038..fe7e573 100644
--- a/src/components/FormElements/Checkbox/CheckboxController.tsx
+++ b/src/components/FormElements/Checkbox/CheckboxController.tsx
@@ -7,7 +7,7 @@ export const CheckboxController: FC<ControllerProps> = (props) => {
     const { loading, fieldName, control, ...rest } = props;
     if (loading || !control) {
         return (
-            <div className="form-control mb-1 mt-2 animate-pulse lg:mt-5">
+            <div className="form-control my-1 animate-pulse lg:mt-3">
                 <Checkbox loading={loading} {...rest} ref={undefined} />
             </div>
         );
@@ -18,7 +18,7 @@ export const CheckboxController: FC<ControllerProps> = (props) => {
             control={control}
             name={fieldName}
             render={({ field }) => (
-                <div className="form-control mb-1 mt-2 lg:mt-5">
+                <div className="form-control my-1 lg:mt-3">
                     <Checkbox {...rest} {...field} checked={field.value} ref={field.ref} />
                 </div>
             )}
diff --git a/src/components/FormElements/Input/Input.tsx b/src/components/FormElements/Input/Input.tsx
index e66adc1..20c4b2f 100644
--- a/src/components/FormElements/Input/Input.tsx
+++ b/src/components/FormElements/Input/Input.tsx
@@ -26,27 +26,41 @@ export interface ControllerProps extends FormFieldControllerProps, ComponentProp
 
 export interface Props extends Omit<ControllerProps, "label" | "labelClassNames" | "rootClassName" | "required" | "fieldName" | "control"> {}
 
-const InputWrap = ({ children, inputPrefix, inputSuffix }: { children: ReactNode; inputPrefix?: ReactNode; inputSuffix?: ReactNode }) => {
+const InputWrap = ({
+    children,
+    inputPrefix,
+    inputSuffix,
+    disabled,
+}: {
+    children: ReactNode;
+    disabled?: boolean;
+    inputPrefix?: ReactNode;
+    inputSuffix?: ReactNode;
+}) => {
     return (
         <div className="join join-horizontal w-full">
             {inputPrefix && (
-                <span className="join-item flex items-center border-[1px] border-r-0 border-base-300 bg-base-200 px-3 py-1">{inputPrefix}</span>
+                <span className={clsx("join-item flex items-center bg-base-200 px-3 py-1", !disabled && "border-[1px] border-r-0 border-base-300")}>
+                    {inputPrefix}
+                </span>
             )}
             {children}
             {inputSuffix && (
-                <span className="join-item flex items-center border-[1px] border-l-0 border-base-300 bg-base-200 px-3 py-1">{inputSuffix}</span>
+                <span className={clsx("join-item flex items-center bg-base-200 px-3 py-1", !disabled && "border-[1px] border-l-0 border-base-300")}>
+                    {inputSuffix}
+                </span>
             )}
         </div>
     );
 };
 
 export const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
-    const { error, inputClassNames, loading, type, inputPrefix, inputSuffix, ...rest } = props;
+    const { error, inputClassNames, loading, type, inputPrefix, inputSuffix, disabled, ...rest } = props;
 
     if (type === "number") {
         return (
             <NumericFormatLoadingContext.Provider value={{ inputClassNames }}>
-                <InputWrap inputPrefix={inputPrefix} inputSuffix={inputSuffix}>
+                <InputWrap disabled={disabled} inputPrefix={inputPrefix} inputSuffix={inputSuffix}>
                     <NumericFormat
                         className={clsx(
                             "input input-bordered  join-item w-full bg-transparent",
@@ -56,7 +70,7 @@ export const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
                         )}
                         decimalScale={2}
                         decimalSeparator="."
-                        disabled={loading}
+                        disabled={loading || disabled}
                         getInputRef={ref}
                         thousandSeparator=","
                         {...rest}
@@ -68,7 +82,7 @@ export const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
         );
     }
     return (
-        <InputWrap inputPrefix={inputPrefix} inputSuffix={inputSuffix}>
+        <InputWrap disabled={disabled} inputPrefix={inputPrefix} inputSuffix={inputSuffix}>
             <input
                 className={clsx(
                     "input input-bordered join-item w-full flex-1 bg-transparent",
@@ -76,7 +90,7 @@ export const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
                     loading && "animate-pulse",
                     inputClassNames,
                 )}
-                disabled={loading}
+                disabled={loading || disabled}
                 ref={ref}
                 type={type}
                 {...rest}
diff --git a/src/components/FormElements/TagSelect/TagSelect.tsx b/src/components/FormElements/TagSelect/TagSelect.tsx
index 986175e..34ffc5e 100644
--- a/src/components/FormElements/TagSelect/TagSelect.tsx
+++ b/src/components/FormElements/TagSelect/TagSelect.tsx
@@ -2,12 +2,13 @@ import { clsx } from "clsx";
 import { FC } from "react";
 
 interface Props {
+    disabled?: boolean;
     onSelect?: (item: number[]) => void;
     selectedTags?: number[];
     tags?: { id: number; name: string }[];
 }
 
-export const TagSelect: FC<Props> = ({ tags = [], selectedTags = [], onSelect = () => {} }) => {
+export const TagSelect: FC<Props> = ({ tags = [], selectedTags = [], onSelect = () => {}, disabled }) => {
     return (
         <div className="flex flex-wrap gap-1">
             {tags.map((tag) => {
@@ -19,12 +20,15 @@ export const TagSelect: FC<Props> = ({ tags = [], selectedTags = [], onSelect =
                             "badge cursor-pointer p-3 duration-200 select-none": true,
                             "badge-neutral opacity-100 hover:opacity-75": tagSelected,
                             "badge-outline hover:bg-base-300": !tagSelected,
+                            "!opacity-50 btn-disabled": disabled,
                         })}
                         onClick={() => {
-                            if (selectedTags?.includes(tag.id)) {
-                                onSelect(selectedTags?.filter((id) => tag.id !== id));
-                            } else {
-                                onSelect([...selectedTags, tag.id]);
+                            if (!disabled) {
+                                if (selectedTags?.includes(tag.id)) {
+                                    onSelect(selectedTags?.filter((id) => tag.id !== id));
+                                } else {
+                                    onSelect([...selectedTags, tag.id]);
+                                }
                             }
                         }}
                     >
diff --git a/src/components/FormElements/TagSelect/TagSelectController.tsx b/src/components/FormElements/TagSelect/TagSelectController.tsx
index cb5a591..1b5a6f9 100644
--- a/src/components/FormElements/TagSelect/TagSelectController.tsx
+++ b/src/components/FormElements/TagSelect/TagSelectController.tsx
@@ -6,13 +6,14 @@ import { TagSelect } from "./TagSelect";
 
 interface Props {
     control?: Control<any>;
+    disabled?: boolean;
     fieldName: string;
     loading?: boolean;
     loadingPlaceholderCount?: number;
     tags?: { id: number; name: string }[];
 }
 
-export const TagSelectController: FC<Props> = ({ tags = [], fieldName, loading, loadingPlaceholderCount = 10, control }) => {
+export const TagSelectController: FC<Props> = ({ tags = [], fieldName, loading, loadingPlaceholderCount = 10, control, disabled }) => {
     const placeholderWidth = ["w-44", "w-24", "w-32", "w-40", "w-48", "w-28", "w-16", "w-14", "w-10"];
 
     if (loading || !control) {
@@ -28,7 +29,7 @@ export const TagSelectController: FC<Props> = ({ tags = [], fieldName, loading,
         <Controller
             control={control}
             name={fieldName}
-            render={({ field: { value = [], onChange } }) => <TagSelect onSelect={onChange} selectedTags={value} tags={tags} />}
+            render={({ field: { value = [], onChange } }) => <TagSelect disabled={disabled} onSelect={onChange} selectedTags={value} tags={tags} />}
         />
     );
 };
diff --git a/src/components/FormElements/TextArea/TextArea.tsx b/src/components/FormElements/TextArea/TextArea.tsx
index 55ebb76..6b3dd96 100644
--- a/src/components/FormElements/TextArea/TextArea.tsx
+++ b/src/components/FormElements/TextArea/TextArea.tsx
@@ -18,7 +18,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
     return (
         <textarea
             className={clsx(
-                "textarea-bordered textarea textarea-md min-h-[140px] w-full bg-transparent",
+                "textarea textarea-bordered textarea-md min-h-[200px] w-full bg-transparent",
                 error && "textarea-error",
                 loading && "animate-pulse",
                 textAreaClassNames,
diff --git a/src/components/FormElements/YearInput/YearInputController.tsx b/src/components/FormElements/YearInput/YearInputController.tsx
index 40ee739..ccee65f 100644
--- a/src/components/FormElements/YearInput/YearInputController.tsx
+++ b/src/components/FormElements/YearInput/YearInputController.tsx
@@ -22,6 +22,7 @@ export const YearInputController: FC<Omit<ControllerProps, "showSelectedTick" |
     errorAsTooltip,
 }) => {
     const [years, setYears] = useState<LabelValue[]>([]);
+
     useEffect(() => {
         setYears(YearRangeList);
     }, []);
diff --git a/src/components/Forms/Listings/CreateListingForm.tsx b/src/components/Forms/Listings/CreateListingForm.tsx
index d0c81da..d68fe0d 100644
--- a/src/components/Forms/Listings/CreateListingForm.tsx
+++ b/src/components/Forms/Listings/CreateListingForm.tsx
@@ -7,55 +7,53 @@ import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { createListingAction } from "@/actions/listingActions";
 import { ListingForm } from "@/components/Forms/Listings/ListingForm";
-import { convertYearToDateString, getListingTitleFromVehicle, transformImagesToPost } from "@/utils/helpers";
+import { COUNTRIES } from "@/utils/countries";
+import { convertYearToDateString, getDistanceUnit, getListingTitleFromVehicle, transformImagesToPost } from "@/utils/helpers";
 import { CreateListingSchema } from "@/utils/schemas";
-import { CreateListingReq, ListingUser, VehicleFeature } from "@/utils/types";
+import { CreateListingReq, ListingUser, VehicleBrand, VehicleFeature } from "@/utils/types";
 
 interface Props {
+    brands: VehicleBrand[];
     features: VehicleFeature[];
     profile?: ListingUser;
     userId?: string;
 }
 
 export const CreateListingForm = (props: Props) => {
-    const { features, userId, profile } = props;
+    const { features, userId, profile, brands } = props;
     const router = useRouter();
     const params = useParams();
-
     const toastId = useRef<string>();
+    const countryItem = COUNTRIES[profile?.address?.country || ""];
+    const distanceUnit = getDistanceUnit(profile?.address?.country);
 
     const form = useForm<CreateListingReq>({
         resolver: zodResolver(CreateListingSchema),
         defaultValues: {
-            vehicle: { vehicleImages: [], featureIds: [] },
+            vehicle: { vehicleImages: [], featureIds: [], millage: { unit: distanceUnit },trim:"" },
             location: {
                 city: profile?.address?.city || "",
                 state: profile?.address?.state || "",
                 postalCode: profile?.address?.postalCode || "",
-                country: profile?.address?.country || "LK",
+                country: profile?.address?.country ? COUNTRIES[profile?.address?.country]?.[0] : COUNTRIES[params.locale as string]?.[0],
             },
+            price: { currencyCode: countryItem?.[1], currencySymbol: countryItem?.[2] },
         },
         mode: "all",
     });
 
-    useEffect(() => {
-        form?.reset({
-            location: {
-                city: profile?.address?.city || "",
-                state: profile?.address?.state || "",
-                postalCode: profile?.address?.postalCode || "",
-                country: profile?.address?.country || "LK",
-            },
-        });
-    }, [profile, form]);
-
     const { mutate: createListingsMutation, isLoading: isMutating } = useMutation(
         async (formValues: CreateListingReq) => {
             const vehicleImages = await transformImagesToPost(formValues.vehicle.vehicleImages);
 
+            const countryCode = Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === formValues?.location?.country);
+
             const requestBody: CreateListingReq = {
                 ...formValues,
-
+                location:{
+                    ...formValues.location,
+                    country: countryCode!
+                },
                 vehicle: {
                     ...formValues.vehicle,
                     vehicleImages: vehicleImages,
@@ -92,13 +90,31 @@ export const CreateListingForm = (props: Props) => {
         },
     );
 
+    useEffect(() => {
+        if(form.reset){
+            form.reset({
+                location: {
+                    city: profile?.address?.city || "",
+                    state: profile?.address?.state || "",
+                    postalCode: profile?.address?.postalCode || "",
+                    country: profile?.address?.country ? COUNTRIES[profile?.address?.country]?.[0] : "",
+                },
+                price: { currencyCode: countryItem?.[1], currencySymbol: countryItem?.[2] },
+                vehicle: { millage: { unit: distanceUnit } },
+            });
+        }
+    }, [profile, form, countryItem, distanceUnit]);
+
     return (
         <ListingForm
             featureOptions={features}
             form={form}
             isMutating={isMutating}
             onMutate={createListingsMutation}
+            profile={profile}
             submitButton={{ text: "Create", mutatingText: "Creating..." }}
+            vehicleBrands={brands}
+            listingUser={{ email: profile?.email, phoneNumber: profile?.phone, phoneCountryCode: countryItem?.[3] }}
         />
     );
 };
diff --git a/src/components/Forms/Listings/EditListingForm.tsx b/src/components/Forms/Listings/EditListingForm.tsx
index f634f71..ba7aad8 100644
--- a/src/components/Forms/Listings/EditListingForm.tsx
+++ b/src/components/Forms/Listings/EditListingForm.tsx
@@ -2,26 +2,29 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import { useParams, useRouter } from "next/navigation";
-import { FC, useRef } from "react";
+import { FC, useEffect, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { editListingAction } from "@/actions/listingActions";
 import { ListingForm } from "@/components/Forms/Listings/ListingForm";
-import { convertYearToDateString, getListingTitleFromVehicle, transformImagesToPost } from "@/utils/helpers";
+import { COUNTRIES } from "@/utils/countries";
+import { convertYearToDateString, getDistanceUnit, getListingTitleFromVehicle, transformImagesToPost } from "@/utils/helpers";
 import { CreateListingSchema } from "@/utils/schemas";
-import { CreateListingReq, EditListingReq, ListingItem, VehicleFeature } from "@/utils/types";
+import { CreateListingReq, EditListingReq, ListingItem, ListingUser, VehicleBrand, VehicleFeature } from "@/utils/types";
 
 interface Props {
+    brands: VehicleBrand[];
     features: VehicleFeature[];
     listingItem: ListingItem;
+    profile?: ListingUser;
     successRedirectPath: string;
+    userId?: string;
 }
 
 export const EditListingForm: FC<Props> = (props) => {
-    const { features, listingItem, successRedirectPath } = props;
+    const { features, listingItem, successRedirectPath, brands, profile, userId } = props;
     const router = useRouter();
     const params = useParams();
-
     const toastId = useRef<string>();
 
     const form = useForm<CreateListingReq>({
@@ -42,9 +45,15 @@ export const EditListingForm: FC<Props> = (props) => {
         async (formValues: EditListingReq) => {
             const vehicleImages = await transformImagesToPost(formValues.vehicle.vehicleImages);
 
+            const countryCode = Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === formValues?.location?.country);
+
             const requestBody: EditListingReq = {
                 ...formValues,
                 listingId: listingItem.id,
+                location:{
+                    ...formValues.location,
+                    country: countryCode!
+                },
                 vehicle: {
                     ...formValues.vehicle,
                     vehicleImages: vehicleImages,
@@ -77,17 +86,46 @@ export const EditListingForm: FC<Props> = (props) => {
                     toast.success(`Successfully updated the Advert ${getListingTitleFromVehicle(req.vehicle)}`, { id: toastId?.current });
                 }
             },
-        },
+        }
     );
 
+    useEffect(() => {
+        if (form.reset && listingItem?.userId === userId) {
+            const countryItem = COUNTRIES[profile?.address?.country || ""];
+            const distanceUnit = getDistanceUnit(profile?.address?.country);
+            form.reset({
+                location: {
+                    city: profile?.address?.city || "",
+                    state: profile?.address?.state || "",
+                    postalCode: profile?.address?.postalCode || "",
+                    country: profile?.address?.country ? COUNTRIES[profile?.address?.country]?.[0] : "",
+                },
+                price: { currencyCode: countryItem?.[1], currencySymbol: countryItem?.[2] },
+                vehicle: { millage: { unit: distanceUnit } },
+            });
+        }
+    }, [profile, form]);
+
     return (
         <ListingForm
             featureOptions={features}
             form={form}
             isMutating={isMutating}
             onMutate={(values) => updateListingsMutation({ ...values, listingId: listingItem.id })}
+            profile={profile}
             submitButton={{ text: "Update", mutatingText: "Updating...", disableIfCleanForm: true }}
             title={listingItem?.title}
+            vehicleBrands={brands}
+            isUpdateProfileEnabled={userId === listingItem?.userId}
+            listingUser={
+                userId === listingItem?.userId
+                    ? { email: profile?.email, phoneNumber: profile?.phone, phoneCountryCode: COUNTRIES[profile?.address?.country || ""]?.[3] }
+                    : {
+                          email: listingItem?.user?.email,
+                          phoneNumber: listingItem?.user?.phone,
+                          phoneCountryCode: COUNTRIES[listingItem?.user?.address?.country || ""]?.[3],
+                      }
+            }
         />
     );
 };
diff --git a/src/components/Forms/Listings/ListingForm.tsx b/src/components/Forms/Listings/ListingForm.tsx
index 44b0b18..a68bc00 100644
--- a/src/components/Forms/Listings/ListingForm.tsx
+++ b/src/components/Forms/Listings/ListingForm.tsx
@@ -1,7 +1,9 @@
 "use client";
+import { clsx } from "clsx";
 import dynamic from "next/dynamic";
-import { FC } from "react";
+import { FC, ReactNode, useEffect, useState } from "react";
 import { Controller, UseFormReturn } from "react-hook-form";
+import { LinkWithLocale } from "@/components/Common";
 import { AutocompleteController } from "@/components/FormElements/AutoComplete";
 import { CheckboxController } from "@/components/FormElements/Checkbox";
 import { InputController } from "@/components/FormElements/Input";
@@ -9,10 +11,15 @@ import { SelectController } from "@/components/FormElements/Select";
 import { TagSelectController } from "@/components/FormElements/TagSelect";
 import { TextAreaController } from "@/components/FormElements/TextArea";
 import { YearInputController } from "@/components/FormElements/YearInput";
+import { AlertCircleIcon } from "@/icons";
 import { FuelTypeList, TransmissionTypeList, VehicleConditionList, VehicleTypeList } from "@/utils/constants";
-import { CreateListingReq, VehicleFeature } from "@/utils/types";
+import { COUNTRIES } from "@/utils/countries";
+import { getDistanceUnit, getRandomItem, isIncompleteUserProfile } from "@/utils/helpers";
+import { CreateListingReq, LabelValue, ListingUser, VehicleBrand, VehicleFeature } from "@/utils/types";
 import { ListingImageUploadLoading } from "./ListingImageUpload";
 
+const ProfileUpdateModal = dynamic(() => import("@/components/Modals/ProfileUpdateModal").then((mod) => mod.ProfileUpdateModal), { ssr: false });
+
 const ListingImageUpload = dynamic(() => import("./ListingImageUpload").then((mod) => mod.ListingImageUpload), {
     loading: () => <ListingImageUploadLoading />,
     ssr: false,
@@ -24,246 +31,322 @@ interface Props {
     isLoading?: boolean;
     isMutating?: boolean;
     onMutate?: (values: CreateListingReq) => void;
+    profile?: ListingUser;
     submitButton?: {
         disableIfCleanForm?: boolean;
         mutatingText?: string;
         text?: string;
     };
     title?: string;
+    vehicleBrands?: VehicleBrand[];
+    isUpdateProfileEnabled?: boolean;
+    listingUser?: {
+        email?: string;
+        phoneNumber?: string;
+        phoneCountryCode?: string;
+    }
 }
 
+const DetailsItem = ({ title, value, loading }: { loading?: boolean; title: string; value: ReactNode }) => (
+    <div>
+        <div className="text-sm font-light opacity-70">{title}</div>
+
+        {loading ? (
+            <div className={clsx("my-0.5 h-5 animate-pulse bg-base-200", getRandomItem(["w-32", "w-40", "w-28", "w-48"]))} />
+        ) : (
+            <div className="mb-2">{value}</div>
+        )}
+    </div>
+);
+
 export const ListingForm: FC<Props> = (props) => {
-    const { featureOptions = [], isMutating, isLoading, form = {}, onMutate = () => {}, submitButton = {}, title } = props;
-    const { handleSubmit, formState: { isDirty } = {}, control } = form as UseFormReturn<CreateListingReq>;
+    const {
+        featureOptions = [],
+        isMutating,
+        isLoading,
+        form = {},
+        onMutate = () => {},
+        submitButton = {},
+        title,
+        vehicleBrands = [],
+        profile,
+        isUpdateProfileEnabled = true,
+        listingUser,
+    } = props;
+    const { handleSubmit, formState: { isDirty } = {}, control, watch = (_: string) => "" } = form as UseFormReturn<CreateListingReq>;
+    const [profileModalVisible, setProfileModalVisible] = useState(false);
+    const country = watch("location.country");
+    const state = watch("location.state");
+    const city = watch("location.city");
+    const postalCode = watch("location.postalCode");
+    const countryCode = Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === country);
+    const distanceUnit = getDistanceUnit(countryCode);
+    const isProfileIncomplete = profile ? isIncompleteUserProfile(profile) : false;
+    const countryItem = COUNTRIES[countryCode || ""];
+    const currencySymbol = countryItem?.[2];
 
     return (
-        <form onSubmit={handleSubmit ? handleSubmit((values) => onMutate(values)) : undefined}>
-            <div className="grid gap-4 xl:grid-cols-2 xl:gap-7 2xl:gap-8">
-                <div className="flex flex-col gap-4 xl:gap-7 2xl:gap-8">
-                    <div className="card stat bg-base-100 p-4 shadow">
-                        <div className="stat-title">Key Specifications</div>
-                        <AutocompleteController
-                            control={control}
-                            fieldName="vehicle.type"
-                            label="Type"
-                            loading={isLoading}
-                            options={VehicleTypeList}
-                            placeholder="Select Type"
-                            required
-                        />
-                        <div className="grid gap-1 sm:grid-cols-2">
-                            <InputController
-                                control={control}
-                                fieldName="vehicle.brand"
-                                label="Brand"
-                                loading={isLoading}
-                                placeholder="Toyota, Nissan, Honda, etc"
-                                required
-                            />
-                            <InputController
-                                control={control}
-                                fieldName="vehicle.model"
-                                label="Model"
-                                loading={isLoading}
-                                placeholder="Civic, Sunny, Swift, etc"
-                                required
-                            />
-                            <InputController
-                                control={control}
-                                fieldName="vehicle.trim"
-                                label="Trim"
-                                loading={isLoading}
-                                placeholder="LX, EX, EX-L, Sport, etc"
-                            />
-                            <YearInputController
-                                control={control}
-                                fieldName="vehicle.yearOfManufacture"
-                                gridCols="grid-cols-3"
-                                label="Year of Manufacture"
-                                loading={isLoading}
-                                placeholder="2000"
-                                required
-                            />
-                            <YearInputController
-                                control={control}
-                                fieldName="vehicle.yearOfRegistration"
-                                gridCols="grid-cols-3"
-                                label="Year of Registration"
-                                loading={isLoading}
-                                placeholder="2010"
-                                required
-                            />
-                            <InputController
-                                control={control}
-                                fieldName="vehicle.millage"
-                                inputSuffix="KM"
-                                label="Mileage"
-                                loading={isLoading}
-                                placeholder="50,000"
-                                required
-                                type="number"
-                            />
-                            <AutocompleteController
-                                control={control}
-                                fieldName="vehicle.condition"
-                                label="Condition"
-                                loading={isLoading}
-                                options={VehicleConditionList}
-                                placeholder="Select Condition"
-                                required
-                            />
+        <>
+            {!isLoading && isProfileIncomplete && (
+                <div className="alert alert-warning mb-6 mt-4 shadow-lg md:mt-1">
+                    <AlertCircleIcon />
+                    <div>
+                        <h3 className="font-bold">Incomplete Profile</h3>
+                        <div className="text-xs">Please update your profile to create an advertisement for your vehicle</div>
+                    </div>
+                    <button className="btn btn-ghost btn-sm" onClick={() => setProfileModalVisible(true)}>
+                        Update Profile
+                    </button>
+                </div>
+            )}
+            <form onSubmit={handleSubmit ? handleSubmit((values) => onMutate(values)) : undefined}>
+                <div className="grid gap-4 xl:grid-cols-2 xl:gap-7 2xl:gap-8">
+                    <div className="flex flex-col gap-4 xl:gap-7 2xl:gap-8">
+                        <div className="card stat bg-base-100 p-4 shadow">
+                            <div className="stat-title">Key Specifications</div>
                             <AutocompleteController
                                 control={control}
-                                fieldName="vehicle.transmission"
-                                label="Transmission Type"
+                                disabled={isProfileIncomplete}
+                                fieldName="vehicle.type"
+                                label="Type"
                                 loading={isLoading}
-                                options={TransmissionTypeList}
+                                options={VehicleTypeList}
                                 placeholder="Select Type"
                                 required
                             />
-                            <AutocompleteController
+                            <div className="grid gap-1 sm:grid-cols-2">
+                                <AutocompleteController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.brand"
+                                    label="Brand"
+                                    loading={isLoading}
+                                    options={vehicleBrands.map((item) => ({ label: item.name, value: item.name }))}
+                                    placeholder="Toyota, Nissan, Honda, etc"
+                                    required
+                                />
+                                <InputController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.model"
+                                    label="Model"
+                                    loading={isLoading}
+                                    placeholder="Civic, Sunny, Swift, etc"
+                                    required
+                                />
+                                <InputController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.trim"
+                                    label="Trim"
+                                    loading={isLoading}
+                                    placeholder="LX, EX, EX-L, Sport, etc"
+                                />
+                                <YearInputController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.yearOfManufacture"
+                                    gridCols="grid-cols-3"
+                                    label="Year of Manufacture"
+                                    loading={isLoading}
+                                    placeholder="2000"
+                                    required
+                                />
+                                <YearInputController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.yearOfRegistration"
+                                    gridCols="grid-cols-3"
+                                    label="Year of Registration"
+                                    loading={isLoading}
+                                    placeholder="2010"
+                                    required
+                                />
+                                <InputController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.millage.distance"
+                                    inputSuffix={distanceUnit}
+                                    label="Mileage"
+                                    loading={isLoading}
+                                    placeholder="50,000"
+                                    required
+                                    type="number"
+                                />
+                                <AutocompleteController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.condition"
+                                    label="Condition"
+                                    loading={isLoading}
+                                    options={VehicleConditionList}
+                                    placeholder="Select Condition"
+                                    required
+                                />
+                                <AutocompleteController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.transmission"
+                                    label="Transmission Type"
+                                    loading={isLoading}
+                                    options={TransmissionTypeList}
+                                    placeholder="Select Type"
+                                    required
+                                />
+                                <AutocompleteController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.fuelType"
+                                    label="Fuel Type"
+                                    loading={isLoading}
+                                    options={FuelTypeList}
+                                    placeholder="Select Fuel Type"
+                                    required
+                                />
+                                <InputController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.engineCapacity"
+                                    inputSuffix="CC"
+                                    label="Engine Capacity"
+                                    loading={isLoading}
+                                    placeholder="1,500"
+                                    required
+                                    type="number"
+                                />
+                            </div>
+                        </div>
+                        <div className="card stat bg-base-100 p-4 shadow">
+                            <div className="stat-title">Other details</div>
+                            <TextAreaController
                                 control={control}
-                                fieldName="vehicle.fuelType"
-                                label="Fuel Type"
+                                disabled={isProfileIncomplete}
+                                fieldName="description"
+                                label="Description"
                                 loading={isLoading}
-                                options={FuelTypeList}
-                                placeholder="Select Fuel Type"
+                                placeholder="Description of the vehicle for sale"
                                 required
                             />
-                            <InputController
+                            <CheckboxController
                                 control={control}
-                                fieldName="vehicle.engineCapacity"
-                                inputSuffix="CC"
-                                label="Engine Capacity"
+                                disabled={isProfileIncomplete}
+                                fieldName="hasOnGoingLease"
+                                label="Is there an active lease for the vehicle?"
                                 loading={isLoading}
-                                placeholder="1,500"
-                                required
-                                type="number"
                             />
                         </div>
                     </div>
-                    <div className="card stat bg-base-100 p-4 shadow">
-                        <div className="stat-title">Other details</div>
-                        <TextAreaController
-                            control={control}
-                            fieldName="description"
-                            label="Description"
-                            loading={isLoading}
-                            placeholder="Description of the vehicle for sale"
-                            required
-                        />
-                        <CheckboxController
-                            control={control}
-                            fieldName="hasOnGoingLease"
-                            label="Is there an active lease for the vehicle?"
-                            loading={isLoading}
-                        />
-                    </div>
-                </div>
-                <div className="flex flex-col gap-4 xl:gap-7 2xl:gap-8">
-                    <div className="card stat bg-base-100 p-4 shadow">
-                        <div className="stat-title">
-                            Images <span className="text-error">*</span>
+                    <div className="flex flex-col gap-4 xl:gap-7 2xl:gap-8">
+                        <div className="card stat bg-base-100 p-4 shadow">
+                            <div className="stat-title">
+                                Images <span className="text-error">*</span>
+                            </div>
+                            {isLoading ? (
+                                <ListingImageUploadLoading />
+                            ) : (
+                                <Controller
+                                    control={control}
+                                    name="vehicle.vehicleImages"
+                                    render={({ field, fieldState }) => (
+                                        <ListingImageUpload
+                                            disabled={isProfileIncomplete}
+                                            error={fieldState.error?.message}
+                                            files={field.value}
+                                            ref={field.ref}
+                                            setFiles={(images) => field.onChange(images)}
+                                            title={title || "New Advert Image"}
+                                        />
+                                    )}
+                                />
+                            )}
                         </div>
-                        {isLoading ? (
-                            <ListingImageUploadLoading />
-                        ) : (
-                            <Controller
-                                control={control}
-                                name="vehicle.vehicleImages"
-                                render={({ field, fieldState }) => (
-                                    <ListingImageUpload
-                                        error={fieldState.error?.message}
-                                        files={field.value}
-                                        ref={field.ref}
-                                        setFiles={(images) => field.onChange(images)}
-                                        title={title || "New Advert Image"}
-                                    />
-                                )}
-                            />
-                        )}
-                    </div>
-                    <div className="card stat bg-base-100 p-4 shadow">
-                        <div className="stat-title">Location Details</div>
-                        <div className="grid gap-1 sm:grid-cols-2">
-                            <InputController
-                                control={control}
-                                fieldName="location.city"
-                                label="City"
-                                loading={isLoading}
-                                placeholder="Colombo"
-                                required
-                            />
+                        <div className="card stat bg-base-100 p-4 shadow">
+                            <div className="flex items-center justify-between">
+                                <div className="stat-title">Location & Contact Details</div>
+                                <button
+                                    className="btn btn-ghost btn-sm"
+                                    disabled={!profile || isLoading || !isUpdateProfileEnabled}
+                                    onClick={(event) => {
+                                        event.preventDefault();
+                                        setProfileModalVisible(true);
+                                    }}
+                                >
+                                    Update
+                                </button>
+                            </div>
+                            <div className="grid gap-1 pt-2 sm:grid-cols-2">
+                                <DetailsItem title="Country" value={(country as string) || "-"} />
+                                <DetailsItem title="State/Province" value={(state as string) || "-"} />
+                                <DetailsItem title="City" value={(city as string) || "-"} />
+                                <DetailsItem title="Postal Code" value={(postalCode as string) || "-"} />
+                                <div className="divider col-span-full -mt-2 mb-0 opacity-50" />
+                                <DetailsItem title="Email" value={listingUser?.email || "-"} />
+                                <DetailsItem
+                                    title="Phone Number"
+                                    value={
+                                        <>
+                                            <span className="font-light opacity-70">{listingUser?.phoneCountryCode ? `${listingUser?.phoneCountryCode} ` : ""}</span>
+                                            {listingUser?.phoneNumber ?? "-"}
+                                        </>
+                                    }
+                                />
+                            </div>
+                        </div>
+
+                        <div className="card stat bg-base-100 p-4 shadow">
+                            <div className="stat-title">Price Details</div>
                             <InputController
                                 control={control}
-                                fieldName="location.state"
-                                label="State/Province"
+                                disabled={isProfileIncomplete}
+                                fieldName="price.amount"
+                                inputPrefix={currencySymbol}
+                                label="Price"
                                 loading={isLoading}
-                                placeholder="Western Province"
+                                placeholder="40,000,000"
                                 required
+                                type="number"
                             />
-                            <InputController
+                            <CheckboxController
                                 control={control}
-                                fieldName="location.postalCode"
-                                label="Postal Code"
+                                disabled={isProfileIncomplete}
+                                fieldName="price.isPriceNegotiable"
+                                label="Is the price negotiable?"
                                 loading={isLoading}
-                                placeholder="00001"
-                                required
-                            />
-                            <SelectController
-                                control={control}
-                                disabled
-                                fieldName="location.country"
-                                label="Country"
-                                loading={isLoading}
-                                options={[{ label: "Sri Lanka", value: "LK" }]}
-                                placeholder="Select Country"
-                                required
                             />
                         </div>
+                        <div className="card stat bg-base-100 p-4 shadow">
+                            <div className="stat-title">Features</div>
+                            <span className="mt-2">
+                                <TagSelectController
+                                    control={control}
+                                    disabled={isProfileIncomplete}
+                                    fieldName="vehicle.featureIds"
+                                    loading={isLoading}
+                                    loadingPlaceholderCount={20}
+                                    tags={featureOptions}
+                                />
+                            </span>
+                        </div>
                     </div>
-                    <div className="card stat bg-base-100 p-4 shadow">
-                        <div className="stat-title">Price Details</div>
-                        <InputController
-                            control={control}
-                            fieldName="price.amount"
-                            inputPrefix="Rs."
-                            label="Price"
-                            loading={isLoading}
-                            placeholder="40,000,000"
-                            required
-                            type="number"
-                        />
-                        <CheckboxController
-                            control={control}
-                            fieldName="price.isPriceNegotiable"
-                            label="Is the price negotiable?"
-                            loading={isLoading}
-                        />
-                    </div>
-                    <div className="card stat bg-base-100 p-4 shadow">
-                        <div className="stat-title">Features</div>
-                        <span className="mt-2">
-                            <TagSelectController
-                                control={control}
-                                fieldName="vehicle.featureIds"
-                                loading={isLoading}
-                                loadingPlaceholderCount={20}
-                                tags={featureOptions}
-                            />
-                        </span>
-                    </div>
                 </div>
-            </div>
-            <div className="mt-5 flex justify-end">
-                <button
-                    className="btn btn-neutral btn-wide"
-                    disabled={isMutating || isLoading || (submitButton.disableIfCleanForm && !isDirty)}
-                    type="submit"
-                >
-                    {isMutating ? submitButton.mutatingText ?? "Loading..." : submitButton.text ?? "Submit"}
-                </button>
-            </div>
-        </form>
+                <div className="mt-5 flex justify-end">
+                    <button
+                        className="btn btn-neutral btn-wide"
+                        disabled={isMutating || isLoading || (submitButton.disableIfCleanForm && !isDirty)}
+                        type="submit"
+                    >
+                        {isMutating ? submitButton.mutatingText ?? "Loading..." : submitButton.text ?? "Submit"}
+                    </button>
+                </div>
+            </form>
+            {profile && (
+                <ProfileUpdateModal
+                    onSuccess={() => setProfileModalVisible(false)}
+                    setVisible={setProfileModalVisible}
+                    userData={profile}
+                    visible={profileModalVisible}
+                />
+            )}
+        </>
     );
 };
diff --git a/src/components/Forms/Listings/ListingImageUpload.tsx b/src/components/Forms/Listings/ListingImageUpload.tsx
index 7edc74d..17a0dd7 100644
--- a/src/components/Forms/Listings/ListingImageUpload.tsx
+++ b/src/components/Forms/Listings/ListingImageUpload.tsx
@@ -12,6 +12,7 @@ import { MaxVehicleImageCount } from "@/utils/constants";
 import { Location, VehicleImageType } from "@/utils/types";
 
 interface Props {
+    disabled?: boolean;
     error?: string;
     files?: VehicleImageType[];
     location?: Location;
@@ -35,13 +36,14 @@ export const ListingImageUploadLoading = ({ loadingPlaceholderCount = 1 }: { loa
 };
 
 export const ListingImageUpload = forwardRef<HTMLInputElement, Props>((props, formRef) => {
-    const { files = [], setFiles = () => {}, error, title, location } = props;
+    const { files = [], setFiles = () => {}, error, title, location, disabled = false } = props;
     const [parent] = useAutoAnimate();
     // TODO: fix following error during runtime
     // TypeError: undefined is not a function
     const { getRootProps, getInputProps, open, isDragReject, isDragActive } = useDropzone({
         accept: { "image/*": [] },
         multiple: true,
+        disabled: disabled,
         noClick: true,
         noKeyboard: true,
         onDropRejected: () => toast.error("Unsupported file type"),
@@ -176,6 +178,7 @@ export const ListingImageUpload = forwardRef<HTMLInputElement, Props>((props, fo
                                     true,
                                 "border-error text-error": error,
                                 "border-base-300 text-opacity-80 text-base-content": !error,
+                                "opacity-60 cursor-not-allowed hover:!bg-base-200": disabled,
                             })}
                             onClick={open}
                         >
diff --git a/src/components/Forms/Profile/EditProfileForm.tsx b/src/components/Forms/Profile/EditProfileForm.tsx
index b1f41b8..007bc27 100644
--- a/src/components/Forms/Profile/EditProfileForm.tsx
+++ b/src/components/Forms/Profile/EditProfileForm.tsx
@@ -6,6 +6,7 @@ import { FC, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { editProfileAction } from "@/actions/profileActions";
+import { COUNTRIES } from "@/utils/countries";
 import { UpdateProfileSchema } from "@/utils/schemas";
 import { ListingUser, UpdateProfileReq } from "@/utils/types";
 import { ProfileForm } from "./ProfileForm";
@@ -28,18 +29,28 @@ export const EditProfileForm: FC<Props> = (props) => {
             address: {
                 city: userData?.address?.city || "",
                 state: userData?.address?.state || "",
-                country: userData?.address?.country || "LK",
+                country: userData?.address?.country ? COUNTRIES[userData?.address?.country]?.[0] : COUNTRIES[params.locale as string]?.[0],
                 postalCode: userData?.address?.postalCode || "",
             },
             isDealership: userData.isDealership,
-            phoneNumber: userData.phone,
+            phoneNumber: userData?.phone,
             userId: userData.userId,
         },
         mode: "all",
     });
 
+    const country = form.watch("address.country");
+    const countryCode = Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === country);
+
     const { mutate: updateSubscriptionMutation, isLoading: isMutating } = useMutation(
-        async (formValues: UpdateProfileReq) => editProfileAction(formValues),
+        async (formValues: UpdateProfileReq) =>
+            editProfileAction({
+                ...formValues,
+                address: {
+                    ...formValues.address,
+                    country: Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === country)!,
+                },
+            }),
         {
             onSuccess: () => {
                 if (window?.location?.pathname === `/${params.locale}/dashboard/profile/edit`) {
@@ -61,5 +72,13 @@ export const EditProfileForm: FC<Props> = (props) => {
         },
     );
 
-    return <ProfileForm form={form} isMutating={isMutating} onMutate={(values) => updateSubscriptionMutation(values)} userData={userData} />;
+    return (
+        <ProfileForm
+            form={form}
+            gridClassnames="pt-4"
+            isMutating={isMutating}
+            onMutate={(values) => updateSubscriptionMutation(values)}
+            userData={userData}
+        />
+    );
 };
diff --git a/src/components/Forms/Profile/ProfileForm.tsx b/src/components/Forms/Profile/ProfileForm.tsx
index 0804bf5..3818fd4 100644
--- a/src/components/Forms/Profile/ProfileForm.tsx
+++ b/src/components/Forms/Profile/ProfileForm.tsx
@@ -1,18 +1,22 @@
 "use client";
+import { useQuery } from "@tanstack/react-query";
 import { clsx } from "clsx";
 import { FC } from "react";
 import { UseFormReturn } from "react-hook-form";
+import { getCitiesOfState, getStatesOfCountry } from "@/actions/localtionActions";
 import { Avatar } from "@/components/Common";
+import { AutocompleteController } from "@/components/FormElements/AutoComplete";
 import { CheckboxController } from "@/components/FormElements/Checkbox";
 import { InputController } from "@/components/FormElements/Input";
-import { SelectController } from "@/components/FormElements/Select";
-import { ListingUser, UpdateProfileReq } from "@/utils/types";
+import { COUNTRIES } from "@/utils/countries";
+import { LabelValue, ListingUser, UpdateProfileReq } from "@/utils/types";
 
 interface Props {
     form?: UseFormReturn<UpdateProfileReq>;
     gridClassnames?: string;
     isLoading?: boolean;
     isMutating?: boolean;
+    locationSectionClassnames?: string;
     onMutate?: (values: UpdateProfileReq) => void;
     showFooter?: boolean;
     showHeader?: boolean;
@@ -31,8 +35,57 @@ export const ProfileForm: FC<Props> = (props) => {
         userData,
         wrapClassnames,
         gridClassnames,
+        locationSectionClassnames,
     } = props;
-    const { handleSubmit, formState: { isDirty } = {}, control } = form as UseFormReturn<UpdateProfileReq>;
+    const { handleSubmit, formState: { isDirty } = {}, control, watch = (_: string) => "" } = form as UseFormReturn<UpdateProfileReq>;
+
+    const country = watch("address.country");
+    const state = watch("address.state");
+    const city = watch("address.city");
+
+    const countryCode = Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === country);
+    const countryPhoneCode = COUNTRIES[countryCode || ""]?.[3];
+
+    const countryList: LabelValue[] = Object.keys(COUNTRIES).map((key) => ({
+        label: COUNTRIES[key]?.[0]!,
+        value: COUNTRIES[key]?.[0]!,
+    }));
+
+    const {
+        data: states = [],
+        isFetching: isLoadingStates,
+        isError: stateFetchError,
+    } = useQuery({
+        queryFn: () => getStatesOfCountry(countryCode!),
+        enabled: !!countryCode,
+        queryKey: ["country-states", { locale: countryCode }],
+        onSettled: (data, err) => {
+            if (err || !data?.some((item) => item.name === state)) {
+                (form as UseFormReturn<UpdateProfileReq>).setValue("address.state", "");
+                (form as UseFormReturn<UpdateProfileReq>).setValue("address.city", "");
+            }
+        },
+    });
+
+    const stateList = states?.map((item) => ({ label: item.name, value: item.name }) as LabelValue);
+
+    const stateCode = states.find((item) => item.name === state)?.stateCode;
+
+    const {
+        data: cityList = [],
+        isFetching: isLoadingCities,
+        isError: cityFetchError,
+    } = useQuery({
+        queryFn: () => getCitiesOfState(countryCode!, stateCode!),
+        enabled: !!countryCode && !!stateCode,
+        queryKey: ["country-state-cities", { locale: countryCode, stateCode }],
+        select: (data) => data.map((item) => ({ label: item.name, value: item.name }) as LabelValue),
+        onSettled: (data, err) => {
+            if (err || !data?.some((item) => item.label === city)) {
+                (form as UseFormReturn<UpdateProfileReq>).setValue("address.city", "");
+            }
+        },
+    });
 
     return (
         <form onSubmit={handleSubmit ? handleSubmit((values) => onMutate(values)) : undefined}>
@@ -52,30 +105,60 @@ export const ProfileForm: FC<Props> = (props) => {
                     </div>
                 )}
 
-                <div className={clsx("grid w-full gap-4 lg:grid-cols-2", gridClassnames)}>
-                    <div className="flex flex-col gap-1">
-                        <div className="divider mt-8">User Details</div>
-                        <InputController
-                            control={control}
-                            fieldName="phoneNumber"
-                            inputPrefix="94"
-                            label="Contact Number"
-                            loading={isLoading}
-                            type="tel"
-                        />
-                        <CheckboxController control={control} fieldName="isDealership" label="Is a vehicle dealership?" loading={isLoading} />
-                    </div>
-                    <div className="flex flex-col gap-1">
-                        <div className="divider mt-8">Location Details</div>
-                        <InputController control={control} fieldName="address.city" label="City" loading={isLoading} placeholder="Colombo" required />
-                        <InputController
+                <div className={clsx("grid w-full gap-1 lg:grid-cols-2 lg:gap-4", gridClassnames)}>
+                    <div className={clsx("grid gap-1", locationSectionClassnames)}>
+                        <div className="divider col-span-full mt-4">Location Details</div>
+                        <AutocompleteController
                             control={control}
-                            fieldName="address.state"
-                            label="State/Province"
-                            loading={isLoading}
-                            placeholder="Western Province"
+                            fieldName="address.country"
+                            label="Country"
+                            options={countryList}
+                            placeholder="Select Country"
                             required
                         />
+
+                        {stateList?.length > 0 && !stateFetchError ? (
+                            <AutocompleteController
+                                control={control}
+                                fieldName="address.state"
+                                label="State/Province"
+                                loading={isLoadingStates}
+                                options={stateList}
+                                placeholder="Select State"
+                                required
+                            />
+                        ) : (
+                            <InputController
+                                control={control}
+                                fieldName="address.state"
+                                label="State/Province"
+                                loading={isLoading}
+                                placeholder="State or Province"
+                                required
+                            />
+                        )}
+
+                        {cityList.length > 0 && !cityFetchError ? (
+                            <AutocompleteController
+                                control={control}
+                                fieldName="address.city"
+                                label="City"
+                                loading={isLoadingCities}
+                                options={cityList}
+                                placeholder="Select City"
+                                required
+                            />
+                        ) : (
+                            <InputController
+                                control={control}
+                                fieldName="address.city"
+                                label="City"
+                                loading={isLoading}
+                                placeholder="City"
+                                required
+                            />
+                        )}
+
                         <InputController
                             control={control}
                             fieldName="address.postalCode"
@@ -84,15 +167,23 @@ export const ProfileForm: FC<Props> = (props) => {
                             placeholder="00001"
                             required
                         />
-                        <SelectController
+                    </div>
+                    <div className="flex flex-col gap-1">
+                        <div className="divider mt-4">User Details</div>
+                        <InputController
                             control={control}
-                            disabled
-                            fieldName="address.country"
-                            label="Country"
+                            fieldName="phoneNumber"
+                            inputPrefix={countryPhoneCode}
+                            label="Phone Number"
+                            loading={isLoading}
+                            placeholder="0000000000"
+                            type="tel"
+                        />
+                        <CheckboxController
+                            control={control}
+                            fieldName="isDealership"
+                            label="Are you a vehicle dealer or dealership?"
                             loading={isLoading}
-                            options={[{ label: "Sri Lanka", value: "LK" }]}
-                            placeholder="Select Country"
-                            required
                         />
                     </div>
                 </div>
diff --git a/src/components/ListingDetails/ListingDetails.tsx b/src/components/ListingDetails/ListingDetails.tsx
index e37fce0..abc406c 100644
--- a/src/components/ListingDetails/ListingDetails.tsx
+++ b/src/components/ListingDetails/ListingDetails.tsx
@@ -8,6 +8,7 @@ import { ListingDetailsFeatures } from "./ListingDetailsFeatures";
 import { ListingImageCarousel } from "./ListingImageCarousel";
 import { ListingKeySpecifications } from "./ListingKeySpecifications";
 import { ListingSellerDetails } from "./ListingSellerDetails";
+import { COUNTRIES } from "@/utils/countries";
 
 interface Props {
     basePath?: string;
@@ -64,27 +65,27 @@ export const ListingDetails: FC<Props> = ({
                                 <div className="mt-1 h-5 w-4/6 animate-pulse bg-base-200" />
                             </>
                         ) : (
-                            <div className="mt-2 text-center text-lg font-bold">{getLocationString(location)}</div>
+                            <div className="mt-2 text-center text-lg font-bold">{getLocationString(location, COUNTRIES[location?.country ?? '']?.[0])}</div>
                         )}
                     </div>
                     <div className="card stat place-items-center bg-primary text-primary-content shadow">
-                        <div className="stat-title text-primary-content">Price</div>
+                        <div className="stat-title text-primary-content">{price?.currencyCode ? `Price (${price?.currencyCode})` : 'Price'}</div>
                         {loading ? (
-                            <div className="h-8 w-4/6 animate-pulse bg-secondary" />
+                            <div className="h-9 w-4/6 animate-pulse bg-secondary" />
                         ) : (
-                            <>
-                                <div className="w-full !break-words text-center text-xl font-extrabold">
-                                    {getFormattedCurrency(price?.amount, price?.currency)}
+                            <div className="flex flex-col items-center justify-center gap-1">
+                                <div className="w-full !break-words text-center text-2xl font-extrabold">
+                                    {getFormattedCurrency(price?.amount, price?.currencySymbol)}
                                 </div>
                                 {price?.isPriceNegotiable && <span className="badge badge-secondary">Negotiable</span>}
-                            </>
+                            </div>
                         )}
                     </div>
                 </div>
 
                 <div className="card stat place-items-center bg-base-100 shadow">
                     <div className="stat-title">Key Specifications</div>
-                    <ListingKeySpecifications loading={loading} vehicle={vehicle} />
+                    <ListingKeySpecifications loading={loading} vehicle={vehicle} countryCode={location?.country}/>
                 </div>
                 <div className="card stat place-items-center bg-base-100 shadow">
                     <div className="stat-title">Features</div>
diff --git a/src/components/ListingDetails/ListingKeySpecifications/ListingKeySpecifications.tsx b/src/components/ListingDetails/ListingKeySpecifications/ListingKeySpecifications.tsx
index f0499d1..a68d055 100644
--- a/src/components/ListingDetails/ListingKeySpecifications/ListingKeySpecifications.tsx
+++ b/src/components/ListingDetails/ListingKeySpecifications/ListingKeySpecifications.tsx
@@ -1,14 +1,15 @@
 import { clsx } from "clsx";
 import { FC } from "react";
-import { getRandomItem, getYearFromDateString, numberWithCommas, unCamelCase } from "@/utils/helpers";
+import { getFormattedDistance, getRandomItem, getYearFromDateString, numberWithCommas, unCamelCase } from "@/utils/helpers";
 import { Vehicle } from "@/utils/types";
 
 interface Props {
     loading?: boolean;
     vehicle?: Vehicle;
+    countryCode?: string
 }
 
-export const ListingKeySpecifications: FC<Props> = ({ vehicle, loading }) => {
+export const ListingKeySpecifications: FC<Props> = ({ vehicle, loading, countryCode }) => {
     const placeholderWidth = ["w-28", "w-32", "w-28", "w-16", "w-24", "w-36", "w-14"];
 
     const items: { label: string; value: string | number }[] = [];
@@ -18,9 +19,7 @@ export const ListingKeySpecifications: FC<Props> = ({ vehicle, loading }) => {
     if (vehicle?.model) {
         items.push({ label: "Modal", value: vehicle.model });
     }
-    if (vehicle?.trim) {
-        items.push({ label: "Trim / Edition", value: vehicle.trim });
-    }
+        items.push({ label: "Trim / Edition", value: vehicle?.trim || '-' });
     if (vehicle?.yearOfManufacture) {
         items.push({ label: "Manufactured Year", value: getYearFromDateString(vehicle.yearOfManufacture) });
     }
@@ -31,7 +30,7 @@ export const ListingKeySpecifications: FC<Props> = ({ vehicle, loading }) => {
         items.push({ label: "Condition", value: unCamelCase(vehicle?.condition) });
     }
     if (vehicle?.millage) {
-        items.push({ label: "Mileage", value: `${numberWithCommas(vehicle?.millage)} km` });
+        items.push({ label: "Mileage", value: getFormattedDistance(vehicle?.millage?.distance,countryCode) });
     }
     if (vehicle?.transmission) {
         items.push({ label: "Transmission", value: unCamelCase(vehicle?.transmission) });
diff --git a/src/components/ManageCache/ManageCache.tsx b/src/components/ManageCache/ManageCache.tsx
index 9108fe3..16fbfa7 100644
--- a/src/components/ManageCache/ManageCache.tsx
+++ b/src/components/ManageCache/ManageCache.tsx
@@ -1,15 +1,15 @@
-import { RevalidateBrandsAndModels } from "./Sections/RevalidateBrandsAndModels";
 import { RevalidateFeaturedListings } from "./Sections/RevalidateFeaturedListings";
 import { RevalidateFeatures } from "./Sections/RevalidateFeatures";
 import { RevalidatePostedListings } from "./Sections/RevalidatePostedListings";
 import { RevalidateRelatedListings } from "./Sections/RevalidateRelatedListings";
 import { RevalidateUserNotifications } from "./Sections/RevalidateUserNotifications";
+import { RevalidateVehicleBrands } from "./Sections/RevalidateVehicleBrands";
 
 export const ManageCache = () => {
     return (
         <div className="my-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
             <RevalidateFeatures />
-            <RevalidateBrandsAndModels />
+            <RevalidateVehicleBrands />
             <RevalidatePostedListings />
             <RevalidateFeaturedListings />
             <RevalidateRelatedListings />
diff --git a/src/components/ManageCache/Sections/RevalidateBrandsAndModels.tsx b/src/components/ManageCache/Sections/RevalidateBrandsAndModels.tsx
deleted file mode 100644
index 723fa95..0000000
--- a/src/components/ManageCache/Sections/RevalidateBrandsAndModels.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import { useMutation } from "@tanstack/react-query";
-import { toast } from "react-hot-toast";
-import { revalidateBrandsAndModelsAction } from "@/actions/cacheActions";
-
-export const RevalidateBrandsAndModels = () => {
-    const { mutate, isLoading } = useMutation(async () => revalidateBrandsAndModelsAction(), {
-        onSuccess: () => toast.success(`Successfully revalidated brands & models`),
-        onError: () => toast.error(`Failed to revalidate brands & models`),
-    });
-
-    return (
-        <button className="btn-outline btn" disabled={isLoading} onClick={() => mutate()}>
-            Revalidate Brands & Models
-        </button>
-    );
-};
diff --git a/src/components/ManageCache/Sections/RevalidateVehicleBrands.tsx b/src/components/ManageCache/Sections/RevalidateVehicleBrands.tsx
new file mode 100644
index 0000000..17c8c6f
--- /dev/null
+++ b/src/components/ManageCache/Sections/RevalidateVehicleBrands.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "react-hot-toast";
+import { revalidateBrandsAction } from "@/actions/cacheActions";
+
+export const RevalidateVehicleBrands = () => {
+    const { mutate, isLoading } = useMutation(async () => revalidateBrandsAction(), {
+        onSuccess: () => toast.success(`Successfully revalidated vehicle brands`),
+        onError: () => toast.error(`Failed to revalidate vehicle brands`),
+    });
+
+    return (
+        <button className="btn btn-outline" disabled={isLoading} onClick={() => mutate()}>
+            Revalidate Vehicle Brands
+        </button>
+    );
+};
diff --git a/src/components/Modals/ProfileUpdateModal.tsx b/src/components/Modals/ProfileUpdateModal.tsx
index b36d960..7ff4dc4 100644
--- a/src/components/Modals/ProfileUpdateModal.tsx
+++ b/src/components/Modals/ProfileUpdateModal.tsx
@@ -1,11 +1,13 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
-import { useRef } from "react";
+import { useParams } from "next/navigation";
+import { useEffect, useMemo, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { editProfileAction } from "@/actions/profileActions";
 import { Modal, ModalFooter } from "@/components/Common";
 import { ProfileForm } from "@/components/Forms/Profile/ProfileForm";
+import { COUNTRIES } from "@/utils/countries";
 import { UpdateProfileSchema } from "@/utils/schemas";
 import { ListingUser, UpdateProfileReq } from "@/utils/types";
 
@@ -18,28 +20,43 @@ interface Props {
 
 export const ProfileUpdateModal = (props: Props) => {
     const { userData, visible, setVisible = () => {}, onSuccess = () => {} } = props;
+    const params = useParams();
 
     const toastId = useRef<string>();
 
-    const form = useForm<UpdateProfileReq>({
-        resolver: zodResolver(UpdateProfileSchema),
-        defaultValues: {
+    const defaultValues = useMemo(
+        () => ({
             address: {
                 city: userData?.address?.city || "",
                 state: userData?.address?.state || "",
-                country: userData?.address?.country || "LK",
+                country: userData?.address?.country ? COUNTRIES[userData?.address?.country]?.[0] : COUNTRIES[params.locale as string]?.[0],
                 postalCode: userData?.address?.postalCode || "",
             },
             isDealership: userData.isDealership,
-            phoneNumber: userData.phone,
+            phoneNumber: userData?.phone,
             userId: userData.userId,
-        },
+        }),
+        [userData, params.locale],
+    );
+
+    const form = useForm<UpdateProfileReq>({
+        resolver: zodResolver(UpdateProfileSchema),
+        defaultValues,
         mode: "all",
     });
 
+    const country = form.watch("address.country");
+    const countryCode = Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === country);
+
     const { mutate: updateSubscriptionMutation, isLoading: isMutating } = useMutation(
         async (formValues: UpdateProfileReq) => {
-            return editProfileAction(formValues);
+            editProfileAction({
+                ...formValues,
+                address: {
+                    ...formValues.address,
+                    country: Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === country)!,
+                },
+            });
         },
         {
             onSuccess,
@@ -58,26 +75,37 @@ export const ProfileUpdateModal = (props: Props) => {
         },
     );
 
+    useEffect(() => {
+        if (visible) {
+            form.reset(defaultValues);
+        }
+    }, [visible, form, defaultValues]);
+
     return (
         <>
-            <Modal onVisibleChange={setVisible} title="Update Profile" visible={!!visible}>
-                <form>
-                    <ProfileForm
-                        form={form}
-                        gridClassnames="lg:!grid-cols-1"
-                        isMutating={isMutating}
-                        onMutate={(values) => updateSubscriptionMutation(values)}
-                        showFooter={false}
-                        showHeader={false}
-                        userData={userData}
-                        wrapClassnames="!p-0 !shadow-none"
-                    />
-                    <ModalFooter
-                        loading={isMutating}
-                        onSubmit={form.handleSubmit((values) => updateSubscriptionMutation(values))}
-                        onVisibleChange={setVisible}
-                        primaryButton={{ text: "Update" }}
-                    />
+            <Modal childrenClassnames="!p-0" modalClassnames="!max-w-3xl" onVisibleChange={setVisible} title="Update Profile" visible={!!visible}>
+                <form className="flex max-h-[80vh] flex-col ">
+                    <div className="flex-1 overflow-auto px-4 py-2 lg:px-6">
+                        <ProfileForm
+                            form={form}
+                            gridClassnames="lg:!grid-cols-1"
+                            isMutating={isMutating}
+                            locationSectionClassnames="lg:grid-cols-2"
+                            onMutate={(values) => updateSubscriptionMutation(values)}
+                            showFooter={false}
+                            showHeader={false}
+                            userData={userData}
+                            wrapClassnames="!p-0 !shadow-none"
+                        />
+                    </div>
+                    <div className="p-4 lg:p-6">
+                        <ModalFooter
+                            loading={isMutating}
+                            onSubmit={form.handleSubmit((values) => updateSubscriptionMutation(values))}
+                            onVisibleChange={setVisible}
+                            primaryButton={{ text: "Update" }}
+                        />
+                    </div>
                 </form>
             </Modal>
         </>
diff --git a/src/components/Modals/ReviewListingModal.tsx b/src/components/Modals/ReviewListingModal.tsx
index e466d14..4366bff 100644
--- a/src/components/Modals/ReviewListingModal.tsx
+++ b/src/components/Modals/ReviewListingModal.tsx
@@ -26,7 +26,7 @@ export const ReviewListingModal = (props: Props) => {
 
     const { handleSubmit, control } = useForm<ReviewListingReq>({
         resolver: zodResolver(ReviewListingSchema),
-        defaultValues: { listingId, status: ListingStatusTypes.Posted },
+        defaultValues: { listingId, status: ListingStatusTypes.Posted, reviewComment:'' },
         mode: "all",
     });
 
diff --git a/src/components/Search/SearchFilters.tsx b/src/components/Search/SearchFilters.tsx
index 7a20940..0f1c522 100644
--- a/src/components/Search/SearchFilters.tsx
+++ b/src/components/Search/SearchFilters.tsx
@@ -14,13 +14,17 @@ import { useSearchContext } from "@/providers/search-provider";
 import { FuelTypeList, TransmissionTypeList, VehicleConditionList, VehicleTypeList } from "@/utils/constants";
 import { convertYearToDateString, getYearFromDateString } from "@/utils/helpers";
 import { PostedListingsFilterSchema } from "@/utils/schemas";
-import { PostedListingsFilterReq } from "@/utils/types";
+import { LabelValue, PostedListingsFilterReq, State, VehicleBrand } from "@/utils/types";
+import { getCitiesOfState } from "@/actions/localtionActions";
+import { useQuery } from "@tanstack/react-query";
+import { COUNTRIES } from "@/utils/countries";
 
 const debouncedSearchRedirect = debounce((searchQuery: string, router: ReturnType<typeof useRouter>) => {
     router.push(`${window?.location?.pathname}?${searchQuery}`);
 }, 1000);
 
 const defaultFilter: PostedListingsFilterReq = {
+    State: "",
     Brand: "",
     City: "",
     Condition: "",
@@ -35,19 +39,27 @@ const defaultFilter: PostedListingsFilterReq = {
     YomStartDate: "",
 };
 
-export const SearchFilters = ({ pageLoading }: { pageLoading?: boolean }) => {
+export const SearchFilters = ({
+    pageLoading,
+    vehicleBrands = [],
+    states = [],
+}: {
+    pageLoading?: boolean;
+    vehicleBrands?: VehicleBrand[];
+    states?: State[];
+}) => {
     const { setNewSearchQuery, hasSearchParams, searchParamsObj, searchParamStr, isLoading } = useSearchContext();
 
     const router = useRouter();
     const params = useParams();
 
-    const { reset, control, watch } = useForm<PostedListingsFilterReq>({
+    const { reset, control, watch, setValue } = useForm<PostedListingsFilterReq>({
         resolver: zodResolver(PostedListingsFilterSchema),
         defaultValues: {
             ...defaultFilter,
             ...searchParamsObj,
-            YomStartDate: searchParamsObj.YomStartDate ? `${getYearFromDateString(searchParamsObj.YomStartDate)}` : undefined,
-            YomEndDate: searchParamsObj.YomEndDate ? `${getYearFromDateString(searchParamsObj.YomEndDate)}` : undefined,
+            YomStartDate: searchParamsObj.YomStartDate ? `${getYearFromDateString(searchParamsObj.YomStartDate as string)}` : undefined,
+            YomEndDate: searchParamsObj.YomEndDate ? `${getYearFromDateString(searchParamsObj.YomEndDate as string)}` : undefined,
         },
         mode: "onChange",
     });
@@ -61,15 +73,16 @@ export const SearchFilters = ({ pageLoading }: { pageLoading?: boolean }) => {
             YomStartDate: formValues.YomStartDate ? convertYearToDateString(formValues.YomStartDate) : undefined,
             YomEndDate: formValues.YomEndDate ? convertYearToDateString(formValues.YomEndDate) : undefined,
         },
-        { skipEmptyString: true, skipNull: true },
+        { skipEmptyString: true, skipNull: true }
     );
 
+    // todo: check if a use effect is needed
     useEffect(() => {
         reset({
             ...defaultFilter,
             ...searchParamsObj,
-            YomStartDate: searchParamsObj.YomStartDate ? `${getYearFromDateString(searchParamsObj.YomStartDate)}` : undefined,
-            YomEndDate: searchParamsObj.YomEndDate ? `${getYearFromDateString(searchParamsObj.YomEndDate)}` : undefined,
+            YomStartDate: searchParamsObj.YomStartDate ? `${getYearFromDateString(searchParamsObj.YomStartDate as string)}` : undefined,
+            YomEndDate: searchParamsObj.YomEndDate ? `${getYearFromDateString(searchParamsObj.YomEndDate as string)}` : undefined,
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [searchParamStr]);
@@ -82,8 +95,38 @@ export const SearchFilters = ({ pageLoading }: { pageLoading?: boolean }) => {
     const onResetClick = useCallback(() => {
         setNewSearchQuery("");
         router.push(`/${params.locale}/search`);
+        reset(defaultFilter);
     }, [router, params, setNewSearchQuery]);
 
+    useEffect(() => {
+        if (!states?.some((item) => item.name === formValues.State)) {
+            setValue("State", "");
+            setValue("City", "");
+        }
+    }, [states]);
+
+    const stateList = states?.map((item) => ({ label: item.name, value: item.name }) as LabelValue);
+
+    const stateCode = states.find((item) => item.name === formValues.State)?.stateCode;
+
+    const currencySymbol = COUNTRIES[typeof params.locale === "string" ? params.locale : ""]?.[2];
+
+    const {
+        data: cityList = [],
+        isFetching: isLoadingCities,
+        isError: cityFetchError,
+    } = useQuery({
+        queryFn: () => getCitiesOfState(params.locale as string, stateCode!),
+        enabled: typeof params.locale === "string" && !!stateCode,
+        queryKey: ["country-state-cities", { locale: params.locale as string, stateCode }],
+        select: (data) => data.map((item) => ({ label: item.name, value: item.name }) as LabelValue),
+        onSettled: (data, err) => {
+            if (err || !data?.some((item) => item.label === formValues.City)) {
+                setValue("City", "");
+            }
+        },
+    });
+
     return (
         <aside className="relative top-0 lg:sticky lg:top-7 2xl:top-8">
             <div className="card grid grid-cols-2 gap-2 bg-base-100 p-3 shadow-md lg:p-5 xl:p-6">
@@ -106,32 +149,9 @@ export const SearchFilters = ({ pageLoading }: { pageLoading?: boolean }) => {
                     loading={pageLoading}
                     options={VehicleTypeList}
                     placeholder="Type"
-                    rootClassName="col-span-2"
                     showSelectedTick={false}
+                    rootClassName="col-span-2"
                 />
-                <div className="col-span-2">
-                    <div className="pb-0.5 pl-1 text-sm opacity-70">Price Range</div>
-                    <div className="grid grid-cols-2 gap-2">
-                        <InputController
-                            control={control}
-                            errorAsTooltip
-                            fieldName="MinPrice"
-                            inputPrefix="Rs."
-                            loading={pageLoading}
-                            placeholder="From"
-                            type="number"
-                        />
-                        <InputController
-                            control={control}
-                            errorAsTooltip
-                            fieldName="MaxPrice"
-                            inputPrefix="Rs."
-                            loading={pageLoading}
-                            placeholder="To"
-                            type="number"
-                        />
-                    </div>
-                </div>
                 <AutocompleteController
                     control={control}
                     errorAsTooltip
@@ -141,10 +161,92 @@ export const SearchFilters = ({ pageLoading }: { pageLoading?: boolean }) => {
                     options={VehicleConditionList}
                     placeholder="Condition"
                     showSelectedTick={false}
+                    rootClassName="col-span-2"
+                />
+                <AutocompleteController
+                    control={control}
+                    errorAsTooltip
+                    fieldName="Brand"
+                    label="Brand"
+                    loading={pageLoading}
+                    options={vehicleBrands.map((item) => ({ label: item.name, value: item.name }))}
+                    placeholder="Toyota, Nissan, Honda, etc"
+                    showSelectedTick={false}
                 />
-                <InputController control={control} errorAsTooltip fieldName="City" label="City" loading={pageLoading} placeholder="City" />
-                <InputController control={control} errorAsTooltip fieldName="Brand" label="Brand" loading={pageLoading} placeholder="Brand" />
                 <InputController control={control} errorAsTooltip fieldName="Model" label="Model" loading={pageLoading} placeholder="Model" />
+
+                <InputController
+                    control={control}
+                    errorAsTooltip
+                    fieldName="MinPrice"
+                    label="Minimum Price"
+                    inputPrefix={currencySymbol}
+                    loading={pageLoading}
+                    placeholder="1,000"
+                    type="number"
+                    min={0}
+                    rootClassName="col-span-2"
+                />
+                <InputController
+                    control={control}
+                    errorAsTooltip
+                    fieldName="MaxPrice"
+                    label="Maximum Price"
+                    inputPrefix={currencySymbol}
+                    loading={pageLoading}
+                    placeholder="100,000,000"
+                    type="number"
+                    min={0}
+                    rootClassName="col-span-2"
+                />
+                {stateList?.length > 0 ? (
+                    <AutocompleteController
+                        control={control}
+                        errorAsTooltip
+                        fieldName="State"
+                        label="State/Province"
+                        loading={pageLoading}
+                        options={stateList}
+                        placeholder="Select State"
+                        showSelectedTick={false}
+                        rootClassName="col-span-2"
+                    />
+                ) : (
+                    <InputController
+                        control={control}
+                        errorAsTooltip
+                        fieldName="State"
+                        label="State/Province"
+                        loading={pageLoading}
+                        placeholder="State or Province"
+                        rootClassName="col-span-2"
+                    />
+                )}
+
+                {cityList.length > 0 && !cityFetchError ? (
+                    <AutocompleteController
+                        control={control}
+                        errorAsTooltip
+                        fieldName="City"
+                        label="City"
+                        loading={pageLoading || isLoadingCities}
+                        options={cityList}
+                        placeholder="Select City"
+                        showSelectedTick={false}
+                        rootClassName="col-span-2"
+                    />
+                ) : (
+                    <InputController
+                        control={control}
+                        errorAsTooltip
+                        fieldName="City"
+                        label="City"
+                        loading={pageLoading || isLoadingCities}
+                        placeholder="City"
+                        rootClassName="col-span-2"
+                    />
+                )}
+
                 <div className="col-span-2">
                     <div className="pb-0.5 pl-1 text-sm opacity-70">Manufactured Year Range</div>
                     <div className="grid grid-cols-2 gap-2">
diff --git a/src/providers/common.tsx b/src/providers/common.tsx
index 66425f1..d62aa01 100644
--- a/src/providers/common.tsx
+++ b/src/providers/common.tsx
@@ -1,6 +1,6 @@
-import { useSearchParams } from "next/navigation";
+import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation";
 import React, { createContext, useMemo, useState } from "react";
-import { searchParamsToObject } from "@/utils/helpers";
+import queryString from "query-string";
 
 export interface FiltersContextProps {
     hasSearchParams: boolean;
@@ -22,10 +22,20 @@ export const defaultFiltersValue: FiltersContextProps = {
 
 export const FiltersContext = createContext<FiltersContextProps>(defaultFiltersValue);
 
+const searchParamsToObject = (searchParams: ReadonlyURLSearchParams): Record<string, string> => {
+    const searchObject: Record<string, string> = {};
+
+    for (const [key, value] of searchParams.entries()) {
+        searchObject[key] = value;
+    }
+
+    return searchObject;
+};
+
 export const useSearchFilters = () => {
     const searchParams = useSearchParams();
-    const searchParamStr = useMemo(() => searchParams.toString(), [searchParams]);
     const searchParamsObj = searchParamsToObject(searchParams);
+    const searchParamStr = useMemo(() => queryString.stringify(searchParamsObj),[searchParamsObj]);
     const [newSearchQuery, setNewSearchQuery] = useState(searchParamStr);
     const isLoading = searchParamStr !== newSearchQuery;
 
diff --git a/src/providers/query-provider.tsx b/src/providers/query-provider.tsx
index f092966..86bdb1d 100644
--- a/src/providers/query-provider.tsx
+++ b/src/providers/query-provider.tsx
@@ -3,7 +3,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React from "react";
 
-const client = new QueryClient();
+const client = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false } } });
 
 export const ReactQueryProvider = ({ children }: React.PropsWithChildren) => {
     return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 798b772..00d673e 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -124,10 +124,11 @@ export const api = {
         }),
     getVehicleBrands: () =>
         fetchApi.get<VehicleBrand[]>("/v1/Vehicles/brands", { next: { tags: [apiTags.getVehicleBrands()], revalidate: revalidationTime.oneWeek } }),
-    getPostedListings: (req?: PaginatedRequest & PostedListingsFilterReq) =>
-        fetchApi.get<PaginatedResponse & ListingItems>(`/v1/Listings/posted?${qs.stringify(req ?? {}, { skipEmptyString: true })}`, {
+    getPostedListings: (locale: string, req?: PaginatedRequest & PostedListingsFilterReq) =>
+        fetchApi.get<PaginatedResponse & ListingItems>(`/v1/Listings/posted/${locale}?${qs.stringify(req ?? {}, { skipEmptyString: true })}`, {
             next: { revalidate: revalidationTime.thirtyMins, tags: [apiTags.getPostedListings()] },
         }),
+            // todo: remove locale param and handle this in the UI
     getPostedListingItem: (id: ListingIdType) =>
         fetchApi.get<ListingItem>(`/v1/Listings/posted/${id}`, {
             next: { tags: [apiTags.getPostedListingItem(id)], revalidate: revalidationTime.oneDay },
@@ -215,7 +216,6 @@ export const api = {
 export const apiTags = {
     getFeaturesList: () => "get-features-list",
     getVehicleBrands: () => "get-vehicle-brands",
-    getVehicleModels: () => "get-vehicle-models",
     getFeaturedListings: () => "get-featured-listings",
     getPostedListings: () => "get-posted-listings",
     getPostedListingItem: (id: ListingIdType) => `get-posted-listing-item-${id}`,
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 58d264b..e5f4a02 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -70,12 +70,9 @@ export const numberWithCommas = (x: number | string) => {
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };
 
-export const getFormattedCurrency = (amount: number | string, currency: string) =>
-    new Intl.NumberFormat(undefined, {
-        style: "currency",
-        currency: currency || "LKR",
-        minimumFractionDigits: 0,
-    }).format(typeof amount === "string" ? Number(amount) : amount || 0);
+export const getFormattedCurrency = (amount: number | string = 0, currency: string) => `${currency} ${numberWithCommas(amount)}`;
+
+export const getFormattedDistance = (distance: number | string, countryCode: string | undefined) => `${numberWithCommas(distance)} ${getDistanceUnit(countryCode)}`
 
 export const unCamelCase = (str: string = "") => {
     if (typeof str === "string") {
@@ -193,7 +190,7 @@ export const previewUrlToHash = async (previewUrl: string) => {
     return thumbHash;
 };
 
-export const getLocationString = (location?: Location) => {
+export const getLocationString = (location?: Location, countryName?: string) => {
     const itemsArr = [];
     if (location?.city) {
         itemsArr.push(location.city);
@@ -201,12 +198,10 @@ export const getLocationString = (location?: Location) => {
     if (location?.state) {
         itemsArr.push(location.state);
     }
-    if (location?.country) {
-        if (location?.country === "LK") {
-            itemsArr.push("Sri Lanka");
-        } else {
-            itemsArr.push(location.country);
-        }
+    if (countryName) {
+        itemsArr.push(countryName);
+    }else if(location?.country){
+        itemsArr.push(location?.country);
     }
     return itemsArr.join(", ");
 };
@@ -215,15 +210,6 @@ export function getRandomItem<T>(items: T[]): T | undefined {
     return items[Math.floor(Math.random() * items.length)];
 }
 
-export const searchParamsToObject = (searchParams: ReadonlyURLSearchParams): Record<string, string> => {
-    const searchObject: Record<string, string> = {};
-
-    for (const [key, value] of searchParams.entries()) {
-        searchObject[key] = value;
-    }
-
-    return searchObject;
-};
 
 export const timeAgo = (date: Date): string => {
     const currentDate = new Date();
@@ -320,3 +306,5 @@ export const toSEOFriendlyName = (originalName: string, location?: Location): st
 
 export const isIncompleteUserProfile = (profile: ListingUser) =>
     !profile.phone || !profile.address?.city || !profile.address?.state || !profile.address?.country || !profile.address?.postalCode;
+
+export const getDistanceUnit = (countryCode: string | undefined) => (countryCode === "US" ? "mi" : "km");
diff --git a/src/utils/schemas.ts b/src/utils/schemas.ts
index 3cace70..1441e6a 100644
--- a/src/utils/schemas.ts
+++ b/src/utils/schemas.ts
@@ -42,16 +42,23 @@ const getNumericSchema = (message: string = "Invalid value", minValue: number =
 
 export const PriceSchema = z.object({
     amount: getNumericSchema("Price amount needs to be a positive number"),
-    currency: z.string().default("LKR"),
+    currencyCode: z.string().min(1, "Currency code is required"),
+    currencySymbol: z.string().min(1, "Currency symbol is required"),
     isPriceNegotiable: z.boolean().default(false),
 });
 
 export const OptionalPriceSchema = z.object({
     amount: getNumericSchema("Price amount needs to be a positive number", 0, "0"),
-    currency: z.string().default("LKR"),
+    currencyCode: z.string().min(1, "Currency code is required"),
+    currencySymbol: z.string().min(1, "Currency symbol is required"),
     isPriceNegotiable: z.boolean().default(false),
 });
 
+export const MilageSchema = z.object({
+    distance: getNumericSchema("Milage needs to be a positive number"),
+    unit: z.string().min(1, "Milage unit is required"),
+});
+
 // todo: set from user's values as default
 export const LocationSchema = z.object({
     city: z.string().min(1, "City is required"),
@@ -98,7 +105,7 @@ export const VehicleSchema = z.object({
     trim: z.string().optional(),
     yearOfManufacture: YearSchema,
     yearOfRegistration: YearSchema,
-    millage: getNumericSchema("Mileage needs to be a positive number"),
+    millage: MilageSchema,
     condition: z.nativeEnum(VehicleConditionTypes, { invalid_type_error: "Invalid Condition Type" }),
     transmission: z.nativeEnum(TransmissionTypes, { invalid_type_error: "Invalid Transmission Type" }),
     fuelType: z.nativeEnum(FuelTypes, { invalid_type_error: "Invalid Fuel Type" }),
@@ -156,6 +163,7 @@ export const PostedListingsFilterSchema = z.object({
     YomEndDate: z.union([z.string(), z.null()]).optional(),
     MinPrice: z.union([getNumericSchema(), z.literal(""), z.null()]).optional(),
     MaxPrice: z.union([getNumericSchema(), z.literal(""), z.null()]).optional(),
+    State: z.string().optional(),
     City: z.string().optional(),
     Brand: z.string().optional(),
     Model: z.string().optional(),
@@ -188,8 +196,8 @@ export const MyListingsFilterSchema = z.object({
 
 export const DashboardListingFilterSchema = MyListingsFilterSchema.extend({
     Title: z.string().optional(),
-    MinPrice: z.union([getNumericSchema(), z.literal("")]).optional(),
-    MaxPrice: z.union([getNumericSchema(), z.literal("")]).optional(),
+    MinPrice: z.union([getNumericSchema('',0), z.literal("")]).optional(),
+    MaxPrice: z.union([getNumericSchema('',0), z.literal("")]).optional(),
     City: z.string().optional(),
     Brand: z.string().optional(),
     Model: z.string().optional(),