Thanks Julian,
I trully appreciate your guidance on this. Yes i don't have any experience with HTML or CSS at all. professionally i do telecom voice over ip 
my apologies this section i missed, though i saw it everywhere in other posts you and others telling about referring to these examples.
few questions
currently my flow looks like this, and i'm just trying to be sure the uibuilder connects properly, is this correct ?

[{"id":"ea6c8b26.1ac2c","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"f11ba73d.4b8a38","type":"ui_switch","z":"ea6c8b26.1ac2c","name":"","label":"Cieling Light","tooltip":"","group":"1faa3392.5a688c","order":1,"width":"0","height":"0","passthru":true,"decouple":"false","topic":"stat/MONU_BEDROOM/POWER3","topicType":"str","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","animate":false,"x":250,"y":220,"wires":[["7a7d3248.f610a4"]]},{"id":"7a7d3248.f610a4","type":"mqtt out","z":"ea6c8b26.1ac2c","name":"Cieling Light","topic":"cmnd/MONU_BEDROOM/POWER3","qos":"","retain":"","broker":"65920be5.ce01fc","x":450,"y":240,"wires":[]},{"id":"e65d0ae3.4c2308","type":"homekit-service","z":"ea6c8b26.1ac2c","isParent":true,"bridge":"ad59e6e7.f2fb48","parentService":"","name":"Cieling Light","serviceName":"Lightbulb","topic":"cmnd/MONU_BEDROOM/POWER3","filter":false,"manufacturer":"NRCHKB","model":"1.2.0","serialNo":"Default Serial Number","firmwareRev":"1.2.0","hardwareRev":"1.2.0","softwareRev":"1.2.0","cameraConfigVideoProcessor":"ffmpeg","cameraConfigSource":"","cameraConfigStillImageSource":"","cameraConfigMaxStreams":2,"cameraConfigMaxWidth":1280,"cameraConfigMaxHeight":720,"cameraConfigMaxFPS":10,"cameraConfigMaxBitrate":300,"cameraConfigVideoCodec":"libx264","cameraConfigAudioCodec":"libfdk_aac","cameraConfigAudio":false,"cameraConfigPacketSize":1316,"cameraConfigVerticalFlip":false,"cameraConfigHorizontalFlip":false,"cameraConfigMapVideo":"0:0","cameraConfigMapAudio":"0:1","cameraConfigVideoFilter":"scale=1280:720","cameraConfigAdditionalCommandLine":"-tune zerolatency","cameraConfigDebug":false,"cameraConfigSnapshotOutput":"disabled","cameraConfigInterfaceName":"","characteristicProperties":"{}","waitForSetupMsg":false,"outputs":2,"x":150,"y":260,"wires":[["848f93be.889be8"],["848f93be.889be8"]]},{"id":"848f93be.889be8","type":"function","z":"ea6c8b26.1ac2c","name":"","func":"msg.payload = msg.payload.On;\nif(msg.payload === true){ msg.payload = 'On' } \nelse{msg.payload = 'Off' }\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":260,"wires":[["7a7d3248.f610a4"]]},{"id":"2db97dc6.66418a","type":"uibuilder","z":"ea6c8b26.1ac2c","name":"","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"useSecurity":false,"sessionLength":432000,"tokenAutoExtend":false,"x":240,"y":140,"wires":[["7a7d3248.f610a4"],["7a7d3248.f610a4"]]},{"id":"1faa3392.5a688c","type":"ui_group","name":"MONU_BEDROOM","tab":"1bc662fc.db955d","order":1,"disp":true,"width":"6","collapse":true},{"id":"65920be5.ce01fc","type":"mqtt-broker","name":"pi0","broker":"192.168.1.2","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"ad59e6e7.f2fb48","type":"homekit-bridge","bridgeName":"Cieling Light","pinCode":"111-11-130","port":"","allowInsecureRequest":false,"manufacturer":"NRCHKB","model":"1.2.0","serialNo":"Default Serial Number","firmwareRev":"1.2.0","hardwareRev":"1.2.0","softwareRev":"1.2.0","customMdnsConfig":false,"mdnsMulticast":true,"mdnsInterface":"","mdnsPort":"","mdnsIp":"","mdnsTtl":"","mdnsLoopback":true,"mdnsReuseAddr":true,"allowMessagePassthrough":true},{"id":"1bc662fc.db955d","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]