diff --git a/components/base.html b/components/base.html
index 63b1961..d2ca24f 100644
--- a/components/base.html
+++ b/components/base.html
@@ -13,7 +13,7 @@
 		body{
             background-color: #0C1616FF;
             color: #8896b2;
-            max-width: 800px;
+            max-width: 1000px;
             min-width: 0;
             margin: 2em auto !important;
             margin-left: auto;
diff --git a/components/cardtable.html b/components/cardtable.html
index 6609337..c496e63 100644
--- a/components/cardtable.html
+++ b/components/cardtable.html
@@ -1,7 +1,7 @@
 {{define "cardtable"}}
   <!-- Center Panel -->
-  <div class="w-1/2 p-4 flex justify-center">
-    <div class="grid grid-cols-5 gap-2">
+  <div class="flex justify-center">
+    <div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
       {{range .Room.Cards}}
 	{{template "cardword" .}} 
       {{end}}
diff --git a/components/login.html b/components/login.html
index bbbe3a4..68179b2 100644
--- a/components/login.html
+++ b/components/login.html
@@ -4,7 +4,7 @@
           <div>
             <label For="username" class="block text-sm font-medium leading-6 text-white-900">tell us your username</label>
             <div class="mt-2">
-              <input id="username" name="username" hx-target="#login_notice" hx-swap="outerHTML" hx-post="/check/name" hx-trigger="input changed delay:400ms" autocomplete="username" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-center"/>
+              <input id="username" name="username" hx-target="#login_notice" hx-swap="outerHTML" hx-post="/check/name" hx-trigger="input changed delay:400ms" autocomplete="username" required class="block w-full rounded-md border-0 bg-white py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-center"/>
             </div>
 	<div id="login_notice">this name looks available</div>
           </div>
diff --git a/components/room.html b/components/room.html
index 81fedd1..403a55d 100644
--- a/components/room.html
+++ b/components/room.html
@@ -1,12 +1,16 @@
 {{define "room"}}
-<div class="flex h-screen">
-  <div id="hello-user">
-    <p>Hello {{.Username}}</p>
-  </div>
+<div id="hello-user">
+  <p>Hello {{.Username}}</p>
+</div>
+<hr />
+<div class="flex justify-center">
   <!-- Left Panel -->
   {{template "teampew" "blue"}}
-  {{template "cardtable" .}}
   <!-- Right Panel -->
   {{template "teampew" "red"}}
 </div>
+<hr />
+<div id="cardtable">
+  {{template "cardtable" .}}
+</div>
 {{end}}
diff --git a/components/teampew.html b/components/teampew.html
index f908a41..5ee2386 100644
--- a/components/teampew.html
+++ b/components/teampew.html
@@ -1,9 +1,10 @@
 {{define "teampew"}}
-<div class="w-1/4 p-4 border-r">
+<!-- <div class="w-1/4 p-4 border-r"> -->
+<div>
 <h2 class="text-xl mb-4">Join {{.}} Team</h2>
 <form hx-post="/join-team" hx-target="#room-content">
     <input type="hidden" name="team" value="{{.}}">
-  <div class="mb-2">
+  <div class="mb-1">
       <button type="submit" name="role" value="guesser" class="w-full bg-{{.}}-500 text-white py-2 px-4 rounded">
       Join as Guesser
     </button>