diff --git a/src/pages/notification/blocks/AddDialog.tsx b/src/pages/notification/blocks/AddDialog.tsx
index 508cdb6..9036f2d 100644
--- a/src/pages/notification/blocks/AddDialog.tsx
+++ b/src/pages/notification/blocks/AddDialog.tsx
@@ -339,6 +339,17 @@ const AddDialog = () => {
                       />
                       <span>E-Mail</span>
                     </label>
+                    <label className="flex items-center space-x-2">
+                      <input
+                        type="radio"
+                        name="via"
+                        value="whatsapp"
+                        checked={formField.via === 'whatsapp'}
+                        onChange={handleChange}
+                        className="accent-blue-600"
+                      />
+                      <span>WhatsApp</span>
+                    </label>
                   </div>
                 </div>
                 {errors.via && (
@@ -350,6 +361,29 @@ const AddDialog = () => {
                 )}
               </div>
 
+              <div className="w-full">
+                <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <label className="form-label flex items-center gap-1 max-w-56">
+                    Number WhatsApp
+                  </label>
+                  <Input
+                    className="input col-span-6"
+                    name="content"
+                    placeholder="Enter OTP (5 digits)"
+                    value={formField.content}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      if (/^\d{0,5}$/.test(value)) {
+                        handleChange(e);
+                      }
+                    }}
+                    disabled={formField.via !== 'whatsapp'}
+                    inputMode="numeric"
+                    pattern="\d*"
+                  />
+                </div>
+              </div>
+
               <div className="w-full">
                 <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                   <label className="form-label flex items-center gap-1 max-w-56">Subject</label>
diff --git a/src/pages/notification/blocks/Types.ts b/src/pages/notification/blocks/Types.ts
index 2228e18..6789eaa 100644
--- a/src/pages/notification/blocks/Types.ts
+++ b/src/pages/notification/blocks/Types.ts
@@ -25,13 +25,13 @@ export const validateFormNotification = (
   const requiredFields = [
     { key: 'all_customer', label: 'Send To' },
     { key: 'type', label: 'Type' },
-    { key: 'via', label: 'Via' },
-    { key: 'content', label: 'Content' }
+    { key: 'via', label: 'Via' }
   ];
 
   const newErrors: Record<string, string> = {};
   let isValid = true;
 
+  // Validasi field yang wajib secara umum
   requiredFields.forEach(({ key, label }) => {
     if (
       formField[key as keyof typeof formField] === '' ||
@@ -44,6 +44,21 @@ export const validateFormNotification = (
     }
   });
 
+  // Validasi khusus content
+  if (formField.via === 'whatsapp') {
+    if (!formField.content || !/^\d{5}$/.test(formField.content)) {
+      newErrors.content = 'Content harus berupa 5 digit angka (OTP)';
+      toast.error('Content harus berupa 5 digit angka (OTP)');
+      isValid = false;
+    }
+  } else {
+    if (!formField.content || formField.content.trim() === '') {
+      newErrors.content = 'Content is required';
+      toast.error('Content is required');
+      isValid = false;
+    }
+  }
+
   setErrors(newErrors);
   return isValid;
 };