diff --git a/frontend/src/main/scala/industries/sunshine/planningpoker/OtherPlayers.scala b/frontend/src/main/scala/industries/sunshine/planningpoker/OtherPlayers.scala
new file mode 100644
index 0000000..340dbe6
--- /dev/null
+++ b/frontend/src/main/scala/industries/sunshine/planningpoker/OtherPlayers.scala
@@ -0,0 +1,44 @@
+package industries.sunshine.planningpoker
+
+import scala.scalajs.js
+import com.raquo.laminar.api.L.{*, given}
+import industries.sunshine.planningpoker.common.Models.*
+
+object OtherPlayers {
+  def render(roomStateSignal: Signal[RoomStateView]): Element = {
+    val otherPlayers = roomStateSignal.map { state =>
+      state.players.filterNot(_.id == state.me).zipWithIndex
+    }
+
+    div(
+      className := "flex flex-row",
+      children <-- otherPlayers.split(_._1.id) { (id, initial, playerSignal) =>
+        renderPlayer(playerSignal, roomStateSignal.map(_.allowedCards.size))
+      }
+    )
+  }
+
+  def renderPlayer(p: Signal[(Player, Int)], cardsAmount: Signal[Int]): Element = {
+    val xOffsetStyleSignal = p.map(_._2)
+    div(
+      className := "w-20 h-20 border-2 border-amber-400 m-2 absolute",
+      // left <-- p.map(tuple => ((1 + tuple._2) * 10000).toString()),
+      styleAttr <-- p.map(tuple => s"left: ${(1 + tuple._2) * 100}px"),
+      child.text <-- p.map(_._1.name),
+      renderHandCardBacks(cardsAmount)
+    )
+  }
+
+  def renderHandCardBacks(amountSignal: Signal[Int]): Element = {
+    def renderCard(index: Int): Element =
+      div(
+        className := "w-4 h-8 m-1 rounded bg-gray-600 text-yellow"
+      )
+
+    div(
+      className := "flex flex-row",
+      children <-- amountSignal.map { amount => (1 to amount).map(renderCard) }
+    )
+  }
+
+}
diff --git a/frontend/src/main/scala/industries/sunshine/planningpoker/RoomView.scala b/frontend/src/main/scala/industries/sunshine/planningpoker/RoomView.scala
index 57de0ca..837dde5 100644
--- a/frontend/src/main/scala/industries/sunshine/planningpoker/RoomView.scala
+++ b/frontend/src/main/scala/industries/sunshine/planningpoker/RoomView.scala
@@ -32,46 +32,15 @@ object RoomView {
     val roomStateSignal: Signal[RoomStateView] =
       wsStream.received.startWith(RoomStateView.empty)
 
-    val otherPlayers = roomStateSignal.map { state =>
-      state.players.filterNot(_.id == state.me).zipWithIndex
-    }
-
     val wsFinalDeathSignal = wsStream.closed.collect { case (_, false) => () }
 
     div(
       className := "w-full h-full border-4 border-amber-900 flex flex-col",
-      div(
-        className := "flex flex-row",
-        children <-- otherPlayers.split(_._1.id) { (id, initial, playerSignal) =>
-          renderPlayer(playerSignal, roomStateSignal.map(_.allowedCards.size))
-        }
-      ),
+      OtherPlayers.render(roomStateSignal),
       TableView.renderTable(roomStateSignal),
       wsStream.connect,
       wsFinalDeathSignal.map(_ => false) --> loggedIn
     )
   }
 
-  def renderPlayer(p: Signal[(Player, Int)], cardsAmount: Signal[Int]): Element = {
-    val xOffsetStyleSignal = p.map(_._2)
-    div(
-      className := "w-20 h-20 border-2 border-amber-400 m-2 absolute",
-      // left <-- p.map(tuple => ((1 + tuple._2) * 10000).toString()),
-      styleAttr <-- p.map(tuple => s"left: ${(1 + tuple._2) * 100}px"),
-      child.text <-- p.map(_._1.name),
-      renderHandCardBacks(cardsAmount)
-    )
-  }
-
-  def renderHandCardBacks(amountSignal: Signal[Int]): Element = {
-    def renderCard(index: Int): Element =
-      div(
-        className := "w-4 h-8 m-1 rounded bg-gray-600 text-yellow"
-      )
-
-    div(
-      className := "flex flex-row",
-      children <-- amountSignal.map { amount => (1 to amount).map(renderCard) }
-    )
-  }
 }