diff --git a/routes/in.css b/routes/in.css
index b5c61c9..d5a09f8 100644
--- a/routes/in.css
+++ b/routes/in.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+    --change-topic-color: 0deg 100% 50%;
+    --probing-q-color: 48deg 100% 50%;
+    --expand-color: 120deg 57% 50%;
+    --clarifying-q-color: 216deg 99% 55%;
+    --meta-color: 312deg 100% 50%;
+}
diff --git a/routes/room_page.go b/routes/room_page.go
index 473a488..252ae72 100644
--- a/routes/room_page.go
+++ b/routes/room_page.go
@@ -41,6 +41,8 @@ func registerPageRoutes(
 		authedPageMiddleware(
 			sessionSM,
 			http.StripPrefix(subscribeRoomPath, streamingRoomStates(templateFs, roomsM))))
+
+	http.HandleFunc("/rooms/preview-templates", roomTemplatesPreview(templateFs))
 }
 
 func streamingRoomStates(
@@ -186,7 +188,7 @@ func roomPageRoute(
 
 		room, found, err := roomsM.Get(roomName)
 		if err != nil || !found {
-			log.Printf("/room room for name %s not found or err: %s / found %d", roomName, err, found)
+			log.Printf("/room room for name %s not found or err: %s / found %s", roomName, err, found)
 			// TODO here should be append to error place
 			w.Header().Add("HX-Redirect", "/")
 			return
@@ -234,3 +236,55 @@ func roomPageRoute(
 		}
 	}
 }
+
+func roomTemplatesPreview(
+	templateFs *embed.FS,
+) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+
+		type BrickData struct {
+			ColorClass template.CSS
+			Name       string
+		}
+
+		contentData := struct {
+			Bricks []BrickData
+		}{
+			Bricks: []BrickData{
+				{
+					Name: "expand",
+					ColorClass: "--expand-color",
+				},
+				{
+					Name: "probing question",
+					ColorClass: "--probing-q-color",
+				},
+				{
+					Name: "change topic",
+					ColorClass: "--change-topic-color",
+				},
+				{
+					Name: "clarifying question",
+					ColorClass: "--clarifying-q-color",
+				},
+				{
+					Name: "meta",
+					ColorClass: "--meta-color",
+				},
+			},
+		}
+
+		pageData := pageData{
+			Header: headerData{Title: "look at the room templates"},
+			Content: contentData,
+		}
+
+		baseFile := "templates/base.gohtml"
+		tmpl := template.Must(template.ParseFS(templateFs, baseFile, "templates/tableTemplates.gohtml"))
+		err := tmpl.ExecuteTemplate(w, "full-page", pageData)
+		if err != nil {
+			log.Printf("yoyo, error %s", err)
+		}
+
+	}
+}
diff --git a/routes/static/out.css b/routes/static/out.css
index 04c43fd..f809e27 100644
--- a/routes/static/out.css
+++ b/routes/static/out.css
@@ -554,6 +554,10 @@ video {
   height: 3.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-full {
   height: 100%;
 }
@@ -562,6 +566,10 @@ video {
   height: 100vh;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -570,6 +578,16 @@ video {
   flex: none;
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -578,6 +596,10 @@ video {
   grid-template-rows: auto 1fr;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -594,6 +616,11 @@ video {
   gap: 1.5rem;
 }
 
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -610,6 +637,14 @@ video {
   border-width: 4px;
 }
 
+.border-\[hsl\(var\(--brick-color\)\)\] {
+  border-color: hsl(var(--brick-color));
+}
+
+.border-\[hsl\(var\(--brick-color\)\)\]\/25 {
+  border-color: hsl(var(--brick-color) / 0.25);
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -625,6 +660,18 @@ video {
   border-color: rgb(161 98 7 / var(--tw-border-opacity));
 }
 
+.bg-\[hsl\(var\(--brick-color\)\)\]\/25 {
+  background-color: hsl(var(--brick-color) / 0.25);
+}
+
+.bg-\[hsl\(var\(--brick-color\)\)\]\/5 {
+  background-color: hsl(var(--brick-color) / 0.05);
+}
+
+.bg-\[hsl\(var\(--brick-color\)\)\]\/50 {
+  background-color: hsl(var(--brick-color) / 0.5);
+}
+
 .bg-amber-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 191 36 / var(--tw-bg-opacity));
@@ -654,6 +701,10 @@ video {
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -673,6 +724,14 @@ video {
   line-height: 1.75rem;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
+.text-\[hsl\(var\(--brick-color\)\)\]\/50 {
+  color: hsl(var(--brick-color) / 0.5);
+}
+
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -682,6 +741,25 @@ video {
   text-decoration-line: underline;
 }
 
+.shadow-\[0_0_15px_rgba\(0\2c _0\2c _0\2c _0\.5\)\] {
+  --tw-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+  --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-\[hsl\(var\(--brick-color\)\)\] {
+  --tw-shadow-color: hsl(var(--brick-color));
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+:root {
+  --change-topic-color: 0deg 100% 50%;
+  --probing-q-color: 48deg 100% 50%;
+  --expand-color: 120deg 57% 50%;
+  --clarifying-q-color: 216deg 99% 55%;
+  --meta-color: 312deg 100% 50%;
+}
+
 .invalid\:bg-red-700:invalid {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
diff --git a/routes/templates/tableTemplates.gohtml b/routes/templates/tableTemplates.gohtml
new file mode 100644
index 0000000..0f62515
--- /dev/null
+++ b/routes/templates/tableTemplates.gohtml
@@ -0,0 +1,58 @@
+{{define "main-content"}}
+<p2>Single templates</p2>
+<section
+  class="grid grid-cols-2 border-4"
+  style="--brick-color: var(--expand-color)"
+>
+  <div class="border-2">inactive:</div>
+  <div class="border-2 p-3">
+    {{ block "inactive-brick" . }}
+    <div
+      class="h-8 w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5"
+    ></div>
+    {{ end }}
+  </div>
+  <div class="border-2">raised:</div>
+  <div class="border-2 p-3">
+    {{ block "raised-brick" . }}
+    <div
+      class="h-8 w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25"
+    ></div>
+    {{ end }}
+  </div>
+  <div class="border-2">speaker:</div>
+  <div class="border-2 p-3">
+    {{ block "speaker-brick" . }}
+    <div
+      class="h-8 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"
+    ></div>
+    {{ end }}
+  </div>
+  <div class="border-2">mark:</div>
+  <div class="border-2 p-3">
+    {{ block "mark-brick" . }}
+    <div
+      class="h-8 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"
+    >
+      X
+    </div>
+    {{ end }}
+  </div>
+</section>
+<p2>For each type</p2>
+<section
+    class="grid grid-cols-2 border-4"
+  >
+  {{ range .Bricks }}
+  <div class="border-2">for {{ .Name }}</div>
+  <div class="border-2 p-3 flex flex-row gap-x-3"
+       style="--brick-color: var({{ .ColorClass }})"
+       >
+    {{ template "inactive-brick" . }}
+    {{ template "raised-brick" . }}
+    {{ template "speaker-brick" . }}
+    {{ template "mark-brick" . }}
+  </div>
+  {{ end }}
+</section>
+{{end}}