diff --git a/src/pages/notification/blocks/AddDialog.tsx b/src/pages/notification/blocks/AddDialog.tsx
index 8f3b248..35bbff4 100644
--- a/src/pages/notification/blocks/AddDialog.tsx
+++ b/src/pages/notification/blocks/AddDialog.tsx
@@ -36,6 +36,7 @@ const AddDialog = () => {
   const { reload } = useDataGrid();
   const { GetData, PostData } = useCallApi();
   const [alert, setAlert] = useState({ show: false, message: '' });
+  const isSubmittingRef = useRef(false);
 
   const initialState = {
     customers: [] as string[],
@@ -48,9 +49,11 @@ const AddDialog = () => {
 
   const [formField, setFormField] = useState(initialState);
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField({ ...initialState });
+    setIsSubmitting(false);
     setAlert({ show: false, message: '' });
   };
 
@@ -62,36 +65,41 @@ const AddDialog = () => {
     }
   };
 
-  const doCreateNotification = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const doCreateNotification = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmittingRef.current) return;
+      isSubmittingRef.current = true;
+      setIsSubmitting(true);
 
-    // const payload = {
-    //   ...formField,
-    //   subject:
-    //     formField.subject.trim() === '' && formField.via === 'sms'
-    //       ? 'SMS Notification'
-    //       : formField.subject
-    // };
+      try {
+        const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField);
+        // console.log('send response :', response);
 
-    const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField);
-    // console.log('send response :', response);
-
-    if (response?.status) {
-      handleAddDialog(false);
-      resetForm();
-      reload();
-      toast.success('Notification Send Successfully!');
-      const createActivity = {
-        module: 'Manage Notification',
-        description: `Send New Notification => ${formField.via}`,
-        action: 'C'
-      };
-      doSaveLogActivity(createActivity);
-    } else {
-      toast.error('Failed to create notification');
-      setAlert({ show: true, message: 'Failed to create notification. Please Try Again.' });
-    }
-  };
+        if (response?.status) {
+          handleAddDialog(false);
+          resetForm();
+          reload();
+          toast.success('Notification Send Successfully!');
+          const createActivity = {
+            module: 'Manage Notification',
+            description: `Send New Notification => ${formField.via}`,
+            action: 'C'
+          };
+          doSaveLogActivity(createActivity);
+        } else {
+          toast.error('Failed to create notification');
+          setAlert({ show: true, message: 'Failed to create notification. Please Try Again.' });
+        }
+      } catch (err) {
+        toast.error('Something went wrong');
+        console.log(err);
+      } finally {
+        isSubmittingRef.current = false;
+        setIsSubmitting(false);
+      }
+    },
+    [PostData, formField, handleAddDialog, reload]
+  );
 
   const getCustomerList = async (sorting: any) => {
     try {
@@ -113,6 +121,8 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    if (isSubmittingRef.current) return;
+
     if (
       formField.all_customer.trim() === '' ||
       formField.via.trim() === '' ||
@@ -132,6 +142,7 @@ const AddDialog = () => {
       return;
     }
 
+    setIsSubmitting(true);
     doCreateNotification(e);
     // console.log(formField);
     setAlert({ show: false, message: '' });
@@ -155,213 +166,223 @@ const AddDialog = () => {
           <DialogDescription></DialogDescription>
         </DialogHeader>
         <DialogBody className="scrollable">
-          <form onSubmit={handleSubmit} className="space-y-6">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
+          <fieldset disabled={isSubmitting}>
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {alert.show && (
+                <Alert variant="danger">
+                  <h3>{alert.message}</h3>
+                </Alert>
+              )}
 
-            <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">
-                  Send To<span className="text-red-500">*</span>
-                </label>
-                <div className="flex gap-6 items-center">
-                  <label className="flex items-center space-x-2">
-                    <input
-                      type="radio"
-                      name="all_customer"
-                      value="true"
-                      checked={formField.all_customer === 'true'}
-                      onChange={handleChange}
-                      className="accent-blue-600"
-                    />
-                    <span>All Customers</span>
+              <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">
+                    Send To<span className="text-red-500">*</span>
                   </label>
-                  <label className="flex items-center space-x-2">
-                    <input
-                      type="radio"
-                      name="all_customer"
-                      value="false"
-                      checked={formField.all_customer === 'false'}
-                      onChange={handleChange}
-                      className="accent-blue-600"
-                    />
-                    <span>Selected Customers</span>
-                  </label>
-                </div>
-              </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">Customer</label>
-                <Popover open={open} onOpenChange={setOpen}>
-                  <PopoverTrigger asChild>
-                    <button
-                      type="button"
-                      className="input col-span-5 text-left flex justify-between"
-                      style={{ color: 'inherit' }}
-                      disabled={formField.all_customer !== 'false'}
-                    >
-                      <span>
-                        {formField.customers.length === 0
-                          ? 'Select Customers'
-                          : `${formField.customers.length} Customers Selected`}
-                      </span>
-                      <ChevronDown className="w-4 h-4 opacity-70" />
-                    </button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[400px] p-0">
-                    <Command>
-                      <CommandInput placeholder="Search Customer..." />
-                      <CommandList
-                        className="max-h-[300px] overflow-y-auto"
-                        style={{ touchAction: 'pan-y' }}
-                        onWheel={(e) => {
-                          e.currentTarget.scrollTop += e.deltaY;
-                        }}
-                      >
-                        <CommandEmpty>No Customer found.</CommandEmpty>
-                        <CommandGroup>
-                          {customers.map((customer) => {
-                            const isSelected = formField.customers.includes(customer.id);
-                            return (
-                              <CommandItem
-                                key={customer.id}
-                                value={customer.username}
-                                onSelect={() => {
-                                  const customerId = customer.id;
-                                  setFormField((prev) => {
-                                    const isSelected = prev.customers.includes(customerId);
-                                    return {
-                                      ...prev,
-                                      customers: isSelected
-                                        ? prev.customers.filter((id) => id !== customerId)
-                                        : [...prev.customers, customerId]
-                                    };
-                                  });
-                                }}
-                                className={isSelected ? 'bg-accent font-semibold' : ''}
-                              >
-                                <span className="flex items-center gap-2">
-                                  {isSelected && <Check className="w-4 h-4 text-green-600" />}
-                                  {customer.username}
-                                </span>
-                              </CommandItem>
-                            );
-                          })}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-              </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">
-                  Type<span className="text-red-500">*</span>
-                </label>
-                <div className="flex gap-6 items-center">
-                  {['info', 'promo'].map((type) => (
-                    <label key={type} className="flex items-center space-x-2">
+                  <div className="flex gap-6 items-center">
+                    <label className="flex items-center space-x-2">
                       <input
                         type="radio"
-                        name="type"
-                        value={type}
-                        checked={formField.type === type}
+                        name="all_customer"
+                        value="true"
+                        checked={formField.all_customer === 'true'}
                         onChange={handleChange}
                         className="accent-blue-600"
                       />
-                      <span>{type.charAt(0).toUpperCase() + type.slice(1)}</span>
+                      <span>All Customers</span>
                     </label>
-                  ))}
+                    <label className="flex items-center space-x-2">
+                      <input
+                        type="radio"
+                        name="all_customer"
+                        value="false"
+                        checked={formField.all_customer === 'false'}
+                        onChange={handleChange}
+                        className="accent-blue-600"
+                      />
+                      <span>Selected Customers</span>
+                    </label>
+                  </div>
                 </div>
               </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">
-                  Send Via<span className="text-red-500">*</span>
-                </label>
-                <div className="flex gap-6 items-center">
-                  <label className="flex items-center space-x-2">
-                    <input
-                      type="radio"
-                      name="via"
-                      value="fcm"
-                      checked={formField.via === 'fcm'}
-                      onChange={handleChange}
-                      className="accent-blue-600"
-                    />
-                    <span>FCM</span>
-                  </label>
-                  <label className="flex items-center space-x-2">
-                    <input
-                      type="radio"
-                      name="via"
-                      value="sms"
-                      checked={formField.via === 'sms'}
-                      onChange={handleChange}
-                      className="accent-blue-600"
-                    />
-                    <span>SMS</span>
-                  </label>
-                  <label className="flex items-center space-x-2">
-                    <input
-                      type="radio"
-                      name="via"
-                      value="email"
-                      checked={formField.via === 'email'}
-                      onChange={handleChange}
-                      className="accent-blue-600"
-                    />
-                    <span>E-Mail</span>
-                  </label>
+              <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">Customer</label>
+                  <Popover open={open} onOpenChange={setOpen}>
+                    <PopoverTrigger asChild>
+                      <button
+                        type="button"
+                        className="input col-span-5 text-left flex justify-between"
+                        style={{ color: 'inherit' }}
+                        disabled={formField.all_customer !== 'false'}
+                      >
+                        <span>
+                          {formField.customers.length === 0
+                            ? 'Select Customers'
+                            : `${formField.customers.length} Customers Selected`}
+                        </span>
+                        <ChevronDown className="w-4 h-4 opacity-70" />
+                      </button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[400px] p-0">
+                      <Command>
+                        <CommandInput placeholder="Search Customer..." />
+                        <CommandList
+                          className="max-h-[300px] overflow-y-auto"
+                          style={{ touchAction: 'pan-y' }}
+                          onWheel={(e) => {
+                            e.currentTarget.scrollTop += e.deltaY;
+                          }}
+                        >
+                          <CommandEmpty>No Customer found.</CommandEmpty>
+                          <CommandGroup>
+                            {customers.map((customer) => {
+                              const isSelected = formField.customers.includes(customer.id);
+                              return (
+                                <CommandItem
+                                  key={customer.id}
+                                  value={customer.username}
+                                  onSelect={() => {
+                                    const customerId = customer.id;
+                                    setFormField((prev) => {
+                                      const isSelected = prev.customers.includes(customerId);
+                                      return {
+                                        ...prev,
+                                        customers: isSelected
+                                          ? prev.customers.filter((id) => id !== customerId)
+                                          : [...prev.customers, customerId]
+                                      };
+                                    });
+                                  }}
+                                  className={isSelected ? 'bg-accent font-semibold' : ''}
+                                >
+                                  <span className="flex items-center gap-2">
+                                    {isSelected && <Check className="w-4 h-4 text-green-600" />}
+                                    {customer.username}
+                                  </span>
+                                </CommandItem>
+                              );
+                            })}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
                 </div>
               </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>
-                <Input
-                  className="input col-span-6"
-                  name="subject"
-                  placeholder="Enter Subject"
-                  value={formField.subject}
-                  onChange={handleChange}
-                  disabled={formField.via !== 'email' && formField.via !== 'fcm'}
-                />
+              <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">
+                    Type<span className="text-red-500">*</span>
+                  </label>
+                  <div className="flex gap-6 items-center">
+                    {['info', 'promo'].map((type) => (
+                      <label key={type} className="flex items-center space-x-2">
+                        <input
+                          type="radio"
+                          name="type"
+                          value={type}
+                          checked={formField.type === type}
+                          onChange={handleChange}
+                          className="accent-blue-600"
+                        />
+                        <span>{type.charAt(0).toUpperCase() + type.slice(1)}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
               </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">
-                  Content<span className="text-red-500">*</span>
-                </label>
-                <Textarea
-                  className="input col-span-6"
-                  name="content"
-                  placeholder="Enter Content Notification"
-                  value={formField.content}
-                  onChange={handleChange}
-                />
+              <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">
+                    Send Via<span className="text-red-500">*</span>
+                  </label>
+                  <div className="flex gap-6 items-center">
+                    <label className="flex items-center space-x-2">
+                      <input
+                        type="radio"
+                        name="via"
+                        value="fcm"
+                        checked={formField.via === 'fcm'}
+                        onChange={handleChange}
+                        className="accent-blue-600"
+                      />
+                      <span>FCM</span>
+                    </label>
+                    <label className="flex items-center space-x-2">
+                      <input
+                        type="radio"
+                        name="via"
+                        value="sms"
+                        checked={formField.via === 'sms'}
+                        onChange={handleChange}
+                        className="accent-blue-600"
+                      />
+                      <span>SMS</span>
+                    </label>
+                    <label className="flex items-center space-x-2">
+                      <input
+                        type="radio"
+                        name="via"
+                        value="email"
+                        checked={formField.via === 'email'}
+                        onChange={handleChange}
+                        className="accent-blue-600"
+                      />
+                      <span>E-Mail</span>
+                    </label>
+                  </div>
+                </div>
               </div>
-            </div>
 
-            <div className="flex justify-end gap-4">
-              <Button type="reset" variant="outline" onClick={() => setFormField(initialState)}>
-                Reset
-              </Button>
-              <Button type="submit">Create Notification</Button>
-            </div>
-          </form>
+              <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>
+                  <Input
+                    className="input col-span-6"
+                    name="subject"
+                    placeholder="Enter Subject"
+                    value={formField.subject}
+                    onChange={handleChange}
+                    disabled={formField.via !== 'email' && formField.via !== 'fcm'}
+                  />
+                </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">
+                    Content<span className="text-red-500">*</span>
+                  </label>
+                  <Textarea
+                    className="input col-span-6"
+                    name="content"
+                    placeholder="Enter Content Notification"
+                    value={formField.content}
+                    onChange={handleChange}
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end gap-4">
+                <Button type="reset" variant="outline" onClick={() => setFormField(initialState)}>
+                  Reset
+                </Button>
+                <div className="flex justify-end pt-2.5">
+                  <Button
+                    className={`btn btn-primary ${isSubmitting ? 'opacity-70 cursor-not-allowed' : ''}`}
+                    type="submit"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting ? 'Creating...' : 'Create Notification'}
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </fieldset>
         </DialogBody>
       </DialogContent>
     </Dialog>