diff --git a/src/components/RoundAvatar.hx b/src/components/RoundAvatar.hx
index 9be84dc..ce0c9d0 100644
--- a/src/components/RoundAvatar.hx
+++ b/src/components/RoundAvatar.hx
@@ -19,18 +19,22 @@ import feathers.controls.LayoutGroup;
 import t9.util.ColorTraces.*;
 
 class RoundAvatar extends LayoutGroup {
-	public function new() {
+
+	private var avatarSize:Int;
+
+	public function new(pAvatarSize:Int = 32) {
 		super();
+		avatarSize = pAvatarSize;
 	}
 
 	override private function initialize():Void {
 		super.initialize();
 
-		var al:AnchorLayout = new AnchorLayout();
-		layoutData = AnchorLayoutData.fill();
-		layout = al;
+		var hl:HorizontalLayout = new HorizontalLayout();
+		hl.horizontalAlign = LEFT;
+		layout = hl;
 
-		backgroundSkin = new RectangleSkin(SolidColor(0xFF0000, 1));
+		//backgroundSkin = new RectangleSkin(SolidColor(0xFF0000, 1));
 
 		/*var al:AssetLoader = new AssetLoader();
         al.addEventListener(Event.COMPLETE, onLoadComplete);
@@ -38,17 +42,23 @@ class RoundAvatar extends LayoutGroup {
 		al.source = "https://ui-avatars.com/api/?background=random&size=128";
         addChild(al);*/
 
+		var bkg:Shape = new Shape();
+		bkg.graphics.beginFill(Std.int(Math.random() * 0xFFFFFF), 1);
+		bkg.graphics.drawCircle(avatarSize / 2, avatarSize / 2, avatarSize / 2);
+		bkg.graphics.endFill();
+		backgroundSkin = bkg;
+
+		var spacer:Shape = new Shape();
+		spacer.graphics.beginFill(Std.int(0x933EA7), 1);
+		spacer.graphics.drawRect(bkg.x + bkg.width, bkg.y, avatarSize / 2, bkg.height);
+		spacer.graphics.endFill();
+		addChild(spacer);
+
         var l:Loader = new Loader();
-        l.load(new URLRequest("https://ui-avatars.com/api/?background=random&size=128"));
+       	// l.load(new URLRequest("https://ui-avatars.com/api/?background=random&size=64"));
+		l.load(new URLRequest("https://api.dicebear.com/9.x/pixel-art/png?size=32"));
         l.contentLoaderInfo.addEventListener (Event.COMPLETE, onLoadComplete);
-
-        addChild(l);
-
-		/*var s:Shape = new Shape();
-		s.graphics.beginFill(0x228B42, 1);
-		s.graphics.drawCircle(10, 10, 10);
-		s.graphics.endFill();
-		addChild(s);*/
+		
 	}
 
     private function onLoadComplete(e:Event) {
@@ -56,6 +66,9 @@ class RoundAvatar extends LayoutGroup {
         //var loader = cast(e.currentTarget, AssetLoader);
         //trace("asset loaded: " + loader.source);
         var l:Loader = cast(e.currentTarget, LoaderInfo).loader;
+		l.content.width = l.content.height = avatarSize;
+		if(!contains(l)) addChild(l);
         traceMagenta(l.width + " / " + l.height);
+		
     }
 }
diff --git a/src/model/Constants.hx b/src/model/Constants.hx
index f900ad1..0dfb7a2 100644
--- a/src/model/Constants.hx
+++ b/src/model/Constants.hx
@@ -34,6 +34,10 @@ class Constants {
     public static final MENU_ITEM_0_STRING:String = "Cavalier·e·s";
     public static final MENU_ITEM_1_STRING:String = "Licences FFE";
 
+    // UI
+    // number of rows in RidersList
+    public static final RIDERS_LIST_ROWS_COUNT:Int = 8;
+
     private function new() {
         
     }
diff --git a/src/view/RidersList.hx b/src/view/RidersList.hx
index 7f3b1b8..06e807b 100644
--- a/src/view/RidersList.hx
+++ b/src/view/RidersList.hx
@@ -33,14 +33,15 @@ class RidersList extends ListView {
 
 		// set common properties for all renderers in the same container here
 		var recycler = DisplayObjectRecycler.withFunction(() -> {
-			
 			final fnt1:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
 			final fnt2:Font = Assets.getFont(Constants.MONTSERRAT_BOLD_700);
 
+			var rowHeight:Int = Std.int(height / Constants.RIDERS_LIST_ROWS_COUNT);
 			var itemRenderer = new ItemRenderer();
-			itemRenderer.icon = new RoundAvatar();
-			itemRenderer.textFormat = new TextFormat(fnt1.fontName, 16, Constants.MAIN_COLOR1);
-			itemRenderer.secondaryTextFormat = new TextFormat(fnt2.fontName, 14, Constants.MAIN_COLOR2);
+			itemRenderer.height = rowHeight;
+			itemRenderer.icon = new RoundAvatar(Std.int(rowHeight * 0.9));
+			itemRenderer.textFormat = new TextFormat(fnt1.fontName, Std.int(rowHeight * 0.27), Constants.MAIN_COLOR1);
+			itemRenderer.secondaryTextFormat = new TextFormat(fnt2.fontName, Std.int(rowHeight * 0.2), Constants.MAIN_COLOR2);
 
 			return itemRenderer;
 		});
@@ -48,36 +49,32 @@ class RidersList extends ListView {
 		itemRendererRecycler = recycler;
 
 		recycler.update = (itemRenderer:ItemRenderer, state:ListViewItemState) -> {
-
-			var rider:RiderVO = cast (state.data, RiderVO);
+			var rider:RiderVO = cast(state.data, RiderVO);
 			itemRenderer.text = rider.firstName;
-    		itemRenderer.secondaryText = rider.name;
-			
+			itemRenderer.secondaryText = rider.name;
+
 			var ra:RoundAvatar = cast(itemRenderer.icon, RoundAvatar);
-			
-			//TODO change this to real iamge path
-    		//loader.source = "https://lepetittrot.com/path/to/pp_pictures" + state.data.id + ".jpg";
-			//loader.source = "https://testingbot.com/free-online-tools/random-avatar/50?u=" + Uuid.nanoId();
+
+			// TODO change this to real iamge path
+			// loader.source = "https://lepetittrot.com/path/to/pp_pictures" + state.data.id + ".jpg";
+			// loader.source = "https://testingbot.com/free-online-tools/random-avatar/50?u=" + Uuid.nanoId();
 
 			var rlrd:RidersListRendererDecoration = new RidersListRendererDecoration();
 			itemRenderer.accessoryView = rlrd;
-
 		};
 
 		recycler.reset = (itemRenderer:ItemRenderer, state:ListViewItemState) -> {
 			/*var label = cast(itemRenderer.getChildByName("label"), Label);
-			var loader = cast(itemRenderer.getChildByName("loader"), AssetLoader);
-			label.text = "";
-			loader.source = null;*/
+				var loader = cast(itemRenderer.getChildByName("loader"), AssetLoader);
+				label.text = "";
+				loader.source = null; */
 		};
 
-
 		model.addEventListener(AppModelLocator.RIDERS_LIST_DP_CHANGE, onRideListDpChange);
-
 	}
 
 	private function onCreationComplete(event:FeathersEvent):Void {
-		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
 	}
 
 	private function onRideListDpChange(e:Event):Void {
@@ -86,6 +83,6 @@ class RidersList extends ListView {
 		/*itemToText = function(item:Dynamic):String {
 			return item.firstName;
 		};*/
-		traceGreen(this + " --> onRideListDpChange() - w: " + width + " h: " + height );
+		traceGreen(this + " --> onRideListDpChange() - w: " + width + " h: " + height);
 	}
 }