diff --git a/frontend/src/components/MessagesPage.tsx b/frontend/src/components/MessagesPage.tsx
index 8e07f32..36a9e4c 100644
--- a/frontend/src/components/MessagesPage.tsx
+++ b/frontend/src/components/MessagesPage.tsx
@@ -8,6 +8,9 @@ export default function MessagesPage() {
   const [dateTo, setDateTo] = useState("");
   const [unreadOnly, setUnreadOnly] = useState(false);
   const [expanded, setExpanded] = useState<number | null>(null);
+  const [addingId, setAddingId] = useState<number | null>(null);
+  const [addName, setAddName] = useState("");
+  const [addEmail, setAddEmail] = useState("");
   const qc = useQueryClient();
 
   const { data, isLoading, error } = useQuery({
@@ -23,9 +26,26 @@ export default function MessagesPage() {
     mutationFn: (id: number) => api.deleteMessage(id),
     onSuccess: () => qc.invalidateQueries({ queryKey: ["messages"] }),
   });
+  const addContact = useMutation({
+    mutationFn: (data: { name: string; number?: string; email?: string | null }) => api.createContact(data),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["contacts"] });
+      qc.invalidateQueries({ queryKey: ["messages"] });
+      setAddingId(null);
+      setAddName("");
+      setAddEmail("");
+    },
+  });
 
   const onSubmit = (e: React.FormEvent) => e.preventDefault();
 
+  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);
+  };
+
   return (
     <>
       <form onSubmit={onSubmit} className="card" style={{ padding: "12px 16px" }}>
@@ -48,6 +68,7 @@ export default function MessagesPage() {
         const whoRaw = m.contact_name || m.callerid || "Unknown caller";
         const num = (m.callerid || "").replace(/[^\d+]/g, "");
         const showAdd = !m.contact_name && num;
+        const isAdding = addingId === m.id;
         return (
           <div key={m.id} className={"card" + (m.is_read ? "" : " unread")}>
             <div className="who">
@@ -74,7 +95,7 @@ export default function MessagesPage() {
             ) : null}
             {m.numbers?.length ? (
               <div className="meta" style={{ marginTop: 6 }}>
-                &#128222; Callback:{" "}
+                📞 Callback:{" "}
                 {m.numbers.map((n: string) => {
                   const digits = n.replace(/[^\d+]/g, "");
                   return <a key={n} href={"tel:" + digits}>{n}</a>;
@@ -88,13 +109,16 @@ export default function MessagesPage() {
               </button>
               {m.has_audio && <a className="btn" href={"/audio/" + m.id + "?dl=1"}>Download</a>}
               <button className="danger" onClick={() => deleteMsg.mutate(m.id)}>Delete</button>
-              {showAdd && (
-                <button className="add-btn" onClick={() => {
-                  const name = prompt("Contact name:", whoRaw);
-                  if (name !== null) {
-                    (window as any).api?.addContact?.({ number: num, name }).then(() => qc.invalidateQueries({ queryKey: ["messages"] }));
-                  }
-                }}>+ Add to contacts</button>
+              {showAdd && !isAdding && (
+                <button className="add-btn" onClick={() => startAdd(m)}>+ Add to contacts</button>
+              )}
+              {isAdding && (
+                <form className="row" style={{ gap: 6, marginTop: 0 }} onSubmit={(e) => { e.preventDefault(); if (!addName.trim()) return; addContact.mutate({ name: addName.trim(), number: num, email: addEmail.trim() || null }); }}>
+                  <input value={addName} onChange={(e) => setAddName(e.target.value)} placeholder="Name" required style={{ flex: 1, minWidth: 120 }} />
+                  <input value={addEmail} onChange={(e) => setAddEmail(e.target.value)} placeholder="Email" type="email" style={{ flex: 1, minWidth: 140 }} />
+                  <button type="submit" className="primary" disabled={addContact.isPending}>Save</button>
+                  <button type="button" className="btn" onClick={() => setAddingId(null)}>Cancel</button>
+                </form>
               )}
             </div>
           </div>