diff --git a/apis/src/components/atoms/direct_challenge_button.rs b/apis/src/components/atoms/direct_challenge_button.rs
index 436bcbdc..7a699fff 100644
--- a/apis/src/components/atoms/direct_challenge_button.rs
+++ b/apis/src/components/atoms/direct_challenge_button.rs
@@ -33,7 +33,7 @@ pub fn DirectChallengeButton(user: StoredValue<UserResponse>) -> impl IntoView {
             <button
                 title="Challenge to a game"
                 on:click=move |_| open.update(move |b| *b = true)
-                class="mx-2 bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 rounded p-1 text-white"
+                class="mx-2 bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 rounded p-1 text-white"
             >
                 <Icon icon=icondata::RiSwordOthersLine class="h-6 w-6"/>
             </button>
diff --git a/apis/src/components/atoms/download_pgn.rs b/apis/src/components/atoms/download_pgn.rs
index bf83bdd7..442e8167 100644
--- a/apis/src/components/atoms/download_pgn.rs
+++ b/apis/src/components/atoms/download_pgn.rs
@@ -42,7 +42,7 @@ pub fn DownloadPgn(
     view! {
         <Show when=move || maybe_game().is_some()>
             <button
-                class="aspect-square bg-ant-blue hover:bg-pillbug-teal rounded-sm transform transition-transform duration-300 active:scale-95 flex items-center justify-center z-20 m-1 text-white"
+                class="aspect-square bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal rounded-sm transform transition-transform duration-300 active:scale-95 flex items-center justify-center z-20 m-1 text-white"
                 on:click=download
             >
                 <Icon icon=icondata::AiDownloadOutlined class="h-7 w-7 py-1"/>
diff --git a/apis/src/components/atoms/history_button.rs b/apis/src/components/atoms/history_button.rs
index cef576a5..d648ff58 100644
--- a/apis/src/components/atoms/history_button.rs
+++ b/apis/src/components/atoms/history_button.rs
@@ -18,7 +18,7 @@ pub fn HistoryButton(
     #[prop(optional)] node_ref: Option<NodeRef<html::Button>>,
 ) -> impl IntoView {
     let cloned_action = action.clone();
-    let nav_buttons_style = "flex place-items-center justify-center hover:bg-grasshopper-green transform transition-transform duration-300 active:scale-95 m-1 h-6 rounded-md border-cyan-500 border-2 drop-shadow-lg disabled:opacity-25 disabled:cursor-not-allowed disabled:hover:bg-transparent";
+    let nav_buttons_style = "flex place-items-center justify-center hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 m-1 h-7 rounded-md border-cyan-500 dark:border-button-twilight border-2 drop-shadow-lg disabled:opacity-25 disabled:cursor-not-allowed disabled:hover:bg-transparent";
     let icon = match action {
         HistoryNavigation::First => icondata::AiFastBackwardFilled,
         HistoryNavigation::Last | HistoryNavigation::MobileLast => icondata::AiFastForwardFilled,
diff --git a/apis/src/components/atoms/profile_link.rs b/apis/src/components/atoms/profile_link.rs
index 6e6bf664..e86b7194 100644
--- a/apis/src/components/atoms/profile_link.rs
+++ b/apis/src/components/atoms/profile_link.rs
@@ -11,9 +11,9 @@ pub fn ProfileLink(
     let profile_link = format!("/@/{}", username);
     let hover_show = RwSignal::new(false);
     view! {
-        <div class="relative">
+        <div class="w-full relative">
             <a
-                class="z-20 relative font-bold duration-300 hover:text-pillbug-teal"
+                class="z-20 font-bold duration-300 hover:text-pillbug-teal"
                 on:mouseover=move |_| {
                     if user_is_hoverable.is_some() {
                         hover_show.set(true);
diff --git a/apis/src/components/layouts/base_layout.rs b/apis/src/components/layouts/base_layout.rs
index 6f1ddb5d..d5ccaa29 100644
--- a/apis/src/components/layouts/base_layout.rs
+++ b/apis/src/components/layouts/base_layout.rs
@@ -23,7 +23,7 @@ lazy_static! {
     static ref NANOID: Regex =
         Regex::new(r"/game/(?<nanoid>.*)").expect("This regex should compile");
 }
-pub const COMMON_LINK_STYLE: &str = "bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 m-1 rounded";
+pub const COMMON_LINK_STYLE: &str = "bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 m-1 rounded";
 pub const DROPDOWN_BUTTON_STYLE: &str= "h-full p-2 hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 whitespace-nowrap block";
 
 #[component]
@@ -113,7 +113,7 @@ pub fn BaseLayout(children: Children) -> impl IntoView {
         <Meta name="color-scheme" content=color_scheme_meta/>
         <Meta
             name="viewport"
-            content="width=device-width, initial-scale=1, interactive-widget=resizes-content, virtual-keyboard=resize-layout"
+            content="width=device-width, initial-scale=1, interactive-widget=resizes-content, user-scalable=no"
         />
         <Html class=move || {
             match (color_scheme.prefers_dark)() {
@@ -123,7 +123,7 @@ pub fn BaseLayout(children: Children) -> impl IntoView {
         }/>
 
         <Body/>
-        <main class="min-h-screen w-full bg-light dark:bg-dark text-xs sm:text-sm md:text-md touch-manipulations">
+        <main class="min-h-screen w-full bg-light dark:bg-gray-950 text-xs sm:text-sm md:text-md touch-manipulations">
             <Header/>
             <Alert/>
             {children()}
diff --git a/apis/src/components/molecules/alert.rs b/apis/src/components/molecules/alert.rs
index e48a12bb..bbaa3fe2 100644
--- a/apis/src/components/molecules/alert.rs
+++ b/apis/src/components/molecules/alert.rs
@@ -18,7 +18,7 @@ pub fn Alert() -> impl IntoView {
     };
     let color_and_text = move || match (alerts.last_alert)() {
         Some(AlertType::Error(_)) => ("bg-red-100 border-ladybug-red", "Error! "),
-        Some(AlertType::Warn(_)) => ("bg-yellow-100 border-queen-orange", "Warning! "),
+        Some(AlertType::Warn(_)) => ("bg-yellow-100 border-orange-twilight", "Warning! "),
         Some(AlertType::Notification(_)) => ("bg-blue-100 border-pillbug-teal", "Notification: "),
         None => ("", ""),
     };
diff --git a/apis/src/components/molecules/analysis_and_download.rs b/apis/src/components/molecules/analysis_and_download.rs
index 7bf066c3..0b9d5f98 100644
--- a/apis/src/components/molecules/analysis_and_download.rs
+++ b/apis/src/components/molecules/analysis_and_download.rs
@@ -17,7 +17,7 @@ pub fn AnalysisAndDownload() -> impl IntoView {
             <div class="flex items-center justify-center mt-1">
                 <a
                     href="/analysis"
-                    class="bg-ant-blue hover:bg-pillbug-teal duration-300 text-white rounded m-1 place-self-center justify-self-end"
+                    class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal duration-300 text-white rounded m-1 place-self-center justify-self-end"
                     on:click=analysis_setup
                 >
                     <Icon icon=icondata::TbMicroscope class="h-7 w-7 py-1"/>
diff --git a/apis/src/components/molecules/banner.rs b/apis/src/components/molecules/banner.rs
index a227ad27..00b9cde1 100644
--- a/apis/src/components/molecules/banner.rs
+++ b/apis/src/components/molecules/banner.rs
@@ -13,7 +13,7 @@ pub fn Banner(
     );
     view! {
         <div class=format!(
-            "flex flex-col items-center justify-center bg-gradient-to-r from-pillbug-teal to-ant-blue text-dark p-8 mb-4 rounded-sm {extend_tw_classes}",
+            "flex flex-col items-center justify-center bg-gradient-to-r from-pillbug-teal to-button-dawn text-black p-8 mb-4 rounded-sm {extend_tw_classes}",
         )>
             <h1 class="text-4xl font-bold mb-4 flex items-center">{logo} {title}</h1>
             <div class=text_class>{text}</div>
diff --git a/apis/src/components/molecules/challenge_row.rs b/apis/src/components/molecules/challenge_row.rs
index eaacd36f..e08acabc 100644
--- a/apis/src/components/molecules/challenge_row.rs
+++ b/apis/src/components/molecules/challenge_row.rs
@@ -57,7 +57,11 @@ pub fn ChallengeRow(challenge: StoredValue<ChallengeResponse>, single: bool) ->
             .expect("div_ref to be loaded by now")
             .class_list();
         class_list
-            .remove_2("bg-ant-blue", "hover:bg-pillbug-teal")
+            .remove_3(
+                "dark:bg-button-twilight",
+                "bg-button-dawn",
+                "hover:bg-pillbug-teal",
+            )
             .expect("tw classes to exist");
         class_list
             .add_2("bg-grasshopper-green", "hover:bg-green-500")
@@ -119,7 +123,7 @@ pub fn ChallengeRow(challenge: StoredValue<ChallengeResponse>, single: bool) ->
     };
 
     view! {
-        <tr class="dark:odd:bg-odd-dark dark:even:bg-even-dark odd:bg-odd-light even:bg-even-light text-center items-center cursor-pointer max-w-fit">
+        <tr class="dark:odd:bg-header-twilight dark:even:bg-reserve-twilight odd:bg-odd-light even:bg-even-light text-center items-center cursor-pointer max-w-fit">
             <td class=td_class>
                 <div>{icon}</div>
             </td>
@@ -166,7 +170,7 @@ pub fn ChallengeRow(challenge: StoredValue<ChallengeResponse>, single: bool) ->
                                     <button
                                         ref=button_ref
                                         on:click=copy
-                                        class="bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
+                                        class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
                                     >
                                         <Icon icon=icondata::AiCopyOutlined class="w-6 h-6"/>
                                     </button>
@@ -199,7 +203,7 @@ pub fn ChallengeRow(challenge: StoredValue<ChallengeResponse>, single: bool) ->
                                 }
                             }
 
-                            class="bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
+                            class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
                         >
                             <Icon icon=icondata::AiCheckOutlined class="w-6 h-6"/>
 
diff --git a/apis/src/components/molecules/control_buttons.rs b/apis/src/components/molecules/control_buttons.rs
index 63e0f76f..1da06a14 100644
--- a/apis/src/components/molecules/control_buttons.rs
+++ b/apis/src/components/molecules/control_buttons.rs
@@ -111,7 +111,7 @@ pub fn ControlButtons() -> impl IntoView {
                 }
             }
         }
-        "bg-ant-blue hover:bg-pillbug-teal"
+        "bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal"
     };
 
     let rematch_text = move || {
@@ -242,7 +242,7 @@ pub fn ControlButtons() -> impl IntoView {
                     {rematch_text}
                 </button>
                 <button
-                    class="h-7 m-1 grow bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-2 rounded flex-shrink-0"
+                    class="h-7 m-1 grow bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-2 rounded flex-shrink-0"
                     on:click=new_opponent
                 >
                     New Game
diff --git a/apis/src/components/molecules/game_row.rs b/apis/src/components/molecules/game_row.rs
index 4f2d41c0..7af47ad2 100644
--- a/apis/src/components/molecules/game_row.rs
+++ b/apis/src/components/molecules/game_row.rs
@@ -87,7 +87,7 @@ pub fn GameRow(game: StoredValue<GameResponse>) -> impl IntoView {
     };
 
     view! {
-        <article class="flex h-72 px-2 py-4 duration-300 dark:odd:bg-odd-dark dark:even:bg-even-dark odd:bg-odd-light even:bg-even-light relative mx-2 w-full hover:bg-blue-light hover:dark:bg-blue-dark">
+        <article class="flex h-72 px-2 py-4 duration-300 dark:odd:bg-header-twilight dark:even:bg-reserve-twilight odd:bg-odd-light even:bg-even-light relative mx-2 w-full hover:bg-blue-light hover:dark:bg-teal-900">
             <div class="h-60 w-60 mx-2">
                 <ThumbnailPieces game=game()/>
             </div>
diff --git a/apis/src/components/molecules/hover_ratings.rs b/apis/src/components/molecules/hover_ratings.rs
index 7954bea4..a3f88b74 100644
--- a/apis/src/components/molecules/hover_ratings.rs
+++ b/apis/src/components/molecules/hover_ratings.rs
@@ -16,7 +16,7 @@ pub fn HoverRating(user: StoredValue<UserResponse>) -> impl IntoView {
         })
         .collect_view();
     view! {
-        <div class="absolute z-40 bg-even-light dark:bg-even-dark rounded p-2 bottom-0 right-12">
+        <div class="absolute z-40 bg-even-light dark:bg-gray-950 rounded p-2 bottom-0 -left-24">
             {ratings}
         </div>
     }
diff --git a/apis/src/components/molecules/live_timer.rs b/apis/src/components/molecules/live_timer.rs
index 52382608..719c5ec9 100644
--- a/apis/src/components/molecules/live_timer.rs
+++ b/apis/src/components/molecules/live_timer.rs
@@ -69,7 +69,7 @@ pub fn LiveTimer(side: Color) -> impl IntoView {
         if time_left() == Duration::from_secs(0) {
             String::from("bg-ladybug-red")
         } else {
-            String::new()
+            String::from("dark:bg-reserve-twilight")
         }
     });
     let ticks = create_rw_signal(0);
diff --git a/apis/src/components/molecules/ping.rs b/apis/src/components/molecules/ping.rs
index 3ce25731..bd9ccf4c 100644
--- a/apis/src/components/molecules/ping.rs
+++ b/apis/src/components/molecules/ping.rs
@@ -29,5 +29,5 @@ pub fn Ping() -> impl IntoView {
         }
     };
 
-    view! { <div class="m-1 text-dark dark:text-white">{signal}</div> }
+    view! { <div class="m-1 text-black dark:text-white">{signal}</div> }
 }
diff --git a/apis/src/components/molecules/time_row.rs b/apis/src/components/molecules/time_row.rs
index 240ff387..ecba7de1 100644
--- a/apis/src/components/molecules/time_row.rs
+++ b/apis/src/components/molecules/time_row.rs
@@ -39,8 +39,7 @@ pub fn TimeRow(
     };
     view! {
         <div class="flex items-center gap-1 justify-start">
-            {icon}
-            <p class=extend_tw_classes>{text}</p>
+            {icon} <p class=extend_tw_classes>{text}</p>
         </div>
     }
 }
diff --git a/apis/src/components/molecules/user_row.rs b/apis/src/components/molecules/user_row.rs
index 50440458..3bc1fccf 100644
--- a/apis/src/components/molecules/user_row.rs
+++ b/apis/src/components/molecules/user_row.rs
@@ -12,6 +12,7 @@ use shared_types::game_speed::GameSpeed;
 pub fn UserRow(
     user: StoredValue<UserResponse>,
     #[prop(optional)] game_speed: Option<StoredValue<GameSpeed>>,
+    #[prop(optional)] on_profile: bool,
 ) -> impl IntoView {
     let rating = move || {
         if let Some(speed) = game_speed {
@@ -20,17 +21,30 @@ pub fn UserRow(
             None
         }
     };
+    let color = if on_profile {
+        "bg-light dark:bg-gray-950"
+    } else {
+        "dark:odd:bg-header-twilight dark:even:bg-reserve-twilight odd:bg-odd-light even:bg-even-light"
+    };
+    let profile_link = move || {
+        if on_profile {
+            view! { <ProfileLink username=user().username extend_tw_classes="truncate max-w-[120px]"/> }
+        } else {
+            view! {
+                <ProfileLink
+                    username=user().username
+                    extend_tw_classes="truncate max-w-[120px]"
+                    user_is_hoverable=user
+                />
+            }
+        }
+    };
     view! {
-        <div class="flex p-1 dark:odd:bg-odd-dark dark:even:bg-even-dark odd:bg-odd-light even:bg-even-light items-center justify-between h-10">
+        <div class=format!("flex p-1 items-center justify-between h-10 {color}")>
             <div class="flex w-48 mr-2 justify-between">
-
                 <div class="flex items-center">
                     <StatusIndicator username=user().username/>
-                    <ProfileLink
-                        username=user().username
-                        extend_tw_classes="truncate max-w-[120px]"
-                        user_is_hoverable=user
-                    />
+                    {profile_link()}
                 </div>
                 <Show when=move || { rating().is_some() }>
                     <Rating rating=rating().expect("Rating is some")/>
diff --git a/apis/src/components/organisms/confirm_mode_toggle.rs b/apis/src/components/organisms/confirm_mode_toggle.rs
index 5e6f925a..292edaf2 100644
--- a/apis/src/components/organisms/confirm_mode_toggle.rs
+++ b/apis/src/components/organisms/confirm_mode_toggle.rs
@@ -6,7 +6,7 @@ use leptos_router::ActionForm;
 #[component]
 pub fn ConfirmModeToggle() -> impl IntoView {
     view! {
-        <p class="text-dark dark:text-white m-1">Move confirmation:</p>
+        <p class="text-black dark:text-white m-1">Move confirmation:</p>
         <div class="flex">
             <ConfirmModeButton move_confirm=MoveConfirm::Single/>
             <ConfirmModeButton move_confirm=MoveConfirm::Double/>
@@ -28,7 +28,7 @@ pub fn ConfirmModeButton(move_confirm: MoveConfirm) -> impl IntoView {
         if (config.confirm_mode.preferred_confirm)() == move_confirm() {
             "bg-pillbug-teal"
         } else {
-            "bg-ant-blue hover:bg-pillbug-teal"
+            "bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal"
         }
     };
 
diff --git a/apis/src/components/organisms/darkmode_toggle.rs b/apis/src/components/organisms/darkmode_toggle.rs
index ad66c178..9f80f7e6 100644
--- a/apis/src/components/organisms/darkmode_toggle.rs
+++ b/apis/src/components/organisms/darkmode_toggle.rs
@@ -9,7 +9,7 @@ pub fn DarkModeToggle() -> impl IntoView {
     view! {
         <ActionForm
             action=color_scheme.action
-            class="max-h-6 md:max-h-7 inline-flex items-center border border-transparent text-base font-medium rounded-md shadow dark:bg-queen-orange bg-hive-black justify-center"
+            class="max-h-6 md:max-h-7 inline-flex items-center border border-transparent text-base font-medium rounded-md shadow dark:bg-orange-twilight bg-gray-950 justify-center"
         >
             <input
                 type="hidden"
@@ -22,12 +22,12 @@ pub fn DarkModeToggle() -> impl IntoView {
                 value=move || { if (color_scheme.prefers_dark)() { "dark" } else { "light" } }
                 inner_html=move || {
                     if (color_scheme.prefers_dark)() {
-                        r#"<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-6 text-hive-black bg-queen-orange dark:text-text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                        r#"<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-6 text-hive-black bg-orange-twilight dark:text-text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                             </svg>
                         "#
                     } else {
-                        r#"<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-6 text-queen-orange bg-hive-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                        r#"<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-6 text-orange-twilight bg-gray-950" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                             </svg>
                         "#
diff --git a/apis/src/components/organisms/display_profile.rs b/apis/src/components/organisms/display_profile.rs
index 68a9faea..c9c44916 100644
--- a/apis/src/components/organisms/display_profile.rs
+++ b/apis/src/components/organisms/display_profile.rs
@@ -31,7 +31,7 @@ pub fn DisplayProfile(user: StoredValue<UserResponse>) -> impl IntoView {
         <div class="m-1">
             <div class="flex flex-col items-start ml-3">
                 <div class="max-w-fit">
-                    <UserRow user=user/>
+                    <UserRow user=user on_profile=true/>
                 </div>
                 <div class="flex gap-1 flex-wrap">{ratings}</div>
             </div>
diff --git a/apis/src/components/organisms/display_timer.rs b/apis/src/components/organisms/display_timer.rs
index dede32f9..add2ff5c 100644
--- a/apis/src/components/organisms/display_timer.rs
+++ b/apis/src/components/organisms/display_timer.rs
@@ -59,12 +59,12 @@ pub fn DisplayTimer(placement: Placement, vertical: bool) -> impl IntoView {
     };
     let timer = expect_context::<TimerSignal>();
     let active_side = create_memo(move |_| match timer.signal.get().finished {
-        true => "bg-stone-200 dark:bg-dark",
+        true => "bg-stone-200 dark:reserve-twilight",
         false => {
             if (side() == Color::White) == (timer.signal.get().turn % 2 == 0) {
                 "bg-grasshopper-green"
             } else {
-                "bg-stone-200 dark:bg-dark"
+                "bg-stone-200 dark:reserve-twilight"
             }
         }
     });
@@ -116,7 +116,12 @@ pub fn DisplayTimer(placement: Placement, vertical: bool) -> impl IntoView {
                 {move || {
                     match timer.signal.get().time_mode {
                         TimeMode::Untimed => {
-                            view! { <Icon icon=icondata::BiInfiniteRegular class="h-full w-full"/> }
+                            view! {
+                                <Icon
+                                    icon=icondata::BiInfiniteRegular
+                                    class="h-full w-full dark:bg-reserve-twilight"
+                                />
+                            }
                         }
                         TimeMode::Correspondence | TimeMode::RealTime => {
                             view! { <LiveTimer side=side()/> }
diff --git a/apis/src/components/organisms/dropdowns.rs b/apis/src/components/organisms/dropdowns.rs
index 20264b9f..d84ea7f5 100644
--- a/apis/src/components/organisms/dropdowns.rs
+++ b/apis/src/components/organisms/dropdowns.rs
@@ -8,7 +8,7 @@ use leptos::*;
 use leptos_icons::*;
 use shared_types::chat_message::SimpleDestination;
 
-const DROPDOWN_MENU_STYLE: &str = "flex flex-col items-stretch absolute bg-even-light dark:bg-even-dark text-black border border-gray-300 rounded-md left-34 p-2";
+const DROPDOWN_MENU_STYLE: &str = "flex flex-col items-stretch absolute bg-even-light dark:bg-gray-950 text-black border border-gray-300 rounded-md left-34 p-2";
 
 #[component]
 pub fn UserDropdown(username: String) -> impl IntoView {
@@ -17,8 +17,8 @@ pub fn UserDropdown(username: String) -> impl IntoView {
     view! {
         <Hamburger
             hamburger_show=hamburger_show
-            button_style="bg-ant-blue text-white rounded-md px-2 py-1 m-1 hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 whitespace-nowrap"
-            dropdown_style="mr-1 xs:mt-0 mt-1 flex flex-col items-stretch absolute bg-even-light dark:bg-even-dark text-black border border-gray-300 rounded-md p-2 right-0 lg:right-10"
+            button_style="bg-button-dawn dark:bg-button-twilight text-white rounded-md px-2 py-1 m-1 hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 whitespace-nowrap"
+            dropdown_style="mr-1 xs:mt-0 mt-1 flex flex-col items-stretch absolute bg-even-light dark:bg-gray-950 text-black border border-gray-300 rounded-md p-2 right-0 lg:right-10"
             content=username.clone()
         >
             <a
@@ -178,14 +178,14 @@ pub fn CommunityDropdown() -> impl IntoView {
 pub fn ChatDropdown(destination: SimpleDestination) -> impl IntoView {
     let chat = expect_context::<Chat>();
     let hamburger_show = expect_context::<RwSignal<bool>>();
-    let chat_style = "flex flex-col absolute bg-even-light dark:bg-even-dark border border-gray-300 p-2 right-0 w-full h-[75%] z-50";
+    let chat_style = "flex flex-col absolute bg-even-light dark:bg-gray-950 border border-gray-300 p-2 right-0 w-full h-[75%] z-50";
     let button_color = move || {
         if hamburger_show() {
-            "bg-ant-blue"
+            "bg-button-dawn dark:bg-button-twilight"
         } else if (chat.games_public_new_messages)() || (chat.games_private_new_messages)() {
             "bg-ladybug-red"
         } else {
-            "bg-ant-blue"
+            "bg-button-dawn dark:bg-button-twilight"
         }
     };
 
diff --git a/apis/src/components/organisms/header.rs b/apis/src/components/organisms/header.rs
index 1b9a9744..fb075589 100644
--- a/apis/src/components/organisms/header.rs
+++ b/apis/src/components/organisms/header.rs
@@ -17,7 +17,7 @@ pub fn Header(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoVie
 
     view! {
         <header class=format!(
-            "w-full fixed top-0 flex justify-between items-center bg-gray-300 dark:bg-gray-700 z-50 max-w-[100vw] select-none {extend_tw_classes}",
+            "w-full fixed top-0 flex justify-between items-center bg-gray-300 dark:bg-header-twilight z-50 max-w-[100vw] select-none {extend_tw_classes}",
         )>
             <Transition fallback=|| {
                 view! {
@@ -38,7 +38,7 @@ pub fn Header(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoVie
                                 Buy Game
                             </a>
                             <a
-                                class="h-full p-2  text-queen-orange hover:text-pillbug-teal transform transition-transform duration-300 active:scale-95 whitespace-nowrap block"
+                                class="h-full p-2  text-orange-twilight hover:text-pillbug-teal transform transition-transform duration-300 active:scale-95 whitespace-nowrap block"
                                 href="/donate"
                             >
                                 Donate
@@ -48,7 +48,7 @@ pub fn Header(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoVie
                     <div class="flex items-center lg:mr-10">
                         <DarkModeToggle/>
                         <a
-                            class="bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 m-1 px-4 rounded"
+                            class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 m-1 px-4 rounded"
                             href="/login"
                             on:focus=move |_| set_redirect()
                         >
@@ -81,7 +81,7 @@ pub fn Header(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoVie
                                     Buy Game
                                 </a>
                                 <a
-                                    class="h-full p-2 text-queen-orange hover:text-pillbug-teal transform transition-transform duration-300 active:scale-95 whitespace-nowrap block"
+                                    class="h-full p-2 text-orange-twilight hover:text-pillbug-teal transform transition-transform duration-300 active:scale-95 whitespace-nowrap block"
                                     href="/donate"
                                 >
                                     Donate
@@ -95,7 +95,7 @@ pub fn Header(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoVie
                                     <div class="flex items-center lg:mr-10">
                                         <DarkModeToggle/>
                                         <a
-                                            class="bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 m-1 px-4 rounded"
+                                            class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 m-1 px-4 rounded"
                                             href="/login"
                                             on:focus=move |_| set_redirect()
                                         >
diff --git a/apis/src/components/organisms/history.rs b/apis/src/components/organisms/history.rs
index 295369a0..cd3cc906 100644
--- a/apis/src/components/organisms/history.rs
+++ b/apis/src/components/organisms/history.rs
@@ -31,10 +31,10 @@ pub fn HistoryMove(
         game_state_signal.show_history_turn(turn);
     };
     let get_class = move || {
-        let mut class = "ml-3 hover:bg-blue-300 col-span-2 leading-6 h-auto max-h-6 transform transition-transform duration-300 active:scale-95";
+        let mut class = "ml-3 hover:bg-pillbug-teal col-span-2 leading-6 h-auto max-h-6 transform transition-transform duration-300 active:scale-95";
         if let Some(history_turn) = (game_state_signal.signal)().history_turn {
             if turn == history_turn {
-                class = "ml-3 hover:bg-blue-300 col-span-2 bg-queen-orange leading-6 h-auto max-h-6 transform transition-transform duration-300 active:scale-95"
+                class = "ml-3 hover:bg-pillbug-teal col-span-2 bg-orange-twilight leading-6 h-auto max-h-6 transform transition-transform duration-300 active:scale-95"
             }
         }
         class
@@ -101,7 +101,7 @@ pub fn History(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoVi
                 .expect("window to exist")
                 .document()
                 .expect("window to have a document")
-                .query_selector(".bg-queen-orange")
+                .query_selector(".bg-orange-twilight")
                 .expect("to have an Element")
         } else {
             None
@@ -154,7 +154,7 @@ pub fn History(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoVi
     });
     view! {
         <div class=format!("h-full flex flex-col pb-4 {extend_tw_classes}")>
-            <div class="flex gap-1 dark:bg-dark bg-light min-h-0 [&>*]:grow">
+            <div class="flex gap-1 min-h-0 [&>*]:grow">
                 <HistoryButton
 
                     action=HistoryNavigation::First
diff --git a/apis/src/components/organisms/logout.rs b/apis/src/components/organisms/logout.rs
index c562ad13..17e50053 100644
--- a/apis/src/components/organisms/logout.rs
+++ b/apis/src/components/organisms/logout.rs
@@ -16,7 +16,7 @@ pub fn Logout(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoVie
                     }
                 }
 
-                class="w-full h-full flex place-content-start bg-ant-blue hover:bg-ladybug-red transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 rounded"
+                class="w-full h-full flex place-content-start bg-button-dawn dark:bg-button-twilight hover:bg-ladybug-red transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 rounded"
                 type="submit"
             >
                 Logout
diff --git a/apis/src/components/organisms/preview_tiles.rs b/apis/src/components/organisms/preview_tiles.rs
index 4693970c..d56465d2 100644
--- a/apis/src/components/organisms/preview_tiles.rs
+++ b/apis/src/components/organisms/preview_tiles.rs
@@ -33,7 +33,7 @@ pub fn PreviewTiles() -> impl IntoView {
     };
 
     view! {
-        <div class="rounded h-36 w-72 sm:h-40 sm:w-80 mx-1 my-2 relative dark:odd:bg-odd-dark dark:even:bg-even-dark  odd:bg-odd-light even:bg-even-light flex flex-col items-center">
+        <div class="rounded h-36 w-72 sm:h-40 sm:w-80 mx-1 my-2 relative dark:odd:bg-header-twilight dark:even:bg-reserve-twilight odd:bg-odd-light even:bg-even-light flex flex-col items-center">
             <svg
                 viewBox="1224 730 225 100"
                 class="touch-none h-full w-full"
diff --git a/apis/src/components/organisms/side_board.rs b/apis/src/components/organisms/side_board.rs
index 0468b1a7..23651b3f 100644
--- a/apis/src/components/organisms/side_board.rs
+++ b/apis/src/components/organisms/side_board.rs
@@ -45,7 +45,7 @@ pub fn SideboardTabs(
 
     let button_color = move |button_view: SideboardTabView| {
         if tab_view() == button_view {
-            "bg-slate-400"
+            "dark:bg-button-twilight bg-slate-400"
         } else {
             "bg-inherit"
         }
@@ -77,14 +77,14 @@ pub fn SideboardTabs(
 
     view! {
         <div class=format!(
-            "h-full flex flex-col select-none col-span-2 border-x-2 border-black dark:border-white row-span-4 {row_start} {extend_tw_classes}",
+            "bg-reserve-dawn dark:bg-reserve-twilight h-full flex flex-col select-none col-span-2 border-x-2 border-black dark:border-white row-span-4 {row_start} {extend_tw_classes}",
         )>
             <div class="z-10 border-b-2 border-black dark:border-white flex justify-between [&>*]:grow sticky top-0 bg-inherit">
 
                 <button
                     class=move || {
                         format!(
-                            "transform transition-transform duration-300 active:scale-95 hover:bg-blue-300 {}",
+                            "transform transition-transform duration-300 active:scale-95 hover:bg-pillbug-teal {}",
                             button_color(SideboardTabView::Reserve),
                         )
                     }
@@ -107,7 +107,7 @@ pub fn SideboardTabs(
                 <button
                     class=move || {
                         format!(
-                            "transform transition-transform duration-300 active:scale-95 hover:bg-blue-300 {}",
+                            "transform transition-transform duration-300 active:scale-95 hover:bg-pillbug-teal {}",
                             button_color(SideboardTabView::History),
                         )
                     }
@@ -130,7 +130,7 @@ pub fn SideboardTabs(
                     <button
                         class=move || {
                             format!(
-                                "transform transition-transform duration-300 active:scale-95 hover:bg-blue-300 {}",
+                                "transform transition-transform duration-300 active:scale-95 hover:bg-pillbug-teal {}",
                                 button_color_chat(),
                             )
                         }
diff --git a/apis/src/components/organisms/tile_design_toggle.rs b/apis/src/components/organisms/tile_design_toggle.rs
index f75a41b9..337f6450 100644
--- a/apis/src/components/organisms/tile_design_toggle.rs
+++ b/apis/src/components/organisms/tile_design_toggle.rs
@@ -6,7 +6,7 @@ use leptos_router::ActionForm;
 #[component]
 pub fn TileDesignToggle() -> impl IntoView {
     view! {
-        <p class="text-dark dark:text-white m-1">Piece style:</p>
+        <p class="text-black dark:text-white m-1">Piece style:</p>
         <div class="flex">
             <TileDesignButton tile_design=TileDesign::Official/>
             <TileDesignButton tile_design=TileDesign::Flat/>
@@ -22,7 +22,7 @@ pub fn TileDesignButton(tile_design: TileDesign) -> impl IntoView {
         if (config.tile_design.preferred_tile_design)() == tile_design() {
             "bg-pillbug-teal"
         } else {
-            "bg-ant-blue hover:bg-pillbug-teal"
+            "bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal"
         }
     };
 
diff --git a/apis/src/components/organisms/tile_dots_toggle.rs b/apis/src/components/organisms/tile_dots_toggle.rs
index ed53ce50..776c8b44 100644
--- a/apis/src/components/organisms/tile_dots_toggle.rs
+++ b/apis/src/components/organisms/tile_dots_toggle.rs
@@ -5,7 +5,7 @@ use leptos_router::ActionForm;
 #[component]
 pub fn TileDotsToggle() -> impl IntoView {
     view! {
-        <p class="text-dark dark:text-white m-1">Show dots:</p>
+        <p class="text-black dark:text-white m-1">Show dots:</p>
         <div class="flex">
             <TileDotsButton tile_dots=TileDots::No/>
             <TileDotsButton tile_dots=TileDots::Yes/>
@@ -21,7 +21,7 @@ pub fn TileDotsButton(tile_dots: TileDots) -> impl IntoView {
         if (config.tile_dots.preferred_tile_dots)() == tile_dots() {
             "bg-pillbug-teal"
         } else {
-            "bg-ant-blue hover:bg-pillbug-teal"
+            "bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal"
         }
     };
 
diff --git a/apis/src/components/organisms/tile_rotation_toggle.rs b/apis/src/components/organisms/tile_rotation_toggle.rs
index bc5ca017..dd2e4e46 100644
--- a/apis/src/components/organisms/tile_rotation_toggle.rs
+++ b/apis/src/components/organisms/tile_rotation_toggle.rs
@@ -6,7 +6,7 @@ use leptos_router::ActionForm;
 #[component]
 pub fn TileRotationToggle() -> impl IntoView {
     view! {
-        <p class="text-dark dark:text-white m-1">Rotation:</p>
+        <p class="text-black dark:text-white m-1">Rotation:</p>
         <div class="flex">
             <TileRotationButton tile_rotation=TileRotation::No/>
             <TileRotationButton tile_rotation=TileRotation::Yes/>
@@ -22,7 +22,7 @@ pub fn TileRotationButton(tile_rotation: TileRotation) -> impl IntoView {
         if (config.tile_rotation.preferred_tile_rotation)() == tile_rotation() {
             "bg-pillbug-teal"
         } else {
-            "bg-ant-blue hover:bg-pillbug-teal"
+            "bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal"
         }
     };
 
diff --git a/apis/src/components/organisms/tv.rs b/apis/src/components/organisms/tv.rs
index 3edf33c4..5d0acc42 100644
--- a/apis/src/components/organisms/tv.rs
+++ b/apis/src/components/organisms/tv.rs
@@ -14,7 +14,7 @@ pub fn Tv() -> impl IntoView {
         <div class="flex flex-col items-center md:pt-12">
             <div class="flex flex-col md:flex-row gap-1 items-center flex-wrap w-full">
                 <For each=live_games key=|(k, v)| (k.to_owned(), v.turn) let:game>
-                    <div class="h-60 w-60 mx-2 relative dark:odd:bg-odd-dark dark:even:bg-even-dark  odd:bg-odd-light even:bg-even-light flex flex-col items-center">
+                    <div class="h-60 w-60 mx-2 relative dark:odd:bg-header-twilight dark:even:bg-reserve-twilight  odd:bg-odd-light even:bg-even-light flex flex-col items-center">
                         <div class="flex flex-col items-center">
                             {format!(
                                 "{} {} vs {} {}",
diff --git a/apis/src/pages/account.rs b/apis/src/pages/account.rs
index 34372ac2..1fa4928d 100644
--- a/apis/src/pages/account.rs
+++ b/apis/src/pages/account.rs
@@ -66,7 +66,7 @@ pub fn Account(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoVi
                 <input type="hidden" name="pathname" value=pathname().0/>
                 <input
                     type="submit"
-                    class="bg-ant-blue transform transition-transform duration-300 active:scale-95 hover:bg-pillbug-teal text-white font-bold py-2 px-4 rounded focus:outline-none cursor-pointer"
+                    class="bg-button-dawn dark:bg-button-twilight transform transition-transform duration-300 active:scale-95 hover:bg-pillbug-teal text-white font-bold py-2 px-4 rounded focus:outline-none cursor-pointer"
                     value="Save"
                 />
             </ActionForm>
diff --git a/apis/src/pages/challenge_create.rs b/apis/src/pages/challenge_create.rs
index 4f7ce9cf..2fb634e5 100644
--- a/apis/src/pages/challenge_create.rs
+++ b/apis/src/pages/challenge_create.rs
@@ -223,7 +223,7 @@ pub fn ChallengeCreate(
 
     let active_color = move |b| {
         if b {
-            "bg-ant-blue"
+            "bg-button-dawn dark:bg-button-twilight"
         } else {
             "bg-odd-light dark:bg-gray-700"
         }
@@ -255,7 +255,7 @@ pub fn ChallengeCreate(
                 GameSpeed::from_base_increment(Some(total_seconds()), Some(sec_per_move()))
             }
         };
-        view! { <Icon width="50" height="50" icon=icon_for_speed(&speed)/> }
+        view! { <Icon width="50" height="50" class="p-2" icon=icon_for_speed(&speed)/> }
     };
 
     view! {
diff --git a/apis/src/pages/challenge_view.rs b/apis/src/pages/challenge_view.rs
index 604829dc..70e76995 100644
--- a/apis/src/pages/challenge_view.rs
+++ b/apis/src/pages/challenge_view.rs
@@ -41,7 +41,11 @@ pub fn ChallengeView() -> impl IntoView {
             .expect("div_ref to be loaded by now")
             .class_list();
         class_list
-            .remove_2("bg-ant-blue", "hover:bg-pillbug-teal")
+            .remove_3(
+                "dark:bg-button-twilight",
+                "bg-button-dawn",
+                "hover:bg-pillbug-teal",
+            )
             .expect("tw classes to exist");
         class_list
             .add_2("bg-grasshopper-green", "hover:bg-green-500")
@@ -80,7 +84,7 @@ pub fn ChallengeView() -> impl IntoView {
                                                 title="Copy link"
                                                 ref=button_ref
                                                 on:click=copy
-                                                class="bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
+                                                class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-1 px-1 rounded focus:outline-none focus:shadow-outline m-1"
                                             >
                                                 <Icon icon=icondata::AiCopyOutlined class="h-6 w-6"/>
                                             </button>
diff --git a/apis/src/pages/config.rs b/apis/src/pages/config.rs
index 12171ada..de8c4079 100644
--- a/apis/src/pages/config.rs
+++ b/apis/src/pages/config.rs
@@ -8,17 +8,17 @@ use leptos::*;
 #[component]
 pub fn Config() -> impl IntoView {
     view! {
-        <div class="flex flex-col sm:flex-row pt-10 m-1">
+        <div class="flex flex-col sm:flex-row pt-10">
             <div class="m-1">
                 <TileDesignToggle/>
                 <TileRotationToggle/>
                 <TileDotsToggle/>
                 <ConfirmModeToggle/>
-                <p class="text-dark dark:text-white m-1">Colorscheme:</p>
+                <p class="text-black dark:text-white m-1">Colorscheme:</p>
                 <DarkModeToggle/>
             </div>
             <div class="m-1">
-                <p class="text-dark dark:text-white m-1">Preview:</p>
+                <p class="text-black dark:text-white m-1">Preview:</p>
                 <PreviewTiles/>
             </div>
         </div>
diff --git a/apis/src/pages/home.rs b/apis/src/pages/home.rs
index 3966f7be..e3265cf1 100644
--- a/apis/src/pages/home.rs
+++ b/apis/src/pages/home.rs
@@ -29,7 +29,7 @@ pub fn Home() -> impl IntoView {
         <div class="pt-20 flex flex-col justify-start md:justify-center items-center w-full overflow-x-clip">
             <Banner title="hivegame.com" extend_tw_classes="w-10/12" logo=logo()/>
             <button
-                class="m-5 grow md:grow-0 whitespace-nowrap bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 rounded"
+                class="m-5 grow md:grow-0 whitespace-nowrap bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 rounded"
                 on:click=move |_| {
                     if logged_in() {
                         open.update(move |b| *b = true)
@@ -39,6 +39,7 @@ pub fn Home() -> impl IntoView {
                     }
                 }
             >
+
                 Play
             </button>
             <div class="flex flex-col md:flex-row justify-center items-center">
diff --git a/apis/src/pages/login.rs b/apis/src/pages/login.rs
index b7b8698f..39e9da47 100644
--- a/apis/src/pages/login.rs
+++ b/apis/src/pages/login.rs
@@ -16,7 +16,7 @@ pub fn Login(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoView
         <div class=format!("w-full max-w-xs mx-auto pt-20 {extend_tw_classes}")>
             <ActionForm
                 action=auth_context.login
-                class="bg-inherit shadow-md rounded px-8 pt-6 pb-8 mb-4 bg-stone-300 dark:bg-slate-800 "
+                class="shadow-md rounded px-8 pt-6 pb-8 mb-4 bg-stone-300 dark:bg-reserve-twilight"
             >
                 <label class="block font-bold mb-2" for="email">
                     E-Mail
@@ -51,7 +51,7 @@ pub fn Login(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoView
                     </Show>
                 </p>
                 <input
-                    class="bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 rounded focus:outline-none cursor-pointer"
+                    class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 rounded focus:outline-none cursor-pointer"
                     type="submit"
                     value="Sign In"
                 />
@@ -59,7 +59,7 @@ pub fn Login(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoView
             <p class="text-center text-gray-500 text-xs">
                 "Don't have an account?"
                 <a
-                    class="text-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300"
+                    class="text-blue-500 hover:underline transform transition-transform duration-300"
                     href="/register"
                 >
                     Sign Up
diff --git a/apis/src/pages/play.rs b/apis/src/pages/play.rs
index 4aa5647f..e326c486 100644
--- a/apis/src/pages/play.rs
+++ b/apis/src/pages/play.rs
@@ -53,7 +53,7 @@ pub fn Play(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoView
         if is_tall_or_chat() {
             "flex flex-col"
         } else {
-            "grid grid-cols-board-xs sm:grid-cols-board-sm lg:grid-cols-board-lg xxl:grid-cols-board-xxl grid-rows-6 mr-2"
+            "grid grid-cols-board-xs sm:grid-cols-board-sm lg:grid-cols-board-lg xxl:grid-cols-board-xxl grid-rows-6 pr-2"
         }
     };
     let go_to_game = Callback::new(move |()| {
@@ -74,7 +74,7 @@ pub fn Play(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoView
     view! {
         <div class=move || {
             format!(
-                "max-h-[100dvh] min-h-[100dvh] pt-10 select-none {} {extend_tw_classes}",
+                "max-h-[100dvh] min-h-[100dvh] pt-10 select-none bg-board-dawn dark:bg-board-twilight {} {extend_tw_classes}",
                 parent_container_style(),
             )
         }>
@@ -82,7 +82,7 @@ pub fn Play(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoView
                 when=is_tall_or_chat
                 fallback=move || {
                     view! {
-                        <GameInfo extend_tw_classes="absolute pl-4 pt-2 bg-light dark:bg-dark"/>
+                        <GameInfo extend_tw_classes="absolute pl-4 pt-2 bg-board-dawn dark:bg-board-twilight"/>
                         <Board/>
                         <div class="grid col-start-9 col-span-2 row-span-full grid-cols-2 grid-rows-6">
                             <DisplayTimer placement=Placement::Top vertical=false/>
@@ -94,7 +94,7 @@ pub fn Play(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoView
             >
 
                 <div class="flex flex-col flex-grow h-full min-h-0">
-                    <div class="flex flex-col shrink flex-grow">
+                    <div class="flex flex-col shrink flex-grow bg-board-dawn dark:bg-reserve-twilight">
                         <div class="flex justify-between shrink flex-row-reverse items-center">
                             <ChatDropdown destination=SimpleDestination::Game/>
                             <AnalysisAndDownload/>
@@ -113,7 +113,7 @@ pub fn Play(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoView
 
                     </div>
                     <Board overwrite_tw_classes="flex grow min-h-0"/>
-                    <div class="flex flex-col shrink flex-grow">
+                    <div class="flex flex-col shrink flex-grow bg-board-dawn dark:bg-reserve-twilight">
                         <div class="flex gap-1 border-t-[1px] border-dashed border-gray-500">
                             <UserWithRating side=bottom_color() is_tall=is_tall_or_chat/>
                         </div>
@@ -121,7 +121,7 @@ pub fn Play(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoView
                             <Reserve alignment=Alignment::SingleRow color=bottom_color()/>
                             <DisplayTimer vertical=true placement=Placement::Bottom/>
                         </div>
-                        <div class="grid grid-cols-4 gap-8">
+                        <div class="grid grid-cols-4 gap-8 pb-1">
                             <HistoryButton action=HistoryNavigation::First/>
                             <HistoryButton action=HistoryNavigation::Previous/>
                             <HistoryButton action=HistoryNavigation::Next post_action=go_to_game/>
diff --git a/apis/src/pages/profile_view.rs b/apis/src/pages/profile_view.rs
index 2a7cfcc6..8a72bdec 100644
--- a/apis/src/pages/profile_view.rs
+++ b/apis/src/pages/profile_view.rs
@@ -62,7 +62,7 @@ pub fn ProfileView(children: ChildrenFn) -> impl IntoView {
         if tab_view() == view {
             button_style + " bg-pillbug-teal"
         } else {
-            button_style + " bg-ant-blue"
+            button_style + " bg-button-dawn dark:bg-button-twilight"
         }
     };
     let still_more_games = RwSignal::from(true);
@@ -83,7 +83,7 @@ pub fn ProfileView(children: ChildrenFn) -> impl IntoView {
     });
 
     view! {
-        <div class="bg-light dark:bg-dark pt-12 flex flex-col">
+        <div class="bg-light dark:bg-gray-950 pt-12 flex flex-col">
             <Transition>
                 {move || {
                     let (current_finished_games, more_games) = finished_games()
diff --git a/apis/src/pages/register.rs b/apis/src/pages/register.rs
index 939a0fc4..236de66c 100644
--- a/apis/src/pages/register.rs
+++ b/apis/src/pages/register.rs
@@ -208,7 +208,7 @@ pub fn Register(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoV
                 <input
                     type="submit"
                     disabled=conditionally_disable
-                    class="bg-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 rounded focus:outline-none cursor-pointer disabled:opacity-25 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+                    class="bg-button-dawn dark:bg-button-twilight hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95 text-white font-bold py-2 px-4 rounded focus:outline-none cursor-pointer disabled:opacity-25 disabled:cursor-not-allowed disabled:hover:bg-transparent"
                     value="Sign Up"
                 />
                 <Show when=display_register_error>
@@ -217,12 +217,15 @@ pub fn Register(#[prop(optional)] extend_tw_classes: &'static str) -> impl IntoV
 
             </ActionForm>
 
-            <a
-                class="inline-block align-baseline font-bold text-ant-blue hover:bg-pillbug-teal transform transition-transform duration-300 active:scale-95"
-                href="/login"
-            >
+            <p class="text-center text-gray-500 text-xs">
                 Already have an account?
-            </a>
+                <a
+                    class="text-blue-500 hover:underline transform transition-transform duration-300"
+                    href="/login"
+                >
+                    Sign in
+                </a>
+            </p>
         </div>
     }
 }
diff --git a/apis/tailwind.config.js b/apis/tailwind.config.js
index 6c0bec08..c59d9123 100644
--- a/apis/tailwind.config.js
+++ b/apis/tailwind.config.js
@@ -26,25 +26,28 @@ module.exports = {
       colors: {
         transparent: 'transparent',
         current: 'currentColor',
+        'board-twilight': '#47545a',
+        'board-dawn': '#edebe9',
+        'reserve-twilight': '#212836',
+        'reserve-dawn': '#edebe9',
+        'header-twilight': '#2e3e48',
+        'header-dawn': '#d1d5db',
+        'button-twilight': '#7da1b2',
+        'button-dawn': '#3574a5',
+        'orange-twilight': '#e9ac43',
+        'orange-dawn': '#f68c11',
         'hive-black': '#3a3a3a',
         'hive-white': '#f0ead6',
-        'li-hover-dark': '#999',
-        'li-hover-light': '#787878',
         'light': '#edebe9',
         'odd-light': '#f7f6f5',
         'even-light': '#ffffff',
-        'dark': '#161512',
         'odd-dark': '#302E2C',
         'even-dark': '#262421',
-        'hover-blue-light': '#1b78d0',
-        'hover-blue-dark': '#3692e7',
-        'blue-light': '#d1e4f6',
-        'blue-dark': '#293a49',
-        'ant-blue': '#3574a5',
         'pillbug-teal': '#40afa1',
         'ladybug-red': '#d61a35',
         'grasshopper-green': '#3f9b3a',
-        'queen-orange': '#f68c11',
+        'blue-light': '#d1e4f6',
+        'blue-dark': '#293a49',
       },
       dropShadow: {
         'w': '1px 1px 1px #888888',