diff --git a/static/css/default_light/main.css b/static/css/default_light/main.css
index 9189a40..21f3e6b 100644
--- a/static/css/default_light/main.css
+++ b/static/css/default_light/main.css
@@ -237,6 +237,9 @@ label {
   grid-template-columns: min-content min-content;
   grid-gap: 6px 16px;
   width: min-content;
+  background-color: #fff;
+  border: 1px solid #2979b8;
+  padding: 16px;
   border-radius: 6px;
 }
 #time-selector.hidden {
diff --git a/static/css/gruvbox/main.css b/static/css/gruvbox/main.css
index 6d2377f..fd15ce2 100644
--- a/static/css/gruvbox/main.css
+++ b/static/css/gruvbox/main.css
@@ -237,6 +237,9 @@ label {
   grid-template-columns: min-content min-content;
   grid-gap: 6px 16px;
   width: min-content;
+  background-color: #282828;
+  border: 1px solid #333;
+  padding: 16px;
   border-radius: 6px;
 }
 #time-selector.hidden {
diff --git a/static/js/problems.mjs b/static/js/problems.mjs
index 8f45b3e..fa7c921 100644
--- a/static/js/problems.mjs
+++ b/static/js/problems.mjs
@@ -6,6 +6,7 @@ export class UI {
 			const list = document.getElementById('acknowledged-list')
 			list.classList.remove('hidden')
 		}
+		this.acknowledgeDisplay(showAcked == 'true')
 			
 		const display = localStorage.getItem('problems_display')
 		if (display === null)
@@ -23,13 +24,20 @@ export class UI {
 	}
 
 	toggleAcknowledged(evt) {
-		const list = document.getElementById('acknowledged-list')
+		this.acknowledgeDisplay(evt.target.checked)
+	}
 
-		if (evt.target.checked) {
+	acknowledgeDisplay(show) {
+		const list = document.getElementById('acknowledged-list')
+		const areaItems = document.querySelectorAll('.acked')
+
+		if (show) {
 			list.classList.remove('hidden')
+			areaItems.forEach(item=>item.classList.remove('hidden'))
 			localStorage.setItem('show_acknowledged', true)
 		} else {
 			list.classList.add('hidden')
+			areaItems.forEach(item=>item.classList.add('hidden'))
 			localStorage.setItem('show_acknowledged', false)
 		}
 	}
diff --git a/static/less/main.less b/static/less/main.less
index dc4e7d5..22e012d 100644
--- a/static/less/main.less
+++ b/static/less/main.less
@@ -295,6 +295,9 @@ label {
 	grid-gap: 6px 16px;
 
 	width: min-content;
+	background-color: @bg1;
+	border: 1px solid @bg3;
+	padding: 16px;
 	border-radius: 6px;
 
 	&.hidden {
diff --git a/views/pages/problems.gotmpl b/views/pages/problems.gotmpl
index 48a4510..f762107 100644
--- a/views/pages/problems.gotmpl
+++ b/views/pages/problems.gotmpl
@@ -15,13 +15,16 @@
 		<input {{ if eq .Data.Selection "ALL"     }}checked{{ end }} type="radio" name="selection" id="selection-all"     onclick="_ui.selectAll()"> <label for="selection-all">Time-filtered problems</label>
 	</div>
 
-	<hr>
+	<hr style="margin-bottom: 16px">
 
 	{{ block "timefilter" . }}{{ end }}
 
 	<div style="margin-top: 16px">
 		<input type="radio" name="display" id="display-table" onclick="_ui.displayAreas()"> <label for="display-table">Areas</label>
 		<input type="radio" name="display" id="display-list" onclick="_ui.displayList()"> <label for="display-list">List</label>
+		<div style="margin-top: 8px">
+			<input type="checkbox" id="show-acked" onclick="_ui.toggleAcknowledged(event)"> <label for="show-acked">Show acknowledged</label>
+		</div>
 	</div>
 
 	<div class="display-list hidden">
@@ -67,8 +70,6 @@
 			{{ end }}
 		</div>
 
-		<input type="checkbox" id="show-acked" onclick="_ui.toggleAcknowledged(event)"> <label for="show-acked">Show acknowledged</label>
-
 		<div id="acknowledged-list" class="hidden">
 			<div style="grid-column: 1/-1;"><h2>Acknowledged</h2></div>
 			<div class="header">Trigger</div>
@@ -108,21 +109,21 @@
 					<div class="name">{{ $sectionName }}</div>
 
 					{{ range $problems }}
-					<div>{{ if .IsArchived }}<span class="ok">Archived</span>{{ else }}<span class="error">Current</span>{{ end }}</div>
+						<div class="{{ if .Acknowledged }}acked hidden{{ end }}">{{ if .IsArchived }}<span class="ok">Archived</span>{{ else }}<span class="error">Current</span>{{ end }}</div>
 
-					<div class="trigger">{{ .TriggerName }}</div>
+						<div class="{{ if .Acknowledged }}acked hidden{{ end }} trigger">{{ .TriggerName }}</div>
 
-					{{ if eq (.Start | html) "0001-01-01 00:00:00 +0000 UTC" }}
-					<div class="since"></div>
-					{{ else }}
-					<div class="since">{{ format_time .Start }}</div>
-					{{ end }}
+						{{ if eq (.Start | html) "0001-01-01 00:00:00 +0000 UTC" }}
+						<div class="{{ if .Acknowledged }}acked hidden{{ end }} since"></div>
+						{{ else }}
+						<div class="{{ if .Acknowledged }}acked hidden{{ end }} since">{{ format_time .Start }}</div>
+						{{ end }}
 
-					{{ if .FormattedValues }}
-					<div><img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}"></div>
-					{{ else }}
-					<div><img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg"></div>
-					{{ end }}
+						{{ if .FormattedValues }}
+						<div class="{{ if .Acknowledged }}acked hidden{{ end }}"><img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}"></div>
+						{{ else }}
+						<div class="{{ if .Acknowledged }}acked hidden{{ end }}"><img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg"></div>
+						{{ end }}
 
 					{{ end }}
 				</div>