diff --git a/project.xml b/project.xml
index 812ffb7..964f59a 100644
--- a/project.xml
+++ b/project.xml
@@ -23,6 +23,8 @@
 	<haxelib name="haxe-strings" />
 	<haxelib name="fuzzaldrin" />
 	<haxelib name="bindx2" />
+	<haxelib name="mxhx-feathersui" />
+	<haxelib name="mxhx-component" />
 
 	<icon path="assets/icons/app_icon.svg"/>
 
@@ -44,6 +46,8 @@
 	<config:android permission="android.permission.INTERNET" />
 	<config:android permission="android.permission.ACCESS_NETWORK_STATE" />
 
+	<define name="mxhx_disable_experimental_warning"/>
+
 
 
 </project>
\ No newline at end of file
diff --git a/src/model/AppModelLocator.hx b/src/model/AppModelLocator.hx
index c0e9498..178912c 100644
--- a/src/model/AppModelLocator.hx
+++ b/src/model/AppModelLocator.hx
@@ -73,11 +73,10 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 
 	public function filterRiderListDP(pTestValue:String) {
 		ridersListDP.filterFunction = function(rider:RiderVO):Bool {
-			return StringTools.contains(rider.firstName, pTestValue);
+			return StringTools.contains(rider.firstName.toLowerCase(), pTestValue.toLowerCase());
 		};
 		//ridersListDP.refresh();
 		dispatchEvent(new Event(AppModelLocator.RIDERS_LIST_DP_CHANGE));
-		traceCyan(ridersListDP.length);
 	}
 
 	// variable to store error messages from the httpservice
diff --git a/src/view/MyMXHXComp.mxhx b/src/view/MyMXHXComp.mxhx
new file mode 100644
index 0000000..8209f03
--- /dev/null
+++ b/src/view/MyMXHXComp.mxhx
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/mxhx" xmlns:f="https://ns.feathersui.com/mxhx">
+  <!-- <f:Button text="{Date.now().toString()}" width="150" height="40" click="{trace('Hi!');}"/>-->
+  <f:Button text="{Date.now().toString()}" width="150" height="40" click="{trace('Hi!');}"/>
+</f:LayoutGroup>
\ No newline at end of file
diff --git a/src/view/RiderCardDrawer.hx b/src/view/RiderCardDrawer.hx
index 9f1e7bf..ee61aef 100644
--- a/src/view/RiderCardDrawer.hx
+++ b/src/view/RiderCardDrawer.hx
@@ -1,9 +1,6 @@
 package view;
 
-import haxe.macro.Expr;
 import bindx.Bind;
-import openfl.utils.Function;
-import feathers.core.PopUpManager;
 import components.VSpacer;
 import feathers.controls.AssetLoader;
 import feathers.controls.Button;
@@ -13,7 +10,7 @@ import feathers.controls.HProgressBar;
 import feathers.controls.Label;
 import feathers.controls.LayoutGroup;
 import feathers.controls.ScrollContainer;
-import feathers.controls.TextInput;
+import feathers.core.PopUpManager;
 import feathers.events.FeathersEvent;
 import feathers.events.TriggerEvent;
 import feathers.layout.VerticalLayout;
@@ -21,9 +18,11 @@ import feathers.skins.RectangleSkin;
 import model.AppModelLocator;
 import model.Constants;
 import model.String.Strings;
+import mxhx.macros.MXHXComponent;
 import openfl.Assets;
 import openfl.events.Event;
 import openfl.text.TextFormat;
+import openfl.utils.Function;
 import t9.util.ColorTraces.*;
 import ui.LPTCTheme;
 import ui.SVGIconFactory;
@@ -42,7 +41,9 @@ class RiderCardDrawer extends Drawer {
 	private var nameLabel:Label;
 	private var creditLabel:Label;
 	private var creditProgressBar:HProgressBar;
-	private var removeOneCredit:Button;
+	private var removeOneCreditButton:Button;
+	private var lastLessonDateTextLabel:Label;
+	private var lastLessonDateValueLabel:Label;
 
 	public function new() {
 		super();
@@ -94,7 +95,7 @@ class RiderCardDrawer extends Drawer {
 		// ##### SPACER
 		mainScrollContainer.addChild(new VSpacer(10));
 
-		// ########################################################################## FIRSTNAME & NAME LABELS
+		// ########################################################################## firstname & name labels group
 		// layout
 		var lg1:LayoutGroup = new LayoutGroup();
 		lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0));
@@ -139,12 +140,12 @@ class RiderCardDrawer extends Drawer {
 		mainScrollContainer.addChild(new VSpacer(10));
 
 		// ########################################################################## Remove 1 credit button
-		removeOneCredit = new Button();
-		removeOneCredit.icon = SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3);
-		removeOneCredit.setIconForState(ButtonState.DOWN,
+		removeOneCreditButton = new Button();
+		removeOneCreditButton.icon = SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3);
+		removeOneCreditButton.setIconForState(ButtonState.DOWN,
 			SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR));
-		removeOneCredit.text = Strings.RCD_S2;
-		removeOneCredit.addEventListener(TriggerEvent.TRIGGER, (e) -> {
+		removeOneCreditButton.text = Strings.RCD_S2;
+		removeOneCreditButton.addEventListener(TriggerEvent.TRIGGER, (e) -> {
 			traceRed("removeOneCredit()");
 			// this function will be exectuted when the user will click on the ConfirmationPanel's "confirm" button
 			var f:Function = function() {
@@ -153,19 +154,57 @@ class RiderCardDrawer extends Drawer {
 			}
 			PopUpManager.addPopUp(new ConfirmationPanel(Strings.CP_S2, Strings.CP_S3, f), parent, true, true);
 		});
-		mainScrollContainer.addChild(removeOneCredit);
+		mainScrollContainer.addChild(removeOneCreditButton);
 
 		// ##### SPACER
 		mainScrollContainer.addChild(new VSpacer(10));
 		// mainScrollContainer.addChild(new VSpacer(2, Constants.MAIN_COLOR2, 1));
 
+		// ########################################################################## rider basic infos group (lastLessonDate, age, level)
+		/*var lg2:LayoutGroup = new LayoutGroup();
+		lg2.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
+		var vl2:VerticalLayout = new VerticalLayout();
+		vl2.horizontalAlign = JUSTIFY;
+		lg2.layout = vl2;
+		mainScrollContainer.addChild(lg2);
+		
+		lastLessonDateTextLabel = new Label();
+		lastLessonDateTextLabel.embedFonts = true;
+		lastLessonDateTextLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_12, Constants.MAIN_COLOR1);
+		lastLessonDateTextLabel.text = "Dernier cours";
+		lg2.addChild(lastLessonDateTextLabel);*/
+
+		/*var m = MXHXComponent.withMarkup('
+		<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/basic" xmlns:f="https://ns.feathersui.com/mxhx">
+        	<f:layout>
+            	<f:HorizontalLayout gap="10" horizontalAlign="RIGHT"/>
+        	</f:layout>
+        	<f:Button id="okButton" text="OK"/>
+        	<f:Button id="cancelButton" text="Cancel"/>
+		</f:LayoutGroup>
+		');*/
+
+		var m = MXHXComponent.withFile('MyMXHXcomp.mxhx');
+		mainScrollContainer.addChild(m);
+
+		
+		//mainScrollContainer.addChild(m);
+
 		drawer = mainScrollContainer;
 	}
 
+
+
+
+	
 	private function onCreationComplete(e:FeathersEvent):Void {
 		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
 	}
 
+
+
+
+
 	public function populateAndShow() {
 		// var rvo:RiderVO = model.selectedRider;
 
@@ -196,6 +235,8 @@ class RiderCardDrawer extends Drawer {
 		updateCreditUIElments(null, model.selectedRider.credit);
 		Bind.bind(model.selectedRider.credit, updateCreditUIElments);
 
+		
+
 		openDrawer();
 	}
 
diff --git a/src/view/RidersList.hx b/src/view/RidersList.hx
index f0d6afc..0e13281 100644
--- a/src/view/RidersList.hx
+++ b/src/view/RidersList.hx
@@ -22,7 +22,6 @@ import t9.util.ColorTraces.*;
 import vo.RiderVO;
 
 class RidersList extends ListView {
-	private var model = AppModelLocator.getInstance();
 	private var rowHeight:Int;
 	private var localRidersListDP:ArrayCollection<RiderVO>;
 
@@ -79,7 +78,7 @@ class RidersList extends ListView {
 				loader.source = null; */
 		};
 
-		model.addEventListener(AppModelLocator.RIDERS_LIST_DP_CHANGE, onRiderListDpChange);
+		AppModelLocator.getInstance().addEventListener(AppModelLocator.RIDERS_LIST_DP_CHANGE, onRiderListDpChange);
 	}
 
 	private function onCreationComplete(event:FeathersEvent):Void {
@@ -89,7 +88,7 @@ class RidersList extends ListView {
 	private function onRiderListDpChange(e:Event):Void {
 		
 		if(localRidersListDP.length > 0) localRidersListDP.removeAll();
-		localRidersListDP.addAll(model.ridersListDP);
+		localRidersListDP.addAll(AppModelLocator.getInstance().ridersListDP);
 		dataProvider = localRidersListDP;
 		//dataProvider = model.ridersListDP;
 
diff --git a/src/view/ToolBar.hx b/src/view/ToolBar.hx
index 143f4ba..67a4981 100644
--- a/src/view/ToolBar.hx
+++ b/src/view/ToolBar.hx
@@ -67,7 +67,6 @@ class ToolBar extends LayoutGroup {
 
 	private function onTextInputChange(e:Event) {
 		var ti:TextInput = cast(e.currentTarget, TextInput);
-    	trace("text input change: " + ti.text);
 		AppModelLocator.getInstance().filterRiderListDP(ti.text);
 	}