diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index ba542f4..84d8af8 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4389,6 +4389,9 @@ button {
   overflow-y: auto;
   padding: 0;
 }
+.clock-navbar__empty-inner {
+  height: 0;
+}
 .phone-call-content {
   min-height: 0;
   flex: 1;
diff --git a/frontend/src/views/apps/ClockApp.contract.test.ts b/frontend/src/views/apps/ClockApp.contract.test.ts
new file mode 100644
index 0000000..4b9637c
--- /dev/null
+++ b/frontend/src/views/apps/ClockApp.contract.test.ts
@@ -0,0 +1,31 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const clockView = readFileSync(
+  new URL('./ClockApp.vue', import.meta.url),
+  'utf8',
+)
+const mainCss = readFileSync(
+  new URL('../../assets/main.css', import.meta.url),
+  'utf8',
+)
+
+describe('Clock app controls', () => {
+  it('removes the empty navigation row from world clock and timer titles', () => {
+    expect(clockView).toContain("tab === 'world' || tab === 'timer'")
+    expect(clockView).toContain("'clock-navbar__empty-inner'")
+    expect(mainCss).toMatch(
+      /\.clock-navbar__empty-inner\s*\{[^}]*height:\s*0;/s,
+    )
+  })
+
+  it('uses the danger color while stopwatch and timer controls are running', () => {
+    expect(clockView).toMatch(
+      /clock\.stopwatchStartedAt === null[\s\S]*?positiveActionColors[\s\S]*?: dangerActionColors/,
+    )
+    expect(clockView).toMatch(
+      /clock\.timerStartedAt === null[\s\S]*?positiveActionColors[\s\S]*?: dangerActionColors/,
+    )
+  })
+})
diff --git a/frontend/src/views/apps/ClockApp.vue b/frontend/src/views/apps/ClockApp.vue
index 0a54b56..f91818e 100644
--- a/frontend/src/views/apps/ClockApp.vue
+++ b/frontend/src/views/apps/ClockApp.vue
@@ -248,6 +248,11 @@ onBeforeUnmount(() => {
       <k-navbar
         v-if="tab !== 'stopwatch'"
         :title="phone.t(`Apps.clock.tabs.${tab}`)"
+        :inner-class="
+          tab === 'world' || tab === 'timer'
+            ? 'clock-navbar__empty-inner'
+            : ''
+        "
         large
         transparent
         class="clock-navbar"
@@ -351,7 +356,11 @@ onBeforeUnmount(() => {
             </k-button>
             <k-button
               rounded
-              :colors="positiveActionColors"
+              :colors="
+                clock.stopwatchStartedAt === null
+                  ? positiveActionColors
+                  : dangerActionColors
+              "
               class="clock-action-button"
               @click="
                 clock.stopwatchStartedAt === null
@@ -460,7 +469,11 @@ onBeforeUnmount(() => {
             </k-button>
             <k-button
               rounded
-              :colors="positiveActionColors"
+              :colors="
+                clock.timerStartedAt === null
+                  ? positiveActionColors
+                  : dangerActionColors
+              "
               class="clock-action-button"
               :disabled="clock.timerStartedAt === null && timerValue <= 0"
               @click="