diff --git a/src/components/ArticleImgWindow/index.tsx b/src/components/ArticleImgWindow/index.tsx
new file mode 100755
index 000000000..d41a3e98a
--- /dev/null
+++ b/src/components/ArticleImgWindow/index.tsx
@@ -0,0 +1,29 @@
+/*
+ *
+ * ArticleImgWindow
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils'
+
+import { Wrapper, Block } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticleImgWindow:index')
+
+type TProps = {
+  testid?: string
+}
+
+const ArticleImgWindow: FC<TProps> = ({ testid = 'article-img-window' }) => {
+  return (
+    <Wrapper testid={testid}>
+      <Block />
+      <Block />
+    </Wrapper>
+  )
+}
+
+export default memo(ArticleImgWindow)
diff --git a/src/components/ArticleImgWindow/styles/index.ts b/src/components/ArticleImgWindow/styles/index.ts
new file mode 100755
index 000000000..33c0b76f0
--- /dev/null
+++ b/src/components/ArticleImgWindow/styles/index.ts
@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+// import Img from '@/Img'
+import { css } from '@/utils'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flex('align-center')};
+`
+export const Block = styled.div`
+  width: 30%;
+  height: 60px;
+  background: #06303b;
+  margin-right: 10px;
+  border-radius: 5px;
+`
diff --git a/src/components/ArticleImgWindow/tests/index.test.ts b/src/components/ArticleImgWindow/tests/index.test.ts
new file mode 100755
index 000000000..d61ee9267
--- /dev/null
+++ b/src/components/ArticleImgWindow/tests/index.test.ts
@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import ArticleImgWindow from '../index'
+
+describe('TODO <ArticleImgWindow />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})
diff --git a/src/components/AvatarsRow/index.tsx b/src/components/AvatarsRow/index.tsx
index 4c5cb046a..d499cb1b3 100755
--- a/src/components/AvatarsRow/index.tsx
+++ b/src/components/AvatarsRow/index.tsx
@@ -42,8 +42,9 @@ const getUniqueArray = (arr, comp) => {
 export type TProps = {
   users?: TUser[]
   size?: TAvatarSize
-  total: number
+  total?: number | null
   limit: number
+  showMore?: boolean
   showTotalNumber?: boolean
   reverse?: boolean
   scrollPosition?: any
@@ -54,11 +55,12 @@ export type TProps = {
 
 const AvatarsRow: FC<TProps> = ({
   size = SIZE.SMALL,
-  total,
+  total = null,
   users = [],
   limit = AVATARS_LIST_LENGTH.POSTS,
   onUserSelect = log,
   onTotalSelect = log,
+  showMore = true,
   showTotalNumber = false,
   reverse = true,
   // see https://github.com/Aljullu/react-lazy-load-image-component/issues/42
@@ -68,23 +70,25 @@ const AvatarsRow: FC<TProps> = ({
     return <span />
   }
 
+  const totalCount = total || users.length
+
   users = filter(validUser, getUniqueArray(users, 'id'))
   const sortedUsers = reverse ? users : reverseFn(users)
 
   return (
-    <Wrapper total={total}>
-      {total <= 1 ? (
+    <Wrapper total={totalCount}>
+      {totalCount <= 1 || !showMore ? (
         <TotalOneOffset />
       ) : (
         <MoreItem
           size={size}
-          total={total}
+          total={totalCount}
           showTotalNumber={showTotalNumber}
           onTotalSelect={onTotalSelect}
         />
       )}
 
-      {total === 1 ? (
+      {totalCount === 1 ? (
         <RealAvatar
           user={sortedUsers[0]}
           size={size}
diff --git a/src/components/IconText/styles/metric.ts b/src/components/IconText/styles/metric.ts
index 9532b3383..3102c00f5 100644
--- a/src/components/IconText/styles/metric.ts
+++ b/src/components/IconText/styles/metric.ts
@@ -4,10 +4,10 @@ import { SIZE } from '@/constant'
 export const getIconSize = (size: TSIZE): string => {
   switch (size) {
     case SIZE.LARGE: {
-      return '14px'
+      return '16px'
     }
     case SIZE.MEDIUM: {
-      return '13px'
+      return '15px'
     }
     case SIZE.TINY: {
       return '11px'
@@ -26,6 +26,9 @@ export const getTextSize = (size: TSIZE): string => {
     case SIZE.LARGE: {
       return '15px'
     }
+    case SIZE.MEDIUM: {
+      return '14px'
+    }
     case SIZE.TINY: {
       return '11px'
     }
diff --git a/src/components/JobItem/DesktopView/Footer.tsx b/src/components/JobItem/DesktopView/Footer.tsx
index 240bc428f..a96469f98 100644
--- a/src/components/JobItem/DesktopView/Footer.tsx
+++ b/src/components/JobItem/DesktopView/Footer.tsx
@@ -1,13 +1,26 @@
 import { FC, memo } from 'react'
 
+import { ICON } from '@/config'
+import Upvote from '@/components/Upvote'
+import DotDivider from '@/components/DotDivider'
+import IconText from '@/components/IconText'
+
+import { Wrapper, PublishWrapper, Bottom } from '../styles/desktop_view/footer'
+
 const Footer: FC = () => {
   return (
-    <div>
-      <div>mydearxym 发布于： 3 天前</div>
-      <div>
-        你和 头像 Raw 等 24 人觉得不错 -- 评论 35，收藏, 分享, 举报(more 里面)
-      </div>
-    </div>
+    <Wrapper>
+      <PublishWrapper>
+        mydearxym <DotDivider space={6} /> 3 天前
+      </PublishWrapper>
+      <Bottom>
+        {/* 你和 头像 Raw 等 24 人觉得很赞 -- 评论 35，收藏, 分享, 举报(more 里面) */}
+        <Upvote />
+        <IconText iconSrc={`${ICON}/article/comment.svg`} size="medium">
+          9
+        </IconText>
+      </Bottom>
+    </Wrapper>
   )
 }
 
diff --git a/src/components/JobItem/DesktopView/index.tsx b/src/components/JobItem/DesktopView/index.tsx
index 8a34afd75..e4152fb8c 100644
--- a/src/components/JobItem/DesktopView/index.tsx
+++ b/src/components/JobItem/DesktopView/index.tsx
@@ -4,7 +4,8 @@ import type { TJob } from '@/spec'
 
 import { cutRest } from '@/utils'
 import DigestSentence from '@/components/DigestSentence'
-import { Br } from '@/components/Common'
+import { Br, SpaceGrow } from '@/components/Common'
+import ArticleImgWindow from '@/components/ArticleImgWindow'
 
 import Header from './Header'
 import Footer from './Footer'
@@ -28,9 +29,10 @@ const DesktopView: FC<TProps> = ({ entry }) => {
           100,
         )}
       </DigestSentence>
-      <Br top={10} />
-      <div>图片列表，可预览</div>
-      <Br top={20} />
+      <Br top={4} />
+      <ArticleImgWindow />
+      <Br top={16} />
+      <SpaceGrow />
       <Footer />
     </Wrapper>
   )
diff --git a/src/components/JobItem/index.tsx b/src/components/JobItem/index.tsx
index a30ccaa09..3709b7dec 100755
--- a/src/components/JobItem/index.tsx
+++ b/src/components/JobItem/index.tsx
@@ -7,7 +7,7 @@
 import { FC, memo } from 'react'
 
 import type { TJob, TID } from '@/spec'
-import { buildLog, getRandomInt } from '@/utils'
+import { buildLog } from '@/utils'
 import { useAccount } from '@/hooks'
 
 import ArticleItemPrefixLabel from '@/components/ArticleItemPrefixLabel'
@@ -18,21 +18,16 @@ import { Wrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:JobItem:index')
 
-const randomHeight = () => {
-  return `${getRandomInt(200, 420)}px`
-}
-
 type TProps = {
   entry: TJob
   activeId: TID | null
 }
 
 const JobItem: FC<TProps> = ({ entry, activeId }) => {
-  const height = randomHeight()
   const { c11n } = useAccount()
 
   return (
-    <Wrapper entry={entry} activeId={activeId} c11n={c11n} height={height}>
+    <Wrapper entry={entry} activeId={activeId} c11n={c11n}>
       <ArticleItemPrefixLabel entry={entry} topOffset="9px" />
       <DesktopView entry={entry} />
     </Wrapper>
diff --git a/src/components/JobItem/styles/desktop_view/footer.ts b/src/components/JobItem/styles/desktop_view/footer.ts
new file mode 100644
index 000000000..2d0a68245
--- /dev/null
+++ b/src/components/JobItem/styles/desktop_view/footer.ts
@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+import { theme, css } from '@/utils'
+
+export const Wrapper = styled.div`
+  color: ${theme('thread.articleDigest')};
+`
+export const PublishWrapper = styled.div`
+  ${css.flex('align-center')};
+  margin-left: 3px;
+  font-size: 13px;
+`
+export const Bottom = styled.div`
+  ${css.flex('justify-between', 'align-center')};
+`
diff --git a/src/components/JobItem/styles/desktop_view/index.ts b/src/components/JobItem/styles/desktop_view/index.ts
index dd028c9bc..edeef7b8e 100644
--- a/src/components/JobItem/styles/desktop_view/index.ts
+++ b/src/components/JobItem/styles/desktop_view/index.ts
@@ -1,7 +1,10 @@
 import styled from 'styled-components'
 
-// import { theme, css } from '@/utils'
+import { css } from '@/utils'
 
-export const Wrapper = styled.div``
+export const Wrapper = styled.div`
+  ${css.flexColumn()};
+  height: 100%;
+`
 
 export const Holder = styled.div``
diff --git a/src/components/JobItem/styles/index.ts b/src/components/JobItem/styles/index.ts
index b5161d985..4f9648ff8 100755
--- a/src/components/JobItem/styles/index.ts
+++ b/src/components/JobItem/styles/index.ts
@@ -4,18 +4,19 @@ import type { TJob, TID, TC11N } from '@/spec'
 import { css } from '@/utils'
 import { getOpacity } from './metric'
 
-type TWrapper = { entry: TJob; activeId: TID; c11n: TC11N; height?: string }
+type TWrapper = { entry: TJob; activeId: TID; c11n: TC11N }
 export const Wrapper = styled.article<TWrapper>`
   ${css.flex('align-start')};
   width: 100%;
-  height: ${({ height }) => height};
+  height: auto;
   margin-bottom: 18px;
   margin-right: 0;
   background: #0d3644;
   border-radius: 8px;
 
   position: relative;
-  padding: 15px;
+  padding: 14px;
+  padding-top: 20px;
   opacity: ${({ entry, activeId, c11n }) => getOpacity(entry, activeId, c11n)};
 
   transition: all 0.25s;
diff --git a/src/components/Upvote/Desc.tsx b/src/components/Upvote/Desc.tsx
new file mode 100644
index 000000000..195f2973e
--- /dev/null
+++ b/src/components/Upvote/Desc.tsx
@@ -0,0 +1,53 @@
+/*
+ * Desc
+ */
+
+import { FC, Fragment, memo } from 'react'
+
+import { buildLog } from '@/utils'
+import { Space } from '@/components/Common'
+
+import TotalCount from './TotalCount'
+import { Text } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Upvote:Desc')
+
+type TProps = {
+  count?: number
+  avatarsRowLimit?: number
+  noOne: boolean
+  alias?: string // 觉得很赞(default), 觉得很酷(works), 学到了(blog), 感兴趣(meetup), 有意思(Radar)
+}
+
+const Desc: FC<TProps> = ({
+  noOne,
+  count = 4,
+  avatarsRowLimit = 3,
+  alias = '觉得很赞',
+}) => {
+  const onlyOne = count === 1
+
+  return (
+    <Fragment>
+      {!noOne && !onlyOne && count > avatarsRowLimit && (
+        <Fragment>
+          <Space left={3} />
+          <Text>等</Text>
+          <Space left={3} />
+          <TotalCount count={count} /> <Space left={4} />
+          <Text>人</Text>
+        </Fragment>
+      )}
+      {noOne ? (
+        <Fragment>
+          <TotalCount count={count} /> <Space left={4} />
+        </Fragment>
+      ) : (
+        <Text>{alias}</Text>
+      )}
+    </Fragment>
+  )
+}
+
+export default memo(Desc)
diff --git a/src/components/Upvote/TotalCount/AnimatedCount.tsx b/src/components/Upvote/TotalCount/AnimatedCount.tsx
new file mode 100644
index 000000000..8b5f48620
--- /dev/null
+++ b/src/components/Upvote/TotalCount/AnimatedCount.tsx
@@ -0,0 +1,24 @@
+import { FC, memo } from 'react'
+
+import { AnimateOnChange } from 'react-animation'
+import { Wrapper } from '../styles/total_count'
+
+type TProps = {
+  count?: number
+}
+
+const AnimatedCount: FC<TProps> = ({ count = 0 }) => {
+  return (
+    <Wrapper>
+      <AnimateOnChange
+        animationIn="fadeInUp"
+        animationOut="bounceOut"
+        durationOut={200}
+      >
+        {count}
+      </AnimateOnChange>
+    </Wrapper>
+  )
+}
+
+export default memo(AnimatedCount)
diff --git a/src/components/Upvote/TotalCount/index.tsx b/src/components/Upvote/TotalCount/index.tsx
new file mode 100644
index 000000000..f3541ea60
--- /dev/null
+++ b/src/components/Upvote/TotalCount/index.tsx
@@ -0,0 +1,33 @@
+import { FC, memo, createContext, useContext } from 'react'
+import dynamic from 'next/dynamic'
+
+import { Wrapper } from '../styles/total_count'
+
+// @ts-ignore
+const LoadingValueContext = createContext()
+
+// props is not accessable in loading
+// see https://github.com/vercel/next.js/issues/7906#issuecomment-787686440
+const AnimatedCount = dynamic(() => import('./AnimatedCount'), {
+  /* eslint-disable react/display-name */
+  loading: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const value = useContext(LoadingValueContext) as number
+    return <Wrapper>{value}</Wrapper>
+  },
+  ssr: false,
+})
+
+type TProps = {
+  count?: number
+}
+
+const TotalCount: FC<TProps> = ({ count }) => {
+  return (
+    <LoadingValueContext.Provider value={count}>
+      <AnimatedCount count={count} />
+    </LoadingValueContext.Provider>
+  )
+}
+
+export default memo(TotalCount)
diff --git a/src/components/Upvote/UpvoteBtn.tsx b/src/components/Upvote/UpvoteBtn.tsx
new file mode 100644
index 000000000..3a740ca60
--- /dev/null
+++ b/src/components/Upvote/UpvoteBtn.tsx
@@ -0,0 +1,59 @@
+/*
+ *
+ * Upvote
+ *
+ */
+
+import { FC, memo, useState, useCallback } from 'react'
+
+import type { TUser } from '@/spec'
+import { ICON } from '@/config'
+import { buildLog } from '@/utils'
+
+import {
+  Wrapper,
+  ContentWrapper,
+  IconWrapper,
+  IconShadow,
+  UpIcon,
+} from './styles/upvote_btn'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Upvote:index')
+
+type TProps = {
+  testid?: string
+  num?: number
+  viewerHasUpvoted?: boolean
+  alias?: string
+  avatarList?: TUser[]
+}
+
+const UpvoteBtn: FC<TProps> = ({ viewerHasUpvoted = false }) => {
+  const [showAnimation, setShowAnimation] = useState(false)
+  const [num, setNum] = useState(0)
+
+  const handleClick = useCallback(() => {
+    if (viewerHasUpvoted) return
+    setNum(num + 1)
+
+    if (!showAnimation) {
+      setShowAnimation(true)
+
+      setTimeout(() => setShowAnimation(false), 950)
+    }
+  }, [showAnimation, viewerHasUpvoted, num])
+
+  return (
+    <Wrapper showAnimation={showAnimation}>
+      <ContentWrapper>
+        <IconWrapper onClick={handleClick}>
+          <IconShadow />
+          <UpIcon src={`${ICON}/shape/upvote.svg`} $active={viewerHasUpvoted} />
+        </IconWrapper>
+      </ContentWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(UpvoteBtn)
diff --git a/src/components/Upvote/index.tsx b/src/components/Upvote/index.tsx
new file mode 100755
index 000000000..53d57fa6e
--- /dev/null
+++ b/src/components/Upvote/index.tsx
@@ -0,0 +1,74 @@
+/*
+ *
+ * Upvote
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import type { TUser } from '@/spec'
+import { buildLog } from '@/utils'
+
+import AvatarsRow from '@/components/AvatarsRow'
+
+import UpvoteBtn from './UpvoteBtn'
+import Desc from './Desc'
+
+import { Wrapper } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Upvote:index')
+
+const tmpUsers = [
+  {
+    id: '1',
+    nickname: 'nickname',
+    avatar: 'https://avatars.githubusercontent.com/u/221942?s=64&v=4',
+  },
+  {
+    id: '2',
+    nickname: 'nickname',
+    avatar: 'https://avatars.githubusercontent.com/u/5580297?s=64&v=4',
+  },
+  {
+    id: '3',
+    nickname: 'nickname',
+    avatar: 'https://avatars.githubusercontent.com/u/17426470?s=64&v=4',
+  },
+]
+
+type TProps = {
+  testid?: string
+  count?: number
+  avatarsRowLimit?: number
+  viewerHasUpvoted?: boolean
+  alias?: string // 觉得很赞(default), 觉得很酷(works), 学到了(blog), 感兴趣(meetup), 有意思(Radar)
+  avatarList?: TUser[]
+}
+
+const Upvote: FC<TProps> = ({
+  testid = 'upvote',
+  count = 4,
+  viewerHasUpvoted = false,
+  avatarsRowLimit = 3,
+  alias = '觉得很赞',
+}) => {
+  const noOne = count === 0
+
+  return (
+    <Wrapper testid={testid}>
+      <UpvoteBtn viewerHasUpvoted={viewerHasUpvoted} />
+
+      {!noOne && <AvatarsRow users={tmpUsers} showMore={false} />}
+
+      <Desc
+        noOne={noOne}
+        count={count}
+        avatarsRowLimit={avatarsRowLimit}
+        alias={alias}
+      />
+    </Wrapper>
+  )
+}
+
+export default memo(Upvote)
diff --git a/src/components/Upvote/styles/index.ts b/src/components/Upvote/styles/index.ts
new file mode 100755
index 000000000..48af2f464
--- /dev/null
+++ b/src/components/Upvote/styles/index.ts
@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+import { css, theme } from '@/utils'
+
+type TInnerWrapper = {
+  testid: string
+}
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TInnerWrapper>`
+  ${css.flex('align-center')};
+`
+export const Text = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 14px;
+`
diff --git a/src/components/Upvote/styles/total_count.ts b/src/components/Upvote/styles/total_count.ts
new file mode 100644
index 000000000..5aa3e886f
--- /dev/null
+++ b/src/components/Upvote/styles/total_count.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+import { theme } from '@/utils'
+
+export const Wrapper = styled.div`
+  color: ${theme('thread.articleTitle')};
+  font-size: 15px;
+  overflow-y: hidden;
+`
+export const holder = 1
diff --git a/src/components/Upvote/styles/upvote_btn.ts b/src/components/Upvote/styles/upvote_btn.ts
new file mode 100644
index 000000000..c13077634
--- /dev/null
+++ b/src/components/Upvote/styles/upvote_btn.ts
@@ -0,0 +1,180 @@
+import styled, { keyframes } from 'styled-components'
+
+import type { TActive } from '@/spec'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+const topBubbles = keyframes`
+  0% {
+    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
+  }
+  50% {
+    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
+  }
+  100% {
+    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
+    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+  }
+`
+
+const bottomBubbles = keyframes`
+  0% {
+    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
+  }
+  50% {
+    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
+  }
+  100% {
+    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
+    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+  }
+
+`
+type TWrapper = {
+  showAnimation: boolean
+}
+
+export const Wrapper = styled.div<TWrapper>`
+  display: inline-block;
+  color: ${theme('thread.articleTitle')};
+  font-size: 15px;
+  padding: 5px 0;
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: transform ease-in 0.1s;
+
+  &:hover {
+    will-change: transform;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:before {
+    position: absolute;
+    content: '';
+    width: 250%;
+    height: 120%;
+    left: -30%;
+    z-index: -1;
+    transition: all ease-in-out 0.5s;
+    background-repeat: no-repeat;
+    /** base end */
+
+    display: ${({ showAnimation }) => (showAnimation ? 'block' : 'none')};
+
+    top: -75%;
+    background-image: radial-gradient(
+        circle,
+        ${theme('button.primary')} 20%,
+        transparent 20%
+      ),
+      radial-gradient(
+        circle,
+        transparent 20%,
+        ${theme('button.primary')} 20%,
+        transparent 30%
+      ),
+      radial-gradient(circle, ${theme('button.primary')} 20%, transparent 20%),
+      radial-gradient(circle, ${theme('button.primary')} 20%, transparent 20%),
+      radial-gradient(
+        circle,
+        transparent 10%,
+        ${theme('button.primary')} 15%,
+        transparent 20%
+      ),
+      radial-gradient(circle, ${theme('button.primary')} 20%, transparent 20%),
+      radial-gradient(circle, ${theme('button.primary')} 20%, transparent 20%),
+      radial-gradient(circle, ${theme('button.primary')} 20%, transparent 20%),
+      radial-gradient(circle, ${theme('button.primary')} 20%, transparent 20%);
+    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%,
+      15% 15%, 10% 10%, 18% 18%;
+
+    animation: ${topBubbles} ease-in-out 1s infinite;
+  }
+
+  &:after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 120%;
+    left: -65%;
+    z-index: -1;
+    transition: all ease-in-out 0.5s;
+    background-repeat: no-repeat;
+    /** base end */
+
+    display: ${({ showAnimation }) => (showAnimation ? 'block' : 'none')};
+    bottom: -60%;
+    background-image: radial-gradient(
+        circle,
+        ${theme('button.primary')} 20%,
+        transparent 20%
+      ),
+      radial-gradient(circle, ${theme('button.primary')} 20%, transparent 20%),
+      radial-gradient(
+        circle,
+        transparent 10%,
+        ${theme('button.primary')} 15%,
+        transparent 20%
+      ),
+      radial-gradient(circle, ${theme('button.primary')} 20%, transparent 20%),
+      radial-gradient(circle, ${theme('button.primary')} 20%, transparent 20%);
+    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%,
+      20% 20%;
+
+    animation: ${bottomBubbles} ease-in-out 1s infinite;
+    transform: rotate(200deg);
+  }
+`
+
+export const ContentWrapper = styled.div`
+  ${css.flex('align-center')};
+`
+export const IconWrapper = styled.div`
+  ${css.flex('align-center', 'justify-start')};
+  width: 20px;
+  margin-right: 3px;
+  position: relative;
+  z-index: 1;
+`
+export const IconShadow = styled.div`
+  position: absolute;
+  left: -3px;
+  top: -1px;
+  ${css.size(22)};
+  ${css.flex('align-both')};
+  background: #0f4052;
+  border-radius: 50%;
+  z-index: -1;
+  opacity: 0;
+
+  ${IconWrapper}:hover & {
+    opacity: 1;
+  }
+
+  transform: opacity 0.2s;
+`
+
+export const UpIcon = styled(Img)<TActive>`
+  fill: ${({ $active }) =>
+    $active ? '#139B9D;' : theme('thread.articleDigest')};
+  ${css.size(15)};
+  margin-top: 3px;
+  &:hover {
+    fill: #139b9d;
+    cursor: pointer;
+  }
+
+  ${IconWrapper}:hover & {
+    fill: #139b9d;
+    cursor: pointer;
+  }
+
+  transition: all 0.2s;
+`
diff --git a/src/components/Upvote/tests/index.test.ts b/src/components/Upvote/tests/index.test.ts
new file mode 100755
index 000000000..ee333758f
--- /dev/null
+++ b/src/components/Upvote/tests/index.test.ts
@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import Upvote from '../index'
+
+describe('TODO <Upvote />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})