diff --git a/src/components/CenterPanel/forms/VCardForm.tsx b/src/components/CenterPanel/forms/VCardForm.tsx
new file mode 100644
index 0000000..5afbfbe
--- /dev/null
+++ b/src/components/CenterPanel/forms/VCardForm.tsx
@@ -0,0 +1,23 @@
+import { useQR } from '../../../context/QRContext';
+import { TextInput } from '../../ui/TextInput';
+
+export function VCardForm() {
+  const { state, dispatch } = useQR();
+  const set = (field: string, value: string) =>
+    dispatch({ type: 'SET_FORM_FIELD', qrType: 'vcard', field, value });
+  const f = state.formData.vcard;
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex gap-3">
+        <TextInput label="First Name" value={f.firstName} onChange={v => set('firstName', v)} placeholder="John" />
+        <TextInput label="Last Name" value={f.lastName} onChange={v => set('lastName', v)} placeholder="Doe" />
+      </div>
+      <TextInput label="Phone" value={f.phone} onChange={v => set('phone', v)} placeholder="+1 234 567 8900" type="tel" />
+      <TextInput label="Email" value={f.email} onChange={v => set('email', v)} placeholder="john@example.com" type="email" />
+      <TextInput label="Company" optional value={f.company} onChange={v => set('company', v)} placeholder="Acme Inc." />
+      <TextInput label="Job Title" optional value={f.jobTitle} onChange={v => set('jobTitle', v)} placeholder="Software Engineer" />
+      <TextInput label="Website" optional value={f.website} onChange={v => set('website', v)} placeholder="https://example.com" type="url" />
+      <TextInput label="Address" optional value={f.address} onChange={v => set('address', v)} placeholder="123 Main St, City, Country" />
+    </div>
+  );
+}