diff --git a/public/bg/Squares.png b/public/bg/Squares.png
deleted file mode 100644
index 260d904ff..000000000
Binary files a/public/bg/Squares.png and /dev/null differ
diff --git a/public/bg/Waihou.png b/public/wallpaper/bubbles.png
similarity index 100%
rename from public/bg/Waihou.png
rename to public/wallpaper/bubbles.png
diff --git a/public/bg/tg-cartoon.jpeg b/public/wallpaper/cartoon.jpeg
similarity index 100%
rename from public/bg/tg-cartoon.jpeg
rename to public/wallpaper/cartoon.jpeg
diff --git a/public/bg/tg-co2.jpeg b/public/wallpaper/co2.jpeg
similarity index 100%
rename from public/bg/tg-co2.jpeg
rename to public/wallpaper/co2.jpeg
diff --git a/public/bg/tg-code.jpg b/public/wallpaper/code.jpg
similarity index 100%
rename from public/bg/tg-code.jpg
rename to public/wallpaper/code.jpg
diff --git a/public/bg/Taieri.png b/public/wallpaper/curves.png
similarity index 100%
rename from public/bg/Taieri.png
rename to public/wallpaper/curves.png
diff --git a/public/bg/tg-earth.jpg b/public/wallpaper/earth.jpg
similarity index 100%
rename from public/bg/tg-earth.jpg
rename to public/wallpaper/earth.jpg
diff --git a/public/bg/tg-elec.jpg b/public/wallpaper/elec.jpg
similarity index 100%
rename from public/bg/tg-elec.jpg
rename to public/wallpaper/elec.jpg
diff --git a/public/bg/Fishes.jpeg b/public/wallpaper/fishes.jpeg
similarity index 100%
rename from public/bg/Fishes.jpeg
rename to public/wallpaper/fishes.jpeg
diff --git a/public/bg/tg-istanbul.jpeg b/public/wallpaper/istanbul.jpeg
similarity index 100%
rename from public/bg/tg-istanbul.jpeg
rename to public/wallpaper/istanbul.jpeg
diff --git a/public/bg/Limones.jpeg b/public/wallpaper/limones.jpeg
similarity index 100%
rename from public/bg/Limones.jpeg
rename to public/wallpaper/limones.jpeg
diff --git a/public/bg/Mataura.png b/public/wallpaper/mataura.png
similarity index 100%
rename from public/bg/Mataura.png
rename to public/wallpaper/mataura.png
diff --git a/public/bg/Antiquitarian.jpeg b/public/wallpaper/newspaper.jpeg
similarity index 100%
rename from public/bg/Antiquitarian.jpeg
rename to public/wallpaper/newspaper.jpeg
diff --git a/public/wallpaper/patterns/1.png b/public/wallpaper/patterns/1.png
new file mode 100644
index 000000000..38895e677
Binary files /dev/null and b/public/wallpaper/patterns/1.png differ
diff --git a/public/bg/CyBeRGaTa.jpeg b/public/wallpaper/rainbow.jpeg
similarity index 100%
rename from public/bg/CyBeRGaTa.jpeg
rename to public/wallpaper/rainbow.jpeg
diff --git a/public/bg/space.svg b/public/wallpaper/space.svg
similarity index 100%
rename from public/bg/space.svg
rename to public/wallpaper/space.svg
diff --git a/public/bg/tg-green.jpg b/public/wallpaper/tg-green.jpg
similarity index 100%
rename from public/bg/tg-green.jpg
rename to public/wallpaper/tg-green.jpg
diff --git a/src/containers/editor/WallpaperEditor/BuildIn/AnglePanel.tsx b/src/containers/editor/WallpaperEditor/BuildIn/AnglePanel.tsx
new file mode 100644
index 000000000..a9ffe99e5
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/BuildIn/AnglePanel.tsx
@@ -0,0 +1,48 @@
+import { FC, memo } from 'react'
+
+import {
+  Wrapper,
+  Top,
+  Bottom,
+  Left,
+  Right,
+  NeedleDot,
+  Needle,
+} from '../styles/build_in/angle_panel'
+import { changeDirection } from '../logic'
+
+type TProps = {
+  direction: string
+}
+
+const AnglePanel: FC<TProps> = ({ direction }) => {
+  return (
+    <Wrapper>
+      <Top $active={direction === 'top'} onClick={() => changeDirection('top')}>
+        上
+      </Top>
+      <Bottom
+        $active={direction === 'bottom'}
+        onClick={() => changeDirection('bottom')}
+      >
+        下
+      </Bottom>
+      <Left
+        $active={direction === 'left'}
+        onClick={() => changeDirection('left')}
+      >
+        左
+      </Left>
+      <Right
+        $active={direction === 'right'}
+        onClick={() => changeDirection('right')}
+      >
+        右
+      </Right>
+      <NeedleDot />
+      <Needle direction={direction} />
+    </Wrapper>
+  )
+}
+
+export default memo(AnglePanel)
diff --git a/src/containers/editor/WallpaperEditor/BuildIn/GradientGroup.tsx b/src/containers/editor/WallpaperEditor/BuildIn/GradientGroup.tsx
new file mode 100644
index 000000000..51a9d5e91
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/BuildIn/GradientGroup.tsx
@@ -0,0 +1,43 @@
+import { FC, memo } from 'react'
+import { keys } from 'ramda'
+
+import type { TWallpaperGradient } from '@/spec'
+import { parseWallpaper } from '@/utils/wallpaper'
+
+import {
+  Wrapper,
+  Block,
+  BallWrapper,
+  ColorBall,
+} from '../styles/build_in/gradient_group'
+
+import { changeWallpaper } from '../logic'
+
+type TProps = {
+  wallpaper: string
+  gradientWallpapers: Record<string, TWallpaperGradient>
+}
+
+const PicGroup: FC<TProps> = ({ wallpaper, gradientWallpapers }) => {
+  const gradientKeys = keys(gradientWallpapers)
+
+  return (
+    <Wrapper>
+      {gradientKeys.map((name) => (
+        <Block key={name}>
+          <BallWrapper
+            $active={name === wallpaper}
+            onClick={() => changeWallpaper(name)}
+          >
+            <ColorBall
+              $active={name === wallpaper}
+              background={parseWallpaper(gradientWallpapers, name).background}
+            />
+          </BallWrapper>
+        </Block>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default memo(PicGroup)
diff --git a/src/containers/editor/WallpaperEditor/BuildIn/PatternGroup.tsx b/src/containers/editor/WallpaperEditor/BuildIn/PatternGroup.tsx
new file mode 100644
index 000000000..9ba1f230e
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/BuildIn/PatternGroup.tsx
@@ -0,0 +1,43 @@
+import { FC, memo } from 'react'
+import { keys } from 'ramda'
+
+import type { TWallpaperPic } from '@/spec'
+
+import {
+  Wrapper,
+  Block,
+  Image,
+  ActiveSign,
+  CheckIcon,
+} from '../styles/build_in/pattern_group'
+
+import { changeWallpaper } from '../logic'
+
+type TProps = {
+  wallpaper: string
+  patternWallpapers: Record<string, TWallpaperPic>
+}
+
+const PatternGroup: FC<TProps> = ({ wallpaper, patternWallpapers }) => {
+  const patternKeys = keys(patternWallpapers)
+
+  return (
+    <Wrapper>
+      {patternKeys.map((name) => (
+        <Block key={name} $active={name === wallpaper}>
+          {name === wallpaper && (
+            <ActiveSign>
+              <CheckIcon />
+            </ActiveSign>
+          )}
+          <Image
+            src={patternWallpapers[name].bgImage}
+            onClick={() => changeWallpaper(name)}
+          />
+        </Block>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default memo(PatternGroup)
diff --git a/src/containers/editor/WallpaperEditor/BuildIn/index.tsx b/src/containers/editor/WallpaperEditor/BuildIn/index.tsx
new file mode 100644
index 000000000..03b16236e
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/BuildIn/index.tsx
@@ -0,0 +1,91 @@
+/* *
+ * WallpaperEditor
+ *
+ */
+
+import { FC, Fragment } from 'react'
+
+import { WALLPAPER_TYPE } from '@/constant'
+
+import { Br } from '@/widgets/Common'
+import Checker from '@/widgets/Checker'
+
+import PatternGroup from './PatternGroup'
+import GradientGroup from './GradientGroup'
+import AnglePanel from './AnglePanel'
+
+import type { TWallpaperData } from '../spec'
+import {
+  Wrapper,
+  Title,
+  SettingWrapper,
+  GeneralSettings,
+  Divider,
+  AngleSettings,
+} from '../styles/build_in'
+import { togglePattern, toggleBlur } from '../logic'
+
+type TProps = {
+  wallpaperData: TWallpaperData
+}
+
+const BuildIn: FC<TProps> = ({ wallpaperData }) => {
+  const {
+    wallpaper,
+    wallpaperType,
+    gradientWallpapers,
+    patternWallpapers,
+    hasPattern,
+    hasBlur,
+    direction,
+  } = wallpaperData
+
+  return (
+    <Wrapper>
+      <Title>图案:</Title>
+      <PatternGroup
+        wallpaper={wallpaper}
+        patternWallpapers={patternWallpapers}
+      />
+      <Br top={20} />
+      <Title>纯色渐变:</Title>
+      <GradientGroup
+        wallpaper={wallpaper}
+        gradientWallpapers={gradientWallpapers}
+      />
+      <Br top={25} />
+      <SettingWrapper show={wallpaperType !== WALLPAPER_TYPE.NONE}>
+        <GeneralSettings>
+          <Title>附加效果:</Title>
+          {wallpaperType === WALLPAPER_TYPE.GRADIENT && (
+            <Fragment>
+              <Br top={20} />
+              <Checker checked={hasPattern} onChange={togglePattern}>
+                叠加印纹
+              </Checker>
+            </Fragment>
+          )}
+
+          <Br top={10} />
+          <Checker checked={hasBlur} onChange={toggleBlur}>
+            模糊效果
+          </Checker>
+        </GeneralSettings>
+
+        {wallpaperType === WALLPAPER_TYPE.GRADIENT && (
+          <Fragment>
+            <Divider />
+
+            <AngleSettings>
+              <Title>渐变方向:</Title>
+              <AnglePanel direction={direction} />
+            </AngleSettings>
+          </Fragment>
+        )}
+      </SettingWrapper>
+      <Br top={50} />
+    </Wrapper>
+  )
+}
+
+export default BuildIn
diff --git a/src/containers/editor/WallpaperEditor/Custom/UploadBox.tsx b/src/containers/editor/WallpaperEditor/Custom/UploadBox.tsx
new file mode 100644
index 000000000..d79b4525a
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/Custom/UploadBox.tsx
@@ -0,0 +1,36 @@
+import { FC, memo } from 'react'
+
+import { SVG } from '@/constant'
+import MenuButton from '@/widgets/Buttons/MenuButton'
+
+import {
+  Wrapper,
+  Menu,
+  MoreIcon,
+  UploadIcon,
+  Title,
+} from '../styles/custom/upload_box'
+
+const menuOptions = [
+  {
+    key: 'url',
+    icon: SVG.COPY,
+    title: '图片地址',
+  },
+]
+
+const UploadBox: FC = () => {
+  return (
+    <Wrapper>
+      <Menu>
+        <MenuButton placement="bottom-end" options={menuOptions}>
+          <MoreIcon />
+        </MenuButton>
+      </Menu>
+      <UploadIcon />
+      <Title>上传 / 引入图片</Title>
+    </Wrapper>
+  )
+}
+
+export default memo(UploadBox)
diff --git a/src/containers/editor/WallpaperEditor/Custom/index.tsx b/src/containers/editor/WallpaperEditor/Custom/index.tsx
new file mode 100644
index 000000000..4392f7852
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/Custom/index.tsx
@@ -0,0 +1,14 @@
+import { FC, memo } from 'react'
+
+import UploadBox from './UploadBox'
+import { Wrapper } from '../styles/custom'
+
+const Custom: FC = () => {
+  return (
+    <Wrapper>
+      <UploadBox />
+    </Wrapper>
+  )
+}
+
+export default memo(Custom)
diff --git a/src/containers/editor/WallpaperEditor/Footer.tsx b/src/containers/editor/WallpaperEditor/Footer.tsx
new file mode 100644
index 000000000..6bae0030d
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/Footer.tsx
@@ -0,0 +1,31 @@
+import { FC, memo } from 'react'
+
+import { TWallpaperType } from '@/spec'
+import { WALLPAPER_TYPE } from '@/constant'
+
+import Button from '@/widgets/Buttons/Button'
+import { Wrapper, ForbidImgIcon, ConfirmBtn } from './styles/footer'
+import { changeWallpaper } from './logic'
+
+type TProps = {
+  wallpaperType: TWallpaperType
+}
+const Footer: FC<TProps> = ({ wallpaperType }) => {
+  return (
+    <Wrapper>
+      {wallpaperType !== WALLPAPER_TYPE.NONE ? (
+        <Button size="small" ghost noBorder onClick={() => changeWallpaper('')}>
+          <ForbidImgIcon /> 空白壁纸
+        </Button>
+      ) : (
+        <div />
+      )}
+
+      <ConfirmBtn size="small" space={13}>
+        确定
+      </ConfirmBtn>
+    </Wrapper>
+  )
+}
+
+export default memo(Footer)
diff --git a/src/containers/editor/WallpaperEditor/constant.ts b/src/containers/editor/WallpaperEditor/constant.ts
new file mode 100644
index 000000000..6b5149838
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/constant.ts
@@ -0,0 +1,17 @@
+import type { TTab } from './spec'
+
+export const TAB = {
+  BUILDIN: 'buildin',
+  CUSTOM: 'custom',
+} as Record<Uppercase<TTab>, TTab>
+
+export const TAB_OPTIONS = [
+  {
+    title: '内置壁纸',
+    raw: TAB.BUILDIN,
+  },
+  {
+    title: '上传壁纸',
+    raw: TAB.CUSTOM,
+  },
+]
diff --git a/src/containers/editor/WallpaperEditor/index.tsx b/src/containers/editor/WallpaperEditor/index.tsx
new file mode 100644
index 000000000..d0a994866
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/index.tsx
@@ -0,0 +1,66 @@
+/* *
+ * WallpaperEditor
+ *
+ */
+
+import { FC } from 'react'
+
+import { bond } from '@/utils/mobx'
+import { VIEW, DRAWER_SCROLLER } from '@/constant'
+
+import { Tabs } from '@/widgets/Switcher'
+import CustomScroller from '@/widgets/CustomScroller'
+
+import type { TStore } from './store'
+import { TAB, TAB_OPTIONS } from './constant'
+
+import BuildIn from './BuildIn'
+import Custom from './Custom'
+import Footer from './Footer'
+
+import { Wrapper, Banner, Title, Content } from './styles'
+import { useInit, changeTab } from './logic'
+
+type TProps = {
+  wallpaperEditor?: TStore
+  testid?: string
+}
+
+const WallpaperEditorContainer: FC<TProps> = ({
+  wallpaperEditor: store,
+  testid = 'wallpaper-editor',
+}) => {
+  useInit(store)
+  const { tab, wallpaperData } = store
+
+  return (
+    <Wrapper testid={testid}>
+      <Banner>
+        <Title>壁纸设置</Title>
+        <Tabs
+          items={TAB_OPTIONS}
+          activeKey={tab}
+          onChange={changeTab}
+          view={VIEW.DRAWER}
+        />
+      </Banner>
+
+      <CustomScroller
+        instanceKey={DRAWER_SCROLLER}
+        direction="vertical"
+        height="calc(100vh - 226px)"
+        barSize="small"
+        showShadow={false}
+        autoHide={false}
+      >
+        <Content>
+          {tab === TAB.BUILDIN && <BuildIn wallpaperData={wallpaperData} />}
+          {tab === TAB.CUSTOM && <Custom />}
+        </Content>
+      </CustomScroller>
+      <Footer wallpaperType={wallpaperData.wallpaperType} />
+    </Wrapper>
+  )
+}
+
+export default bond(WallpaperEditorContainer, 'wallpaperEditor') as FC<TProps>
diff --git a/src/containers/editor/WallpaperEditor/logic.ts b/src/containers/editor/WallpaperEditor/logic.ts
new file mode 100644
index 000000000..79ece7e20
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/logic.ts
@@ -0,0 +1,65 @@
+import { useEffect } from 'react'
+// import { } from 'ramda'
+
+import { buildLog } from '@/utils/logger'
+import { EVENT } from '@/constant'
+import asyncSuit from '@/utils/async'
+
+// import S from './schma'
+import type { TTab } from './spec'
+import type { TStore } from './store'
+
+const { SR71, $solver, asyncRes } = asyncSuit
+const sr71$ = new SR71({
+  receive: EVENT.DRAWER.AFTER_CLOSE,
+})
+
+let store: TStore | undefined
+let sub$ = null
+
+/* eslint-disable-next-line */
+const log = buildLog('L:WallpaperEditor')
+
+export const changeTab = (tab: TTab): void => {
+  store.mark({ tab })
+}
+
+export const changeDirection = (direction: string): void => {
+  store.mark({ direction })
+}
+
+export const changeWallpaper = (wallpaper: string): void => {
+  store.mark({ wallpaper })
+}
+
+/**
+ * toggle pattern mark only for gradient backgrounds
+ */
+export const togglePattern = (hasPattern: boolean): void => {
+  store.mark({ hasPattern })
+}
+
+export const toggleBlur = (hasBlur: boolean): void => {
+  store.mark({ hasBlur })
+}
+
+const DataResolver = [
+  {
+    match: asyncRes(EVENT.DRAWER.AFTER_CLOSE),
+    action: () => store.reset(),
+  },
+]
+
+// ###############################
+// init & uninit handlers
+// ###############################
+
+export const useInit = (_store: TStore): void => {
+  useEffect(() => {
+    store = _store
+    if (!sub$) {
+      sub$ = sr71$.data().subscribe($solver(DataResolver, []))
+    }
+    // return () => store.reset()
+  }, [_store])
+}
diff --git a/src/containers/editor/WallpaperEditor/schema.ts b/src/containers/editor/WallpaperEditor/schema.ts
new file mode 100644
index 000000000..fb2a9f07a
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/schema.ts
@@ -0,0 +1,23 @@
+import { gql } from '@urql/core'
+
+const simpleMutation = gql`
+  mutation ($id: ID!) {
+    post(id: $id) {
+      id
+    }
+  }
+`
+const simpleQuery = gql`
+  query ($filter: filter!) {
+    post(id: $id) {
+      id
+    }
+  }
+`
+
+const schema = {
+  simpleMutation,
+  simpleQuery,
+}
+
+export default schema
diff --git a/src/containers/editor/WallpaperEditor/spec.d.ts b/src/containers/editor/WallpaperEditor/spec.d.ts
new file mode 100644
index 000000000..48e9d810c
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/spec.d.ts
@@ -0,0 +1,13 @@
+import type { TWallpaper, TWallpaperType } from '@/spec'
+
+export type TWallpaperData = {
+  wallpaper: string
+  gradientWallpapers: Record<string, TWallpaper>
+  patternWallpapers: Record<string, TWallpaper>
+  wallpaperType: TWallpaperType
+  hasPattern: boolean
+  hasBlur: boolean
+  direction: string
+}
+
+export type TTab = 'buildin' | 'custom'
diff --git a/src/containers/editor/WallpaperEditor/store.ts b/src/containers/editor/WallpaperEditor/store.ts
new file mode 100644
index 000000000..fa8278629
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/store.ts
@@ -0,0 +1,114 @@
+/*
+ * WallpaperEditor store
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+import { keys, values, clone, forEach, pick } from 'ramda'
+
+import { GRADIENT_WALLPAPER, PATTERN_WALLPAPER } from '@/constant'
+import type {
+  TCommunity,
+  TRootStore,
+  TWallpaper,
+  TWallpaperType,
+  TWallpaperGradient,
+  TWallpaperPic,
+} from '@/spec'
+import { buildLog } from '@/utils/logger'
+import { markStates, toJS } from '@/utils/mobx'
+import { getWallpaperType } from '@/utils/wallpaper'
+
+import type { TWallpaperData } from './spec'
+import { TAB } from './constant'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:WallpaperEditor')
+
+const WallpaperEditor = T.model('WallpaperEditor', {
+  tab: T.optional(T.enumeration(values(TAB)), TAB.BUILDIN),
+  wallpaper: T.optional(T.string, 'green'),
+
+  // for gradient colors
+  hasPattern: T.optional(T.boolean, true),
+  hasBlur: T.optional(T.boolean, false),
+  direction: T.optional(T.string, 'bottom'),
+})
+  .views((self) => ({
+    get curCommunity(): TCommunity {
+      const root = getParent(self) as TRootStore
+
+      return toJS(root.viewing.community)
+    },
+
+    get patternWallpapers(): Record<string, TWallpaper> {
+      const slf = self as TStore
+      const wallpapers = clone(PATTERN_WALLPAPER)
+      const paperKeys = keys(PATTERN_WALLPAPER)
+
+      forEach((key) => {
+        const wallpaperObj = wallpapers[key] as TWallpaperPic
+        wallpaperObj.hasBlur = slf.hasBlur
+      }, paperKeys)
+
+      return wallpapers
+    },
+
+    get gradientWallpapers(): Record<string, TWallpaper> {
+      const slf = self as TStore
+      const wallpapers = clone(GRADIENT_WALLPAPER)
+      const paperKeys = keys(GRADIENT_WALLPAPER)
+
+      forEach((key) => {
+        const wallpaperObj = wallpapers[key] as TWallpaperGradient
+
+        wallpaperObj.hasPattern = slf.hasPattern
+        wallpaperObj.hasBlur = slf.hasBlur
+        wallpaperObj.direction = slf.direction
+      }, paperKeys)
+
+      return wallpapers
+    },
+
+    get wallpapers(): Record<string, TWallpaper> {
+      const slf = self as TStore
+
+      return {
+        ...slf.gradientWallpapers,
+        ...slf.patternWallpapers,
+      }
+    },
+
+    get wallpaperType(): TWallpaperType {
+      const slf = self as TStore
+      return getWallpaperType(slf.wallpaper)
+    },
+
+    get wallpaperData(): TWallpaperData {
+      const slf = self as TStore
+
+      return pick(
+        [
+          'wallpaper',
+          'patternWallpapers',
+          'gradientWallpapers',
+          'wallpaperType',
+          'hasPattern',
+          'hasBlur',
+          'direction',
+        ],
+        slf,
+      )
+    },
+  }))
+  .actions((self) => ({
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+    reset(): void {
+      self.tab = TAB.BUILDIN
+    },
+  }))
+
+export type TStore = Instance<typeof WallpaperEditor>
+
+export default WallpaperEditor
diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts b/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts
new file mode 100644
index 000000000..e70c7d15a
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts
@@ -0,0 +1,82 @@
+import styled from 'styled-components'
+
+import type { TActive } from '@/spec'
+import css, { theme } from '@/utils/css'
+
+const metric = {
+  bottom: {
+    rotate: '270deg',
+  },
+  top: {
+    rotate: '90deg',
+  },
+  left: {
+    rotate: '0deg',
+  },
+  right: {
+    rotate: '180deg',
+  },
+}
+
+export const Wrapper = styled.div`
+  ${css.circle(54)};
+  border: 1px solid;
+  border-color: ${theme('border')};
+  position: relative;
+  margin-top: 12px;
+  margin-left: 5px;
+`
+export const NeedleDot = styled.div`
+  ${css.circle(4)};
+  background: ${theme('thread.articleTitle')};
+  position: absolute;
+  left: 25px;
+  top: 24px;
+`
+export const Needle = styled.div<{ direction: string }>`
+  position: absolute;
+  width: 25px;
+  height: 1px;
+  background: ${theme('thread.articleTitle')};
+  top: 25px;
+  left: 2px;
+
+  transform: ${({ direction }) => `rotate(${metric[direction].rotate}) `};
+  transform-origin: right;
+`
+const Point = styled.div<TActive>`
+  position: absolute;
+  font-size: 8px;
+  ${css.circle(16)};
+  ${css.flex('align-both')};
+  z-index: 2;
+
+  font-weight: ${({ $active }) => ($active ? 600 : 'bormal')};
+  background: ${({ $active }) =>
+    $active ? theme('thread.articleTitle') : theme('border')};
+  color: ${({ $active }) =>
+    !$active ? theme('thread.articleTitle') : 'white'};
+
+  &:hover {
+    background: ${theme('thread.articleDigest')};
+    font-weight: 600;
+    cursor: pointer;
+    color: white;
+  }
+`
+export const Top = styled(Point)`
+  top: -7px;
+  left: 19px;
+`
+export const Bottom = styled(Point)`
+  bottom: -8px;
+  left: 19px;
+`
+export const Left = styled(Point)`
+  top: 18px;
+  left: -8px;
+`
+export const Right = styled(Point)`
+  top: 18px;
+  right: -8px;
+`
diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts b/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts
new file mode 100644
index 000000000..980a6047b
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts
@@ -0,0 +1,58 @@
+import styled from 'styled-components'
+
+import type { TActive } from '@/spec'
+import css, { animate, theme } from '@/utils/css'
+
+export const Wrapper = styled.div`
+  ${css.flex()};
+  width: calc(100% + 30px);
+  flex-wrap: wrap;
+  margin-top: 10px;
+`
+export const Block = styled.div`
+  margin-right: 12px;
+`
+export const BallWrapper = styled.div<TActive>`
+  ${css.size(36)};
+  ${css.flex('align-both')};
+  border-radius: 100%;
+  border: 1.5px solid;
+  border-color: ${({ $active }) =>
+    $active ? theme('thread.articleTitle') : 'transparent'};
+  padding: 3px;
+  background: ${({ $active }) => ($active ? theme('border') : 'transparent')};
+  margin-bottom: 10px;
+
+  &:hover {
+    background: ${theme('border')};
+    cursor: pointer;
+  }
+
+  transition: all 0.1s linear;
+`
+type TColorBall = { background: string } & TActive
+export const ColorBall = styled.div<TColorBall>`
+  ${css.circle(30)};
+  ${({ $active }) => ($active ? css.circle(28) : css.circle(30))};
+
+  background: ${({ background }) => background || 'transparent'};
+  background-size: 200px;
+
+  &:active {
+    animation: ${animate.breath} 2s linear;
+  }
+
+  transition: all 0.1s linear;
+`
+export const ActiveSign = styled.div`
+  ${css.size(24)};
+  background: ${theme('border')};
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 30px;
+  z-index: 3;
+  border: 1px solid;
+  border-color: ${theme('thread.articleTitle')};
+`
diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/index.ts b/src/containers/editor/WallpaperEditor/styles/build_in/index.ts
new file mode 100644
index 000000000..4955cd30c
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/styles/build_in/index.ts
@@ -0,0 +1,37 @@
+import styled from 'styled-components'
+
+import type { TTestable, TActive } from '@/spec'
+import css, { theme } from '@/utils/css'
+import { LineDivider } from '@/widgets/Common'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  position: relative;
+  height: 100%;
+`
+export const Title = styled.div`
+  font-size: 14px;
+  color: ${theme('thread.articleDigest')};
+  font-weight: bold;
+  margin-bottom: 16px;
+  margin-left: 2px;
+`
+export const SettingWrapper = styled.div<TActive>`
+  ${css.flex()};
+  display: ${({ show }) => (show ? 'flex' : 'none')};
+  margin-left: 3px;
+`
+export const Divider = styled(LineDivider)`
+  height: 70px;
+  margin-left: 10px;
+  margin-right: 65px;
+  opacity: 0.3;
+  margin-top: 30px;
+`
+export const GeneralSettings = styled.div`
+  width: 45%;
+`
+export const AngleSettings = styled.div`
+  margin-top: -1px;
+`
diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/pattern_group.ts b/src/containers/editor/WallpaperEditor/styles/build_in/pattern_group.ts
new file mode 100644
index 000000000..33f141291
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/styles/build_in/pattern_group.ts
@@ -0,0 +1,57 @@
+import styled from 'styled-components'
+
+import type { TActive } from '@/spec'
+import Img from '@/Img'
+import css, { theme } from '@/utils/css'
+import CheckedSVG from '@/icons/Checked'
+
+export const Wrapper = styled.div`
+  ${css.flex()};
+  width: calc(100% + 30px);
+  flex-wrap: wrap;
+  margin-top: 10px;
+`
+export const Block = styled.div<TActive>`
+  position: relative;
+  width: 168px;
+  height: 110px;
+  margin-right: 16px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 2px solid;
+  border-color: ${({ $active }) =>
+    $active ? theme('thread.articleTitle') : 'transparent'};
+  opacity: ${({ $active }) => ($active ? 1 : 0.85)};
+
+  &:hover {
+    border-color: ${theme('thread.articleTitle')};
+    cursor: pointer;
+    opacity: 0.85;
+  }
+
+  transition: all 0.2s linear;
+`
+export const Image = styled(Img)`
+  width: 100%;
+  object-fit: cover;
+`
+export const ActiveSign = styled.div`
+  ${css.size(24)};
+  background: ${theme('border')};
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 30px;
+  z-index: 3;
+  border: 1px solid;
+  border-color: ${theme('thread.articleTitle')};
+`
+export const CheckIcon = styled(CheckedSVG)`
+  fill: ${theme('thread.articleTitle')};
+  ${css.size(16)};
+  position: absolute;
+  top: 2px;
+  left: 6px;
+`
diff --git a/src/containers/editor/WallpaperEditor/styles/custom/index.ts b/src/containers/editor/WallpaperEditor/styles/custom/index.ts
new file mode 100644
index 000000000..d3edb3edd
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/styles/custom/index.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+import css from '@/utils/css'
+
+export const Wrapper = styled.div`
+  ${css.flexColumn()};
+  margin-top: 15px;
+`
+export const holder = 1
diff --git a/src/containers/editor/WallpaperEditor/styles/custom/upload_box.ts b/src/containers/editor/WallpaperEditor/styles/custom/upload_box.ts
new file mode 100644
index 000000000..29de18755
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/styles/custom/upload_box.ts
@@ -0,0 +1,57 @@
+import styled from 'styled-components'
+
+import css, { theme } from '@/utils/css'
+import UploadSVG from '@/icons/Upload'
+import MoreSVG from '@/icons/menu/More'
+
+export const Wrapper = styled.div`
+  ${css.flexColumn('align-both')};
+  position: relative;
+  border: 1px dashed;
+  border-radius: 5px;
+  border-color: ${theme('border')};
+  width: 100%;
+  height: 160px;
+  cursor: pointer;
+  background: #fcfcfc;
+
+  &:hover {
+    border: 1px dashed;
+    border-color: ${theme('thread.extraInfo')};
+  }
+  transition: all 0.2s;
+`
+export const UploadIcon = styled(UploadSVG)`
+  fill: ${theme('thread.extraInfo')};
+  ${css.size(30)};
+`
+export const Title = styled.div`
+  font-size: 14px;
+  color: ${theme('thread.extraInfo')};
+  opacity: 0.6;
+  margin-top: 15px;
+  font-weight: bold;
+
+  ${Wrapper}:hover & {
+    opacity: 1;
+  }
+
+  transition: all 0.2s;
+`
+export const Menu = styled.div`
+  ${css.size(30)};
+  ${css.flex('align-both')};
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  border-radius: 4px;
+  background: white;
+  border: 1px solid;
+  border-color: ${theme('border')};
+  border-radius: 5px;
+  z-index: 2;
+`
+export const MoreIcon = styled(MoreSVG)`
+  ${css.size(16)};
+  fill: ${theme('thread.extraInfo')};
+`
diff --git a/src/containers/editor/WallpaperEditor/styles/footer.ts b/src/containers/editor/WallpaperEditor/styles/footer.ts
new file mode 100644
index 000000000..3de85f654
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/styles/footer.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+import css, { theme } from '@/utils/css'
+
+import ForbidSVG from '@/icons/ForbidImg'
+import Button from '@/widgets/Buttons/Button'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center', 'justify-between')};
+  width: 100%;
+  padding: 0 30px;
+  padding-left: 25px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid;
+  border-top-color: ${theme('border')};
+  height: 65px;
+`
+export const ForbidImgIcon = styled(ForbidSVG)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(15)};
+  margin-right: 10px;
+`
+export const ConfirmBtn = styled(Button)`
+  height: 28px;
+`
diff --git a/src/containers/editor/WallpaperEditor/styles/index.ts b/src/containers/editor/WallpaperEditor/styles/index.ts
new file mode 100644
index 000000000..86d98eed6
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/styles/index.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+import { theme } from '@/utils/css'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  position: relative;
+  height: 100%;
+`
+export const Banner = styled.div`
+  padding: 20px 30px;
+`
+export const Title = styled.div`
+  font-size: 17px;
+  color: ${theme('thread.articleTitle')};
+  font-weight: bold;
+  margin-bottom: 16px;
+  margin-left: 2px;
+`
+export const Content = styled.div`
+  padding: 0 30px;
+  height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+`
diff --git a/src/containers/editor/WallpaperEditor/tests/index.test.js b/src/containers/editor/WallpaperEditor/tests/index.test.js
new file mode 100644
index 000000000..986e8a0bd
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/tests/index.test.js
@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import WallpaperEditor from '../index'
+
+describe('TODO <WallpaperEditor />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})
diff --git a/src/containers/editor/WallpaperEditor/tests/store.test.js b/src/containers/editor/WallpaperEditor/tests/store.test.js
new file mode 100644
index 000000000..57a4856fa
--- /dev/null
+++ b/src/containers/editor/WallpaperEditor/tests/store.test.js
@@ -0,0 +1,10 @@
+/*
+ * WallpaperEditor store test
+ *
+ */
+
+// import WallpaperEditor from '../index'
+
+it('TODO: store test WallpaperEditor', () => {
+  expect(1 + 1).toBe(2)
+})
diff --git a/src/containers/layout/GlobalLayout/CustomBg.tsx b/src/containers/layout/GlobalLayout/CustomBg.tsx
deleted file mode 100644
index 1a8399955..000000000
--- a/src/containers/layout/GlobalLayout/CustomBg.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { FC, memo } from 'react'
-
-import { isString } from '@/utils/validator'
-import { Wrapper } from './styles/custom_bg'
-
-type TBackgroundEffect =
-  | {
-      bgImage: string
-      bgColor?: string
-      bgSize?: 'contain' | 'cover' | 'auto'
-    }
-  | string
-
-const ComstomBg: FC = () => {
-  const effects = {
-    // linear colors
-    b: `
-      background: #2c3e50; /* fallback for old browsers */
-      background: -webkit-linear-gradient(to right, #2c3e50, #fd746c); /* Chrome 10-25, Safari 5.1-6 */
-      background: linear-gradient(to right, #2c3e50, #fd746c);
-    `,
-
-    // custom-images
-    e: {
-      bgImage: '/bg/Waihou.png',
-    },
-    f: {
-      bgImage: '/bg/Limones.jpeg',
-    },
-    g: {
-      bgImage: '/bg/Mataura.png',
-      bgSize: 'cover',
-    },
-    j: {
-      bgImage: '/bg/Taieri.png',
-      bgColor: '#050139', // backgroundBg or fallback
-    },
-    k: {
-      bgImage: '/bg/Squares.png',
-    },
-    m: {
-      bgImage: '/bg/Antiquitarian.jpeg',
-    },
-    l: {
-      bgImage: '/bg/CyBeRGaTa.jpeg',
-    },
-    o: {
-      bgImage: '/bg/Fishes.jpeg',
-    },
-    x: {
-      bgImage: '/bg/space.svg',
-      bgColor: '#002630', // backgroundBg
-    },
-    tg: {
-      bgImage: '/bg/tg-green.jpg',
-      bgSize: 'auto',
-    },
-    tg2: {
-      bgImage: '/bg/tg-earth.jpg',
-    },
-    tg3: {
-      bgImage: '/bg/tg-code.jpg',
-    },
-    tg4: {
-      bgImage: '/bg/tg-elec.jpg',
-    },
-    tg5: {
-      bgImage: '/bg/tg-co2.jpeg',
-    },
-    tg6: {
-      bgImage: '/bg/tg-cartoon.jpeg',
-    },
-    tg7: {
-      bgImage: '/bg/tg-istanbul.jpeg',
-    },
-  }
-
-  const effect = effects.tg6
-
-  // for linear/solid background colors
-  if (isString(effect)) {
-    // @ts-ignore
-    return <Wrapper effect={effect as string} />
-  }
-
-  // @ts-ignore
-  const { bgImage, bgColor = '', bgSize = 'contain' } = effect
-
-  // for custom image/svg
-  // for use style object not passing props
-  // @link see https://github.com/styled-components/styled-components/issues/3315#issuecomment-885977691
-  return (
-    <Wrapper
-      effect={`background-color: ${bgColor}; background-size: ${bgSize}`}
-      style={{
-        backgroundImage: `url(${bgImage})`,
-      }}
-    />
-  )
-}
-
-export default memo(ComstomBg)
diff --git a/src/containers/layout/GlobalLayout/Wallpaper.tsx b/src/containers/layout/GlobalLayout/Wallpaper.tsx
new file mode 100644
index 000000000..32b1969cd
--- /dev/null
+++ b/src/containers/layout/GlobalLayout/Wallpaper.tsx
@@ -0,0 +1,22 @@
+import { FC, memo } from 'react'
+
+import type { TWallpaper } from '@/spec'
+import { parseWallpaper } from '@/utils/wallpaper'
+
+import { Wrapper } from './styles/wallpaper'
+
+type TProps = {
+  wallpaper: string
+  wallpapers: Record<string, TWallpaper>
+}
+
+const Wallpaper: FC<TProps> = ({ wallpaper, wallpapers }) => {
+  const { background, effect } = parseWallpaper(wallpapers, wallpaper)
+
+  // for custom image/svg
+  // for use style object not passing props
+  // @link see https://github.com/styled-components/styled-components/issues/3315#issuecomment-885977691
+  return <Wrapper style={{ background }} effect={effect} />
+}
+
+export default memo(Wallpaper)
diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index d59c27ba7..85342bd6d 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -24,7 +24,7 @@ import Header from '@/widgets/Header'
 
 import type { TStore } from './store'
 import SEO from './SEO'
-import CustomBg from './CustomBg'
+import Wallpaper from './Wallpaper'
 
 import { CustomScroller, Footer, ModeLine } from './dynamic'
 
@@ -56,11 +56,11 @@ const GlobalLayoutContainer: FC<TProps> = ({
   // load debug graph
   useInit(store, { isMobile })
 
-  const { accountInfo, sidebarPin, curCommunity } = store
+  const { accountInfo, sidebarPin, curCommunity, wallpaper, wallpapers } = store
 
   return (
     <ThemePalette>
-      <CustomBg />
+      <Wallpaper wallpaper={wallpaper} wallpapers={wallpapers} />
       <Wrapper>
         <SEO metric={metric} config={seoConfig} />
         <InnerWrapper metric={metric} sidebarPin={sidebarPin}>
diff --git a/src/containers/layout/GlobalLayout/store.ts b/src/containers/layout/GlobalLayout/store.ts
index 852f3ffbd..b6cd07097 100755
--- a/src/containers/layout/GlobalLayout/store.ts
+++ b/src/containers/layout/GlobalLayout/store.ts
@@ -5,7 +5,13 @@
 
 import { types as T, getParent, Instance } from 'mobx-state-tree'
 
-import type { TRootStore, TAccount, TC11N, TCommunity } from '@/spec'
+import type {
+  TRootStore,
+  TAccount,
+  TC11N,
+  TCommunity,
+  TWallpaper,
+} from '@/spec'
 import { markStates, toJS } from '@/utils/mobx'
 
 const Platform = T.model('Platform', {
@@ -41,6 +47,14 @@ const GlobalLayout = T.model('GlobalLayoutStore', {
       const root = getParent(self) as TRootStore
       return root.sidebar.pin
     },
+    get wallpaper(): string {
+      const root = getParent(self) as TRootStore
+      return root.wallpaperEditor.wallpaper
+    },
+    get wallpapers(): Record<string, TWallpaper> {
+      const root = getParent(self) as TRootStore
+      return root.wallpaperEditor.wallpapers
+    },
   }))
   .actions((self) => ({
     toast(type, options): void {
diff --git a/src/containers/layout/GlobalLayout/styles/custom_bg.ts b/src/containers/layout/GlobalLayout/styles/wallpaper.ts
similarity index 93%
rename from src/containers/layout/GlobalLayout/styles/custom_bg.ts
rename to src/containers/layout/GlobalLayout/styles/wallpaper.ts
index bb898bcf8..4a1e69e12 100644
--- a/src/containers/layout/GlobalLayout/styles/custom_bg.ts
+++ b/src/containers/layout/GlobalLayout/styles/wallpaper.ts
@@ -10,6 +10,7 @@ export const Wrapper = styled.div<{ effect: string }>`
   /* see https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/ */
   will-change: transform;
   ${({ effect }) => effect || ''};
+  transition: all 0.25s;
 `
 
 export const holder = 1
diff --git a/src/containers/tool/Drawer/Content/DesktopView.tsx b/src/containers/tool/Drawer/Content/DesktopView.tsx
index c5659b1c7..ce577a6da 100644
--- a/src/containers/tool/Drawer/Content/DesktopView.tsx
+++ b/src/containers/tool/Drawer/Content/DesktopView.tsx
@@ -5,6 +5,7 @@ import CustomScroller from '@/widgets/CustomScroller'
 
 import renderContent from './renderContent'
 import { Wrapper } from '../styles/content'
+import { isViewerMode } from '../styles/metrics'
 
 type TProps = {
   visible: boolean
@@ -26,19 +27,23 @@ const Content: FC<TProps> = ({ visible, type, attUser, userListerType }) => {
     }
   }, [visible, ref])
 
-  return (
-    <Wrapper>
-      <CustomScroller
-        instanceKey={DRAWER_SCROLLER}
-        direction="vertical"
-        height="100vh"
-        barSize="medium"
-        showShadow={false}
-      >
-        {renderContent(type, attUser, userListerType)}
-      </CustomScroller>
-    </Wrapper>
-  )
+  if (isViewerMode(type)) {
+    return (
+      <Wrapper>
+        <CustomScroller
+          instanceKey={DRAWER_SCROLLER}
+          direction="vertical"
+          height="100vh"
+          barSize="medium"
+          showShadow={false}
+        >
+          {renderContent(type, attUser, userListerType)}
+        </CustomScroller>
+      </Wrapper>
+    )
+  }
+
+  return <Wrapper>{renderContent(type, attUser, userListerType)}</Wrapper>
 }
 
 export default memo(Content)
diff --git a/src/containers/tool/Drawer/Content/renderContent.tsx b/src/containers/tool/Drawer/Content/renderContent.tsx
index e63c7915b..04a411f27 100644
--- a/src/containers/tool/Drawer/Content/renderContent.tsx
+++ b/src/containers/tool/Drawer/Content/renderContent.tsx
@@ -9,6 +9,7 @@ import {
   MailsViewer,
   // editors
   AccountEditor,
+  WallpaperEditor,
   // utils
   C11NSettingPanel,
   // userlister
@@ -39,6 +40,10 @@ const renderContent = (
       // @ts-ignore
       return <C11NSettingPanel />
 
+    case TYPE.DRAWER.CUSTOM_BG_EDITOR:
+      // @ts-ignore
+      return <WallpaperEditor />
+
     case TYPE.DRAWER.MODELINE_MENU:
       // @ts-ignore
       return <ModeLineMenu type={mmType} />
diff --git a/src/containers/tool/Drawer/dynamics.tsx b/src/containers/tool/Drawer/dynamics.tsx
index 5ee9ea852..16ba9387f 100755
--- a/src/containers/tool/Drawer/dynamics.tsx
+++ b/src/containers/tool/Drawer/dynamics.tsx
@@ -83,3 +83,11 @@ export const C11NSettingPanel = dynamic(
     ssr: false,
   },
 )
+
+export const WallpaperEditor = dynamic(
+  () => import('@/containers/editor/WallpaperEditor'),
+  {
+    loading: () => <CommonLoading />,
+    ssr: false,
+  },
+)
diff --git a/src/containers/tool/Drawer/logic.ts b/src/containers/tool/Drawer/logic.ts
index 6c7b8a295..7800f71a4 100755
--- a/src/containers/tool/Drawer/logic.ts
+++ b/src/containers/tool/Drawer/logic.ts
@@ -161,12 +161,6 @@ const DataResolver = [
     match: asyncRes(EVENT.DRAWER.OPEN),
     action: (res) => {
       const payload = res[EVENT.DRAWER.OPEN]
-      console.log(' >>> payload >>> ', payload)
-      /*
-         log('should open payload thread: ', payload.thread)
-         log('should open payload id: ', payload.data.id)
-         log('payload curCommunity: ', store.curCommunity.raw)
-       */
       if (!contains(payload.type, FUNCTION_TYPES) && store.isMobile) {
         const { data: article } = payload
         const targetUrl = `/${article.meta.thread.toLowerCase()}/${article.id}`
diff --git a/src/containers/tool/Drawer/store.ts b/src/containers/tool/Drawer/store.ts
index 50e748703..8466344a0 100755
--- a/src/containers/tool/Drawer/store.ts
+++ b/src/containers/tool/Drawer/store.ts
@@ -54,8 +54,10 @@ const DrawerStore = T.model('DrawerStore', {
       TYPE.DRAWER.MAILS_VIEW,
       //
       TYPE.DRAWER.C11N_SETTINGS,
+      TYPE.DRAWER.CUSTOM_BG_EDITOR,
       TYPE.DRAWER.MODELINE_MENU,
       TYPE.DRAWER.USER_LISTER,
+
       ...ARTICLE_THREAD_CURD_TYPES,
     ]),
   ),
@@ -184,7 +186,8 @@ const DrawerStore = T.model('DrawerStore', {
 
       if (
         type !== TYPE.DRAWER.ACCOUNT_EDIT &&
-        type !== TYPE.DRAWER.C11N_SETTINGS
+        type !== TYPE.DRAWER.C11N_SETTINGS &&
+        type !== TYPE.DRAWER.CUSTOM_BG_EDITOR
       ) {
         slf.markPreviewURLIfNeed(data)
       }
diff --git a/src/spec/index.ts b/src/spec/index.ts
index ccadf74ae..af0ae31c4 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -131,6 +131,14 @@ export type { TAccountStore, TViewingStore } from './store'
 
 export type { TEmotion, TEmotionType } from './emotion'
 
+export type {
+  TWallpaperPic,
+  TWallpaperGradient,
+  TWallpaperFmt,
+  TWallpaper,
+  TWallpaperType,
+} from './wallpaper'
+
 export type TRoute = {
   communityPath?: string
   threadPath?: string
diff --git a/src/spec/wallpaper.d.ts b/src/spec/wallpaper.d.ts
new file mode 100644
index 000000000..09fa3fc07
--- /dev/null
+++ b/src/spec/wallpaper.d.ts
@@ -0,0 +1,22 @@
+export type TWallpaperFmt = {
+  effect: string
+  background: string
+}
+
+export type TWallpaperGradient = {
+  colors?: string[]
+  hasPattern?: boolean
+  hasBlur?: boolean
+  direction?: string
+}
+
+export type TWallpaperPic = {
+  bgImage?: string
+  bgColor?: string
+  bgSize?: string // 'contain' | 'cover' | 'auto'
+  hasBlur?: boolean
+}
+
+export type TWallpaper = TWallpaperGradient | TWallpaperPic
+
+export type TWallpaperType = 'pattern' | 'gradient' | 'custom' | 'none'
diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts
index ad803a665..de54c32ac 100755
--- a/src/stores/RootStore/index.ts
+++ b/src/stores/RootStore/index.ts
@@ -69,6 +69,7 @@ import {
   CoolGuideContentStore,
 
   // GEN: IMPORT SUBSTORE
+  WallpaperEditorStore,
   HelpThreadStore,
   AboutThreadStore,
   ChangelogThreadStore,
@@ -171,6 +172,7 @@ const rootStore = T.model({
   coolGuideContent: T.optional(CoolGuideContentStore, {}),
 
   // GEN: PLUG SUBSTORE TO ROOTSTORE
+  wallpaperEditor: T.optional(WallpaperEditorStore, {}),
   helpThread: T.optional(HelpThreadStore, {}),
   aboutThread: T.optional(AboutThreadStore, {}),
   changelogThread: T.optional(ChangelogThreadStore, {}),
diff --git a/src/stores/index.ts b/src/stores/index.ts
index e724513a1..52e180b90 100755
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -78,6 +78,7 @@ export { default as CommunityEditorStore } from '@/containers/editor/CommunityEd
 export { default as WorksEditorStore } from '@/containers/editor/WorksEditor/store'
 
 // GEN: EXPORT CONTAINERS STORE HERE
+export { default as WallpaperEditorStore } from '@/containers/editor/WallpaperEditor/store'
 export { default as HelpThreadStore } from '@/containers/thread/HelpThread/store'
 export { default as AboutThreadStore } from '@/containers/thread/AboutThread/store'
 export { default as ChangelogThreadStore } from '@/containers/thread/ChangelogThread/store'
diff --git a/src/widgets/Buttons/styles/button.ts b/src/widgets/Buttons/styles/button.ts
index e672d1024..999c3afe7 100644
--- a/src/widgets/Buttons/styles/button.ts
+++ b/src/widgets/Buttons/styles/button.ts
@@ -17,6 +17,8 @@ export const Wrapper = styled.button<TButton>`
   ${css.flex('align-both')};
   -webkit-appearance: button;
   outline: none;
+  // otherwise the slim effect will appear outside
+  overflow: hidden;
 
   line-height: 1.5;
   text-align: center;
diff --git a/src/widgets/Checker/styles/index.ts b/src/widgets/Checker/styles/index.ts
index fdddaaa6b..4e12fecd7 100755
--- a/src/widgets/Checker/styles/index.ts
+++ b/src/widgets/Checker/styles/index.ts
@@ -22,21 +22,23 @@ export const Wrapper = styled.div<TWrapper>`
 `
 export const IconWrapper = styled.div<TItem>`
   position: relative;
-  background: ${({ checked }) => (checked ? '#0d3d4e' : '#0b2631')};
+  background: ${({ checked }) =>
+    checked ? theme('thread.articleDigest') : 'transparent'};
   width: ${({ size }) => getIconSize(size)};
   height: ${({ size }) => getIconSize(size)};
   ${css.flex('align-both')};
 
   border: ${({ disabled }) => (!disabled ? '1px solid' : 'none')};
 
-  border-color: ${({ checked }) => (checked ? '#246b8c' : '#1c5975')};
+  border-color: ${({ checked }) =>
+    checked ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   border-radius: ${({ size }) => getBorderRadius(size)};
 
   transition: all 0.2s;
 `
 export const CheckIcon = styled(CheckedSVG)<TItem>`
   position: absolute;
-  fill: #327faf;
+  fill: ${({ checked }) => (checked ? 'white' : 'none')};
   display: ${({ checked }) => (checked ? 'block' : 'none')};
   width: ${({ size }) => getIconSize(size)};
   height: ${({ size }) => getIconSize(size)};
@@ -48,7 +50,7 @@ export const ChildWrapper = styled.div<TItem>`
   color: ${({ checked }) =>
     checked ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   font-size: ${({ size }) => getFontSize(size)};
-  margin-left: 6px;
+  margin-left: 8px;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 
   &:hover {
diff --git a/src/widgets/Icons/ForbidImg.tsx b/src/widgets/Icons/ForbidImg.tsx
new file mode 100644
index 000000000..902c104bc
--- /dev/null
+++ b/src/widgets/Icons/ForbidImg.tsx
@@ -0,0 +1,19 @@
+import { memo, SVGProps } from 'react'
+
+const SVG = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="m779.264 51.2-76.8 76.8H204.8a128 128 0 0 0-128 128v497.664l-69.12 69.12A204.8 204.8 0 0 1 0 768V256A204.8 204.8 0 0 1 204.8 51.2zm219.648 105.984A204.8 204.8 0 0 1 1024 256v512a204.8 204.8 0 0 1-204.8 204.8H184.32l75.776-76.8H819.2a128 128 0 0 0 128-128V256a128 128 0 0 0-6.656-40.448z" />
+      <path d="M675.328 476.672 834.56 638.976a38.4 38.4 0 0 1-54.784 53.76l-158.72-161.792zm-153.6 153.6a38.4 38.4 0 0 1-54.272 54.272zm-355.84 29.696a38.4 38.4 0 0 1 11.264-30.208l108.544-108.544a89.088 89.088 0 0 1 43.008-24.064zM27.136 911.872 911.872 27.136a38.4 38.4 0 0 1 54.272 54.272L81.408 966.144a38.4 38.4 0 0 1-54.272-54.272z" />
+    </svg>
+  )
+}
+
+export default memo(SVG)
diff --git a/src/widgets/Icons/Upload.tsx b/src/widgets/Icons/Upload.tsx
new file mode 100644
index 000000000..244d76e6f
--- /dev/null
+++ b/src/widgets/Icons/Upload.tsx
@@ -0,0 +1,18 @@
+import { memo, SVGProps } from 'react'
+
+const Upload = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width={200}
+      height={200}
+      {...props}
+    >
+      <path d="M270.792 966.105c-117.454 0-213.074-95.573-213.074-213.078v-85.193a42.62 42.62 0 1 1 85.24 0v85.193a127.98 127.98 0 0 0 127.834 127.835H753.75c70.411 0 127.834-57.321 127.834-127.835v-85.193a42.595 42.595 0 1 1 85.189 0v85.193c0 117.505-95.569 213.074-213.023 213.074zm198.86-326.697v-431.16L358.843 327.543a42.623 42.623 0 0 1-62.485-57.986l184.645-198.86c16.26-17.334 46.327-17.334 62.485 0l184.694 198.86a42.642 42.642 0 0 1-62.536 57.986L554.895 208.248v431.16a42.62 42.62 0 0 1-85.24 0z" />
+    </svg>
+  )
+}
+
+export default memo(Upload)
diff --git a/src/widgets/PostItem/DesktopView/Header.tsx b/src/widgets/PostItem/DesktopView/Header.tsx
index 30de8fdcd..f88835a82 100644
--- a/src/widgets/PostItem/DesktopView/Header.tsx
+++ b/src/widgets/PostItem/DesktopView/Header.tsx
@@ -2,9 +2,8 @@ import { FC } from 'react'
 import dynamic from 'next/dynamic'
 
 import type { TPost } from '@/spec'
-import { EVENT } from '@/constant'
 
-import { send, c11nSettings } from '@/utils/helper'
+import { callWallpaperEditor } from '@/utils/helper'
 
 import AvatarsGroup from '@/widgets/AvatarsGroup'
 // import TagsList from '@/widgets/TagsList'
@@ -33,7 +32,7 @@ const Header: FC<TProps> = ({ item }) => {
     <Wrapper>
       <Brief>
         {/* <Title onClick={() => send(EVENT.PREVIEW_ARTICLE, { article: item })}> */}
-        <Title onClick={() => c11nSettings()}>{item.title}</Title>
+        <Title onClick={() => callWallpaperEditor()}>{item.title}</Title>
         {/*  @ts-ignore */}
         <TagsList items={item.articleTags} left={12} />
       </Brief>
diff --git a/utils/constant/index.ts b/utils/constant/index.ts
index 2cf0149f4..e94ae04e6 100755
--- a/utils/constant/index.ts
+++ b/utils/constant/index.ts
@@ -35,6 +35,13 @@ export { COMMUNITY_MAP_ALIAS } from './alias'
 export { AS_STATE, AS_TYPE } from './article_state'
 
 export { default as DEFAULT_TOAST_OPTIONS } from './toast'
+
+export {
+  PATTERN_WALLPAPER,
+  GRADIENT_WALLPAPER,
+  WALLPAPER,
+  WALLPAPER_TYPE,
+} from './wallpaper'
 /* some svg icon are sensitive to fill color */
 /* some community svg need fill color, like city etc.. */
 export const NON_FILL_COMMUNITY = ['javascript']
diff --git a/utils/constant/type.ts b/utils/constant/type.ts
index de9d10e3a..63f6045dc 100755
--- a/utils/constant/type.ts
+++ b/utils/constant/type.ts
@@ -47,6 +47,9 @@ const TYPE = {
     // c11n settings
     C11N_SETTINGS: 'C11N_SETTINGS',
 
+    // custom background editor
+    CUSTOM_BG_EDITOR: 'CUSTOM_BG_EDITOR',
+
     // user lister
     USER_LISTER: 'USER_LISTER',
 
diff --git a/utils/constant/wallpaper.ts b/utils/constant/wallpaper.ts
new file mode 100644
index 000000000..bff7872fe
--- /dev/null
+++ b/utils/constant/wallpaper.ts
@@ -0,0 +1,110 @@
+import type { TWallpaper, TWallpaperType } from '@/spec'
+
+const DIR = '/wallpaper'
+
+export const WALLPAPER_TYPE = {
+  PATTERN: 'pattern',
+  GRADIENT: 'gradient',
+  CUSTOM: 'custom',
+  NONE: 'none',
+} as Record<Uppercase<TWallpaperType>, TWallpaperType>
+
+export const PATTERN_WALLPAPER = {
+  // bubbles: {
+  //   bgImage: `${DIR}/bubbles.png`,
+  // },
+  limones: {
+    bgImage: `${DIR}/limones.jpeg`,
+  },
+  mataura: {
+    bgImage: `${DIR}/mataura.png`,
+    bgSize: 'cover',
+  },
+  // curves: {
+  //   bgImage: `${DIR}/curves.png`,
+  //   bgColor: '#050139', // backgroundBg or fallback
+  // },
+  newspaper: {
+    bgImage: `${DIR}/newspaper.jpeg`,
+  },
+  rainbow: {
+    bgImage: `${DIR}/rainbow.jpeg`,
+  },
+  // fishes: {
+  //   bgImage: `${DIR}/fishes.jpeg`,
+  // },
+  // space: {
+  //   bgImage: `${DIR}/space.svg`,
+  //   bgColor: '#002630',
+  // },
+  earth: {
+    bgImage: `${DIR}/earth.jpg`,
+  },
+  code: {
+    bgImage: `${DIR}/code.jpg`,
+  },
+  // elec: {
+  //   bgImage: `${DIR}/elec.jpg`,
+  // },
+  co2: {
+    bgImage: `${DIR}/co2.jpeg`,
+  },
+  cartoon: {
+    bgImage: `${DIR}/cartoon.jpeg`,
+  },
+  // istanbul: {
+  //   bgImage: `${DIR}/istanbul.jpeg`,
+  // },
+}
+
+// demo: `
+//     background: url(${DIR}/patterns/1.png) repeat, linear-gradient(to bottom, #C6D183, #72B58C);
+//   `,
+
+const DEFAULT_GRADIENT_EFFECT = {
+  hasPattern: false,
+  hasBlur: false,
+  direction: 'to bottom',
+}
+
+export const GRADIENT_WALLPAPER = {
+  // linear gradian
+  // background: #2c3e50; /* fallback for old browsers */
+  // background: -webkit-linear-gradient(#C6D183, #72B58C); /* Chrome 10-25, Safari 5.1-6 */
+
+  green: {
+    colors: ['#C6D183', '#72B58C'],
+    ...DEFAULT_GRADIENT_EFFECT,
+    hasPattern: true,
+  },
+  purple: {
+    colors: ['#BBA4C9', '#8390CD'],
+    ...DEFAULT_GRADIENT_EFFECT,
+  },
+  yellow: {
+    colors: ['#F7CE7E', '#E17D43'],
+    ...DEFAULT_GRADIENT_EFFECT,
+  },
+  cyan: {
+    colors: ['#568A79', '#295054'],
+    ...DEFAULT_GRADIENT_EFFECT,
+  },
+  red: {
+    colors: ['#E76B66', '#6E3837'],
+    ...DEFAULT_GRADIENT_EFFECT,
+  },
+  blue: {
+    colors: ['#85AADA', '#274AA1'],
+    ...DEFAULT_GRADIENT_EFFECT,
+  },
+  pink: {
+    colors: ['#D6C4BA', '#C5BADB'],
+    ...DEFAULT_GRADIENT_EFFECT,
+    hasBlur: true,
+  },
+} as Record<string, TWallpaper>
+
+export const WALLPAPER = {
+  ...PATTERN_WALLPAPER,
+  ...GRADIENT_WALLPAPER,
+}
diff --git a/utils/helper.ts b/utils/helper.ts
index 6ab4466b2..99dbc044e 100755
--- a/utils/helper.ts
+++ b/utils/helper.ts
@@ -262,6 +262,10 @@ export const c11nSettings = (): void => {
   send(EVENT.DRAWER.OPEN, { type: TYPE.DRAWER.C11N_SETTINGS })
 }
 
+export const callWallpaperEditor = (): void => {
+  send(EVENT.DRAWER.OPEN, { type: TYPE.DRAWER.CUSTOM_BG_EDITOR })
+}
+
 export const upvoteOnArticleList = (
   article: TArticle,
   viewerHasUpvoted: boolean,
diff --git a/utils/wallpaper.ts b/utils/wallpaper.ts
new file mode 100644
index 000000000..0caa81c1d
--- /dev/null
+++ b/utils/wallpaper.ts
@@ -0,0 +1,78 @@
+import { isEmpty, keys, includes } from 'ramda'
+import { PATTERN_WALLPAPER, WALLPAPER_TYPE } from '@/constant'
+
+import type {
+  TWallpaperFmt,
+  TWallpaperGradient,
+  TWallpaperPic,
+  TWallpaper,
+  TWallpaperType,
+} from '@/spec'
+
+/**
+ * parse wallpaper both for gradient and picture background
+ */
+export const parseWallpaper = (
+  wallpapers: Record<string, TWallpaper>,
+  name: string,
+): TWallpaperFmt => {
+  if (isEmpty(name)) {
+    return {
+      effect: '',
+      background: '',
+    }
+  }
+
+  return _parseWallpaper(wallpapers[name])
+}
+
+export const getWallpaperType = (name: string): TWallpaperType => {
+  if (isEmpty(name)) return WALLPAPER_TYPE.NONE
+  if (includes(name, keys(PATTERN_WALLPAPER))) return WALLPAPER_TYPE.PATTERN
+
+  return WALLPAPER_TYPE.GRADIENT
+}
+
+/**
+ * parse wallpaper both for gradient and picture background
+ */
+const _parseWallpaper = (wallpaper: TWallpaper): TWallpaperFmt => {
+  // @ts-ignore
+  return wallpaper?.colors
+    ? _parseGradientBackground(wallpaper)
+    : _parsePicBackground(wallpaper)
+}
+
+const _parseGradientBackground = (
+  gradient: TWallpaperGradient,
+): TWallpaperFmt => {
+  const DIR = '/wallpaper'
+  const { direction, hasPattern, hasBlur } = gradient
+  const colors = gradient.colors.join(',')
+  let background = `linear-gradient(to ${direction}, ${colors})`
+
+  const patternPic = `${DIR}/patterns/1.png`
+  background = hasPattern
+    ? `url(${patternPic}) repeat, ${background}`
+    : background
+
+  const effect = hasBlur ? 'filter: blur(3px)' : ''
+
+  return {
+    effect,
+    background,
+  }
+}
+
+const _parsePicBackground = (pic: TWallpaperPic): TWallpaperFmt => {
+  const { bgImage, bgColor = '', bgSize = 'contain', hasBlur } = pic
+  const background = `url(${bgImage})`
+
+  const blur = hasBlur ? 'filter: blur(3px)' : ''
+  const effect = `background-color: ${bgColor}; background-size: ${bgSize} !important; ${blur}`
+
+  return {
+    effect,
+    background,
+  }
+}