diff --git a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
index 366530e..6a8d4db 100644
--- a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
@@ -42,56 +42,58 @@ const ListToolbar = () => {
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
-      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
-        <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
-              From
-              <input
-                type="date"
-                placeholder="From"
-                value={trxDate.from}
-                onChange={(event) =>
-                  settrxDate({ ...trxDate, from: event.target.value })
-                }
-                name="from"
-              />
-            </label>
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full justify-between items-center">
+        <div className="flex gap-3 items-center w-full md:w-auto">
+          <label className="input input-sm w-[160px]">
+            From
+            <input
+              type="date"
+              placeholder="From"
+              value={trxDate.from}
+              onChange={(event) =>
+                settrxDate({ ...trxDate, from: event.target.value })
+              }
+              name="from"
+            />
+          </label>
 
-            <label className="input input-sm w-1/3">
-              To
-              <input
-                type="date"
-                placeholder="To"
-                value={trxDate.to}
-                onChange={(event) =>
-                  settrxDate({ ...trxDate, to: event.target.value })
-                }
-                name="to"
-              />
-            </label>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5"
-                onClick={() => {
-                  const today = new Date();
-                  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-                  settrxDate({
-                    from: formatDate(firstDayOfMonth),
-                    to: formatDate(today),
-                  });
-                  reload();
-                }}
-              >
-                <KeenIcon icon="arrows-circle" />
-              </Button>
-            </DefaultTooltip>
-          </div>
+          <label className="input input-sm w-[160px]">
+            To
+            <input
+              type="date"
+              placeholder="To"
+              value={trxDate.to}
+              onChange={(event) =>
+                settrxDate({ ...trxDate, to: event.target.value })
+              }
+              name="to"
+            />
+          </label>
+        </div>
+
+        <div className="ml-auto">
+          <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <Button
+              variant="outline"
+              className="h-7.5"
+              onClick={() => {
+                const today = new Date();
+                const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+                settrxDate({
+                  from: formatDate(firstDayOfMonth),
+                  to: formatDate(today),
+                });
+                reload();
+              }}
+            >
+              <KeenIcon icon="arrows-circle" />
+            </Button>
+          </DefaultTooltip>
         </div>
       </div>
     </div>
   );
+
 };
 
 export default ListToolbar;
diff --git a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
index 7fcc065..aeb3e0d 100644
--- a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
@@ -42,53 +42,53 @@ const ListToolbar = () => {
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
-      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
-        <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
-              From
-              <input
-                type="date"
-                placeholder="From"
-                value={trxDate.from}
-                onChange={(event) =>
-                  settrxDate({ ...trxDate, from: event.target.value })
-                }
-                name="from"
-              />
-            </label>
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full justify-between items-center">
+        <div className="flex gap-3 items-center w-full md:w-auto">
+          <label className="input input-sm w-[160px]">
+            From
+            <input
+              type="date"
+              placeholder="From"
+              value={trxDate.from}
+              onChange={(event) =>
+                settrxDate({ ...trxDate, from: event.target.value })
+              }
+              name="from"
+            />
+          </label>
 
-            <label className="input input-sm w-1/3">
-              To
-              <input
-                type="date"
-                placeholder="To"
-                value={trxDate.to}
-                onChange={(event) =>
-                  settrxDate({ ...trxDate, to: event.target.value })
-                }
-                name="to"
-              />
-            </label>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5"
-                onClick={() => {
-                  const today = new Date();
-                  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-                  settrxDate({
-                    from: formatDate(firstDayOfMonth),
-                    to: formatDate(today),
-                  });
-                  reload();
-                }}
-              >
-                <KeenIcon icon="arrows-circle" />
-              </Button>
-            </DefaultTooltip>
+          <label className="input input-sm w-[160px]">
+            To
+            <input
+              type="date"
+              placeholder="To"
+              value={trxDate.to}
+              onChange={(event) =>
+                settrxDate({ ...trxDate, to: event.target.value })
+              }
+              name="to"
+            />
+          </label>
+        </div>
 
-          </div>
+        <div className="ml-auto">
+          <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <Button
+              variant="outline"
+              className="h-7.5"
+              onClick={() => {
+                const today = new Date();
+                const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+                settrxDate({
+                  from: formatDate(firstDayOfMonth),
+                  to: formatDate(today),
+                });
+                reload();
+              }}
+            >
+              <KeenIcon icon="arrows-circle" />
+            </Button>
+          </DefaultTooltip>
         </div>
       </div>
     </div>