diff --git a/src/apps/admin/pages/components/default-value.tsx b/src/apps/admin/pages/components/default-value.tsx
index 8a9ec4c..0f21404 100644
--- a/src/apps/admin/pages/components/default-value.tsx
+++ b/src/apps/admin/pages/components/default-value.tsx
@@ -6,7 +6,9 @@ import { notificationError } from '@pos/base';
 import { makeColorTextValue } from '../helpers';
 
 export default function DefaultValue() {
-  const [loading, setLoading] = useState(false);
+  const [loadingDefault, setLoadingDefault] = useState(false);
+  const [loadingActive, setLoadingActive] = useState(false);
+
   const [loadingSave, setLoadingSave] = useState(false);
   const [defaultPercentage, setDefaultPercentage] = useState<number>(100);
   const [currentPercentage, setCurrentPercentage] = useState<number>(100);
@@ -33,6 +35,7 @@ export default function DefaultValue() {
         .then(async (resp) => {
           const value = resp.data?.data?.default_value;
           await form.setFieldsValue({ default_value: value });
+          await handleGetDataActive();
           setDefaultPercentage(value);
           setLoadingSave(false);
           onCloseModal();
@@ -47,33 +50,44 @@ export default function DefaultValue() {
     }
   };
 
+  const handleGetDataActive = async () => {
+    setLoadingActive(true);
+    await axios
+      .get('v1/data-scheduling-active', { params: { date: dayjs().format('YYYY-MM-DD') } })
+      .then((resp) => {
+        const value = resp.data?.data?.value;
+        form.setFieldsValue({ value: value });
+        setCurrentPercentage(value);
+      })
+      .catch((err) => {
+        const message = err.message;
+        if (message) notificationError(message);
+      })
+      .finally(() => {
+        setLoadingActive(false);
+      });
+  };
+
+  const handleGetDataDefault = async () => {
+    setLoadingDefault(true);
+    await axios
+      .get('v1/data-scheduling-default')
+      .then((resp) => {
+        const value = resp.data?.data?.default_value;
+        form.setFieldsValue({ default_value: value });
+        setDefaultPercentage(value);
+      })
+      .catch((err) => {
+        const message = err.message;
+        if (message) notificationError(message);
+      })
+      .finally(() => {
+        setLoadingDefault(false);
+      });
+  };
+
   const handleGetData = async () => {
-    setLoading(true);
-    await Promise.all([
-      axios
-        .get('v1/data-scheduling-default')
-        .then((resp) => {
-          const value = resp.data?.data?.default_value;
-          form.setFieldsValue({ default_value: value });
-          setDefaultPercentage(value);
-        })
-        .catch((err) => {
-          const message = err.message;
-          if (message) notificationError(message);
-        }),
-      axios
-        .get('v1/data-scheduling-active', { params: { date: dayjs().format('YYYY-MM-DD') } })
-        .then((resp) => {
-          const value = resp.data?.data?.value;
-          form.setFieldsValue({ value: value });
-          setCurrentPercentage(value);
-        })
-        .catch((err) => {
-          const message = err.message;
-          if (message) notificationError(message);
-        }),
-    ]);
-    setLoading(false);
+    await Promise.all([handleGetDataDefault(), handleGetDataActive()]);
   };
 
   useEffect(() => {
@@ -120,7 +134,7 @@ export default function DefaultValue() {
       </Modal>
       <Row gutter={[8, 8]}>
         <Col span={12}>
-          <Card loading={loading} styles={{ body: { padding: '6px 12px 6px 12px' } }}>
+          <Card loading={loadingDefault} styles={{ body: { padding: '6px 12px 6px 12px' } }}>
             <Flex vertical gap={8} justify="space-between">
               <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>DEFAULT PERCENTAGE</div>
               <Flex gap={12}>
@@ -139,13 +153,18 @@ export default function DefaultValue() {
           </Card>
         </Col>
         <Col span={12}>
-          <Card loading={loading} styles={{ body: { padding: '6px 12px 6px 12px' } }}>
+          <Card loading={loadingActive} styles={{ body: { padding: '6px 12px 6px 12px' } }}>
             <Flex vertical gap={8} justify="space-between">
               <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>CURRENT PERCENTAGE</div>
-              <div
-                style={{ fontSize: 24, fontWeight: 600 }}
-                className={`${makeColorTextValue(currentPercentage)}`}
-              >{`${currentPercentage >= 0 ? `${currentPercentage} %` : '-'}`}</div>
+              <Flex gap={12}>
+                <div
+                  style={{ fontSize: 24, fontWeight: 600 }}
+                  className={`${makeColorTextValue(currentPercentage)}`}
+                >{`${currentPercentage >= 0 ? `${currentPercentage} %` : '-'}`}</div>
+                <Button type="link" onClick={handleGetDataActive}>
+                  Reload
+                </Button>
+              </Flex>
               <div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}>
                 {`Value yang di terapkan hari ini ${dayjs().format('DD-MM-YYYY')}.`}
               </div>