diff --git a/routes/room_page_templates_preview.go b/routes/room_page_templates_preview.go
index 8d36147..0f5a5a5 100644
--- a/routes/room_page_templates_preview.go
+++ b/routes/room_page_templates_preview.go
@@ -12,8 +12,8 @@ import (
 )
 
 type brickState struct {
-	ColorClass   template.CSS
 	TemplateType string
+	Gesture 	 rooms.HandGesture
 }
 type personData struct {
 	Name      string
@@ -184,8 +184,8 @@ func (pData personData) BricksForPerson() []brickState {
 		}
 
 		result[gesture] = brickState{
-			ColorClass:   gesture.GetGestureInfo().Color,
 			TemplateType: templateType,
+			Gesture: gesture,
 		}
 	}
 
@@ -198,12 +198,6 @@ func roomTemplatesPreview(
 ) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 
-		type SingleBrickData struct {
-			ColorClass template.CSS
-			Name       string
-			Gesture    rooms.HandGesture
-		}
-
 		testPersonData := personData{
 			Name:     "John Doe",
 			IsRaised: true,
@@ -263,8 +257,8 @@ func roomTemplatesPreview(
 		}{
 			DefaultColor: "--expand-color",
 			ABrick: brickState{
-				ColorClass:   "--expand-color",
 				TemplateType: "raisedBrick",
+				Gesture: rooms.Expand,
 			},
 			Gestures: rooms.GesturesHighToLow[:],
 			TestPerson: testPersonData,
diff --git a/routes/templates/tableTemplates.gohtml b/routes/templates/tableTemplates.gohtml
index e1cd382..6c1eeb3 100644
--- a/routes/templates/tableTemplates.gohtml
+++ b/routes/templates/tableTemplates.gohtml
@@ -6,25 +6,25 @@
 {{ define "inactiveBrick" }}
 <div
   class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5"
-  style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
+  style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
 ></div>
 {{ end }}
 {{ define "raisedBrick" }}
 <div
   class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25"
-  style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
+  style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
 ></div>
 {{ end }}
 {{ define "speakerBrick" }}
 <div
   class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/50 shadow-[0_0_15px_rgba(0,_0,_0,_0.5)] shadow-[hsl(var(--brick-color))] animate-pulse"
-  style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
+  style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
 ></div>
 {{ end }}
 {{ define "markBrick" }}
 <div
   class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
-  style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
+  style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
 >
   X
 </div>
@@ -32,31 +32,31 @@
 {{ define "markAndRaisedBrick" }}
 <div
   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)"
+  style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
 >
   X
 </div>
 {{ end }}
 
+{{/* takes in router.brickState as parameter */}}
 <h2>Now for BrickData taking parametrized template name</h2>
 {{ define "brick" }}
 {{ if eq .TemplateType "inactiveBrick" }}
-  {{ template "inactiveBrick" .ColorClass }}
+  {{ template "inactiveBrick" .Gesture.GetGestureInfo }}
 {{ else if eq .TemplateType "raisedBrick" }}
-  {{template "raisedBrick" .ColorClass }}
+  {{template "raisedBrick" .Gesture.GetGestureInfo }}
 {{ else if eq .TemplateType "speakerBrick"}}
-  {{ template "speakerBrick" .ColorClass }}
+  {{ template "speakerBrick" .Gesture.GetGestureInfo }}
 {{ else if eq .TemplateType "markBrick" }}
-  {{ template "markBrick" .ColorClass }}
+  {{ template "markBrick" .Gesture.GetGestureInfo }}
 {{ else if eq .TemplateType "markAndRaisedBrick" }}
-  {{ template "markAndRaisedBrick" .ColorClass }}
+  {{ template "markAndRaisedBrick" .Gesture.GetGestureInfo }}
 {{ end }}
 {{end}}
 
 <h2>Now for a person</h2>
 <p>expected to be called with personData</p>
 {{ define "personBlocks" }}
-
 <div class="person-bricks flex flex-col items-center"
      id="person-{{.Index}}" style="--i: {{ .Index }}">
   {{ range .BricksForPerson }} {{ template "brick" . }} {{ end }}
diff --git a/routes/templates/tableTemplatesPreview.gohtml b/routes/templates/tableTemplatesPreview.gohtml
index 6c6a42c..abaf4c5 100644
--- a/routes/templates/tableTemplatesPreview.gohtml
+++ b/routes/templates/tableTemplatesPreview.gohtml
@@ -12,11 +12,11 @@
   {{ range .Gestures }}
   {{ with .GetGestureInfo }}
   <div class="border-2">for {{ .Name }}</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>
+  <div>{{ template "inactiveBrick" . }}</div>
+  <div>{{ template "raisedBrick" . }}</div>
+  <div>{{ template "speakerBrick" . }}</div>
+  <div>{{ template "markBrick" . }}</div>
+  <div>{{ template "markAndRaisedBrick" . }}</div>
   {{ end }}
   {{ end }}
 </section>