diff --git a/src/bin/pathfinder/PFClient.hx b/src/bin/pathfinder/PFClient.hx
index 75077cd..be2202a 100644
--- a/src/bin/pathfinder/PFClient.hx
+++ b/src/bin/pathfinder/PFClient.hx
@@ -41,11 +41,11 @@ class PFClient implements Process {
         var childre: Array<UIElement> = [
             new TextElement('Acc: ${acc}'),
             new TextElement('Pos: X:${pos.x} Y:${pos.y} Z:${pos.z}'),
-            new TextElement('UPDATE', { onClick: () -> {
+            new TextElement('UPDATE', { style: {bgColor: Gray}, uiEvents: {onClick: () -> {
                 kernel.gps.GPS.instance.locate().handle((pos) ->{
                     this.requestRender();
                 });
-            }}),
+            }}}),
         ];
 
         this.root.setChildren(childre);
diff --git a/src/lib/HomeContext.hx b/src/lib/HomeContext.hx
index 26f5d51..77953ec 100644
--- a/src/lib/HomeContext.hx
+++ b/src/lib/HomeContext.hx
@@ -154,18 +154,18 @@ class HomeContext {
 		workspaceIDs.sort((a, b) -> a - b);
 
 		var children:Array<UIElement> = [
-			for (i in workspaceIDs) new TextElement('Switch to ${i + 1}', {onClick: this.handleSelectContext.bind(i)})
+			for (i in workspaceIDs) new TextElement('Switch to ${i + 1}', {uiEvents: {onClick: this.handleSelectContext.bind(i)}})
 		];
 
 		for (i in 0...listedApps.length) {
 			children.push(new TextElement(
 				'Add ${BinStore.instance.getNameByAlias(listedApps[i])}',
-				{onClick: this.spawnPs.bind(listedApps[i])}
+				{uiEvents: {onClick: this.spawnPs.bind(listedApps[i])}}
 			));
 		}
 
-		children.push(new TextElement('Output: ${selectedOutput}', {onClick: this.cycleOutput}));
-		children.push(new TextElement('Exit', {onClick: KernelEvents.instance.shutdown}));
+		children.push(new TextElement('Output: ${selectedOutput}',{ uiEvents:{ onClick: this.cycleOutput}}));
+		children.push(new TextElement('Exit', {style: {bgColor: Red}, uiEvents: {onClick: KernelEvents.instance.shutdown}}));
 
 		renderer.setChildren(children);
 
diff --git a/src/lib/ui/Style.hx b/src/lib/ui/Style.hx
new file mode 100644
index 0000000..67b2a8a
--- /dev/null
+++ b/src/lib/ui/Style.hx
@@ -0,0 +1,8 @@
+package lib.ui;
+
+import lib.Color;
+
+typedef Style = {
+    public var ?fgColor: Color;
+    public var ?bgColor: Color;
+}
diff --git a/src/lib/ui/elements/TextElement.hx b/src/lib/ui/elements/TextElement.hx
index 76e81a9..bde4488 100644
--- a/src/lib/ui/elements/TextElement.hx
+++ b/src/lib/ui/elements/TextElement.hx
@@ -6,10 +6,12 @@ class TextElement implements UIElement {
 	public var text:String;
 
 	private final uiEvents:UIEvents;
+	private final style:Style;
 
-	public function new(text:String, ?uiEvents:UIEvents) {
+	public function new(text:String, ?props: {?style:Style, ?uiEvents:UIEvents}) {
 		this.text = text;
-		this.uiEvents = uiEvents;
+		this.uiEvents = props?.uiEvents;
+		this.style = props?.style ?? {fgColor: White, bgColor: Black};
 	}
 
 	public function set(text:String) {
@@ -28,7 +30,7 @@ class TextElement implements UIElement {
 		var canvas = new Canvas();
 		for (i in 0...this.text.length) {
 			var c = this.text.charAt(i);
-			canvas.set({x: i, y: 0}, {bg: Black, textColor: White, char: c});
+			canvas.set({x: i, y: 0}, {bg: style.bgColor ?? Black, textColor: style.fgColor ?? White, char: c});
 		}
 
 		return canvas;