diff --git a/routes/room_page.go b/routes/room_page.go
index c68b70b..47413ac 100644
--- a/routes/room_page.go
+++ b/routes/room_page.go
@@ -41,6 +41,8 @@ func registerPageRoutes(
 			http.StripPrefix(subscribeRoomPath, streamingRoomStates(templateFs, roomsM))))
 
 	http.HandleFunc("/rooms/preview-templates", roomTemplatesPreview(templateFs))
+
+	http.HandleFunc("/rooms/speakerControls", speakerControlsRoute(templateFs))
 }
 
 func streamingRoomStates(
@@ -77,7 +79,7 @@ func streamingRoomStates(
 		roomStream := roomsM.Subscribe(r.Context(), roomName)
 		for room := range roomStream {
 			// log.Printf("/rooms/streamingRoom iterating with %+v", room)
-			fmt.Fprint(w, "data: ")
+			fmt.Fprint(w, "event: roomTableUpdate\ndata: ")
 
 			var buffer bytes.Buffer
 
@@ -96,6 +98,11 @@ func streamingRoomStates(
 
 			fmt.Fprint(w, "\n\n")
 			w.(http.Flusher).Flush()
+			if session.PersonId == room.CurrentSpeaker {
+				log.Printf("/rooms/subscribe sending 'become-speaker' to %s", session.PersonId)
+				fmt.Fprint(w, "event: become-speaker\ndata:yo\n\n")
+				w.(http.Flusher).Flush()
+			}
 		}
 	}
 }
@@ -119,8 +126,10 @@ func raiseGestureHandRoute(
 			// TODO return error i guess
 			return
 		}
+		var room rooms.Room
 		err = roomsM.Update(r.Context(), session.RoomId, func(fromRoom rooms.Room) (toRoom rooms.Room) {
 			toRoom = fromRoom.RaiseHand(session.PersonId, selectedGesture)
+			room = toRoom
 			return toRoom
 		})
 		if err != nil {
@@ -132,19 +141,24 @@ func raiseGestureHandRoute(
 		tmpl := template.Must(
 			template.New("").ParseFS(templateFs, tableTemplates))
 
-		var gesturesData []GestureData
-		for _, gesture := range rooms.GesturesHighToLow {
-			gesturesData = append(gesturesData, GestureData{
-				Url:  fmt.Sprintf("%s%d", raiseHandPath, gesture),
-				Gesture: gesture,
-				IsSelected: selectedGesture == gesture,
-			})
-		}
-		err = tmpl.ExecuteTemplate(w, "controls", &gesturesData)
-		if err != nil {
-			log.Printf("/rooms/releaseHand error saving hand: %s\n", err)
+		if session.PersonId == room.CurrentSpeaker {
+			tmpl.ExecuteTemplate(w, "speakerControls", nil)
 			return
-			// TODO return error i guess
+		} else {
+			var gesturesData []GestureData
+			for _, gesture := range rooms.GesturesHighToLow {
+				gesturesData = append(gesturesData, GestureData{
+					Url:        fmt.Sprintf("%s%d", raiseHandPath, gesture),
+					Gesture:    gesture,
+					IsSelected: selectedGesture == gesture,
+				})
+			}
+			err = tmpl.ExecuteTemplate(w, "controls", &gesturesData)
+			if err != nil {
+				log.Printf("/rooms/releaseHand error saving hand: %s\n", err)
+				return
+				// TODO return error i guess
+			}
 		}
 	}
 }
@@ -178,8 +192,8 @@ func releaseHandRoute(
 		var gesturesData []GestureData
 		for _, gesture := range rooms.GesturesHighToLow {
 			gesturesData = append(gesturesData, GestureData{
-				Url:  fmt.Sprintf("%s%d", raiseHandPath, gesture),
-				Gesture: gesture,
+				Url:        fmt.Sprintf("%s%d", raiseHandPath, gesture),
+				Gesture:    gesture,
 				IsSelected: false,
 			})
 		}
@@ -192,7 +206,6 @@ func releaseHandRoute(
 	}
 }
 
-
 func roomPageRoute(
 	templateFs *embed.FS,
 	roomsM rooms.RoomManager,
@@ -236,8 +249,8 @@ func roomPageRoute(
 		selectedGesture, isSelected := room.ParticipantHands[session.PersonId]
 		for _, gesture := range rooms.GesturesHighToLow {
 			gesturesData = append(gesturesData, GestureData{
-				Url:  fmt.Sprintf("%s%d", raiseHandPath, gesture),
-				Gesture: gesture,
+				Url:        fmt.Sprintf("%s%d", raiseHandPath, gesture),
+				Gesture:    gesture,
 				IsSelected: isSelected && selectedGesture == gesture,
 			})
 		}
@@ -269,8 +282,18 @@ func roomPageRoute(
 	}
 }
 
+func speakerControlsRoute(
+	templateFs *embed.FS,
+) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		templateFile := "templates/room.gohtml"
+		tmpl := template.Must(template.ParseFS(templateFs, templateFile))
+		tmpl.ExecuteTemplate(w, "speakerControls", nil)
+	}
+}
+
 type GestureData struct {
-	Url  string
-	Gesture rooms.HandGesture
+	Url        string
+	Gesture    rooms.HandGesture
 	IsSelected bool
 }
diff --git a/routes/room_page_templates_preview.go b/routes/room_page_templates_preview.go
index fb4ef6b..0254bbd 100644
--- a/routes/room_page_templates_preview.go
+++ b/routes/room_page_templates_preview.go
@@ -57,6 +57,9 @@ func (r *roomTableData) Tangens() float64 {
 	}
 	return math.Tan(math.Pi / float64(r.Total())) // Math.tan(Math.PI/m);
 }
+func (r *roomTableData) IsViewerTheSpeaker() bool {
+	return r.currentPerson == r.CurrentSpeaker
+}
 
 type arrowData struct {
 	IsVisible        bool
diff --git a/routes/static/out.css b/routes/static/out.css
index cdaa914..cbb908e 100644
--- a/routes/static/out.css
+++ b/routes/static/out.css
@@ -734,6 +734,11 @@ video {
   background-color: hsl(var(--color) / 0.5);
 }
 
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
 .bg-green-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
diff --git a/routes/templates/room.gohtml b/routes/templates/room.gohtml
index be677c2..7651283 100644
--- a/routes/templates/room.gohtml
+++ b/routes/templates/room.gohtml
@@ -26,54 +26,71 @@
       </p>
     <![endif]-->
     {{ define "main-content" }}
-    <main class="h-screen">
-      <div class="h-full w-full flex flex-row">
-        <script src="/static/dist/ext/sse.js"></script>
-        {{/* This is dynamic table, updated from SSE */}}
-        <div
-          id="roomTextContainer"
-          class="grid place-content-center grow"
+    <script src="/static/dist/ext/sse.js"></script>
+    <main class="h-screen  w-full flex flex-row"
           hx-ext="sse"
-          sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}"
-        >
-          {{ block "simpleRoomShow" .Room }}
-          <!-- TODO use template, not block, have only 'loader' in base place -->
-          <!-- use different template based on 'mobile' query param -->
-          <div sse-swap="message">
-            <div>
-              {{ template "roomPeople" . }}
-            </div>
+          sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}">
+      {{/* This is dynamic table, updated from SSE */}}
+      <section
+        id="roomTable"
+        class="grid place-content-center grow"
+      >
+        {{ block "simpleRoomShow" .Room }}
+        <!-- TODO use template, not block, have only 'loader' in base place -->
+        <!-- use different template based on 'mobile' query param -->
+        <div sse-swap="roomTableUpdate">
+          <div>
+            {{ template "roomPeople" . }}
           </div>
-          {{ end }}
         </div>
-        {{/* This is personal hand controls */}}
-        <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5">
-          {{ block "controls" .Gestures }}
-          {{ range . }}
+        {{ end }}
+      </section>
+      {{/* This is personal hand controls */}}
+      {{ if not .Room.IsViewerTheSpeaker }}
+      {{ block "controls" .Gestures }}
+      <section id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5"
+               hx-trigger="sse:become-speaker"
+               hx-get="/rooms/speakerControls"
+               hx-swap="outerHTML"
+               >
+        {{ range . }}
 
-          {{/* expects routes.GestureData */}}
-          <button
-            {{ if not .IsSelected }}
-            hx-get="{{ .Url }}"
-            class="bg-white rounded border-[hsl(var(--color))] border-2 text-[hsl(var(--color-dark))] font-bold h-16 rounded-l-full flex flex-row items-center"
-            {{ else }}
-            hx-get="/rooms/releaseHand"
-            class="bg-[hsl(var(--color))]/50 rounded border-[hsl(var(--color-dark))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
-            {{ end }}
-            hx-target="#controls"
-            style="--color: var({{.Gesture.GetGestureInfo.Color}});
-                   --color-dark: var({{.Gesture.GetGestureInfo.ColorDark}})
-                   ">
-            <img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
-                 class="h-full"
-                 />
-            <p class="px-5 text-l">{{ .Gesture.String }} </p>
-          </button>
+        {{/* expects routes.GestureData */}}
+        <button
+          {{ if not .IsSelected }}
+          hx-get="{{ .Url }}"
+          class="bg-white rounded border-[hsl(var(--color))] border-2 text-[hsl(var(--color-dark))] font-bold h-16 rounded-l-full flex flex-row items-center"
+          {{ else }}
+          hx-get="/rooms/releaseHand"
+          class="bg-[hsl(var(--color))]/50 rounded border-[hsl(var(--color-dark))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
+          {{ end }}
+          hx-target="#controls"
+          style="--color: var({{.Gesture.GetGestureInfo.Color}});
+                  --color-dark: var({{.Gesture.GetGestureInfo.ColorDark}})
+                  ">
+          <img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
+                class="h-full"
+                />
+          <p class="px-5 text-l">{{ .Gesture.String }} </p>
+        </button>
 
-          {{ end }}
-          {{ end }}
-        </div>
-      </div>
+        {{ end }}
+      </section>
+      {{ end }}
+      {{ else }}
+      {{ block "speakerControls" . }}
+      <section id="controls" class="bg-blue-100 flex flex-col p-10 gap-y-5"
+               hx-swap="outerHTML">
+        <button
+          hx-get="/rooms/releaseHand"
+          class="bg-white rounded border border-2 font-bold h-16 rounded-l-full flex flex-row items-center"
+          hx-target="#controls"
+          >
+          <p class="px-5 text-l">I have finished speaking</p>
+        </button>
+      </section>
+      {{ end }}
+      {{ end }}
     </main>
     {{ end }}
   </body>