diff --git a/src-tauri/templates/overlay/browsersource.html.j2 b/src-tauri/templates/overlay/browsersource.html.j2
index b1882c4..a447598 100644
--- a/src-tauri/templates/overlay/browsersource.html.j2
+++ b/src-tauri/templates/overlay/browsersource.html.j2
@@ -12,7 +12,9 @@
   </style>
   </head>
   <body>
-  {{ content }}
+      <div id="group" style="display: flex; flex-direction: {{ layout }};">
+        {{ content }}
+    </div>
   <script>
       {{ script }}
   </script>
diff --git a/src-tauri/templates/overlay/countdown/countdown.css.j2 b/src-tauri/templates/overlay/countdown/countdown.css.j2
index 1260491..1d5e106 100644
--- a/src-tauri/templates/overlay/countdown/countdown.css.j2
+++ b/src-tauri/templates/overlay/countdown/countdown.css.j2
@@ -1,22 +1,19 @@
-.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[data-hidden="true"] {
     display: none;
 }
-{% for c in countdowns %}
+#countdown-{{ c.id }}{
+    background-color: {{ c.background }};
+    border: {{ c.border }};
+    border-radius: {{ c.border_radius }}px;
+    padding: 1rem 2rem;
+    {% if c.backdrop_filter %}
+    backdrop-filter: blur(8px);
+    {% endif %}
+    {% if c.box_shadow %}
+    box-shadow: {{ c.box_shadow }};
+    {% endif %}
+}
+
 #timer-{{ c.id }} {
   font-size: {{ c.font_size }}rem;
   font-family: monospace;
@@ -29,4 +26,3 @@
   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 1e18c55..f68d2bf 100644
--- a/src-tauri/templates/overlay/countdown/countdown.html.j2
+++ b/src-tauri/templates/overlay/countdown/countdown.html.j2
@@ -1,23 +1,35 @@
-<div class="countdown-list {{ layout }}">
-  {% for c in countdowns %}
-    <div
-      id="countdown-{{ c.id }}"
-      class="countdown-item"
-      data-hidden="{{ hide_idle and c.state == 'Idle' }}"
+<div
+  id="countdown-{{ c.id }}"
+  class="countdown-item"
+  data-hidden="{{ hide_idle and c.state == 'Idle' }}"
+>
+  {% if c.icon %}
+    <img
+      id="icon-{{ c.id }}"
+      src="/static/icons/{{ c.icon }}"
+      alt="{{ c.name }}"
+    />
+  {% endif %}
+  {% if c.show_timer %}
+    <span
+      id="timer-{{ c.id }}"
+      style="font-size:{{ c.font_size }}rem; color:{{ c.text_color }}"
     >
-      {% if c.icon %}
-        <img
-          id="icon-{{ c.id }}"
-          src="/static/icons/{{ 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>
+      {{ c.remaining }}
+    </span>
+  {% endif %}
+  {% if c.show_timer and c.show_progress %}
+    <hr style="width: 100%; background-color: {{ c.divider_color }};" />
+  {% endif %}
+  {% if c.show_progress %}
+    <div
+      id="progress-{{ c.id }}"
+      style="width: 100%; background-color: {{ c.bar_bg }};"
+    >
+      <div
+        id="progress-inner-{{ c.id }}"
+        style="width: {{ c.percent }}%; background-color: {{ c.bar_fg }};"
+      ></div>
     </div>
-  {% endfor %}
+  {% endif %}
 </div>
diff --git a/src-tauri/templates/overlay/countdown/countdown.js.j2 b/src-tauri/templates/overlay/countdown/countdown.js.j2
index d8f210a..ae4d53c 100644
--- a/src-tauri/templates/overlay/countdown/countdown.js.j2
+++ b/src-tauri/templates/overlay/countdown/countdown.js.j2
@@ -1,13 +1,20 @@
 const hideIdle = {{ hide_idle | lower }};
 const es = new EventSource('/sse/group/{{ id }}');
 es.addEventListener('countdown-tick', e => {
-  const {id, remaining} = JSON.parse(e.data);
-  document.getElementById('timer-' + id).textContent = remaining;
+  const {id, remaining, percent} = JSON.parse(e.data);
+  const timer = document.getElementById('timer-' + id);
+  if(timer){
+    timer.textContent = remaining;
+  }
+  const progressInner = document.getElementById('progress-inner-' + id);
+  if(progressInner){
+    progressInner.style.width = percent + '%';
+  }
 });
 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).dataset.hidden = state === 'Idle';
   }
 });
 es.addEventListener('reload', () => location.reload());
