diff --git a/web/src/lib/components/admin-page/settings/admin-settings.svelte b/web/src/lib/components/admin-page/settings/admin-settings.svelte
index 8f819f1eb3..79ed46947d 100644
--- a/web/src/lib/components/admin-page/settings/admin-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/admin-settings.svelte
@@ -23,7 +23,7 @@
     await (detail.default ? resetToDefault(detail.configKeys) : reset(detail.configKeys));
   };
 
-  const handleSave = async (update: Partial<SystemConfigDto>) => {
+  export const handleSave = async (update: Partial<SystemConfigDto>) => {
     try {
       const newConfig = await updateConfig({
         systemConfigDto: {
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index cb80a9e0d6..fee111dd0e 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -23,14 +23,16 @@
   import { featureFlags } from '$lib/stores/server-config.store';
   import { copyToClipboard } from '$lib/utils';
   import { downloadBlob } from '$lib/utils/asset-utils';
-  import { mdiAlert, mdiContentCopy, mdiDownload } from '@mdi/js';
+  import { mdiAlert, mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
   import type { PageData } from './$types';
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
   import { QueryParameter } from '$lib/constants';
+  import type { SystemConfigDto } from '@immich/sdk';
 
   export let data: PageData;
 
   let config = data.configs;
+  let handleSave: (update: Partial<SystemConfigDto>) => Promise<void>;
 
   type Settings =
     | typeof JobSettings
@@ -58,6 +60,20 @@
     setTimeout(() => downloadManager.clear(downloadKey), 5000);
   };
 
+  let inputElement: HTMLInputElement;
+  const uploadConfig = (e: Event) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (!file) {
+      return;
+    }
+    const reader = async () => {
+      const text = await file.text();
+      const newConfig = JSON.parse(text);
+      await handleSave(newConfig);
+    };
+    reader().catch((error) => console.error('Error handling JSON config upload', error));
+  };
+
   const settings: Array<{
     item: Settings;
     title: string;
@@ -157,6 +173,8 @@
   ];
 </script>
 
+<input bind:this={inputElement} type="file" accept=".json" style="display: none" on:change={uploadConfig} />
+
 <div class="h-svh flex flex-col overflow-hidden">
   {#if $featureFlags.configFile}
     <div class="flex flex-row items-center gap-2 bg-gray-100 p-3 dark:bg-gray-800">
@@ -181,9 +199,15 @@
           Export as JSON
         </div>
       </LinkButton>
+      <LinkButton on:click={() => inputElement?.click()}>
+        <div class="flex place-items-center gap-2 text-sm">
+          <Icon path={mdiUpload} size="18" />
+          Import from JSON
+        </div>
+      </LinkButton>
     </div>
 
-    <AdminSettings bind:config let:handleReset let:handleSave let:savedConfig let:defaultConfig>
+    <AdminSettings bind:config let:handleReset bind:handleSave let:savedConfig let:defaultConfig>
       <section id="setting-content" class="flex place-content-center sm:mx-4">
         <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
           <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>