diff --git a/lib/experimental/Layouts/Utils/DataItem/index.stories.tsx b/lib/experimental/Layouts/Utils/DataItem/index.stories.tsx
new file mode 100644
index 00000000..107cc2bd
--- /dev/null
+++ b/lib/experimental/Layouts/Utils/DataItem/index.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { fn } from "@storybook/test"
+import { DataItem } from "."
+
+const meta: Meta = {
+  component: DataItem,
+  parameters: {
+    layout: "centered",
+    tags: ["autodocs"],
+  },
+  args: {
+    text: "fake.employee@factorial.co",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {}
+
+export const Navigable: Story = {
+  args: {
+    text: "Isabella Gonzalez",
+    onClick: fn(),
+  },
+}
+
+export const NavigableWithAvatar: Story = {
+  args: {
+    text: "Isabella Gonzalez",
+    avatar: {
+      src: "https://github.com/dani-moreno.png",
+      alt: "I",
+    },
+    onClick: fn(),
+  },
+}
+
+export const NavigableWithAlt: Story = {
+  args: {
+    text: "Isabella Gonzalez",
+    avatar: {
+      alt: "I",
+    },
+    onClick: fn(),
+  },
+}
+
+export const NavigableWithAutoAlt: Story = {
+  args: {
+    text: "Isabella Gonzalez",
+    avatar: {},
+    onClick: fn(),
+  },
+}
diff --git a/lib/experimental/Layouts/Utils/DataItem/index.tsx b/lib/experimental/Layouts/Utils/DataItem/index.tsx
new file mode 100644
index 00000000..cdb5fb9f
--- /dev/null
+++ b/lib/experimental/Layouts/Utils/DataItem/index.tsx
@@ -0,0 +1,110 @@
+import { Icon } from "@/components/Utilities/Icon"
+import { Avatar } from "@/experimental/Information/Avatar"
+import { Check, ChevronRight, LayersFront } from "@/icons"
+import { cn } from "@/lib/utils"
+import { ComponentProps, forwardRef, useEffect, useState } from "react"
+import { getColorFromText } from "../helper"
+
+interface DataItemProps {
+  text: string
+  avatar?: Omit<ComponentProps<typeof Avatar>, "alt"> & {
+    alt?: string
+  }
+  onClick?: () => void
+}
+
+const COPIED_SHOWN_MS = 1250
+
+export const DataItem = forwardRef<HTMLDivElement, DataItemProps>(
+  ({ text, avatar, onClick }, ref) => {
+    const [copied, setCopied] = useState(false)
+
+    useEffect(() => {
+      if (copied) {
+        const timer = setTimeout(() => setCopied(false), COPIED_SHOWN_MS)
+
+        return () => clearTimeout(timer)
+      }
+    }, [copied])
+
+    const copyHandler = async () => {
+      try {
+        await navigator.clipboard.writeText(text)
+        setCopied(true)
+      } catch (error) {
+        void error
+      }
+    }
+
+    const handleClick = onClick ?? copyHandler
+
+    const short =
+      avatar?.alt ??
+      text
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((e) => e[0])
+        .join("")
+        .toLocaleUpperCase()
+
+    return (
+      <div
+        ref={ref}
+        role="button"
+        className={cn(
+          "group relative flex w-full cursor-pointer flex-row items-center justify-between gap-1.5 rounded-sm py-1.5 pl-1.5 pr-2 font-medium text-f1-foreground transition-colors duration-300 hover:bg-f1-background-secondary",
+          copied
+            ? "hover:bg-f1-background-positive"
+            : "hover:bg-f1-background-secondary"
+        )}
+        onClick={handleClick}
+        aria-label={onClick ? "Navigate" : `Copy ${text} to clipboard`}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault()
+            handleClick()
+          }
+        }}
+        tabIndex={0}
+      >
+        <div className="flex flex-row items-center gap-1.5">
+          {!!avatar && (
+            <Avatar
+              alt={short}
+              src={avatar?.src}
+              size="xsmall"
+              color={getColorFromText(text)}
+            />
+          )}
+          <p>{text}</p>
+        </div>
+        {!onClick ? (
+          <div className="flex items-center text-f1-foreground-secondary">
+            <Icon
+              icon={LayersFront}
+              size="md"
+              className={cn(
+                "absolute right-1.5 opacity-0 transition-all duration-300",
+                !copied && "group-hover:opacity-100"
+              )}
+            />
+            <Icon
+              icon={Check}
+              size="md"
+              className={cn(
+                "absolute right-1.5 opacity-0 transition-all duration-300",
+                copied && "group-hover:opacity-100"
+              )}
+            />
+          </div>
+        ) : (
+          <div className="flex items-center text-f1-foreground-secondary opacity-0 transition-all duration-300 group-hover:opacity-100">
+            <Icon icon={ChevronRight} size="md" />
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+DataItem.displayName = "DataItem"
diff --git a/lib/experimental/Layouts/Utils/TagsList/index.stories.tsx b/lib/experimental/Layouts/Utils/DataList/index.stories.tsx
similarity index 65%
rename from lib/experimental/Layouts/Utils/TagsList/index.stories.tsx
rename to lib/experimental/Layouts/Utils/DataList/index.stories.tsx
index 6a74603a..dd30272a 100644
--- a/lib/experimental/Layouts/Utils/TagsList/index.stories.tsx
+++ b/lib/experimental/Layouts/Utils/DataList/index.stories.tsx
@@ -1,49 +1,41 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { TagsList } from "."
+import { fn } from "@storybook/test"
+import { DataList } from "."
 
 const meta: Meta = {
-  component: TagsList,
+  component: DataList,
   parameters: {
     layout: "centered",
     tags: ["autodocs"],
   },
   args: {
-    tags: [
+    items: [
       {
-        text: "Management",
-        avatar: {
-          alt: "M",
-        },
+        text: "fake.email@factorial.co",
       },
       {
         text: "Engineering",
         avatar: {
+          src: "https://github.com/dani-moreno.png",
           alt: "E",
         },
+        onClick: fn(),
       },
       {
         text: "Managers",
         avatar: {
           alt: "M",
         },
+        onClick: fn(),
       },
       {
         text: "Office/Spain",
-        avatar: {
-          alt: "O",
-        },
+        avatar: {},
+        onClick: fn(),
       },
       {
         text: "Office/Remote",
-        avatar: {
-          alt: "O",
-        },
-      },
-      {
-        text: "Engineering/Management",
-        avatar: {
-          alt: "E",
-        },
+        onClick: fn(),
       },
     ],
   },
diff --git a/lib/experimental/Layouts/Utils/DataList/index.tsx b/lib/experimental/Layouts/Utils/DataList/index.tsx
new file mode 100644
index 00000000..62ac39f3
--- /dev/null
+++ b/lib/experimental/Layouts/Utils/DataList/index.tsx
@@ -0,0 +1,20 @@
+import { ComponentProps, forwardRef } from "react"
+import { DataItem } from "../DataItem"
+
+interface DataListProps {
+  items: ComponentProps<typeof DataItem>[]
+}
+
+export const DataList = forwardRef<HTMLDivElement, DataListProps>(
+  ({ items }, ref) => {
+    return (
+      <div ref={ref} className="flex flex-col gap-0.5">
+        {items.map(({ ...props }, i) => (
+          <DataItem key={i} {...props} />
+        ))}
+      </div>
+    )
+  }
+)
+
+DataList.displayName = "DataList"
diff --git a/lib/experimental/Layouts/Utils/DetailsItemsList/index.stories.tsx b/lib/experimental/Layouts/Utils/DetailsItemsList/index.stories.tsx
index b7c91f52..47792e85 100644
--- a/lib/experimental/Layouts/Utils/DetailsItemsList/index.stories.tsx
+++ b/lib/experimental/Layouts/Utils/DetailsItemsList/index.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentProps } from "react"
 import avatar from "~/storybook-assets/avatar.jpeg"
 import { DetailsItemsList } from "."
 import { Weekdays } from "../../../Widgets/Content/Weekdays"
-import { TagsList } from "../TagsList"
+import { DataList } from "../DataList"
 
 const manager = (
   <Badge text="Isabella González" avatar={{ src: avatar, alt: "I" }} />
@@ -17,8 +17,8 @@ const weekdays = (
   />
 )
 const teams = (
-  <TagsList
-    tags={[
+  <DataList
+    items={[
       { text: "Management", avatar: { alt: "M" } },
       { text: "Engineering", avatar: { alt: "E" } },
       { text: "Managers", avatar: { alt: "M" } },
diff --git a/lib/experimental/Layouts/Utils/Tag/index.stories.tsx b/lib/experimental/Layouts/Utils/Tag/index.stories.tsx
deleted file mode 100644
index 3ccb00f2..00000000
--- a/lib/experimental/Layouts/Utils/Tag/index.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { fn } from "@storybook/test"
-import { Tag } from "."
-
-const meta: Meta = {
-  component: Tag,
-  parameters: {
-    layout: "centered",
-    tags: ["autodocs"],
-  },
-  args: {
-    text: "Isabella González",
-    avatar: {
-      alt: "I",
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {}
-
-export const Avatar: Story = {
-  args: {
-    avatar: {
-      src: "https://github.com/dani-moreno.png",
-      alt: "I",
-    },
-  },
-}
-
-export const Clickable: Story = {
-  args: {
-    onClick: fn(),
-  },
-}
-
-export const Alt: Story = {
-  args: {
-    avatar: undefined,
-  },
-}
diff --git a/lib/experimental/Layouts/Utils/Tag/index.tsx b/lib/experimental/Layouts/Utils/Tag/index.tsx
deleted file mode 100644
index a224f019..00000000
--- a/lib/experimental/Layouts/Utils/Tag/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Avatar } from "@/experimental/Information/Avatar"
-import { cn } from "@/lib/utils"
-import { ComponentProps, forwardRef } from "react"
-import { getColorFromText } from "../helper"
-
-interface TagProps {
-  text: string
-  avatar?: ComponentProps<typeof Avatar>
-  onClick?: () => void
-}
-
-export const Tag = forwardRef<HTMLDivElement, TagProps>(
-  ({ text, avatar, onClick }, ref) => {
-    const short =
-      avatar?.alt ??
-      text
-        .split(/\s+/)
-        .slice(0, 2)
-        .map((e) => e[0])
-        .join("")
-        .toLocaleUpperCase()
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex flex-row items-center justify-start gap-1.5 rounded-md border border-solid border-f1-border py-1 pl-1 pr-2 font-medium text-f1-foreground",
-          onClick && "cursor-pointer"
-        )}
-        onClick={onClick}
-      >
-        <span>
-          <Avatar
-            alt={short}
-            src={avatar?.src}
-            size="xsmall"
-            color={getColorFromText(text)}
-          />
-        </span>
-        <p>{text}</p>
-      </div>
-    )
-  }
-)
-
-Tag.displayName = "Tag"
diff --git a/lib/experimental/Layouts/Utils/TagsList/index.tsx b/lib/experimental/Layouts/Utils/TagsList/index.tsx
deleted file mode 100644
index f40c2606..00000000
--- a/lib/experimental/Layouts/Utils/TagsList/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentProps, forwardRef } from "react"
-import { Tag } from "../Tag"
-
-interface TagsListProps {
-  tags: ComponentProps<typeof Tag>[]
-}
-
-export const TagsList = forwardRef<HTMLDivElement, TagsListProps>(
-  ({ tags }, ref) => {
-    return (
-      <div ref={ref} className="flex flex-wrap gap-3">
-        {tags.map(({ ...props }, i) => (
-          <Tag key={i} {...props} />
-        ))}
-      </div>
-    )
-  }
-)
-
-TagsList.displayName = "TagsList"
diff --git a/lib/experimental/Layouts/Utils/exports.tsx b/lib/experimental/Layouts/Utils/exports.tsx
index 263b03f6..168e103c 100644
--- a/lib/experimental/Layouts/Utils/exports.tsx
+++ b/lib/experimental/Layouts/Utils/exports.tsx
@@ -1,4 +1,4 @@
+export * from "./DataList"
 export * from "./DetailsItem"
 export * from "./DetailsItemsList"
-export * from "./TagsList"
 export * from "./VerticalSeparator"