diff --git a/README.md b/README.md
index f2f2dc15ef..c8f0e47fab 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,3 @@
 # Fresh
 
-An experiment
-
-## Compile
-
-```
-git clone https://gitlab.com/veloren/fresh.git
-cd fresh
-git submodule update --init --recursive
-rustup default nightly
-cargo build
-```
+An experiment
\ No newline at end of file
diff --git a/common/src/net/test.rs b/common/src/net/test.rs
new file mode 100644
index 0000000000..97532fd5cd
--- /dev/null
+++ b/common/src/net/test.rs
@@ -0,0 +1,78 @@
+use std::{
+    io::Write,
+    str::FromStr,
+    net::SocketAddr,
+    thread,
+    time::Duration,
+};
+
+use mio::{net::TcpStream, Events, Poll, PollOpt, Ready, Token};
+
+use super::{error::PostError, PostBox, PostOffice};
+
+fn new_local_addr(n: u16) -> SocketAddr {
+    SocketAddr::from(([127, 0, 0, 1], 12345 + n))
+}
+
+#[test]
+fn basic_run() {
+    let srv_addr = new_local_addr(0);
+    let mut server: PostOffice<String, String> = PostOffice::new(srv_addr).unwrap();
+    let mut client: PostBox<String, String> = PostBox::to_server(srv_addr).unwrap();
+    std::thread::sleep(std::time::Duration::from_millis(10));
+    let mut scon = server.new_connections().next().unwrap();
+    std::thread::sleep(std::time::Duration::from_millis(10));
+    scon.send(String::from("foo")).unwrap();
+    client.send(String::from("bar")).unwrap();
+    std::thread::sleep(std::time::Duration::from_millis(10));
+    assert_eq!("foo", client.new_messages().next().unwrap());
+    assert_eq!("bar", scon.new_messages().next().unwrap());
+}
+
+#[test]
+fn huge_size_header() {
+    let srv_addr = new_local_addr(1);
+
+    let mut server: PostOffice<String, String> = PostOffice::new(srv_addr).unwrap();
+    let mut client = TcpStream::connect(&srv_addr).unwrap();
+    std::thread::sleep(std::time::Duration::from_millis(10));
+    let mut scon = server.new_connections().next().unwrap();
+    std::thread::sleep(std::time::Duration::from_millis(10));
+    client.write(&[0xffu8; 64]).unwrap();
+    std::thread::sleep(std::time::Duration::from_millis(10));
+    assert_eq!(scon.new_messages().next(), None);
+}
+
+#[test]
+fn disconnect() {
+    let srv_addr = new_local_addr(2);
+
+    let mut server = PostOffice::<_, String>::new(srv_addr)
+        .unwrap();
+
+    // Create then close client
+    {
+        PostBox::<String, String>::to_server(srv_addr).unwrap();
+    }
+
+    std::thread::sleep(std::time::Duration::from_millis(10));
+
+    let mut to_client = server
+        .new_connections()
+        .next()
+        .unwrap();
+
+    to_client.send(String::from("foo")).unwrap();
+
+    thread::sleep(Duration::from_millis(10));
+
+    match to_client.new_messages().next() {
+        None => {},
+        _ => panic!("Unexpected message!"),
+    }
+
+    match to_client.status() {
+        Some(PostError::Disconnected) => {},
+        s => panic!("Did not expect {:?}", s),
+    }
+}
diff --git a/voxygen/src/hud/chat.rs b/voxygen/src/hud/chat.rs
index b619595a36..a72dd655cd 100644
--- a/voxygen/src/hud/chat.rs
+++ b/voxygen/src/hud/chat.rs
@@ -73,7 +73,7 @@ impl Chat {
             .restrict_to_height(false)
             .font_size(14)
             .font_id(font)
-            .bottom_left_with_margins_on(ui_widgets.window, 10.0, 30.0);
+            .bottom_left_with_margins_on(ui_widgets.window, 10.0, 10.0);
         let dims = match (
             text_edit.get_x_dimension(ui_widgets),
             text_edit.get_y_dimension(ui_widgets),
diff --git a/voxygen/src/menu/char_selection/ui.rs b/voxygen/src/menu/char_selection/ui.rs
index 6a3b437eb7..ad162e449d 100644
--- a/voxygen/src/menu/char_selection/ui.rs
+++ b/voxygen/src/menu/char_selection/ui.rs
@@ -5,6 +5,7 @@ use crate::{
 };
 use conrod_core::{
     color,
+    color::TRANSPARENT,
     event::Input,
     image::Id as ImgId,
     text::font::Id as FontId,
@@ -122,10 +123,30 @@ widget_ids! {
         skin_color_slider_indicator,
         eye_color_slider_range,
         eye_color_slider_indicator,
-
-
-
-
+        hair_color_slider_text,
+        // Creation Hair Contents
+        hair_style_text,
+        hair_style_arrow_l,
+        hair_style_arrow_r,
+        hair_color_picker_bg,
+        hair_color_text,
+        hair_color_slider_range,
+        hair_color_slider_indicator,
+        eyebrow_style_text,
+        eyebrow_arrow_l,
+        eyebrow_arrow_r,
+        beard_style_text,
+        beard_arrow_l,
+        beard_arrow_r,
+        // Creation Accessories Contents
+        warpaint_text,
+        warpaint_arrow_l,
+        warpaint_arrow_r,
+        warpaint_color_picker_bg,
+        warpaint_color_text,
+        warpaint_slider_indicator,
+        warpaint_slider_range,
+        warpaint_slider_text,
 
     }
 }
@@ -540,19 +561,17 @@ impl CharSelectionUi {
             // Character Name Input
             Button::image(self.imgs.name_input)
                 .w_h(337.0, 67.0)
-                .label("Character Name")
-                .label_rgba(220.0, 220.0, 220.0, 0.8)
-                .label_font_size(20)
-                .label_y(conrod_core::position::Relative::Scalar(50.0))
                 .mid_bottom_with_margin_on(self.ids.bg_creation, 10.0)
                 .set(self.ids.name_input, ui_widgets);
             for event in TextBox::new(&self.character_name)
                 .w_h(300.0, 60.0)
-                .middle_of(self.ids.name_input)
-                .font_size(22)
+                .mid_top_with_margin_on(self.ids.name_input, 2.0)
+                .font_size(26)
                 .font_id(self.font_metamorph)
-                .rgba(220.0, 220.0, 220.0, 0.8)
                 .center_justify()
+                .text_color(Color::Rgba(220.0, 220.0, 220.0, 0.8))
+                .color(TRANSPARENT)
+                .border_color(TRANSPARENT)
                 .set(self.ids.name_field, ui_widgets)
             {
                 match event {
@@ -564,10 +583,14 @@ impl CharSelectionUi {
             }
 
             // Window(s)
-            Image::new(if let CreationState::Body(_) = self.creation_state {self.imgs.creation_window_body} else {self.imgs.creation_window})
-                .w_h(628.0, 814.0)
-                .top_left_with_margins_on(self.ids.bg_creation, 60.0, 30.0)
-                .set(self.ids.creation_window, ui_widgets);
+            Image::new(if let CreationState::Body(_) = self.creation_state {
+                self.imgs.creation_window_body
+            } else {
+                self.imgs.creation_window
+            })
+            .w_h(628.0, 814.0)
+            .top_left_with_margins_on(self.ids.bg_creation, 60.0, 30.0)
+            .set(self.ids.creation_window, ui_widgets);
 
             // Arrows
             // TODO: lower the resolution of the arrow images & use non decimal sizes below
@@ -830,22 +853,34 @@ impl CharSelectionUi {
 
                 // TODO: Load these from files (or from the server???)
                 const HUMAN_DESC: &str = "The former nomads were only recently \
-                                        able to gain a foothold in the world of Veloren. \
-                                        Their greatest strengths are their \
-                                        adaptability and intelligence, \
-                                        which makes them allrounders in many fields.";
-                const ORC_DESC: &str = "They are considered brutal, rude and combative. \
-                                        But once you got their trust they will be loyal friends \
-                                        following a strict code of honor in all of their actions. \
-                                        Their warriors are masters of melee combat, but their true power \
-                                        comes from the magical rituals of their powerful shamans.";
-                const DWARF_DESC: &str = "Smoking chimneys, the sound of countless hammers and hoes. \
-                                        Infinite tunnel systems to track down even the last chunk of metal \
-                                        in the ground. \
-                                        This race of master craftsmen and grim fighters exists almost \
-                                        as long as the world itself.";
+                                          able to gain a foothold in the world of Veloren. \
+                                          Their greatest strengths are their \
+                                          adaptability and intelligence, \
+                                          which makes them allrounders in many fields.";
+                const ORC_DESC: &str =
+                    "They are considered brutal, rude and combative. \
+                     But once you got their trust they will be loyal friends \
+                     following a strict code of honor in all of their actions. \
+                     Their warriors are masters of melee combat, but their true power \
+                     comes from the magical rituals of their powerful shamans.";
+                const DWARF_DESC: &str =
+                    "Smoking chimneys, the sound of countless hammers and hoes. \
+                     Infinite tunnel systems to track down even the last chunk of metal \
+                     in the ground. \
+                     This race of master craftsmen and grim fighters exists almost \
+                     as long as the world itself.";
                 const UNDEAD_DESC: &str = " MISSING ";
-                const ELF_DESC: &str = " MISSING ";
+                const ELF_DESC: &str =
+                    "No matter which shade of elves you encounter, they all have something in common: Magic. \n\
+                    They can be found in many Forms: \n\
+                    \n\
+                    Pale Elves, living in dark fortresses, executing bloody rituals. \n\
+                    \n\
+                    Nature connected Brushwood Elves, that guard ancient powers inside the forests.\n\
+                    \n\
+                    Gold Elves that hunger for political power in their massive city states. \n\
+                    \n\
+                    And many more!";
                 const DANARI_DESC: &str = " MISSING ";
 
                 let (race_str, race_desc) = match self.race {
@@ -1044,9 +1079,6 @@ impl CharSelectionUi {
                     .wrap_by_word()
                     .set(self.ids.race_description, ui_widgets);
                 // Races Descriptions
-
-
-
             }
             // 3 states/windows: 1.Skin & Eyes 2.Hair 3.Accessories
             // If one state is activated the other ones collapse
@@ -1065,226 +1097,227 @@ impl CharSelectionUi {
                     // Skin Eyes Open
                     BodyPart::SkinEyes => {
                         Image::new(self.imgs.skin_eyes_window)
-                        .w_h(511.0, 333.0)
-                        .mid_top_with_margin_on(self.ids.select_window_title, 60.0)
-                        .set(self.ids.skin_eyes_window, ui_widgets);
-                    // Open Window: Skin & Eyes
-                    if Button::image(self.imgs.frame_open_mo)
-                        .mid_top_with_margin_on(self.ids.skin_eyes_window, 0.0)
-                        .w_h(511.0, 37.0)
-                        //.hover_image(self.imgs.frame_open_mo)
-                        //.press_image(self.imgs.frame_open_press)
-                        .label("Skin & Eyes")
-                        .label_rgba(220.0, 220.0, 220.0, 0.8)
-                        .label_y(conrod_core::position::Relative::Scalar(4.0))
-                        .label_font_size(16)
-                        .set(self.ids.skin_eyes_button, ui_widgets)
-                        .was_clicked() {
+                            .w_h(511.0, 333.0)
+                            .mid_top_with_margin_on(self.ids.select_window_title, 60.0)
+                            .set(self.ids.skin_eyes_window, ui_widgets);
+                        // Open Window: Skin & Eyes
+                        if Button::image(self.imgs.frame_open_mo)
+                            .mid_top_with_margin_on(self.ids.skin_eyes_window, 0.0)
+                            .w_h(511.0, 37.0)
+                            //.hover_image(self.imgs.frame_open_mo)
+                            //.press_image(self.imgs.frame_open_press)
+                            .label("Skin & Eyes")
+                            .label_rgba(220.0, 220.0, 220.0, 0.8)
+                            .label_y(conrod_core::position::Relative::Scalar(4.0))
+                            .label_font_size(16)
+                            .set(self.ids.skin_eyes_button, ui_widgets)
+                            .was_clicked()
+                        {
                             self.creation_state = CreationState::Body(BodyPart::SkinEyes);
                         }
-                    // Closed: Hair
-                    if Button::image(self.imgs.frame_closed)
-                        .down_from(self.ids.skin_eyes_window, 5.0)
-                        .w_h(511.0, 31.0)
-                        .hover_image(self.imgs.frame_closed_mo)
-                        .press_image(self.imgs.frame_closed_press)
-                        .label("Hair")
-                        .label_rgba(220.0, 220.0, 220.0, 0.8)
-                        .label_font_size(16)
-                        .set(self.ids.hair_button, ui_widgets)
-                        .was_clicked() {
+                        // Closed: Hair
+                        if Button::image(self.imgs.frame_closed)
+                            .down_from(self.ids.skin_eyes_window, 5.0)
+                            .w_h(511.0, 31.0)
+                            .hover_image(self.imgs.frame_closed_mo)
+                            .press_image(self.imgs.frame_closed_press)
+                            .label("Hair")
+                            .label_rgba(220.0, 220.0, 220.0, 0.8)
+                            .label_font_size(16)
+                            .set(self.ids.hair_button, ui_widgets)
+                            .was_clicked()
+                        {
                             self.creation_state = CreationState::Body(BodyPart::Hair);
                         }
-                    // Closed: Accessories
-                    if Button::image(self.imgs.frame_closed)
-                        .down_from(self.ids.hair_button, 5.0)
-                        .w_h(511.0, 31.0)
-                        .hover_image(self.imgs.frame_closed_mo)
-                        .press_image(self.imgs.frame_closed_press)
-                        .label("Accessories")
-                        .label_rgba(220.0, 220.0, 220.0, 0.8)
-                        .label_font_size(16)
-                        .set(self.ids.accessories_button, ui_widgets)
-                        .was_clicked() {
+                        // Closed: Accessories
+                        if Button::image(self.imgs.frame_closed)
+                            .down_from(self.ids.hair_button, 5.0)
+                            .w_h(511.0, 31.0)
+                            .hover_image(self.imgs.frame_closed_mo)
+                            .press_image(self.imgs.frame_closed_press)
+                            .label("Accessories")
+                            .label_rgba(220.0, 220.0, 220.0, 0.8)
+                            .label_font_size(16)
+                            .set(self.ids.accessories_button, ui_widgets)
+                            .was_clicked()
+                        {
                             self.creation_state = CreationState::Body(BodyPart::Accessories);
                         }
-
                     } // State 1 fin
 
-                // Hair Open
+                    // Hair Open
                     BodyPart::Hair => {
                         Image::new(self.imgs.hair_window)
-                        .w_h(511.0, 500.0) //333.0
-                        .down_from(self.ids.skin_eyes_button, 5.0)
-                        .set(self.ids.hair_window, ui_widgets);
-                    // Closed Window: Skin & Eyes
-                    if Button::image(self.imgs.frame_closed)
-                        .mid_top_with_margin_on(self.ids.select_window_title, 60.0)
-                        .w_h(511.0, 31.0)
-                        .hover_image(self.imgs.frame_closed_mo)
-                        .press_image(self.imgs.frame_closed_press)
-                        .label("Skin & Eyes")
-                        .label_rgba(220.0, 220.0, 220.0, 0.8)
-                        .label_font_size(16)
-                        .set(self.ids.skin_eyes_button, ui_widgets)
-                        .was_clicked() {
+                            .w_h(511.0, 400.0) //333.0
+                            .down_from(self.ids.skin_eyes_button, 5.0)
+                            .set(self.ids.hair_window, ui_widgets);
+                        // Closed Window: Skin & Eyes
+                        if Button::image(self.imgs.frame_closed)
+                            .mid_top_with_margin_on(self.ids.select_window_title, 60.0)
+                            .w_h(511.0, 31.0)
+                            .hover_image(self.imgs.frame_closed_mo)
+                            .press_image(self.imgs.frame_closed_press)
+                            .label("Skin & Eyes")
+                            .label_rgba(220.0, 220.0, 220.0, 0.8)
+                            .label_font_size(16)
+                            .set(self.ids.skin_eyes_button, ui_widgets)
+                            .was_clicked()
+                        {
                             self.creation_state = CreationState::Body(BodyPart::SkinEyes);
                         }
-                    // Open Window: Hair
-                    if Button::image(self.imgs.frame_open_mo)
-                        .mid_top_with_margin_on(self.ids.hair_window, 0.0)
-                        .w_h(511.0, 37.0)
-                        //.hover_image(self.imgs.frame_closed_mo)
-                        //.press_image(self.imgs.frame_closed_press)
-                        .label("Hair")
-                        .label_rgba(220.0, 220.0, 220.0, 0.8)
-                        .label_y(conrod_core::position::Relative::Scalar(4.0))
-                        .label_font_size(16)
-                        .set(self.ids.hair_button, ui_widgets)
-                        .was_clicked() {
+                        // Open Window: Hair
+                        if Button::image(self.imgs.frame_open_mo)
+                            .mid_top_with_margin_on(self.ids.hair_window, 0.0)
+                            .w_h(511.0, 37.0)
+                            //.hover_image(self.imgs.frame_closed_mo)
+                            //.press_image(self.imgs.frame_closed_press)
+                            .label("Hair")
+                            .label_rgba(220.0, 220.0, 220.0, 0.8)
+                            .label_y(conrod_core::position::Relative::Scalar(4.0))
+                            .label_font_size(16)
+                            .set(self.ids.hair_button, ui_widgets)
+                            .was_clicked()
+                        {
                             self.creation_state = CreationState::Body(BodyPart::Hair);
                         }
-                    // Closed: Accessories
-                    if Button::image(self.imgs.frame_closed)
-                        .down_from(self.ids.hair_window, 5.0)
-                        .w_h(511.0, 31.0)
-                        .hover_image(self.imgs.frame_closed_mo)
-                        .press_image(self.imgs.frame_closed_press)
-                        .label("Accessories")
-                        .label_rgba(220.0, 220.0, 220.0, 0.8)
-                        .label_font_size(16)
-                        .set(self.ids.accessories_button, ui_widgets)
-                        .was_clicked() {
+                        // Closed: Accessories
+                        if Button::image(self.imgs.frame_closed)
+                            .down_from(self.ids.hair_window, 5.0)
+                            .w_h(511.0, 31.0)
+                            .hover_image(self.imgs.frame_closed_mo)
+                            .press_image(self.imgs.frame_closed_press)
+                            .label("Accessories")
+                            .label_rgba(220.0, 220.0, 220.0, 0.8)
+                            .label_font_size(16)
+                            .set(self.ids.accessories_button, ui_widgets)
+                            .was_clicked()
+                        {
                             self.creation_state = CreationState::Body(BodyPart::Accessories);
                         }
-
                     } // State 2 fin
 
                     // Open: Accessories
-                   BodyPart::Accessories => {
+                    BodyPart::Accessories => {
                         Image::new(self.imgs.hair_window)
-                        .w_h(511.0, 333.0)
-                        .down_from(self.ids.hair_button, 5.0)
-                        .set(self.ids.accessories_window, ui_widgets);
-                    // Closed Window: Skin & Eyes
-                    if Button::image(self.imgs.frame_closed)
-                        .mid_top_with_margin_on(self.ids.select_window_title, 60.0)
-                        .w_h(511.0, 31.0)
-                        .hover_image(self.imgs.frame_closed_mo)
-                        .press_image(self.imgs.frame_closed_press)
-                        .label("Skin & Eyes")
-                        .label_rgba(220.0, 220.0, 220.0, 0.8)
-                        .label_font_size(16)
-                        .set(self.ids.skin_eyes_button, ui_widgets)
-                        .was_clicked() {
+                            .w_h(511.0, 333.0)
+                            .down_from(self.ids.hair_button, 5.0)
+                            .set(self.ids.accessories_window, ui_widgets);
+                        // Closed Window: Skin & Eyes
+                        if Button::image(self.imgs.frame_closed)
+                            .mid_top_with_margin_on(self.ids.select_window_title, 60.0)
+                            .w_h(511.0, 31.0)
+                            .hover_image(self.imgs.frame_closed_mo)
+                            .press_image(self.imgs.frame_closed_press)
+                            .label("Skin & Eyes")
+                            .label_rgba(220.0, 220.0, 220.0, 0.8)
+                            .label_font_size(16)
+                            .set(self.ids.skin_eyes_button, ui_widgets)
+                            .was_clicked()
+                        {
                             self.creation_state = CreationState::Body(BodyPart::SkinEyes);
                         }
-                    // Closed: Hair
-                    if Button::image(self.imgs.frame_closed)
-                        .down_from(self.ids.skin_eyes_button, 5.0)
-                        .w_h(511.0, 31.0)
-                        .hover_image(self.imgs.frame_closed_mo)
-                        .press_image(self.imgs.frame_closed_press)
-                        .label("Hair")
-                        .label_rgba(220.0, 220.0, 220.0, 0.8)
-                        .label_font_size(16)
-                        .set(self.ids.hair_button, ui_widgets)
-                        .was_clicked() {
+                        // Closed: Hair
+                        if Button::image(self.imgs.frame_closed)
+                            .down_from(self.ids.skin_eyes_button, 5.0)
+                            .w_h(511.0, 31.0)
+                            .hover_image(self.imgs.frame_closed_mo)
+                            .press_image(self.imgs.frame_closed_press)
+                            .label("Hair")
+                            .label_rgba(220.0, 220.0, 220.0, 0.8)
+                            .label_font_size(16)
+                            .set(self.ids.hair_button, ui_widgets)
+                            .was_clicked()
+                        {
                             self.creation_state = CreationState::Body(BodyPart::Hair);
                         }
-                    // Open: Accessories
-                    if Button::image(self.imgs.frame_open_mo)
-                        .down_from(self.ids.hair_button, 5.0)
-                        .w_h(511.0, 37.0)
-                        //.hover_image(self.imgs.frame_closed_mo)
-                        //.press_image(self.imgs.frame_closed_press)
-                        .label("Accessories")
-                        .label_y(conrod_core::position::Relative::Scalar(4.0))
-                        .label_rgba(220.0, 220.0, 220.0, 0.8)
-                        .label_font_size(16)
-                        .set(self.ids.accessories_button, ui_widgets)
-                        .was_clicked() {
+                        // Open: Accessories
+                        if Button::image(self.imgs.frame_open_mo)
+                            .down_from(self.ids.hair_button, 5.0)
+                            .w_h(511.0, 37.0)
+                            //.hover_image(self.imgs.frame_closed_mo)
+                            //.press_image(self.imgs.frame_closed_press)
+                            .label("Accessories")
+                            .label_y(conrod_core::position::Relative::Scalar(4.0))
+                            .label_rgba(220.0, 220.0, 220.0, 0.8)
+                            .label_font_size(16)
+                            .set(self.ids.accessories_button, ui_widgets)
+                            .was_clicked()
+                        {
                             self.creation_state = CreationState::Body(BodyPart::Accessories);
                         }
-
-
-
                     } // State 3 fin
                 } // match fin
 
                 // Body Customization Window Contents ////////////////////////
                 match state {
-
                     BodyPart::SkinEyes => {
-                    // Skin Color: Text, Brightness Slider, Picker
-                    Text::new("Skin Color")
-                        .top_left_with_margins_on(self.ids.skin_rect, 0.0, -250.0)
-                        .font_size(25)
-                        .rgba(220.0, 220.0, 220.0, 0.8)
-                        .set(self.ids.skin_color_text, ui_widgets);
-                    // TODO: Align Buttons here
-                    // They set an i32 to a value from 0-14
-                    // Depending on the race another color will be chosen
-                    // Here only the BG image changes depending on the race.
-                    Rectangle::fill_with([192.0, 116.0], color::WHITE)
-                        .top_right_with_margins_on(self.ids.skin_eyes_window, 60.0, 30.0)
-                        .rgba(220.0, 220.0, 220.0, 0.8)
-                        .set(self.ids.skin_rect, ui_widgets);
+                        // Skin Color: Text, Brightness Slider, Picker
+                        Text::new("Skin Color")
+                            .top_left_with_margins_on(self.ids.skin_rect, 0.0, -250.0)
+                            .font_size(25)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .set(self.ids.skin_color_text, ui_widgets);
+                        // TODO: Align Buttons here
+                        // They set an i32 to a value from 0-14
+                        // Depending on the race another color will be chosen
+                        // Here only the BG image changes depending on the race.
+                        Rectangle::fill_with([192.0, 116.0], color::WHITE)
+                            .top_right_with_margins_on(self.ids.skin_eyes_window, 60.0, 30.0)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .set(self.ids.skin_rect, ui_widgets);
 
-                    // TODO:Slider
-                    // Sliders actually change the Alpha-Level of the main colour chosen above
-                    // -> They will appear "brighter", therefore the sliders are labeled "Brightness"
-                    Image::new(self.imgs.slider_range)
-                        .w_h(208.0, 12.0)
-                        .bottom_left_with_margins_on(self.ids.skin_rect, 10.0, -255.0)
-                        .set(self.ids.skin_color_slider_range, ui_widgets);
+                        // TODO:Slider
+                        // Sliders actually change the Alpha-Level of the main colour chosen above
+                        // -> They will appear "brighter", therefore the sliders are labeled "Brightness"
+                        Image::new(self.imgs.slider_range)
+                            .w_h(208.0, 12.0)
+                            .bottom_left_with_margins_on(self.ids.skin_rect, 10.0, -255.0)
+                            .set(self.ids.skin_color_slider_range, ui_widgets);
 
-                    Image::new(self.imgs.slider_indicator)
-                        .w_h(10.0, 22.0)
-                        .middle_of(self.ids.skin_color_slider_range)
-                        .set(self.ids.skin_color_slider_indicator, ui_widgets);
+                        Image::new(self.imgs.slider_indicator)
+                            .w_h(10.0, 22.0)
+                            .middle_of(self.ids.skin_color_slider_range)
+                            .set(self.ids.skin_color_slider_indicator, ui_widgets);
 
-                    Text::new("Brightness")
-                        .top_left_with_margins_on(self.ids.skin_color_slider_range, -27.0, 0.0)
-                        .rgba(220.0, 220.0, 220.0, 0.8)
-                        .font_size(14)
-                        .set(self.ids.skin_color_slider_text, ui_widgets);
+                        Text::new("Brightness")
+                            .top_left_with_margins_on(self.ids.skin_color_slider_range, -27.0, 0.0)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .font_size(14)
+                            .set(self.ids.skin_color_slider_text, ui_widgets);
 
+                        // Eye Color: Text, Brightness Slider, Picker
+                        Text::new("Eye Color")
+                            .top_left_with_margins_on(self.ids.eyes_rect, 0.0, -250.0)
+                            .font_size(25)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .set(self.ids.eye_color_text, ui_widgets);
+                        // TODO: Align 16 Buttons here
+                        //
+                        // They set a variable to a value from 0-14
+                        // Depending on the race another color will be chosen
+                        // Only the BG image (190x114 -> 2px border!) changes depending on the race.
+                        Rectangle::fill_with([192.0, 116.0], color::WHITE)
+                            .top_right_with_margins_on(self.ids.skin_eyes_window, 186.0, 30.0)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .set(self.ids.eyes_rect, ui_widgets);
 
-                    // Eye Color: Text, Brightness Slider, Picker
-                    Text::new("Eye Color")
-                        .top_left_with_margins_on(self.ids.eyes_rect, 0.0, -250.0)
-                        .font_size(25)
-                        .rgba(220.0, 220.0, 220.0, 0.8)
-                        .set(self.ids.eye_color_text, ui_widgets);
-                    // TODO: Align 16 Buttons here
-                    //
-                    // They set a variable to a value from 0-14
-                    // Depending on the race another color will be chosen
-                    // Only the BG image (190x114 -> 2px border!) changes depending on the race.
-                    Rectangle::fill_with([192.0, 116.0], color::WHITE)
-                    .top_right_with_margins_on(self.ids.skin_eyes_window, 186.0, 30.0)
-                    .rgba(220.0, 220.0, 220.0, 0.8)
-                    .set(self.ids.eyes_rect, ui_widgets);
+                        // TODO:Slider
 
-                    // TODO:Slider
+                        Image::new(self.imgs.slider_range)
+                            .w_h(208.0, 12.0)
+                            .bottom_left_with_margins_on(self.ids.eyes_rect, 10.0, -255.0)
+                            .set(self.ids.eye_color_slider_range, ui_widgets);
 
-                    Image::new(self.imgs.slider_range)
-                        .w_h(208.0, 12.0)
-                        .bottom_left_with_margins_on(self.ids.eyes_rect, 10.0, -255.0)
-                        .set(self.ids.eye_color_slider_range, ui_widgets);
-
-                    Image::new(self.imgs.slider_indicator)
-                        .w_h(10.0, 22.0)
-                        .middle_of(self.ids.eye_color_slider_range)
-                        .set(self.ids.eye_color_slider_indicator, ui_widgets);
-
-                    Text::new("Brightness")
-                        .top_left_with_margins_on(self.ids.eye_color_slider_range, -27.0, 0.0)
-                        .rgba(220.0, 220.0, 220.0, 0.8)
-                        .font_size(14)
-                        .set(self.ids.eye_color_slider_text, ui_widgets);
+                        Image::new(self.imgs.slider_indicator)
+                            .w_h(10.0, 22.0)
+                            .middle_of(self.ids.eye_color_slider_range)
+                            .set(self.ids.eye_color_slider_indicator, ui_widgets);
 
+                        Text::new("Brightness")
+                            .top_left_with_margins_on(self.ids.eye_color_slider_range, -27.0, 0.0)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .font_size(14)
+                            .set(self.ids.eye_color_slider_text, ui_widgets);
                     }
 
                     // Hair ///////////////////////////////////////////////////////
@@ -1293,17 +1326,514 @@ impl CharSelectionUi {
                     // Hair Color -> Picker
                     // Eye Brow Style -> Arrow
                     // Facial Hair -> Picker (Only active for males!)
-                    BodyPart::Hair => {}
+                    BodyPart::Hair => {
+                        // Hair
+                        Text::new("Hair Style")
+                            .mid_top_with_margin_on(self.ids.hair_window, 60.0)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .font_size(24)
+                            .set(self.ids.hair_style_text, ui_widgets);
+                        if Button::image(self.imgs.arrow_right)
+                            .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                            .hover_image(self.imgs.arrow_right_mo)
+                            .press_image(self.imgs.arrow_right_press)
+                            .right_from(self.ids.hair_style_text, 15.0)
+                            .set(self.ids.hair_style_arrow_r, ui_widgets)
+                            .was_clicked()
+                        {};
+                        if Button::image(self.imgs.arrow_left)
+                            .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                            .hover_image(self.imgs.arrow_left_mo)
+                            .press_image(self.imgs.arrow_left_press)
+                            .left_from(self.ids.hair_style_text, 15.0)
+                            .set(self.ids.hair_style_arrow_l, ui_widgets)
+                            .was_clicked()
+                        {};
+
+                        Text::new("Hair Color")
+                            .top_left_with_margins_on(self.ids.hair_color_picker_bg, 0.0, -250.0)
+                            .font_size(25)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .set(self.ids.hair_color_text, ui_widgets);
+
+                        Rectangle::fill_with([192.0, 116.0], color::WHITE)
+                            .top_right_with_margins_on(self.ids.hair_window, 114.0, 30.0)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .set(self.ids.hair_color_picker_bg, ui_widgets);
+
+                        Image::new(self.imgs.slider_range)
+                            .w_h(208.0, 12.0)
+                            .bottom_left_with_margins_on(
+                                self.ids.hair_color_picker_bg,
+                                10.0,
+                                -255.0,
+                            )
+                            .set(self.ids.hair_color_slider_range, ui_widgets);
+
+                        Image::new(self.imgs.slider_indicator)
+                            .w_h(10.0, 22.0)
+                            .middle_of(self.ids.hair_color_slider_range)
+                            .set(self.ids.hair_color_slider_indicator, ui_widgets);
+
+                        Text::new("Brightness")
+                            .top_left_with_margins_on(self.ids.hair_color_slider_range, -27.0, 0.0)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .font_size(14)
+                            .set(self.ids.hair_color_slider_text, ui_widgets);
+                        // Eyebrows
+                        Text::new("Eyebrow Style")
+                            .mid_top_with_margin_on(self.ids.hair_window, 280.0)
+                            .rgba(220.0, 220.0, 220.0, 0.8)
+                            .font_size(24)
+                            .set(self.ids.eyebrow_style_text, ui_widgets);
+                        if Button::image(self.imgs.arrow_right)
+                            .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                            .hover_image(self.imgs.arrow_right_mo)
+                            .press_image(self.imgs.arrow_right_press)
+                            .right_from(self.ids.eyebrow_style_text, 15.0)
+                            .set(self.ids.eyebrow_arrow_r, ui_widgets)
+                            .was_clicked()
+                        {};
+                        if Button::image(self.imgs.arrow_left)
+                            .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                            .hover_image(self.imgs.arrow_left_mo)
+                            .press_image(self.imgs.arrow_left_press)
+                            .left_from(self.ids.eyebrow_style_text, 15.0)
+                            .set(self.ids.eyebrow_arrow_l, ui_widgets)
+                            .was_clicked()
+                        {};
+                        // Beard -> Only active when "male" was chosen
+                        if let Sex::Male = self.sex {
+                            Text::new("Beard Style")
+                                .mid_top_with_margin_on(self.ids.hair_window, 340.0)
+                                .rgba(220.0, 220.0, 220.0, 0.8)
+                                .font_size(24)
+                                .set(self.ids.beard_style_text, ui_widgets);
+                            if Button::image(self.imgs.arrow_right)
+                                .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                .hover_image(self.imgs.arrow_right_mo)
+                                .press_image(self.imgs.arrow_right_press)
+                                .right_from(self.ids.beard_style_text, 15.0)
+                                .set(self.ids.beard_arrow_r, ui_widgets)
+                                .was_clicked()
+                            {};
+                            if Button::image(self.imgs.arrow_left)
+                                .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                .hover_image(self.imgs.arrow_left_mo)
+                                .press_image(self.imgs.arrow_left_press)
+                                .left_from(self.ids.beard_style_text, 15.0)
+                                .set(self.ids.beard_arrow_l, ui_widgets)
+                                .was_clicked()
+                            {};
+                        }
+                    }
 
                     // Accessories ///////////////////////////////
 
                     // Accessory Picker -> Arrows (Name Changes with race!)
                     // Color -> Picker
                     // Brightness -> Slider
-                    BodyPart::Accessories => {}
-                    // Accessories fin
+                    BodyPart::Accessories => {
+                        match self.race {
+                            Races::Human => {
+                                Text::new("Head Band")
+                                    .mid_top_with_margin_on(self.ids.accessories_window, 60.0)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(24)
+                                    .set(self.ids.warpaint_text, ui_widgets);
+                                if Button::image(self.imgs.arrow_right)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_right_mo)
+                                    .press_image(self.imgs.arrow_right_press)
+                                    .right_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_r, ui_widgets)
+                                    .was_clicked()
+                                {};
+                                if Button::image(self.imgs.arrow_left)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_left_mo)
+                                    .press_image(self.imgs.arrow_left_press)
+                                    .left_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_l, ui_widgets)
+                                    .was_clicked()
+                                {};
 
-                }; // Body Customization Fin
+                                Text::new("Color")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        0.0,
+                                        -250.0,
+                                    )
+                                    .font_size(25)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_text, ui_widgets);
+
+                                Rectangle::fill_with([192.0, 116.0], color::WHITE)
+                                    .top_right_with_margins_on(
+                                        self.ids.accessories_window,
+                                        114.0,
+                                        30.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_picker_bg, ui_widgets);
+
+                                Image::new(self.imgs.slider_range)
+                                    .w_h(208.0, 12.0)
+                                    .bottom_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        10.0,
+                                        -255.0,
+                                    )
+                                    .set(self.ids.warpaint_slider_range, ui_widgets);
+
+                                Image::new(self.imgs.slider_indicator)
+                                    .w_h(10.0, 22.0)
+                                    .middle_of(self.ids.warpaint_slider_range)
+                                    .set(self.ids.warpaint_slider_indicator, ui_widgets);
+
+                                Text::new("Brightness")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_slider_range,
+                                        -27.0,
+                                        0.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(14)
+                                    .set(self.ids.warpaint_slider_text, ui_widgets);
+                            } // Human
+                            Races::Orc => {
+                                Text::new("Head Band")
+                                    .mid_top_with_margin_on(self.ids.accessories_window, 60.0)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(24)
+                                    .set(self.ids.warpaint_text, ui_widgets);
+                                if Button::image(self.imgs.arrow_right)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_right_mo)
+                                    .press_image(self.imgs.arrow_right_press)
+                                    .right_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_r, ui_widgets)
+                                    .was_clicked()
+                                {};
+                                if Button::image(self.imgs.arrow_left)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_left_mo)
+                                    .press_image(self.imgs.arrow_left_press)
+                                    .left_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_l, ui_widgets)
+                                    .was_clicked()
+                                {};
+
+                                Text::new("Color")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        0.0,
+                                        -250.0,
+                                    )
+                                    .font_size(25)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_text, ui_widgets);
+
+                                Rectangle::fill_with([192.0, 116.0], color::WHITE)
+                                    .top_right_with_margins_on(
+                                        self.ids.accessories_window,
+                                        114.0,
+                                        30.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_picker_bg, ui_widgets);
+
+                                Image::new(self.imgs.slider_range)
+                                    .w_h(208.0, 12.0)
+                                    .bottom_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        10.0,
+                                        -255.0,
+                                    )
+                                    .set(self.ids.warpaint_slider_range, ui_widgets);
+
+                                Image::new(self.imgs.slider_indicator)
+                                    .w_h(10.0, 22.0)
+                                    .middle_of(self.ids.warpaint_slider_range)
+                                    .set(self.ids.warpaint_slider_indicator, ui_widgets);
+
+                                Text::new("Brightness")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_slider_range,
+                                        -27.0,
+                                        0.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(14)
+                                    .set(self.ids.warpaint_slider_text, ui_widgets);
+                            } // Orc
+                            Races::Elf => {
+                                Text::new("Tribe Markings")
+                                    .mid_top_with_margin_on(self.ids.accessories_window, 60.0)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(24)
+                                    .set(self.ids.warpaint_text, ui_widgets);
+                                if Button::image(self.imgs.arrow_right)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_right_mo)
+                                    .press_image(self.imgs.arrow_right_press)
+                                    .right_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_r, ui_widgets)
+                                    .was_clicked()
+                                {};
+                                if Button::image(self.imgs.arrow_left)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_left_mo)
+                                    .press_image(self.imgs.arrow_left_press)
+                                    .left_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_l, ui_widgets)
+                                    .was_clicked()
+                                {};
+
+                                Text::new("Color")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        0.0,
+                                        -250.0,
+                                    )
+                                    .font_size(25)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_text, ui_widgets);
+
+                                Rectangle::fill_with([192.0, 116.0], color::WHITE)
+                                    .top_right_with_margins_on(
+                                        self.ids.accessories_window,
+                                        114.0,
+                                        30.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_picker_bg, ui_widgets);
+
+                                Image::new(self.imgs.slider_range)
+                                    .w_h(208.0, 12.0)
+                                    .bottom_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        10.0,
+                                        -255.0,
+                                    )
+                                    .set(self.ids.warpaint_slider_range, ui_widgets);
+
+                                Image::new(self.imgs.slider_indicator)
+                                    .w_h(10.0, 22.0)
+                                    .middle_of(self.ids.warpaint_slider_range)
+                                    .set(self.ids.warpaint_slider_indicator, ui_widgets);
+
+                                Text::new("Brightness")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_slider_range,
+                                        -27.0,
+                                        0.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(14)
+                                    .set(self.ids.warpaint_slider_text, ui_widgets);
+                            } // Elf
+                            Races::Dwarf => {
+                                Text::new("War Paint")
+                                    .mid_top_with_margin_on(self.ids.accessories_window, 60.0)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(24)
+                                    .set(self.ids.warpaint_text, ui_widgets);
+                                if Button::image(self.imgs.arrow_right)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_right_mo)
+                                    .press_image(self.imgs.arrow_right_press)
+                                    .right_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_r, ui_widgets)
+                                    .was_clicked()
+                                {};
+                                if Button::image(self.imgs.arrow_left)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_left_mo)
+                                    .press_image(self.imgs.arrow_left_press)
+                                    .left_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_l, ui_widgets)
+                                    .was_clicked()
+                                {};
+
+                                Text::new("Color")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        0.0,
+                                        -250.0,
+                                    )
+                                    .font_size(25)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_text, ui_widgets);
+
+                                Rectangle::fill_with([192.0, 116.0], color::WHITE)
+                                    .top_right_with_margins_on(
+                                        self.ids.accessories_window,
+                                        114.0,
+                                        30.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_picker_bg, ui_widgets);
+
+                                Image::new(self.imgs.slider_range)
+                                    .w_h(208.0, 12.0)
+                                    .bottom_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        10.0,
+                                        -255.0,
+                                    )
+                                    .set(self.ids.warpaint_slider_range, ui_widgets);
+
+                                Image::new(self.imgs.slider_indicator)
+                                    .w_h(10.0, 22.0)
+                                    .middle_of(self.ids.warpaint_slider_range)
+                                    .set(self.ids.warpaint_slider_indicator, ui_widgets);
+
+                                Text::new("Brightness")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_slider_range,
+                                        -27.0,
+                                        0.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(14)
+                                    .set(self.ids.warpaint_slider_text, ui_widgets);
+                            } // Dwarf
+                            Races::Undead => {
+                                Text::new("Teeth")
+                                    .mid_top_with_margin_on(self.ids.accessories_window, 60.0)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(24)
+                                    .set(self.ids.warpaint_text, ui_widgets);
+                                if Button::image(self.imgs.arrow_right)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_right_mo)
+                                    .press_image(self.imgs.arrow_right_press)
+                                    .right_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_r, ui_widgets)
+                                    .was_clicked()
+                                {};
+                                if Button::image(self.imgs.arrow_left)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_left_mo)
+                                    .press_image(self.imgs.arrow_left_press)
+                                    .left_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_l, ui_widgets)
+                                    .was_clicked()
+                                {};
+
+                                Text::new("Color")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        0.0,
+                                        -250.0,
+                                    )
+                                    .font_size(25)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_text, ui_widgets);
+
+                                Rectangle::fill_with([192.0, 116.0], color::WHITE)
+                                    .top_right_with_margins_on(
+                                        self.ids.accessories_window,
+                                        114.0,
+                                        30.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_picker_bg, ui_widgets);
+
+                                Image::new(self.imgs.slider_range)
+                                    .w_h(208.0, 12.0)
+                                    .bottom_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        10.0,
+                                        -255.0,
+                                    )
+                                    .set(self.ids.warpaint_slider_range, ui_widgets);
+
+                                Image::new(self.imgs.slider_indicator)
+                                    .w_h(10.0, 22.0)
+                                    .middle_of(self.ids.warpaint_slider_range)
+                                    .set(self.ids.warpaint_slider_indicator, ui_widgets);
+
+                                Text::new("Brightness")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_slider_range,
+                                        -27.0,
+                                        0.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(14)
+                                    .set(self.ids.warpaint_slider_text, ui_widgets);
+                            } // Undead
+                            Races::Danari => {
+                                Text::new("Horns")
+                                    .mid_top_with_margin_on(self.ids.accessories_window, 60.0)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(24)
+                                    .set(self.ids.warpaint_text, ui_widgets);
+                                if Button::image(self.imgs.arrow_right)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_right_mo)
+                                    .press_image(self.imgs.arrow_right_press)
+                                    .right_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_r, ui_widgets)
+                                    .was_clicked()
+                                {};
+                                if Button::image(self.imgs.arrow_left)
+                                    .w_h(986.0 * 0.02, 1024.0 * 0.02)
+                                    .hover_image(self.imgs.arrow_left_mo)
+                                    .press_image(self.imgs.arrow_left_press)
+                                    .left_from(self.ids.warpaint_text, 15.0)
+                                    .set(self.ids.warpaint_arrow_l, ui_widgets)
+                                    .was_clicked()
+                                {};
+
+                                Text::new("Color")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        0.0,
+                                        -250.0,
+                                    )
+                                    .font_size(25)
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_text, ui_widgets);
+
+                                Rectangle::fill_with([192.0, 116.0], color::WHITE)
+                                    .top_right_with_margins_on(
+                                        self.ids.accessories_window,
+                                        114.0,
+                                        30.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .set(self.ids.warpaint_color_picker_bg, ui_widgets);
+
+                                Image::new(self.imgs.slider_range)
+                                    .w_h(208.0, 12.0)
+                                    .bottom_left_with_margins_on(
+                                        self.ids.warpaint_color_picker_bg,
+                                        10.0,
+                                        -255.0,
+                                    )
+                                    .set(self.ids.warpaint_slider_range, ui_widgets);
+
+                                Image::new(self.imgs.slider_indicator)
+                                    .w_h(10.0, 22.0)
+                                    .middle_of(self.ids.warpaint_slider_range)
+                                    .set(self.ids.warpaint_slider_indicator, ui_widgets);
+
+                                Text::new("Brightness")
+                                    .top_left_with_margins_on(
+                                        self.ids.warpaint_slider_range,
+                                        -27.0,
+                                        0.0,
+                                    )
+                                    .rgba(220.0, 220.0, 220.0, 0.8)
+                                    .font_size(14)
+                                    .set(self.ids.warpaint_slider_text, ui_widgets);
+                            } // Danari
+                        } // match Race fin
+                    } // Accessories fin
+                } // Body Customization Fin
             } // CreationState::Body Fin
         } // Char Creation fin
 
diff --git a/voxygen/test_assets/font/Whitney-Book.ttf b/voxygen/test_assets/font/Whitney-Book.ttf
new file mode 100644
index 0000000000..2e31d02424
Binary files /dev/null and b/voxygen/test_assets/font/Whitney-Book.ttf differ
diff --git a/voxygen/test_assets/ui/char_selection/buttons/desktop.ini b/voxygen/test_assets/ui/char_selection/buttons/desktop.ini
new file mode 100644
index 0000000000..13cc08a225
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/buttons/desktop.ini
@@ -0,0 +1,5 @@
+[.ShellClassInfo]
+InfoTip=Dieser Ordner wird online freigegeben.
+IconFile=C:\Program Files\Google\Drive\googledrivesync.exe
+IconIndex=16
+    
\ No newline at end of file
diff --git a/voxygen/test_assets/ui/char_selection/gender_bg.png b/voxygen/test_assets/ui/char_selection/gender_bg.png
new file mode 100644
index 0000000000..54b3b345e2
Binary files /dev/null and b/voxygen/test_assets/ui/char_selection/gender_bg.png differ
diff --git a/voxygen/test_assets/ui/char_selection/races_bg.png b/voxygen/test_assets/ui/char_selection/races_bg.png
new file mode 100644
index 0000000000..768f8b0513
Binary files /dev/null and b/voxygen/test_assets/ui/char_selection/races_bg.png differ
diff --git a/voxygen/test_assets/ui/char_selection/text/.gitattributes b/voxygen/test_assets/ui/char_selection/text/.gitattributes
new file mode 100644
index 0000000000..c091529f36
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/.gitattributes
@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text
\ No newline at end of file
diff --git a/voxygen/test_assets/ui/char_selection/text/White/.gitattributes b/voxygen/test_assets/ui/char_selection/text/White/.gitattributes
new file mode 100644
index 0000000000..c091529f36
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/White/.gitattributes
@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text
\ No newline at end of file
diff --git a/voxygen/test_assets/ui/char_selection/text/White/login.png b/voxygen/test_assets/ui/char_selection/text/White/login.png
new file mode 100644
index 0000000000..e55f36f3d8
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/White/login.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e61d22bc7438a567ad0a8fd45a29eabd755ad2d7872ff61712211a725645193e
+size 2077
diff --git a/voxygen/test_assets/ui/char_selection/text/White/quit.png b/voxygen/test_assets/ui/char_selection/text/White/quit.png
new file mode 100644
index 0000000000..44d7b6180f
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/White/quit.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1295ab1f34b160e0b8d71b5b8fa03ca4ec3359335dfaea7a24174f96cfbefe20
+size 1550
diff --git a/voxygen/test_assets/ui/char_selection/text/White/server_address.png b/voxygen/test_assets/ui/char_selection/text/White/server_address.png
new file mode 100644
index 0000000000..b9324b78fe
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/White/server_address.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a0a9b9d0a287d5b67c175bc28ee7af427d5c9f01d421c1fafc04440b442f1232
+size 5669
diff --git a/voxygen/test_assets/ui/char_selection/text/White/servers.png b/voxygen/test_assets/ui/char_selection/text/White/servers.png
new file mode 100644
index 0000000000..8c8e64b38c
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/White/servers.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d8e9830be2e54339b547b84b17103b8b3b3f2c59f1b4bd8c9f4a0176c9eac9b1
+size 2317
diff --git a/voxygen/test_assets/ui/char_selection/text/White/settings.png b/voxygen/test_assets/ui/char_selection/text/White/settings.png
new file mode 100644
index 0000000000..d39d8910af
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/White/settings.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e12d7360bf4dc584272f531b53dd96e59c17b0a5acba9d8b6b7d7d30a6e5148
+size 2748
diff --git a/voxygen/test_assets/ui/char_selection/text/White/username.png b/voxygen/test_assets/ui/char_selection/text/White/username.png
new file mode 100644
index 0000000000..4748fc697e
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/White/username.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c641b645857e746ee511d6f633c05f78a3c89eb0484d8ffa905fbed8764921cb
+size 4101
diff --git a/voxygen/test_assets/ui/char_selection/text/Yellow/.gitattributes b/voxygen/test_assets/ui/char_selection/text/Yellow/.gitattributes
new file mode 100644
index 0000000000..c091529f36
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/Yellow/.gitattributes
@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text
\ No newline at end of file
diff --git a/voxygen/test_assets/ui/char_selection/text/Yellow/a01.png b/voxygen/test_assets/ui/char_selection/text/Yellow/a01.png
new file mode 100644
index 0000000000..21ab7e873b
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/Yellow/a01.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f8088394d2e5acab7914e2ee692a2df674614ecbb0eec229548da4a94a181e15
+size 1075
diff --git a/voxygen/test_assets/ui/char_selection/text/Yellow/login.png b/voxygen/test_assets/ui/char_selection/text/Yellow/login.png
new file mode 100644
index 0000000000..b1249cf8ae
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/Yellow/login.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:006818467f94c2b380099866111ff25da53ea555ea26f0b0ef5ec4e59db7a3a9
+size 2088
diff --git a/voxygen/test_assets/ui/char_selection/text/Yellow/quit.png b/voxygen/test_assets/ui/char_selection/text/Yellow/quit.png
new file mode 100644
index 0000000000..46b5588028
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/Yellow/quit.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0678e620f0c7ef00671995bbfb95b03349d46a66fe38f5c5d1b8ac42e6daed9a
+size 1540
diff --git a/voxygen/test_assets/ui/char_selection/text/Yellow/server_address.png b/voxygen/test_assets/ui/char_selection/text/Yellow/server_address.png
new file mode 100644
index 0000000000..34c3ce7f35
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/Yellow/server_address.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fba8a3329e257ea3a763d20f3e279dd7abab62e55c2ccd2df947228916b8533a
+size 4828
diff --git a/voxygen/test_assets/ui/char_selection/text/Yellow/servers.png b/voxygen/test_assets/ui/char_selection/text/Yellow/servers.png
new file mode 100644
index 0000000000..faea8721e8
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/Yellow/servers.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9a36a22e175811f428a08eae13dbbb386bd640761074ede7ae853852dfa127f0
+size 2286
diff --git a/voxygen/test_assets/ui/char_selection/text/Yellow/settings.png b/voxygen/test_assets/ui/char_selection/text/Yellow/settings.png
new file mode 100644
index 0000000000..7f6477a4a0
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/Yellow/settings.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:032d9bc74f540a736f8ab325d8e7cd261f1df7b4bd469baeb7d87238ec356c3c
+size 2646
diff --git a/voxygen/test_assets/ui/char_selection/text/Yellow/username.png b/voxygen/test_assets/ui/char_selection/text/Yellow/username.png
new file mode 100644
index 0000000000..f7c2387ce8
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/Yellow/username.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b616ce11ee9c8700b82f631c769b738273a7191973804d834028f53206078981
+size 3429
diff --git a/voxygen/test_assets/ui/char_selection/text/a01.png b/voxygen/test_assets/ui/char_selection/text/a01.png
new file mode 100644
index 0000000000..ac671c5f28
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/a01.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e128b6fb6f18a7b963ee24823bae6d412966fbff8ede2b7525914dabfff383a
+size 3745
diff --git a/voxygen/test_assets/ui/char_selection/text/login.png b/voxygen/test_assets/ui/char_selection/text/login.png
new file mode 100644
index 0000000000..e55f36f3d8
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/login.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e61d22bc7438a567ad0a8fd45a29eabd755ad2d7872ff61712211a725645193e
+size 2077
diff --git a/voxygen/test_assets/ui/char_selection/text/quit.png b/voxygen/test_assets/ui/char_selection/text/quit.png
new file mode 100644
index 0000000000..44d7b6180f
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/quit.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1295ab1f34b160e0b8d71b5b8fa03ca4ec3359335dfaea7a24174f96cfbefe20
+size 1550
diff --git a/voxygen/test_assets/ui/char_selection/text/server_address.png b/voxygen/test_assets/ui/char_selection/text/server_address.png
new file mode 100644
index 0000000000..b9324b78fe
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/server_address.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a0a9b9d0a287d5b67c175bc28ee7af427d5c9f01d421c1fafc04440b442f1232
+size 5669
diff --git a/voxygen/test_assets/ui/char_selection/text/servers.png b/voxygen/test_assets/ui/char_selection/text/servers.png
new file mode 100644
index 0000000000..8c8e64b38c
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/servers.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d8e9830be2e54339b547b84b17103b8b3b3f2c59f1b4bd8c9f4a0176c9eac9b1
+size 2317
diff --git a/voxygen/test_assets/ui/char_selection/text/settings.png b/voxygen/test_assets/ui/char_selection/text/settings.png
new file mode 100644
index 0000000000..d39d8910af
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/settings.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e12d7360bf4dc584272f531b53dd96e59c17b0a5acba9d8b6b7d7d30a6e5148
+size 2748
diff --git a/voxygen/test_assets/ui/char_selection/text/singleplayer.png b/voxygen/test_assets/ui/char_selection/text/singleplayer.png
new file mode 100644
index 0000000000..00882ad555
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/singleplayer.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7b965c627162cc2e08a6eb909314849c1b9a266bd84d0e9dd280c1a5196d6db4
+size 4153
diff --git a/voxygen/test_assets/ui/char_selection/text/username.png b/voxygen/test_assets/ui/char_selection/text/username.png
new file mode 100644
index 0000000000..4748fc697e
--- /dev/null
+++ b/voxygen/test_assets/ui/char_selection/text/username.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c641b645857e746ee511d6f633c05f78a3c89eb0484d8ffa905fbed8764921cb
+size 4101
diff --git a/voxygen/test_assets/ui/char_selection/weapons_bg.png b/voxygen/test_assets/ui/char_selection/weapons_bg.png
new file mode 100644
index 0000000000..363704ab37
Binary files /dev/null and b/voxygen/test_assets/ui/char_selection/weapons_bg.png differ
diff --git a/voxygen/test_assets/ui/hud/buttons/.gitattributes b/voxygen/test_assets/ui/hud/buttons/.gitattributes
new file mode 100644
index 0000000000..c091529f36
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/.gitattributes
@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text
\ No newline at end of file
diff --git a/voxygen/test_assets/ui/hud/buttons/chat_arrow_down.png b/voxygen/test_assets/ui/hud/buttons/chat_arrow_down.png
new file mode 100644
index 0000000000..a69c335f28
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/chat_arrow_down.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0006d6044628e73e3b787c7d8a892fdd471d95835956da3ef7d0e5b9893528de
+size 948
diff --git a/voxygen/test_assets/ui/hud/buttons/chat_arrow_down_mo.png b/voxygen/test_assets/ui/hud/buttons/chat_arrow_down_mo.png
new file mode 100644
index 0000000000..0da27b4228
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/chat_arrow_down_mo.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8246d56c1a8fe6a9b050ad9886114f172eaf6248cf5e28ce6d28c8ceaedde10e
+size 976
diff --git a/voxygen/test_assets/ui/hud/buttons/chat_arrow_down_press.png b/voxygen/test_assets/ui/hud/buttons/chat_arrow_down_press.png
new file mode 100644
index 0000000000..f58930ea1a
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/chat_arrow_down_press.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:39cab7712ca3183497177367fb4ae0006f33910207e5c20581ee5c06d6df685a
+size 873
diff --git a/voxygen/test_assets/ui/hud/buttons/chat_arrow_tobot.png b/voxygen/test_assets/ui/hud/buttons/chat_arrow_tobot.png
new file mode 100644
index 0000000000..8b9967f2d3
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/chat_arrow_tobot.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb144d5bd53590784229c0240d1f3a0e7c8119a48382a167a7e75bcdc7b08e31
+size 983
diff --git a/voxygen/test_assets/ui/hud/buttons/chat_arrow_tobot_mo.png b/voxygen/test_assets/ui/hud/buttons/chat_arrow_tobot_mo.png
new file mode 100644
index 0000000000..4d72a5817c
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/chat_arrow_tobot_mo.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e960558d3a883fb8e27ed5525a98688678a21047535b406efd63f76017535fa2
+size 1014
diff --git a/voxygen/test_assets/ui/hud/buttons/chat_arrow_tobot_press.png b/voxygen/test_assets/ui/hud/buttons/chat_arrow_tobot_press.png
new file mode 100644
index 0000000000..f4c18c0eb5
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/chat_arrow_tobot_press.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8618b2d99337dfca5dd4a18e76f03812c030505dd7e07a7f120f6ccacedca0f9
+size 948
diff --git a/voxygen/test_assets/ui/hud/buttons/chat_arrow_up.png b/voxygen/test_assets/ui/hud/buttons/chat_arrow_up.png
new file mode 100644
index 0000000000..ff2cfd8175
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/chat_arrow_up.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:38abe9f23ec1f27ecb1240a34a0122a67a56129def5d864da5dbaa064d896d99
+size 944
diff --git a/voxygen/test_assets/ui/hud/buttons/chat_arrow_up_mo.png b/voxygen/test_assets/ui/hud/buttons/chat_arrow_up_mo.png
new file mode 100644
index 0000000000..b2ea8f28b9
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/chat_arrow_up_mo.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:51a471204156c6832097340fa8b86c29117cf5fcab659d5123976585eb9dcb8d
+size 990
diff --git a/voxygen/test_assets/ui/hud/buttons/chat_arrow_up_press.png b/voxygen/test_assets/ui/hud/buttons/chat_arrow_up_press.png
new file mode 100644
index 0000000000..9f4b67e7b2
--- /dev/null
+++ b/voxygen/test_assets/ui/hud/buttons/chat_arrow_up_press.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d0b326f51011f8f9382217dbd5f2b75f09feacbe133f997a38154dc1b13b8bcf
+size 824