diff --git "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043" "b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
deleted file mode 100644
index 5c4e218..0000000
--- "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
+++ /dev/null
@@ -1,21 +0,0 @@
-package works.iterative.ui.components.laminar
-package tailwind
-
-import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.model.color.ColorKind
-import works.iterative.ui.components.tailwind.ComponentContext
-import works.iterative.ui.components.tailwind.laminar.LaminarExtensions.given
-import works.iterative.ui.model.Tag
-
-trait TailwindUIBadgesComponentsModule(using ComponentContext):
-
-  object badges:
-    override def tag(name: String, color: ColorKind): HtmlElement =
-      p(
-        cls(
-          "px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
-        ),
-        color(800).text,
-        color(100).bg,
-        name
-      )

diff --git "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043" "b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
deleted file mode 100644
index 5c4e218..0000000
--- "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
+++ /dev/null
@@ -1,21 +0,0 @@
-package works.iterative.ui.components.laminar
-package tailwind
-
-import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.model.color.ColorKind
-import works.iterative.ui.components.tailwind.ComponentContext
-import works.iterative.ui.components.tailwind.laminar.LaminarExtensions.given
-import works.iterative.ui.model.Tag
-
-trait TailwindUIBadgesComponentsModule(using ComponentContext):
-
-  object badges:
-    override def tag(name: String, color: ColorKind): HtmlElement =
-      p(
-        cls(
-          "px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
-        ),
-        color(800).text,
-        color(100).bg,
-        name
-      )
diff --git "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043" "b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043"
deleted file mode 100644
index 0c9ca25..0000000
--- "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043"
+++ /dev/null
@@ -1,24 +0,0 @@
-package works.iterative.ui.components.laminar
-package tailwind
-
-import com.raquo.laminar.api.L.{*, given}
-
-trait TailwindUIHeadingsComponentsModule:
-  val headings: HeadingsComponents = new HeadingsComponents
-
-  class HeadingsComponents:
-    def section(title: Node, actions: HtmlElement*): HtmlElement =
-      div(
-        cls("border-b border-gray-200 pb-5"),
-        div(
-          cls("sm:flex sm:items-center sm:justify-between"),
-          h3(cls("text-base font-semibold leading-6 text-gray-900"), title),
-          div(
-            cls("mt-3 flex sm:ml-4 sm:mt-0"),
-            actions match
-              case Nil => emptyMod
-              case first :: rest =>
-                first :: rest.map(_.amend(cls("ml-3")))
-          )
-        )
-      )

diff --git "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043" "b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
deleted file mode 100644
index 5c4e218..0000000
--- "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
+++ /dev/null
@@ -1,21 +0,0 @@
-package works.iterative.ui.components.laminar
-package tailwind
-
-import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.model.color.ColorKind
-import works.iterative.ui.components.tailwind.ComponentContext
-import works.iterative.ui.components.tailwind.laminar.LaminarExtensions.given
-import works.iterative.ui.model.Tag
-
-trait TailwindUIBadgesComponentsModule(using ComponentContext):
-
-  object badges:
-    override def tag(name: String, color: ColorKind): HtmlElement =
-      p(
-        cls(
-          "px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
-        ),
-        color(800).text,
-        color(100).bg,
-        name
-      )
diff --git "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043" "b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043"
deleted file mode 100644
index 0c9ca25..0000000
--- "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043"
+++ /dev/null
@@ -1,24 +0,0 @@
-package works.iterative.ui.components.laminar
-package tailwind
-
-import com.raquo.laminar.api.L.{*, given}
-
-trait TailwindUIHeadingsComponentsModule:
-  val headings: HeadingsComponents = new HeadingsComponents
-
-  class HeadingsComponents:
-    def section(title: Node, actions: HtmlElement*): HtmlElement =
-      div(
-        cls("border-b border-gray-200 pb-5"),
-        div(
-          cls("sm:flex sm:items-center sm:justify-between"),
-          h3(cls("text-base font-semibold leading-6 text-gray-900"), title),
-          div(
-            cls("mt-3 flex sm:ml-4 sm:mt-0"),
-            actions match
-              case Nil => emptyMod
-              case first :: rest =>
-                first :: rest.map(_.amend(cls("ml-3")))
-          )
-        )
-      )
diff --git a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/DetailComponentsModule.scala b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/DetailComponentsModule.scala
new file mode 100644
index 0000000..10a322c
--- /dev/null
+++ b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/DetailComponentsModule.scala
@@ -0,0 +1,87 @@
+package works.iterative.ui.components.laminar
+package tailwind
+package ui
+
+import com.raquo.laminar.api.L.{*, given}
+import works.iterative.ui.components.tailwind.ComponentContext
+import works.iterative.ui.model.FileRef
+
+trait DetailComponentsModule:
+  self: IconsModule =>
+  object details:
+    def section(
+        title: Modifier[HtmlElement],
+        subtitle: Option[Modifier[HtmlElement]],
+        actions: Modifier[HtmlElement]*
+    )(fields: HtmlElement*): HtmlElement =
+      div(
+        div(
+          cls := "px-4 sm:px-0",
+          h3(
+            cls := "text-base font-semibold leading-7 text-gray-900",
+            title
+          ),
+          subtitle.map(st =>
+            p(
+              cls := "mt-1 max-w-2xl text-sm leading-6 text-gray-500",
+              st
+            )
+          )
+          // TODO: actions
+        ),
+        div(
+          cls := "mt-6 border-t border-gray-100",
+          dl(
+            cls := "divide-y divide-gray-100",
+            fields
+          )
+        )
+      )
+
+    def field(
+        title: String,
+        content: Modifier[HtmlElement]*
+    ): HtmlElement =
+      div(
+        cls := "px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0",
+        dt(
+          cls := "text-sm font-medium leading-6 text-gray-900",
+          title
+        ),
+        dd(
+          cls := "mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0",
+          content
+        )
+      )
+
+    def files(fs: List[FileRef]): HtmlElement =
+      ul(
+        role := "list",
+        cls := "divide-y divide-gray-100 rounded-md border border-gray-200",
+        fs.map(file)
+      )
+
+    def file(f: FileRef): HtmlElement =
+      li(
+        cls := "flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6",
+        div(
+          cls := "flex w-0 flex-1 items-center",
+          icons.`paper-clip-solid`(),
+          div(
+            cls := "ml-4 flex min-w-0 flex-1 gap-2",
+            span(
+              cls := "truncate font-medium",
+              f.name
+            ),
+            f.size.map(size => span(cls := "flex-shrink-0 text-gray-400", size))
+          )
+        ),
+        div(
+          cls := "ml-4 flex-shrink-0",
+          a(
+            href := "#",
+            cls := "font-medium text-indigo-600 hover:text-indigo-500",
+            "Uložit"
+          )
+        )
+      )

diff --git "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043" "b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
deleted file mode 100644
index 5c4e218..0000000
--- "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
+++ /dev/null
@@ -1,21 +0,0 @@
-package works.iterative.ui.components.laminar
-package tailwind
-
-import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.model.color.ColorKind
-import works.iterative.ui.components.tailwind.ComponentContext
-import works.iterative.ui.components.tailwind.laminar.LaminarExtensions.given
-import works.iterative.ui.model.Tag
-
-trait TailwindUIBadgesComponentsModule(using ComponentContext):
-
-  object badges:
-    override def tag(name: String, color: ColorKind): HtmlElement =
-      p(
-        cls(
-          "px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
-        ),
-        color(800).text,
-        color(100).bg,
-        name
-      )
diff --git "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043" "b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043"
deleted file mode 100644
index 0c9ca25..0000000
--- "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043"
+++ /dev/null
@@ -1,24 +0,0 @@
-package works.iterative.ui.components.laminar
-package tailwind
-
-import com.raquo.laminar.api.L.{*, given}
-
-trait TailwindUIHeadingsComponentsModule:
-  val headings: HeadingsComponents = new HeadingsComponents
-
-  class HeadingsComponents:
-    def section(title: Node, actions: HtmlElement*): HtmlElement =
-      div(
-        cls("border-b border-gray-200 pb-5"),
-        div(
-          cls("sm:flex sm:items-center sm:justify-between"),
-          h3(cls("text-base font-semibold leading-6 text-gray-900"), title),
-          div(
-            cls("mt-3 flex sm:ml-4 sm:mt-0"),
-            actions match
-              case Nil => emptyMod
-              case first :: rest =>
-                first :: rest.map(_.amend(cls("ml-3")))
-          )
-        )
-      )
diff --git a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/DetailComponentsModule.scala b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/DetailComponentsModule.scala
new file mode 100644
index 0000000..10a322c
--- /dev/null
+++ b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/DetailComponentsModule.scala
@@ -0,0 +1,87 @@
+package works.iterative.ui.components.laminar
+package tailwind
+package ui
+
+import com.raquo.laminar.api.L.{*, given}
+import works.iterative.ui.components.tailwind.ComponentContext
+import works.iterative.ui.model.FileRef
+
+trait DetailComponentsModule:
+  self: IconsModule =>
+  object details:
+    def section(
+        title: Modifier[HtmlElement],
+        subtitle: Option[Modifier[HtmlElement]],
+        actions: Modifier[HtmlElement]*
+    )(fields: HtmlElement*): HtmlElement =
+      div(
+        div(
+          cls := "px-4 sm:px-0",
+          h3(
+            cls := "text-base font-semibold leading-7 text-gray-900",
+            title
+          ),
+          subtitle.map(st =>
+            p(
+              cls := "mt-1 max-w-2xl text-sm leading-6 text-gray-500",
+              st
+            )
+          )
+          // TODO: actions
+        ),
+        div(
+          cls := "mt-6 border-t border-gray-100",
+          dl(
+            cls := "divide-y divide-gray-100",
+            fields
+          )
+        )
+      )
+
+    def field(
+        title: String,
+        content: Modifier[HtmlElement]*
+    ): HtmlElement =
+      div(
+        cls := "px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0",
+        dt(
+          cls := "text-sm font-medium leading-6 text-gray-900",
+          title
+        ),
+        dd(
+          cls := "mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0",
+          content
+        )
+      )
+
+    def files(fs: List[FileRef]): HtmlElement =
+      ul(
+        role := "list",
+        cls := "divide-y divide-gray-100 rounded-md border border-gray-200",
+        fs.map(file)
+      )
+
+    def file(f: FileRef): HtmlElement =
+      li(
+        cls := "flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6",
+        div(
+          cls := "flex w-0 flex-1 items-center",
+          icons.`paper-clip-solid`(),
+          div(
+            cls := "ml-4 flex min-w-0 flex-1 gap-2",
+            span(
+              cls := "truncate font-medium",
+              f.name
+            ),
+            f.size.map(size => span(cls := "flex-shrink-0 text-gray-400", size))
+          )
+        ),
+        div(
+          cls := "ml-4 flex-shrink-0",
+          a(
+            href := "#",
+            cls := "font-medium text-indigo-600 hover:text-indigo-500",
+            "Uložit"
+          )
+        )
+      )
diff --git a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/TailwindUICatalogue.scala b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/TailwindUICatalogue.scala
index 5027b10..d97fd48 100644
--- a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/TailwindUICatalogue.scala
+++ b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/TailwindUICatalogue.scala
@@ -15,3 +15,4 @@
     with ModalComponentsModule
     with PageComponentsModule
     with TableComponentsModule
+    with DetailComponentsModule

diff --git "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043" "b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
deleted file mode 100644
index 5c4e218..0000000
--- "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043c345f949e6bd77d6f06ab70216ca8ed1bf211ccc\043"
+++ /dev/null
@@ -1,21 +0,0 @@
-package works.iterative.ui.components.laminar
-package tailwind
-
-import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.model.color.ColorKind
-import works.iterative.ui.components.tailwind.ComponentContext
-import works.iterative.ui.components.tailwind.laminar.LaminarExtensions.given
-import works.iterative.ui.model.Tag
-
-trait TailwindUIBadgesComponentsModule(using ComponentContext):
-
-  object badges:
-    override def tag(name: String, color: ColorKind): HtmlElement =
-      p(
-        cls(
-          "px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
-        ),
-        color(800).text,
-        color(100).bg,
-        name
-      )
diff --git "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043" "b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043"
deleted file mode 100644
index 0c9ca25..0000000
--- "a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/\043f80c1e3581c37fbcd6e5ccac1e89e7b1c46920f1\043"
+++ /dev/null
@@ -1,24 +0,0 @@
-package works.iterative.ui.components.laminar
-package tailwind
-
-import com.raquo.laminar.api.L.{*, given}
-
-trait TailwindUIHeadingsComponentsModule:
-  val headings: HeadingsComponents = new HeadingsComponents
-
-  class HeadingsComponents:
-    def section(title: Node, actions: HtmlElement*): HtmlElement =
-      div(
-        cls("border-b border-gray-200 pb-5"),
-        div(
-          cls("sm:flex sm:items-center sm:justify-between"),
-          h3(cls("text-base font-semibold leading-6 text-gray-900"), title),
-          div(
-            cls("mt-3 flex sm:ml-4 sm:mt-0"),
-            actions match
-              case Nil => emptyMod
-              case first :: rest =>
-                first :: rest.map(_.amend(cls("ml-3")))
-          )
-        )
-      )
diff --git a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/DetailComponentsModule.scala b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/DetailComponentsModule.scala
new file mode 100644
index 0000000..10a322c
--- /dev/null
+++ b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/DetailComponentsModule.scala
@@ -0,0 +1,87 @@
+package works.iterative.ui.components.laminar
+package tailwind
+package ui
+
+import com.raquo.laminar.api.L.{*, given}
+import works.iterative.ui.components.tailwind.ComponentContext
+import works.iterative.ui.model.FileRef
+
+trait DetailComponentsModule:
+  self: IconsModule =>
+  object details:
+    def section(
+        title: Modifier[HtmlElement],
+        subtitle: Option[Modifier[HtmlElement]],
+        actions: Modifier[HtmlElement]*
+    )(fields: HtmlElement*): HtmlElement =
+      div(
+        div(
+          cls := "px-4 sm:px-0",
+          h3(
+            cls := "text-base font-semibold leading-7 text-gray-900",
+            title
+          ),
+          subtitle.map(st =>
+            p(
+              cls := "mt-1 max-w-2xl text-sm leading-6 text-gray-500",
+              st
+            )
+          )
+          // TODO: actions
+        ),
+        div(
+          cls := "mt-6 border-t border-gray-100",
+          dl(
+            cls := "divide-y divide-gray-100",
+            fields
+          )
+        )
+      )
+
+    def field(
+        title: String,
+        content: Modifier[HtmlElement]*
+    ): HtmlElement =
+      div(
+        cls := "px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0",
+        dt(
+          cls := "text-sm font-medium leading-6 text-gray-900",
+          title
+        ),
+        dd(
+          cls := "mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0",
+          content
+        )
+      )
+
+    def files(fs: List[FileRef]): HtmlElement =
+      ul(
+        role := "list",
+        cls := "divide-y divide-gray-100 rounded-md border border-gray-200",
+        fs.map(file)
+      )
+
+    def file(f: FileRef): HtmlElement =
+      li(
+        cls := "flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6",
+        div(
+          cls := "flex w-0 flex-1 items-center",
+          icons.`paper-clip-solid`(),
+          div(
+            cls := "ml-4 flex min-w-0 flex-1 gap-2",
+            span(
+              cls := "truncate font-medium",
+              f.name
+            ),
+            f.size.map(size => span(cls := "flex-shrink-0 text-gray-400", size))
+          )
+        ),
+        div(
+          cls := "ml-4 flex-shrink-0",
+          a(
+            href := "#",
+            cls := "font-medium text-indigo-600 hover:text-indigo-500",
+            "Uložit"
+          )
+        )
+      )
diff --git a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/TailwindUICatalogue.scala b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/TailwindUICatalogue.scala
index 5027b10..d97fd48 100644
--- a/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/TailwindUICatalogue.scala
+++ b/ui/js/src/main/scala/works/iterative/ui/components/laminar/tailwind/ui/TailwindUICatalogue.scala
@@ -15,3 +15,4 @@
     with ModalComponentsModule
     with PageComponentsModule
     with TableComponentsModule
+    with DetailComponentsModule
diff --git a/ui/shared/src/main/scala/works/iterative/ui/model/Tag.scala b/ui/shared/src/main/scala/works/iterative/ui/model/Tag.scala
deleted file mode 100644
index 958aa75..0000000
--- a/ui/shared/src/main/scala/works/iterative/ui/model/Tag.scala
+++ /dev/null
@@ -1,16 +0,0 @@
-package works.iterative.ui.model
-
-/** Representation of a label or tag.
-  *
-  * The UI renderer will recognize this value as tag and render accordingly. The
-  * value is used to determine both the color of the tag and the text displayed.
-  *
-  * @param value
-  *   the value of the tag
-  */
-opaque type Tag = String
-
-object Tag:
-  def apply(value: String): Tag = value
-
-  extension (tag: Tag) def value: String = tag