diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
index 4c06cdd7d..0840517fd 100644
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -10,10 +10,16 @@ export default function TitleChanger() {
       title: config.settings.title,
       logo: config.settings.logo,
       favicon: config.settings.favicon,
+      background: config.settings.background,
     },
   });
 
-  const saveChanges = (values: { title?: string; logo?: string; favicon?: string }) => {
+  const saveChanges = (values: {
+    title?: string;
+    logo?: string;
+    favicon?: string;
+    background?: string;
+  }) => {
     setConfig({
       ...config,
       settings: {
@@ -21,6 +27,7 @@ export default function TitleChanger() {
         title: values.title,
         logo: values.logo,
         favicon: values.favicon,
+        background: values.background,
       },
     });
   };
@@ -36,6 +43,7 @@ export default function TitleChanger() {
             placeholder="/favicon.svg"
             {...form.getInputProps('favicon')}
           />
+          <TextInput label="Background" placeholder="" {...form.getInputProps('background')} />
           <Button type="submit" color={config.settings.primary_color || 'red'}>
             Save
           </Button>
diff --git a/src/components/Settings/CommonSettings.tsx b/src/components/Settings/CommonSettings.tsx
index 02cb8e84c..5f347fe0a 100644
--- a/src/components/Settings/CommonSettings.tsx
+++ b/src/components/Settings/CommonSettings.tsx
@@ -5,7 +5,6 @@ import {
   SegmentedControl,
   TextInput,
   Anchor,
-  ColorPicker,
   useMantineTheme,
 } from '@mantine/core';
 import { useState } from 'react';
diff --git a/src/components/layout/Aside.tsx b/src/components/layout/Aside.tsx
index 8fafc5708..2a12a98e1 100644
--- a/src/components/layout/Aside.tsx
+++ b/src/components/layout/Aside.tsx
@@ -28,6 +28,7 @@ export default function Aside(props: any) {
       className={cx(classes.hide)}
       style={{
         border: 'none',
+        background: 'none',
       }}
       width={{
         base: 'auto',
diff --git a/src/components/layout/Background.tsx b/src/components/layout/Background.tsx
new file mode 100644
index 000000000..0c17374d4
--- /dev/null
+++ b/src/components/layout/Background.tsx
@@ -0,0 +1,19 @@
+import { Global } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function Background() {
+  const { config } = useConfig();
+
+  return (
+    <Global
+      styles={{
+        body: {
+          backgroundImage: `url('${config.settings.background}')` || '',
+          backgroundPosition: 'center',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+        },
+      }}
+    />
+  );
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 1cfb218a5..20374f609 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -41,7 +41,7 @@ export function Header(props: any) {
 
   return (
     <Head height="auto">
-      <Group m="xs" position="apart">
+      <Group p="xs" position="apart">
         <Box className={classes.hide}>
           <Logo style={{ fontSize: 22 }} />
         </Box>
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index d9ccbccb7..975e51776 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -3,6 +3,7 @@ import { Header } from './Header';
 import { Footer } from './Footer';
 import Aside from './Aside';
 import { HeaderConfig } from './HeaderConfig';
+import { Background } from './Background';
 
 const useStyles = createStyles((theme) => ({
   main: {},
@@ -13,6 +14,7 @@ export default function Layout({ children, style }: any) {
   return (
     <AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
       <HeaderConfig />
+      <Background />
       <main
         className={cx(classes.main)}
         style={{
diff --git a/src/tools/types.ts b/src/tools/types.ts
index c4552bd42..5067728f4 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -7,6 +7,7 @@ export interface Settings {
   favicon?: string;
   primary_color?: string;
   secondary_color?: string;
+  background?: string;
 }
 
 export interface Config {
