diff --git a/src/renderer/src/features/timer/TimerPage.tsx b/src/renderer/src/features/timer/TimerPage.tsx
index 88f27f6..1fe5da7 100644
--- a/src/renderer/src/features/timer/TimerPage.tsx
+++ b/src/renderer/src/features/timer/TimerPage.tsx
@@ -218,7 +218,7 @@ export default function TimerPage(): ReactElement {
     };
 
     return (
-        <div className="flex flex-col">
+        <div className="flex min-h-full flex-col">
             <HomeHeader
                 date={selectedDate}
                 mode={mode}
@@ -226,7 +226,8 @@ export default function TimerPage(): ReactElement {
                 onToggleMode={() => { setMode.mutate(mode === 'pomodoro' ? 'work' : 'pomodoro'); }}
             />
 
-            <div className="flex flex-1 flex-col gap-4 px-6 pt-4 pb-32">
+            {/* pb-[5.5rem] clears the fixed bottom nav (about 85px), so the controls rest just above it at any window height. */}
+            <div className="flex flex-1 flex-col gap-4 px-6 pt-4 pb-[5.5rem]">
                 <StatCards
                     dailyTargetSeconds={settings.data?.dailyTargetSeconds ?? DEFAULT_SETTINGS.dailyTargetSeconds}
                     loggedSeconds={loggedSeconds}
diff --git a/src/renderer/src/features/timer/components/TimerControls.tsx b/src/renderer/src/features/timer/components/TimerControls.tsx
index 13811f6..b0480de 100644
--- a/src/renderer/src/features/timer/components/TimerControls.tsx
+++ b/src/renderer/src/features/timer/components/TimerControls.tsx
@@ -35,7 +35,8 @@ interface TimerControlsProps {
 
 export default function TimerControls(props: TimerControlsProps): ReactElement {
     return (
-        <div className="flex flex-col gap-3">
+        // mt-auto: whatever height the screen has left goes above the controls, so they rest on the bottom nav.
+        <div className="mt-auto flex flex-col gap-3">
             <div className="flex items-center justify-between gap-4">
                 <button
                     type="button"