diff --git a/ui/src/ui/components/tailwind/Renderable.scala b/ui/src/ui/components/tailwind/Renderable.scala
index a8f0f9d..ec87e6b 100644
--- a/ui/src/ui/components/tailwind/Renderable.scala
+++ b/ui/src/ui/components/tailwind/Renderable.scala
@@ -2,6 +2,17 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import org.scalajs.dom
+import java.time.LocalDate
 
 trait HtmlRenderable[A]:
   extension (a: A) def render: Modifier[HtmlElement]
+
+object HtmlRenderable:
+  given stringValue: HtmlRenderable[String] with
+    extension (v: String)
+      def render: Modifier[HtmlElement] =
+        v: Modifier[HtmlElement]
+  given dateValue: HtmlRenderable[LocalDate] with
+    extension (v: LocalDate)
+      def render: Modifier[HtmlElement] =
+        TimeUtils.formatDate(v)

diff --git a/ui/src/ui/components/tailwind/Renderable.scala b/ui/src/ui/components/tailwind/Renderable.scala
index a8f0f9d..ec87e6b 100644
--- a/ui/src/ui/components/tailwind/Renderable.scala
+++ b/ui/src/ui/components/tailwind/Renderable.scala
@@ -2,6 +2,17 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import org.scalajs.dom
+import java.time.LocalDate
 
 trait HtmlRenderable[A]:
   extension (a: A) def render: Modifier[HtmlElement]
+
+object HtmlRenderable:
+  given stringValue: HtmlRenderable[String] with
+    extension (v: String)
+      def render: Modifier[HtmlElement] =
+        v: Modifier[HtmlElement]
+  given dateValue: HtmlRenderable[LocalDate] with
+    extension (v: LocalDate)
+      def render: Modifier[HtmlElement] =
+        TimeUtils.formatDate(v)
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 6eeabd2..f8f0598 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
@@ -5,42 +5,30 @@
 import works.iterative.ui.components.tailwind.TimeUtils
 import java.time.LocalDate
 import works.iterative.ui.components.tailwind.BaseHtmlComponent
-
-case class OptionalLabeledValue(
-    label: UIString,
-    v: Option[Modifier[HtmlElement]]
-)
-
-object OptionalLabeledValue:
-  def makeValue[V](label: UIString, v: V)(using
-      r: OptionalValueRender[V]
-  ): OptionalLabeledValue = OptionalLabeledValue(label, r.render(v))
-
-trait OptionalValueRender[V]:
-  def render(v: V): Option[Modifier[HtmlElement]]
-
-object OptionalValueRender:
-  given stringValue: OptionalValueRender[String] with
-    def render(v: String): Option[Modifier[HtmlElement]] = Some(
-      v: Modifier[HtmlElement]
-    )
-  given dateValue: OptionalValueRender[LocalDate] with
-    def render(v: LocalDate): Option[Modifier[HtmlElement]] = Some(
-      TimeUtils.formatDate(v)
-    )
-  given optionValue[T](using
-      r: OptionalValueRender[T]
-  ): OptionalValueRender[Option[T]] with
-    def render(v: Option[T]): Option[Modifier[HtmlElement]] =
-      v.flatMap(r.render)
+import works.iterative.ui.components.tailwind.HtmlRenderable
 
 case class LeftAlignedInCard(
     title: String,
     subtitle: String,
-    data: List[OptionalLabeledValue]
+    data: List[LeftAlignedInCard.OptionalLabeledValue]
 )
 
 object LeftAlignedInCard:
+  case class OptionalLabeledValue(
+      label: UIString,
+      v: Option[Modifier[HtmlElement]]
+  )
+
+  trait AsValue[V]:
+    extension (v: V) def labeled(n: UIString): OptionalLabeledValue
+  given optionValue[V: HtmlRenderable]: AsValue[Option[V]] with
+    extension (v: Option[V])
+      def labeled(n: UIString): OptionalLabeledValue =
+        OptionalLabeledValue(n, v.map(_.render))
+  given [V: HtmlRenderable]: AsValue[V] with
+    extension (v: V)
+      def labeled(n: UIString): OptionalLabeledValue =
+        OptionalLabeledValue(n, Some(v.render))
   given leftAlignedInCardComponent: BaseHtmlComponent[LeftAlignedInCard] with
     extension (d: LeftAlignedInCard)
       def element: HtmlElement =