diff --git a/client/include/ui.h b/client/include/ui.h
index e733b49..e4c7db4 100644
--- a/client/include/ui.h
+++ b/client/include/ui.h
@@ -76,12 +76,9 @@ typedef struct GPUStringStruct {
 typedef struct GPUDrawableStruct {
   vec2     pos;
   vec2     size;
-  vec4     color;
+  vec4     color[4];
   uint32_t type;
-  uint32_t var1;
-  uint32_t var2;
-  float    var3;
-  float    var4;
+  uint32_t var;
   uint32_t id;
 } GPUDrawable;
 
diff --git a/client/shader/string.comp b/client/shader/string.comp
index 4ad7ab4..66c2356 100644
--- a/client/shader/string.comp
+++ b/client/shader/string.comp
@@ -19,9 +19,11 @@ void main() {
     pc.layer.drawables.d[buffer_pos + i].pos = string.pos + pen;
     pen += string.size*symbol.advance;
     pc.layer.drawables.d[buffer_pos + i].size = vec2(string.size, string.size);
-    pc.layer.drawables.d[buffer_pos + i].color = string.color;
-    pc.layer.drawables.d[buffer_pos + i].var1 = code;
-    pc.layer.drawables.d[buffer_pos + i].var2 = string.font;
+    pc.layer.drawables.d[buffer_pos + i].color[0] = string.color;
+    pc.layer.drawables.d[buffer_pos + i].color[1] = string.color;
+    pc.layer.drawables.d[buffer_pos + i].color[2] = string.color;
+    pc.layer.drawables.d[buffer_pos + i].color[3] = string.color;
+    pc.layer.drawables.d[buffer_pos + i].var = code + (string.font << 16);
     pc.layer.drawables.d[buffer_pos + i].type = 1;
   }
 }
diff --git a/client/shader/ui.frag b/client/shader/ui.frag
index fcc04cd..57f951f 100644
--- a/client/shader/ui.frag
+++ b/client/shader/ui.frag
@@ -12,13 +12,36 @@ layout(set = 3, binding = 0) uniform texture2D textures[];
 
 layout(location = 0) in vec4 fragColor;
 layout(location = 1) in vec2 fragUV;
-layout(location = 2) flat in uint code;
+layout(location = 2) flat in uint glyph;
 layout(location = 3) flat in uint index;
 layout(location = 4) flat in uint type;
 layout(location = 5) flat in vec2 container_offset;
 
 layout(location = 0) out vec4 outColor;
 
+vec4 hsv_to_rgb(vec4 hsv) {
+  float C = hsv[1] * hsv[2];
+  float H = hsv[0]*6; 
+  float X = C * (1 - abs(mod(H, 2) - 1));
+  vec4 temp;
+  if(0 <= H && H <= 1) {
+    temp = vec4(C, X, 0, 0);
+  } else if(1 <= H && H  <= 2) {
+    temp = vec4(X, C, 0, 0);
+  } else if(2 <= H && H <= 3) {
+    temp = vec4(0, C, X, 0);
+  } else if(3 <= H && H <= 4) {
+    temp = vec4(0, X, C, 0);
+  } else if(4 <= H && H <= 5) {
+    temp = vec4(X, 0, C, 0);
+  } else if(5 <= H && H <= 6) {
+    temp = vec4(C, 0, X, 0);
+  }
+
+  float m = hsv[2] - C;
+  return vec4(temp[0] + m, temp[1] + m, temp[2] + m, hsv[3]);
+}
+
 void main() {
     vec2 pos = (gl_FragCoord.xy - vec2(0.5, 0.5))/pc.layer.container.context.scale;
     vec2 min = container_offset;
@@ -30,9 +53,11 @@ void main() {
     if(type == 0) {
       outColor = fragColor;
     } else if(type == 1) {
-      outColor = fragColor * texture(sampler2DArray(font_textures[index], font_samplers[index]), vec3(fragUV, code));
+      outColor = fragColor * texture(sampler2DArray(font_textures[index], font_samplers[index]), vec3(fragUV, glyph));
     } else if (type == 2) {
       outColor = fragColor * texture(sampler2D(textures[index], samplers[index]), fragUV);
+    } else if (type == 3) {
+      outColor = hsv_to_rgb(fragColor);
     }
 }
 
diff --git a/client/shader/ui.vert b/client/shader/ui.vert
index d1023fb..f447d2a 100644
--- a/client/shader/ui.vert
+++ b/client/shader/ui.vert
@@ -5,11 +5,15 @@
 
 layout(location = 0) out vec4 fragColor;
 layout(location = 1) out vec2 fragUV;
-layout(location = 2) out flat uint var1;
-layout(location = 3) out flat uint var2;
+layout(location = 2) out flat uint glyph;
+layout(location = 3) out flat uint index;
 layout(location = 4) out flat uint type;
 layout(location = 5) out flat vec2 container_offset;
 
+const uint color_index[6] = {
+  0, 1, 2, 1, 3, 2
+};
+
 const vec2 square[6] = {
   vec2(0.0, 0.0),
   vec2(1.0, 0.0),
@@ -43,22 +47,23 @@ void main() {
     container_offset = pc.layer.container.offset + vec2(pc.layer.container.context.extent.x - pc.layer.container.size.x, pc.layer.container.context.extent.y - pc.layer.container.size.y);
   }
   
-  if(drawable.type == 1){
-    // Glyph
-    Font font = pc.layer.container.context.fonts.f[drawable.var2];
-    Symbol symbol = font.symbols.s[drawable.var1];
+  if(drawable.type == 1) {
+    index = (drawable.var >> 16) & 0xFFFF;
+    glyph = drawable.var & 0xFFFF;
+    Font font = pc.layer.container.context.fonts.f[index];
+    Symbol symbol = font.symbols.s[glyph];
 
     fragUV = pos * vec2(symbol.width, symbol.height);
     pos = pos * vec2(symbol.width, symbol.height) + vec2(symbol.left, -symbol.top);
-  } else {
+  } else if(drawable.type == 2) {
     fragUV = pos;
+    index = drawable.var;
   }
 
+
   gl_Position = vec4((pos * drawable.size + drawable.pos + container_offset) * pc.layer.container.context.screen * 2, 0.0, 1.0) - vec4(1.0, 1.0, 0.0, 0.0);
   
-  fragColor = drawable.color;
+  fragColor = drawable.color[color_index[gl_VertexIndex]];
   type = drawable.type;
-  var1 = drawable.var1;
-  var2 = drawable.var2;
 }
 
diff --git a/client/shader/ui_common.glsl b/client/shader/ui_common.glsl
index fc3ee96..ac734f4 100644
--- a/client/shader/ui_common.glsl
+++ b/client/shader/ui_common.glsl
@@ -59,12 +59,9 @@ layout(std430, buffer_reference) readonly buffer CodeList {
 struct Drawable {
   vec2 pos;
   vec2 size;
-  vec4 color;
+  vec4 color[4];
   uint type;
-  uint var1;
-  uint var2;
-  float var3;
-  float var4;
+  uint var;
   uint id;
 };
 
diff --git a/client/src/main.c b/client/src/main.c
index d094531..571b44c 100644
--- a/client/src/main.c
+++ b/client/src/main.c
@@ -117,96 +117,97 @@ VkResult color_ui(ClientContext* context) {
     {
       .pos = {0, 0},
       .size = {190, 150},
-      .color = {0.4, 0.4, 0.4, 0.4},
+      .color = {{0.4, 0.4, 0.4, 0.4}, {0.4, 0.4, 0.4, 0.4}, {0.4, 0.4, 0.4, 0.4}, {0.4, 0.4, 0.4, 0.4}},
     },
     {
+      .type = 0x03,
       .pos = {2, 2},
       .size = {130, 130},
-      .color = {1, 1, 1, 1},
+      .color = {{0, 0, 1, 1}, {0, 1, 1, 1}, {0, 0, 0, 1}, {0, 1, 0, 1}},
       .id = 0x01,
     },
     {
+      .type = 0x03,
       .pos = {134, 2},
       .size = {10, 130},
-      .color = {1, 1, 1, 1},
+      .color = {{0, 1, 1, 1}, {0, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x02,
     },
     {
       .pos = {20, 134},
       .size = {95, 15},
-      .color = {0, 0, 1, 0},
       .id = 0x03,
     },
     {
       .pos = {146, 2},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x04,
     },
     {
       .pos = {168, 2},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x05,
     },
     {
       .pos = {146, 24},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x06,
     },
     {
       .pos = {168, 24},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x07,
     },
     {
       .pos = {146, 46},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x08,
     },
     {
       .pos = {168, 46},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x09,
     },
     {
       .pos = {146, 68},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x0A,
     },
     {
       .pos = {168, 68},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x0B,
     },
     {
       .pos = {146, 90},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x0C,
     },
     {
       .pos = {168, 90},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x0D,
     },
     {
       .pos = {146, 112},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x0E,
     },
     {
       .pos = {168, 112},
       .size = {20, 20},
-      .color = {1, 1, 1, 1},
+      .color = {{1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}, {1, 1, 1, 1}},
       .id = 0x0F,
     },
   };
@@ -309,7 +310,7 @@ VkResult hex_info_ui(ClientContext* context) {
     {
       .pos = {0, 0},
       .size = {150, 175},
-      .color = {0.4, 0.4, 0.4, 0.4},
+      .color = {{0.4, 0.4, 0.4, 0.4}, {0.4, 0.4, 0.4, 0.4}, {0.4, 0.4, 0.4, 0.4}, {0.4, 0.4, 0.4, 0.4}},
     },
   };
 
@@ -375,7 +376,7 @@ VkResult region_info_ui(ClientContext* context) {
     {
       .pos = {0, 0},
       .size = {225, 155},
-      .color = {0.4, 0.4, 0.4, 0.4},
+      .color = {{0.4, 0.4, 0.4, 0.4}, {0.4, 0.4, 0.4, 0.4}, {0.4, 0.4, 0.4, 0.4}, {0.4, 0.4, 0.4, 0.4}},
     },
   };