diff --git a/werewolves/index.scss b/werewolves/index.scss
index b06957f..d9bd0c2 100644
--- a/werewolves/index.scss
+++ b/werewolves/index.scss
@@ -615,7 +615,6 @@ clients {
 
 .role-reveal-cards {
 	list-style: none;
-	// max-width: 80vw;
 
 	font-family: 'Cute Font';
 	display: flex;
@@ -623,20 +622,20 @@ clients {
 	flex-direction: row;
 	justify-content: space-evenly;
 	color: black;
-	// align-content: stretch;
-	// flex: 1 1 0px;
+	align-items: center;
 
 	gap: 10px;
 }
 
 .role-reveal-card {
+	justify-content: center;
 	min-width: 5cm;
 	display: flex;
 	align-items: center;
 	align-content: center;
 	flex-direction: column;
 	gap: 10px;
-	padding: 10px;
+	padding: 1cm;
 	border: 1px solid $wolves_color;
 	background-color: color.change($wolves_color, $alpha: 0.1);
 	min-width: 100px;
@@ -1784,3 +1783,10 @@ input {
 	flex-direction: column;
 	justify-content: center;
 }
+
+.add-player {
+	background-color: black;
+	border: 1px solid white;
+	padding: 20px;
+	margin: 0px;
+}
diff --git a/werewolves/src/clients/client/connection.rs b/werewolves/src/clients/client/connection.rs
index 6617cbe..da6f86b 100644
--- a/werewolves/src/clients/client/connection.rs
+++ b/werewolves/src/clients/client/connection.rs
@@ -135,7 +135,7 @@ impl Connection2 {
                 .send(Self::encode_message(&ClientMessage::GetState))
                 .await
             {
-                log::error!("websocket identification send: {err}");
+                log::error!("websocket get state send: {err}");
                 continue 'outer;
             };
             log::debug!("beginning listening loop");
diff --git a/werewolves/src/components/client/nav.rs b/werewolves/src/components/client/nav.rs
index 2cb0ec3..37d5551 100644
--- a/werewolves/src/components/client/nav.rs
+++ b/werewolves/src/components/client/nav.rs
@@ -179,6 +179,8 @@ struct ClickableTextEditProps {
     pub on_submit: Callback<String, Option<PublicIdentity>>,
     pub field_name: &'static str,
     pub state: UseStateHandle<bool>,
+    #[prop_or(100)]
+    pub max_length: usize,
 }
 
 #[function_component]
@@ -190,9 +192,10 @@ fn ClickableTextEdit(
         field_name,
         on_submit,
         state,
+        max_length,
     }: &ClickableTextEditProps,
 ) -> Html {
-    let on_input = crate::components::input_element_string_oninput(value.setter());
+    let on_input = crate::components::input_element_string_oninput(value.setter(), *max_length);
     let submit_ident = submit_ident.clone();
     let message_callback = on_submit.clone();
     let value = value.clone();
diff --git a/werewolves/src/components/field.rs b/werewolves/src/components/field.rs
index 80f5317..0bdc668 100644
--- a/werewolves/src/components/field.rs
+++ b/werewolves/src/components/field.rs
@@ -77,7 +77,7 @@ pub fn ClickableNumberEdit(
         state,
     }: &ClickableNumberEditProps,
 ) -> Html {
-    let on_input = crate::components::input_element_string_oninput(value.setter());
+    let on_input = crate::components::input_element_string_oninput(value.setter(), 20);
     let on_submit = on_submit.clone();
 
     let options = html! {
diff --git a/werewolves/src/components/input.rs b/werewolves/src/components/input.rs
index 95aafce..d6a1c63 100644
--- a/werewolves/src/components/input.rs
+++ b/werewolves/src/components/input.rs
@@ -12,6 +12,10 @@ pub fn input_element_number_oninput(num_value: UseStateHandle<String>) -> Callba
             return;
         };
         let value = target.value();
+        if value.is_empty() {
+            num_value.set(value);
+            return;
+        }
         if let Ok(z) = value.trim().parse::<NonZeroU8>() {
             num_value.set(z.to_string());
         } else {
@@ -20,10 +24,18 @@ pub fn input_element_number_oninput(num_value: UseStateHandle<String>) -> Callba
     })
 }
 
-pub fn input_element_string_oninput(value: UseStateSetter<String>) -> Callback<InputEvent> {
+pub fn input_element_string_oninput(
+    value: UseStateSetter<String>,
+    max_len: usize,
+) -> Callback<InputEvent> {
     Callback::from(move |ev: InputEvent| {
         if let Some(target) = ev.target_dyn_into::<HtmlInputElement>() {
-            value.set(target.value());
+            let mut str = target.value();
+            let char_count = str.chars().count();
+            if char_count > max_len {
+                str.truncate(max_len);
+            }
+            value.set(str);
         }
     })
 }
diff --git a/werewolves/src/components/settings.rs b/werewolves/src/components/settings.rs
index 85c3313..d0ecf17 100644
--- a/werewolves/src/components/settings.rs
+++ b/werewolves/src/components/settings.rs
@@ -10,7 +10,10 @@ use werewolves_proto::{
 };
 use yew::prelude::*;
 
-use crate::components::{Button, ClickableField, Identity, client::Signin};
+use crate::components::{
+    Button, ClickableField, Icon, IconSource, IconType, Identity, PartialAssociatedIcon,
+    client::Signin,
+};
 
 #[derive(Debug, PartialEq, Properties)]
 pub struct SettingsProps {
@@ -102,10 +105,18 @@ pub fn Settings(
             });
             let class = Into::<SetupRole>::into(r).category().class();
             let name = r.to_string().to_case(Case::Title);
+            // let icon = r.icon().map(|icon| {
+            //     html! {
+            //         <Icon source={icon} icon_type={IconType::Small}/>
+            //     }
+            // });
             html! {
-                <Button on_click={on_click} classes={classes!(class, "add-role")}>
-                    {name}
-                </Button>
+                <button
+                    onclick={on_click}
+                    class={classes!(class, "add-role")}
+                >
+                    <span>{name}</span>
+                </button>
             }
         })
         .collect::<Html>();
@@ -253,7 +264,9 @@ pub fn Settings(
 
     let add_player_open = use_state(|| false);
     let add_player_opts = html! {
-        <Signin callback={on_add_player.clone()}/>
+        <div class="add-player">
+            <Signin callback={on_add_player.clone()}/>
+        </div>
     };
 
     html! {