diff --git a/render/ui/button-off.png b/render/ui/button-off.png
new file mode 100644
index 0000000..77fbe38
Binary files /dev/null and b/render/ui/button-off.png differ
diff --git a/render/ui/button-on.png b/render/ui/button-on.png
new file mode 100644
index 0000000..287c1db
Binary files /dev/null and b/render/ui/button-on.png differ
diff --git a/sources/ui/button.svg b/sources/ui/button.svg
new file mode 100644
index 0000000..5a3ea7e
--- /dev/null
+++ b/sources/ui/button.svg
@@ -0,0 +1,422 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="138.80988"
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="button.svg"
+   inkscape:export-filename="../sprite2.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   viewBox="0 0 512 138.80988"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
+     id="defs4"><rect
+       x="176.71318"
+       y="220.03513"
+       width="230.43373"
+       height="73.376442"
+       id="rect15" /><inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect64"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1"
+       radius="9"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59" /><linearGradient
+       id="linearGradient14"><stop
+         style="stop-color:#303030;stop-opacity:1;"
+         offset="0"
+         id="stop12" /><stop
+         id="stop13"
+         offset="0.43257532"
+         style="stop-color:#202020;stop-opacity:1;" /><stop
+         style="stop-color:#303030;stop-opacity:1;"
+         offset="1"
+         id="stop14" /></linearGradient><linearGradient
+       id="linearGradient3934"><stop
+         style="stop-color:#808080;stop-opacity:1;"
+         offset="0"
+         id="stop3936" /><stop
+         style="stop-color:#404040;stop-opacity:0;"
+         offset="1"
+         id="stop3938" /></linearGradient><linearGradient
+       id="linearGradient3962"><stop
+         style="stop-color:#303030;stop-opacity:1;"
+         offset="0"
+         id="stop3964" /><stop
+         id="stop3978"
+         offset="0.5"
+         style="stop-color:#202020;stop-opacity:1;" /><stop
+         style="stop-color:#303030;stop-opacity:1;"
+         offset="1"
+         id="stop3966" /></linearGradient><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-9" /><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath162"><path
+         id="path162"
+         style="stroke:none;stroke-width:0.680315;stroke-miterlimit:3;paint-order:stroke fill markers"
+         d="m 47.732346,579.36223 -2.73242,2.73437 0.006,58.66602 c -1e-5,0.46498 0.18513,0.67382 0.67187,0.67382 h 3.19727 c 0.62359,0 1.125,0.32385 1.125,1.12305 v 29.41211 l 7.37304,7.375 113.689464,0.0156 1.55468,-1.55664 h 28.07032 l 1.55468,1.55664 30.51172,-0.002 12.2461,-12.24609 v -75.50586 l -12.2461,-12.24609 H 90.162166 l -2.22265,2.22265 h -12.50781 l -2.22266,-2.22265 z"
+         sodipodi:nodetypes="cccsssccccccccccccccc"
+         inkscape:label="mask" /></clipPath><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-8" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-8" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-1" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-2" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-8" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-9" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-6" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-7" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-5" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-3" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-3-9" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-5-3" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-7-1" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-6-9" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-7" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-7-9" /><rect
+       x="176.71318"
+       y="220.03512"
+       width="230.43373"
+       height="73.376445"
+       id="rect15-9" /><inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect64-3"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1 @ IF,0,0,1,0,9,0,1"
+       radius="9"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82921"
+       height="350.39066"
+       id="rect59-6" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-2" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-0" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-2" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-9-3" /><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath162-7"><path
+         id="path162-5"
+         style="stroke:none;stroke-width:0.680315;stroke-miterlimit:3;paint-order:stroke fill markers"
+         d="m 47.732346,579.36223 -2.73242,2.73437 0.006,58.66602 c -1e-5,0.46498 0.18513,0.67382 0.67187,0.67382 h 3.19727 c 0.62359,0 1.125,0.32385 1.125,1.12305 v 29.41211 l 7.37304,7.375 113.689464,0.0156 1.55468,-1.55664 h 28.07032 l 1.55468,1.55664 30.51172,-0.002 12.2461,-12.24609 v -75.50586 l -12.2461,-12.24609 H 90.162166 l -2.22265,2.22265 h -12.50781 l -2.22266,-2.22265 z"
+         sodipodi:nodetypes="cccsssccccccccccccccc"
+         inkscape:label="mask" /></clipPath><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-9" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-8-2" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-2" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-8-8" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-97" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-1-3" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-2-6" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-8-1" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-9-2" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-6-93" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-7-19" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-5-4" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-3-7" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-3-9-8" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-5-3-4" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-7-1-5" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-6-9-0" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-7-3" /><rect
+       x="150.50349"
+       y="-229.29628"
+       width="650.82922"
+       height="350.39066"
+       id="rect59-8-9-6-5-4-4-7-9-6" /></defs><sodipodi:namedview
+     id="base"
+     pagecolor="#1a1a1a"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.55112738"
+     inkscape:cx="283.05616"
+     inkscape:cy="-191.4258"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1280"
+     inkscape:window-height="1384"
+     inkscape:window-x="1280"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="true"
+     inkscape:pagecheckerboard="false"
+     inkscape:deskcolor="#292929"
+     labelstyle="default"
+     shape-rendering="auto"
+     inkscape:clip-to-page="false"
+     borderlayer="true"
+     showborder="true"
+     showguides="true"><inkscape:grid
+       type="xygrid"
+       id="grid2985"
+       empspacing="5"
+       visible="false"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       originx="-3.2029419e-06"
+       originy="-186.59506"
+       spacingy="1"
+       spacingx="1"
+       units="px" /></sodipodi:namedview><metadata
+     id="metadata7"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><cc:license
+           rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" /></cc:Work><cc:License
+         rdf:about="http://creativecommons.org/licenses/by-sa/4.0/"><cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" /><cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" /><cc:requires
+           rdf:resource="http://creativecommons.org/ns#Notice" /><cc:requires
+           rdf:resource="http://creativecommons.org/ns#Attribution" /><cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" /><cc:requires
+           rdf:resource="http://creativecommons.org/ns#ShareAlike" /></cc:License></rdf:RDF></metadata><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-3.2029419e-6,-978.95723)"><path
+       id="rect1-5"
+       style="fill:none;fill-opacity:1;stroke:#666666;stroke-width:25.0306;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 44.374849,991.47253 -31.859546,31.85697 v 50.0628 l 31.859546,31.8595 H 467.62757 l 31.85713,-31.8595 v -50.0628 l -31.85713,-31.85697 z" /><path
+       id="rect1-5-2"
+       style="fill:#202020;fill-opacity:1;stroke:#2f2f2f;stroke-width:18.2044;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 44.374849,991.47253 -31.859545,31.85697 v 50.0628 l 31.859545,31.8595 H 467.62757 l 31.85713,-31.8595 v -50.0628 l -31.85713,-31.85697 z" /><rect
+       style="fill:#acd654;fill-opacity:1;stroke:none;stroke-width:15.2257;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="rect14-5-9-1"
+       width="12.143223"
+       height="95.628647"
+       x="455.48434"
+       y="1000.5479" /><rect
+       style="fill:#acd654;fill-opacity:1;stroke:none;stroke-width:15.2257;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="rect14-5-9-1-2"
+       width="12.143223"
+       height="95.628647"
+       x="44.374847"
+       y="1000.5479" /><rect
+       style="fill:#acd654;fill-opacity:1;stroke:none;stroke-width:15.2257;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="rect14-5-9-1-2-2"
+       width="12.143223"
+       height="95.628647"
+       x="96.122086"
+       y="782.45697" /></g></svg>