diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DetailPage.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DetailPage.scala
index 8370ac0..69bc8c6 100644
--- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DetailPage.scala
+++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DetailPage.scala
@@ -1,37 +1,26 @@
 package cz.e_bs.cmi.mdr.pdb.app.pages
 
-import com.raquo.laminar.api.L.{*, given}
-import com.raquo.domtypes.generic.codecs.StringAsIsCodec
-import cz.e_bs.cmi.mdr.pdb.app.components.Icons
-import cz.e_bs.cmi.mdr.pdb.app.{Osoba, PracovniPomer, Funkce}
-import cz.e_bs.cmi.mdr.pdb.app.components.Avatar
-import cz.e_bs.cmi.mdr.pdb.app.Page
-import cz.e_bs.cmi.mdr.pdb.app.services.DataFetcher
 import com.raquo.airstream.core.EventStream
+import com.raquo.laminar.api.L.{_, given}
 import com.raquo.waypoint.Router
-import cz.e_bs.cmi.mdr.pdb.app.components.CustomAttrs.datetime
-import cz.e_bs.cmi.mdr.pdb.app.components.AppPage
-import cz.e_bs.cmi.mdr.pdb.app.components.OsobaView
+import cz.e_bs.cmi.mdr.pdb.app.Osoba
+import cz.e_bs.cmi.mdr.pdb.app.Page
 import cz.e_bs.cmi.mdr.pdb.app.Parametr
+import cz.e_bs.cmi.mdr.pdb.app.components.AppPage
+import cz.e_bs.cmi.mdr.pdb.app.components.Avatar
+import cz.e_bs.cmi.mdr.pdb.app.components.CustomAttrs.datetime
+import cz.e_bs.cmi.mdr.pdb.app.components.Icons
+import cz.e_bs.cmi.mdr.pdb.app.components.Loading
+import cz.e_bs.cmi.mdr.pdb.app.components.OsobaView
 import cz.e_bs.cmi.mdr.pdb.app.components.list.BaseList
-import cz.e_bs.cmi.mdr.pdb.app.components.list.NavigableList
 import cz.e_bs.cmi.mdr.pdb.app.components.list.Navigable
+import cz.e_bs.cmi.mdr.pdb.app.components.list.NavigableList
 import cz.e_bs.cmi.mdr.pdb.waypoint.components.Navigator
 
 case class DetailPage(fetch: String => EventStream[Osoba])(
     $page: Signal[Page.Detail]
 )(using router: Router[Page])
     extends AppPage:
-  // TODO: proper loader
-  private val loading =
-    div(
-      cls := "bg-gray-50 overflow-hidden rounded-lg",
-      div(
-        cls := "px-4 py-5 sm:p-6",
-        "Loading..."
-      )
-    )
-
   override def pageContent: HtmlElement =
     val data = Var[Option[Osoba]](None)
     val $maybeOsoba =
@@ -43,7 +32,7 @@
       cls := "max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8",
       $fetchedData --> data.writer.contramapSome,
       $fetchedData --> (o => router.replaceState(Page.Detail(o))),
-      child <-- $maybeOsoba.map(_.getOrElse(loading))
+      child <-- $maybeOsoba.map(_.getOrElse(Loading))
     )
 
   private def renderView($osoba: Signal[Osoba]): HtmlElement =

diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DetailPage.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DetailPage.scala
index 8370ac0..69bc8c6 100644
--- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DetailPage.scala
+++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DetailPage.scala
@@ -1,37 +1,26 @@
 package cz.e_bs.cmi.mdr.pdb.app.pages
 
-import com.raquo.laminar.api.L.{*, given}
-import com.raquo.domtypes.generic.codecs.StringAsIsCodec
-import cz.e_bs.cmi.mdr.pdb.app.components.Icons
-import cz.e_bs.cmi.mdr.pdb.app.{Osoba, PracovniPomer, Funkce}
-import cz.e_bs.cmi.mdr.pdb.app.components.Avatar
-import cz.e_bs.cmi.mdr.pdb.app.Page
-import cz.e_bs.cmi.mdr.pdb.app.services.DataFetcher
 import com.raquo.airstream.core.EventStream
+import com.raquo.laminar.api.L.{_, given}
 import com.raquo.waypoint.Router
-import cz.e_bs.cmi.mdr.pdb.app.components.CustomAttrs.datetime
-import cz.e_bs.cmi.mdr.pdb.app.components.AppPage
-import cz.e_bs.cmi.mdr.pdb.app.components.OsobaView
+import cz.e_bs.cmi.mdr.pdb.app.Osoba
+import cz.e_bs.cmi.mdr.pdb.app.Page
 import cz.e_bs.cmi.mdr.pdb.app.Parametr
+import cz.e_bs.cmi.mdr.pdb.app.components.AppPage
+import cz.e_bs.cmi.mdr.pdb.app.components.Avatar
+import cz.e_bs.cmi.mdr.pdb.app.components.CustomAttrs.datetime
+import cz.e_bs.cmi.mdr.pdb.app.components.Icons
+import cz.e_bs.cmi.mdr.pdb.app.components.Loading
+import cz.e_bs.cmi.mdr.pdb.app.components.OsobaView
 import cz.e_bs.cmi.mdr.pdb.app.components.list.BaseList
-import cz.e_bs.cmi.mdr.pdb.app.components.list.NavigableList
 import cz.e_bs.cmi.mdr.pdb.app.components.list.Navigable
+import cz.e_bs.cmi.mdr.pdb.app.components.list.NavigableList
 import cz.e_bs.cmi.mdr.pdb.waypoint.components.Navigator
 
 case class DetailPage(fetch: String => EventStream[Osoba])(
     $page: Signal[Page.Detail]
 )(using router: Router[Page])
     extends AppPage:
-  // TODO: proper loader
-  private val loading =
-    div(
-      cls := "bg-gray-50 overflow-hidden rounded-lg",
-      div(
-        cls := "px-4 py-5 sm:p-6",
-        "Loading..."
-      )
-    )
-
   override def pageContent: HtmlElement =
     val data = Var[Option[Osoba]](None)
     val $maybeOsoba =
@@ -43,7 +32,7 @@
       cls := "max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8",
       $fetchedData --> data.writer.contramapSome,
       $fetchedData --> (o => router.replaceState(Page.Detail(o))),
-      child <-- $maybeOsoba.map(_.getOrElse(loading))
+      child <-- $maybeOsoba.map(_.getOrElse(Loading))
     )
 
   private def renderView($osoba: Signal[Osoba]): HtmlElement =
diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DirectoryPage.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DirectoryPage.scala
index 64791a0..66067e3 100644
--- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DirectoryPage.scala
+++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/DirectoryPage.scala
@@ -6,6 +6,7 @@
 import com.raquo.waypoint.Router
 import cz.e_bs.cmi.mdr.pdb.app.components.{AppPage, Loading}
 import cz.e_bs.cmi.mdr.pdb.UserInfo
+import cz.e_bs.cmi.mdr.pdb.app.components.Avatar
 
 case class DirectoryPage(fetch: () => EventStream[List[UserInfo]])(using
     router: Router[Page]
@@ -55,17 +56,16 @@
     )
 
   private def renderUser(o: UserInfo) =
+    inline def avatarImage =
+      Avatar(Val(o.img).signal).avatarImage(10)
+
     val page = Page.Detail(o.personalNumber)
     li(
       div(
         cls := "relative px-6 py-5 flex items-center space-x-3 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-pink-500",
         div(
           cls := "flex-shrink-0",
-          img(
-            cls := "h-10 w-10 rounded-full",
-            src := "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
-            alt := ""
-          )
+          child <-- avatarImage
         ),
         div(
           cls := "flex-1 min-w-0",