diff --git a/rooms/room.go b/rooms/room.go
index b19c7f8..7d306ed 100644
--- a/rooms/room.go
+++ b/rooms/room.go
@@ -1,6 +1,7 @@
 package rooms
 
 import (
+	"html/template"
 	"log"
 	"maps"
 	"slices"
@@ -242,3 +243,42 @@ func GestureFromInt(num int) (HandGesture, bool) {
 func (g HandGesture) String() string {
 	return [...]string{"Change Topic", "Probing Quesion", "Expand", "Clarifying Quesion", "Meta"}[g]
 }
+
+type GestureInfo struct {
+	Name 		   string
+	Color, BgColor template.CSS
+	IconUrl        template.URL
+}
+
+func (g HandGesture) GetGestureInfo() GestureInfo {
+	result := GestureInfo{}
+	switch g {
+	case ChangeTopic:
+		result = GestureInfo{
+			Color: "--change-topic-color",
+			BgColor: "--change-topic-dark",
+		}
+	case ProbingQ:
+		result = GestureInfo{
+			Color: "--probing-q-color",
+			BgColor: "--probing-q-dark",
+		}
+	case Expand:
+		result = GestureInfo{
+			Color: "--expand-color",
+			BgColor: "--expand-dark",
+		}
+	case ClarifyingQ:
+		result = GestureInfo{
+			Color: "--clarifying-q-color",
+			BgColor: "--clarifying-q-dark",
+		}
+	case Meta:
+		result = GestureInfo{
+			Color: "--meta-color",
+			BgColor: "--meta-dark",
+		}
+	}
+	result.Name = g.String()
+	return result
+}
diff --git a/routes/in.css b/routes/in.css
index 19c29e9..3682e47 100644
--- a/routes/in.css
+++ b/routes/in.css
@@ -4,10 +4,15 @@
 
 :root {
     --change-topic-color: 0deg 100% 50%;
+    --change-topic-dark: 0deg 57% 20%;
     --probing-q-color: 48deg 100% 50%;
+    --probing-q-dark: 48deg 100% 17%;
     --expand-color: 120deg 57% 50%;
+    --expand-dark: 120deg 57% 20%;
     --clarifying-q-color: 216deg 99% 55%;
+    --clarifying-q-dark: 216deg 57% 20%;
     --meta-color: 312deg 100% 50%;
+    --meta-dark: 312deg 57% 20%;
 }
 
 /* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
diff --git a/routes/room_page_templates_preview.go b/routes/room_page_templates_preview.go
index c6ba230..8d36147 100644
--- a/routes/room_page_templates_preview.go
+++ b/routes/room_page_templates_preview.go
@@ -25,13 +25,6 @@ type personData struct {
 	Index     int
 }
 
-var brickColors = map[rooms.HandGesture]template.CSS{
-	rooms.Meta:        "--meta-color",
-	rooms.ClarifyingQ: "--clarifying-q-color",
-	rooms.Expand:      "--expand-color",
-	rooms.ProbingQ:    "--probing-q-color",
-	rooms.ChangeTopic: "--change-topic-color",
-}
 
 // data to be passed to "roomPeople" template
 type roomTableData struct {
@@ -191,7 +184,7 @@ func (pData personData) BricksForPerson() []brickState {
 		}
 
 		result[gesture] = brickState{
-			ColorClass:   brickColors[gesture],
+			ColorClass:   gesture.GetGestureInfo().Color,
 			TemplateType: templateType,
 		}
 	}
@@ -208,6 +201,7 @@ func roomTemplatesPreview(
 		type SingleBrickData struct {
 			ColorClass template.CSS
 			Name       string
+			Gesture    rooms.HandGesture
 		}
 
 		testPersonData := personData{
@@ -262,7 +256,7 @@ func roomTemplatesPreview(
 
 		contentData := struct {
 			DefaultColor template.CSS
-			Bricks       []SingleBrickData
+			Gestures       []rooms.HandGesture
 			ABrick       brickState
 			TestPerson   personData
 			ARoom        *roomTableData
@@ -272,28 +266,7 @@ func roomTemplatesPreview(
 				ColorClass:   "--expand-color",
 				TemplateType: "raisedBrick",
 			},
-			Bricks: []SingleBrickData{
-				{
-					Name:       "expand",
-					ColorClass: brickColors[rooms.Expand],
-				},
-				{
-					Name:       "probing question",
-					ColorClass: brickColors[rooms.ProbingQ],
-				},
-				{
-					Name:       "change topic",
-					ColorClass: brickColors[rooms.ChangeTopic],
-				},
-				{
-					Name:       "clarifying question",
-					ColorClass: brickColors[rooms.ClarifyingQ],
-				},
-				{
-					Name:       "meta",
-					ColorClass: brickColors[rooms.Meta],
-				},
-			},
+			Gestures: rooms.GesturesHighToLow[:],
 			TestPerson: testPersonData,
 			ARoom: &roomTableData{
 				Room:          &aRoom,
diff --git a/routes/static/out.css b/routes/static/out.css
index e557c7a..2e218e6 100644
--- a/routes/static/out.css
+++ b/routes/static/out.css
@@ -604,6 +604,10 @@ video {
   flex: none;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -636,6 +640,10 @@ video {
   grid-template-rows: auto 1fr;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -656,6 +664,10 @@ video {
   gap: 1.5rem;
 }
 
+.gap-y-10 {
+  row-gap: 2.5rem;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -783,10 +795,15 @@ video {
 
 :root {
   --change-topic-color: 0deg 100% 50%;
+  --change-topic-dark: 0deg 57% 20%;
   --probing-q-color: 48deg 100% 50%;
+  --probing-q-dark: 48deg 100% 17%;
   --expand-color: 120deg 57% 50%;
+  --expand-dark: 120deg 57% 20%;
   --clarifying-q-color: 216deg 99% 55%;
+  --clarifying-q-dark: 216deg 57% 20%;
   --meta-color: 312deg 100% 50%;
+  --meta-dark: 312deg 57% 20%;
 }
 
 /* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
diff --git a/routes/templates/room.gohtml b/routes/templates/room.gohtml
index 72a3950..9dcaf03 100644
--- a/routes/templates/room.gohtml
+++ b/routes/templates/room.gohtml
@@ -27,11 +27,11 @@
     <![endif]-->
     {{ define "main-content" }}
     <main class="h-screen">
-      <div class="h-full w-full grid">
+      <div class="h-full w-full flex flex-row">
         <script src="/static/dist/ext/sse.js"></script>
         <div
           id="roomTextContainer"
-          class="grid place-content-center"
+          class="grid place-content-center grow"
           hx-ext="sse"
           sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}"
         >
@@ -45,7 +45,7 @@
           </div>
           {{ end }}
         </div>
-        <div id="controls" class="bg-green-300">
+        <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-10">
           {{ range .Gestures }}
           <button
             hx-get="{{ .Url }}"
diff --git a/routes/templates/tableTemplates.gohtml b/routes/templates/tableTemplates.gohtml
index 977eac6..e1cd382 100644
--- a/routes/templates/tableTemplates.gohtml
+++ b/routes/templates/tableTemplates.gohtml
@@ -1,5 +1,8 @@
 <h2>Single templates</h2>
 
+
+{{/* takes in rooms.GestureInfo as parameter */}}
+
 {{ define "inactiveBrick" }}
 <div
   class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5"
@@ -28,7 +31,7 @@
 {{ end }}
 {{ define "markAndRaisedBrick" }}
 <div
-  class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border bg-[hsl(var(--brick-color))]/25 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
+  class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
   style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
 >
   X
diff --git a/routes/templates/tableTemplatesPreview.gohtml b/routes/templates/tableTemplatesPreview.gohtml
index 8d2023e..6c6a42c 100644
--- a/routes/templates/tableTemplatesPreview.gohtml
+++ b/routes/templates/tableTemplatesPreview.gohtml
@@ -9,13 +9,15 @@
   <p> speaker </p>
   <p> mark </p>
   <p> mark and active </p>
-  {{ range .Bricks }}
+  {{ range .Gestures }}
+  {{ with .GetGestureInfo }}
   <div class="border-2">for {{ .Name }}</div>
-  <div>{{ template "inactiveBrick" .ColorClass }}</div>
-  <div>{{ template "raisedBrick" .ColorClass }}</div>
-  <div>{{ template "speakerBrick" .ColorClass }}</div>
-  <div>{{ template "markBrick" .ColorClass }}</div>
-  <div>{{ template "markAndRaisedBrick" .ColorClass }}</div>
+  <div>{{ template "inactiveBrick" .Color }}</div>
+  <div>{{ template "raisedBrick" .Color }}</div>
+  <div>{{ template "speakerBrick" .Color }}</div>
+  <div>{{ template "markBrick" .Color }}</div>
+  <div>{{ template "markAndRaisedBrick" .Color }}</div>
+  {{ end }}
   {{ end }}
 </section>