diff --git a/client/public/styles.css b/client/public/styles.css
index 5e2f808..e82593c 100644
--- a/client/public/styles.css
+++ b/client/public/styles.css
@@ -2,20 +2,33 @@
 @tailwind components;
 @tailwind utilities;
 
-/* html, body { */
-/*     @apply bg-slate-900; */
-/* } */
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+.inter-med {
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+html,
+body {
+  @apply text-neutral-200;
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: condensed;
+}
 button {
-  @apply
-    bg-slate-600
+  @apply bg-neutral-600
     border-b-4
-    border-slate-800
+    border-neutral-800
     font-bold
-    hover:bg-slate-700
-    hover:border-slate-500
+    hover:bg-neutral-700
+    hover:border-neutral-500
     px-4
     py-2
     rounded
-    text-white
-    ;
+    text-white;
 }
diff --git a/client/src/components/auth.rs b/client/src/components/auth.rs
index bca2d39..2320e16 100644
--- a/client/src/components/auth.rs
+++ b/client/src/components/auth.rs
@@ -50,14 +50,14 @@ pub fn Auth() -> impl IntoView {
             <p>Username:</p>
             <form onsubmit="return false" on:submit=send_login>
                 <input
-                    class="w-96 font-mono rounded-sm bg-slate-900 text-slate-200"
+                    class="w-96 font-mono rounded-sm bg-neutral-900 text-neutral-200"
                     placeholder=move || username.get()
                     node_ref=username_input_ref
                     disabled=move || !connected()
                 />
                 <br/>
                 <input
-                    class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-slate-600 border-slate-800 hover:bg-slate-700 hover:border-slate-500"
+                    class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-neutral-600 border-neutral-800 hover:bg-neutral-700 hover:border-neutral-500"
                     type="submit"
                     value="Send"
                     disabled=move || !connected()
diff --git a/client/src/components/browser.rs b/client/src/components/browser.rs
index 257ac55..32daa4b 100644
--- a/client/src/components/browser.rs
+++ b/client/src/components/browser.rs
@@ -71,22 +71,22 @@ pub fn Browser() -> impl IntoView {
             <form onsubmit="return false" on:submit=new_game>
                 <h2 class="text-2xl">Create Game</h2>
                 <input
-                    class="w-80 h-11 font-mono rounded-sm bg-slate-900 text-slate-200"
+                    class="w-80 h-11 font-mono rounded-sm bg-neutral-900 text-neutral-200"
                     placeholder="Name"
                     disabled=move || !connected()
                     node_ref=new_game_name_ref
                 />
                 <h2 class="text-2xl">Packs</h2>
                 <div class="p-2">
-                    <button type="button" class="bg-slate-600">
+                    <button type="button" class="bg-neutral-600">
                         <input type="checkbox" id="all"/>
                         <label for="all">All</label>
                     </button>
-                    <button type="button" class="bg-slate-600">
+                    <button type="button" class="bg-neutral-600">
                         <input type="checkbox" id="official" checked/>
                         <label for="official">Official</label>
                     </button>
-                    <button type="button" class="bg-slate-600" on:click=show_packs_button>
+                    <button type="button" class="bg-neutral-600" on:click=show_packs_button>
                         <label>Custom</label>
                     </button>
                     finish this
@@ -176,7 +176,7 @@ pub fn Browser() -> impl IntoView {
                 </Show>
 
                 <input
-                    class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-slate-600 border-slate-800 hover:bg-slate-700 hover:border-slate-500"
+                    class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-neutral-600 border-neutral-800 hover:bg-neutral-700 hover:border-neutral-500"
                     type="submit"
                     disabled=move || !connected()
                     value="New Game"
diff --git a/client/src/components/chat.rs b/client/src/components/chat.rs
index 81ce360..3a9e130 100644
--- a/client/src/components/chat.rs
+++ b/client/src/components/chat.rs
@@ -103,7 +103,7 @@ pub fn Chat() -> impl IntoView {
             <span class="flex">
                 <textarea
                     node_ref=chat_history_ref
-                    class="w-96 h-60 font-mono rounded-sm resize-none bg-slate-900 text-slate-200"
+                    class="w-96 h-60 font-mono rounded-sm resize-none bg-neutral-900 text-neutral-200"
                     readonly=true
                     wrap="soft"
                 >
@@ -119,12 +119,12 @@ pub fn Chat() -> impl IntoView {
             <span>
                 <form onsubmit="return false" on:submit=send_message>
                     <input
-                        class="w-80 h-11 font-mono rounded-sm bg-slate-900 text-slate-200"
+                        class="w-80 h-11 font-mono rounded-sm bg-neutral-900 text-neutral-200"
                         placeholder="talk shit..."
                         node_ref=chat_input_ref
                     />
                     <input
-                        class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-slate-600 border-slate-800 hover:bg-slate-700 hover:border-slate-500"
+                        class="py-2 px-4 pl-4 font-bold text-white rounded border-b-4 bg-neutral-600 border-neutral-800 hover:bg-neutral-700 hover:border-neutral-500"
                         type="submit"
                         value="Send"
                         disabled=move || !connected()
diff --git a/client/src/lib.rs b/client/src/lib.rs
index b8f9bc4..46cf6b4 100644
--- a/client/src/lib.rs
+++ b/client/src/lib.rs
@@ -17,7 +17,7 @@ pub fn App() -> impl IntoView {
     provide_meta_context();
 
     view! {
-        <Html class="bg-slate-900" lang="en" dir="ltr" attr:data-theme="dark"/>
+        <Html class="bg-neutral-900" lang="en" dir="ltr" attr:data-theme="dark"/>
 
         // sets the document title
         <Title text="Cards for Humanity"/>
diff --git a/client/src/pages/home.rs b/client/src/pages/home.rs
index 6575059..7b92dec 100644
--- a/client/src/pages/home.rs
+++ b/client/src/pages/home.rs
@@ -29,8 +29,8 @@ pub fn Home() -> impl IntoView {
         }>
 
             <div class="container m-auto">
-                <h1 class="text-6xl text-slate-300">"Cards For Humanity"</h1>
-                <div class="bg-slate-500">
+                <h1 class="inter-med text-6xl text-neutral-200">"Cards For Humanity"</h1>
+                <div class="bg-neutral-950">
                     <Websocket/>
                     <hr/>
                     <Auth/>