diff --git a/src/common/style/vars.scss b/src/common/style/vars.scss
index 769c67b8535a86f5034618363581d41097af810d..fd5a693c94d0fd402d0f5c90c1c6aa5bc9e1f159 100644
--- a/src/common/style/vars.scss
+++ b/src/common/style/vars.scss
@@ -17,6 +17,7 @@ $window-background: #303030;
 $border-color1: #eee;
 
 $scrollbar-thumb1: #999;
+$scrollbar-thumb2: #ddd;
 
 $start-tools-bar-height: 48px;
 
diff --git a/src/components/View/index.tsx b/src/components/View/index.tsx
index 82e33c17a92958404c47d072d3116355b50079b6..b20a01886356da62c0ea6ff987876a49f084b788 100644
--- a/src/components/View/index.tsx
+++ b/src/components/View/index.tsx
@@ -12,6 +12,7 @@ interface BreadcrumbData {
 
 interface Props {
   children?: React.ReactNode
+  className?: string
   breadcrumb?: BreadcrumbData[]
   back?: { (event: React.MouseEvent): void }
   extra?: React.ReactNode
@@ -26,6 +27,7 @@ interface Props {
 }
 
 const View: React.FC<Props> = ({
+  className,
   children,
   breadcrumb,
   back,
@@ -41,7 +43,7 @@ const View: React.FC<Props> = ({
 }) => {
   return (
     <div
-      className={classnames(styles.viewBox, {
+      className={classnames(styles.viewBox, className, {
         [styles.viewBoxBorder]: border,
         [styles.viewBoxMargin]: margin,
         [styles.viewBoxPadding]: padding,
diff --git a/src/index.scss b/src/index.scss
index 205e68d5f3f813ad540aae535e286887edae0378..aefb196806eb2a0413ca85bb641e37432aa59152 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -52,3 +52,19 @@ code {
   width: 100%;
   height: 100%;
 }
+
+div {
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $scrollbar-thumb1;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+
+    &:hover {
+      cursor: pointer;
+      background: $scrollbar-thumb2;
+    }
+  }
+}
diff --git a/src/pages/apps/management/system/background-set/index.module.scss b/src/pages/apps/management/system/background-set/index.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ff107f217281186bf4a0e070f2a274fc8a5edff7
--- /dev/null
+++ b/src/pages/apps/management/system/background-set/index.module.scss
@@ -0,0 +1,58 @@
+.backgroundSetBox {
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.content {
+  padding: 0 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px;
+}
+
+.headerTitle {
+  font-size: 15px;
+  color: #999;
+}
+
+.view {
+  width: 100%;
+}
+
+.viewImg {
+  width: 100%;
+  height: auto;
+}
+
+.listBox {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 20px -20px;
+}
+
+.bg {
+  margin-top: 10px;
+  margin-left: 20px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: transparent;
+  width: 256px;
+  height: 144px;
+
+  &:hover {
+    border-color: #bbb;
+  }
+}
+
+.active {
+  border-color: darkblue;
+}
+
+.bgImg {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/pages/apps/management/system/background-set/index.tsx b/src/pages/apps/management/system/background-set/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1c9be4cc34f7276a82964848c6a589e7a6a1bbe7
--- /dev/null
+++ b/src/pages/apps/management/system/background-set/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import styles from './index.module.scss'
+import View from '@/components/View'
+import { Button } from 'antd'
+import useStore, { MyState } from '@/store'
+import classnames from 'classnames'
+
+const BackgroundSet: React.FC = () => {
+  const backgroundList = useStore((state: MyState) => state.backgroundList)
+  const setBackgroundImg = useStore((state: MyState) => state.setBackgroundImg)
+  const backgroundImg = useStore((state: MyState) => state.backgroundImg)
+  const [img, setImg] = React.useState<string>(backgroundImg)
+  return (
+    <View
+      margin={false}
+      radius={false}
+      className={styles.backgroundSetBox}
+      breadcrumb={[{ name: '系统设置' }, { name: '桌面背景' }]}
+      title="桌面背景设置">
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <div className={styles.headerTitle}>预览</div>
+          <div>
+            <Button type="primary" onClick={() => setBackgroundImg(img)}>
+              保存
+            </Button>
+          </div>
+        </div>
+        <div className={styles.view}>
+          <img className={styles.viewImg} src={img} alt="view" />
+        </div>
+        <div className={styles.listBox}>
+          {backgroundList.map(row => (
+            <div
+              key={row.id}
+              className={classnames(styles.bg, {
+                [styles.active]: row.src === img
+              })}
+              onClick={() => setImg(row.src)}>
+              <img className={styles.bgImg} src={row.src} alt={row.id} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </View>
+  )
+}
+
+export default BackgroundSet
diff --git a/src/pages/desktop/Desk/index.tsx b/src/pages/desktop/Desk/index.tsx
index 62c7198e6b4b998adaed198b3c2d0ddc0ae39b9a..383c842585e0e3a50f55478db5ab293d3e4a810a 100644
--- a/src/pages/desktop/Desk/index.tsx
+++ b/src/pages/desktop/Desk/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import styles from './index.module.scss'
-import backgroundImg from '@img/wallpaper/dark/img0.jpg'
 import Apps from './Apps'
 import useStore, { MyState } from '@/store'
 import { getUserInfo } from '@/common/service/user'
 
 const Desk: React.FC = () => {
+  const backgroundImg = useStore((state: MyState) => state.backgroundImg)
   const setAppList = useStore((state: MyState) => state.setAppList)
   const setStartMenuList = useStore((state: MyState) => state.setStartMenuList)
   const setUserInfo = useStore((state: MyState) => state.setUserInfo)
diff --git a/src/pages/desktop/RightMouseMenu/index.tsx b/src/pages/desktop/RightMouseMenu/index.tsx
index 6b1c5437b6b39999df6a9d83bd7438b501e1eb84..77a95b030e1febcb96c53195cf9797e8f11c88e9 100644
--- a/src/pages/desktop/RightMouseMenu/index.tsx
+++ b/src/pages/desktop/RightMouseMenu/index.tsx
@@ -10,9 +10,11 @@ import {
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import useStore, { MyState } from '@/store'
+import { WINDOW_OPEN_WITH, IMAGE_TYPE } from '@/common/constants'
 
 const RightMouseMenu: React.FC = () => {
   const rightMouseMenu = useStore((state: MyState) => state.rightMouseMenu)
+  const openWindow = useStore((state: MyState) => state.openWindow)
   const closeRightMouseMenu = useStore(
     (state: MyState) => state.closeRightMouseMenu
   )
@@ -71,7 +73,22 @@ const RightMouseMenu: React.FC = () => {
           个人中心
         </div>
       </div>
-      <div className={styles.item}>
+      <div
+        className={styles.item}
+        onClick={() => {
+          openWindow({
+            id: 9999,
+            title: '背景设置',
+            image: {
+              type: IMAGE_TYPE.ANTD,
+              name: 'PictureOutlined'
+            },
+            openWith: {
+              type: WINDOW_OPEN_WITH.COMPONENT,
+              name: 'backgroundSet'
+            }
+          })
+        }}>
         <div className={styles.name}>
           <div className={styles.icon}>
             <PictureOutlined />
diff --git a/src/pages/desktop/Window/Open/ComponentsWith/PageComponents.tsx b/src/pages/desktop/Window/Open/ComponentsWith/PageComponents.tsx
index e92468abc80f522483ed8c2166d24134741de223..0af148eb157fd348b7873eab98cde769e7e3c25f 100644
--- a/src/pages/desktop/Window/Open/ComponentsWith/PageComponents.tsx
+++ b/src/pages/desktop/Window/Open/ComponentsWith/PageComponents.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
 import Userinfo from '@apps/management/user/userinfo'
+import BackgroundSet from '@apps/management/system/background-set'
 
-export type PageComponentName = 'userinfo'
+export type PageComponentName = 'userinfo' | 'backgroundSet'
 
 const PageComponents: Record<PageComponentName, React.ComponentType> = {
-  userinfo: Userinfo
+  userinfo: Userinfo,
+  backgroundSet: BackgroundSet
 }
 
 export default PageComponents
diff --git a/src/store/deskSlice.ts b/src/store/deskSlice.ts
index b5d2cdec9c8a621a345398a596b99ddd914f699e..77b3add6143cf09acd08242c149f6bc00114d18a 100644
--- a/src/store/deskSlice.ts
+++ b/src/store/deskSlice.ts
@@ -4,6 +4,12 @@ import { MyState } from './index'
 import { Image } from '@/components/ImageComponent'
 import getId from '@utils/getId'
 import vars from '@/common/style/vars.scss'
+import bg1Img from '@img/wallpaper/dark/img0.jpg'
+import bg2Img from '@img/wallpaper/default/img0.jpg'
+import bg3Img from '@img/wallpaper/ThemeA/img0.jpg'
+import bg4Img from '@img/wallpaper/ThemeB/img0.jpg'
+import bg5Img from '@img/wallpaper/ThemeB/img1.jpg'
+import bg6Img from '@img/wallpaper/ThemeB/img2.jpg'
 
 export interface App {
   id: number
@@ -25,7 +31,15 @@ export interface RightMouseMenu {
   left?: number
 }
 
+interface Background {
+  id: string
+  src: string
+}
+
 export interface DeskSlice {
+  backgroundList: Background[]
+  backgroundImg: string
+  setBackgroundImg: (src: string) => void
   appList: App[]
   setAppList: (value: App[]) => void
   rightMouseMenu: RightMouseMenu
@@ -37,6 +51,18 @@ const deskSlice = (
   set: StoreApi<MyState>['setState'],
   get: StoreApi<MyState>['getState']
 ) => ({
+  backgroundList: [
+    { id: getId(), src: bg1Img },
+    { id: getId(), src: bg2Img },
+    { id: getId(), src: bg3Img },
+    { id: getId(), src: bg4Img },
+    { id: getId(), src: bg5Img },
+    { id: getId(), src: bg6Img }
+  ],
+  backgroundImg: bg1Img,
+  setBackgroundImg: (src: string) => {
+    set({ backgroundImg: src })
+  },
   appList: [] as App[],
   setAppList: (value: App[]) => {
     set(() => ({ appList: value }))
diff --git a/src/store/windowSlice.ts b/src/store/windowSlice.ts
index 3671234320cf1fcd9a59c9c61486f08a3b9552ff..a3997ae88de4545341f0db046860ca09ec61165b 100644
--- a/src/store/windowSlice.ts
+++ b/src/store/windowSlice.ts
@@ -8,10 +8,10 @@ import { WINDOW_STATUS } from '@/common/constants'
 
 const defaultWindowStyle = {
   display: 'block',
-  width: 600,
+  width: 900,
   height: 600,
-  top: 200,
-  left: 100,
+  top: 100,
+  left: 50,
   zIndex: 1000
 }