diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..937e342
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+src-tauri/templates/overlay/browsersource.html.j2
+**/*.css.j2
+**/*.js.j2
diff --git a/.prettierrc.json b/.prettierrc.json
index bed4155..1c20d3e 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -2,7 +2,7 @@
   "plugins": ["prettier-plugin-jinja-template"],
   "overrides": [
     {
-      "files": ["*.j2"],
+      "files": ["**/*.j2"],
       "options": {
         "parser": "jinja-template"
       }
diff --git a/src-tauri/templates/overlay/browsersource.html.j2 b/src-tauri/templates/overlay/browsersource.html.j2
index 61aad0d..b1882c4 100644
--- a/src-tauri/templates/overlay/browsersource.html.j2
+++ b/src-tauri/templates/overlay/browsersource.html.j2
@@ -1,18 +1,20 @@
-<head>
+<!DOCTYPE html>
+<html>
+  <head>
   <meta charset="UTF-8">
   <style>
-    body {
-      background: transparent;
-      margin: 0;
-      padding: 0;
-    }
-    {{ style }}
+      body {
+        background: transparent;
+        margin: 0;
+        padding: 0;
+      }
+      {{ source_style }}
   </style>
-</head>
-<body>
+  </head>
+  <body>
   {{ content }}
   <script>
-    {{ script }}
+      {{ script }}
   </script>
-</body>
+  </body>
 </html>
diff --git a/src-tauri/templates/overlay/countdown/countdown.style.j2 b/src-tauri/templates/overlay/countdown/countdown.css.j2
similarity index 52%
rename from src-tauri/templates/overlay/countdown/countdown.style.j2
rename to src-tauri/templates/overlay/countdown/countdown.css.j2
index 2a4d6b1..a81f9cc 100644
--- a/src-tauri/templates/overlay/countdown/countdown.style.j2
+++ b/src-tauri/templates/overlay/countdown/countdown.css.j2
@@ -1,27 +1,32 @@
+.countdown-item {
+  display: flex;
+}
 .countdown-list.vertical {
   flex-direction: column;
 }
-
 .countdown-list.horizontal {
   flex-direction: row;
 }
-
 .countdown-item {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
 }
-
 .countdown-item.hidden {
   display: none;
 }
-
-#timer-{{ id }} {
-  font-size: {{ font_size }}rem;
+{% for c in countdowns %}
+#timer-{{ c.id }} {
+  font-size: {{ c.font_size }}rem;
   font-family: monospace;
-  color: {{ text_color }};
+  color: {{ c.text_color }};
   text-shadow: 2px 2px 4px black;
 }
-
-#icon { width: { icon_size }; height: { icon_size }; vertical-align: middle; margin-right: 0.5rem; }
+#icon-{{ c.id }} {
+  width: {{ c.icon_size }};
+  height: {{ c.icon_size }};
+  vertical-align: middle;
+  margin-right: 0.5rem;
+}
+{% endfor %}
diff --git a/src-tauri/templates/overlay/countdown/countdown.html.j2 b/src-tauri/templates/overlay/countdown/countdown.html.j2
index 0baf701..77802af 100644
--- a/src-tauri/templates/overlay/countdown/countdown.html.j2
+++ b/src-tauri/templates/overlay/countdown/countdown.html.j2
@@ -1,10 +1,18 @@
 <div class="countdown-list {{ layout }}">
   {% for c in countdowns %}
-    <div id="countdown-{{ c.id }}" class="countdown-item{% if hide_idle and c.state == 'Idle' %} hidden{% endif %}">
-      {% if c.icon %}<img ...>{% endif %}
-        <span id="timer-{{ c.id }}" style="font-size:{{ c.font_size }}rem; color:{{ c.text_color }}">
-          {{ c.remaining }}
-        </span>
+    <div
+      id="countdown-{{ c.id }}"
+      class="countdown-item{% if hide_idle and c.state == 'Idle' %}hidden{% endif %}"
+    >
+      {% if c.icon %}
+        <img id="icon-{{ c.id }}" src="{{ c.icon }}" alt="{{ c.name }}" />
+      {% endif %}
+      <span
+        id="timer-{{ c.id }}"
+        style="font-size:{{ c.font_size }}rem; color:{{ c.text_color }}"
+      >
+        {{ c.remaining }}
+      </span>
     </div>
   {% endfor %}
 </div>
diff --git a/src-tauri/templates/overlay/countdown/countdown.script.j2 b/src-tauri/templates/overlay/countdown/countdown.js.j2
similarity index 58%
rename from src-tauri/templates/overlay/countdown/countdown.script.j2
rename to src-tauri/templates/overlay/countdown/countdown.js.j2
index 81b7024..d8f210a 100644
--- a/src-tauri/templates/overlay/countdown/countdown.script.j2
+++ b/src-tauri/templates/overlay/countdown/countdown.js.j2
@@ -1,14 +1,14 @@
 const hideIdle = {{ hide_idle | lower }};
-const es = new EventSource('/sse/countdown/{{ id }}');
-es.addEventListener('tick', e => {
+const es = new EventSource('/sse/group/{{ id }}');
+es.addEventListener('countdown-tick', e => {
   const {id, remaining} = JSON.parse(e.data);
-  document.getElementById('countdown-' + id).innerText = remaining;
+  document.getElementById('timer-' + id).textContent = remaining;
 });
-es.AddEventListener('state', e => {
+es.addEventListener('countdown-state', e => {
   const {id, state} = JSON.parse(e.data);
   if (hideIdle) {
-    document.getElementById('countdown-' + id).style.display = state === 'idle' ? 'none' : '';
+    document.getElementById('countdown-' + id).style.display = state === 'Idle' ? 'none' : '';
   }
-}
+});
 es.addEventListener('reload', () => location.reload());
 es.onerror = () => setTimeout(() => location.reload(), 3000);
