diff --git a/frontend/web/src/components/Header.tsx b/frontend/web/src/components/Header.tsx
index e250b3c..0b2f712 100644
--- a/frontend/web/src/components/Header.tsx
+++ b/frontend/web/src/components/Header.tsx
@@ -43,7 +43,7 @@ const Header: React.FC = () => {
             )}
             {shouldShowRouterSwitch && (
               <>
-                <span className="font-mono opacity-60 mx-1">/</span>
+                <span className="font-mono opacity-60 mx-1 dark:text-gray-400">/</span>
                 <Dropdown
                   trigger={
                     <button className="flex flex-row justify-end items-center cursor-pointer">
@@ -51,20 +51,20 @@ const Header: React.FC = () => {
                       <Icon.ChevronsUpDown className="ml-1 w-4 h-auto text-gray-600 dark:text-gray-400" />
                     </button>
                   }
-                  actionsClassName="!w-36 -left-4"
+                  actionsClassName="!w-32 -left-4 text-sm"
                   actions={
                     <>
                       <Link
                         to="/"
                         className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                       >
-                        <Icon.SquareSlash className="w-5 h-auto mr-2 opacity-70" /> Shortcuts
+                        <Icon.SquareSlash className="w-4 h-auto mr-2 opacity-70" /> Shortcuts
                       </Link>
                       <Link
                         to="/collections"
                         className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                       >
-                        <Icon.LibrarySquare className="w-5 h-auto mr-2 opacity-70" /> Collections
+                        <Icon.LibrarySquare className="w-4 h-auto mr-2 opacity-70" /> Collections
                       </Link>
                     </>
                   }
@@ -81,34 +81,34 @@ const Header: React.FC = () => {
                   <Icon.ChevronDown className="ml-2 w-5 h-auto text-gray-600 dark:text-gray-400" />
                 </button>
               }
-              actionsClassName="!w-32"
+              actionsClassName="!w-32 text-sm"
               actions={
                 <>
                   <Link
                     to="/setting/general"
                     className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                   >
-                    <Icon.User className="w-4 h-auto mr-2" /> {t("user.profile")}
+                    <Icon.User className="w-4 h-auto mr-2 opacity-70" /> {t("user.profile")}
                   </Link>
                   {isAdmin && (
                     <Link
                       to="/setting/workspace"
                       className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                     >
-                      <Icon.Settings className="w-4 h-auto mr-2" /> {t("settings.self")}
+                      <Icon.Settings className="w-4 h-auto mr-2 opacity-70" /> {t("settings.self")}
                     </Link>
                   )}
                   <button
                     className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                     onClick={() => setShowAboutDialog(true)}
                   >
-                    <Icon.Info className="w-4 h-auto mr-2" /> {t("common.about")}
+                    <Icon.Info className="w-4 h-auto mr-2 opacity-70" /> {t("common.about")}
                   </button>
                   <button
                     className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                     onClick={() => handleSignOutButtonClick()}
                   >
-                    <Icon.LogOut className="w-4 h-auto mr-2" /> {t("auth.sign-out")}
+                    <Icon.LogOut className="w-4 h-auto mr-2 opacity-70" /> {t("auth.sign-out")}
                   </button>
                 </>
               }
diff --git a/frontend/web/src/components/ShortcutActionsDropdown.tsx b/frontend/web/src/components/ShortcutActionsDropdown.tsx
index 482e2ea..fdc81f6 100644
--- a/frontend/web/src/components/ShortcutActionsDropdown.tsx
+++ b/frontend/web/src/components/ShortcutActionsDropdown.tsx
@@ -43,7 +43,7 @@ const ShortcutActionsDropdown = (props: Props) => {
   return (
     <>
       <Dropdown
-        actionsClassName="!w-32 dark:text-gray-500"
+        actionsClassName="!w-32 dark:text-gray-500 text-sm"
         actions={
           <>
             {havePermission && (
@@ -51,20 +51,20 @@ const ShortcutActionsDropdown = (props: Props) => {
                 className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
                 onClick={() => setShowEditDrawer(true)}
               >
-                <Icon.Edit className="w-4 h-auto mr-2" /> {t("common.edit")}
+                <Icon.Edit className="w-4 h-auto mr-2 opacity-70" /> {t("common.edit")}
               </button>
             )}
             <button
               className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
               onClick={() => setShowQRCodeDialog(true)}
             >
-              <Icon.QrCode className="w-4 h-auto mr-2" /> QR Code
+              <Icon.QrCode className="w-4 h-auto mr-2 opacity-70" /> QR Code
             </button>
             <button
               className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
               onClick={gotoAnalytics}
             >
-              <Icon.BarChart2 className="w-4 h-auto mr-2" /> {t("analytics.self")}
+              <Icon.BarChart2 className="w-4 h-auto mr-2 opacity-70" /> {t("analytics.self")}
             </button>
             {havePermission && (
               <button
@@ -73,7 +73,7 @@ const ShortcutActionsDropdown = (props: Props) => {
                   handleDeleteShortcutButtonClick(shortcut);
                 }}
               >
-                <Icon.Trash className="w-4 h-auto mr-2" /> {t("common.delete")}
+                <Icon.Trash className="w-4 h-auto mr-2 opacity-70" /> {t("common.delete")}
               </button>
             )}
           </>
diff --git a/frontend/web/src/components/ShortcutCard.tsx b/frontend/web/src/components/ShortcutCard.tsx
index a0b5a5f..3057069 100644
--- a/frontend/web/src/components/ShortcutCard.tsx
+++ b/frontend/web/src/components/ShortcutCard.tsx
@@ -103,7 +103,7 @@ const ShortcutCard = (props: Props) => {
           })}
           {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm leading-4 italic">No tags</span>}
         </div>
-        <div className="w-full flex mt-2 gap-2 overflow-x-auto">
+        <div className="w-full mt-2 flex gap-2 overflow-x-auto">
           <Tooltip
             title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
             variant="solid"
@@ -111,19 +111,19 @@ const ShortcutCard = (props: Props) => {
             arrow
           >
             <div
-              className="w-auto px-2 leading-6 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap border rounded-full cursor-pointer text-gray-500 dark:text-gray-400 text-sm dark:border-zinc-700"
+              className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-500 text-xs"
               onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
             >
-              <VisibilityIcon className="w-4 h-auto mr-1 opacity-60" visibility={shortcut.visibility} />
+              <VisibilityIcon className="w-3 h-auto mr-0.5 opacity-70" visibility={shortcut.visibility} />
               {t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
             </div>
           </Tooltip>
           <Tooltip title="View count" variant="solid" placement="top" arrow>
             <Link
               to={`/shortcut/${shortcut.id}#analytics`}
-              className="w-auto px-2 leading-6 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap border rounded-full cursor-pointer text-gray-500 dark:text-gray-400 text-sm dark:border-zinc-700"
+              className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-500 text-xs"
             >
-              <Icon.BarChart2 className="w-4 h-auto mr-1 opacity-80" />
+              <Icon.BarChart2 className="w-3 h-auto mr-0.5 opacity-70" />
               {t("shortcut.visits", { count: shortcut.viewCount })}
             </Link>
           </Tooltip>
diff --git a/frontend/web/src/pages/ShortcutDetail.tsx b/frontend/web/src/pages/ShortcutDetail.tsx
index 4325ff8..e91ea06 100644
--- a/frontend/web/src/pages/ShortcutDetail.tsx
+++ b/frontend/web/src/pages/ShortcutDetail.tsx
@@ -78,7 +78,7 @@ const ShortcutDetail = () => {
   return (
     <>
       <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
-        <div className="mt-8 w-12 h-12 flex justify-center items-center overflow-clip">
+        <div className="mt-4 sm:mt-8 w-12 h-12 flex justify-center items-center overflow-clip">
           {favicon ? (
             <img className="w-full h-auto rounded-lg" src={favicon} decoding="async" loading="lazy" />
           ) : (
@@ -156,8 +156,8 @@ const ShortcutDetail = () => {
             ></Dropdown>
           )}
         </div>
-        {shortcut.description && <p className="w-full break-all mt-2 text-gray-400 text-sm dark:text-gray-500">{shortcut.description}</p>}
-        <div className="mt-4 ml-1 flex flex-row justify-start items-start flex-wrap gap-2">
+        {shortcut.description && <p className="w-full break-all mt-4 text-gray-500 dark:text-gray-400">{shortcut.description}</p>}
+        <div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
           {shortcut.tags.map((tag) => {
             return (
               <span key={tag} className="max-w-[8rem] truncate text-gray-400 text leading-4 dark:text-gray-500">