diff --git a/src/containers/content/HaveADrinkContent/Body/About.js b/src/containers/content/HaveADrinkContent/Body/About.tsx
similarity index 96%
rename from src/containers/content/HaveADrinkContent/Body/About.js
rename to src/containers/content/HaveADrinkContent/Body/About.tsx
index 543892a3d..ede7f390c 100755
--- a/src/containers/content/HaveADrinkContent/Body/About.js
+++ b/src/containers/content/HaveADrinkContent/Body/About.tsx
@@ -8,7 +8,7 @@ import React from 'react'
 
 import { Wrapper, Title, Body } from '../styles/body/about'
 
-const About = () => {
+const About: React.FC = () => {
   return (
     <Wrapper>
       <Title>关于『来一杯』</Title>
diff --git a/src/containers/content/HaveADrinkContent/Body/Catalog.js b/src/containers/content/HaveADrinkContent/Body/Catalog.tsx
similarity index 99%
rename from src/containers/content/HaveADrinkContent/Body/Catalog.js
rename to src/containers/content/HaveADrinkContent/Body/Catalog.tsx
index a0167df9a..7510c8495 100755
--- a/src/containers/content/HaveADrinkContent/Body/Catalog.js
+++ b/src/containers/content/HaveADrinkContent/Body/Catalog.tsx
@@ -128,7 +128,7 @@ const items = [
   },
 ]
 
-const Catalog = () => {
+const Catalog: React.FC = () => {
   return (
     <Wrapper>
       {items.map((item) => (
diff --git a/src/containers/content/HaveADrinkContent/Body/Setting.js b/src/containers/content/HaveADrinkContent/Body/Setting.tsx
similarity index 86%
rename from src/containers/content/HaveADrinkContent/Body/Setting.js
rename to src/containers/content/HaveADrinkContent/Body/Setting.tsx
index df6831010..075a67cc3 100755
--- a/src/containers/content/HaveADrinkContent/Body/Setting.js
+++ b/src/containers/content/HaveADrinkContent/Body/Setting.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 
+import type { TSettingOption } from '../spec'
+
 import {
   Wrapper,
   Divider,
@@ -11,7 +13,13 @@ import {
 
 import { setSetting } from '../logic'
 
-const Setting = ({ settingOptions: { animateType, fontSize } }) => {
+type TProps = {
+  settingOptions: TSettingOption
+}
+
+const Setting: React.FC<TProps> = ({
+  settingOptions: { animateType, fontSize },
+}) => {
   return (
     <Wrapper>
       <Block>
diff --git a/src/containers/content/HaveADrinkContent/Body/index.js b/src/containers/content/HaveADrinkContent/Body/index.tsx
similarity index 79%
rename from src/containers/content/HaveADrinkContent/Body/index.js
rename to src/containers/content/HaveADrinkContent/Body/index.tsx
index 7524bb499..57b954fbe 100755
--- a/src/containers/content/HaveADrinkContent/Body/index.js
+++ b/src/containers/content/HaveADrinkContent/Body/index.tsx
@@ -9,19 +9,24 @@ import { AnimateOnChange } from 'react-animation'
 
 import { buildLog } from '@/utils'
 
+import type { TView, TSettingOption } from '../spec'
 import Catalog from './Catalog'
 import Setting from './Setting'
 import About from './About'
 
 import { Wrapper, Sentence, Hint } from '../styles/body'
-import { LN } from '../logic'
+import { VIEW } from '../constant'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const View = ({ view, sentence, settingOptions }) => {
-  const { VIEW } = LN
+type TViewProps = {
+  view: TView
+  sentence: string
+  settingOptions: TSettingOption
+}
 
+const View: React.FC<TViewProps> = ({ view, sentence, settingOptions }) => {
   const animate = {
     fade: {
       durationOut: 200,
@@ -59,10 +64,10 @@ const View = ({ view, sentence, settingOptions }) => {
   }
 }
 
-const Body = ({ ...restProps }) => {
+const Body = (props) => {
   return (
     <Wrapper>
-      <View {...restProps} />
+      <View {...props} />
     </Wrapper>
   )
 }
diff --git a/src/containers/content/HaveADrinkContent/Footer/Contributor.js b/src/containers/content/HaveADrinkContent/Footer/Contributor.tsx
similarity index 93%
rename from src/containers/content/HaveADrinkContent/Footer/Contributor.js
rename to src/containers/content/HaveADrinkContent/Footer/Contributor.tsx
index 763041c5a..5710a4982 100755
--- a/src/containers/content/HaveADrinkContent/Footer/Contributor.js
+++ b/src/containers/content/HaveADrinkContent/Footer/Contributor.tsx
@@ -20,7 +20,7 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const IndexStatus = () => {
+const IndexStatus: React.FC = () => {
   return (
     <Wrapper>
       <Text>共收录</Text>
diff --git a/src/containers/content/HaveADrinkContent/Footer/Feature.js b/src/containers/content/HaveADrinkContent/Footer/Feature.tsx
similarity index 88%
rename from src/containers/content/HaveADrinkContent/Footer/Feature.js
rename to src/containers/content/HaveADrinkContent/Footer/Feature.tsx
index 577cad9b1..63146f1cf 100755
--- a/src/containers/content/HaveADrinkContent/Footer/Feature.js
+++ b/src/containers/content/HaveADrinkContent/Footer/Feature.tsx
@@ -11,16 +11,15 @@ import { buildLog } from '@/utils'
 
 import DotDivider from '@/components/DotDivider'
 
+import { VIEW } from '../constant'
 import { Wrapper, Icon } from '../styles/footer/feature'
-import { setView, LN } from '../logic'
+import { setView } from '../logic'
 // import { useInit } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const Feature = () => {
-  const { VIEW } = LN
-
+const Feature: React.FC = () => {
   return (
     <Wrapper>
       <div onClick={() => setView(VIEW.ABOUT)}>
diff --git a/src/containers/content/HaveADrinkContent/Footer/Share.js b/src/containers/content/HaveADrinkContent/Footer/Share.tsx
similarity index 92%
rename from src/containers/content/HaveADrinkContent/Footer/Share.js
rename to src/containers/content/HaveADrinkContent/Footer/Share.tsx
index 69594add1..fda2faaba 100755
--- a/src/containers/content/HaveADrinkContent/Footer/Share.js
+++ b/src/containers/content/HaveADrinkContent/Footer/Share.tsx
@@ -15,7 +15,7 @@ import { Wrapper, Icon } from '../styles/footer/share'
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const Reaction = () => {
+const Reaction: React.FC = () => {
   return (
     <Wrapper>
       <Icon src={`${ICON_CMD}/drink_share.svg`} />
diff --git a/src/containers/content/HaveADrinkContent/Footer/index.js b/src/containers/content/HaveADrinkContent/Footer/index.tsx
similarity index 81%
rename from src/containers/content/HaveADrinkContent/Footer/index.js
rename to src/containers/content/HaveADrinkContent/Footer/index.tsx
index f25cc8fcf..fb9b3f20a 100755
--- a/src/containers/content/HaveADrinkContent/Footer/index.js
+++ b/src/containers/content/HaveADrinkContent/Footer/index.tsx
@@ -8,19 +8,19 @@ import React from 'react'
 
 import { buildLog } from '@/utils'
 
+import type { TView } from '../spec'
+
 import Contributor from './Contributor'
 import Feature from './Feature'
 import Share from './Share'
 
+import { VIEW } from '../constant'
 import { Wrapper } from '../styles/header'
-import { LN } from '../logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
 const View = ({ view }) => {
-  const { VIEW } = LN
-
   switch (view) {
     case VIEW.DEFAULT: {
       return (
@@ -37,7 +37,11 @@ const View = ({ view }) => {
   }
 }
 
-const Footer = ({ view }) => {
+type TProps = {
+  view: TView
+}
+
+const Footer: React.FC<TProps> = ({ view }) => {
   return (
     <Wrapper>
       <View view={view} />
diff --git a/src/containers/content/HaveADrinkContent/Header/IndexStatus.js b/src/containers/content/HaveADrinkContent/Header/IndexStatus.tsx
similarity index 94%
rename from src/containers/content/HaveADrinkContent/Header/IndexStatus.js
rename to src/containers/content/HaveADrinkContent/Header/IndexStatus.tsx
index f067e306f..2cab5f891 100755
--- a/src/containers/content/HaveADrinkContent/Header/IndexStatus.js
+++ b/src/containers/content/HaveADrinkContent/Header/IndexStatus.tsx
@@ -21,7 +21,7 @@ import { setView } from '../logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const IndexStatus = () => {
+const IndexStatus: React.FC = () => {
   return (
     <Wrapper>
       <Text>共&nbsp;</Text>
diff --git a/src/containers/content/HaveADrinkContent/Header/Reaction.js b/src/containers/content/HaveADrinkContent/Header/Reaction.tsx
similarity index 91%
rename from src/containers/content/HaveADrinkContent/Header/Reaction.js
rename to src/containers/content/HaveADrinkContent/Header/Reaction.tsx
index c32094f5d..d68ca6edd 100755
--- a/src/containers/content/HaveADrinkContent/Header/Reaction.js
+++ b/src/containers/content/HaveADrinkContent/Header/Reaction.tsx
@@ -14,7 +14,7 @@ import { Wrapper } from '../styles/header/reaction'
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const Reaction = () => {
+const Reaction: React.FC = () => {
   return (
     <Wrapper>
       <div>评论 | 喜欢</div>
diff --git a/src/containers/content/HaveADrinkContent/Header/RunningTimer.js b/src/containers/content/HaveADrinkContent/Header/RunningTimer.tsx
similarity index 71%
rename from src/containers/content/HaveADrinkContent/Header/RunningTimer.js
rename to src/containers/content/HaveADrinkContent/Header/RunningTimer.tsx
index ae73853e9..4c255e6f9 100755
--- a/src/containers/content/HaveADrinkContent/Header/RunningTimer.js
+++ b/src/containers/content/HaveADrinkContent/Header/RunningTimer.tsx
@@ -5,10 +5,12 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { buildLog } from '@/utils'
 
+import type { TInterval } from '../spec'
+
+import { ANIMATE_TIMER_CLASS } from '../constant'
 import {
   Wrapper,
   TopHandlerBar,
@@ -16,13 +18,15 @@ import {
   PieFiller,
   Mask,
 } from '../styles/header/running_timer'
-import { LN } from '../logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const RunningTimer = ({ interval }) => {
-  const { ANIMATE_TIMER_CLASS } = LN
+type TProps = {
+  interval?: TInterval
+}
+
+const RunningTimer: React.FC<TProps> = ({ interval = '3s' }) => {
   return (
     <Wrapper>
       <TopHandlerBar className={ANIMATE_TIMER_CLASS} />
@@ -33,12 +37,4 @@ const RunningTimer = ({ interval }) => {
   )
 }
 
-RunningTimer.propTypes = {
-  interval: T.oneOf(['3s', '5s', '10s']),
-}
-
-RunningTimer.defaultProps = {
-  interval: '3s',
-}
-
 export default React.memo(RunningTimer)
diff --git a/src/containers/content/HaveADrinkContent/Header/Timer.js b/src/containers/content/HaveADrinkContent/Header/Timer.tsx
similarity index 89%
rename from src/containers/content/HaveADrinkContent/Header/Timer.js
rename to src/containers/content/HaveADrinkContent/Header/Timer.tsx
index 9df39329c..61b39fd00 100755
--- a/src/containers/content/HaveADrinkContent/Header/Timer.js
+++ b/src/containers/content/HaveADrinkContent/Header/Timer.tsx
@@ -11,6 +11,8 @@ import { ICON_CMD } from '@/config'
 import { buildLog } from '@/utils'
 
 import ExpandIcon from '@/components/ExpandIcon'
+
+import type { TInterval } from '../spec'
 import RunningTimer from './RunningTimer'
 import {
   Wrapper,
@@ -58,7 +60,12 @@ const SettingPanel = ({ timer, timerInterval }) => {
   )
 }
 
-const Timer = ({ timer, timerInterval }) => {
+type TProps = {
+  timer: number | null
+  timerInterval?: TInterval
+}
+
+const Timer: React.FC<TProps> = ({ timer, timerInterval = '3s' }) => {
   return (
     <Wrapper>
       <ExpandIcon
@@ -76,14 +83,4 @@ const Timer = ({ timer, timerInterval }) => {
   )
 }
 
-Timer.propTypes = {
-  timer: T.oneOfType([T.number, T.instanceOf(null)]),
-  timerInterval: T.oneOf(['3s', '5s', '10s']),
-}
-
-Timer.defaultProps = {
-  timer: null,
-  timerInterval: '3s',
-}
-
 export default React.memo(Timer)
diff --git a/src/containers/content/HaveADrinkContent/Header/index.js b/src/containers/content/HaveADrinkContent/Header/index.tsx
similarity index 85%
rename from src/containers/content/HaveADrinkContent/Header/index.js
rename to src/containers/content/HaveADrinkContent/Header/index.tsx
index 4a6be0514..5aff1467d 100755
--- a/src/containers/content/HaveADrinkContent/Header/index.js
+++ b/src/containers/content/HaveADrinkContent/Header/index.tsx
@@ -13,19 +13,20 @@ import IndexStatus from './IndexStatus'
 import Timer from './Timer'
 import Reaction from './Reaction'
 
+import { VIEW } from '../constant'
 import { Wrapper, GoBackWrapper, BackText, BackIcon } from '../styles/header'
-import { setView, LN } from '../logic'
+import { setView } from '../logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
 const View = ({ view, ...restProps }) => {
-  const { VIEW } = LN
   switch (view) {
     case VIEW.DEFAULT: {
       return (
         <>
           <IndexStatus />
+          {/* @ts-ignore */}
           <Timer {...restProps} />
           <Reaction />
         </>
@@ -43,10 +44,10 @@ const View = ({ view, ...restProps }) => {
   }
 }
 
-const Header = ({ ...restProps }) => {
+const Header = (props) => {
   return (
     <Wrapper>
-      <View {...restProps} />
+      <View {...props} />
     </Wrapper>
   )
 }
diff --git a/src/containers/content/HaveADrinkContent/constant.ts b/src/containers/content/HaveADrinkContent/constant.ts
new file mode 100644
index 000000000..b4b133d48
--- /dev/null
+++ b/src/containers/content/HaveADrinkContent/constant.ts
@@ -0,0 +1,11 @@
+// class name of the animate timer components
+export const ANIMATE_TIMER_CLASS = 'animate-timer'
+export const VIEW = {
+  DEFAULT: 'default',
+  CATALOG: 'catalog',
+  SETTING: 'setting',
+  ABOUT: 'about',
+  EDIT: 'edit',
+  SHARE: 'share',
+  COMMENT: 'comment',
+}
diff --git a/src/containers/content/HaveADrinkContent/index.js b/src/containers/content/HaveADrinkContent/index.tsx
similarity index 81%
rename from src/containers/content/HaveADrinkContent/index.js
rename to src/containers/content/HaveADrinkContent/index.tsx
index 9858a5fee..d8ba0049b 100755
--- a/src/containers/content/HaveADrinkContent/index.js
+++ b/src/containers/content/HaveADrinkContent/index.tsx
@@ -10,6 +10,7 @@ import dynamic from 'next/dynamic'
 import { pluggedIn, buildLog, scrollToTop, lockPage, unlockPage } from '@/utils'
 import { useShortcut } from '@/hooks'
 
+import type { TStore } from './store'
 import Header from './Header'
 import Footer from './Footer'
 
@@ -30,7 +31,15 @@ export const Body = dynamic(() => import('./Body'), {
 /* eslint-disable-next-line */
 const log = buildLog('C:HaveADrinkContent')
 
-const HaveADrinkContentContainer = ({ haveADrinkContent: store }) => {
+type TProps = {
+  haveADrinkContent: TStore
+  metric: string
+}
+
+const HaveADrinkContentContainer: React.FC<TProps> = ({
+  haveADrinkContent: store,
+  metric,
+}) => {
   useInit(store)
 
   useShortcut('Space', () => {
@@ -44,7 +53,7 @@ const HaveADrinkContentContainer = ({ haveADrinkContent: store }) => {
 
   return (
     <Wrapper>
-      <InnerWrapper>
+      <InnerWrapper metric={metric}>
         <Header
           view={view}
           timer={timer}
@@ -62,4 +71,4 @@ const HaveADrinkContentContainer = ({ haveADrinkContent: store }) => {
   )
 }
 
-export default pluggedIn(HaveADrinkContentContainer)
+export default pluggedIn(HaveADrinkContentContainer) as React.FC<TProps>
diff --git a/src/containers/content/HaveADrinkContent/logic.js b/src/containers/content/HaveADrinkContent/logic.ts
similarity index 79%
rename from src/containers/content/HaveADrinkContent/logic.js
rename to src/containers/content/HaveADrinkContent/logic.ts
index 9b8979630..cc4110ece 100755
--- a/src/containers/content/HaveADrinkContent/logic.js
+++ b/src/containers/content/HaveADrinkContent/logic.ts
@@ -3,37 +3,26 @@ import { useEffect } from 'react'
 import { ERR } from '@/constant'
 import { asyncSuit, buildLog, errRescue } from '@/utils'
 
+import { ANIMATE_TIMER_CLASS } from './constant'
+import type { TStore } from './store'
+
 const { SR71, $solver, asyncErr } = asyncSuit
 // import S from './schema'
 
 const sr71$ = new SR71()
 let sub$ = null
-let store = null
+
+let store: TStore | undefined
 
 /* eslint-disable-next-line */
 const log = buildLog('L:HaveADrinkContent')
 
-// local namespace
-export const LN = {
-  // class name of the animate timer components
-  ANIMATE_TIMER_CLASS: 'animate-timer',
-  VIEW: {
-    DEFAULT: 'default',
-    CATALOG: 'catalog',
-    SETTING: 'setting',
-    ABOUT: 'about',
-    EDIT: 'edit',
-    SHARE: 'share',
-    COMMENT: 'comment',
-  },
-}
-
 /**
  * change the main view type, and stop timer
  *
  * @param {string} view, view type
  */
-export const setView = (view) => {
+export const setView = (view: string): void => {
   store.mark({ view })
   stopTimer()
 }
@@ -44,7 +33,7 @@ export const setView = (view) => {
  * @param {key} optionObj, setting key
  * @param {val} string, setting value
  */
-export const setSetting = (key, val) => {
+export const setSetting = (key: string, val: string): void => {
   store.mark({ [key]: val })
   setView('default')
 }
@@ -56,13 +45,13 @@ export const setSetting = (key, val) => {
  * @return void
  * @priate
  */
-const resetAnimation = (elementClassName) => {
+const resetAnimation = (elementClassName: string): void => {
   const elements = document.querySelectorAll(`.${elementClassName}`)
 
   // first timer switch the animate part is not visible
   if (elements.length === 0) return
 
-  elements.forEach((el) => {
+  elements.forEach((el: HTMLElement) => {
     el.style.animation = 'none'
     el.offsetHeight /* trigger reflow */
     el.style.animation = null
@@ -73,12 +62,13 @@ const resetAnimation = (elementClassName) => {
  * start the refresh internal timer
  * @private
  */
-const startTimer = () => {
+const startTimer = (): void => {
   const { timerIntervalVal } = store
   let { timer } = store
 
-  resetAnimation(LN.ANIMATE_TIMER_CLASS)
+  resetAnimation(ANIMATE_TIMER_CLASS)
 
+  // @ts-ignore
   timer = setInterval(() => {
     refreshSentence()
   }, timerIntervalVal)
@@ -90,7 +80,7 @@ const startTimer = () => {
  * stop the refresh internal timer
  * @private
  */
-const stopTimer = () => {
+const stopTimer = (): void => {
   const { timer } = store
 
   clearInterval(timer)
@@ -101,7 +91,7 @@ const stopTimer = () => {
  * toggle the refresh internal timer
  * @private
  */
-export const toggleTimer = () => {
+export const toggleTimer = (): void => {
   const { timer } = store
   timer ? stopTimer() : startTimer()
 }
@@ -111,13 +101,13 @@ export const toggleTimer = () => {
  * @param {string} timerInterval, interval of the timer: 3s | 5s | 10s
  * @private
  */
-export const setTimerInterval = (timerInterval) => {
+export const setTimerInterval = (timerInterval: string): void => {
   stopTimer()
   store.mark({ timerInterval })
   startTimer()
 }
 
-export const refreshSentence = () => {
+export const refreshSentence = (): void => {
   const { pool, poolIdx } = store
 
   let nextPoolIdx
@@ -162,14 +152,14 @@ const ErrSolver = [
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     log('effect init: ', store)
 
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
     return () => {
-      if (!sub$) return false
+      if (!sub$) return
       sr71$.stop()
       sub$.unsubscribe()
     }
diff --git a/src/containers/content/HaveADrinkContent/spec.ts b/src/containers/content/HaveADrinkContent/spec.ts
new file mode 100644
index 000000000..0ef567636
--- /dev/null
+++ b/src/containers/content/HaveADrinkContent/spec.ts
@@ -0,0 +1,8 @@
+export type TView = string
+
+export type TSettingOption = {
+  fontSize: '24px' | '27px'
+  animateType: 'fade' | 'bounce'
+}
+
+export type TInterval = '3s' | '5s' | '10s'
diff --git a/src/containers/content/HaveADrinkContent/store.js b/src/containers/content/HaveADrinkContent/store.ts
similarity index 83%
rename from src/containers/content/HaveADrinkContent/store.js
rename to src/containers/content/HaveADrinkContent/store.ts
index ca510ed17..9da9b3ad0 100755
--- a/src/containers/content/HaveADrinkContent/store.js
+++ b/src/containers/content/HaveADrinkContent/store.ts
@@ -3,12 +3,13 @@
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, Instance } from 'mobx-state-tree'
 
 import { markStates, buildLog } from '@/utils'
-import { LN } from './logic'
 
-const { VIEW } = LN
+import type { TSettingOption } from './spec'
+import { VIEW } from './constant'
+
 /* eslint-disable-next-line */
 const log = buildLog('S:HaveADrinkContent')
 
@@ -47,20 +48,17 @@ const HaveADrinkContent = T.model('HaveADrinkContent', {
   ),
 })
   .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get curSentence() {
+    get curSentence(): string {
       const { pool, poolIdx } = self
 
       return pool[poolIdx]
     },
-    get settingOptions() {
+    get settingOptions(): TSettingOption {
       const { fontSize, animateType } = self
 
       return { fontSize, animateType }
     },
-    get timerIntervalVal() {
+    get timerIntervalVal(): number {
       const { timerInterval } = self
       return {
         '3s': 3000,
@@ -70,9 +68,10 @@ const HaveADrinkContent = T.model('HaveADrinkContent', {
     },
   }))
   .actions((self) => ({
-    mark(sobj) {
+    mark(sobj: Record<string, unknown>): void {
       markStates(sobj, self)
     },
   }))
 
+export type TStore = Instance<typeof HaveADrinkContent>
 export default HaveADrinkContent
diff --git a/src/containers/content/HaveADrinkContent/styles/index.ts b/src/containers/content/HaveADrinkContent/styles/index.ts
index 9ff88bef4..3a8cb0e83 100755
--- a/src/containers/content/HaveADrinkContent/styles/index.ts
+++ b/src/containers/content/HaveADrinkContent/styles/index.ts
@@ -6,7 +6,7 @@ export const Wrapper = styled.div`
   ${css.flexColumn('align-both')}
   width: 100%;
 `
-export const InnerWrapper = styled.div`
+export const InnerWrapper = styled.div<{ metric: string }>`
   ${css.flexColumn('align-center', 'justify-between')};
   margin-top: 25px;
   margin-bottom: 40px;
@@ -16,6 +16,7 @@ export const InnerWrapper = styled.div`
   border-radius: 8px;
   background: ${theme('haveADrinkPage.bg')};
   box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 4px;
+  ${({ metric }) => css.fitContentWidth(metric)};
 `
 export const LoadingSentence = styled.div`
   font-size: 18px;