diff --git a/src/background/index.js b/src/background/index.js
index 46d5125..33aca7d 100644
--- a/src/background/index.js
+++ b/src/background/index.js
@@ -1,6 +1,8 @@
 import alarm from 'alarm'
 import i18n from 'i18n'
+import { differenceBy, reject } from 'lodash'
 import * as requests from 'requests'
+import { ENDED_LIVES } from 'shared/store/keys'
 import store from 'store'
 import { getUnix } from 'utils'
 import browser from 'webextension-polyfill'
@@ -42,6 +44,10 @@ const initOnce = async () => {
     lastSuccessRequestTime = timestamp
   })
 
+  store.subscribe(ENDED_LIVES, async (lives, prevLives) => workflows.syncHotnesses(
+    reject(differenceBy(lives, prevLives, 'id'), 'hotnesses'),
+  ))
+
   browser.alarms.onAlarm.addListener(handleAlarm)
   browser.alarms.create(ALARM_NAME, { periodInMinutes: 1 })
 }
diff --git a/src/background/requests.js b/src/background/requests.js
index 9adb530..4b63748 100644
--- a/src/background/requests.js
+++ b/src/background/requests.js
@@ -29,11 +29,12 @@ const fetchData = async (...args) => {
   return gatherResponse(response)
 }
 
-async function* pagedItemsFetcher(endpoint, params = {}) {
+async function* pagedItemsFetcher(endpoint, params = {}, paramEntries = []) {
   const safeParams = mapKeys(params, (_, key) => snakeCase(key))
   const { limit = 50 } = safeParams
 
   const searchParams = new URLSearchParams({ limit, ...safeParams })
+  paramEntries.forEach(entry => searchParams.append(...entry))
 
   let page = 0
   let shouldContinue = true
@@ -72,6 +73,10 @@ const getEndedLives = async params => {
 
 const getOpenLives = params => gatherPagedItems('lives/open', params)
 
+const getHotnessesOfLives = (lives, params) => (lives.length
+  ? gatherPagedItems('hotnesses', params, lives.map(({ id }) => ['lives[]', id]))
+  : {})
+
 const getChannels = () => gatherPagedItems('channels', { limit: 100 })
 
 const getMembers = () => fetchData(`${TARGET}api/v1/members`)
@@ -79,6 +84,7 @@ const getMembers = () => fetchData(`${TARGET}api/v1/members`)
 export {
   getEndedLives,
   getOpenLives,
+  getHotnessesOfLives,
   getChannels,
   getMembers,
   onSuccessRequest,
diff --git a/src/background/workflows/index.js b/src/background/workflows/index.js
index c01b811..81308c3 100644
--- a/src/background/workflows/index.js
+++ b/src/background/workflows/index.js
@@ -3,12 +3,19 @@ import {
   differenceBy,
   filter,
   findLastIndex,
+  groupBy,
   partition,
   range,
   reverse,
   uniqBy,
 } from 'lodash'
-import { getChannels, getEndedLives, getMembers, getOpenLives } from 'requests'
+import {
+  getChannels,
+  getEndedLives,
+  getHotnessesOfLives,
+  getMembers,
+  getOpenLives,
+} from 'requests'
 import {
   APPEARANCE,
   CHANNELS,
@@ -119,6 +126,24 @@ const syncOpenLives = async () => {
   return [...currentLives, ...scheduledLives]
 }
 
+const syncHotnesses = async (lives = []) => {
+  if (lives.length === 0) {
+    return
+  }
+
+  const hotnessesByLiveId = groupBy(await getHotnessesOfLives(lives, { limit: 1000 }), 'live_id')
+
+  await store.set({
+    [ENDED_LIVES]: (getCachedEndedLives() ?? []).map(live => {
+      if (live['id'] in hotnessesByLiveId) {
+        return { ...live, hotnesses: hotnessesByLiveId[live['id']] }
+      }
+
+      return live
+    }),
+  })
+}
+
 const getCachedChannels = () => store.get(CHANNELS)
 
 const syncChannels = async () => {
@@ -221,6 +246,7 @@ export default {
   clearCachedEndedLives,
   getCachedScheduledLives,
   syncOpenLives,
+  syncHotnesses,
   getCachedChannels,
   syncChannels,
   getCachedMembers,
diff --git a/src/background/workflows/index.test.js b/src/background/workflows/index.test.js
index 6d2c0e4..0bbb20e 100644
--- a/src/background/workflows/index.test.js
+++ b/src/background/workflows/index.test.js
@@ -1,6 +1,12 @@
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
-import { getChannels, getEndedLives, getMembers, getOpenLives } from 'requests'
+import {
+  getChannels,
+  getEndedLives,
+  getHotnessesOfLives,
+  getMembers,
+  getOpenLives,
+} from 'requests'
 import {
   APPEARANCE,
   CHANNELS,
@@ -201,7 +207,7 @@ test('should get cached scheduled lives', async () => {
   expect(workflows.getCachedScheduledLives()).toEqual(scheduledLives)
 })
 
-test('should sync current lives', async () => {
+test('should sync open lives', async () => {
   Date.now = jest.fn(() => unixTime * 1000)
 
   // First run
@@ -363,6 +369,31 @@ test('should sync current lives', async () => {
   expect(returnValueFour).toEqual(openLivesFour)
 })
 
+test('should sync hotnesses', async () => {
+  Date.now = jest.fn(() => unixTime * 1000)
+
+  const endedLivesOne = [
+    { id: 1, hotnesses: [{ watching: 1 }] }, { id: 2 }, { id: 3 },
+  ]
+  const hotnessesOne = [
+    { live_id: 1, watching: 2 },
+    { live_id: 2, watching: 1 },
+    { live_id: 2, watching: 1 },
+    { live_id: 4, watching: 1 },
+  ]
+  await store.set({ [ENDED_LIVES]: endedLivesOne })
+
+  getHotnessesOfLives.mockResolvedValueOnce(hotnessesOne)
+
+  await workflows.syncHotnesses(endedLivesOne)
+
+  expect(store.data[ENDED_LIVES]).toEqual([
+    { id: 1, hotnesses: [hotnessesOne[0]] },
+    { id: 2, hotnesses: [hotnessesOne[1], hotnessesOne[2]] },
+    { id: 3 },
+  ])
+})
+
 test('should get cached channels', async () => {
   const channels = [{ id: 1 }, { id: 2 }]
 
diff --git a/src/popup/components/live-item.vue b/src/popup/components/live-item.vue
index 03c042d..e4c732f 100644
--- a/src/popup/components/live-item.vue
+++ b/src/popup/components/live-item.vue
@@ -1,13 +1,93 @@
 <template>
   <li ref="item">
     <a class="item" :href="roomURL" target="_blank">
-      <div class="thumbnail">
+      <div class="thumbnail" :data-hotnesses-size="hotnessSamples.length">
         <LazyImage class="cover"
                    :src="live['cover']"
                    :alt="live['title']"
                    :fallback-src="defaultThumbnail"
         />
         <div v-if="type === 'ended'" class="badge">{{ duration }}</div>
+        <div v-if="type === 'ended'" class="hotness">
+          <svg :id="`svg_${live['id']}`" viewBox="0 0 1 0.16" preserveAspectRatio="none">
+            <defs>
+              <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="50%" style="stop-color:hsl(157, 72%, 65%)" />
+                <stop offset="100%" style="stop-color:hsl(178, 63%, 55%)" />
+              </linearGradient>
+              <clipPath :id="`clip_outer_${live['id']}`" clipPathUnits="objectBoundingBox">
+                <path d="M0 0 0 0 0 1 0 1">
+                  <animate attributeName="d"
+                           to="M0 0 1 0 1 1 0 1"
+                           :begin="`svg_${live['id']}.mouseenter + 0.4s`"
+                           dur="0.2s"
+                           fill="freeze"
+                  />
+                  <animate attributeName="d"
+                           to="M0 0 0 0 0 1 0 1"
+                           :begin="`svg_${live['id']}.mouseleave + 0.1s`"
+                           dur="0.2s"
+                           fill="freeze"
+                  />
+                </path>
+              </clipPath>
+              <clipPath :id="`clip_inner_${live['id']}`" clipPathUnits="objectBoundingBox">
+                <polygon :points="points" />
+              </clipPath>
+            </defs>
+            <g transform="scale(1, 1)" style="transform-origin: bottom">
+              <animateTransform attributeName="transform"
+                                type="scale"
+                                to="1, 2"
+                                :begin="`rect_${live['id']}.mouseenter`"
+                                dur="0.2s"
+                                fill="freeze"
+              />
+              <animateTransform attributeName="transform"
+                                type="scale"
+                                to="1, 1"
+                                :begin="`rect_${live['id']}.mouseleave`"
+                                dur="0.2s"
+                                fill="freeze"
+              />
+              <g :clip-path="`url(#clip_outer_${live['id']})`">
+                <g :clip-path="`url(#clip_inner_${live['id']})`">
+                  <rect x="0" y="0.08" width="1" height="0.083" fill="url(#gradient)" />
+                  <rect :x="highlight"
+                        y="0.08"
+                        width="0.00625"
+                        height="0.08"
+                        fill="white"
+                        opacity="0"
+                        style="mix-blend-mode: overlay"
+                  >
+                    <animate attributeName="opacity"
+                             to="1"
+                             :begin="`rect_${live['id']}.mouseenter`"
+                             dur="0.1s"
+                             fill="freeze"
+                    />
+                    <animate attributeName="opacity"
+                             to="0"
+                             :begin="`rect_${live['id']}.mouseleave`"
+                             dur="0.1s"
+                             fill="freeze"
+                    />
+                  </rect>
+                </g>
+              </g>
+              <rect :id="`rect_${live['id']}`"
+                    x="0"
+                    y="0.08"
+                    width="1"
+                    height="0.83"
+                    fill="transparent"
+                    @mousemove="handleMousemove"
+                    @mouseout="handleMouseout"
+              />
+            </g>
+          </svg>
+        </div>
         <button v-if="type === 'scheduled' && isNtfEnabled"
                 type="button"
                 :class="['remind', {active: isScheduled}]"
@@ -55,10 +135,11 @@
   import advancedFormat from 'dayjs/plugin/advancedFormat'
   import calendar from 'dayjs/plugin/calendar'
   import relativeTime from 'dayjs/plugin/relativeTime'
+  import { floor, isNull, max, min } from 'lodash'
   import HIcon from 'shared/components/h-icon'
   import { IS_30_HOURS_ENABLED, IS_NTF_ENABLED } from 'shared/store/keys'
   import { constructRoomUrl } from 'shared/utils'
-  import { formatDurationFromSeconds } from 'utils'
+  import { formatDurationFromSeconds, sampleHotnesses } from 'utils'
   import { liveTypeValidator } from 'validators'
   import { mapState } from 'vuex'
   import browser from 'webextension-polyfill'
@@ -88,6 +169,7 @@
     data() {
       return {
         alarmCacheFlag: Date.now(),
+        highlight: null,
       }
     },
     computed: {
@@ -101,10 +183,31 @@
         return getMember(this.live)
       },
       roomURL() {
-        return constructRoomUrl(this.live) ?? '#'
+        return constructRoomUrl({ ...this.live, time: this.hotnessDuration }) ?? '#'
+      },
+      hotnessSamples() {
+        return sampleHotnesses(this.live, 61)
+      },
+      points() {
+        // Add a slight overflow around 4% to tune the rendering to best on FireFox
+        return this.hotnessSamples.map(
+          ([, [timeRatio, hotness]]) => [timeRatio, (1 - hotness ** 0.33) * 0.84],
+        ).concat(1, 1.04, 0, 1.04).flat().join(' ')
+      },
+      hotnessDuration() {
+        if (isNull(this.highlight)) {
+          return null
+        }
+
+        const createdAts = this.hotnessSamples.map(([createdAt]) => createdAt)
+        return floor(this.highlight * dayjs(max(createdAts)).diff(min(createdAts), 'second'))
+          + dayjs(min(createdAts)).diff(this.live['start_at'], 'second')
       },
       duration() {
-        return formatDurationFromSeconds(this.live['duration'])
+        const lDur = formatDurationFromSeconds(this.live['duration'])
+        const hDur = formatDurationFromSeconds(this.hotnessDuration)
+
+        return this.hotnessDuration ? (lDur.slice(0, lDur.length - hDur.length).replace(/\d/g, '0') + hDur) : lDur
       },
       startAt() {
         return dayjs(this.live['start_at']).startHour(this.is30HoursEnabled ? 6 : 0)
@@ -148,6 +251,12 @@
         }
         this.alarmCacheFlag = Date.now()
       },
+      handleMousemove({ offsetX }) {
+        this.highlight = offsetX / 160
+      },
+      handleMouseout() {
+        this.highlight = null
+      },
     },
   }
 </script>
@@ -182,11 +291,33 @@
     align-self: start;
     overflow: hidden;
     height: 90px;
-    transition: opacity .2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
 
     .cover {
       width: 100%;
       height: 100%;
+      transition: transform 0.3s ease-out, box-shadow 0.2s ease-in;
+    }
+
+    .hotness {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      outline: 0 solid hsl(157, 72%, 65%);
+      outline-offset: 0;
+      transition: all 0.1s ease-in;
+
+      svg {
+        --height: 50px;
+        position: relative;
+        box-sizing: content-box;
+        width: 100%;
+        height: var(--height);
+        border-top: 90px solid transparent;
+        transition: border-top-width 0.3s;
+      }
     }
 
     .badge, .remind {
@@ -200,6 +331,55 @@
       font-size: 12px;
     }
 
+    &:hover .cover {
+      transform: scale(1.05);
+    }
+
+    &:not([data-hotnesses-size="0"]):hover {
+      .cover {
+        box-shadow: inset 0 0 15px 7px #0006;
+        transition: transform 0.3s ease-out, box-shadow 0.4s ease-in;
+      }
+
+      .hotness {
+        outline-width: 4px;
+        outline-offset: -4px;
+        filter: drop-shadow(0px 0px 5px black);
+        transition: all 0.1s 0.4s ease-in;
+
+        svg {
+          border-top-width: calc(90px - var(--height));
+          transition: border-top-width 0s 0.4s;
+        }
+      }
+
+      .badge {
+        animation: badge-out 0.3s 0.1s ease-out, badge-in 0.2s 0.4s ease-in forwards;
+
+        @keyframes badge-out {
+          to {
+            bottom: 4px;
+            opacity: 0;
+            transform: translate(15%, 25%);
+          }
+        }
+        @keyframes badge-in {
+          from {
+            top: 4px;
+            bottom: unset;
+            opacity: 0;
+            transform: translate(15%, -25%);
+          }
+          to {
+            top: 4px;
+            bottom: unset;
+            opacity: 1;
+            transform: translate(0, 0);
+          }
+        }
+      }
+    }
+
     .remind {
       display: grid;
       grid-template-columns: auto;
diff --git a/src/popup/utils/index.js b/src/popup/utils/index.js
index 66f294b..d7465d9 100644
--- a/src/popup/utils/index.js
+++ b/src/popup/utils/index.js
@@ -1,11 +1,47 @@
+import dayjs from 'dayjs'
+import { at, clamp, range } from 'lodash'
+
+const { floor, min, max } = Math
+
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 const formatDurationFromSeconds = (input = '0') => {
   const duration = +input
-  const hours = Math.floor(duration / 60 / 60)
-  const minutes = Math.floor((duration - hours * 60 * 60) / 60).toString().padStart(2, '0')
+  const hours = floor(duration / 60 / 60)
+  const minutes = floor((duration - hours * 60 * 60) / 60).toString().padStart(2, '0')
   const seconds = (duration - hours * 60 * 60 - minutes * 60).toString().padStart(2, '0')
   return `${hours}:${minutes}:${seconds}`.replace(/^0:0?/, '')
 }
 
-export { sleep, formatDurationFromSeconds }
+const normalize = (arrayOfObjects, ...keys) => keys.reduce((accu, key) => {
+  const filteredValues = accu.map(({ [key]: value }) => value).filter(Boolean)
+  const minValue = min(...filteredValues)
+  const maxValue = max(...filteredValues)
+  return accu.map(object => ({
+    ...object,
+    [key]: filteredValues.length && minValue !== maxValue
+      ? ((clamp(object[key], minValue, maxValue) - minValue) / (maxValue - minValue))
+      : 1,
+  }))
+}, arrayOfObjects)
+
+const sampleHotnesses = (
+  { hotnesses = [], start_at: startAt = '' }, maxSamplesCount,
+) => normalize(normalize(at(
+  hotnesses, range(
+    0, hotnesses.length - 0.1, max(1, hotnesses.length / maxSamplesCount),
+  ).map(floor),
+).map(({ created_at: createdAt, like, watching }, index, records) => ({
+  createdAt,
+  timestamp: dayjs(createdAt).diff(startAt, 'second'),
+  likeDelta: max((like ?? 0) - (records[max(index - 1, 0)]['like'] ?? 0), 0),
+  watching,
+})), 'timestamp', 'likeDelta', 'watching').map(
+  ({ likeDelta, watching, ...fields }) => ({
+    hotness: likeDelta * watching, ...fields,
+  }),
+), 'hotness').map(
+  ({ timestamp, hotness, createdAt }) => [createdAt, [timestamp, hotness]],
+)
+
+export { sleep, formatDurationFromSeconds, normalize, sampleHotnesses }
diff --git a/src/popup/utils/index.test.js b/src/popup/utils/index.test.js
index 0d2c17d..7f662ae 100644
--- a/src/popup/utils/index.test.js
+++ b/src/popup/utils/index.test.js
@@ -1,11 +1,11 @@
-import { formatDurationFromSeconds, sleep } from './index'
+import { formatDurationFromSeconds, normalize, sleep } from './index'
 
 test('should sleep', async () => {
   await sleep(1000)
   expect(true).toBeTruthy()
 })
 
-test('should format duration from seconds', async () => {
+test('should format duration from seconds', () => {
   expect(formatDurationFromSeconds()).toEqual('0:00')
   expect(formatDurationFromSeconds(1)).toEqual('0:01')
   expect(formatDurationFromSeconds(59)).toEqual('0:59')
@@ -15,3 +15,15 @@ test('should format duration from seconds', async () => {
   expect(formatDurationFromSeconds(3601)).toEqual('1:00:01')
   expect(formatDurationFromSeconds(3600 * 24 + 1)).toEqual('24:00:01')
 })
+
+test('should normalize', () => {
+  expect(normalize([{ a: 1 }, { a: 2 }, { a: 3 }], 'a')).toEqual([{ a: 0 }, { a: 0.5 }, { a: 1 }])
+  expect(normalize([{ a: 1 }, { a: 2 }, { a: 3 }, { a: null }], 'a')).toEqual([{ a: 0 }, { a: 0.5 }, { a: 1 }, { a: 0 }])
+  // Not enough valid values: at least two positive numbers
+  expect(normalize([{ a: 0 }, { a: 2 }, { a: null }], 'a')).toEqual([{ a: 1 }, { a: 1 }, { a: 1 }])
+  expect(normalize([{ a: null }], 'a')).toEqual([{ a: 1 }])
+  expect(normalize([{ a: 1 }, { a: null }], 'a')).toEqual([{ a: 1 }, { a: 1 }])
+  expect(normalize([{ a: 0 }, { a: 0 }, { a: null }], 'a')).toEqual([{ a: 1 }, { a: 1 }, { a: 1 }])
+})
+
+// Tests for sampleHotnesses are not added for issues with floating number precisions
diff --git a/src/shared/store/create.js b/src/shared/store/create.js
index de4e42f..3c02879 100644
--- a/src/shared/store/create.js
+++ b/src/shared/store/create.js
@@ -1,5 +1,6 @@
 /* eslint no-param-reassign:
 ["error", { "props": true, "ignorePropertyModificationsFor": ["state"] }] */
+import { isEmpty, isEqual } from 'lodash'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import connect from './connect'
@@ -12,7 +13,9 @@ export default defaultState => new Vuex.Store({
   mutations: {
     ...Object.fromEntries(Object.keys(defaultState).map(
       key => [key, (state, value) => {
-        state[key] = value
+        if (!isEqual(state[key], value) || isEmpty(value)) {
+          state[key] = value
+        }
       }],
     )),
   },
diff --git a/src/shared/utils/index.js b/src/shared/utils/index.js
index c5117e4..45c70d1 100644
--- a/src/shared/utils/index.js
+++ b/src/shared/utils/index.js
@@ -1,5 +1,5 @@
-const constructRoomUrl = ({ platform, room }) => ({
-  youtube: `https://www.youtube.com/watch?v=${room}`,
+const constructRoomUrl = ({ platform, room, time }) => ({
+  youtube: `https://www.youtube.com/watch?v=${room}${time ? `&t=${time}` : ''}`,
   bilibili: `https://live.bilibili.com/${room}`,
   twitch: `https://www.twitch.tv/${room}`,
   twitcasting: `https://twitcasting.tv/${room}`,
diff --git a/src/shared/utils/index.test.js b/src/shared/utils/index.test.js
index c328ed4..2df5aa2 100644
--- a/src/shared/utils/index.test.js
+++ b/src/shared/utils/index.test.js
@@ -4,8 +4,10 @@ test('should construct room url', () => {
   const liveOne = { platform: 'youtube', room: 'NewRoom' }
   const liveTwo = { platform: 'bilibili', room: 'NewRoom' }
   const liveThree = { platform: 'unknown', room: 'NewRoom' }
+  const liveFour = { platform: 'youtube', room: 'NewRoom', time: 300 }
 
   expect(constructRoomUrl(liveOne)).toEqual(`https://www.youtube.com/watch?v=${liveOne.room}`)
   expect(constructRoomUrl(liveTwo)).toEqual(`https://live.bilibili.com/${liveTwo.room}`)
   expect(constructRoomUrl(liveThree)).toEqual(undefined)
+  expect(constructRoomUrl(liveFour)).toEqual(`https://www.youtube.com/watch?v=${liveFour.room}&t=${liveFour.time}`)
 })