diff --git a/package.json b/package.json
index 8ec9c401..43d208b6 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,12 @@
   "scripts": {
     "build": "node build.js",
     "watch:src": "node watch.js",
-    "watch:dist": "mv3-hot-reload",
+    "watch:dist": "node lib/mv3-hot-reload/out/bin/mv3-hot-reload.js",
     "dev": "concurrently yarn:watch:*",
     "pretty-quick": "pretty-quick",
     "precommit": "pretty-quick --staged",
     "prepare": "husky install",
-    "preinstall": "cd ./lib/mv3-hot-reload && yarn install && ln -s ../mv3-hot-reload/out/bin/mv3-hot-reload.js ../../node_modules/.bin/mv3-hot-reload",
+    "preinstall": "cd ./lib/mv3-hot-reload && yarn install",
     "zip": "npm-build-zip --source=dist --destination=build"
   },
   "author": "ujiro99",
diff --git a/pages/public/chrome_web_store.png b/pages/public/chrome_web_store.png
new file mode 100644
index 00000000..224c12bf
Binary files /dev/null and b/pages/public/chrome_web_store.png differ
diff --git a/pages/public/favicon.ico b/pages/public/favicon.ico
new file mode 100644
index 00000000..ae18a333
Binary files /dev/null and b/pages/public/favicon.ico differ
diff --git a/pages/scripts/fetch-ga-data.js b/pages/scripts/fetch-ga-data.js
index 8acce74d..015c7330 100644
--- a/pages/scripts/fetch-ga-data.js
+++ b/pages/scripts/fetch-ga-data.js
@@ -31,6 +31,9 @@ async function runReport() {
       },
     ],
     dimensionFilter: {
+      orGroup: {
+        expressions: [
+          {
       filter: {
         fieldName: 'eventName',
         stringFilter: {
@@ -38,6 +41,27 @@ async function runReport() {
           matchType: 'EXACT',
         },
       },
+    },
+          {
+            filter: {
+              fieldName: 'eventName',
+              stringFilter: {
+                value: 'command_hub_star_add',
+                matchType: 'EXACT',
+              },
+            },
+          },
+          {
+            filter: {
+              fieldName: 'eventName',
+              stringFilter: {
+                value: 'command_hub_star_remove',
+                matchType: 'EXACT',
+              },
+            },
+          },
+        ],
+      },
     },
   })
 
@@ -51,7 +75,43 @@ async function runReport() {
     return acc
   }, [])
 
-  fs.writeFileSync('./src/data/analytics.json', JSON.stringify(data, null, 2))
+  const groupped = data.reduce(
+    (acc, row) => {
+      switch (row.eventName) {
+        case 'command_hub_add':
+          acc.download.push({
+            eventId: row.eventId,
+            eventCount: row.eventCount,
+          })
+          break
+        case 'command_hub_star_add':
+          const r = acc.starred.find((a) => a.eventId === row.eventId) ?? {
+            eventId: row.eventId,
+            eventCount: 0,
+          }
+          r.eventCount += row.eventCount
+          acc.starred = acc.starred.filter((a) => a.eventId !== row.eventId)
+          acc.starred.push(r)
+          break
+        case 'command_hub_star_remove':
+          const r2 = acc.starred.find((a) => a.eventId === row.eventId) ?? {
+            eventId: row.eventId,
+            eventCount: 0,
+          }
+          r2.eventCount -= row.eventCount
+          acc.starred = acc.starred.filter((a) => a.eventId !== row.eventId)
+          acc.starred.push(r2)
+          break
+      }
+      return acc
+    },
+    { download: [], starred: [], updated: Date.now() },
+  )
+
+  fs.writeFileSync(
+    './src/data/analytics.json',
+    JSON.stringify(groupped, null, 2),
+  )
 }
 
 runReport().catch(console.error)
diff --git a/pages/src/app/globals.css b/pages/src/app/globals.css
index 020cb109..c9ad9fb2 100644
--- a/pages/src/app/globals.css
+++ b/pages/src/app/globals.css
@@ -72,3 +72,8 @@ body {
     @apply bg-background text-foreground;
   }
 }
+
+.starred svg {
+  @apply fill-amber-400;
+  @apply stroke-amber-400;
+}
diff --git a/pages/src/components/CommandForm.tsx b/pages/src/components/CommandForm.tsx
index 4aea3d84..9247f8ca 100644
--- a/pages/src/components/CommandForm.tsx
+++ b/pages/src/components/CommandForm.tsx
@@ -93,7 +93,7 @@ const STORAGE_KEY = 'CommandShareFormData'
 
 let onChagneSearchUrlTO = 0
 
-type CommandMessage = Omit<Command, 'download' | 'thanks'>
+type CommandMessage = Omit<Command, 'download' | 'star'>
 
 const toMessages = (data: FormValues) => {
   const msgObj = toCommand(data)
@@ -276,7 +276,7 @@ function InputForm(props: InputProps) {
     }
   }, [setValue])
 
-  form.watch((data) => {
+  form.watch((data: FormValues) => {
     if (!data.title && !data.searchUrl) {
       return
     }
@@ -596,7 +596,7 @@ function InputForm(props: InputProps) {
 const Item = ({ label, value }: { label: string; value: string }) => (
   <div className="flex items-center">
     <label className="w-2/6 text-sm font-medium">{label}</label>
-    <div className="w-4/6 font-[family-name:var(--font-geist-mono)] text-sm leading-relaxed overflow-scroll whitespace-nowrap inline-block">
+    <div className="w-4/6 font-[family-name:var(--font-geist-mono)] text-sm leading-relaxed overflow-x-auto whitespace-nowrap inline-block">
       <span>{value}</span>
     </div>
   </div>
@@ -672,7 +672,7 @@ function SendingForm() {
         送信中...
       </DialogDescription>
       <Image
-        src="bars-scale-middle.svg"
+        src="/bars-scale-middle.svg"
         alt="Uploading..."
         width={30}
         height={30}
@@ -703,14 +703,14 @@ function CompleteForm() {
           <br />
         </p>
         <Image
-          src="engineer_suit_simple.png"
+          src="/engineer_suit_simple.png"
           alt="Engineer"
           width={100}
           height={100}
-          className="rounded-full bg-stone-200 ml-3"
+          className="rounded-full bg-stone-200 ml-3 h-[100px]"
           style={
             {
-              objectViewBox: 'inset(-22px 56px 360px 283px)',
+              objectViewBox: 'inset(-5px 12px 65px 52px)',
             } as React.CSSProperties
           }
         />
diff --git a/pages/src/components/CommandShare.tsx b/pages/src/components/CommandShare.tsx
index fc09ff4c..7504a0a8 100644
--- a/pages/src/components/CommandShare.tsx
+++ b/pages/src/components/CommandShare.tsx
@@ -11,7 +11,7 @@ import { CommandForm } from '@/components/CommandForm'
 export function CommandShare(): JSX.Element {
   return (
     <Dialog>
-      <DialogTrigger className="flex items-center px-4 py-1.5 h-10 rounded-full bg-stone-700 text-primary-foreground shadow hover:bg-primary/90 outline-none">
+      <DialogTrigger className="flex items-center px-4 py-1.5 h-10 rounded-full bg-stone-700 text-primary-foreground shadow hover:bg-primary/90 outline-none transition">
         <ArrowUpToLine size={18} />
         <span className="ml-1.5 font-semibold">コマンド共有</span>
       </DialogTrigger>
diff --git a/pages/src/components/Image.tsx b/pages/src/components/Image.tsx
index 7cb637bc..a9e2e557 100644
--- a/pages/src/components/Image.tsx
+++ b/pages/src/components/Image.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import NextImage from 'next/image'
+import { cn } from '@/lib/utils'
 
 import nextConfig from '../../next.config.mjs'
 const BASE_PATH = nextConfig.basePath || ''
@@ -16,10 +17,10 @@ type Props = {
 function Image(props: Props): JSX.Element {
   let { src } = props
   if (src.startsWith('/')) {
-    src = `${BASE_PATH}/${props.src}`
+    src = `${BASE_PATH}${props.src}`
     return (
       <NextImage
-        className="dark:invert"
+        className={cn('dark:invert', props.className)}
         src={src}
         alt={`${props.alt}`}
         width={`${props.width ?? 20}`}
diff --git a/pages/src/components/ListItem.tsx b/pages/src/components/ListItem.tsx
index 3fdcdb6c..cbaa4127 100644
--- a/pages/src/components/ListItem.tsx
+++ b/pages/src/components/ListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
-import { ArrowDownToLine } from 'lucide-react'
+import { ArrowDownToLine, Check, Star } from 'lucide-react'
 import { Image } from '@/components/Image'
 import { Tag } from '@/components/Tag'
 import type { Command } from '@/types'
@@ -14,8 +14,8 @@ export function ListItem(props: Props): JSX.Element {
   const { cmd } = props
   return (
     <>
-      <div className="text-left flex flex-row">
-        <div className="flex-1">
+      <div className="text-left flex flex-row items-center gap-1">
+        <div className="flex-1 overflow-hidden space-y-1">
           <p className="text-lg flex flex-row">
             <Image
               src={cmd.iconUrl}
@@ -24,29 +24,53 @@ export function ListItem(props: Props): JSX.Element {
             />
             {cmd.title}
           </p>
-          <p className="text-base text-sm text-stone-500">{cmd.searchUrl}</p>
+          <p className="text-base text-sm text-stone-500 truncate">
+            {cmd.searchUrl}
+          </p>
           <p className="text-base">{cmd.description}</p>
         </div>
-        <div className="flex items-center text-stone-600">
-          <div>
-            <p
-              className="hidden px-2 py-0.5 bg-stone-200 rounded-md"
+        <div className="flex gap-1">
+          <div className="flex items-center text-stone-600">
+            <div>
+              <p className="hidden" data-id={cmd.id}>
+                <Check className="p-1 stroke-sky-500" size={28} />
+              </p>
+              <button
+                className="hidden hover:bg-stone-200 rounded transition"
+                data-id={cmd.id}
+                data-command={cmd2text(cmd)}
+                data-gtm-click="install"
+              >
+                <ArrowDownToLine className="p-1" size={28} />
+              </button>
+            </div>
+            <span
+              className="pl-0.5 p-1 select-none"
               data-id={cmd.id}
+              data-download-count={cmd.download}
             >
-              <span className="select-none">Installed</span>
-            </p>
+              {cmd.download.toLocaleString()}
+            </span>
+          </div>
+          <div className="flex items-center text-stone-600">
             <button
-              className="hidden hover:bg-stone-200 rounded"
-              data-id={cmd.id}
-              data-command={cmd2text(cmd)}
+              className="hover:bg-stone-200 rounded transition duration-50"
+              data-star-id={cmd.id}
+              data-gtm-click="star"
             >
-              <ArrowDownToLine className="p-1" size={28} />
+              <Star className="p-1 transition" size={28} />
             </button>
+            <span
+              className="pl-0.5 p-1 select-none"
+              data-star-id={cmd.id}
+              data-star-count={cmd.star}
+            >
+              {cmd.star.toLocaleString()}
+            </span>
           </div>
-          <span className="ml-2 p-1 pl-0 select-none">{cmd.download}</span>
         </div>
       </div>
-      <ul className="mt-2 flex gap-2">
+      <ul className="mt-2 flex gap-2 flex-wrap">
         {cmd.tags.map((tag) => (
           <li key={tag.id}>
             <Link href={`/tag/${tag.name}`}>
diff --git a/pages/src/components/layout/Footer.tsx b/pages/src/components/layout/Footer.tsx
index 2842f45b..a30b0243 100644
--- a/pages/src/components/layout/Footer.tsx
+++ b/pages/src/components/layout/Footer.tsx
@@ -1,7 +1,13 @@
+import { updated } from '@/data/analytics.json'
+
 export function Footer(): JSX.Element {
+  const updatedDate = new Date(updated)
   return (
-    <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-      © 2024 Selection Command
+    <footer className="row-start-3 flex flex-col gap-3 items-center">
+      <p className="text-stone-500 text-sm" data-updated={updated}>
+        Last Updated: {updatedDate.toLocaleDateString()}
+      </p>
+      <p className="text-stone-500">© 2024 Selection Command</p>
     </footer>
   )
 }
diff --git a/pages/src/components/layout/Header.tsx b/pages/src/components/layout/Header.tsx
index ad2e7224..60db767b 100644
--- a/pages/src/components/layout/Header.tsx
+++ b/pages/src/components/layout/Header.tsx
@@ -1,17 +1,30 @@
 import Link from 'next/link'
+import { Image } from '@/components/Image'
 import { MousePointer } from 'lucide-react'
 import css from './Header.module.css'
 import commonCss from '@/lib/common.module.css'
 
 export function Header(): JSX.Element {
   return (
-    <Link href="/" className={commonCss.hover}>
-      <header className="flex items-center gap-1.5 text-3xl font-[family-name:var(--font-geist-mono)] font-medium">
-        Selection{' '}
-        <span className="bg-[#1597C9]/20 px-2 py-0.5 rounded-lg">Command</span>
-        <span className="font-extralight ml-1">Hub</span>
-        <MousePointer className={css.mouse} size={26} />
-      </header>
-    </Link>
+    <div>
+      <Link href="/" className={commonCss.hover}>
+        <header className="flex items-center gap-1.5 text-3xl font-[family-name:var(--font-geist-mono)] font-medium">
+          Selection{' '}
+          <span className="bg-[#1597C9]/20 px-2 py-0.5 rounded-lg">
+            Command
+          </span>
+          <span className="font-extralight ml-1">Hub</span>
+          <MousePointer className={css.mouse} size={26} />
+        </header>
+      </Link>
+      <a
+        href="https://chromewebstore.google.com/detail/selection-command/nlnhbibaommoelemmdfnkjkgoppkohje"
+        target="_blank"
+        className="fixed top-2 right-2 bg-white border border-stone-200 rounded-lg shadow-md transition duration-200 hover:shadow-lg"
+        data-gtm-click="chrome-web-store"
+      >
+        <Image src="/chrome_web_store.png" alt="Chrome Web Store" width={200} />
+      </a>
+    </div>
   )
 }
diff --git a/pages/src/data/analytics.json b/pages/src/data/analytics.json
index 1bacc8aa..b5553a1f 100644
--- a/pages/src/data/analytics.json
+++ b/pages/src/data/analytics.json
@@ -1,22 +1,28 @@
-[
-  {
-    "eventName": "command_hub_add",
-    "eventId": "f5492254-4d6c-5924-860f-c8b668a76d7a",
-    "eventCount": 4
-  },
-  {
-    "eventName": "command_hub_add",
-    "eventId": "020d116e-5956-5274-b785-b7f4d7377a52",
-    "eventCount": 1
-  },
-  {
-    "eventName": "command_hub_add",
-    "eventId": "33cd4e4c-a7cf-593f-b2c7-bf8743882aae",
-    "eventCount": 1
-  },
-  {
-    "eventName": "command_hub_add",
-    "eventId": "f3254d62-2f77-528c-b7bd-6260c67802ec",
-    "eventCount": 1
-  }
-]
\ No newline at end of file
+{
+  "download": [
+    {
+      "eventId": "f5492254-4d6c-5924-860f-c8b668a76d7a",
+      "eventCount": 4
+    },
+    {
+      "eventId": "020d116e-5956-5274-b785-b7f4d7377a52",
+      "eventCount": 1
+    },
+    {
+      "eventId": "33cd4e4c-a7cf-593f-b2c7-bf8743882aae",
+      "eventCount": 1
+    },
+    {
+      "eventId": "f3254d62-2f77-528c-b7bd-6260c67802ec",
+      "eventCount": 1
+    }
+  ],
+  "starred": [
+    {
+      "eventId": "f5492254-4d6c-5924-860f-c8b668a76d7a",
+      "eventCount": 2
+    }
+  ],
+
+  "updated": 1734748334762
+}
diff --git a/pages/src/features/command.ts b/pages/src/features/command.ts
index 2a03f3db..43ac9399 100644
--- a/pages/src/features/command.ts
+++ b/pages/src/features/command.ts
@@ -33,14 +33,15 @@ export function cmd2uuid(cmd: CommandContent): string {
 }
 
 const emptyData = {
-  eventName: 'command_hub_add',
-  eventId: '',
   eventCount: 0,
 }
 
 export function getCommands(): Command[] {
   return Commands.map((command) => {
-    const a = Analytics.find((a) => a.eventId === command.id) ?? emptyData
+    const dl =
+      Analytics.download.find((a) => a.eventId === command.id) ?? emptyData
+    const star =
+      Analytics.starred.find((a) => a.eventId === command.id) ?? emptyData
     const tags = command.tags.map((t) => ({
       id: generateUUIDFromObject({ name: t }),
       name: t,
@@ -51,7 +52,8 @@ export function getCommands(): Command[] {
       openModeSecondary: command.openModeSecondary as OPEN_MODE,
       spaceEncoding: command.spaceEncoding as SPACE_ENCODING,
       tags,
-      download: a.eventCount.toLocaleString(),
+      download: dl.eventCount,
+      star: star.eventCount,
     }
   })
 }
diff --git a/pages/src/types.ts b/pages/src/types.ts
index 6745eddd..7d72e2d2 100644
--- a/pages/src/types.ts
+++ b/pages/src/types.ts
@@ -17,7 +17,8 @@ export type SelectionCommand = {
 
 export type Analytics = {
   id: string
-  download: string
+  download: number
+  star: number
 }
 
 export type Tag = {
diff --git a/src/background_script.ts b/src/background_script.ts
index 5d2a271f..2e143448 100644
--- a/src/background_script.ts
+++ b/src/background_script.ts
@@ -188,7 +188,7 @@ const commandFuncs = {
   },
 
   [BgCommand.openPopupAndClick]: (param: openPopupAndClickProps): boolean => {
-    ; (async () => {
+    ;(async () => {
       const tabIds = await openPopups(param)
       if (tabIds.length > 0) {
         await Ipc.sendQueue(tabIds[0], TabCommand.clickElement, {
@@ -255,13 +255,15 @@ const commandFuncs = {
   },
 
   [BgCommand.openTab]: (param: openTabProps, sender: Sender): boolean => {
-    getCurrentTab().then((tab) => {
-      const index = tab.index
+    const open = async () => {
+      const tab = sender.tab ?? (await getCurrentTab())
       chrome.tabs.create({
         ...param,
-        index: index + 1,
+        windowId: tab.windowId,
+        index: tab.index + 1,
       })
-    })
+    }
+    open()
     return false
   },
 
@@ -279,11 +281,11 @@ const commandFuncs = {
         text: escapeJson(escapeJson(selectionText)),
       })
       const opt = JSON.parse(str)
-        ; (async () => {
-          const res = await fetch(url, opt)
-          const json = await res.json()
-          response({ ok: res.ok, res: json })
-        })()
+      ;(async () => {
+        const res = await fetch(url, opt)
+        const json = await res.json()
+        response({ ok: res.ok, res: json })
+      })()
     } catch (e) {
       console.error(e)
       response({ ok: false, res: e })
@@ -362,6 +364,29 @@ const commandFuncs = {
     // return async
     return true
   },
+
+  [BgCommand.toggleStar]: (
+    param: { id: string },
+    sender: Sender,
+    response: (res: unknown) => void,
+  ): boolean => {
+    const toggle = async () => {
+      const settings = await UserSettings.get()
+      const idx = settings.stars.findIndex((s) => s.id === param.id)
+      if (idx >= 0) {
+        settings.stars.splice(idx, 1)
+      } else {
+        settings.stars.push({
+          id: param.id,
+          addedAt: Date.now(),
+        })
+      }
+      await UserSettings.set(settings, true)
+      response(true)
+    }
+    toggle()
+    return true
+  },
 } as { [key: string]: IpcCallback }
 
 for (const key in BgCommand) {
diff --git a/src/components/commandHub/CommandHub.tsx b/src/components/commandHub/CommandHub.tsx
index 196911e0..5b7c1f7d 100644
--- a/src/components/commandHub/CommandHub.tsx
+++ b/src/components/commandHub/CommandHub.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
-import { DownloadLink } from '@/components/commandHub/DownloadLink'
+import { DownloadButton } from '@/components/commandHub/DownloadButton'
+import { StarButton } from '@/components/commandHub/StarButton'
 
 export const CommandHub = (): JSX.Element => {
   return (
     <>
-      <DownloadLink />
+      <DownloadButton />
+      <StarButton />
     </>
   )
 }
diff --git a/src/components/commandHub/DownloadLink.tsx b/src/components/commandHub/DownloadButton.tsx
similarity index 83%
rename from src/components/commandHub/DownloadLink.tsx
rename to src/components/commandHub/DownloadButton.tsx
index 0ad17ca5..b2b4fffc 100644
--- a/src/components/commandHub/DownloadLink.tsx
+++ b/src/components/commandHub/DownloadButton.tsx
@@ -16,7 +16,7 @@ import '@/components/global.css'
 
 const TooltipDuration = 2000
 
-export const DownloadLink = (): JSX.Element => {
+export const DownloadButton = (): JSX.Element => {
   const [position, setPosition] = useState<Element | null>(null)
   const { settings } = useSetting()
   const { addUrlChangeListener, removeUrlChangeListener } =
@@ -57,6 +57,21 @@ export const DownloadLink = (): JSX.Element => {
     })
   }
 
+  const updateCount = () => {
+    document.querySelectorAll('span[data-id]').forEach((span) => {
+      if (!(span instanceof HTMLElement)) return
+      const count = Number(span.dataset.downloadCount)
+      if (count == null || isNaN(count)) return
+      let reviced = 0
+      const cmd = commands.find((c) => c.id === span.dataset.id)
+      if (cmd != null) {
+        // There is a command.
+        reviced++
+      }
+      span.textContent = (count + reviced).toLocaleString()
+    })
+  }
+
   useEffect(() => {
     setButtonClickListener()
     updateButtonVisibility()
@@ -69,9 +84,12 @@ export const DownloadLink = (): JSX.Element => {
 
   useEffect(() => {
     updateButtonVisibility()
+    updateCount()
     addUrlChangeListener(updateButtonVisibility)
+    addUrlChangeListener(updateCount)
     return () => {
       removeUrlChangeListener(updateButtonVisibility)
+      removeUrlChangeListener(updateCount)
     }
   }, [commands])
 
diff --git a/src/components/commandHub/StarButton.tsx b/src/components/commandHub/StarButton.tsx
new file mode 100644
index 00000000..72fde7e1
--- /dev/null
+++ b/src/components/commandHub/StarButton.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useCallback } from 'react'
+import { useSetting } from '@/hooks/useSetting'
+import { sendEvent } from '@/services/analytics'
+import { SCREEN } from '@/const'
+import { useDetectUrlChanged } from '@/hooks/useDetectUrlChanged'
+import { Ipc, BgCommand } from '@/services/ipc'
+
+function isButtonElement(elm: Element): elm is HTMLButtonElement {
+  return elm.tagName?.toLowerCase() === 'button'
+}
+
+function findButtonElement(elm: Element): HTMLButtonElement | undefined {
+  if (elm == null) return undefined
+  if (elm.nodeName === 'body') return undefined
+  if (isButtonElement(elm)) return elm
+  return findButtonElement(elm.parentElement as Element)
+}
+
+export const StarButton = (): JSX.Element => {
+  const { settings } = useSetting()
+  const stars = settings.stars
+  const { addUrlChangeListener, removeUrlChangeListener } =
+    useDetectUrlChanged()
+
+  const updateStar = useCallback(
+    (e: MouseEvent) => {
+      const button = findButtonElement(e.target as Element)
+      const id = button?.dataset.starId
+      if (id == null) return
+      const found = stars.some((s) => s.id === id)
+      sendEvent(
+        `command_hub_star_${found ? 'remove' : 'add'}`,
+        { id },
+        SCREEN.COMMAND_HUB,
+      )
+      Ipc.send(BgCommand.toggleStar, { id })
+    },
+    [stars],
+  )
+
+  const updateButton = useCallback(() => {
+    document.querySelectorAll('button[data-star-id]').forEach((button) => {
+      if (!(button instanceof HTMLButtonElement)) return
+      const id = button.dataset.starId
+      if (id == null) return
+      button.addEventListener('click', updateStar)
+      if (stars.some((s) => s.id === id)) {
+        button.classList.add('starred')
+      } else {
+        button.classList.remove('starred')
+      }
+    })
+  }, [stars])
+
+  const updateCount = () => {
+    document.querySelectorAll('span[data-star-id]').forEach((span) => {
+      if (!(span instanceof HTMLElement)) return
+      const count = Number(span.dataset.starCount)
+      if (count == null || isNaN(count)) return
+      let reviced = 0
+      const star = stars.find((s) => s.id === span.dataset.starId)
+      if (star != null) {
+        // There is a new star.
+        reviced++
+      }
+      span.textContent = (count + reviced).toLocaleString()
+    })
+  }
+
+  const removeButtonEvent = () => {
+    document.querySelectorAll('button[data-star-id]').forEach((button) => {
+      if (!(button instanceof HTMLButtonElement)) return
+      button.removeEventListener('click', updateStar)
+    })
+  }
+
+  useEffect(() => {
+    updateButton()
+    updateCount()
+    addUrlChangeListener(updateButton)
+    addUrlChangeListener(updateCount)
+    return () => {
+      removeUrlChangeListener(updateButton)
+      removeUrlChangeListener(updateCount)
+      removeButtonEvent()
+    }
+  }, [stars])
+
+  return <></>
+}
diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts
index d7dd61e7..ecd11aac 100644
--- a/src/hooks/useSetting.ts
+++ b/src/hooks/useSetting.ts
@@ -2,7 +2,12 @@ import { useState, useEffect } from 'react'
 import { UserSettings } from '../services/userSettings'
 import type { UserSettingsType, PageRule } from '@/types'
 import { isEmpty } from '@/services/util'
-import { STYLE, STARTUP_METHOD } from '@/const'
+import {
+  STYLE,
+  STARTUP_METHOD,
+  DRAG_OPEN_MODE,
+  LINK_COMMAND_ENABLED,
+} from '@/const'
 
 type useSettingReturn = {
   settings: UserSettingsType
@@ -17,11 +22,14 @@ const emptySettings: UserSettingsType = {
   style: STYLE.HORIZONTAL,
   popupPlacement: 'top',
   linkCommand: {
+    enabled: LINK_COMMAND_ENABLED.ENABLE,
+    openMode: DRAG_OPEN_MODE.PREVIEW_POPUP,
     threshold: 150,
     showIndicator: true,
   },
   userStyles: [],
   startupMethod: { method: STARTUP_METHOD.TEXT_SELECTION },
+  stars: [],
 }
 
 export function useSetting(): useSettingReturn {
diff --git a/src/services/defaultUserSettings.ts b/src/services/defaultUserSettings.ts
index daa43c59..90eceb44 100644
--- a/src/services/defaultUserSettings.ts
+++ b/src/services/defaultUserSettings.ts
@@ -46,6 +46,7 @@ export default {
     method: STARTUP_METHOD.TEXT_SELECTION,
   },
   userStyles: [],
+  stars: [],
 } as UserSettingsType
 
 export const PopupOption = {
diff --git a/src/services/ipc.ts b/src/services/ipc.ts
index abeddc86..c52d50c7 100644
--- a/src/services/ipc.ts
+++ b/src/services/ipc.ts
@@ -10,6 +10,7 @@ export enum BgCommand {
   execApi = 'execApi',
   canOpenInTab = 'canOpenInTab',
   openInTab = 'openInTab',
+  toggleStar = 'toggleStar',
 }
 
 export enum TabCommand {
diff --git a/src/services/storage.ts b/src/services/storage.ts
index 0fad7e79..6f9d96a5 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -10,6 +10,7 @@ export enum STORAGE_KEY {
 export enum LOCAL_STORAGE_KEY {
   CACHES = 'caches',
   CLIENT_ID = 'clientId',
+  STARS = 'stars',
 }
 
 export enum SESSION_STORAGE_KEY {
@@ -31,6 +32,7 @@ const DEFAULTS = {
     images: {},
   },
   [LOCAL_STORAGE_KEY.CLIENT_ID]: '',
+  [LOCAL_STORAGE_KEY.STARS]: [],
   [SESSION_STORAGE_KEY.SESSION_DATA]: null,
   [SESSION_STORAGE_KEY.MESSAGE_QUEUE]: [],
 }
diff --git a/src/services/userSettings.ts b/src/services/userSettings.ts
index 74318566..7c2f9a0d 100644
--- a/src/services/userSettings.ts
+++ b/src/services/userSettings.ts
@@ -1,12 +1,7 @@
 import { Storage, STORAGE_KEY, STORAGE_AREA } from './storage'
 import DefaultSettings, { DefaultCommands } from './defaultUserSettings'
-import {
-  OPTION_FOLDER,
-  STARTUP_METHOD,
-  VERSION,
-  LINK_COMMAND_ENABLED,
-} from '@/const'
-import type { UserSettingsType, Version, Command } from '@/types'
+import { OPTION_FOLDER, STARTUP_METHOD, VERSION } from '@/const'
+import type { UserSettingsType, Version, Command, Star } from '@/types'
 import {
   isBase64,
   isEmpty,
@@ -19,6 +14,7 @@ import { OptionSettings } from '@/services/optionSettings'
 
 enum LOCAL_STORAGE_KEY {
   CACHES = 'caches',
+  STARS = 'stars',
 }
 
 export type Caches = {
@@ -49,6 +45,12 @@ export const UserSettings = {
       data.commands = commands
     }
 
+    // Stars
+    data.stars = await Storage.get<Star[]>(
+      LOCAL_STORAGE_KEY.STARS,
+      STORAGE_AREA.LOCAL,
+    )
+
     data = await migrate(data)
 
     data.folders = data.folders.filter((folder) => !!folder.title)
@@ -62,7 +64,10 @@ export const UserSettings = {
     return data
   },
 
-  set: async (data: UserSettingsType): Promise<boolean> => {
+  set: async (
+    data: UserSettingsType,
+    serviceWorker = false,
+  ): Promise<boolean> => {
     // remove unused caches
     const urls = UserSettings.getUrls(data)
     const caches = await UserSettings.getCaches()
@@ -73,25 +78,27 @@ export const UserSettings = {
       }
     }
 
-    // Convert iconUrl to DataURL for cache.
-    const noCacheUrls = urls
-      .filter((url) => !isEmpty(url))
-      .filter((url) => !isBase64(url) && caches.images[url] == null)
-    const newCaches = await Promise.all(
-      noCacheUrls.map(async (url) => {
-        let dataUrl = ''
-        try {
-          dataUrl = await toDataURL(url)
-        } catch (e) {
-          console.warn('Failed to convert to data url', url)
-          console.warn(e)
-        }
-        return [url, dataUrl]
-      }),
-    )
-    for (const [iconUrl, dataUrl] of newCaches) {
-      if (isEmpty(dataUrl)) continue
-      caches.images[iconUrl] = dataUrl
+    if (!serviceWorker) {
+      // Convert iconUrl to DataURL for cache.
+      const noCacheUrls = urls
+        .filter((url) => !isEmpty(url))
+        .filter((url) => !isBase64(url) && caches.images[url] == null)
+      const newCaches = await Promise.all(
+        noCacheUrls.map(async (url) => {
+          let dataUrl = ''
+          try {
+            dataUrl = await toDataURL(url)
+          } catch (e) {
+            console.warn('Failed to convert to data url', url)
+            console.warn(e)
+          }
+          return [url, dataUrl]
+        }),
+      )
+      for (const [iconUrl, dataUrl] of newCaches) {
+        if (isEmpty(dataUrl)) continue
+        caches.images[iconUrl] = dataUrl
+      }
     }
 
     // Restore a link command if not exists.
@@ -106,8 +113,14 @@ export const UserSettings = {
     // Settings for options are kept separate from user set values.
     removeOptionSettings(data)
 
+    // Commands
     await Storage.setCommands(data.commands)
     data.commands = []
+
+    // Stars
+    await Storage.set(LOCAL_STORAGE_KEY.STARS, data.stars, STORAGE_AREA.LOCAL)
+    data.stars = []
+
     await Storage.set(STORAGE_KEY.USER, data)
     await Storage.set(LOCAL_STORAGE_KEY.CACHES, caches, STORAGE_AREA.LOCAL)
     return true
diff --git a/src/types.ts b/src/types.ts
index 93ffa85e..37f2a109 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -98,6 +98,10 @@ export type StartupMethod = {
   leftClickHoldParam?: number
 }
 
+export type Star = {
+  id: string
+}
+
 export type UserSettingsType = {
   settingVersion: Version
   startupMethod: StartupMethod
@@ -108,6 +112,7 @@ export type UserSettingsType = {
   pageRules: Array<PageRule>
   style: STYLE
   userStyles: Array<StyleVariable>
+  stars: Array<Star>
 }
 
 export type SessionData = {
diff --git a/yarn.lock b/yarn.lock
index 911a6240..8307b7e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2837,7 +2837,7 @@ string-hash@^1.1.1:
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -2855,15 +2855,6 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz"
@@ -2880,7 +2871,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -2894,13 +2885,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
@@ -3207,7 +3191,7 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -3225,15 +3209,6 @@ wrap-ansi@^5.1.0:
     string-width "^3.0.0"
     strip-ansi "^5.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"