diff --git a/web/src/routes/admin/system-settings/+page.server.ts b/web/src/routes/admin/system-settings/+page.server.ts
index 65a9485de..9616a4a80 100644
--- a/web/src/routes/admin/system-settings/+page.server.ts
+++ b/web/src/routes/admin/system-settings/+page.server.ts
@@ -1,8 +1,9 @@
 import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
+import type { SystemConfigDto, SystemConfigTemplateStorageOptionDto } from '@api';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load: PageServerLoad = async ({ parent, locals }) => {
   const { user } = await parent();
 
   if (!user) {
@@ -11,8 +12,17 @@ export const load: PageServerLoad = async ({ parent }) => {
     throw redirect(302, AppRoute.PHOTOS);
   }
 
+  const config: SystemConfigDto = await locals.api.systemConfigApi.getConfig().then((res) => res.data);
+  const defaultConfig: SystemConfigDto = await locals.api.systemConfigApi.getDefaults().then((res) => res.data);
+  const templateOptions: SystemConfigTemplateStorageOptionDto = await locals.api.systemConfigApi
+    .getStorageTemplateOptions()
+    .then((res) => res.data);
+
   return {
     user,
+    config,
+    defaultConfig,
+    templateOptions,
     meta: {
       title: 'System Settings',
     },
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index 6c8d3041d..12fac25f5 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -7,93 +7,71 @@
   import PasswordLoginSettings from '$lib/components/admin-page/settings/password-login/password-login-settings.svelte';
   import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
   import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
-  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-  import { SystemConfigDto, SystemConfigTemplateStorageOptionDto, api } from '@api';
+  import type { SystemConfigDto, SystemConfigTemplateStorageOptionDto } from '@api';
   import type { PageData } from './$types';
 
   export let data: PageData;
-  let config: SystemConfigDto;
-  let currentConfig: SystemConfigDto;
-  let defaultConfig: SystemConfigDto;
-  let templateOptions: SystemConfigTemplateStorageOptionDto;
-  const getConfig = async () => {
-    [config, defaultConfig, templateOptions] = await Promise.all([
-      api.systemConfigApi.getConfig().then((res) => res.data),
-      api.systemConfigApi.getDefaults().then((res) => res.data),
-      api.systemConfigApi.getStorageTemplateOptions().then((res) => res.data),
-    ]);
-
-    // deep copy
-    currentConfig = JSON.parse(JSON.stringify(config));
-  };
+  let config: SystemConfigDto = data.config;
+  let currentConfig: SystemConfigDto = JSON.parse(JSON.stringify(config));
+  let defaultConfig: SystemConfigDto = data.defaultConfig;
+  let templateOptions: SystemConfigTemplateStorageOptionDto = data.templateOptions;
 </script>
 
-<section class="">
-  {#await getConfig()}
-    <div class="flex items-center justify-center">
-      <LoadingSpinner />
-    </div>
-  {:then}
-    <SettingAccordion title="Thumbnail Settings" subtitle="Manage the resolution of thumbnail sizes">
-      <ThumbnailSettings
-        savedConfig={currentConfig.thumbnail}
-        bind:config={currentConfig}
-        thumbnailConfig={config.thumbnail}
-        thumbnailDefault={defaultConfig.thumbnail}
-      />
-    </SettingAccordion>
+<SettingAccordion title="Thumbnail Settings" subtitle="Manage the resolution of thumbnail sizes">
+  <ThumbnailSettings
+    savedConfig={currentConfig.thumbnail}
+    bind:config={currentConfig}
+    thumbnailConfig={config.thumbnail}
+    thumbnailDefault={defaultConfig.thumbnail}
+  />
+</SettingAccordion>
 
-    <SettingAccordion
-      title="FFmpeg Settings"
-      subtitle="Manage the resolution and encoding information of the video files"
-    >
-      <FFmpegSettings
-        savedConfig={currentConfig.ffmpeg}
-        bind:config={currentConfig}
-        ffmpegConfig={config.ffmpeg}
-        ffmpegDefault={defaultConfig.ffmpeg}
-      />
-    </SettingAccordion>
+<SettingAccordion title="FFmpeg Settings" subtitle="Manage the resolution and encoding information of the video files">
+  <FFmpegSettings
+    savedConfig={currentConfig.ffmpeg}
+    bind:config={currentConfig}
+    ffmpegConfig={config.ffmpeg}
+    ffmpegDefault={defaultConfig.ffmpeg}
+  />
+</SettingAccordion>
 
-    <SettingAccordion
-      title="Job Settings"
-      subtitle="Manage job concurrency"
-      isOpen={$page.url.searchParams.get('open') === 'job-settings'}
-    >
-      <JobSettings savedConfig={currentConfig.job} bind:config jobConfig={config.job} jobDefault={defaultConfig.job} />
-    </SettingAccordion>
+<SettingAccordion
+  title="Job Settings"
+  subtitle="Manage job concurrency"
+  isOpen={$page.url.searchParams.get('open') === 'job-settings'}
+>
+  <JobSettings savedConfig={currentConfig.job} bind:config jobConfig={config.job} jobDefault={defaultConfig.job} />
+</SettingAccordion>
 
-    <SettingAccordion title="Password Authentication" subtitle="Manage login with password settings">
-      <PasswordLoginSettings
-        savedConfig={currentConfig.passwordLogin}
-        bind:config={currentConfig}
-        passwordLoginConfig={config.passwordLogin}
-        passwordLoginDefault={defaultConfig.passwordLogin}
-      />
-    </SettingAccordion>
+<SettingAccordion title="Password Authentication" subtitle="Manage login with password settings">
+  <PasswordLoginSettings
+    savedConfig={currentConfig.passwordLogin}
+    bind:config={currentConfig}
+    passwordLoginConfig={config.passwordLogin}
+    passwordLoginDefault={defaultConfig.passwordLogin}
+  />
+</SettingAccordion>
 
-    <SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings">
-      <OAuthSettings
-        savedConfig={currentConfig.oauth}
-        bind:config={currentConfig}
-        oauthConfig={config.oauth}
-        oauthDefault={defaultConfig.oauth}
-      />
-    </SettingAccordion>
+<SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings">
+  <OAuthSettings
+    savedConfig={currentConfig.oauth}
+    bind:config={currentConfig}
+    oauthConfig={config.oauth}
+    oauthDefault={defaultConfig.oauth}
+  />
+</SettingAccordion>
 
-    <SettingAccordion
-      title="Storage Template"
-      subtitle="Manage the folder structure and file name of the upload asset"
-      isOpen={$page.url.searchParams.get('open') === 'storage-template'}
-    >
-      <StorageTemplateSettings
-        savedConfig={currentConfig.storageTemplate}
-        bind:config={currentConfig}
-        storageConfig={config.storageTemplate}
-        user={data.user}
-        storageDefault={defaultConfig.storageTemplate}
-        {templateOptions}
-      />
-    </SettingAccordion>
-  {/await}
-</section>
+<SettingAccordion
+  title="Storage Template"
+  subtitle="Manage the folder structure and file name of the upload asset"
+  isOpen={$page.url.searchParams.get('open') === 'storage-template'}
+>
+  <StorageTemplateSettings
+    savedConfig={currentConfig.storageTemplate}
+    bind:config={currentConfig}
+    storageConfig={config.storageTemplate}
+    user={data.user}
+    storageDefault={defaultConfig.storageTemplate}
+    {templateOptions}
+  />
+</SettingAccordion>