Need help designing UI for a smart home project
I am working on developing a smart home device for personal use. I am using a [Waveshare 1.8inch round display (Blue)](https://www.waveshare.com/esp32-s3-knob-touch-lcd-1.8.htm) device to control the lights in my house.
There is a web based [UI designer](https://lvgl.espboards.dev/) for developing UI. I am trying to add 4 switches on page 1. Here is my crude design.
Requesting UI experts for suggestions to make it more aesthetic. I have chosen random colors but the knob is a CNC machines aluminum in color blue.

Also attaching yaml configuration that you can import in LVGL designer and modify the design.
# >>> LVGL Designer - generated from the canvas. >>>
# This block is regenerated from the canvas — edits here are not preserved.
lvgl:
pages:
- id: canvas\_1
bg\_color: 0x111827
pad\_all: 0
widgets:
- switch:
id: lv\_switch\_1
x: 230
y: 130
width: 60
height: 30
state:
checked: true
bg\_color: 0x4B5563
indicator:
checked:
bg\_color: 0x10B981
knob:
bg\_color: 0xFFFFFF
border\_color: 0x9CA3AF
border\_width: 1
- switch:
id: lv\_switch\_2
x: 80
y: 130
width: 60
height: 30
state:
checked: true
bg\_color: 0x4B5563
indicator:
checked:
bg\_color: 0x10B981
knob:
bg\_color: 0xFFFFFF
border\_color: 0x9CA3AF
border\_width: 1
- switch:
id: lv\_switch\_3
x: 80
y: 220
width: 60
height: 30
state:
checked: true
bg\_color: 0x4B5563
indicator:
checked:
bg\_color: 0x10B981
knob:
bg\_color: 0xFFFFFF
border\_color: 0x9CA3AF
border\_width: 1
- switch:
id: lv\_switch\_4
x: 230
y: 220
width: 60
height: 30
state:
checked: true
bg\_color: 0x4B5563
indicator:
checked:
bg\_color: 0x10B981
knob:
bg\_color: 0xFFFFFF
border\_color: 0x9CA3AF
border\_width: 1
- label:
id: lv\_label\_10
x: 98
y: 55
width: 165
height: 45
text: "Living Room"
text\_color: 0xFFFFFF
text\_align: CENTER
text\_font: montserrat\_28
- label:
id: lv\_label\_11
x: 80
y: 106
width: 60
height: 24
text: "Light 1\\n"
text\_color: 0xFFFFFF
- label:
id: widget\_1786871459028\_wrt23dzeg
x: 230
y: 106
width: 60
height: 24
text: "Light 2\\n"
text\_color: 0xFFFFFF
- label:
id: widget\_1786871476986\_zy8xzdjc6
x: 80
y: 196
width: 60
height: 24
text: "Light 3\\n"
text\_color: 0xFFFFFF
- label:
id: widget\_1786871488127\_eo0tk9dzg
x: 230
y: 196
width: 60
height: 24
text: "Desk Light"
text\_color: 0xFFFFFF
# <<< end LVGL Designer block <<<