diff --git a/apps/dashboard/src/@/components/ui/DynamicHeight.tsx b/apps/dashboard/src/@/components/ui/DynamicHeight.tsx
index d2bb3b91e78..4835281db51 100644
--- a/apps/dashboard/src/@/components/ui/DynamicHeight.tsx
+++ b/apps/dashboard/src/@/components/ui/DynamicHeight.tsx
@@ -17,9 +17,7 @@ export function DynamicHeight(props: {
         boxSizing: "border-box",
         height: height ? `${height}px` : "auto",
         overflow: "hidden",
-        transition:
-          props.transition ||
-          "height 210ms cubic-bezier(0.175, 0.885, 0.32, 1.1)",
+        transition: props.transition || "height 250ms ease",
       }}
     >
       <div
diff --git a/apps/dashboard/src/@/components/ui/checkbox.tsx b/apps/dashboard/src/@/components/ui/checkbox.tsx
index efb59e0f275..d0b272766f4 100644
--- a/apps/dashboard/src/@/components/ui/checkbox.tsx
+++ b/apps/dashboard/src/@/components/ui/checkbox.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -21,7 +21,11 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <CheckIcon className="size-4" />
+      {props.checked === "indeterminate" ? (
+        <MinusIcon className="size-3" />
+      ) : (
+        <CheckIcon className="size-4" />
+      )}
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx
index ee84c438bd0..30194d44594 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx
@@ -3,7 +3,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import type { ProjectEmbeddedWalletsService } from "@thirdweb-dev/service-utils";
 import { CircleAlertIcon, PlusIcon, Trash2Icon } from "lucide-react";
-import Link from "next/link";
 import type React from "react";
 import { useState } from "react";
 import { type UseFormReturn, useFieldArray, useForm } from "react-hook-form";
@@ -240,11 +239,7 @@ export const InAppWalletSettingsUI: React.FC<
 
   return (
     <Form {...form}>
-      <form
-        autoComplete="off"
-        className="flex flex-col gap-6"
-        onSubmit={handleSubmit}
-      >
+      <form autoComplete="off" className="space-y-6" onSubmit={handleSubmit}>
         {/* Branding */}
         <BrandingFieldset
           client={props.client}
@@ -252,12 +247,28 @@ export const InAppWalletSettingsUI: React.FC<
           requiredPlan={brandingRequiredPlan}
           teamPlan={props.teamPlan}
           teamSlug={props.teamSlug}
+          isUpdating={props.isUpdating}
         />
 
-        <NativeAppsFieldset form={form} />
+        <NativeAppsFieldset form={form} isUpdating={props.isUpdating} />
 
         {/* Authentication */}
-        <Fieldset legend="Authentication">
+        <Fieldset
+          legend="Authentication"
+          footer={
+            <div className="flex justify-end p-4 md:px-6 border-t border-dashed">
+              <Button
+                className="gap-2"
+                type="submit"
+                size="sm"
+                variant="outline"
+              >
+                {props.isUpdating && <Spinner className="size-4" />}
+                Save
+              </Button>
+            </div>
+          }
+        >
           <JSONWebTokenFields
             form={form}
             requiredPlan={authRequiredPlan}
@@ -265,7 +276,7 @@ export const InAppWalletSettingsUI: React.FC<
             teamSlug={props.teamSlug}
           />
 
-          <div className="h-5" />
+          <div className="my-5 border-t border-dashed" />
 
           <AuthEndpointFields
             form={form}
@@ -274,7 +285,7 @@ export const InAppWalletSettingsUI: React.FC<
             teamSlug={props.teamSlug}
           />
 
-          <div className="h-5" />
+          <div className="my-5 border-t border-dashed" />
 
           <SMSCountryFields
             form={form}
@@ -284,13 +295,6 @@ export const InAppWalletSettingsUI: React.FC<
             teamSlug={props.teamSlug}
           />
         </Fieldset>
-
-        <div className="flex justify-end">
-          <Button className="gap-2" type="submit" variant="primary">
-            {props.isUpdating && <Spinner className="size-4" />}
-            Save changes
-          </Button>
-        </div>
       </form>
     </Form>
   );
@@ -302,14 +306,22 @@ function BrandingFieldset(props: {
   teamSlug: string;
   requiredPlan: Team["billingPlan"];
   client: ThirdwebClient;
+  isUpdating: boolean;
 }) {
   return (
-    <Fieldset legend="Branding">
-      <SwitchContainer
-        description="Pass a custom logo and app name to be used in the emails sent to users."
-        switchId="branding-switch"
-        title="Custom email logo and name"
-      >
+    <FieldsetWithDescription
+      legend="Branding"
+      description="Set an app name and logo to be used in the emails sent to users"
+      footer={
+        <div className="flex justify-end p-4 md:px-6 border-t border-dashed">
+          <Button className="gap-2" type="submit" size="sm" variant="outline">
+            {props.isUpdating && <Spinner className="size-4" />}
+            Save
+          </Button>
+        </div>
+      }
+    >
+      <div className="absolute top-8 right-6">
         <GatedSwitch
           currentPlan={props.teamPlan}
           requiredPlan={props.requiredPlan}
@@ -330,64 +342,69 @@ function BrandingFieldset(props: {
           teamSlug={props.teamSlug}
           trackingLabel="customEmailLogoAndName"
         />
-      </SwitchContainer>
+      </div>
 
       <GatedCollapsibleContainer
-        className="grid grid-cols-1 gap-6 lg:grid-cols-2"
+        className="border-t border-dashed pt-5"
         currentPlan={props.teamPlan}
         isExpanded={!!props.form.watch("branding")}
         requiredPlan={props.requiredPlan}
       >
-        {/* Application Image */}
-        <FormField
-          control={props.form.control}
-          name="branding.applicationImageUrl"
-          render={() => (
-            <FormItem className="space-y-1">
-              <FormLabel>Application Image URL</FormLabel>
-              <FormDescription className="!mb-4">
-                Logo that will display in the emails sent to users.{" "}
-                <br className="max-sm:hidden" /> The image must be squared with
-                recommended size of 72x72 px.
-              </FormDescription>
-              <FormControl>
-                <AppImageFormControl
-                  client={props.client}
-                  setUri={(uri) => {
-                    props.form.setValue("branding.applicationImageUrl", uri, {
-                      shouldDirty: true,
-                      shouldTouch: true,
-                    });
-                  }}
-                  uri={props.form.watch("branding.applicationImageUrl")}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <div className="flex flex-col gap-6 lg:flex-row">
+          <FormField
+            control={props.form.control}
+            name="branding.applicationImageUrl"
+            render={() => (
+              <FormItem className="lg:border-r lg:border-dashed lg:pr-6">
+                <div className="space-y-1">
+                  <FormLabel>Application Image URL</FormLabel>
+                  <FormDescription className="!mb-4">
+                    Logo that will display in the emails sent to users.{" "}
+                    <br className="max-sm:hidden" /> The image must be squared
+                    with recommended size of 72x72 px.
+                  </FormDescription>
+
+                  <FormMessage />
+                </div>
+
+                <FormControl>
+                  <AppImageFormControl
+                    client={props.client}
+                    setUri={(uri) => {
+                      props.form.setValue("branding.applicationImageUrl", uri, {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                      });
+                    }}
+                    uri={props.form.watch("branding.applicationImageUrl")}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
 
-        {/* Application Name */}
-        <FormField
-          control={props.form.control}
-          name="branding.applicationName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Application Name</FormLabel>
-              <FormDescription className="!mb-2">
-                Name that will be displayed in the emails sent to users.{" "}
-                <br className="max-sm:hidden" /> Defaults to your API Key's
-                name.
-              </FormDescription>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+          {/* Application Name */}
+          <FormField
+            control={props.form.control}
+            name="branding.applicationName"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Application Name</FormLabel>
+                <FormDescription>
+                  Name that will be displayed in the emails sent to users.{" "}
+                  <br className="max-sm:hidden" /> Defaults to your API Key's
+                  name.
+                </FormDescription>
+                <FormControl>
+                  <Input {...field} className="max-w-md" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
       </GatedCollapsibleContainer>
-    </Fieldset>
+    </FieldsetWithDescription>
   );
 }
 
@@ -418,7 +435,7 @@ function AppImageFormControl(props: {
       <div className="relative">
         <FileInput
           accept={{ "image/*": [] }}
-          className="w-24 rounded-full bg-background lg:w-28"
+          className="w-24 rounded-full bg-background"
           client={props.client}
           disableHelperText
           setValue={async (v) => {
@@ -514,14 +531,13 @@ function JSONWebTokenFields(props: {
         description={
           <>
             Optionally allow users to authenticate with a custom JWT.{" "}
-            <Link
-              className="text-link-foreground hover:text-foreground"
+            <UnderlineLink
               href="https://portal.thirdweb.com/wallets/custom-auth"
               rel="noopener noreferrer"
               target="_blank"
             >
               Learn more
-            </Link>
+            </UnderlineLink>
           </>
         }
         switchId="authentication-switch"
@@ -606,14 +622,13 @@ function AuthEndpointFields(props: {
           <>
             Optionally allow users to authenticate with any arbitrary payload
             that you provide.{" "}
-            <Link
-              className="text-link-foreground hover:text-foreground"
+            <UnderlineLink
               href="https://portal.thirdweb.com/wallets/custom-auth"
               rel="noopener noreferrer"
               target="_blank"
             >
               Learn more
-            </Link>
+            </UnderlineLink>
           </>
         }
         switchId="auth-endpoint-switch"
@@ -743,10 +758,21 @@ function AuthEndpointFieldsContent(props: {
 
 function NativeAppsFieldset(props: {
   form: UseFormReturn<ApiKeyEmbeddedWalletsValidationSchema>;
+  isUpdating: boolean;
 }) {
   const { form } = props;
   return (
-    <Fieldset legend="Native Apps">
+    <Fieldset
+      legend="Native Apps"
+      footer={
+        <div className="flex justify-end p-4 md:px-6 border-t border-dashed">
+          <Button className="gap-2" type="submit" size="sm" variant="outline">
+            {props.isUpdating && <Spinner className="size-4" />}
+            Save
+          </Button>
+        </div>
+      }
+    >
       <FormField
         control={form.control}
         name="redirectUrls"
@@ -789,21 +815,60 @@ function GatedCollapsibleContainer(props: {
     return null;
   }
 
-  return <div className={cn("mt-6", props.className)}>{props.children}</div>;
+  return (
+    <div
+      className={cn("mt-5 fade-in-0 duration-300 animate-in", props.className)}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+function Fieldset(props: {
+  legend: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-lg border bg-card relative">
+      <DynamicHeight>
+        <fieldset className="p-4 md:px-6 md:py-5">
+          {/* put inside div to remove default styles on legend  */}
+          <div className="border-b pb-4 mb-5 border-dashed font-semibold text-xl tracking-tight">
+            <legend> {props.legend}</legend>
+          </div>
+
+          {props.children}
+        </fieldset>
+      </DynamicHeight>
+      {props.footer}
+    </div>
+  );
 }
 
-function Fieldset(props: { legend: string; children: React.ReactNode }) {
+function FieldsetWithDescription(props: {
+  legend: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  description: React.ReactNode;
+}) {
   return (
-    <DynamicHeight>
-      <fieldset className="rounded-lg border border-border bg-card p-4 md:p-6">
-        {/* put inside div to remove default styles on legend  */}
-        <div className="mb-4 font-semibold text-xl tracking-tight">
-          <legend> {props.legend}</legend>
-        </div>
+    <div className="rounded-lg border bg-card relative">
+      <DynamicHeight>
+        <fieldset className="p-4 md:p-6">
+          {/* put inside div to remove default styles on legend  */}
+          <div className="pr-20">
+            <legend className="font-semibold text-xl tracking-tight">
+              {props.legend}
+            </legend>
+            <p className="text-muted-foreground text-sm">{props.description}</p>
+          </div>
 
-        {props.children}
-      </fieldset>
-    </DynamicHeight>
+          {props.children}
+        </fieldset>
+      </DynamicHeight>
+      {props.footer}
+    </div>
   );
 }
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/country-selector.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/country-selector.tsx
index a8dbbf57552..da376e2c3b0 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/country-selector.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/country-selector.tsx
@@ -1,6 +1,8 @@
 /** biome-ignore-all lint/a11y/useSemanticElements: EXPECTED */
 
-import { CheckIcon, MinusIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import type { SMSCountryTiers } from "../../api/sms";
@@ -31,17 +33,6 @@ export default function CountrySelector({
     return tierCountries.every((country) => isCountrySelected(country));
   };
 
-  // Check if some countries in a tier are selected
-  const isTierIndeterminate = (tier: string) => {
-    const tierCountries = countryTiers[tier as keyof typeof countryTiers];
-    const selectedInTier = tierCountries.filter((country) =>
-      isCountrySelected(country),
-    );
-    return (
-      selectedInTier.length > 0 && selectedInTier.length < tierCountries.length
-    );
-  };
-
   // Toggle a tier selection
   const toggleTier = (tier: string) => {
     const tierCountries = countryTiers[tier as keyof typeof countryTiers];
@@ -81,101 +72,144 @@ export default function CountrySelector({
     onChange(newSelected);
   };
 
-  // Get selected countries count for a tier
-  const getSelectedCountInTier = (tier: string) => {
-    const tierCountries = countryTiers[tier as keyof typeof countryTiers];
-    return tierCountries.filter((country) => isCountrySelected(country)).length;
-  };
+  return (
+    <div className="space-y-5">
+      {Object.entries(countryTiers).map(([tier, tierCountries], index) => {
+        const selectedTierCountries = tierCountries.filter((country) =>
+          isCountrySelected(country),
+        );
+
+        return (
+          <TierCard
+            key={tier}
+            tierIndex={index}
+            tier={tier}
+            onToggleTier={() => toggleTier(tier)}
+            tierCountries={tierCountries}
+            selectedTierCountries={selectedTierCountries}
+            onToggleCountry={toggleCountry}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function TierCard(props: {
+  tier: string;
+  tierIndex: number;
+  onToggleTier: () => void;
+  tierCountries: string[];
+  selectedTierCountries: string[];
+  onToggleCountry: (country: string) => void;
+}) {
+  const {
+    tier,
+    tierIndex,
+    onToggleTier,
+    tierCountries: countries,
+    selectedTierCountries: selectedCountries,
+    onToggleCountry,
+  } = props;
+
+  const [isExpanded, setIsExpanded] = useState(true);
+  const isPartiallySelected =
+    selectedCountries.length > 0 && selectedCountries.length < countries.length;
+  const isTierFullySelected = selectedCountries.length === countries.length;
 
   return (
-    <div className="space-y-3">
-      {Object.entries(countryTiers).map(([tier, countries], index) => (
-        <div className="overflow-hidden rounded-md border" key={tier}>
-          <div className="flex items-center bg-muted/30 p-2">
-            <div className="relative mr-2 flex items-center">
-              <Checkbox
-                checked={isTierSelected(tier)}
-                className="h-4 w-4"
-                id={`tier-${index + 1}`}
-                onCheckedChange={() => toggleTier(tier)}
-              />
-              {isTierIndeterminate(tier) && (
-                <MinusIcon className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-1/2 h-2.5 w-2.5 transform text-primary" />
-              )}
-            </div>
-            <label
-              className="flex-1 cursor-pointer font-medium text-sm"
-              htmlFor={`tier-${index + 1}`}
-            >
-              Tier {index + 1}
-              {isTierIndeterminate(tier) && (
-                <span className="ml-1 font-normal text-muted-foreground text-xs">
-                  ({getSelectedCountInTier(tier)}/{countries.length})
-                </span>
-              )}
-            </label>
-            <span
-              className={cn(
-                "font-medium text-xs",
-                tier === "tier1"
-                  ? "text-green-600 dark:text-green-500"
-                  : "text-muted-foreground",
-              )}
-            >
-              {tierPricing[tier as keyof typeof tierPricing]}
+    <div className="overflow-hidden rounded-xl border bg-background">
+      {/* header */}
+      <div className="flex items-center px-4 py-3 gap-3 justify-between">
+        {/* left */}
+        <div className="flex items-center gap-2">
+          <Checkbox
+            checked={
+              isPartiallySelected ? "indeterminate" : isTierFullySelected
+            }
+            id={`tier-${tier}`}
+            onCheckedChange={onToggleTier}
+          />
+          <label
+            className="flex-1 cursor-pointer font-medium text-sm"
+            htmlFor={`tier-${tier}`}
+          >
+            Tier {tierIndex + 1}
+          </label>
+
+          {isPartiallySelected && (
+            <span className="text-muted-foreground text-sm">
+              ({selectedCountries.length}/{countries.length})
             </span>
-          </div>
+          )}
+        </div>
 
-          <div
+        {/* right */}
+        <div className="flex items-center gap-3">
+          <span
             className={cn(
-              "grid grid-cols-2 gap-1.5 p-2",
-              countries.length === 2
-                ? "md:grid-cols-2"
-                : countries.length === 3
-                  ? "md:grid-cols-3"
-                  : "md:grid-cols-4",
+              "text-sm",
+              tier === "tier1"
+                ? "text-green-600 dark:text-green-500"
+                : "text-muted-foreground",
             )}
           >
-            {countries.map((country) => (
-              <div
+            {tierPricing[tier as keyof typeof tierPricing]}
+          </span>
+
+          <Button
+            variant="ghost"
+            className="p-0 size-7"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            <ChevronDownIcon
+              className={cn(
+                "size-4 transition-transform",
+                isExpanded && "rotate-180",
+              )}
+            />
+          </Button>
+        </div>
+      </div>
+
+      {/* body */}
+      {isExpanded && (
+        <div
+          className={cn(
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 translate-y-[1px] translate-x-[1px] -ml-[1px] border-t",
+          )}
+        >
+          {countries.map((country) => {
+            const isSelected = selectedCountries.includes(country);
+            return (
+              <Button
+                variant="outline"
                 className={cn(
-                  "relative flex cursor-pointer items-center justify-between rounded-md border p-1.5 transition-colors ",
-                  isCountrySelected(country)
-                    ? "border-primary bg-primary/10"
-                    : "border-transparent hover:bg-muted/50",
+                  "justify-between gap-3 text-start h-auto rounded-none border-l-0 border-t-0 border-border py-2.5 bg-background",
                 )}
                 key={country}
-                onClick={() => toggleCountry(country)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    toggleCountry(country);
-                  }
-                }}
-                role="button"
-                tabIndex={0}
+                onClick={() => onToggleCountry(country)}
                 title={countryNames[country] || country}
               >
-                <span className="flex items-center space-x-2">
-                  <span aria-hidden="true" className="text-lg">
-                    {getCountryFlag(country)}
-                  </span>
-                  <span className="font-medium text-xs">
-                    {countryNames[country] || country}
-                    {countryPrefixes[country]
-                      ? ` (${countryPrefixes[country]})`
-                      : ""}
-                  </span>
-                </span>
-                <div className="flex h-3 w-3 items-center justify-center">
-                  {isCountrySelected(country) && (
-                    <CheckIcon className="h-3 w-3 text-primary" />
-                  )}
+                <div className="flex items-center gap-3">
+                  <div className="text-3xl">{getCountryFlag(country)}</div>
+                  <div className="space-y-0.5">
+                    <div className="font-medium text-sm">
+                      {countryNames[country] || country}
+                    </div>
+                    <div className="text-muted-foreground text-xs tabular-nums">
+                      {countryPrefixes[country]
+                        ? `${countryPrefixes[country]}`
+                        : ""}
+                    </div>
+                  </div>
                 </div>
-              </div>
-            ))}
-          </div>
+                {isSelected && <CheckIcon className="size-5 text-foreground" />}
+              </Button>
+            );
+          })}
         </div>
-      ))}
+      )}
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/utils.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/utils.ts
index 89943daa541..b43d8694c12 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/utils.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/utils.ts
@@ -117,14 +117,14 @@ export const countryNames: Record<string, string> = {
   KG: "Kyrgyzstan",
   KH: "Cambodia",
   KI: "Kiribati",
-  KN: "St Kitts and Nevis",
-  KR: "Korea Republic of",
+  KN: "Saint Kitts and Nevis",
+  KR: "South Korea",
   KW: "Kuwait",
   KY: "Cayman Islands",
   KZ: "Kazakhstan",
   LA: "Laos PDR",
   LB: "Lebanon",
-  LC: "St Lucia",
+  LC: "Saint Lucia",
   LI: "Liechtenstein",
   LK: "Sri Lanka",
   LR: "Liberia",
@@ -139,7 +139,7 @@ export const countryNames: Record<string, string> = {
   ME: "Montenegro",
   MG: "Madagascar",
   MH: "Marshall Islands",
-  MK: "Macedonia",
+  MK: "North Macedonia",
   ML: "Mali",
   MM: "Myanmar",
   MN: "Mongolia",
@@ -172,14 +172,14 @@ export const countryNames: Record<string, string> = {
   PH: "Philippines",
   PK: "Pakistan",
   PL: "Poland",
-  PM: "St Pierre and Miquelon",
+  PM: "Saint Pierre and Miquelon",
   PR: "Puerto Rico",
   PS: "Palestinian Territory",
   PT: "Portugal",
   PW: "Palau",
   PY: "Paraguay",
   QA: "Qatar",
-  RE: "Reunion/Mayotte",
+  RE: "Réunion",
   RO: "Romania",
   RS: "Serbia",
   RW: "Rwanda",
@@ -200,7 +200,7 @@ export const countryNames: Record<string, string> = {
   ST: "Sao Tome and Principe",
   SV: "El Salvador",
   SY: "Syria",
-  SZ: "Swaziland",
+  SZ: "Eswatini",
   TC: "Turks and Caicos Islands",
   TD: "Chad",
   TG: "Togo",
@@ -217,7 +217,7 @@ export const countryNames: Record<string, string> = {
   UG: "Uganda",
   US: "United States",
   UY: "Uruguay",
-  VC: "St Vincent Grenadines",
+  VC: "Saint Vincent and the Grenadines",
   VE: "Venezuela",
   VG: "Virgin Islands, British",
   VI: "Virgin Islands, U.S.",