diff --git a/routes/room_page_templates_preview.go b/routes/room_page_templates_preview.go
index c7ebec1..348e02c 100644
--- a/routes/room_page_templates_preview.go
+++ b/routes/room_page_templates_preview.go
@@ -192,7 +192,10 @@ func roomTemplatesPreview(
 		tmpl := template.Must(template.New("").Funcs(template.FuncMap{
 			"bricksForPerson": bricksForPerson,
 			"personsFromRoom": personsFromRoom,
-		}).ParseFS(templateFs, baseFile, "templates/tableTemplates.gohtml"))
+		}).ParseFS(templateFs, baseFile ,
+			"templates/tableTemplates.gohtml",
+			"templates/tableTemplatesPreview.gohtml",
+		))
 
 		err := tmpl.ExecuteTemplate(w, "full-page", pageData)
 		if err != nil {
diff --git a/routes/static/out.css b/routes/static/out.css
index f809e27..f7b36b5 100644
--- a/routes/static/out.css
+++ b/routes/static/out.css
@@ -592,6 +592,10 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
 .grid-rows-\[auto\2c 1fr\] {
   grid-template-rows: auto 1fr;
 }
diff --git a/routes/templates/tableTemplates.gohtml b/routes/templates/tableTemplates.gohtml
index 1ea0aee..f52e1c3 100644
--- a/routes/templates/tableTemplates.gohtml
+++ b/routes/templates/tableTemplates.gohtml
@@ -1,37 +1,28 @@
 
-
 <h2>Single templates</h2>
-<section class="grid grid-cols-2 border-4">
-  <div class="border-2">inactive:</div>
-  <div class="border-2 p-3">
-    {{ block "inactiveBrick" .DefaultColor }}
+
+    {{ define "inactiveBrick"  }}
     <div
       class="h-8 w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5"
       style="--brick-color: var({{.}})"
     ></div>
     {{ end }}
-  </div>
-  <div class="border-2">raised:</div>
-  <div class="border-2 p-3">
-    {{ block "raisedBrick" .DefaultColor }}
+
+    {{ define "raisedBrick"  }}
     <div
       class="h-8 w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25"
       style="--brick-color: var({{.}})"
     ></div>
     {{ end }}
-  </div>
-  <div class="border-2">speaker:</div>
-  <div class="border-2 p-3">
-    {{ block "speakerBrick" .DefaultColor }}
+
+    {{ define "speakerBrick"  }}
     <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"
       style="--brick-color: var({{.}})"
     ></div>
     {{ end }}
-  </div>
-  <div class="border-2">mark:</div>
-  <div class="border-2 p-3">
-    {{ block "markBrick" .DefaultColor }}
+
+    {{ define "markBrick"  }}
     <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"
       style="--brick-color: var({{.}})"
@@ -39,12 +30,9 @@
       X
     </div>
     {{ end }}
-  </div>
-</section>
 
 
 <h2>For each type</h2>
-<section class="grid grid-cols-2 border-4">
   {{ range .Bricks }}
   <div class="border-2">for {{ .Name }}</div>
   <div
@@ -56,11 +44,10 @@
     "markBrick" .ColorClass }}
   </div>
   {{ end }}
-</section>
 
 
 <h2>Now for BrickData taking parametrized template name</h2>
-{{ block "brick" .ABrick }}
+{{ define "brick"  }}
 
 {{ if eq .TemplateType "inactiveBrick" }}
 {{ template "inactiveBrick" .ColorClass }}
@@ -78,8 +65,7 @@
 {{end}}
 
 <h2>Now for a person</h2>
-<div class="border p-3">
-{{ block "personBlocks" .TestPerson }}
+{{ define "personBlocks"  }}
 
 <div>
   {{ range (bricksForPerson .) }}
@@ -89,12 +75,10 @@
 </div>
 
 {{ end }}
-</div>
 
 
 <h2>And now i'll want to get all persons for a room</h2>
-<div class="grid place-content-center">
-  {{ block "roomPeople" .ARoom }}
+  {{ define "roomPeople"  }}
   <div
     class="flex flex-row"
     >
@@ -103,4 +87,3 @@
     {{ end }}
   </div>
   {{end}}
-</div>
diff --git a/routes/templates/tableTemplatesPreview.gohtml b/routes/templates/tableTemplatesPreview.gohtml
new file mode 100644
index 0000000..c4d3df9
--- /dev/null
+++ b/routes/templates/tableTemplatesPreview.gohtml
@@ -0,0 +1,34 @@
+{{define "main-content"}}
+
+<h2>For each type</h2>
+<section class="grid grid-cols-5 border-4 gap-4">
+  <p>types:</p>
+  <p> inactive </p>
+  <p> raised </p>
+  <p> speaker </p>
+  <p> mark </p>
+  {{ range .Bricks }}
+  <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>
+  {{ end }}
+</section>
+
+
+<h2>Now for BrickData taking parametrized template name</h2>
+{{ template "brick" .ABrick }}
+
+<h2>Now for a person</h2>
+<div class="border p-3">
+{{ template "personBlocks" .TestPerson }}
+</div>
+
+
+<h2>And now i'll want to get all persons for a room</h2>
+<div class="grid place-content-center">
+  {{ template "roomPeople" .ARoom }}
+</div>
+
+{{end}}