diff --git a/ui/src/services/files/components/tailwind/File.scala b/ui/src/services/files/components/tailwind/File.scala
index cc44652..e6bab0a 100644
--- a/ui/src/services/files/components/tailwind/File.scala
+++ b/ui/src/services/files/components/tailwind/File.scala
@@ -3,11 +3,11 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import works.iterative.ui.components.tailwind.Renderable
+import works.iterative.ui.components.tailwind.HtmlRenderable
 
-given Renderable[File] with
+given HtmlRenderable[File] with
   extension (m: File)
-    def toHtml: HtmlElement =
+    def render: HtmlElement =
       li(
         cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"),
         div(

diff --git a/ui/src/services/files/components/tailwind/File.scala b/ui/src/services/files/components/tailwind/File.scala
index cc44652..e6bab0a 100644
--- a/ui/src/services/files/components/tailwind/File.scala
+++ b/ui/src/services/files/components/tailwind/File.scala
@@ -3,11 +3,11 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import works.iterative.ui.components.tailwind.Renderable
+import works.iterative.ui.components.tailwind.HtmlRenderable
 
-given Renderable[File] with
+given HtmlRenderable[File] with
   extension (m: File)
-    def toHtml: HtmlElement =
+    def render: HtmlElement =
       li(
         cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"),
         div(
diff --git a/ui/src/services/files/components/tailwind/FileList.scala b/ui/src/services/files/components/tailwind/FileList.scala
index ac59db8..9108fee 100644
--- a/ui/src/services/files/components/tailwind/FileList.scala
+++ b/ui/src/services/files/components/tailwind/FileList.scala
@@ -3,11 +3,10 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import io.laminext.syntax.core.{*, given}
 
 def FileList(files: List[File]): HtmlElement =
   ul(
     role("list"),
     cls("border border-gray-200 rounded-md divide-y divide-gray-200"),
-    files.map(_.toHtml)
+    files.map(_.render)
   )

diff --git a/ui/src/services/files/components/tailwind/File.scala b/ui/src/services/files/components/tailwind/File.scala
index cc44652..e6bab0a 100644
--- a/ui/src/services/files/components/tailwind/File.scala
+++ b/ui/src/services/files/components/tailwind/File.scala
@@ -3,11 +3,11 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import works.iterative.ui.components.tailwind.Renderable
+import works.iterative.ui.components.tailwind.HtmlRenderable
 
-given Renderable[File] with
+given HtmlRenderable[File] with
   extension (m: File)
-    def toHtml: HtmlElement =
+    def render: HtmlElement =
       li(
         cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"),
         div(
diff --git a/ui/src/services/files/components/tailwind/FileList.scala b/ui/src/services/files/components/tailwind/FileList.scala
index ac59db8..9108fee 100644
--- a/ui/src/services/files/components/tailwind/FileList.scala
+++ b/ui/src/services/files/components/tailwind/FileList.scala
@@ -3,11 +3,10 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import io.laminext.syntax.core.{*, given}
 
 def FileList(files: List[File]): HtmlElement =
   ul(
     role("list"),
     cls("border border-gray-200 rounded-md divide-y divide-gray-200"),
-    files.map(_.toHtml)
+    files.map(_.render)
   )
diff --git a/ui/src/services/files/components/tailwind/UploadButton.scala b/ui/src/services/files/components/tailwind/UploadButton.scala
index c553169..dbb0c24 100644
--- a/ui/src/services/files/components/tailwind/UploadButton.scala
+++ b/ui/src/services/files/components/tailwind/UploadButton.scala
@@ -1,41 +1,46 @@
 package services.files.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.components.tailwind.Component
 import com.raquo.laminar.nodes.ReactiveHtmlElement
-import works.iterative.ui.UIString.{*, given}
+import works.iterative.ui.UIString
 import org.scalajs.dom.FileList
+import works.iterative.ui.components.tailwind.HtmlComponent
 
-class UploadButton(upload: Observer[FileList])
-    extends Component[org.scalajs.dom.html.Div]:
+case class UploadButton(title: UIString)
 
-  override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
-    div(
-      cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
-      label(
-        cls("block w-full"),
+object UploadButton:
+  class Component(upload: Observer[FileList])
+      extends HtmlComponent[org.scalajs.dom.html.Div, UploadButton]:
+    extension (u: UploadButton)
+      override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
         div(
-          cls(
-            "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
-          ), {
-            import svg.*
-            svg(
-              cls("w-6 h-6"),
-              fill := "#FFF",
-              viewBox := "0 0 24 24",
-              xmlns := "http://www.w3.org/2000/svg",
-              path(d := "M0 0h24v24H0z", fill := "none"),
-              path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+          cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
+          label(
+            cls("block w-full"),
+            div(
+              cls(
+                "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+              ), {
+                import svg.*
+                svg(
+                  cls("w-6 h-6"),
+                  fill := "#FFF",
+                  viewBox := "0 0 24 24",
+                  xmlns := "http://www.w3.org/2000/svg",
+                  path(d := "M0 0h24v24H0z", fill := "none"),
+                  path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+                )
+              },
+              span(cls := "ml-2", u.title)
+            ),
+            input(
+              cls := "cursor-pointer hidden",
+              tpe := "file",
+              name := "files",
+              multiple := true,
+              inContext(thisNode =>
+                onInput.mapTo(thisNode.ref.files) --> upload
+              )
             )
-          },
-          span(cls := "ml-2", "Přidat soubory".ui)
-        ),
-        input(
-          cls := "cursor-pointer hidden",
-          tpe := "file",
-          name := "files",
-          multiple := true,
-          inContext(thisNode => onInput.mapTo(thisNode.ref.files) --> upload)
+          )
         )
-      )
-    )

diff --git a/ui/src/services/files/components/tailwind/File.scala b/ui/src/services/files/components/tailwind/File.scala
index cc44652..e6bab0a 100644
--- a/ui/src/services/files/components/tailwind/File.scala
+++ b/ui/src/services/files/components/tailwind/File.scala
@@ -3,11 +3,11 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import works.iterative.ui.components.tailwind.Renderable
+import works.iterative.ui.components.tailwind.HtmlRenderable
 
-given Renderable[File] with
+given HtmlRenderable[File] with
   extension (m: File)
-    def toHtml: HtmlElement =
+    def render: HtmlElement =
       li(
         cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"),
         div(
diff --git a/ui/src/services/files/components/tailwind/FileList.scala b/ui/src/services/files/components/tailwind/FileList.scala
index ac59db8..9108fee 100644
--- a/ui/src/services/files/components/tailwind/FileList.scala
+++ b/ui/src/services/files/components/tailwind/FileList.scala
@@ -3,11 +3,10 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import io.laminext.syntax.core.{*, given}
 
 def FileList(files: List[File]): HtmlElement =
   ul(
     role("list"),
     cls("border border-gray-200 rounded-md divide-y divide-gray-200"),
-    files.map(_.toHtml)
+    files.map(_.render)
   )
diff --git a/ui/src/services/files/components/tailwind/UploadButton.scala b/ui/src/services/files/components/tailwind/UploadButton.scala
index c553169..dbb0c24 100644
--- a/ui/src/services/files/components/tailwind/UploadButton.scala
+++ b/ui/src/services/files/components/tailwind/UploadButton.scala
@@ -1,41 +1,46 @@
 package services.files.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.components.tailwind.Component
 import com.raquo.laminar.nodes.ReactiveHtmlElement
-import works.iterative.ui.UIString.{*, given}
+import works.iterative.ui.UIString
 import org.scalajs.dom.FileList
+import works.iterative.ui.components.tailwind.HtmlComponent
 
-class UploadButton(upload: Observer[FileList])
-    extends Component[org.scalajs.dom.html.Div]:
+case class UploadButton(title: UIString)
 
-  override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
-    div(
-      cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
-      label(
-        cls("block w-full"),
+object UploadButton:
+  class Component(upload: Observer[FileList])
+      extends HtmlComponent[org.scalajs.dom.html.Div, UploadButton]:
+    extension (u: UploadButton)
+      override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
         div(
-          cls(
-            "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
-          ), {
-            import svg.*
-            svg(
-              cls("w-6 h-6"),
-              fill := "#FFF",
-              viewBox := "0 0 24 24",
-              xmlns := "http://www.w3.org/2000/svg",
-              path(d := "M0 0h24v24H0z", fill := "none"),
-              path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+          cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
+          label(
+            cls("block w-full"),
+            div(
+              cls(
+                "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+              ), {
+                import svg.*
+                svg(
+                  cls("w-6 h-6"),
+                  fill := "#FFF",
+                  viewBox := "0 0 24 24",
+                  xmlns := "http://www.w3.org/2000/svg",
+                  path(d := "M0 0h24v24H0z", fill := "none"),
+                  path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+                )
+              },
+              span(cls := "ml-2", u.title)
+            ),
+            input(
+              cls := "cursor-pointer hidden",
+              tpe := "file",
+              name := "files",
+              multiple := true,
+              inContext(thisNode =>
+                onInput.mapTo(thisNode.ref.files) --> upload
+              )
             )
-          },
-          span(cls := "ml-2", "Přidat soubory".ui)
-        ),
-        input(
-          cls := "cursor-pointer hidden",
-          tpe := "file",
-          name := "files",
-          multiple := true,
-          inContext(thisNode => onInput.mapTo(thisNode.ref.files) --> upload)
+          )
         )
-      )
-    )
diff --git a/ui/src/ui/components/tailwind/Component.scala b/ui/src/ui/components/tailwind/Component.scala
index 9f32359..623862d 100644
--- a/ui/src/ui/components/tailwind/Component.scala
+++ b/ui/src/ui/components/tailwind/Component.scala
@@ -1,17 +1,9 @@
 package works.iterative.ui.components.tailwind
 
-import com.raquo.laminar.api.L.HtmlElement
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
-trait Component[Ref <: dom.html.Element]:
-  def element: ReactiveHtmlElement[Ref]
+trait HtmlComponent[Ref <: dom.html.Element, A]:
+  extension (a: A) def element: ReactiveHtmlElement[Ref]
 
-object Component:
-  given [Ref <: dom.html.Element]
-      : Conversion[Component[Ref], ReactiveHtmlElement[Ref]] with
-    def apply(component: Component[Ref]): ReactiveHtmlElement[Ref] =
-      component.element
-
-trait HtmlComponent[C]:
-  extension (c: C) def element: HtmlElement
+type BaseHtmlComponent[A] = HtmlComponent[dom.html.Element, A]

diff --git a/ui/src/services/files/components/tailwind/File.scala b/ui/src/services/files/components/tailwind/File.scala
index cc44652..e6bab0a 100644
--- a/ui/src/services/files/components/tailwind/File.scala
+++ b/ui/src/services/files/components/tailwind/File.scala
@@ -3,11 +3,11 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import works.iterative.ui.components.tailwind.Renderable
+import works.iterative.ui.components.tailwind.HtmlRenderable
 
-given Renderable[File] with
+given HtmlRenderable[File] with
   extension (m: File)
-    def toHtml: HtmlElement =
+    def render: HtmlElement =
       li(
         cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"),
         div(
diff --git a/ui/src/services/files/components/tailwind/FileList.scala b/ui/src/services/files/components/tailwind/FileList.scala
index ac59db8..9108fee 100644
--- a/ui/src/services/files/components/tailwind/FileList.scala
+++ b/ui/src/services/files/components/tailwind/FileList.scala
@@ -3,11 +3,10 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import io.laminext.syntax.core.{*, given}
 
 def FileList(files: List[File]): HtmlElement =
   ul(
     role("list"),
     cls("border border-gray-200 rounded-md divide-y divide-gray-200"),
-    files.map(_.toHtml)
+    files.map(_.render)
   )
diff --git a/ui/src/services/files/components/tailwind/UploadButton.scala b/ui/src/services/files/components/tailwind/UploadButton.scala
index c553169..dbb0c24 100644
--- a/ui/src/services/files/components/tailwind/UploadButton.scala
+++ b/ui/src/services/files/components/tailwind/UploadButton.scala
@@ -1,41 +1,46 @@
 package services.files.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.components.tailwind.Component
 import com.raquo.laminar.nodes.ReactiveHtmlElement
-import works.iterative.ui.UIString.{*, given}
+import works.iterative.ui.UIString
 import org.scalajs.dom.FileList
+import works.iterative.ui.components.tailwind.HtmlComponent
 
-class UploadButton(upload: Observer[FileList])
-    extends Component[org.scalajs.dom.html.Div]:
+case class UploadButton(title: UIString)
 
-  override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
-    div(
-      cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
-      label(
-        cls("block w-full"),
+object UploadButton:
+  class Component(upload: Observer[FileList])
+      extends HtmlComponent[org.scalajs.dom.html.Div, UploadButton]:
+    extension (u: UploadButton)
+      override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
         div(
-          cls(
-            "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
-          ), {
-            import svg.*
-            svg(
-              cls("w-6 h-6"),
-              fill := "#FFF",
-              viewBox := "0 0 24 24",
-              xmlns := "http://www.w3.org/2000/svg",
-              path(d := "M0 0h24v24H0z", fill := "none"),
-              path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+          cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
+          label(
+            cls("block w-full"),
+            div(
+              cls(
+                "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+              ), {
+                import svg.*
+                svg(
+                  cls("w-6 h-6"),
+                  fill := "#FFF",
+                  viewBox := "0 0 24 24",
+                  xmlns := "http://www.w3.org/2000/svg",
+                  path(d := "M0 0h24v24H0z", fill := "none"),
+                  path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+                )
+              },
+              span(cls := "ml-2", u.title)
+            ),
+            input(
+              cls := "cursor-pointer hidden",
+              tpe := "file",
+              name := "files",
+              multiple := true,
+              inContext(thisNode =>
+                onInput.mapTo(thisNode.ref.files) --> upload
+              )
             )
-          },
-          span(cls := "ml-2", "Přidat soubory".ui)
-        ),
-        input(
-          cls := "cursor-pointer hidden",
-          tpe := "file",
-          name := "files",
-          multiple := true,
-          inContext(thisNode => onInput.mapTo(thisNode.ref.files) --> upload)
+          )
         )
-      )
-    )
diff --git a/ui/src/ui/components/tailwind/Component.scala b/ui/src/ui/components/tailwind/Component.scala
index 9f32359..623862d 100644
--- a/ui/src/ui/components/tailwind/Component.scala
+++ b/ui/src/ui/components/tailwind/Component.scala
@@ -1,17 +1,9 @@
 package works.iterative.ui.components.tailwind
 
-import com.raquo.laminar.api.L.HtmlElement
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
-trait Component[Ref <: dom.html.Element]:
-  def element: ReactiveHtmlElement[Ref]
+trait HtmlComponent[Ref <: dom.html.Element, A]:
+  extension (a: A) def element: ReactiveHtmlElement[Ref]
 
-object Component:
-  given [Ref <: dom.html.Element]
-      : Conversion[Component[Ref], ReactiveHtmlElement[Ref]] with
-    def apply(component: Component[Ref]): ReactiveHtmlElement[Ref] =
-      component.element
-
-trait HtmlComponent[C]:
-  extension (c: C) def element: HtmlElement
+type BaseHtmlComponent[A] = HtmlComponent[dom.html.Element, A]
diff --git a/ui/src/ui/components/tailwind/Renderable.scala b/ui/src/ui/components/tailwind/Renderable.scala
index a0fcc5b..a8f0f9d 100644
--- a/ui/src/ui/components/tailwind/Renderable.scala
+++ b/ui/src/ui/components/tailwind/Renderable.scala
@@ -1,6 +1,7 @@
 package works.iterative.ui.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
+import org.scalajs.dom
 
-trait Renderable[A]:
-  extension (a: A) def toHtml: HtmlElement
+trait HtmlRenderable[A]:
+  extension (a: A) def render: Modifier[HtmlElement]

diff --git a/ui/src/services/files/components/tailwind/File.scala b/ui/src/services/files/components/tailwind/File.scala
index cc44652..e6bab0a 100644
--- a/ui/src/services/files/components/tailwind/File.scala
+++ b/ui/src/services/files/components/tailwind/File.scala
@@ -3,11 +3,11 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import works.iterative.ui.components.tailwind.Renderable
+import works.iterative.ui.components.tailwind.HtmlRenderable
 
-given Renderable[File] with
+given HtmlRenderable[File] with
   extension (m: File)
-    def toHtml: HtmlElement =
+    def render: HtmlElement =
       li(
         cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"),
         div(
diff --git a/ui/src/services/files/components/tailwind/FileList.scala b/ui/src/services/files/components/tailwind/FileList.scala
index ac59db8..9108fee 100644
--- a/ui/src/services/files/components/tailwind/FileList.scala
+++ b/ui/src/services/files/components/tailwind/FileList.scala
@@ -3,11 +3,10 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import io.laminext.syntax.core.{*, given}
 
 def FileList(files: List[File]): HtmlElement =
   ul(
     role("list"),
     cls("border border-gray-200 rounded-md divide-y divide-gray-200"),
-    files.map(_.toHtml)
+    files.map(_.render)
   )
diff --git a/ui/src/services/files/components/tailwind/UploadButton.scala b/ui/src/services/files/components/tailwind/UploadButton.scala
index c553169..dbb0c24 100644
--- a/ui/src/services/files/components/tailwind/UploadButton.scala
+++ b/ui/src/services/files/components/tailwind/UploadButton.scala
@@ -1,41 +1,46 @@
 package services.files.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.components.tailwind.Component
 import com.raquo.laminar.nodes.ReactiveHtmlElement
-import works.iterative.ui.UIString.{*, given}
+import works.iterative.ui.UIString
 import org.scalajs.dom.FileList
+import works.iterative.ui.components.tailwind.HtmlComponent
 
-class UploadButton(upload: Observer[FileList])
-    extends Component[org.scalajs.dom.html.Div]:
+case class UploadButton(title: UIString)
 
-  override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
-    div(
-      cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
-      label(
-        cls("block w-full"),
+object UploadButton:
+  class Component(upload: Observer[FileList])
+      extends HtmlComponent[org.scalajs.dom.html.Div, UploadButton]:
+    extension (u: UploadButton)
+      override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
         div(
-          cls(
-            "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
-          ), {
-            import svg.*
-            svg(
-              cls("w-6 h-6"),
-              fill := "#FFF",
-              viewBox := "0 0 24 24",
-              xmlns := "http://www.w3.org/2000/svg",
-              path(d := "M0 0h24v24H0z", fill := "none"),
-              path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+          cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
+          label(
+            cls("block w-full"),
+            div(
+              cls(
+                "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+              ), {
+                import svg.*
+                svg(
+                  cls("w-6 h-6"),
+                  fill := "#FFF",
+                  viewBox := "0 0 24 24",
+                  xmlns := "http://www.w3.org/2000/svg",
+                  path(d := "M0 0h24v24H0z", fill := "none"),
+                  path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+                )
+              },
+              span(cls := "ml-2", u.title)
+            ),
+            input(
+              cls := "cursor-pointer hidden",
+              tpe := "file",
+              name := "files",
+              multiple := true,
+              inContext(thisNode =>
+                onInput.mapTo(thisNode.ref.files) --> upload
+              )
             )
-          },
-          span(cls := "ml-2", "Přidat soubory".ui)
-        ),
-        input(
-          cls := "cursor-pointer hidden",
-          tpe := "file",
-          name := "files",
-          multiple := true,
-          inContext(thisNode => onInput.mapTo(thisNode.ref.files) --> upload)
+          )
         )
-      )
-    )
diff --git a/ui/src/ui/components/tailwind/Component.scala b/ui/src/ui/components/tailwind/Component.scala
index 9f32359..623862d 100644
--- a/ui/src/ui/components/tailwind/Component.scala
+++ b/ui/src/ui/components/tailwind/Component.scala
@@ -1,17 +1,9 @@
 package works.iterative.ui.components.tailwind
 
-import com.raquo.laminar.api.L.HtmlElement
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
-trait Component[Ref <: dom.html.Element]:
-  def element: ReactiveHtmlElement[Ref]
+trait HtmlComponent[Ref <: dom.html.Element, A]:
+  extension (a: A) def element: ReactiveHtmlElement[Ref]
 
-object Component:
-  given [Ref <: dom.html.Element]
-      : Conversion[Component[Ref], ReactiveHtmlElement[Ref]] with
-    def apply(component: Component[Ref]): ReactiveHtmlElement[Ref] =
-      component.element
-
-trait HtmlComponent[C]:
-  extension (c: C) def element: HtmlElement
+type BaseHtmlComponent[A] = HtmlComponent[dom.html.Element, A]
diff --git a/ui/src/ui/components/tailwind/Renderable.scala b/ui/src/ui/components/tailwind/Renderable.scala
index a0fcc5b..a8f0f9d 100644
--- a/ui/src/ui/components/tailwind/Renderable.scala
+++ b/ui/src/ui/components/tailwind/Renderable.scala
@@ -1,6 +1,7 @@
 package works.iterative.ui.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
+import org.scalajs.dom
 
-trait Renderable[A]:
-  extension (a: A) def toHtml: HtmlElement
+trait HtmlRenderable[A]:
+  extension (a: A) def render: Modifier[HtmlElement]
diff --git a/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala b/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala
index f1eafd0..6eeabd2 100644
--- a/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala
+++ b/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala
@@ -1,10 +1,10 @@
 package works.iterative.ui.components.tailwind.data_display.description_lists
 
 import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.components.tailwind.HtmlComponent
 import works.iterative.ui.UIString
 import works.iterative.ui.components.tailwind.TimeUtils
 import java.time.LocalDate
+import works.iterative.ui.components.tailwind.BaseHtmlComponent
 
 case class OptionalLabeledValue(
     label: UIString,
@@ -41,7 +41,7 @@
 )
 
 object LeftAlignedInCard:
-  given leftAlignedInCardComponent: HtmlComponent[LeftAlignedInCard] with
+  given leftAlignedInCardComponent: BaseHtmlComponent[LeftAlignedInCard] with
     extension (d: LeftAlignedInCard)
       def element: HtmlElement =
         div(

diff --git a/ui/src/services/files/components/tailwind/File.scala b/ui/src/services/files/components/tailwind/File.scala
index cc44652..e6bab0a 100644
--- a/ui/src/services/files/components/tailwind/File.scala
+++ b/ui/src/services/files/components/tailwind/File.scala
@@ -3,11 +3,11 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import works.iterative.ui.components.tailwind.Renderable
+import works.iterative.ui.components.tailwind.HtmlRenderable
 
-given Renderable[File] with
+given HtmlRenderable[File] with
   extension (m: File)
-    def toHtml: HtmlElement =
+    def render: HtmlElement =
       li(
         cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"),
         div(
diff --git a/ui/src/services/files/components/tailwind/FileList.scala b/ui/src/services/files/components/tailwind/FileList.scala
index ac59db8..9108fee 100644
--- a/ui/src/services/files/components/tailwind/FileList.scala
+++ b/ui/src/services/files/components/tailwind/FileList.scala
@@ -3,11 +3,10 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import io.laminext.syntax.core.{*, given}
 
 def FileList(files: List[File]): HtmlElement =
   ul(
     role("list"),
     cls("border border-gray-200 rounded-md divide-y divide-gray-200"),
-    files.map(_.toHtml)
+    files.map(_.render)
   )
diff --git a/ui/src/services/files/components/tailwind/UploadButton.scala b/ui/src/services/files/components/tailwind/UploadButton.scala
index c553169..dbb0c24 100644
--- a/ui/src/services/files/components/tailwind/UploadButton.scala
+++ b/ui/src/services/files/components/tailwind/UploadButton.scala
@@ -1,41 +1,46 @@
 package services.files.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.components.tailwind.Component
 import com.raquo.laminar.nodes.ReactiveHtmlElement
-import works.iterative.ui.UIString.{*, given}
+import works.iterative.ui.UIString
 import org.scalajs.dom.FileList
+import works.iterative.ui.components.tailwind.HtmlComponent
 
-class UploadButton(upload: Observer[FileList])
-    extends Component[org.scalajs.dom.html.Div]:
+case class UploadButton(title: UIString)
 
-  override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
-    div(
-      cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
-      label(
-        cls("block w-full"),
+object UploadButton:
+  class Component(upload: Observer[FileList])
+      extends HtmlComponent[org.scalajs.dom.html.Div, UploadButton]:
+    extension (u: UploadButton)
+      override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
         div(
-          cls(
-            "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
-          ), {
-            import svg.*
-            svg(
-              cls("w-6 h-6"),
-              fill := "#FFF",
-              viewBox := "0 0 24 24",
-              xmlns := "http://www.w3.org/2000/svg",
-              path(d := "M0 0h24v24H0z", fill := "none"),
-              path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+          cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
+          label(
+            cls("block w-full"),
+            div(
+              cls(
+                "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+              ), {
+                import svg.*
+                svg(
+                  cls("w-6 h-6"),
+                  fill := "#FFF",
+                  viewBox := "0 0 24 24",
+                  xmlns := "http://www.w3.org/2000/svg",
+                  path(d := "M0 0h24v24H0z", fill := "none"),
+                  path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+                )
+              },
+              span(cls := "ml-2", u.title)
+            ),
+            input(
+              cls := "cursor-pointer hidden",
+              tpe := "file",
+              name := "files",
+              multiple := true,
+              inContext(thisNode =>
+                onInput.mapTo(thisNode.ref.files) --> upload
+              )
             )
-          },
-          span(cls := "ml-2", "Přidat soubory".ui)
-        ),
-        input(
-          cls := "cursor-pointer hidden",
-          tpe := "file",
-          name := "files",
-          multiple := true,
-          inContext(thisNode => onInput.mapTo(thisNode.ref.files) --> upload)
+          )
         )
-      )
-    )
diff --git a/ui/src/ui/components/tailwind/Component.scala b/ui/src/ui/components/tailwind/Component.scala
index 9f32359..623862d 100644
--- a/ui/src/ui/components/tailwind/Component.scala
+++ b/ui/src/ui/components/tailwind/Component.scala
@@ -1,17 +1,9 @@
 package works.iterative.ui.components.tailwind
 
-import com.raquo.laminar.api.L.HtmlElement
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
-trait Component[Ref <: dom.html.Element]:
-  def element: ReactiveHtmlElement[Ref]
+trait HtmlComponent[Ref <: dom.html.Element, A]:
+  extension (a: A) def element: ReactiveHtmlElement[Ref]
 
-object Component:
-  given [Ref <: dom.html.Element]
-      : Conversion[Component[Ref], ReactiveHtmlElement[Ref]] with
-    def apply(component: Component[Ref]): ReactiveHtmlElement[Ref] =
-      component.element
-
-trait HtmlComponent[C]:
-  extension (c: C) def element: HtmlElement
+type BaseHtmlComponent[A] = HtmlComponent[dom.html.Element, A]
diff --git a/ui/src/ui/components/tailwind/Renderable.scala b/ui/src/ui/components/tailwind/Renderable.scala
index a0fcc5b..a8f0f9d 100644
--- a/ui/src/ui/components/tailwind/Renderable.scala
+++ b/ui/src/ui/components/tailwind/Renderable.scala
@@ -1,6 +1,7 @@
 package works.iterative.ui.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
+import org.scalajs.dom
 
-trait Renderable[A]:
-  extension (a: A) def toHtml: HtmlElement
+trait HtmlRenderable[A]:
+  extension (a: A) def render: Modifier[HtmlElement]
diff --git a/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala b/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala
index f1eafd0..6eeabd2 100644
--- a/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala
+++ b/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala
@@ -1,10 +1,10 @@
 package works.iterative.ui.components.tailwind.data_display.description_lists
 
 import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.components.tailwind.HtmlComponent
 import works.iterative.ui.UIString
 import works.iterative.ui.components.tailwind.TimeUtils
 import java.time.LocalDate
+import works.iterative.ui.components.tailwind.BaseHtmlComponent
 
 case class OptionalLabeledValue(
     label: UIString,
@@ -41,7 +41,7 @@
 )
 
 object LeftAlignedInCard:
-  given leftAlignedInCardComponent: HtmlComponent[LeftAlignedInCard] with
+  given leftAlignedInCardComponent: BaseHtmlComponent[LeftAlignedInCard] with
     extension (d: LeftAlignedInCard)
       def element: HtmlElement =
         div(
diff --git a/ui/src/ui/components/tailwind/list/ListRow.scala b/ui/src/ui/components/tailwind/list/ListRow.scala
index e37682b..54a7769 100644
--- a/ui/src/ui/components/tailwind/list/ListRow.scala
+++ b/ui/src/ui/components/tailwind/list/ListRow.scala
@@ -16,40 +16,44 @@
     bottomRight: Modifier[HtmlElement],
     farRight: Modifier[HtmlElement],
     linkMods: Option[Modifier[Anchor]] = None
-) extends Component[org.scalajs.dom.html.LI]:
+)
 
-  def content: Modifier[HtmlElement] =
-    Seq(
-      cls := "block hover:bg-gray-50",
-      div(
-        cls := "px-4 py-4 sm:px-6 items-center flex",
-        div(
-          cls := "min-w-0 flex-1 pr-4",
+object ListRow:
+
+  given HtmlComponent[org.scalajs.dom.html.LI, ListRow] with
+    extension (r: ListRow)
+      def content: Modifier[HtmlElement] =
+        Seq(
+          cls := "block hover:bg-gray-50",
           div(
-            cls := "flex items-center justify-between",
-            p(
-              cls := "text-sm font-medium text-indigo-600 truncate",
-              title
-            ),
+            cls := "px-4 py-4 sm:px-6 items-center flex",
             div(
-              cls := "ml-2 flex-shrink-0 flex",
-              topRight
-            )
-          ),
-          div(
-            cls := "mt-2 sm:flex sm:justify-between",
-            bottomLeft,
-            bottomRight
+              cls := "min-w-0 flex-1 pr-4",
+              div(
+                cls := "flex items-center justify-between",
+                p(
+                  cls := "text-sm font-medium text-indigo-600 truncate",
+                  r.title
+                ),
+                div(
+                  cls := "ml-2 flex-shrink-0 flex",
+                  r.topRight
+                )
+              ),
+              div(
+                cls := "mt-2 sm:flex sm:justify-between",
+                r.bottomLeft,
+                r.bottomRight
+              )
+            ),
+            r.farRight
           )
-        ),
-        farRight
-      )
-    )
+        )
 
-  def element: ReactiveHtmlElement[org.scalajs.dom.html.LI] =
-    val c = content
-    li(
-      linkMods match
-        case Some(m) => a(m, c)
-        case _       => div(c)
-    )
+      def element: ReactiveHtmlElement[org.scalajs.dom.html.LI] =
+        val c = content
+        li(
+          r.linkMods match
+            case Some(m) => a(m, c)
+            case _       => div(c)
+        )

diff --git a/ui/src/services/files/components/tailwind/File.scala b/ui/src/services/files/components/tailwind/File.scala
index cc44652..e6bab0a 100644
--- a/ui/src/services/files/components/tailwind/File.scala
+++ b/ui/src/services/files/components/tailwind/File.scala
@@ -3,11 +3,11 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import works.iterative.ui.components.tailwind.Renderable
+import works.iterative.ui.components.tailwind.HtmlRenderable
 
-given Renderable[File] with
+given HtmlRenderable[File] with
   extension (m: File)
-    def toHtml: HtmlElement =
+    def render: HtmlElement =
       li(
         cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"),
         div(
diff --git a/ui/src/services/files/components/tailwind/FileList.scala b/ui/src/services/files/components/tailwind/FileList.scala
index ac59db8..9108fee 100644
--- a/ui/src/services/files/components/tailwind/FileList.scala
+++ b/ui/src/services/files/components/tailwind/FileList.scala
@@ -3,11 +3,10 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import works.iterative.ui.components.tailwind.Icons
-import io.laminext.syntax.core.{*, given}
 
 def FileList(files: List[File]): HtmlElement =
   ul(
     role("list"),
     cls("border border-gray-200 rounded-md divide-y divide-gray-200"),
-    files.map(_.toHtml)
+    files.map(_.render)
   )
diff --git a/ui/src/services/files/components/tailwind/UploadButton.scala b/ui/src/services/files/components/tailwind/UploadButton.scala
index c553169..dbb0c24 100644
--- a/ui/src/services/files/components/tailwind/UploadButton.scala
+++ b/ui/src/services/files/components/tailwind/UploadButton.scala
@@ -1,41 +1,46 @@
 package services.files.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.components.tailwind.Component
 import com.raquo.laminar.nodes.ReactiveHtmlElement
-import works.iterative.ui.UIString.{*, given}
+import works.iterative.ui.UIString
 import org.scalajs.dom.FileList
+import works.iterative.ui.components.tailwind.HtmlComponent
 
-class UploadButton(upload: Observer[FileList])
-    extends Component[org.scalajs.dom.html.Div]:
+case class UploadButton(title: UIString)
 
-  override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
-    div(
-      cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
-      label(
-        cls("block w-full"),
+object UploadButton:
+  class Component(upload: Observer[FileList])
+      extends HtmlComponent[org.scalajs.dom.html.Div, UploadButton]:
+    extension (u: UploadButton)
+      override def element: ReactiveHtmlElement[org.scalajs.dom.html.Div] =
         div(
-          cls(
-            "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
-          ), {
-            import svg.*
-            svg(
-              cls("w-6 h-6"),
-              fill := "#FFF",
-              viewBox := "0 0 24 24",
-              xmlns := "http://www.w3.org/2000/svg",
-              path(d := "M0 0h24v24H0z", fill := "none"),
-              path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+          cls := "mt-4 sm:mt-0 sm:ml-16 sm:flex-none",
+          label(
+            cls("block w-full"),
+            div(
+              cls(
+                "inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+              ), {
+                import svg.*
+                svg(
+                  cls("w-6 h-6"),
+                  fill := "#FFF",
+                  viewBox := "0 0 24 24",
+                  xmlns := "http://www.w3.org/2000/svg",
+                  path(d := "M0 0h24v24H0z", fill := "none"),
+                  path(d := "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z")
+                )
+              },
+              span(cls := "ml-2", u.title)
+            ),
+            input(
+              cls := "cursor-pointer hidden",
+              tpe := "file",
+              name := "files",
+              multiple := true,
+              inContext(thisNode =>
+                onInput.mapTo(thisNode.ref.files) --> upload
+              )
             )
-          },
-          span(cls := "ml-2", "Přidat soubory".ui)
-        ),
-        input(
-          cls := "cursor-pointer hidden",
-          tpe := "file",
-          name := "files",
-          multiple := true,
-          inContext(thisNode => onInput.mapTo(thisNode.ref.files) --> upload)
+          )
         )
-      )
-    )
diff --git a/ui/src/ui/components/tailwind/Component.scala b/ui/src/ui/components/tailwind/Component.scala
index 9f32359..623862d 100644
--- a/ui/src/ui/components/tailwind/Component.scala
+++ b/ui/src/ui/components/tailwind/Component.scala
@@ -1,17 +1,9 @@
 package works.iterative.ui.components.tailwind
 
-import com.raquo.laminar.api.L.HtmlElement
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
-trait Component[Ref <: dom.html.Element]:
-  def element: ReactiveHtmlElement[Ref]
+trait HtmlComponent[Ref <: dom.html.Element, A]:
+  extension (a: A) def element: ReactiveHtmlElement[Ref]
 
-object Component:
-  given [Ref <: dom.html.Element]
-      : Conversion[Component[Ref], ReactiveHtmlElement[Ref]] with
-    def apply(component: Component[Ref]): ReactiveHtmlElement[Ref] =
-      component.element
-
-trait HtmlComponent[C]:
-  extension (c: C) def element: HtmlElement
+type BaseHtmlComponent[A] = HtmlComponent[dom.html.Element, A]
diff --git a/ui/src/ui/components/tailwind/Renderable.scala b/ui/src/ui/components/tailwind/Renderable.scala
index a0fcc5b..a8f0f9d 100644
--- a/ui/src/ui/components/tailwind/Renderable.scala
+++ b/ui/src/ui/components/tailwind/Renderable.scala
@@ -1,6 +1,7 @@
 package works.iterative.ui.components.tailwind
 
 import com.raquo.laminar.api.L.{*, given}
+import org.scalajs.dom
 
-trait Renderable[A]:
-  extension (a: A) def toHtml: HtmlElement
+trait HtmlRenderable[A]:
+  extension (a: A) def render: Modifier[HtmlElement]
diff --git a/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala b/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala
index f1eafd0..6eeabd2 100644
--- a/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala
+++ b/ui/src/ui/components/tailwind/data_display/description_lists/LeftAlignedInCard.scala
@@ -1,10 +1,10 @@
 package works.iterative.ui.components.tailwind.data_display.description_lists
 
 import com.raquo.laminar.api.L.{*, given}
-import works.iterative.ui.components.tailwind.HtmlComponent
 import works.iterative.ui.UIString
 import works.iterative.ui.components.tailwind.TimeUtils
 import java.time.LocalDate
+import works.iterative.ui.components.tailwind.BaseHtmlComponent
 
 case class OptionalLabeledValue(
     label: UIString,
@@ -41,7 +41,7 @@
 )
 
 object LeftAlignedInCard:
-  given leftAlignedInCardComponent: HtmlComponent[LeftAlignedInCard] with
+  given leftAlignedInCardComponent: BaseHtmlComponent[LeftAlignedInCard] with
     extension (d: LeftAlignedInCard)
       def element: HtmlElement =
         div(
diff --git a/ui/src/ui/components/tailwind/list/ListRow.scala b/ui/src/ui/components/tailwind/list/ListRow.scala
index e37682b..54a7769 100644
--- a/ui/src/ui/components/tailwind/list/ListRow.scala
+++ b/ui/src/ui/components/tailwind/list/ListRow.scala
@@ -16,40 +16,44 @@
     bottomRight: Modifier[HtmlElement],
     farRight: Modifier[HtmlElement],
     linkMods: Option[Modifier[Anchor]] = None
-) extends Component[org.scalajs.dom.html.LI]:
+)
 
-  def content: Modifier[HtmlElement] =
-    Seq(
-      cls := "block hover:bg-gray-50",
-      div(
-        cls := "px-4 py-4 sm:px-6 items-center flex",
-        div(
-          cls := "min-w-0 flex-1 pr-4",
+object ListRow:
+
+  given HtmlComponent[org.scalajs.dom.html.LI, ListRow] with
+    extension (r: ListRow)
+      def content: Modifier[HtmlElement] =
+        Seq(
+          cls := "block hover:bg-gray-50",
           div(
-            cls := "flex items-center justify-between",
-            p(
-              cls := "text-sm font-medium text-indigo-600 truncate",
-              title
-            ),
+            cls := "px-4 py-4 sm:px-6 items-center flex",
             div(
-              cls := "ml-2 flex-shrink-0 flex",
-              topRight
-            )
-          ),
-          div(
-            cls := "mt-2 sm:flex sm:justify-between",
-            bottomLeft,
-            bottomRight
+              cls := "min-w-0 flex-1 pr-4",
+              div(
+                cls := "flex items-center justify-between",
+                p(
+                  cls := "text-sm font-medium text-indigo-600 truncate",
+                  r.title
+                ),
+                div(
+                  cls := "ml-2 flex-shrink-0 flex",
+                  r.topRight
+                )
+              ),
+              div(
+                cls := "mt-2 sm:flex sm:justify-between",
+                r.bottomLeft,
+                r.bottomRight
+              )
+            ),
+            r.farRight
           )
-        ),
-        farRight
-      )
-    )
+        )
 
-  def element: ReactiveHtmlElement[org.scalajs.dom.html.LI] =
-    val c = content
-    li(
-      linkMods match
-        case Some(m) => a(m, c)
-        case _       => div(c)
-    )
+      def element: ReactiveHtmlElement[org.scalajs.dom.html.LI] =
+        val c = content
+        li(
+          r.linkMods match
+            case Some(m) => a(m, c)
+            case _       => div(c)
+        )
diff --git a/ui/src/ui/components/tailwind/list/StackedList.scala b/ui/src/ui/components/tailwind/list/StackedList.scala
index 176791e..c8599f9 100644
--- a/ui/src/ui/components/tailwind/list/StackedList.scala
+++ b/ui/src/ui/components/tailwind/list/StackedList.scala
@@ -14,7 +14,7 @@
     ul(
       role := "list",
       cls := "divide-y divide-gray-200",
-      items.map(d => d.asListRow)
+      items.map(d => d.asListRow.element)
     )
 
   def withMod(
@@ -24,7 +24,7 @@
       role := "list",
       cls := "divide-y divide-gray-200",
       mods,
-      items.map(d => d.asListRow)
+      items.map(d => d.asListRow.element)
     )
 
   def grouped(items: List[Item], groupBy: Item => String): List[HtmlElement] =