diff --git a/components/index.html b/components/index.html
index f5ac36e..40a60b3 100644
--- a/components/index.html
+++ b/components/index.html
@@ -12,6 +12,8 @@
 	</div>
 	{{else}}
 	<!-- user has room id => send him to his room -->
+	<div id="room">
 	{{template "room" .}}
+	</div>
 {{end}}
 {{end}}
diff --git a/components/playerlist.html b/components/playerlist.html
new file mode 100644
index 0000000..6be38df
--- /dev/null
+++ b/components/playerlist.html
@@ -0,0 +1,7 @@
+{{define "teamlist"}}
+<div class="playerlist border border-gray-300 rounded-lg p-4">
+{{range .}}
+    <p>{{.}}</p>
+{{end}}
+</div>
+{{end}}
diff --git a/components/room.html b/components/room.html
index 5f21717..ac145db 100644
--- a/components/room.html
+++ b/components/room.html
@@ -5,9 +5,15 @@
 <hr />
 <div class="flex justify-center">
   <!-- Left Panel -->
+  {{template "teamlist" .Room.BlueGuessers}}
+  {{if eq .State.Team ""}}
   {{template "teampew" "blue"}}
+  {{end}}
   <!-- Right Panel -->
+  {{if eq .State.Team ""}}
   {{template "teampew" "red"}}
+  {{end}}
+  {{template "teamlist" .Room.RedGuessers}}
 </div>
 <hr />
 <div id="cardtable">
diff --git a/components/teampew.html b/components/teampew.html
index 5ee2386..ebe3c68 100644
--- a/components/teampew.html
+++ b/components/teampew.html
@@ -1,8 +1,7 @@
 {{define "teampew"}}
-<!-- <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">
+<form hx-post="/join-team" hx-target="#ancestor">
     <input type="hidden" name="team" value="{{.}}">
   <div class="mb-1">
       <button type="submit" name="role" value="guesser" class="w-full bg-{{.}}-500 text-white py-2 px-4 rounded">
diff --git a/handlers/actions.go b/handlers/actions.go
index 75c9553..c3f1bf5 100644
--- a/handlers/actions.go
+++ b/handlers/actions.go
@@ -60,6 +60,26 @@ func getStateByCtx(ctx context.Context) (*models.UserState, error) {
 	return us, nil
 }
 
+func saveStateByCtx(ctx context.Context, state *models.UserState) error {
+	username, ok := ctx.Value(models.CtxUsernameKey).(string)
+	if !ok {
+		log.Debug("no username in ctx")
+		return errors.New("no username in ctx")
+	}
+	return saveState(username, state)
+}
+
+func saveFullInfoByUsername(username string, fi *models.FullInfo) error {
+	// INFO: unfortunately working no transactions; so case are possible where first object is updated but the second is not
+	if err := saveState(username, fi.State); err != nil {
+		return err
+	}
+	if err := saveRoom(fi.Room); err != nil {
+		return err
+	}
+	return nil
+}
+
 // cache
 
 func saveState(username string, state *models.UserState) error {
diff --git a/handlers/auth.go b/handlers/auth.go
index f096b1e..5800db1 100644
--- a/handlers/auth.go
+++ b/handlers/auth.go
@@ -59,7 +59,6 @@ func HandleFrontLogin(w http.ResponseWriter, r *http.Request) {
 	}
 	// make sure username does not exists
 	cleanName := utils.RemoveSpacesFromStr(username)
-	// TODO: create user in db
 	// login user
 	cookie, err := makeCookie(cleanName, r.RemoteAddr)
 	if err != nil {
@@ -73,16 +72,15 @@ func HandleFrontLogin(w http.ResponseWriter, r *http.Request) {
 		abortWithError(w, err.Error())
 		return
 	}
-	// session, ok :=r.Context().Value(models.CtxSessionKey).(*models.Session)
-	// if !ok{
-	// 	abortWithError(w, "failed to extract session from ctx")
-	// 	return
-	// }
-	// state := models.InitState(cleanName)
 	state := models.MakeTestState()
 	state.State.Username = cleanName
 	// save state to cache
-	saveState(cleanName, state.State)
+	// if err := saveState(cleanName, state.State); err != nil {
+	if err := saveFullInfoByUsername(cleanName, state); err != nil {
+		log.Error("failed to save state", "error", err)
+		abortWithError(w, err.Error())
+		return
+	}
 	tmpl.ExecuteTemplate(w, "base", state)
 }
 
diff --git a/handlers/game.go b/handlers/game.go
index 639aa2a..c6fd2c1 100644
--- a/handlers/game.go
+++ b/handlers/game.go
@@ -66,6 +66,19 @@ func HandleRoomEnter(w http.ResponseWriter, r *http.Request) {
 		abortWithError(w, msg)
 		return
 	}
+	state, err := getStateByCtx(ctx)
+	if err != nil {
+		log.Error("failed to get state", "error", err)
+		abortWithError(w, err.Error())
+		return
+	}
+	state.RoomID = room.ID
+	// update state
+	if err := saveStateByCtx(ctx, state); err != nil {
+		log.Error("failed to update state", "error", err)
+		abortWithError(w, err.Error())
+		return
+	}
 	// send msg of created room
 	// h.Broker.Notifier <- broker.NotificationEvent{
 	// 	EventName: models.MsgRoomListUpdate,
@@ -82,23 +95,66 @@ func HandleRoomEnter(w http.ResponseWriter, r *http.Request) {
 
 func HandleJoinTeam(w http.ResponseWriter, r *http.Request) {
 	// parse payload
-	team := r.URL.Query().Get("team")
-	role := r.URL.Query().Get("role")
+	// team := r.URL.Query().Get("team")
+	// role := r.URL.Query().Get("role")
+	r.ParseForm()
+	team := r.PostFormValue("team")
+	role := r.PostFormValue("role")
 	if team == "" || role == "" {
 		msg := "missing team or role"
 		log.Error(msg)
 		abortWithError(w, msg)
-		// error
 		return
 	}
 	// get username
-	// get state
+	fi, _ := getFullInfoByCtx(r.Context())
 	// get room
+	if role == "mime" {
+		if team == "blue" {
+			fi.Room.BlueMime = fi.State.Username
+			fi.State.Team = "blue"
+			fi.State.Role = "mime"
+		} else if team == "red" {
+			fi.Room.RedMime = fi.State.Username
+			fi.State.Team = "red"
+			fi.State.Role = "mime"
+		} else {
+			msg := "uknown team:" + team
+			log.Error(msg)
+			abortWithError(w, msg)
+			return
+		}
+	} else if role == "guesser" {
+		if team == "blue" {
+			fi.Room.BlueGuessers = append(fi.Room.BlueGuessers, fi.State.Username)
+			fi.State.Team = "red"
+			fi.State.Role = "guesser"
+		} else if team == "red" {
+			fi.Room.RedGuessers = append(fi.Room.RedGuessers, fi.State.Username)
+			fi.State.Team = "red"
+			fi.State.Role = "guesser"
+		} else {
+			msg := "uknown team:" + team
+			log.Error(msg)
+			abortWithError(w, msg)
+			return
+		}
+	} else {
+		msg := "uknown role:" + role
+		log.Error(msg)
+		abortWithError(w, msg)
+		return
+	}
+	if err := saveFullInfoByUsername(fi.State.Username, fi); err != nil {
+		log.Error("failed to save state", "error", err)
+		abortWithError(w, err.Error())
+		return
+	}
 	// return html
 	tmpl, err := template.ParseGlob("components/*.html")
 	if err != nil {
 		abortWithError(w, err.Error())
 		return
 	}
-	tmpl.ExecuteTemplate(w, "base", nil)
+	tmpl.ExecuteTemplate(w, "base", fi)
 }
diff --git a/main.go b/main.go
index 11c742f..bc0cd51 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ func ListenToRequests(port string) error {
 	mux.HandleFunc("GET /", handlers.HandleHome)
 	mux.HandleFunc("POST /login", handlers.HandleFrontLogin)
 	mux.HandleFunc("GET /room", handlers.HandleRoomEnter)
-	mux.HandleFunc("GET /join-team", handlers.HandleJoinTeam)
+	mux.HandleFunc("POST /join-team", handlers.HandleJoinTeam)
 	//elements
 	mux.HandleFunc("GET /room/createform", handlers.HandleShowCreateForm)
 	mux.HandleFunc("GET /room/hideform", handlers.HandleHideCreateForm)
diff --git a/models/state.go b/models/state.go
index a164b78..afd7a20 100644
--- a/models/state.go
+++ b/models/state.go
@@ -11,11 +11,11 @@ const (
 	// UserTeam
 	UserTeamBlue = "blue"
 	UserTeamRed  = "red"
-	UserTeamNone = "none"
+	UserTeamNone = ""
 	//UserRole
 	UserRoleMime    = "mime"
 	UserRoleGuesser = "guesser"
-	UserRoleNone    = "none"
+	UserRoleNone    = ""
 )
 
 func StrToUserTeam(s string) UserTeam {
@@ -76,10 +76,12 @@ func MakeTestState() *FullInfo {
 		{Word: "cloud", Color: "white"},
 	}
 	room := &Room{
-		ID:          "test-id",
-		CreatedAt:   time.Now(),
-		CreatorName: "test-name",
-		Cards:       cards,
+		ID:           "test-id",
+		CreatedAt:    time.Now(),
+		CreatorName:  "test-name",
+		Cards:        cards,
+		RedGuessers:  []string{"Adam", "Eve"},
+		BlueGuessers: []string{"Abel", "Kain"},
 	}
 	us := &UserState{
 		Username: "test-name",