diff --git a/package.json b/package.json
index 1d51854a3..34473658c 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "kami-design": "workspace:@mx-space/kami-design@*",
     "@floating-ui/react-dom": "1.2.2",
     "@formkit/auto-animate": "1.0.0-beta.6",
-    "@mx-space/api-client": "1.2.0",
+    "@mx-space/api-client": "1.3.2",
     "axios": "0.27.2",
     "clsx": "1.2.1",
     "css-spring": "4.1.0",
diff --git a/packages/kami-design/components/Icons/for-footer.tsx b/packages/kami-design/components/Icons/for-footer.tsx
index 77414e54c..6ac0fe8f8 100644
--- a/packages/kami-design/components/Icons/for-footer.tsx
+++ b/packages/kami-design/components/Icons/for-footer.tsx
@@ -18,3 +18,19 @@ export function FaSolidHeadphonesAlt(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+export function SubscribeOutlined(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        d="M20.99 14.04V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h10.05c.28 1.92 2.1 3.35 4.18 2.93c1.34-.27 2.43-1.37 2.7-2.71c.25-1.24-.16-2.39-.94-3.18zm-2-9.04L12 8.5L5 5h13.99zm-3.64 10H5V7l7 3.5L19 7v6.05c-.16-.02-.33-.05-.5-.05c-1.39 0-2.59.82-3.15 2zm5.15 2h-4v-1h4v1z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/kami-design/components/Modal/Modal.tsx b/packages/kami-design/components/Modal/Modal.tsx
index a66592346..84b4586c2 100644
--- a/packages/kami-design/components/Modal/Modal.tsx
+++ b/packages/kami-design/components/Modal/Modal.tsx
@@ -49,6 +49,7 @@ export const Modal = forwardRef<
         resolve(null as any)
         props.disposer()
       }, 300)
+      props.onClose && props.onClose()
     })
   }, [props.disposer])
 
diff --git a/packages/kami-design/components/Modal/stack-context.tsx b/packages/kami-design/components/Modal/stack-context.tsx
index b4cb05a06..717a4d640 100644
--- a/packages/kami-design/components/Modal/stack-context.tsx
+++ b/packages/kami-design/components/Modal/stack-context.tsx
@@ -1,18 +1,18 @@
 import { clsx } from 'clsx'
 import uniqueId from 'lodash-es/uniqueId'
-import {
+import type {
   FC,
   FunctionComponentElement,
   ReactChildren,
   ReactElement,
   ReactNode,
-  useEffect,
 } from 'react'
 import React, {
   createContext,
   createElement,
   memo,
   useContext,
+  useEffect,
   useRef,
   useState,
 } from 'react'
@@ -198,6 +198,7 @@ export const ModalStackProvider: FC<{
           component: $modalElement,
           id,
           disposer,
+          useBottomDrawerInMobile,
           ...rest,
         },
       ]
@@ -260,6 +261,7 @@ export const ModalStackProvider: FC<{
             overlayProps,
             useBottomDrawerInMobile = true,
           } = comp
+
           const extraProps = extraModalPropsMap.get(id)!
 
           const onClose = () => {
@@ -288,7 +290,7 @@ export const ModalStackProvider: FC<{
           dismissFnMapRef.current.set(Component, onClose)
           return (
             <Overlay
-              center={!isMobileViewport && useBottomDrawerInMobile}
+              center={!(isMobileViewport && useBottomDrawerInMobile)}
               standaloneWrapperClassName={clsx(
                 isMobileViewport &&
                   useBottomDrawerInMobile &&
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8c216bf3..f7f246e0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,7 @@ importers:
       '@formkit/auto-animate': 1.0.0-beta.6
       '@innei/eslint-config-react-ts': 0.9.7
       '@innei/prettier': 0.9.7
-      '@mx-space/api-client': 1.2.0
+      '@mx-space/api-client': 1.3.2
       '@next/bundle-analyzer': 13.1.6
       '@trivago/prettier-plugin-sort-imports': 4.0.0
       '@types/inflection': 1.13.0
@@ -85,7 +85,7 @@ importers:
     dependencies:
       '@floating-ui/react-dom': 1.2.2_biqbaboplfbrettd7655fr4n2y
       '@formkit/auto-animate': 1.0.0-beta.6
-      '@mx-space/api-client': 1.2.0
+      '@mx-space/api-client': 1.3.2
       axios: 0.27.2
       clsx: 1.2.1
       css-spring: 4.1.0
@@ -1122,8 +1122,8 @@ packages:
     engines: {pnpm: '>=6'}
     dev: false
 
-  /@mx-space/api-client/1.2.0:
-    resolution: {integrity: sha512-cSD3speKTWM04uXCg6/ynRcAOwLwwKX8E84d6M1HId9dUEBv7S6f0A2Vw2t86sq0nNr0m+53ifjoLVYSGFQQwg==}
+  /@mx-space/api-client/1.3.2:
+    resolution: {integrity: sha512-umLREQDoou3osc/QPahOC4Jr9x11KzUd6+J0KUVjD21T55Q82SBV1watGTuEkM0LPGYiJsuWrsDQrgMBq/LmVg==}
     engines: {pnpm: '>=6'}
     dev: false
 
diff --git a/src/components/layouts/AppLayout.tsx b/src/components/layouts/AppLayout.tsx
index fabc8834b..1c6a96078 100644
--- a/src/components/layouts/AppLayout.tsx
+++ b/src/components/layouts/AppLayout.tsx
@@ -4,7 +4,6 @@ import type { FC } from 'react'
 import { useEffect, useInsertionEffect } from 'react'
 
 import type { AggregateRoot } from '@mx-space/api-client'
-import { ModalStackProvider } from '@mx-space/kami-design/components/Modal/stack-context'
 
 import { MetaFooter } from '~/components/biz/Meta/footer'
 import { DynamicHeadMeta } from '~/components/biz/Meta/head'
@@ -22,7 +21,7 @@ import { loadStyleSheet } from '~/utils/load-script'
 import { useStore } from '../../store'
 
 export const Content: FC = observer((props) => {
-  const { userStore: master, appUIStore } = useStore()
+  const { userStore: master } = useStore()
 
   useScreenMedia()
   const { check: checkBrowser } = useCheckOldBrowser()
@@ -56,7 +55,7 @@ export const Content: FC = observer((props) => {
   }, [])
 
   return (
-    <ModalStackProvider isMobileViewport={appUIStore.viewport.mobile}>
+    <>
       <DynamicHeadMeta />
       <NextSeo
         title={`${initialData.seo.title} · ${initialData.seo.description}`}
@@ -66,6 +65,6 @@ export const Content: FC = observer((props) => {
       <div id="next">{props.children}</div>
       <Loader />
       <MetaFooter />
-    </ModalStackProvider>
+    </>
   )
 })
diff --git a/src/components/layouts/BasicLayout/Footer/actions.tsx b/src/components/layouts/BasicLayout/Footer/actions.tsx
index 6c6b99eaf..ced11bedc 100644
--- a/src/components/layouts/BasicLayout/Footer/actions.tsx
+++ b/src/components/layouts/BasicLayout/Footer/actions.tsx
@@ -13,6 +13,7 @@ import {
 import { RootPortal } from '@mx-space/kami-design/components/Portal'
 import { ScaleTransitionView } from '@mx-space/kami-design/components/Transition/scale'
 
+import { SubscribeEmail } from '~/components/widgets/Subscribe'
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/use-analyze'
 import { useStore } from '~/store'
@@ -101,7 +102,7 @@ export const FooterActions: FC = observer(() => {
             )
           })}
         </TransitionGroup>
-
+        <SubscribeEmail />
         <button aria-label="open player" onClick={handlePlayMusic}>
           <FaSolidHeadphonesAlt />
         </button>
diff --git a/src/components/layouts/BasicLayout/index.tsx b/src/components/layouts/BasicLayout/index.tsx
index 8a9b9242b..5085aeda7 100644
--- a/src/components/layouts/BasicLayout/index.tsx
+++ b/src/components/layouts/BasicLayout/index.tsx
@@ -10,6 +10,7 @@ import React, {
 import type { ShortcutOptions } from 'react-shortcut-guide'
 import { ShortcutProvider } from 'react-shortcut-guide'
 
+import { ModalStackProvider } from '@mx-space/kami-design'
 import {
   BiMoonStarsFill,
   PhSunBold,
@@ -113,7 +114,7 @@ export const BasicLayout: FC = observer(({ children }) => {
   }, [])
   const { event } = useAnalyze()
   return (
-    <>
+    <ModalStackProvider isMobileViewport={appStore.viewport.mobile}>
       <div className="inset-0 fixed bg-fixed pointer-events-none transition-opacity duration-500 ease transform-gpu">
         <div className="bg absolute inset-0 transform-gpu" />
       </div>
@@ -152,6 +153,6 @@ export const BasicLayout: FC = observer(({ children }) => {
 
         <SearchHotKey />
       </Suspense>
-    </>
+    </ModalStackProvider>
   )
 })
diff --git a/src/components/widgets/Subscribe/index.tsx b/src/components/widgets/Subscribe/index.tsx
new file mode 100644
index 000000000..00dd9d68f
--- /dev/null
+++ b/src/components/widgets/Subscribe/index.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react'
+
+import { SubscribeOutlined } from '@mx-space/kami-design/components/Icons'
+import { useModalStack } from '@mx-space/kami-design/components/Modal'
+
+import { TrackerAction } from '~/constants/tracker'
+import { useAnalyze } from '~/hooks/use-analyze'
+
+import { SubscribeModal } from './modal'
+import { useSubscribeStatus } from './query'
+
+export const SubscribeEmail = () => {
+  const { event } = useAnalyze()
+  const { present } = useModalStack()
+
+  const handleSubscribe = () => {
+    event({
+      action: TrackerAction.Click,
+      label: `底部订阅点击`,
+    })
+    const dispose = present({
+      modalProps: {
+        title: '邮件订阅',
+        closeable: true,
+        useRootPortal: true,
+      },
+      overlayProps: {
+        stopPropagation: true,
+        darkness: 0.5,
+      },
+      component: () => <SubscribeModal onConfirm={dispose} />,
+      useBottomDrawerInMobile: false,
+    })
+  }
+
+  const [canSubscribe, setCanSubscribe] = useState(false)
+
+  const query = useSubscribeStatus()
+
+  useEffect(() => {
+    const status = query.data?.enable
+    if (typeof status !== 'boolean') return
+    setCanSubscribe(status)
+  }, [query.data])
+
+  if (!canSubscribe) return null
+
+  return (
+    <button
+      aria-label="subscribe"
+      onClick={handleSubscribe}
+      className="animate-bubble animate-duration-600 animate-repeat-3"
+    >
+      <SubscribeOutlined />
+    </button>
+  )
+}
diff --git a/src/components/widgets/Subscribe/modal.tsx b/src/components/widgets/Subscribe/modal.tsx
new file mode 100644
index 000000000..0e1d7a683
--- /dev/null
+++ b/src/components/widgets/Subscribe/modal.tsx
@@ -0,0 +1,122 @@
+import { observer } from 'mobx-react-lite'
+import { useReducer } from 'react'
+import { message } from 'react-message-popup'
+
+import { Input } from '@mx-space/kami-design'
+import { MdiEmailFastOutline } from '@mx-space/kami-design/components/Icons'
+
+import { apiClient } from '~/utils/client'
+
+import { useSubscribeStatus } from './query'
+
+interface SubscribeModalProps {
+  onConfirm: () => void
+}
+
+const subscibeTextMap: Record<string, string> = {
+  post_c: '文章',
+  note_c: '笔记',
+  say_c: '说说',
+  recently_c: '速记',
+}
+
+const initialState = {
+  email: '',
+  types: {
+    post_c: false,
+    note_c: false,
+    say_c: false,
+    recently_c: false,
+  },
+}
+
+type Action =
+  | { type: 'set'; data: Partial<typeof initialState> }
+  | { type: 'reset' }
+
+const useFormData = () => {
+  const [state, dispatch] = useReducer(
+    (state: typeof initialState, payload: Action) => {
+      switch (payload.type) {
+        case 'set':
+          return { ...state, ...payload.data }
+        case 'reset':
+          return initialState
+      }
+    },
+    { ...initialState },
+  )
+  return [state, dispatch] as const
+}
+
+export const SubscribeModal = observer<SubscribeModalProps>(({ onConfirm }) => {
+  const [state, dispatch] = useFormData()
+
+  const query = useSubscribeStatus()
+
+  const handleSubList = async () => {
+    if (!state.email) {
+      message.error('请输入邮箱')
+      return
+    }
+    if (Object.values(state.types).every((type) => !type)) {
+      message.error('请选择订阅类型')
+      return
+    }
+    const { email, types } = state
+    await apiClient.subscribe.subscribe(
+      email,
+      Object.keys(types).filter((name) => state.types[name]) as any[],
+    )
+
+    message.success('订阅成功')
+    dispatch({ type: 'reset' })
+    onConfirm()
+  }
+
+  return (
+    <form action="#" onSubmit={handleSubList} className="flex flex-col gap-5">
+      <Input
+        type="text"
+        placeholder="留下你的邮箱哦 *"
+        required
+        prefix={<MdiEmailFastOutline />}
+        value={state.email}
+        onChange={(e) => {
+          dispatch({ type: 'set', data: { email: e.target.value } })
+        }}
+      />
+      <div className="flex gap-10">
+        {Object.keys(state.types)
+          .filter((type) => query.data?.allowTypes.includes(type as any))
+          .map((name) => (
+            <fieldset
+              className="inline-flex items-center children:cursor-pointer text-lg"
+              key={name}
+            >
+              <input
+                type="checkbox"
+                onChange={(e) => {
+                  dispatch({
+                    type: 'set',
+                    data: {
+                      types: {
+                        ...state.types,
+                        [name]: e.target.checked,
+                      },
+                    },
+                  })
+                }}
+                checked={state.types[name]}
+                id={name}
+              />
+              <label htmlFor={name} className="text-shizuku">
+                {subscibeTextMap[name]}
+              </label>
+            </fieldset>
+          ))}
+      </div>
+      <button className="btn yellow">订阅</button>
+    </form>
+  )
+})
diff --git a/src/components/widgets/Subscribe/query.ts b/src/components/widgets/Subscribe/query.ts
new file mode 100644
index 000000000..a2a03af1b
--- /dev/null
+++ b/src/components/widgets/Subscribe/query.ts
@@ -0,0 +1,12 @@
+import useSWR from 'swr'
+
+import { apiClient } from '~/utils/client'
+
+const SWR_CHECK_SUBSCRIBE_KEY = 'subscribe-status'
+
+export const useSubscribeStatus = () => {
+  return useSWR(SWR_CHECK_SUBSCRIBE_KEY, async () => {
+    const result = await apiClient.subscribe.check()
+    return result
+  })
+}
diff --git a/tsconfig.json b/tsconfig.json
index b221796ee..c9136ef46 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -31,7 +31,7 @@
     "incremental": true,
     "paths": {
       "@mx-space/kami-design": [
-        "../packages/kami-design"
+        "../packages/kami-design/index.ts"
       ],
       "@mx-space/kami-design/*": [
         "../packages/kami-design/*"