diff --git a/src/api/viewService.ts b/src/api/viewService.ts
index 8a5e013..91565e3 100644
--- a/src/api/viewService.ts
+++ b/src/api/viewService.ts
@@ -236,7 +236,10 @@ export interface FormScreenField {
   data_type: string;
   mandatory: boolean;
   value?: any;
-  options?: Array<{ label: string; value: string }>;
+  properties?: {
+    options?: Array<{ label: string; value: string }>;
+    country_code?: string;
+  };
 }
 
 export interface FormScreenResponse {
diff --git a/src/components/FormModal.tsx b/src/components/FormModal.tsx
index 1a382f7..11b159b 100644
--- a/src/components/FormModal.tsx
+++ b/src/components/FormModal.tsx
@@ -3,7 +3,19 @@ import { X, ArrowRight, AlertCircle, CheckCircle2, ChevronDown } from "lucide-re
 import { getFormScreen, startWorkflow, performActivity } from "../api/viewService";
 import { WORKFLOW_ID } from "../config";
 
-interface FormField { id: string; uid: string; name: string; type: string; data_type: string; mandatory: boolean; value?: any; options?: Array<{ label: string; value: string }>; }
+interface FormField {
+  id: string;
+  uid: string;
+  name: string;
+  type: string;
+  data_type: string;
+  mandatory: boolean;
+  value?: any;
+  properties?: {
+    options?: Array<{ label: string; value: string }>;
+    country_code?: string;
+  };
+}
 interface GridItem { i: string; x: number; y: number; w: number; h: number; }
 
 interface Props {
@@ -207,7 +219,8 @@ function renderInput(f: FormField, value: string, onChange: (v: string) => void,
       : "border-stone-200 dark:border-zinc-700 focus:ring-[#C8102E]/20 focus:border-[#C8102E] dark:focus:border-rose-500"
   }`;
 
-  if (f.options && f.options.length > 0) {
+  const options = f.properties?.options;
+  if (options && options.length > 0) {
     return (
       <div className="relative">
         <select
@@ -216,7 +229,7 @@ function renderInput(f: FormField, value: string, onChange: (v: string) => void,
           className={`${base} appearance-none pr-9 cursor-pointer`}
         >
           <option value="">Select {f.name.toLowerCase()}</option>
-          {f.options.map((opt) => (
+          {options.map((opt) => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
           ))}
         </select>
@@ -242,8 +255,26 @@ function renderInput(f: FormField, value: string, onChange: (v: string) => void,
       return <input type="date" value={value} onChange={(e) => onChange(e.target.value)} className={base} />;
     case "email":
       return <input type="email" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
-    case "phone":
-      return <input type="tel" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
+    case "phone": {
+      const cc = f.properties?.country_code;
+      if (!cc) {
+        return <input type="tel" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
+      }
+      return (
+        <div className="relative">
+          <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[13px] text-stone-500 dark:text-zinc-400 pointer-events-none select-none">
+            {cc}
+          </span>
+          <input
+            type="tel"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            className={`${base} pl-12`}
+            placeholder="Phone number"
+          />
+        </div>
+      );
+    }
     default:
       return <input type="text" value={value} onChange={(e) => onChange(e.target.value)} className={base} placeholder={`Enter ${f.name.toLowerCase()}`} />;
   }