diff --git a/client/src/main.c b/client/src/main.c
index 9d5d266..10df48d 100644
--- a/client/src/main.c
+++ b/client/src/main.c
@@ -96,6 +96,93 @@ uint32_t add_hex_region(ClientContext* context) {
 }
 
 #define COLOR_PICK_CONTAINER_ID 0x03
+
+void rgb_string_set(ClientContext* context, float r, float g, float b) {
+  char temp[10];
+  snprintf(temp, 10, "#%02x%02x%02x",
+      (uint)(r*255),
+      (uint)(g*255),
+      (uint)(b*255));
+  update_ui_string(temp, COLOR_PICK_CONTAINER_ID, 0, 0, context->ui, context->render);
+}
+
+void sv_square_pick(ClientContext* context, float s, float v) {
+  if(s < 0) s = 0;
+  if(s > 1) s = 1;
+
+  if(v < 0) v = 0;
+  if(v > 1) v = 1;
+
+  Container* container = context_container(COLOR_PICK_CONTAINER_ID, context->ui);
+  Layer* layer = &container->layers[0];
+  GPUDrawable* select_outline = &layer->drawables_buffer[3];
+  GPUDrawable* select = &layer->drawables_buffer[4];
+
+  select->pos[0] = s*130 - 2;
+  select->pos[1] = v*130 - 2;
+  
+  select->color[0][1] = s;
+  select->color[0][2] = 1-v;
+
+  select->color[1][1] = s;
+  select->color[1][2] = 1-v;
+
+  select->color[2][1] = s;
+  select->color[2][2] = 1-v;
+
+  select->color[3][1] = s;
+  select->color[3][2] = 1-v;
+
+  select_outline->pos[0] = s*130 - 3;
+  select_outline->pos[1] = v*130 - 3;
+
+  add_transfers(
+      &select_outline->pos[0],
+      layer->drawables,
+      3*sizeof(GPUDrawable) + offsetof(GPUDrawable, pos),
+      1*sizeof(vec2),
+      context->render);
+
+  add_transfers(
+      &select->pos[0],
+      layer->drawables,
+      4*sizeof(GPUDrawable) + offsetof(GPUDrawable, pos),
+      1*sizeof(vec2),
+      context->render);
+
+  add_transfers(
+      &select->color[0],
+      layer->drawables,
+      4*sizeof(GPUDrawable) + offsetof(GPUDrawable, color),
+      4*sizeof(vec4),
+      context->render);
+
+  rgb_string_set(context, select->color[0][0], select->color[0][1], select->color[0][2]);
+}
+
+void sv_square_button_callback(void* ptr, float x, float y, int button, int action, int mods) {
+  (void)mods;
+  (void)x;
+
+  ClientContext* context = (ClientContext*)ptr;
+  if(action == GLFW_PRESS && button == GLFW_MOUSE_BUTTON_LEFT) {
+    set_active_element(COLOR_PICK_CONTAINER_ID, 0, 1, context->ui);
+    sv_square_pick(context, x, y);
+  } else if(action == GLFW_RELEASE && button == GLFW_MOUSE_BUTTON_LEFT) {
+    clear_active_element(context->ui);
+  }
+}
+
+void sv_square_cursor_callback(void* ptr, float x, float y) {
+  ClientContext* context = (ClientContext*)ptr;
+
+  if(context->ui->active_element == 1
+  && context->ui->active_layer == 0
+  && context->ui->active_container == COLOR_PICK_CONTAINER_ID) {
+    sv_square_pick(context, x, y);
+  }
+}
+
 void hue_bar_set(ClientContext* context, float y) {
   if(y < 0) y = 0;
   if(y > 1) y = 1;
@@ -103,17 +190,33 @@ void hue_bar_set(ClientContext* context, float y) {
   Container* container = context_container(COLOR_PICK_CONTAINER_ID, context->ui);
   Layer* layer = &container->layers[0];
   GPUDrawable* sv_square = &layer->drawables_buffer[1];
+  GPUDrawable* select = &layer->drawables_buffer[4];
   
   sv_square->color[0][0] = y;
   sv_square->color[1][0] = y;
   sv_square->color[2][0] = y;
   sv_square->color[3][0] = y;
+
+  select->color[0][0] = y;
+  select->color[1][0] = y;
+  select->color[2][0] = y;
+  select->color[3][0] = y;
+
   add_transfers(
       &sv_square->color[0],
       layer->drawables,
       1*sizeof(GPUDrawable) + offsetof(GPUDrawable, color),
       4*sizeof(vec4),
       context->render);
+
+  add_transfers(
+      &select->color[0],
+      layer->drawables,
+      4*sizeof(GPUDrawable) + offsetof(GPUDrawable, color),
+      4*sizeof(vec4),
+      context->render);
+
+  rgb_string_set(context, select->color[0][0], select->color[0][1], select->color[0][2]);
 }
 
 void hue_bar_scroll_callback(void* ptr, double x, double y) {
@@ -188,6 +291,7 @@ VkResult color_ui(ClientContext* context) {
       .color = {{0, 0, 0, 1}, {0, 0, 0, 1}, {0, 0, 0, 1}, {0, 0, 0, 1}},
     },
     {
+      .type = DRAWABLE_TYPE_RECT_HSV,
       .pos = {10, 10},
       .size = {5, 5},
       .color = {{1, 0, 0, 1}, {1, 0, 0, 1}, {1, 0, 0, 1}, {1, 0, 0, 1}},
@@ -272,6 +376,12 @@ VkResult color_ui(ClientContext* context) {
   };
 
   UICallbacks callbacks[] = {
+    {
+      .layer = 0,
+      .element = 1,
+      .button = sv_square_button_callback,
+      .cursor = sv_square_cursor_callback,
+    },
     {
       .layer = 0,
       .element = 2,
diff --git a/client/src/ui.c b/client/src/ui.c
index c2a219a..6825daf 100644
--- a/client/src/ui.c
+++ b/client/src/ui.c
@@ -1283,7 +1283,7 @@ void set_active_element(uint32_t container, uint32_t layer, uint32_t element, UI
     return;
   }
   
-  for(uint32_t c = 0; c < container_ptr->callback_count; container_ptr++) {
+  for(uint32_t c = 0; c < container_ptr->callback_count; c++) {
     if(container_ptr->callbacks[c].element == element && container_ptr->callbacks[c].layer == layer) {
       ui->active_callbacks = &container_ptr->callbacks[c];
       break;