diff --git a/src/app/api/config/route.ts b/src/app/actions/getConfig.ts
similarity index 55%
rename from src/app/api/config/route.ts
rename to src/app/actions/getConfig.ts
index 7fa9ce8e2..534c008e5 100644
--- a/src/app/api/config/route.ts
+++ b/src/app/actions/getConfig.ts
@@ -1,14 +1,19 @@
-import { parseRequest } from '@/lib/request';
-import { json } from '@/lib/response';
+'use server';
 
-export async function GET(request: Request) {
-  const { error } = await parseRequest(request, null, { skipAuth: true });
+export type Config = {
+  cloudMode: boolean;
+  cloudUrl?: string;
+  faviconUrl?: string;
+  linksUrl?: string;
+  pixelsUrl?: string;
+  privateMode: boolean;
+  telemetryDisabled: boolean;
+  trackerScriptName?: string;
+  updatesDisabled: boolean;
+};
 
-  if (error) {
-    return error();
-  }
-
-  return json({
+export async function getConfig(): Promise<Config> {
+  return {
     cloudMode: !!process.env.CLOUD_URL,
     cloudUrl: process.env.CLOUD_URL,
     faviconUrl: process.env.FAVICON_URL,
@@ -18,5 +23,5 @@ export async function GET(request: Request) {
     telemetryDisabled: !!process.env.DISABLE_TELEMETRY,
     trackerScriptName: process.env.TRACKER_SCRIPT_NAME,
     updatesDisabled: !!process.env.DISABLE_UPDATES,
-  });
+  };
 }
diff --git a/src/components/hooks/useConfig.ts b/src/components/hooks/useConfig.ts
index 170136437..46c815d64 100644
--- a/src/components/hooks/useConfig.ts
+++ b/src/components/hooks/useConfig.ts
@@ -1,27 +1,12 @@
 import { useEffect } from 'react';
 import { useApp, setConfig } from '@/store/app';
-import { useApi } from '@/components/hooks/useApi';
-
-export type Config = {
-  cloudMode: boolean;
-  cloudUrl?: string;
-  faviconUrl?: string;
-  linksUrl?: string;
-  pixelsUrl?: string;
-  privateMode: boolean;
-  telemetryDisabled: boolean;
-  trackerScriptName?: string;
-  updatesDisabled: boolean;
-};
+import { getConfig, Config } from '@/app/actions/getConfig';
 
 export function useConfig(): Config {
   const { config } = useApp();
-  const { get } = useApi();
 
   async function loadConfig() {
-    const data = await get(`/config`);
-
-    setConfig(data);
+    setConfig(await getConfig());
   }
 
   useEffect(() => {
diff --git a/src/components/input/SettingsButton.tsx b/src/components/input/SettingsButton.tsx
index a19808217..3536d1d54 100644
--- a/src/components/input/SettingsButton.tsx
+++ b/src/components/input/SettingsButton.tsx
@@ -8,9 +8,12 @@ import {
   MenuItem,
   MenuSeparator,
   MenuSection,
+  Dialog,
+  SubMenuTrigger,
 } from '@umami/react-zen';
 import { useMessages, useLoginQuery, useNavigation, useConfig } from '@/components/hooks';
-import { LogOut, LockKeyhole, Settings } from '@/components/icons';
+import { LogOut, LockKeyhole, Settings, Knobs } from '@/components/icons';
+import { PreferenceSettings } from '@/app/(main)/settings/preferences/PreferenceSettings';
 
 export function SettingsButton() {
   const { formatMessage, labels } = useMessages();
@@ -41,6 +44,20 @@ export function SettingsButton() {
           <MenuSection title={user.username}>
             <MenuSeparator />
             <MenuItem id="settings" icon={<Settings />} label={formatMessage(labels.settings)} />
+            {cloudMode && (
+              <SubMenuTrigger>
+                <MenuItem
+                  icon={<Knobs />}
+                  label={formatMessage(labels.preferences)}
+                  showSubMenuIcon
+                />
+                <Popover placement="right bottom">
+                  <Dialog>
+                    <PreferenceSettings />
+                  </Dialog>
+                </Popover>
+              </SubMenuTrigger>
+            )}
             {!cloudMode && user.isAdmin && (
               <MenuItem id="admin" icon={<LockKeyhole />} label={formatMessage(labels.admin)} />
             )}