diff --git a/ui/src/ui/components/tailwind/Avatar.scala b/ui/src/ui/components/tailwind/Avatar.scala
index 12dd081..4d37f97 100644
--- a/ui/src/ui/components/tailwind/Avatar.scala
+++ b/ui/src/ui/components/tailwind/Avatar.scala
@@ -3,31 +3,36 @@
 import CustomAttrs.ariaHidden
 import com.raquo.laminar.api.L.{*, given}
 import com.raquo.domtypes.generic.codecs.BooleanAsTrueFalseStringCodec
-import works.iterative.ui.components.tailwind.Macros
 
-// TODO: render icon or picture based on img signal
+// TODO: macros for size
 class Avatar($avatarImg: Signal[Option[String]]):
-  inline def avatarPlaceholder(size: Int): HtmlElement =
+  inline def avatarPlaceholder(
+      extraClasses: String,
+      iconClasses: String
+  ): HtmlElement =
     div(
       cls := s"rounded-full text-indigo-200 bg-indigo-500 flex items-center justify-center",
-      cls := Macros.size(size),
-      Icons.outline.user(Macros.size(size - 2))
+      cls := extraClasses,
+      Icons.outline.user(iconClasses)
     )
 
-  inline def avatarImage(size: Int): Signal[HtmlElement] =
+  inline def avatarImage(
+      extraClasses: String,
+      iconClasses: String
+  ): Signal[HtmlElement] =
     $avatarImg.split(_ => ())((_, _, $url) =>
       img(
         cls := s"rounded-full",
-        cls := Macros.size(size),
+        cls := extraClasses,
         src <-- $url,
         alt := ""
       )
-    ).map(_.getOrElse(avatarPlaceholder(size)))
+    ).map(_.getOrElse(avatarPlaceholder(extraClasses, iconClasses)))
 
-  inline def avatar(size: Int): HtmlElement =
+  inline def avatar(extraClasses: String, iconClasses: String): HtmlElement =
     div(
       cls := "relative",
-      child <-- avatarImage(size),
+      child <-- avatarImage(extraClasses, iconClasses),
       span(
         cls := "absolute inset-0 shadow-inner rounded-full",
         ariaHidden := true