diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx
index 23ae3f9..12f3190 100644
--- a/web/src/components/ShortcutListView.tsx
+++ b/web/src/components/ShortcutListView.tsx
@@ -44,15 +44,53 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
       <div className="w-full flex flex-col justify-start items-start">
         {shortcutList.map((shortcut) => {
           return (
-            <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-4 py-3 mb-2 rounded-lg">
-              <div className="flex flex-col justify-start items-start mr-4">
-                <p>
+            <div key={shortcut.id} className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg">
+              <div className="w-full flex flex-row justify-between items-center">
+                <p className="text-lg mr-1 shrink-0">
                   <span className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
                     <span className="text-gray-400">o/</span>
                     {shortcut.name}
                   </span>
                 </p>
-                {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
+                <div className="flex flex-row justify-end items-center space-x-2">
+                  <Tooltip title="Copy link" variant="solid" placement="top">
+                    <button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
+                      <Icon.Copy className="w-5 h-auto text-gray-600" />
+                    </button>
+                  </Tooltip>
+                  <Tooltip title="Go to link" variant="solid" placement="top">
+                    <a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
+                      <Icon.ExternalLink className="w-5 h-auto text-gray-600" />
+                    </a>
+                  </Tooltip>
+                  <Dropdown
+                    actionsClassName="!w-24"
+                    actions={
+                      <>
+                        <button
+                          disabled={!havePermission(shortcut)}
+                          className="w-full px-2 text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                          onClick={() => setEditingShortcutId(shortcut.id)}
+                        >
+                          Edit
+                        </button>
+                        <button
+                          disabled={!havePermission(shortcut)}
+                          className="w-full px-2 text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                          onClick={() => {
+                            handleDeleteShortcutButtonClick(shortcut);
+                          }}
+                        >
+                          Delete
+                        </button>
+                      </>
+                    }
+                  ></Dropdown>
+                </div>
+              </div>
+              {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
+              {/* TODO(steven): display shortcut's tags later */}
+              {shortcut.tags.length > 0 && false && (
                 <div className="mt-2 flex flex-row justify-start items-start gap-2">
                   <Icon.Tag className="text-gray-400 w-4 h-auto" />
                   {shortcut.tags.map((tag) => {
@@ -63,41 +101,14 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
                     );
                   })}
                 </div>
-              </div>
-              <div className="flex flex-row justify-end items-center space-x-2">
-                <Tooltip title="Copy link" variant="solid" placement="top">
-                  <button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
-                    <Icon.Copy className="w-5 h-auto text-gray-600" />
-                  </button>
+              )}
+              <div className="w-full flex mt-2">
+                <Tooltip title="View count" variant="solid" placement="top">
+                  <div className="w-auto px-2 pr-3 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 font-mono text-sm">
+                    <Icon.Eye className="w-4 h-auto mr-1" />
+                    {shortcut.view}
+                  </div>
                 </Tooltip>
-                <Tooltip title="Go to link" variant="solid" placement="top">
-                  <a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
-                    <Icon.ExternalLink className="w-5 h-auto text-gray-600" />
-                  </a>
-                </Tooltip>
-                <Dropdown
-                  actionsClassName="!w-24"
-                  actions={
-                    <>
-                      <button
-                        disabled={!havePermission(shortcut)}
-                        className="w-full px-2 text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
-                        onClick={() => setEditingShortcutId(shortcut.id)}
-                      >
-                        Edit
-                      </button>
-                      <button
-                        disabled={!havePermission(shortcut)}
-                        className="w-full px-2 text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
-                        onClick={() => {
-                          handleDeleteShortcutButtonClick(shortcut);
-                        }}
-                      >
-                        Delete
-                      </button>
-                    </>
-                  }
-                ></Dropdown>
               </div>
             </div>
           );
diff --git a/web/src/types/modules/shortcut.d.ts b/web/src/types/modules/shortcut.d.ts
index 6cf782e..6295ecd 100644
--- a/web/src/types/modules/shortcut.d.ts
+++ b/web/src/types/modules/shortcut.d.ts
@@ -16,6 +16,7 @@ interface Shortcut {
   description: string;
   visibility: Visibility;
   tags: string[];
+  view: number;
 }
 
 interface ShortcutCreate {