How to update different textures ( of different in size ) on same mesh

As shown in the image the floor area applied with custom texture ( wooden ) & border color.

I am trying to apply another new texture image to the selected area, which area is different in size or laying pattern can be different with border color and thickness ( mentioned in green and yellow color ).

another thing u v scale is repeating so didn’t find option to change its pattern like a brick pattern etc.

This link code I used to make floor. https://playground.babylonjs.com/#IIURAR#4

what about using a decal then? so you can keep your floor unchanged and add a decal on top of it

I need a solution like this video https://youtu.be/MjFEoTi7JoI
This I have achieved using Divs. In BabylonJs looking for the option to achieve as shown.
Looking for a similar kind of solution to achieve it.
the texture size is different and placement is based on the Grid made every time i select a different texture size, as shown in video 24x12 size and then after 24x1 size

I m going through the @nasimiasl solution also but unable to figure out how can achieve it.

Decals will work for that. what you need is your own logic to create the grid for your UI but this is not related to bjs