diff --git a/packages/extension/src/components/option/ImportExport.tsx b/packages/extension/src/components/option/ImportExport.tsx
index 3b9b218a..1eb478a9 100644
--- a/packages/extension/src/components/option/ImportExport.tsx
+++ b/packages/extension/src/components/option/ImportExport.tsx
@@ -1,360 +1,65 @@
-import { useState, useRef, useEffect } from "react"
+import { useState } from "react"
 import { Dialog } from "./Dialog"
-import type { UserSettings, Caches, ShortcutSettings } from "@/types"
-
-import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from "@/services/storage"
-import {
-  DailyBackupManager,
-  WeeklyBackupManager,
-  LegacyBackupManager,
-} from "@/services/storage/backupManager"
-import { Settings, migrate } from "@/services/settings/settings"
-import { enhancedSettings } from "@/services/settings/enhancedSettings"
-import { CACHE_SECTIONS } from "@/services/settings/settingsCache"
-import { isBase64, isUrl } from "@/lib/utils"
-import { APP_ID } from "@/const"
 import { t } from "@/services/i18n"
 import { Download, Upload, Undo2, RotateCcw } from "lucide-react"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import type { BackupData } from "@/services/storage/backupManager"
 import { TEST_IDS } from "@/testIds"
+import { useImportExport } from "@/hooks/option/useImportExport"
+import {
+  BACKUP_TYPES,
+  isCheckingBackups,
+  hasAvailableBackup,
+  getAvailableBackups,
+} from "@/services/settings/importExport"
+import type { BackupType } from "@/services/settings/importExport"
 
 import css from "./Option.module.css"
 
-// Backup type constants
-const BACKUP_TYPES = {
-  LEGACY: "legacy",
-  DAILY: "daily",
-  WEEKLY: "weekly",
-} as const
-
-// Backup status constants
-const BACKUP_STATUS = {
-  CHECKING: "checking",
-  AVAILABLE: "available",
-  NONE: "none",
-} as const
-
-type BackupType = (typeof BACKUP_TYPES)[keyof typeof BACKUP_TYPES]
-type BackupStatus = (typeof BACKUP_STATUS)[keyof typeof BACKUP_STATUS]
-
-function getTimestamp() {
-  const date = new Date()
-  const year = date.getFullYear()
-  const month = (date.getMonth() + 1).toString().padStart(2, "0")
-  const day = date.getDate().toString().padStart(2, "0")
-  const hours = date.getHours().toString().padStart(2, "0")
-  const minutes = date.getMinutes().toString().padStart(2, "0")
-  return `${year}${month}${day}_${hours}${minutes}`
+const getBackupTypeLabel = (type: BackupType) => {
+  switch (type) {
+    case BACKUP_TYPES.LEGACY:
+      return t("Option_RestoreFromBackup_legacy")
+    case BACKUP_TYPES.DAILY:
+      return t("Option_RestoreFromBackup_daily")
+    case BACKUP_TYPES.WEEKLY:
+      return t("Option_RestoreFromBackup_weekly")
+  }
 }
 
 export function ImportExport() {
   const [resetDialog, setResetDialog] = useState(false)
   const [importDialog, setImportDialog] = useState(false)
   const [restoreDialog, setRestoreDialog] = useState(false)
-  const [importJson, setImportJson] = useState<UserSettings>()
-  const [backupData, setBackupData] = useState<{
-    [BACKUP_TYPES.LEGACY]: {
-      status: BackupStatus
-      info: {
-        timestamp: number
-        commandCount: number
-        folderCount?: number
-      } | null
-    }
-    [BACKUP_TYPES.DAILY]: {
-      status: BackupStatus
-      info: {
-        timestamp: number
-        commandCount: number
-        folderCount?: number
-      } | null
-    }
-    [BACKUP_TYPES.WEEKLY]: {
-      status: BackupStatus
-      info: {
-        timestamp: number
-        commandCount: number
-        folderCount?: number
-      } | null
-    }
-  }>({
-    [BACKUP_TYPES.LEGACY]: { status: BACKUP_STATUS.CHECKING, info: null },
-    [BACKUP_TYPES.DAILY]: { status: BACKUP_STATUS.CHECKING, info: null },
-    [BACKUP_TYPES.WEEKLY]: { status: BACKUP_STATUS.CHECKING, info: null },
-  })
-  const [selectedBackupType, setSelectedBackupType] = useState<BackupType>(
-    BACKUP_TYPES.LEGACY,
-  )
-  const inputFile = useRef<HTMLInputElement>(null)
-
-  // Check backup status on initialization
-  useEffect(() => {
-    checkBackupStatus()
-  }, [])
-
-  const checkBackupStatus = async () => {
-    try {
-      const newBackupData = { ...backupData }
-
-      // 1. Check legacy backup
-      const legacyBackup = await Storage.get<BackupData>(
-        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
-      )
-
-      if (
-        legacyBackup &&
-        legacyBackup.commands &&
-        Array.isArray(legacyBackup.commands)
-      ) {
-        newBackupData[BACKUP_TYPES.LEGACY] = {
-          status: BACKUP_STATUS.AVAILABLE,
-          info: {
-            timestamp: legacyBackup.timestamp,
-            commandCount: legacyBackup.commands.length,
-            folderCount: Array.isArray(legacyBackup.folders)
-              ? legacyBackup.folders.length
-              : 0,
-          },
-        }
-      } else {
-        newBackupData[BACKUP_TYPES.LEGACY] = {
-          status: BACKUP_STATUS.NONE,
-          info: null,
-        }
-      }
-
-      // 2. Check daily backup
-      const dailyBackupManager = new DailyBackupManager()
-      const dailyBackup = await dailyBackupManager.getLastBackupData()
-
-      if (
-        dailyBackup &&
-        dailyBackup.commands &&
-        Array.isArray(dailyBackup.commands)
-      ) {
-        newBackupData[BACKUP_TYPES.DAILY] = {
-          status: BACKUP_STATUS.AVAILABLE,
-          info: {
-            timestamp: dailyBackup.timestamp,
-            commandCount: dailyBackup.commands.length,
-            folderCount: Array.isArray(dailyBackup.folders)
-              ? dailyBackup.folders.length
-              : 0,
-          },
-        }
-      } else {
-        newBackupData[BACKUP_TYPES.DAILY] = {
-          status: BACKUP_STATUS.NONE,
-          info: null,
-        }
-      }
-
-      // 3. Check weekly backup
-      const weeklyBackupManager = new WeeklyBackupManager()
-      const weeklyBackup = await weeklyBackupManager.getLastBackupData()
-
-      if (
-        weeklyBackup &&
-        weeklyBackup.commands &&
-        Array.isArray(weeklyBackup.commands)
-      ) {
-        newBackupData[BACKUP_TYPES.WEEKLY] = {
-          status: BACKUP_STATUS.AVAILABLE,
-          info: {
-            timestamp: weeklyBackup.timestamp,
-            commandCount: weeklyBackup.commands.length,
-            folderCount: Array.isArray(weeklyBackup.folders)
-              ? weeklyBackup.folders.length
-              : 0,
-          },
-        }
-      } else {
-        newBackupData[BACKUP_TYPES.WEEKLY] = {
-          status: BACKUP_STATUS.NONE,
-          info: null,
-        }
-      }
-
-      setBackupData(newBackupData)
-
-      // Set default selection to first available backup
-      if (
-        newBackupData[BACKUP_TYPES.LEGACY].status === BACKUP_STATUS.AVAILABLE
-      ) {
-        setSelectedBackupType(BACKUP_TYPES.LEGACY)
-      } else if (
-        newBackupData[BACKUP_TYPES.DAILY].status === BACKUP_STATUS.AVAILABLE
-      ) {
-        setSelectedBackupType(BACKUP_TYPES.DAILY)
-      } else if (
-        newBackupData[BACKUP_TYPES.WEEKLY].status === BACKUP_STATUS.AVAILABLE
-      ) {
-        setSelectedBackupType(BACKUP_TYPES.WEEKLY)
-      }
-    } catch (error) {
-      console.error("Failed to check backup status:", error)
-      setBackupData({
-        [BACKUP_TYPES.LEGACY]: { status: BACKUP_STATUS.NONE, info: null },
-        [BACKUP_TYPES.DAILY]: { status: BACKUP_STATUS.NONE, info: null },
-        [BACKUP_TYPES.WEEKLY]: { status: BACKUP_STATUS.NONE, info: null },
-      })
-    }
-  }
-
-  const handleReset = () => {
-    setResetDialog(true)
-  }
+  const {
+    importJson,
+    backupStatus,
+    selectedBackupType,
+    setSelectedBackupType,
+    reset,
+    exportSettings,
+    selectImportFile,
+    runImport,
+    restore,
+  } = useImportExport()
+  const availableBackups = getAvailableBackups(backupStatus)
 
   const handleResetClose = (ret: boolean) => {
-    if (ret) {
-      Settings.reset().then(() => location.reload())
-    }
+    if (ret) reset()
     setResetDialog(false)
   }
 
-  const handleExport = async () => {
-    const data = await Storage.get<UserSettings>(STORAGE_KEY.USER)
-    data.commands = await Storage.getCommands()
-    data.shortcuts = await Storage.get<ShortcutSettings>(STORAGE_KEY.SHORTCUTS)
-
-    // for back compatibility
-    // cache key to image data url
-    const caches = (await enhancedSettings.getSection(
-      CACHE_SECTIONS.CACHES,
-      true,
-    )) as Caches
-    for (const c of data.commands) {
-      if (!c.iconUrl) continue
-      if (isBase64(c.iconUrl) || isUrl(c.iconUrl)) continue
-      if (caches?.images?.[c.iconUrl]) {
-        c.iconUrl = caches.images[c.iconUrl]
-      }
-    }
-
-    const text = JSON.stringify(data, null, 2)
-    const blob = new Blob([text], { type: "text/plain" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    document.body.appendChild(a)
-    a.download = `${APP_ID}_${getTimestamp()}.json`
-    a.href = url
-    a.click()
-    a.remove()
-    URL.revokeObjectURL(url)
-  }
-
-  const handleImport = () => {
-    if (inputFile == null || inputFile.current == null) return
-    const files = inputFile.current.files
-    if (files == null) return
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i]
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        if (e.target != null) {
-          const text = e.target.result as string
-          const json = JSON.parse(text)
-          setImportJson(json)
-        }
-      }
-      reader.readAsText(file)
-    }
+  const handleImportFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) selectImportFile(file)
   }
 
   const handleImportClose = (ret: boolean) => {
-    if (ret && importJson != null) {
-      ;(async () => {
-        const {
-          commandExecutionCount = 0,
-          hasShownReviewRequest = false,
-          hasDismissedPromptHistoryBanner = false,
-          hasShownHubShareToast = false,
-          hasShownOnboarding = false,
-        } = await enhancedSettings.get()
-        const data = await migrate({
-          ...importJson,
-          commandExecutionCount,
-          hasShownReviewRequest,
-          hasDismissedPromptHistoryBanner,
-          hasShownHubShareToast,
-          hasShownOnboarding,
-          stars: [],
-        })
-        await Settings.set(data)
-        location.reload()
-      })()
-    }
+    if (ret) runImport()
     setImportDialog(false)
   }
 
-  const handleRestore = async () => {
-    setRestoreDialog(true)
-  }
-
   const handleRestoreClose = (ret: boolean) => {
-    if (ret) {
-      ;(async () => {
-        try {
-          let backupCommands: any[] = []
-
-          if (selectedBackupType === BACKUP_TYPES.LEGACY) {
-            // Restore from legacy backup
-            const manager = new LegacyBackupManager()
-            const data = await manager.restoreFromBackup()
-            backupCommands = data.commands
-
-            if (data.folders && data.folders.length > 0) {
-              // Restore folders to settings
-              const currentSettings = await enhancedSettings.get()
-              await Settings.set({
-                ...currentSettings,
-                folders: data.folders,
-              })
-            }
-          } else if (selectedBackupType === BACKUP_TYPES.DAILY) {
-            // Restore from daily backup
-            const dailyBackupManager = new DailyBackupManager()
-            const dailyData = await dailyBackupManager.restoreFromBackup()
-            backupCommands = dailyData.commands
-
-            if (dailyData.folders && dailyData.folders.length > 0) {
-              // Restore folders to settings
-              const currentSettings = await enhancedSettings.get()
-              await Settings.set({
-                ...currentSettings,
-                folders: dailyData.folders,
-              })
-            }
-          } else if (selectedBackupType === BACKUP_TYPES.WEEKLY) {
-            // Restore from weekly backup
-            const weeklyBackupManager = new WeeklyBackupManager()
-            const weeklyData = await weeklyBackupManager.restoreFromBackup()
-            backupCommands = weeklyData.commands
-
-            if (weeklyData.folders && weeklyData.folders.length > 0) {
-              // Restore folders to settings
-              const currentSettings = await enhancedSettings.get()
-              await Settings.set({
-                ...currentSettings,
-                folders: weeklyData.folders,
-              })
-            }
-          }
-
-          if (backupCommands.length > 0) {
-            // Save restored commands
-            await Storage.setCommands(backupCommands)
-            location.reload()
-          } else {
-            alert(t("Option_RestoreFromBackup_failed"))
-          }
-        } catch (error) {
-          console.error("Failed to restore from backup:", error)
-          alert("Failed to restore from backup.")
-        }
-      })()
-    }
+    if (ret) restore()
     setRestoreDialog(false)
   }
 
@@ -376,7 +81,7 @@ export function ImportExport() {
           {t("Option_Import")}
         </button>
         <button
-          onClick={handleExport}
+          onClick={exportSettings}
           className={css.menuButton}
           type="button"
           data-testid={TEST_IDS.exportButton}
@@ -385,17 +90,13 @@ export function ImportExport() {
           {t("Option_Export")}
         </button>
         <button
-          onClick={handleRestore}
+          onClick={() => setRestoreDialog(true)}
           className={css.menuButton}
           type="button"
           title={
-            Object.values(backupData).every(
-              (backup) => backup.status === BACKUP_STATUS.CHECKING,
-            )
+            isCheckingBackups(backupStatus)
               ? t("Option_RestoreFromBackup_checking")
-              : !Object.values(backupData).some(
-                    (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
-                  )
+              : !hasAvailableBackup(backupStatus)
                 ? t("Option_RestoreFromBackup_no_backup")
                 : t("Option_RestoreFromBackup_tooltip")
           }
@@ -404,7 +105,7 @@ export function ImportExport() {
           {t("Option_RestoreFromBackup")}
         </button>
         <button
-          onClick={handleReset}
+          onClick={() => setResetDialog(true)}
           className={css.menuButton}
           type="button"
           data-testid={TEST_IDS.resetButton}
@@ -440,8 +141,7 @@ export function ImportExport() {
           type="file"
           name="settings"
           accept=".json"
-          onChange={handleImport}
-          ref={inputFile}
+          onChange={handleImportFileChange}
           className={`${css.buttonImport}`}
           data-testid={TEST_IDS.importFileInput}
         />
@@ -450,106 +150,64 @@ export function ImportExport() {
         open={restoreDialog}
         onClose={handleRestoreClose}
         title={t("Option_RestoreFromBackup_dialog_title")}
-        description={() => {
-          const availableBackups = Object.entries(backupData).filter(
-            ([, backup]) => backup.status === BACKUP_STATUS.AVAILABLE,
-          )
-
-          if (availableBackups.length === 0) {
-            return <span>{t("Option_RestoreFromBackup_dialog_no_data")}</span>
-          }
-
-          return <span>{t("Option_RestoreFromBackup_dialog_select")}</span>
-        }}
-        okText={t("Option_RestoreFromBackup_dialog_restore")}
-        okDisabled={
-          !Object.values(backupData).some(
-            (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
+        description={() =>
+          availableBackups.length === 0 ? (
+            <span>{t("Option_RestoreFromBackup_dialog_no_data")}</span>
+          ) : (
+            <span>{t("Option_RestoreFromBackup_dialog_select")}</span>
           )
         }
+        okText={t("Option_RestoreFromBackup_dialog_restore")}
+        okDisabled={!hasAvailableBackup(backupStatus)}
       >
-        {(() => {
-          const availableBackups = Object.entries(backupData).filter(
-            ([, backup]) => backup.status === BACKUP_STATUS.AVAILABLE,
-          )
-
-          if (availableBackups.length === 0) {
-            return null
-          }
-
-          const getBackupTypeLabel = (type: string) => {
-            switch (type) {
-              case BACKUP_TYPES.LEGACY:
-                return t("Option_RestoreFromBackup_legacy")
-              case BACKUP_TYPES.DAILY:
-                return t("Option_RestoreFromBackup_daily")
-              case BACKUP_TYPES.WEEKLY:
-                return t("Option_RestoreFromBackup_weekly")
-              default:
-                return type
-            }
-          }
-
-          return (
-            <div>
-              <RadioGroup
-                value={selectedBackupType}
-                onValueChange={(value) =>
-                  setSelectedBackupType(value as typeof selectedBackupType)
-                }
-              >
-                {availableBackups
-                  .sort(([typeA], [typeB]) => {
-                    // Put legacy at the bottom
-                    if (typeA === BACKUP_TYPES.LEGACY) return 1
-                    if (typeB === BACKUP_TYPES.LEGACY) return -1
-                    return 0
-                  })
-                  .map(([type, backup]) => (
-                    <div key={type} className="flex items-start space-x-3">
-                      <RadioGroupItem value={type} className="mt-1" />
-                      <div className="flex-1">
-                        <label
-                          className="text-sm font-medium cursor-pointer"
-                          onClick={() =>
-                            setSelectedBackupType(
-                              type as typeof selectedBackupType,
-                            )
-                          }
-                        >
-                          {getBackupTypeLabel(type)}
-                        </label>
-                        {backup.info && (
-                          <div className="text-xs text-gray-600 mt-1">
-                            <div>
-                              {t("Option_RestoreFromBackup_created")}{" "}
-                              {new Date(backup.info.timestamp).toLocaleString()}
-                            </div>
-                            <div>
-                              {t("Option_RestoreFromBackup_commands")}{" "}
-                              {backup.info.commandCount}{" "}
-                              {t("Option_RestoreFromBackup_items")}
-                            </div>
-                            {backup.info.folderCount !== undefined && (
-                              <div>
-                                {t("Option_RestoreFromBackup_folders")}{" "}
-                                {backup.info.folderCount}{" "}
-                                {t("Option_RestoreFromBackup_items")}
-                              </div>
-                            )}
+        {availableBackups.length > 0 && (
+          <div>
+            <RadioGroup
+              value={selectedBackupType}
+              onValueChange={(value) =>
+                setSelectedBackupType(value as BackupType)
+              }
+            >
+              {availableBackups.map(([type, backup]) => (
+                <div key={type} className="flex items-start space-x-3">
+                  <RadioGroupItem value={type} className="mt-1" />
+                  <div className="flex-1">
+                    <label
+                      className="text-sm font-medium cursor-pointer"
+                      onClick={() => setSelectedBackupType(type)}
+                    >
+                      {getBackupTypeLabel(type)}
+                    </label>
+                    {backup.info && (
+                      <div className="text-xs text-gray-600 mt-1">
+                        <div>
+                          {t("Option_RestoreFromBackup_created")}{" "}
+                          {new Date(backup.info.timestamp).toLocaleString()}
+                        </div>
+                        <div>
+                          {t("Option_RestoreFromBackup_commands")}{" "}
+                          {backup.info.commandCount}{" "}
+                          {t("Option_RestoreFromBackup_items")}
+                        </div>
+                        {backup.info.folderCount !== undefined && (
+                          <div>
+                            {t("Option_RestoreFromBackup_folders")}{" "}
+                            {backup.info.folderCount}{" "}
+                            {t("Option_RestoreFromBackup_items")}
                           </div>
                         )}
                       </div>
-                    </div>
-                  ))}
-              </RadioGroup>
-              <p className="mt-4 text-sm text-yellow-600">
-                <strong>{t("Option_RestoreFromBackup_warning")}</strong>{" "}
-                {t("Option_RestoreFromBackup_warning_message")}
-              </p>
-            </div>
-          )
-        })()}
+                    )}
+                  </div>
+                </div>
+              ))}
+            </RadioGroup>
+            <p className="mt-4 text-sm text-yellow-600">
+              <strong>{t("Option_RestoreFromBackup_warning")}</strong>{" "}
+              {t("Option_RestoreFromBackup_warning_message")}
+            </p>
+          </div>
+        )}
       </Dialog>
     </>
   )
diff --git a/packages/extension/src/hooks/option/useImportExport.test.ts b/packages/extension/src/hooks/option/useImportExport.test.ts
new file mode 100644
index 00000000..36312e27
--- /dev/null
+++ b/packages/extension/src/hooks/option/useImportExport.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { renderHook, waitFor, act } from "@testing-library/react"
+import { useImportExport } from "./useImportExport"
+import {
+  checkBackupStatus,
+  readSettingsFile,
+  INITIAL_BACKUP_STATUS,
+} from "@/services/settings/importExport"
+
+vi.mock("@/services/settings/importExport", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/services/settings/importExport")>()
+  return {
+    ...actual,
+    checkBackupStatus: vi.fn(),
+    readSettingsFile: vi.fn(),
+  }
+})
+
+const mockCheckBackupStatus = vi.mocked(checkBackupStatus)
+const mockReadSettingsFile = vi.mocked(readSettingsFile)
+
+describe("useImportExport", () => {
+  let alertSpy: ReturnType<typeof vi.spyOn>
+  let consoleSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCheckBackupStatus.mockResolvedValue(INITIAL_BACKUP_STATUS)
+    alertSpy = vi.spyOn(window, "alert").mockImplementation(() => {})
+    consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    alertSpy.mockRestore()
+    consoleSpy.mockRestore()
+  })
+
+  const renderImportExport = async () => {
+    const hook = renderHook(() => useImportExport())
+    await waitFor(() => expect(mockCheckBackupStatus).toHaveBeenCalled())
+    return hook
+  }
+
+  describe("selectImportFile", () => {
+    it("UIE-01: should set importJson when the file is valid", async () => {
+      const json = { folders: [] } as any
+      mockReadSettingsFile.mockResolvedValue(json)
+      const { result } = await renderImportExport()
+
+      await act(() => result.current.selectImportFile(new File([""], "a.json")))
+
+      expect(result.current.importJson).toBe(json)
+      expect(alertSpy).not.toHaveBeenCalled()
+    })
+
+    it("UIE-02: should alert and not throw when the file is invalid", async () => {
+      mockReadSettingsFile.mockRejectedValue(new SyntaxError("invalid json"))
+      const { result } = await renderImportExport()
+
+      await expect(
+        act(() => result.current.selectImportFile(new File([""], "a.json"))),
+      ).resolves.not.toThrow()
+
+      expect(result.current.importJson).toBeUndefined()
+      expect(alertSpy).toHaveBeenCalledWith("Failed to read settings file.")
+    })
+
+    it("UIE-03: should clear the previous file when an invalid file is selected", async () => {
+      mockReadSettingsFile
+        .mockResolvedValueOnce({ folders: [] } as any)
+        .mockRejectedValueOnce(new SyntaxError("invalid json"))
+      const { result } = await renderImportExport()
+
+      await act(() => result.current.selectImportFile(new File([""], "a.json")))
+      expect(result.current.importJson).toBeDefined()
+
+      await act(() => result.current.selectImportFile(new File([""], "b.json")))
+      expect(result.current.importJson).toBeUndefined()
+    })
+  })
+})
diff --git a/packages/extension/src/hooks/option/useImportExport.ts b/packages/extension/src/hooks/option/useImportExport.ts
new file mode 100644
index 00000000..e0aed135
--- /dev/null
+++ b/packages/extension/src/hooks/option/useImportExport.ts
@@ -0,0 +1,84 @@
+import { useState, useEffect } from "react"
+import type { UserSettings } from "@/types"
+import { t } from "@/services/i18n"
+import {
+  BACKUP_TYPES,
+  INITIAL_BACKUP_STATUS,
+  checkBackupStatus,
+  getDefaultBackupType,
+  resetSettings,
+  exportSettings,
+  readSettingsFile,
+  importSettings,
+  restoreFromBackup,
+} from "@/services/settings/importExport"
+import type {
+  BackupType,
+  BackupStatusMap,
+} from "@/services/settings/importExport"
+
+export function useImportExport() {
+  const [importJson, setImportJson] = useState<UserSettings>()
+  const [backupStatus, setBackupStatus] = useState<BackupStatusMap>(
+    INITIAL_BACKUP_STATUS,
+  )
+  const [selectedBackupType, setSelectedBackupType] = useState<BackupType>(
+    BACKUP_TYPES.LEGACY,
+  )
+
+  // Check backup status on initialization
+  useEffect(() => {
+    checkBackupStatus().then((statusMap) => {
+      setBackupStatus(statusMap)
+      const defaultType = getDefaultBackupType(statusMap)
+      if (defaultType) setSelectedBackupType(defaultType)
+    })
+  }, [])
+
+  const reset = async () => {
+    await resetSettings()
+    location.reload()
+  }
+
+  const selectImportFile = async (file: File) => {
+    try {
+      setImportJson(await readSettingsFile(file))
+    } catch (error) {
+      // Clear the previously selected file so that it is not imported by mistake.
+      setImportJson(undefined)
+      console.error("Failed to read settings file:", error)
+      alert("Failed to read settings file.")
+    }
+  }
+
+  const runImport = async () => {
+    if (importJson == null) return
+    await importSettings(importJson)
+    location.reload()
+  }
+
+  const restore = async () => {
+    try {
+      if (await restoreFromBackup(selectedBackupType)) {
+        location.reload()
+      } else {
+        alert(t("Option_RestoreFromBackup_failed"))
+      }
+    } catch (error) {
+      console.error("Failed to restore from backup:", error)
+      alert("Failed to restore from backup.")
+    }
+  }
+
+  return {
+    importJson,
+    backupStatus,
+    selectedBackupType,
+    setSelectedBackupType,
+    reset,
+    exportSettings,
+    selectImportFile,
+    runImport,
+    restore,
+  }
+}
diff --git a/packages/extension/src/hooks/useSettingsWithImageCache.test.tsx b/packages/extension/src/hooks/useSettingsWithImageCache.test.tsx
index 3d1fbd20..206d239b 100644
--- a/packages/extension/src/hooks/useSettingsWithImageCache.test.tsx
+++ b/packages/extension/src/hooks/useSettingsWithImageCache.test.tsx
@@ -298,9 +298,12 @@ describe("useSettingsWithImageCache", () => {
     mockIpcSend.mockResolvedValueOnce([]).mockResolvedValueOnce([false])
 
     const firstRender = renderHook(() => useSettingsWithImageCache())
-    await waitFor(() => expect(mockIpcSend).toHaveBeenCalledTimes(1))
-    expect(firstRender.result.current.loading).toBe(true)
-    expect(firstRender.result.current.commands).toEqual([])
+    await waitFor(() => expect(firstRender.result.current.loading).toBe(false))
+    expect(mockIpcSend).toHaveBeenCalledTimes(1)
+    // Falls back to the default colors instead of blocking the menu.
+    expect(firstRender.result.current.commands).toEqual([
+      { ...command, preserveOriginalColor: false },
+    ])
     firstRender.unmount()
 
     const secondRender = renderHook(() => useSettingsWithImageCache())
@@ -312,6 +315,33 @@ describe("useSettingsWithImageCache", () => {
     ])
   })
 
+  it("US-30-a: should fall back to the default colors when IPC returns null", async () => {
+    const command = {
+      id: "null-response",
+      openMode: OPEN_MODE.POPUP,
+      title: "Null response",
+      iconUrl: "http://null.example.com/icon.png",
+    }
+    const folder = {
+      id: "null-folder",
+      title: "Null folder",
+      iconUrl: "http://null.example.com/folder.png",
+    }
+
+    mockSections({ folders: [folder] }, [command as Command])
+    mockIpcSend.mockResolvedValueOnce(null as any)
+
+    const { result } = renderHook(() => useSettingsWithImageCache())
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    expect(result.current.commands).toEqual([
+      { ...command, preserveOriginalColor: false },
+    ])
+    expect(result.current.folders).toEqual([
+      { ...folder, preserveOriginalColor: false },
+    ])
+  })
+
   it("US-31: should use the AI service URL for AI Prompt icon preservation", async () => {
     const chatgptUrl = getAiServicesFallback().find(
       (s) => s.id === "chatgpt",
diff --git a/packages/extension/src/hooks/useSettingsWithImageCache.ts b/packages/extension/src/hooks/useSettingsWithImageCache.ts
index cc8c7777..80a405a9 100644
--- a/packages/extension/src/hooks/useSettingsWithImageCache.ts
+++ b/packages/extension/src/hooks/useSettingsWithImageCache.ts
@@ -74,9 +74,16 @@ const getIconTargetUrl = (command: Command) =>
 /**
  * Resolves every query, asking the service worker only about the ones it has
  * not answered yet. Returns null until the answers for `queries` are in.
+ *
+ * When the service worker fails to answer (e.g. an outdated worker that does
+ * not know the command), the unanswered queries fall back to `false` so the
+ * menu still renders with the default (recolored) icons.
  */
 function usePreservedIconColors(queries: IconColorQuery[]): boolean[] | null {
   const [, setResolvedVersion] = useState(0)
+  const [failedQueries, setFailedQueries] = useState<IconColorQuery[] | null>(
+    null,
+  )
 
   useEffect(() => {
     let active = true
@@ -89,6 +96,9 @@ function usePreservedIconColors(queries: IconColorQuery[]): boolean[] | null {
             BgCommand.resolveIconColors,
             unknown,
           )
+          if (!Array.isArray(results)) {
+            throw new Error(`Unexpected icon color response: ${results}`)
+          }
           if (results.length !== unknown.length) {
             throw new Error(
               `Unexpected icon color response length: expected ${unknown.length}, got ${results.length}`,
@@ -103,6 +113,8 @@ function usePreservedIconColors(queries: IconColorQuery[]): boolean[] | null {
       }
       if (!active) return
       if (queries.some((q) => !answerCache.has(queryKey(q)))) {
+        // Render with the default colors rather than blocking the menu.
+        setFailedQueries(queries)
         return
       }
       setResolvedVersion((version) => version + 1)
@@ -115,10 +127,10 @@ function usePreservedIconColors(queries: IconColorQuery[]): boolean[] | null {
   }, [queries])
 
   if (queries.some((q) => !answerCache.has(queryKey(q)))) {
-    return null
+    if (failedQueries !== queries) return null
   }
 
-  return queries.map((q) => answerCache.get(queryKey(q)) as boolean)
+  return queries.map((q) => answerCache.get(queryKey(q)) ?? false)
 }
 
 /**
diff --git a/packages/extension/src/services/settings/importExport.test.ts b/packages/extension/src/services/settings/importExport.test.ts
new file mode 100644
index 00000000..80a6dfc9
--- /dev/null
+++ b/packages/extension/src/services/settings/importExport.test.ts
@@ -0,0 +1,540 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import {
+  BACKUP_TYPES,
+  BACKUP_STATUS,
+  INITIAL_BACKUP_STATUS,
+  getTimestamp,
+  resetSettings,
+  buildExportData,
+  exportSettings,
+  readSettingsFile,
+  importSettings,
+  checkBackupStatus,
+  getDefaultBackupType,
+  isCheckingBackups,
+  hasAvailableBackup,
+  getAvailableBackups,
+  restoreFromBackup,
+} from "./importExport"
+import type { BackupStatusMap, BackupEntry } from "./importExport"
+import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from "@/services/storage"
+import { Settings, migrate } from "@/services/settings/settings"
+import { enhancedSettings } from "@/services/settings/enhancedSettings"
+import { CACHE_SECTIONS } from "@/services/settings/settingsCache"
+import { APP_ID } from "@/const"
+
+const backupMocks = vi.hoisted(() => ({
+  legacy: { getLastBackupData: vi.fn(), restoreFromBackup: vi.fn() },
+  daily: { getLastBackupData: vi.fn(), restoreFromBackup: vi.fn() },
+  weekly: { getLastBackupData: vi.fn(), restoreFromBackup: vi.fn() },
+}))
+
+vi.mock("@/services/storage/backupManager", () => ({
+  LegacyBackupManager: vi.fn(() => backupMocks.legacy),
+  DailyBackupManager: vi.fn(() => backupMocks.daily),
+  WeeklyBackupManager: vi.fn(() => backupMocks.weekly),
+}))
+
+vi.mock("@/services/storage", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/services/storage")>()
+  return {
+    ...actual,
+    Storage: {
+      get: vi.fn(),
+      getCommands: vi.fn(),
+      setCommands: vi.fn(),
+    },
+  }
+})
+
+vi.mock("@/services/settings/settings", () => ({
+  Settings: { reset: vi.fn(), set: vi.fn() },
+  migrate: vi.fn(),
+}))
+
+vi.mock("@/services/settings/enhancedSettings", () => ({
+  enhancedSettings: { get: vi.fn(), getSection: vi.fn() },
+}))
+
+const mockStorage = vi.mocked(Storage)
+const mockSettings = vi.mocked(Settings)
+const mockMigrate = vi.mocked(migrate)
+const mockEnhancedSettings = vi.mocked(enhancedSettings)
+
+const entry = (
+  status: BackupEntry["status"],
+  info: BackupEntry["info"] = null,
+): BackupEntry => ({ status, info })
+
+const statusMap = (
+  legacy: BackupEntry["status"],
+  daily: BackupEntry["status"],
+  weekly: BackupEntry["status"],
+): BackupStatusMap => ({
+  [BACKUP_TYPES.LEGACY]: entry(legacy),
+  [BACKUP_TYPES.DAILY]: entry(daily),
+  [BACKUP_TYPES.WEEKLY]: entry(weekly),
+})
+
+const { AVAILABLE, NONE, CHECKING } = BACKUP_STATUS
+
+describe("importExport", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe("INITIAL_BACKUP_STATUS", () => {
+    it("IE-01: should be CHECKING for all backup types", () => {
+      expect(INITIAL_BACKUP_STATUS).toEqual(
+        statusMap(CHECKING, CHECKING, CHECKING),
+      )
+    })
+  })
+
+  describe("getTimestamp", () => {
+    it("IE-02: should format date as YYYYMMDD_HHmm with zero padding", () => {
+      expect(getTimestamp(new Date(2024, 0, 5, 3, 7))).toBe("20240105_0307")
+    })
+
+    it("IE-03: should format two-digit values as is", () => {
+      expect(getTimestamp(new Date(2024, 11, 31, 23, 59))).toBe("20241231_2359")
+    })
+  })
+
+  describe("resetSettings", () => {
+    it("IE-04: should call Settings.reset", async () => {
+      mockSettings.reset.mockResolvedValue(undefined as any)
+      await resetSettings()
+      expect(mockSettings.reset).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("buildExportData", () => {
+    const setup = (commands: any[], caches: any) => {
+      mockStorage.get.mockImplementation(async (key: any) => {
+        if (key === STORAGE_KEY.USER) return { folders: [] }
+        if (key === STORAGE_KEY.SHORTCUTS) return { shortcuts: [] }
+        return undefined
+      })
+      mockStorage.getCommands.mockResolvedValue(commands)
+      mockEnhancedSettings.getSection.mockResolvedValue(caches)
+    }
+
+    it("IE-05: should merge user settings, commands and shortcuts", async () => {
+      const commands = [{ id: "1", iconUrl: "" }]
+      setup(commands, { images: {} })
+
+      const data = await buildExportData()
+
+      expect(data).toEqual({
+        folders: [],
+        commands,
+        shortcuts: { shortcuts: [] },
+      })
+      expect(mockEnhancedSettings.getSection).toHaveBeenCalledWith(
+        CACHE_SECTIONS.CACHES,
+        true,
+      )
+    })
+
+    it("IE-06: should replace cache key iconUrl with cached data url", async () => {
+      setup([{ id: "1", iconUrl: "cache-key" }], {
+        images: { "cache-key": "data:image/png;base64,xxx" },
+      })
+
+      const data = await buildExportData()
+
+      expect(data.commands[0].iconUrl).toBe("data:image/png;base64,xxx")
+    })
+
+    it("IE-07: should keep base64 / url / uncached iconUrl as is", async () => {
+      setup(
+        [
+          { id: "1", iconUrl: "data:image/png;base64,aaa" },
+          { id: "2", iconUrl: "https://example.com/icon.png" },
+          { id: "3", iconUrl: "unknown-key" },
+          { id: "4" },
+        ],
+        {
+          images: {
+            "data:image/png;base64,aaa": "replaced",
+            "https://example.com/icon.png": "replaced",
+          },
+        },
+      )
+
+      const data = await buildExportData()
+
+      expect(data.commands.map((c) => c.iconUrl)).toEqual([
+        "data:image/png;base64,aaa",
+        "https://example.com/icon.png",
+        "unknown-key",
+        undefined,
+      ])
+    })
+
+    it("IE-08: should not throw when caches is undefined", async () => {
+      setup([{ id: "1", iconUrl: "cache-key" }], undefined)
+
+      const data = await buildExportData()
+
+      expect(data.commands[0].iconUrl).toBe("cache-key")
+    })
+  })
+
+  describe("exportSettings", () => {
+    let createObjectURL: ReturnType<typeof vi.fn>
+    let revokeObjectURL: ReturnType<typeof vi.fn>
+    let clickSpy: ReturnType<typeof vi.spyOn>
+
+    beforeEach(() => {
+      vi.useFakeTimers({ toFake: ["Date"] })
+      vi.setSystemTime(new Date(2024, 0, 5, 3, 7))
+      createObjectURL = vi.fn(() => "blob:mock")
+      revokeObjectURL = vi.fn()
+      URL.createObjectURL = createObjectURL as any
+      URL.revokeObjectURL = revokeObjectURL as any
+      clickSpy = vi
+        .spyOn(HTMLAnchorElement.prototype, "click")
+        .mockImplementation(() => {})
+
+      mockStorage.get.mockImplementation(async (key: any) =>
+        key === STORAGE_KEY.USER ? { folders: [] } : { shortcuts: [] },
+      )
+      mockStorage.getCommands.mockResolvedValue([])
+      mockEnhancedSettings.getSection.mockResolvedValue({ images: {} })
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+      clickSpy.mockRestore()
+    })
+
+    it("IE-09: should download a json file of export data", async () => {
+      await exportSettings()
+
+      expect(clickSpy).toHaveBeenCalledTimes(1)
+      const clicked = clickSpy.mock.contexts[0] as HTMLAnchorElement
+      expect(clicked.download).toBe(`${APP_ID}_20240105_0307.json`)
+      expect(clicked.href).toBe("blob:mock")
+
+      const blob = createObjectURL.mock.calls[0][0] as Blob
+      // jsdom's Blob does not implement text(), so read it via FileReader.
+      const text = await new Promise<string>((resolve) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(reader.result as string)
+        reader.readAsText(blob)
+      })
+      expect(JSON.parse(text)).toEqual({
+        folders: [],
+        commands: [],
+        shortcuts: { shortcuts: [] },
+      })
+      expect(revokeObjectURL).toHaveBeenCalledWith("blob:mock")
+    })
+
+    it("IE-10: should remove the anchor element after download", async () => {
+      await exportSettings()
+      expect(document.querySelectorAll("a").length).toBe(0)
+    })
+  })
+
+  describe("readSettingsFile", () => {
+    it("IE-11: should parse json file content", async () => {
+      const json = { folders: [], commands: [{ id: "1" }] }
+      const file = new File([JSON.stringify(json)], "settings.json", {
+        type: "application/json",
+      })
+
+      await expect(readSettingsFile(file)).resolves.toEqual(json)
+    })
+
+    it("IE-12: should reject when file content is invalid json", async () => {
+      const file = new File(["{ invalid"], "settings.json")
+
+      await expect(readSettingsFile(file)).rejects.toBeInstanceOf(SyntaxError)
+    })
+
+    it("IE-13: should reject when FileReader fails", async () => {
+      const error = new Error("read error")
+      const readSpy = vi
+        .spyOn(FileReader.prototype, "readAsText")
+        .mockImplementation(function (this: FileReader) {
+          Object.defineProperty(this, "error", { value: error })
+          this.onerror?.(new ProgressEvent("error") as any)
+        })
+
+      await expect(readSettingsFile(new File([""], "a.json"))).rejects.toBe(
+        error,
+      )
+      readSpy.mockRestore()
+    })
+  })
+
+  describe("importSettings", () => {
+    beforeEach(() => {
+      mockMigrate.mockImplementation(async (data: any) => ({
+        ...data,
+        migrated: true,
+      }))
+      mockSettings.set.mockResolvedValue(true as any)
+    })
+
+    it("IE-14: should keep local-only states and reset stars", async () => {
+      mockEnhancedSettings.get.mockResolvedValue({
+        commandExecutionCount: 10,
+        hasShownReviewRequest: true,
+        hasDismissedPromptHistoryBanner: true,
+        hasShownHubShareToast: true,
+        hasShownOnboarding: true,
+      } as any)
+      const importJson = {
+        folders: [{ id: "f1" }],
+        commandExecutionCount: 999,
+        hasShownOnboarding: false,
+        stars: [{ id: "s1" }],
+      } as any
+
+      await importSettings(importJson)
+
+      const expected = {
+        folders: [{ id: "f1" }],
+        commandExecutionCount: 10,
+        hasShownReviewRequest: true,
+        hasDismissedPromptHistoryBanner: true,
+        hasShownHubShareToast: true,
+        hasShownOnboarding: true,
+        stars: [],
+      }
+      expect(mockMigrate).toHaveBeenCalledWith(expected)
+      expect(mockSettings.set).toHaveBeenCalledWith({
+        ...expected,
+        migrated: true,
+      })
+    })
+
+    it("IE-15: should use default values when local states are undefined", async () => {
+      mockEnhancedSettings.get.mockResolvedValue({} as any)
+
+      await importSettings({ folders: [] } as any)
+
+      expect(mockMigrate).toHaveBeenCalledWith({
+        folders: [],
+        commandExecutionCount: 0,
+        hasShownReviewRequest: false,
+        hasDismissedPromptHistoryBanner: false,
+        hasShownHubShareToast: false,
+        hasShownOnboarding: false,
+        stars: [],
+      })
+    })
+
+    it("IE-16: should propagate migrate error without saving", async () => {
+      mockEnhancedSettings.get.mockResolvedValue({} as any)
+      mockMigrate.mockRejectedValue(new Error("migrate failed"))
+
+      await expect(importSettings({} as any)).rejects.toThrow("migrate failed")
+      expect(mockSettings.set).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("checkBackupStatus", () => {
+    const backup = (commandCount: number, folders?: unknown) => ({
+      version: "1.0.0",
+      timestamp: 1700000000000,
+      commands: Array.from({ length: commandCount }, (_, i) => ({
+        id: `${i}`,
+      })),
+      folders,
+    })
+
+    it("IE-17: should return AVAILABLE with info for existing backups", async () => {
+      mockStorage.get.mockResolvedValue(backup(3, [{ id: "f1" }]))
+      backupMocks.daily.getLastBackupData.mockResolvedValue(backup(2, []))
+      backupMocks.weekly.getLastBackupData.mockResolvedValue(backup(1))
+
+      const result = await checkBackupStatus()
+
+      expect(mockStorage.get).toHaveBeenCalledWith(
+        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+      )
+      expect(result).toEqual({
+        [BACKUP_TYPES.LEGACY]: entry(AVAILABLE, {
+          timestamp: 1700000000000,
+          commandCount: 3,
+          folderCount: 1,
+        }),
+        [BACKUP_TYPES.DAILY]: entry(AVAILABLE, {
+          timestamp: 1700000000000,
+          commandCount: 2,
+          folderCount: 0,
+        }),
+        [BACKUP_TYPES.WEEKLY]: entry(AVAILABLE, {
+          timestamp: 1700000000000,
+          commandCount: 1,
+          folderCount: 0,
+        }),
+      })
+    })
+
+    it("IE-18: should return NONE for missing or invalid backups", async () => {
+      mockStorage.get.mockResolvedValue({ commands: "invalid" })
+      backupMocks.daily.getLastBackupData.mockResolvedValue(null)
+      backupMocks.weekly.getLastBackupData.mockResolvedValue(undefined)
+
+      const result = await checkBackupStatus()
+
+      expect(result).toEqual(statusMap(NONE, NONE, NONE))
+    })
+
+    it("IE-19: should treat empty commands array as NONE", async () => {
+      mockStorage.get.mockResolvedValue(backup(0, [{ id: "f1" }]))
+      backupMocks.daily.getLastBackupData.mockResolvedValue(backup(0))
+      backupMocks.weekly.getLastBackupData.mockResolvedValue(backup(1))
+
+      const result = await checkBackupStatus()
+
+      expect(result[BACKUP_TYPES.LEGACY]).toEqual(entry(NONE))
+      expect(result[BACKUP_TYPES.DAILY]).toEqual(entry(NONE))
+      expect(result[BACKUP_TYPES.WEEKLY].status).toBe(AVAILABLE)
+      expect(getDefaultBackupType(result)).toBe(BACKUP_TYPES.WEEKLY)
+    })
+
+    it("IE-20: should return NONE for all when an error occurs", async () => {
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+      mockStorage.get.mockRejectedValue(new Error("storage error"))
+
+      const result = await checkBackupStatus()
+
+      expect(result).toEqual(statusMap(NONE, NONE, NONE))
+      expect(consoleSpy).toHaveBeenCalled()
+      consoleSpy.mockRestore()
+    })
+  })
+
+  describe("getDefaultBackupType", () => {
+    it.each([
+      [statusMap(AVAILABLE, AVAILABLE, AVAILABLE), BACKUP_TYPES.LEGACY],
+      [statusMap(NONE, AVAILABLE, AVAILABLE), BACKUP_TYPES.DAILY],
+      [statusMap(NONE, NONE, AVAILABLE), BACKUP_TYPES.WEEKLY],
+      [statusMap(NONE, NONE, NONE), undefined],
+      [statusMap(CHECKING, CHECKING, CHECKING), undefined],
+    ])("IE-21: should pick the first available type (%#)", (map, expected) => {
+      expect(getDefaultBackupType(map)).toBe(expected)
+    })
+  })
+
+  describe("isCheckingBackups", () => {
+    it("IE-22: should be true only when all backups are CHECKING", () => {
+      expect(isCheckingBackups(statusMap(CHECKING, CHECKING, CHECKING))).toBe(
+        true,
+      )
+      expect(isCheckingBackups(statusMap(CHECKING, NONE, CHECKING))).toBe(false)
+      expect(isCheckingBackups(statusMap(NONE, NONE, NONE))).toBe(false)
+    })
+  })
+
+  describe("hasAvailableBackup", () => {
+    it("IE-23: should be true when any backup is AVAILABLE", () => {
+      expect(hasAvailableBackup(statusMap(NONE, NONE, AVAILABLE))).toBe(true)
+      expect(hasAvailableBackup(statusMap(NONE, NONE, NONE))).toBe(false)
+      expect(hasAvailableBackup(statusMap(CHECKING, CHECKING, CHECKING))).toBe(
+        false,
+      )
+    })
+  })
+
+  describe("getAvailableBackups", () => {
+    it("IE-24: should return only available backups with legacy at the bottom", () => {
+      const result = getAvailableBackups(
+        statusMap(AVAILABLE, AVAILABLE, AVAILABLE),
+      )
+      expect(result.map(([type]) => type)).toEqual([
+        BACKUP_TYPES.DAILY,
+        BACKUP_TYPES.WEEKLY,
+        BACKUP_TYPES.LEGACY,
+      ])
+    })
+
+    it("IE-25: should exclude unavailable backups", () => {
+      const result = getAvailableBackups(statusMap(AVAILABLE, NONE, CHECKING))
+      expect(result).toEqual([[BACKUP_TYPES.LEGACY, entry(AVAILABLE)]])
+    })
+
+    it("IE-26: should return empty array when nothing is available", () => {
+      expect(getAvailableBackups(statusMap(NONE, NONE, NONE))).toEqual([])
+    })
+  })
+
+  describe("restoreFromBackup", () => {
+    const commands = [{ id: "c1" }, { id: "c2" }]
+    const folders = [{ id: "f1" }]
+
+    beforeEach(() => {
+      mockEnhancedSettings.get.mockResolvedValue({
+        folders: [{ id: "old" }],
+        other: "value",
+      } as any)
+      mockSettings.set.mockResolvedValue(true as any)
+      mockStorage.setCommands.mockResolvedValue(true as any)
+    })
+
+    it.each([
+      [BACKUP_TYPES.LEGACY, backupMocks.legacy],
+      [BACKUP_TYPES.DAILY, backupMocks.daily],
+      [BACKUP_TYPES.WEEKLY, backupMocks.weekly],
+    ] as const)(
+      "IE-27: should restore from the %s backup manager",
+      async (type, manager) => {
+        manager.restoreFromBackup.mockResolvedValue({ commands, folders })
+
+        const result = await restoreFromBackup(type)
+
+        expect(result).toBe(true)
+        expect(manager.restoreFromBackup).toHaveBeenCalledTimes(1)
+        expect(mockSettings.set).toHaveBeenCalledWith({
+          folders,
+          other: "value",
+        })
+        expect(mockStorage.setCommands).toHaveBeenCalledWith(commands)
+      },
+    )
+
+    it("IE-28: should not update folders when backup has no folders", async () => {
+      backupMocks.daily.restoreFromBackup.mockResolvedValue({
+        commands,
+        folders: [],
+      })
+
+      const result = await restoreFromBackup(BACKUP_TYPES.DAILY)
+
+      expect(result).toBe(true)
+      expect(mockSettings.set).not.toHaveBeenCalled()
+      expect(mockStorage.setCommands).toHaveBeenCalledWith(commands)
+    })
+
+    it("IE-29: should return false without saving commands when backup has no commands", async () => {
+      backupMocks.weekly.restoreFromBackup.mockResolvedValue({
+        commands: [],
+        folders: [],
+      })
+
+      const result = await restoreFromBackup(BACKUP_TYPES.WEEKLY)
+
+      expect(result).toBe(false)
+      expect(mockStorage.setCommands).not.toHaveBeenCalled()
+    })
+
+    it("IE-30: should propagate errors", async () => {
+      backupMocks.legacy.restoreFromBackup.mockResolvedValue({
+        commands,
+        folders: [],
+      })
+      mockStorage.setCommands.mockRejectedValue(new Error("save failed"))
+
+      await expect(restoreFromBackup(BACKUP_TYPES.LEGACY)).rejects.toThrow(
+        "save failed",
+      )
+    })
+  })
+})
diff --git a/packages/extension/src/services/settings/importExport.ts b/packages/extension/src/services/settings/importExport.ts
new file mode 100644
index 00000000..84afbcb6
--- /dev/null
+++ b/packages/extension/src/services/settings/importExport.ts
@@ -0,0 +1,267 @@
+import type { UserSettings, Caches, ShortcutSettings } from "@/types"
+import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from "@/services/storage"
+import {
+  DailyBackupManager,
+  WeeklyBackupManager,
+  LegacyBackupManager,
+} from "@/services/storage/backupManager"
+import type {
+  BackupData,
+  BaseBackupManager,
+} from "@/services/storage/backupManager"
+import { Settings, migrate } from "@/services/settings/settings"
+import { enhancedSettings } from "@/services/settings/enhancedSettings"
+import { CACHE_SECTIONS } from "@/services/settings/settingsCache"
+import { isBase64, isUrl } from "@/lib/utils"
+import { APP_ID } from "@/const"
+
+// Backup type constants
+export const BACKUP_TYPES = {
+  LEGACY: "legacy",
+  DAILY: "daily",
+  WEEKLY: "weekly",
+} as const
+
+// Backup status constants
+export const BACKUP_STATUS = {
+  CHECKING: "checking",
+  AVAILABLE: "available",
+  NONE: "none",
+} as const
+
+export type BackupType = (typeof BACKUP_TYPES)[keyof typeof BACKUP_TYPES]
+export type BackupStatus = (typeof BACKUP_STATUS)[keyof typeof BACKUP_STATUS]
+
+export type BackupInfo = {
+  timestamp: number
+  commandCount: number
+  folderCount?: number
+}
+
+export type BackupEntry = {
+  status: BackupStatus
+  info: BackupInfo | null
+}
+
+export type BackupStatusMap = Record<BackupType, BackupEntry>
+
+// Order used to pick the default backup selection.
+const BACKUP_PRIORITY: BackupType[] = [
+  BACKUP_TYPES.LEGACY,
+  BACKUP_TYPES.DAILY,
+  BACKUP_TYPES.WEEKLY,
+]
+
+const createBackupStatusMap = (status: BackupStatus): BackupStatusMap => ({
+  [BACKUP_TYPES.LEGACY]: { status, info: null },
+  [BACKUP_TYPES.DAILY]: { status, info: null },
+  [BACKUP_TYPES.WEEKLY]: { status, info: null },
+})
+
+export const INITIAL_BACKUP_STATUS: BackupStatusMap = createBackupStatusMap(
+  BACKUP_STATUS.CHECKING,
+)
+
+export function getTimestamp(date = new Date()): string {
+  const year = date.getFullYear()
+  const month = (date.getMonth() + 1).toString().padStart(2, "0")
+  const day = date.getDate().toString().padStart(2, "0")
+  const hours = date.getHours().toString().padStart(2, "0")
+  const minutes = date.getMinutes().toString().padStart(2, "0")
+  return `${year}${month}${day}_${hours}${minutes}`
+}
+
+/**
+ * Reset all settings to default.
+ */
+export async function resetSettings(): Promise<void> {
+  await Settings.reset()
+}
+
+/**
+ * Build the settings data to be exported.
+ */
+export async function buildExportData(): Promise<UserSettings> {
+  const data = await Storage.get<UserSettings>(STORAGE_KEY.USER)
+  data.commands = await Storage.getCommands()
+  data.shortcuts = await Storage.get<ShortcutSettings>(STORAGE_KEY.SHORTCUTS)
+
+  // for back compatibility
+  // cache key to image data url
+  const caches = (await enhancedSettings.getSection(
+    CACHE_SECTIONS.CACHES,
+    true,
+  )) as Caches
+  for (const c of data.commands) {
+    if (!c.iconUrl) continue
+    if (isBase64(c.iconUrl) || isUrl(c.iconUrl)) continue
+    if (caches?.images?.[c.iconUrl]) {
+      c.iconUrl = caches.images[c.iconUrl]
+    }
+  }
+  return data
+}
+
+/**
+ * Export settings and download them as a json file.
+ */
+export async function exportSettings(): Promise<void> {
+  const data = await buildExportData()
+  const text = JSON.stringify(data, null, 2)
+  const blob = new Blob([text], { type: "text/plain" })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement("a")
+  document.body.appendChild(a)
+  a.download = `${APP_ID}_${getTimestamp()}.json`
+  a.href = url
+  a.click()
+  a.remove()
+  URL.revokeObjectURL(url)
+}
+
+/**
+ * Read a settings json file.
+ */
+export function readSettingsFile(file: File): Promise<UserSettings> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (e.target == null) return
+      try {
+        resolve(JSON.parse(e.target.result as string))
+      } catch (error) {
+        reject(error)
+      }
+    }
+    reader.onerror = () => reject(reader.error)
+    reader.readAsText(file)
+  })
+}
+
+/**
+ * Import settings, keeping the user's local-only states.
+ */
+export async function importSettings(importJson: UserSettings): Promise<void> {
+  const {
+    commandExecutionCount = 0,
+    hasShownReviewRequest = false,
+    hasDismissedPromptHistoryBanner = false,
+    hasShownHubShareToast = false,
+    hasShownOnboarding = false,
+  } = await enhancedSettings.get()
+  const data = await migrate({
+    ...importJson,
+    commandExecutionCount,
+    hasShownReviewRequest,
+    hasDismissedPromptHistoryBanner,
+    hasShownHubShareToast,
+    hasShownOnboarding,
+    stars: [],
+  })
+  await Settings.set(data)
+}
+
+const toBackupEntry = (backup: BackupData | null | undefined): BackupEntry => {
+  // A backup without commands cannot be restored, so treat it as NONE.
+  if (backup && Array.isArray(backup.commands) && backup.commands.length > 0) {
+    return {
+      status: BACKUP_STATUS.AVAILABLE,
+      info: {
+        timestamp: backup.timestamp,
+        commandCount: backup.commands.length,
+        folderCount: Array.isArray(backup.folders) ? backup.folders.length : 0,
+      },
+    }
+  }
+  return { status: BACKUP_STATUS.NONE, info: null }
+}
+
+/**
+ * Check the status of each backup.
+ */
+export async function checkBackupStatus(): Promise<BackupStatusMap> {
+  try {
+    const legacyBackup = await Storage.get<BackupData>(
+      LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+    )
+    const dailyBackup = await new DailyBackupManager().getLastBackupData()
+    const weeklyBackup = await new WeeklyBackupManager().getLastBackupData()
+    return {
+      [BACKUP_TYPES.LEGACY]: toBackupEntry(legacyBackup),
+      [BACKUP_TYPES.DAILY]: toBackupEntry(dailyBackup),
+      [BACKUP_TYPES.WEEKLY]: toBackupEntry(weeklyBackup),
+    }
+  } catch (error) {
+    console.error("Failed to check backup status:", error)
+    return createBackupStatusMap(BACKUP_STATUS.NONE)
+  }
+}
+
+/**
+ * Get the first available backup type, or undefined if none is available.
+ */
+export function getDefaultBackupType(
+  statusMap: BackupStatusMap,
+): BackupType | undefined {
+  return BACKUP_PRIORITY.find(
+    (type) => statusMap[type].status === BACKUP_STATUS.AVAILABLE,
+  )
+}
+
+export function isCheckingBackups(statusMap: BackupStatusMap): boolean {
+  return Object.values(statusMap).every(
+    (backup) => backup.status === BACKUP_STATUS.CHECKING,
+  )
+}
+
+export function hasAvailableBackup(statusMap: BackupStatusMap): boolean {
+  return Object.values(statusMap).some(
+    (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
+  )
+}
+
+/**
+ * Get available backups, with legacy placed at the bottom.
+ */
+export function getAvailableBackups(
+  statusMap: BackupStatusMap,
+): Array<[BackupType, BackupEntry]> {
+  return (Object.entries(statusMap) as Array<[BackupType, BackupEntry]>)
+    .filter(([, backup]) => backup.status === BACKUP_STATUS.AVAILABLE)
+    .sort(([typeA], [typeB]) => {
+      if (typeA === BACKUP_TYPES.LEGACY) return 1
+      if (typeB === BACKUP_TYPES.LEGACY) return -1
+      return 0
+    })
+}
+
+const createBackupManager = (type: BackupType): BaseBackupManager => {
+  switch (type) {
+    case BACKUP_TYPES.LEGACY:
+      return new LegacyBackupManager()
+    case BACKUP_TYPES.DAILY:
+      return new DailyBackupManager()
+    case BACKUP_TYPES.WEEKLY:
+      return new WeeklyBackupManager()
+  }
+}
+
+/**
+ * Restore commands and folders from the specified backup.
+ * @returns true if commands were restored, false if the backup has no commands.
+ */
+export async function restoreFromBackup(type: BackupType): Promise<boolean> {
+  const data = await createBackupManager(type).restoreFromBackup()
+
+  if (data.folders && data.folders.length > 0) {
+    const currentSettings = await enhancedSettings.get()
+    await Settings.set({
+      ...currentSettings,
+      folders: data.folders,
+    })
+  }
+
+  if (data.commands.length === 0) return false
+  await Storage.setCommands(data.commands)
+  return true
+}
diff --git a/packages/extension/src/services/storage/index.test.ts b/packages/extension/src/services/storage/index.test.ts
index 0292ca88..5c42e31c 100644
--- a/packages/extension/src/services/storage/index.test.ts
+++ b/packages/extension/src/services/storage/index.test.ts
@@ -2,9 +2,7 @@ import { beforeEach, afterEach, describe, it, expect, vi } from "vitest"
 
 // Mock Chrome API
 const mockChromeStorageSync = {
-  set: vi.fn().mockImplementation((_data, callback) => {
-    callback?.()
-  }),
+  set: vi.fn().mockResolvedValue(undefined),
 }
 
 const mockChromeStorageLocal = {
@@ -61,10 +59,7 @@ describe("debouncedSyncSet", () => {
       await promise
 
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        testData,
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(testData)
     })
 
     it("DS-02: Debounce with multiple consecutive calls", async () => {
@@ -78,10 +73,11 @@ describe("debouncedSyncSet", () => {
 
       // Verify it's called only once
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        { key1: "value1", key2: "value2", key3: "value3" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({
+        key1: "value1",
+        key2: "value2",
+        key3: "value3",
+      })
     })
 
     it("DS-03: Data merge operation", async () => {
@@ -95,10 +91,10 @@ describe("debouncedSyncSet", () => {
       vi.advanceTimersByTime(10)
       await Promise.all([promise1, promise2, promise3])
 
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        { key1: "updated_value1", key2: "value2" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({
+        key1: "updated_value1",
+        key2: "value2",
+      })
     })
   })
 
@@ -118,9 +114,8 @@ describe("debouncedSyncSet", () => {
 
     it("DS-05: Error handling", async () => {
       const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
-
-      // Set Chrome runtime error
-      mockChromeRuntime.lastError = { message: "Storage error" }
+      const error = new Error("Storage error")
+      mockChromeStorageSync.set.mockRejectedValueOnce(error)
 
       const promise = debouncedSyncSet({ key1: "value1" })
       vi.advanceTimersByTime(10)
@@ -129,7 +124,29 @@ describe("debouncedSyncSet", () => {
       await expect(promise).resolves.toBeUndefined()
 
       // Verify error is logged to console
-      expect(consoleSpy).toHaveBeenCalledWith({ message: "Storage error" })
+      expect(consoleSpy).toHaveBeenCalledWith(error)
+
+      consoleSpy.mockRestore()
+    })
+
+    it("DS-13: Keep writing after a failed write", async () => {
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+      mockChromeStorageSync.set.mockRejectedValueOnce(
+        new Error("Storage error"),
+      )
+
+      const promise1 = debouncedSyncSet({ key1: "value1" })
+      vi.advanceTimersByTime(10)
+      await promise1
+
+      const promise2 = debouncedSyncSet({ key2: "value2" })
+      vi.advanceTimersByTime(10)
+      await promise2
+
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(2, {
+        key2: "value2",
+      })
 
       consoleSpy.mockRestore()
     })
@@ -149,10 +166,11 @@ describe("debouncedSyncSet", () => {
       // Verify all Promises resolve successfully
       expect(promises).toEqual([undefined, undefined, undefined])
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        { key1: "value1", key2: "value2", key3: "value3" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({
+        key1: "value1",
+        key2: "value2",
+        key3: "value3",
+      })
     })
 
     it("DS-07: Internal state cleanup", async () => {
@@ -167,11 +185,9 @@ describe("debouncedSyncSet", () => {
       await promise2
 
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
-      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(
-        2,
-        { key2: "value2" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(2, {
+        key2: "value2",
+      })
     })
   })
 
@@ -182,10 +198,7 @@ describe("debouncedSyncSet", () => {
       vi.advanceTimersByTime(10)
       await promise
 
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        {},
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({})
     })
 
     it("DS-09: Additional calls during timeout", async () => {
@@ -201,10 +214,93 @@ describe("debouncedSyncSet", () => {
 
       // Verify called only once and both data are merged
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        { key1: "value1", key2: "value2" },
-        expect.any(Function),
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({
+        key1: "value1",
+        key2: "value2",
+      })
+    })
+  })
+
+  describe("Calls during an in-flight write", () => {
+    // Make sync.set stay pending until the test completes it manually.
+    const deferSyncSet = () => {
+      const callbacks: (() => void)[] = []
+      mockChromeStorageSync.set.mockImplementation(
+        () => new Promise<void>((resolve) => callbacks.push(resolve)),
       )
+      return callbacks
+    }
+
+    afterEach(() => {
+      mockChromeStorageSync.set.mockResolvedValue(undefined)
+    })
+
+    it("DS-10: Keep data added during a write for the next write", async () => {
+      const callbacks = deferSyncSet()
+
+      const promise1 = debouncedSyncSet({ key1: "value1" })
+      await vi.advanceTimersByTimeAsync(10)
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
+
+      // Add data while the first write is in flight
+      const promise2 = debouncedSyncSet({ key2: "value2" })
+      callbacks[0]()
+      await promise1
+
+      await vi.advanceTimersByTimeAsync(10)
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(2, {
+        key2: "value2",
+      })
+
+      callbacks[1]()
+      await promise2
+    })
+
+    it("DS-11: Do not resolve a call until its own data is written", async () => {
+      const callbacks = deferSyncSet()
+
+      const promise1 = debouncedSyncSet({ key1: "value1" })
+      await vi.advanceTimersByTimeAsync(10)
+
+      let resolved2 = false
+      const promise2 = debouncedSyncSet({ key2: "value2" }).then(() => {
+        resolved2 = true
+      })
+
+      // Completing the first write must not resolve the second call
+      callbacks[0]()
+      await promise1
+      await vi.advanceTimersByTimeAsync(0)
+      expect(resolved2).toBe(false)
+
+      await vi.advanceTimersByTimeAsync(10)
+      callbacks[1]()
+      await promise2
+      expect(resolved2).toBe(true)
+    })
+
+    it("DS-12: Start the next write only after the previous one completes", async () => {
+      const callbacks = deferSyncSet()
+
+      const promise1 = debouncedSyncSet({ key1: "value1" })
+      await vi.advanceTimersByTimeAsync(10)
+
+      // The next batch's timer fires while the first write is still in flight
+      const promise2 = debouncedSyncSet({ key1: "value2" })
+      await vi.advanceTimersByTimeAsync(10)
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
+
+      callbacks[0]()
+      await promise1
+      await vi.advanceTimersByTimeAsync(0)
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(2, {
+        key1: "value2",
+      })
+
+      callbacks[1]()
+      await promise2
     })
   })
 })
diff --git a/packages/extension/src/services/storage/index.ts b/packages/extension/src/services/storage/index.ts
index b8e9b6a8..d4b58281 100644
--- a/packages/extension/src/services/storage/index.ts
+++ b/packages/extension/src/services/storage/index.ts
@@ -11,15 +11,45 @@ import {
 
 const SYNC_DEBOUNCE_DELAY = 10
 
-let syncSetTimeout: NodeJS.Timeout | null
+let syncSetTimeout: NodeJS.Timeout | null = null
 let syncSetResolves: (() => void)[] = []
-const syncSetData = new Map<string, unknown>()
+let syncSetData = new Map<string, unknown>()
+// Serializes writes so that a later batch never lands before an earlier one.
+let syncSetLastWrite: Promise<void> = Promise.resolve()
 
 export const cmdSyncKey = (idx: number): CMD_KEY => `${CMD_PREFIX}${idx}`
 
 export const cmdLocalKey = (idx: number): CMD_LOCAL_KEY =>
   `${CMD_PREFIX}local-${idx}`
 
+const writeSyncBatch = async (
+  data: Record<string, unknown>,
+  resolves: (() => void)[],
+) => {
+  try {
+    await chrome.storage.sync.set(data)
+  } catch (error) {
+    console.error(error)
+  } finally {
+    resolves.forEach((res) => res())
+  }
+}
+
+const flushSyncSet = () => {
+  // Detach the current batch so that data added during the write
+  // is kept for the next batch instead of being cleared.
+  const dataToSet = Object.fromEntries(syncSetData)
+  const resolves = syncSetResolves
+  syncSetData = new Map()
+  syncSetResolves = []
+  syncSetTimeout = null
+
+  // writeSyncBatch never rejects, so the chain keeps running after a failure.
+  syncSetLastWrite = syncSetLastWrite.then(() =>
+    writeSyncBatch(dataToSet, resolves),
+  )
+}
+
 export const debouncedSyncSet = (
   data: Record<string, unknown>,
 ): Promise<void> => {
@@ -32,19 +62,8 @@ export const debouncedSyncSet = (
       syncSetData.set(key, value)
     })
 
-    syncSetTimeout = setTimeout(async () => {
-      const dataToSet = Object.fromEntries(syncSetData)
-      chrome.storage.sync.set(dataToSet, () => {
-        if (chrome.runtime.lastError != null) {
-          console.error(chrome.runtime.lastError)
-        }
-        syncSetData.clear()
-        syncSetTimeout = null
-        syncSetResolves.forEach((res) => res())
-        syncSetResolves = []
-      })
-    }, SYNC_DEBOUNCE_DELAY)
     syncSetResolves.push(resolve)
+    syncSetTimeout = setTimeout(flushSyncSet, SYNC_DEBOUNCE_DELAY)
   })
 }