diff --git a/web/app/pages/messages/index.vue b/web/app/pages/messages/index.vue
index e5091ca66..208ca72bd 100644
--- a/web/app/pages/messages/index.vue
+++ b/web/app/pages/messages/index.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { mdiArrowLeft, mdiSend, mdiCircle } from "@mdi/js";
+import {
+  isValidPhoneNumber,
+  getCountryCallingCode,
+  type CountryCode,
+} from "libphonenumber-js";
 
 definePageMeta({
   middleware: ["auth"],
@@ -18,10 +23,27 @@ const { useApi } = useApiComposable();
 
 const sending = ref(false);
 const formPhoneNumber = ref("");
+const phoneCountry = ref("US");
 const formContent = ref("");
 const formAttachments = ref("");
 const errors = ref(new Map<string, string[]>());
 
+function getRecipientNumber(): string {
+  const phone = formPhoneNumber.value;
+  if (isValidPhoneNumber(phone)) {
+    return phone;
+  }
+  // Short code — strip the country dial code prefix
+  const dialCode = getCountryCallingCode(
+    phoneCountry.value.toUpperCase() as CountryCode,
+  );
+  const prefix = `+${dialCode}`;
+  if (phone.startsWith(prefix)) {
+    return phone.slice(prefix.length);
+  }
+  return phone;
+}
+
 async function sendMessage() {
   errors.value = new Map();
   sending.value = true;
@@ -31,7 +53,7 @@ async function sendMessage() {
     await api("/v1/messages/send", {
       method: "POST",
       body: {
-        to: formPhoneNumber.value,
+        to: getRecipientNumber(),
         from: phonesStore.owner,
         content: formContent.value,
         attachments: formAttachments.value
@@ -95,15 +117,17 @@ async function sendMessage() {
         <VRow>
           <VCol cols="12" md="8" offset-md="2" xl="6" offset-xl="3">
             <form @submit.prevent="sendMessage">
-              <VTextField
+              <v-phone-input
                 v-model="formPhoneNumber"
+                v-model:country="phoneCountry"
                 :disabled="sending"
                 :error="errors.has('to')"
                 :error-messages="errors.get('to')"
                 variant="outlined"
                 persistent-placeholder
-                placeholder="Recipient phone number e.g +18005550199"
+                placeholder="Recipient phone number e.g 18005550199"
                 label="Phone Number"
+                country-label="Country"
               />
               <VTextarea
                 v-model="formContent"
diff --git a/web/app/plugins/vPhoneInput.client.ts b/web/app/plugins/vPhoneInput.client.ts
new file mode 100644
index 000000000..7d5f67385
--- /dev/null
+++ b/web/app/plugins/vPhoneInput.client.ts
@@ -0,0 +1,17 @@
+import "flag-icons/css/flag-icons.min.css";
+import "v-phone-input/styles";
+import {
+  createVPhoneInput,
+  autocompletePhoneCountryInput,
+  VPhoneCountryFlagSvg,
+} from "v-phone-input";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const vPhoneInput = createVPhoneInput({
+    ...autocompletePhoneCountryInput,
+    countryDisplayComponent: VPhoneCountryFlagSvg,
+    validate: null,
+  });
+
+  nuxtApp.vueApp.use(vPhoneInput);
+});
diff --git a/web/nuxt.config.ts b/web/nuxt.config.ts
index 5db78af3a..1cf3a4b7b 100644
--- a/web/nuxt.config.ts
+++ b/web/nuxt.config.ts
@@ -9,7 +9,7 @@ export default defineNuxtConfig({
   css: ["vuetify/styles"],
 
   build: {
-    transpile: ["vuetify", "chart.js", "vue-chartjs"],
+    transpile: ["vuetify", "chart.js", "vue-chartjs", "v-phone-input"],
   },
 
   vite: {
diff --git a/web/package.json b/web/package.json
index 62ac3974e..7057a1c4b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -19,12 +19,14 @@
     "date-fns": "^4.3.0",
     "firebase": "^12.13.0",
     "firebaseui": "^6.1.0",
+    "flag-icons": "^7.5.0",
     "libphonenumber-js": "^1.13.3",
     "moment": "^2.30.1",
     "nuxt": "^4.4.6",
     "pusher-js": "^8.5.0",
     "qrcode": "^1.5.4",
     "sass": "^1.100.0",
+    "v-phone-input": "^7.0.0",
     "vue": "^3.5.34",
     "vue-chartjs": "^5.3.3",
     "vue-router": "^5.0.7",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index a29db8132..da825933a 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -28,6 +28,9 @@ importers:
       firebaseui:
         specifier: ^6.1.0
         version: 6.1.0(firebase@12.13.0)
+      flag-icons:
+        specifier: ^7.5.0
+        version: 7.5.0
       libphonenumber-js:
         specifier: ^1.13.3
         version: 1.13.3
@@ -46,6 +49,9 @@ importers:
       sass:
         specifier: ^1.100.0
         version: 1.100.0
+      v-phone-input:
+        specifier: ^7.0.0
+        version: 7.0.0(vite-plugin-vuetify@2.1.3)(vue@3.5.34)
       vue:
         specifier: ^3.5.34
         version: 3.5.34
@@ -3137,6 +3143,13 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  awesome-phonenumber@7.8.0:
+    resolution:
+      {
+        integrity: sha512-zw23nvKt6gLGgCrKZ5Z7ZK0lm3k39/uZTw+cWp5tpiXVfEFSt9AEVFDzSycws76G64xOMrIVp2upYvJxwRgzvw==,
+      }
+    engines: { node: ">=18" }
+
   b4a@1.8.1:
     resolution:
       {
@@ -3535,6 +3548,12 @@ packages:
         integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==,
       }
 
+  countries-list@3.3.0:
+    resolution:
+      {
+        integrity: sha512-XRUjS+dcZuNh/fg3+mka3bXgcg4TbQZ1gaK5IJqO6qulerBANl1bmrd20P2dgmPkBpP+5FnejiSF1gd7bgAg+g==,
+      }
+
   crc-32@1.2.2:
     resolution:
       {
@@ -4113,6 +4132,12 @@ packages:
     peerDependencies:
       firebase: ^9.1.3 || ^10.0.0
 
+  flag-icons@7.5.0:
+    resolution:
+      {
+        integrity: sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg==,
+      }
+
   foreground-child@3.3.1:
     resolution:
       {
@@ -6412,6 +6437,15 @@ packages:
         integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==,
       }
 
+  v-phone-input@7.0.0:
+    resolution:
+      {
+        integrity: sha512-kMlb0qFpOZqC/61LFjQMlpLC3+555YCJYhoVMsxP8PXwX/kN31mGXh14w1fiNR7Y29Mph9KFVb+NpRjZLFg7QA==,
+      }
+    engines: { node: ">=12" }
+    peerDependencies:
+      vue: ^3.5.0
+
   vite-dev-rpc@1.1.0:
     resolution:
       {
@@ -6692,6 +6726,12 @@ packages:
     engines: { node: ^20.17.0 || >=22.9.0 }
     hasBin: true
 
+  world-flags-sprite@0.0.2:
+    resolution:
+      {
+        integrity: sha512-v4Qjd8+5hBNVyn9AKFcVTaKZWaz0fZliHZ7FK0ugPMbAv+oI5BZrT72rBxmGiD6D86yshA08FTo/CcAaZW7buw==,
+      }
+
   wrap-ansi@6.2.0:
     resolution:
       {
@@ -8741,6 +8781,8 @@ snapshots:
       postcss: 8.5.15
       postcss-value-parser: 4.2.0
 
+  awesome-phonenumber@7.8.0: {}
+
   b4a@1.8.1: {}
 
   balanced-match@1.0.2: {}
@@ -8948,6 +8990,8 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
+  countries-list@3.3.0: {}
+
   crc-32@1.2.2: {}
 
   crc32-stream@6.0.0:
@@ -9342,6 +9386,8 @@ snapshots:
       firebase: 12.13.0
       material-design-lite: 1.3.0
 
+  flag-icons@7.5.0: {}
+
   foreground-child@3.3.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -10896,6 +10942,20 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  v-phone-input@7.0.0(vite-plugin-vuetify@2.1.3)(vue@3.5.34):
+    dependencies:
+      awesome-phonenumber: 7.8.0
+      countries-list: 3.3.0
+      vue: 3.5.34
+    optionalDependencies:
+      flag-icons: 7.5.0
+      vuetify: 4.0.7(vite-plugin-vuetify@2.1.3)(vue@3.5.34)
+      world-flags-sprite: 0.0.2
+    transitivePeerDependencies:
+      - typescript
+      - vite-plugin-vuetify
+      - webpack-plugin-vuetify
+
   vite-dev-rpc@1.1.0(vite@7.3.3(@types/node@25.9.1)(jiti@2.7.0)(sass@1.100.0)(terser@5.48.0)(tsx@4.22.3)(yaml@2.9.0)):
     dependencies:
       birpc: 2.9.0
@@ -11096,6 +11156,9 @@ snapshots:
     dependencies:
       isexe: 4.0.0
 
+  world-flags-sprite@0.0.2:
+    optional: true
+
   wrap-ansi@6.2.0:
     dependencies:
       ansi-styles: 4.3.0