diff --git a/frontend/src/components/MessagesPage.tsx b/frontend/src/components/MessagesPage.tsx
index 0567f5d..36e274c 100644
--- a/frontend/src/components/MessagesPage.tsx
+++ b/frontend/src/components/MessagesPage.tsx
@@ -39,8 +39,14 @@ export default function MessagesPage() {
 
   const onSubmit = (e: React.FormEvent) => e.preventDefault();
 
+  const sanitiseNumber = (raw?: string) => {
+    if (!raw) return "";
+    const bracket = raw.match(/<([^>]+)>/);
+    if (bracket) return bracket[1].trim();
+    return raw.replace(/[^\d+]/g, "").trim();
+  };
+
   const startAdd = (m: { id: number; contact_name?: string; callerid?: string }) => {
-    const num = (m.callerid || "").replace(/[^\d+]/g, "");
     setAddName(m.contact_name || "");
     setAddEmail("");
     setAddingId(m.id);
@@ -66,7 +72,7 @@ export default function MessagesPage() {
 
       {data?.messages?.map((m) => {
         const whoRaw = m.contact_name || m.callerid || "Unknown caller";
-        const num = (m.callerid || "").replace(/[^\d+]/g, "");
+        const num = sanitiseNumber(m.callerid);
         const showAdd = !m.contact_name && num;
         return (
           <div key={m.id} className={"card" + (m.is_read ? "" : " unread")}>
@@ -124,10 +130,10 @@ export default function MessagesPage() {
         <div className="modal-bg open" onClick={() => setAddingId(null)}>
           <div className="modal" onClick={(e) => e.stopPropagation()}>
             <h3>Add contact</h3>
-            <form onSubmit={(e) => { e.preventDefault(); if (!addName.trim()) return; const target = data?.messages?.find((x: any) => x.id === addingId); const raw = target ? (target.callerid || "") : ""; const targetNum = raw.replace(/[^\d+]/g, "").trim(); addContact.mutate({ name: addName.trim(), number: targetNum || undefined, email: addEmail.trim() || null }); }}>
+            {(() => { const target = data?.messages?.find((x: any) => x.id === addingId); const num = sanitiseNumber(target?.callerid); return num ? <div style={{ marginBottom: 10, fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text-secondary)" }}>Number: {num}</div> : null; })()}
+            <form onSubmit={(e) => { e.preventDefault(); if (!addName.trim()) return; const target = data?.messages?.find((x: any) => x.id === addingId); const targetNum = sanitiseNumber(target?.callerid); addContact.mutate({ name: addName.trim(), number: targetNum || undefined, email: addEmail.trim() || null }); }}>
               <label>Name</label>
               <input value={addName} onChange={(e) => setAddName(e.target.value)} required />
-              {(() => { const target = data?.messages?.find((x: any) => x.id === addingId); const raw = target ? (target.callerid || "") : ""; const num = raw.replace(/[^\d+]/g, "").trim(); return num ? <><label>Number</label><input value={num} readOnly /></> : null; })()}
               <label>Email</label>
               <input type="email" value={addEmail} onChange={(e) => setAddEmail(e.target.value)} />
               <div className="row">