diff --git a/react/src/pages/MaintenancePage.tsx b/react/src/pages/MaintenancePage.tsx
index 154eb042d..5cb5c7fed 100644
--- a/react/src/pages/MaintenancePage.tsx
+++ b/react/src/pages/MaintenancePage.tsx
@@ -1,7 +1,11 @@
 import { SettingItemProps } from '../components/SettingItem';
 import SettingList from '../components/SettingList';
+import { useSuspendedBackendaiClient } from '../hooks';
+import { useSetBAINotification } from '../hooks/useBAINotification';
+import { usePainKiller } from '../hooks/usePainKiller';
 import { RedoOutlined } from '@ant-design/icons';
 import { Button, Card } from 'antd';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
@@ -14,8 +18,122 @@ type SettingGroup = {
 const tabParam = withDefault(StringParam, 'maintenance');
 
 const MaintenanceSettingList = () => {
+  // state
+  const [isRecalculating, setIsRecalculating] = useState(false);
+  const [isRescanning, setIsRescanning] = useState(false);
+  // hooks
   const { t } = useTranslation();
-
+  const { upsertNotification } = useSetBAINotification();
+  const baiClient = useSuspendedBackendaiClient();
+  const painKiller = usePainKiller();
+  // funcs
+  const recalculateUsage = async () => {
+    setIsRecalculating(true);
+    const notiKey = upsertNotification({
+      message: t('maintenance.RecalculateUsage'),
+      description: t('maintenance.Recalculating'),
+      open: true,
+      backgroundTask: {
+        status: 'pending',
+        percent: 0,
+        statusDescriptions: {
+          pending: t('maintenance.Recalculating'),
+          resolved: t('maintenance.RecalculationFinished'),
+          rejected: t('maintenance.RecalculationFailed'),
+        },
+      },
+      duration: 0,
+    });
+    try {
+      await baiClient.maintenance.recalculate_usage();
+      upsertNotification({
+        key: notiKey,
+        description: t('maintenance.RecalculationFinished'),
+        backgroundTask: {
+          status: 'resolved',
+          percent: 100,
+        },
+      });
+      setIsRecalculating(false);
+    } catch (err: any) {
+      console.error(err);
+      if (err && err.message) {
+        // @ts-ignore
+        globalThis.lablupNotification.text = painKiller.relieve(err.title);
+        // @ts-ignore
+        globalThis.lablupNotification.detail = err.message;
+        // @ts-ignore
+        globalThis.lablupNotification.show(true, err);
+      }
+      upsertNotification({
+        key: notiKey,
+        backgroundTask: {
+          status: 'rejected',
+        },
+        duration: 0,
+      });
+    } finally {
+      setIsRecalculating(false);
+    }
+  };
+  const rescanImages = async () => {
+    setIsRescanning(true);
+    const notiKey = upsertNotification({
+      message: t('maintenance.rescanImages'),
+      description: t('maintenance.RescanImageScanning'),
+      open: true,
+      backgroundTask: {
+        status: 'pending',
+        percent: 0,
+      },
+      duration: 0,
+    });
+    try {
+      const { rescan_images } = await baiClient.maintenance.rescan_images();
+      if (rescan_images.ok) {
+        upsertNotification({
+          key: notiKey,
+          backgroundTask: {
+            status: 'pending',
+            percent: 0,
+            taskId: rescan_images.task_id,
+            statusDescriptions: {
+              pending: t('maintenance.RescanImageScanning'),
+              resolved: t('maintenance.RescanImageFinished'),
+              rejected: t('maintenance.RescanFailed'),
+            },
+          },
+        });
+      } else {
+        upsertNotification({
+          key: notiKey,
+          backgroundTask: {
+            status: 'rejected',
+          },
+          duration: 1,
+        });
+      }
+    } catch (err: any) {
+      console.error(err);
+      if (err && err.message) {
+        // @ts-ignore
+        globalThis.lablupNotification.text = painKiller.relieve(err.title);
+        // @ts-ignore
+        globalThis.lablupNotification.detail = err.message;
+        // @ts-ignore
+        globalThis.lablupNotification.show(true, err);
+      }
+      upsertNotification({
+        backgroundTask: {
+          status: 'rejected',
+        },
+        duration: 1,
+      });
+    } finally {
+      setIsRescanning(false);
+    }
+  };
+  // vars
   const settingGroupList: Array<SettingGroup> = [
     {
       title: t('maintenance.Fix'),
@@ -25,8 +143,14 @@ const MaintenanceSettingList = () => {
           title: t('maintenance.MatchDatabase'),
           description: t('maintenance.DescMatchDatabase'),
           children: (
-            <Button icon={<RedoOutlined />}>
-              {t('maintenance.RecalculateUsage')}
+            <Button
+              icon={<RedoOutlined />}
+              onClick={recalculateUsage}
+              disabled={isRecalculating}
+            >
+              {isRecalculating
+                ? t('maintenance.Recalculating')
+                : t('maintenance.RecalculateUsage')}
             </Button>
           ),
         },
@@ -40,8 +164,14 @@ const MaintenanceSettingList = () => {
           title: t('maintenance.RescanImageList'),
           description: t('maintenance.DescRescanImageList'),
           children: (
-            <Button icon={<RedoOutlined />}>
-              {t('maintenance.RescanImages')}
+            <Button
+              icon={<RedoOutlined />}
+              onClick={rescanImages}
+              disabled={isRescanning}
+            >
+              {isRescanning
+                ? t('maintenance.RescanImageScanning')
+                : t('maintenance.RescanImages')}
             </Button>
           ),
         },