diff --git a/store/shortcut.go b/store/shortcut.go
index 725632e..167bb11 100644
--- a/store/shortcut.go
+++ b/store/shortcut.go
@@ -166,6 +166,7 @@ func (s *Store) UpdateShortcut(ctx context.Context, update *UpdateShortcut) (*st
 	}
 	shortcut.RowStatus = convertRowStatusStringToStorepb(rowStatus)
 	shortcut.Visibility = convertVisibilityStringToStorepb(visibility)
+	shortcut.Tags = filterTags(strings.Split(tags, " "))
 	var ogMetadata storepb.OpenGraphMetadata
 	if err := protojson.Unmarshal([]byte(openGraphMetadataString), &ogMetadata); err != nil {
 		return nil, err
@@ -247,7 +248,7 @@ func (s *Store) ListShortcuts(ctx context.Context, find *FindShortcut) ([]*store
 		}
 		shortcut.RowStatus = convertRowStatusStringToStorepb(rowStatus)
 		shortcut.Visibility = storepb.Visibility(storepb.Visibility_value[visibility])
-		shortcut.Tags = strings.Split(tags, " ")
+		shortcut.Tags = filterTags(strings.Split(tags, " "))
 		var ogMetadata storepb.OpenGraphMetadata
 		if err := protojson.Unmarshal([]byte(openGraphMetadataString), &ogMetadata); err != nil {
 			return nil, err
@@ -315,6 +316,16 @@ func vacuumShortcut(ctx context.Context, tx *sql.Tx) error {
 	return nil
 }
 
+func filterTags(tags []string) []string {
+	result := []string{}
+	for _, tag := range tags {
+		if tag != "" {
+			result = append(result, tag)
+		}
+	}
+	return result
+}
+
 func convertVisibilityStringToStorepb(visibility string) storepb.Visibility {
 	return storepb.Visibility(storepb.Visibility_value[visibility])
 }
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index eae9b26..9248fe5 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -59,26 +59,35 @@ const ShortcutView = (props: Props) => {
 
   return (
     <>
-      <div className="w-full flex flex-col justify-start items-start border px-4 py-3 rounded-lg hover:shadow">
+      <div className="group w-full flex flex-col justify-start items-start border px-4 py-3 rounded-lg hover:shadow">
         <div className="w-full flex flex-row justify-between items-center">
-          <div className="group flex flex-row justify-start items-center pr-2 mr-1 shrink-0">
-            <Link to={`/shortcut/${shortcut.id}`} className="w-8 h-8 mr-1 flex justify-center items-center overflow-clip">
+          <div className="w-[calc(100%-16px)] flex flex-row justify-start items-center pr-2 mr-1 shrink-0">
+            <Link to={`/shortcut/${shortcut.id}`} className="w-8 h-8 flex justify-center items-center overflow-clip shrink-0">
               {favicon ? (
                 <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
               ) : (
                 <Icon.CircleSlash className="w-8 h-auto text-gray-400" />
               )}
             </Link>
-            <div className="flex flex-col justify-start items-start">
-              <div className="flex flex-row justify-start items-center">
+            <div className="ml-1 w-[calc(100%-32px)] flex flex-col justify-start items-start">
+              <div className="w-full flex flex-row justify-start items-center">
                 <a
-                  className="flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
+                  className="max-w-[calc(100%-32px)] flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
                   target="_blank"
                   href={shortcutLink}
                 >
-                  <span className="text-gray-400">s/</span>
-                  <span className="max-w-[14rem] truncate">{shortcut.name}</span>
-                  <span className="hidden group-hover:block ml-1 cursor-pointer">
+                  <div className="truncate">
+                    <span>{shortcut.title}</span>
+                    {shortcut.title ? (
+                      <span className="text-gray-400">(s/{shortcut.name})</span>
+                    ) : (
+                      <>
+                        <span className="text-gray-400">s/</span>
+                        <span className="truncate">{shortcut.name}</span>
+                      </>
+                    )}
+                  </div>
+                  <span className="hidden group-hover:block ml-1 cursor-pointer shrink-0">
                     <Icon.ExternalLink className="w-4 h-auto text-gray-600" />
                   </span>
                 </a>
@@ -90,21 +99,13 @@ const ShortcutView = (props: Props) => {
                     <Icon.Clipboard className="w-4 h-auto mx-auto" />
                   </button>
                 </Tooltip>
-                <Tooltip title="QR Code" variant="solid" placement="top" arrow>
-                  <button
-                    className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
-                    onClick={() => setShowQRCodeDialog(true)}
-                  >
-                    <Icon.QrCode className="w-4 h-auto mx-auto" />
-                  </button>
-                </Tooltip>
               </div>
-              <a className="ml-1 text-sm max-w-[16rem] truncate text-gray-400 hover:underline" href={shortcut.link} target="_blank">
+              <a className="ml-1 w-full text-sm truncate text-gray-400 hover:underline" href={shortcut.link} target="_blank">
                 {shortcut.link}
               </a>
             </div>
           </div>
-          <div className="flex flex-row justify-end items-center space-x-2">
+          <div className="flex flex-row justify-end items-center">
             {havePermission && (
               <Dropdown
                 actionsClassName="!w-32"
@@ -116,6 +117,12 @@ const ShortcutView = (props: Props) => {
                     >
                       <Icon.Edit className="w-4 h-auto mr-2" /> 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"
+                      onClick={() => setShowQRCodeDialog(true)}
+                    >
+                      <Icon.QrCode className="w-4 h-auto mr-2" /> 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"
                       onClick={() => setShowAnalyticsDialog(true)}
@@ -136,6 +143,20 @@ const ShortcutView = (props: Props) => {
             )}
           </div>
         </div>
+        <div className="mt-2 w-full flex flex-row justify-start items-start gap-2 truncate">
+          {shortcut.tags.map((tag) => {
+            return (
+              <span
+                key={tag}
+                className="max-w-[8rem] truncate text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
+                onClick={() => viewStore.setFilter({ tag: tag })}
+              >
+                #{tag}
+              </span>
+            );
+          })}
+          {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm font-mono leading-4 italic">No tags</span>}
+        </div>
         <div className="w-full flex mt-2 gap-2">
           <Tooltip title="Creator" variant="solid" placement="top" arrow>
             <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">