diff --git a/components/room.html b/components/room.html
index e3dd763..9704937 100644
--- a/components/room.html
+++ b/components/room.html
@@ -1,6 +1,7 @@
 {{define "room"}}
 <div id="interier" hx-get="/" hx-trigger="sse:roomupdate_{{.State.RoomID}}" class=space-y-2>
-  <div id="meta">
+  <div id="headwrapper" class="grid grid-cols-1 md:grid-cols-5 md:gap-4">
+  <div id="meta" class="md:col-span-1 border-2 rounded-lg text-center space-y-2">
     <p>Hello {{.State.Username}};</p>
     <p>Room created by {{.Room.CreatorName}};</p>
     <p>Room link:</p>
@@ -16,13 +17,13 @@
     {{end}}
     <p>
       {{if eq .State.Team ""}}
-      join the team!
+        you don't have a role! join the team ->
       {{else}}
       you're on the team <span class="text-{{.State.Team}}-500">{{.State.Team}}</span>!
       {{end}}
     </p>
   </div>
-  <hr />
+  <div id="infopatch"   class="md:col-span-3">
   {{if .Room.IsRunning}}
     <p>Turn of the <span class="text-{{.Room.TeamTurn}}-500">{{.Room.TeamTurn}}</span> team</p>
 {{template "turntimer" .Room}}
@@ -48,6 +49,8 @@
     <!-- Right Panel -->
     {{template "teamlist" .Room.RedTeam}}
   </div>
+  </div>
+  </div>
   <hr/>
   <div class="grid grid-cols-1 md:grid-cols-5 md:gap-4">
     <div hx-get="/actionhistory" hx-trigger="sse:backlog_{{.Room.ID}}" class="md:col-span-1">