diff --git a/routes/in.css b/routes/in.css
index 363c29d..19c29e9 100644
--- a/routes/in.css
+++ b/routes/in.css
@@ -12,14 +12,13 @@
 
 /* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
 .circle-container {
-  --d: 7em; /* image size */
-  --rel: 1; /* how much extra space we want between images, 1 = one image size */
-  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */
+  --d: 10rem; /* the image size */
+  --rel: 0.5; /* how much extra space we want between images, 1 = one image size */
+  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan) + 0.4*var(--d)); /* circle radius */
   --s: calc(2*var(--r) + var(--d)); /* container size */
   position: relative;
   width: var(--s);
   height: var(--s);
-  /* background: silver /\* to show images perfectly fit in container *\/ */
 }
 
 .circle-container .person-bricks {
diff --git a/routes/room_page_templates_preview.go b/routes/room_page_templates_preview.go
index a314e09..d719bfe 100644
--- a/routes/room_page_templates_preview.go
+++ b/routes/room_page_templates_preview.go
@@ -55,6 +55,10 @@ func (r *roomTableData)Total() int {
 	return len(r.Paricipants)
 }
 func (r *roomTableData)Tangens() float64 {
+	total := r.Total()
+	if total == 2 {
+		return 1
+	}
 	return math.Tan(math.Pi / float64(r.Total())) // Math.tan(Math.PI/m);
 }
 
diff --git a/routes/static/out.css b/routes/static/out.css
index 13fd0db..6423337 100644
--- a/routes/static/out.css
+++ b/routes/static/out.css
@@ -558,8 +558,8 @@ video {
   height: 3.5rem;
 }
 
-.h-8 {
-  height: 2rem;
+.h-\[var\(--brick-height\)\] {
+  height: var(--brick-height);
 }
 
 .h-fit {
@@ -771,18 +771,17 @@ video {
 /* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
 
 .circle-container {
-  --d: 7em;
-  /* image size */
-  --rel: 1;
+  --d: 10rem;
+  /* the image size */
+  --rel: 0.5;
   /* how much extra space we want between images, 1 = one image size */
-  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan));
+  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan) + 0.4*var(--d));
   /* circle radius */
   --s: calc(2*var(--r) + var(--d));
   /* container size */
   position: relative;
   width: var(--s);
   height: var(--s);
-  /* background: silver /\* to show images perfectly fit in container *\/ */
 }
 
 .circle-container .person-bricks {
diff --git a/routes/templates/tableTemplates.gohtml b/routes/templates/tableTemplates.gohtml
index 03a3ab5..7bb47bf 100644
--- a/routes/templates/tableTemplates.gohtml
+++ b/routes/templates/tableTemplates.gohtml
@@ -3,29 +3,29 @@
 
     {{ 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({{.}})"
+      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)"
     ></div>
     {{ end }}
 
     {{ 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({{.}})"
+      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)"
     ></div>
     {{ end }}
 
     {{ 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({{.}})"
+      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)"
     ></div>
     {{ end }}
 
     {{ 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({{.}})"
+      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)"
     >
       X
     </div>
@@ -68,7 +68,7 @@
 <p>expected to be called with personData</p>
 {{ define "personBlocks"  }}
 
-<div class="person-bricks "
+<div class="person-bricks"
      id="person-{{.Index}}"
      style="--i: {{ .Index }}"
      >