diff --git a/public/locales/de/settings/customization/page-appearance.json b/public/locales/de/settings/customization/page-appearance.json
index cb9740b31..0a9cd3e9b 100644
--- a/public/locales/de/settings/customization/page-appearance.json
+++ b/public/locales/de/settings/customization/page-appearance.json
@@ -15,7 +15,11 @@
     "label": "Hintergrund",
     "placeholder": "/img/background.png"
   },
+  "customCSS": {
+    "label": "Benutzerdefiniertes CSS",
+    "placeholder": "Benutzerdefiniertes CSS wird als letztes ausgeführt"
+  },
   "buttons": {
     "submit": "Absenden"
   }
-}
\ No newline at end of file
+}
diff --git a/public/locales/en/settings/customization/page-appearance.json b/public/locales/en/settings/customization/page-appearance.json
index 051c11d86..3c9d62888 100644
--- a/public/locales/en/settings/customization/page-appearance.json
+++ b/public/locales/en/settings/customization/page-appearance.json
@@ -15,7 +15,11 @@
     "label": "Background",
     "placeholder": "/img/background.png"
   },
+  "customCSS": {
+    "label": "Custom CSS",
+    "placeholder": "Custom CSS will be executed last"
+  },
   "buttons": {
     "submit": "Submit"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
index 552e5b483..17fcdcd25 100644
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -1,4 +1,4 @@
-import { TextInput, Button, Stack } from '@mantine/core';
+import { TextInput, Button, Stack, Textarea } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
@@ -17,6 +17,7 @@ export default function TitleChanger() {
       logo: config.settings.logo,
       favicon: config.settings.favicon,
       background: config.settings.background,
+      customCSS: config.settings.customCSS,
     },
   });
 
@@ -25,6 +26,7 @@ export default function TitleChanger() {
     logo?: string;
     favicon?: string;
     background?: string;
+    customCSS?: string;
   }) => {
     setConfig({
       ...config,
@@ -34,6 +36,7 @@ export default function TitleChanger() {
         logo: values.logo,
         favicon: values.favicon,
         background: values.background,
+        customCSS: values.customCSS,
       },
     });
   };
@@ -62,6 +65,12 @@ export default function TitleChanger() {
             placeholder={t('background.placeholder')}
             {...form.getInputProps('background')}
           />
+          <Textarea
+            minRows={5}
+            label={t('customCSS.label')}
+            placeholder={t('customCSS.placeholder')}
+            {...form.getInputProps('customCSS')}
+          />
           <Button type="submit">{t('buttons.submit')}</Button>
         </Stack>
       </form>
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index d91a3122d..d762c2cb0 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -34,6 +34,9 @@ export default function Layout({ children, style }: any) {
       >
         {children}
       </main>
+      <style>
+        {cx(config.settings.customCSS)}
+      </style>
     </AppShell>
   );
 }
diff --git a/src/tools/types.ts b/src/tools/types.ts
index 8206c2b47..90c97ccee 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -10,6 +10,7 @@ export interface Settings {
   secondaryColor?: MantineTheme['primaryColor'];
   primaryShade?: MantineTheme['primaryShade'];
   background?: string;
+  customCSS?: string,
   appOpacity?: number;
   widgetPosition?: string;
   appCardWidth?: number;