diff --git a/.gitignore b/.gitignore
index f31da9b..c9e4ffb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -192,4 +192,5 @@ google-services.json
 # Misc
 # ---------------------------
 *.orig.*
-app-example
\ No newline at end of file
+app-example
+newDeps/
\ No newline at end of file
diff --git a/app/(tabs)/timer.tsx b/app/(tabs)/timer.tsx
index db553c1..89d3f69 100644
--- a/app/(tabs)/timer.tsx
+++ b/app/(tabs)/timer.tsx
@@ -8,8 +8,9 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
-  View
+  View,
 } from 'react-native';
+
 const { width, height } = Dimensions.get('window');
 
 const colors = {
@@ -18,12 +19,15 @@ const colors = {
   text: '#ffffff',
 };
 
-const timers = [...Array(13).keys()].map((i) => (i === 0 ? 1 : i * 5));
+const TIMER_OPTIONS = [...Array(13).keys()].map((index) => (index === 0 ? 1 : index * 5));
 const ITEM_SIZE = width * 0.38;
 const ITEM_SPACING = (width - ITEM_SIZE) / 2;
-const TIMER_UNIT_IN_SECONDS = 60; // Set to 60 for timer value to represent minutes
+const TIMER_UNIT_IN_SECONDS = 60;
 const HOLD_TO_CANCEL_MS = 2000;
-const CANCEL_ANIMATION_DELAY_MS = 250
+const CANCEL_ANIMATION_DELAY_MS = 250;
+const BUTTON_PRESS_IN_MS = 80;
+const BUTTON_PRESS_OUT_MS = 140;
+
 const placeholderTask = {
   name: 'Read chapter 4',
   description: 'Focus on the summary questions and write down anything unclear.',
@@ -33,49 +37,46 @@ function formatTime(totalSeconds: number) {
   const minutes = Math.floor(totalSeconds / 60);
   const seconds = totalSeconds % 60;
 
-  return `${minutes.toString().padStart(2, '0')}:${
-    seconds.toString().padStart(2, '0')}`;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 }
 
-export default function App() {
-  const [containerHeight, setContainerHeight] = React.useState(0)
-  const [duration, setDuration] = React.useState(timers[0])
-  const [timerIsRunning, setIsRunning] = React.useState(false)
-  const [timeRemaining, setTimeRemaining] = React.useState(0)
+export default function TimerScreen() {
+  const [containerHeight, setContainerHeight] = React.useState(0);
+  const [duration, setDuration] = React.useState(TIMER_OPTIONS[0]);
+  const [timerIsRunning, setIsRunning] = React.useState(false);
+  const [timeRemaining, setTimeRemaining] = React.useState(0);
+
   const scrollX = React.useRef(new Animated.Value(0)).current;
   const timerAnimation = React.useRef(new Animated.Value(0)).current;
   const buttonAnimation = React.useRef(new Animated.Value(0)).current;
   const taskDetailsAnimation = React.useRef(new Animated.Value(0)).current;
   const countdownAnimation = React.useRef(new Animated.Value(0)).current;
+  const cancelButtonAnimation = React.useRef(new Animated.Value(0)).current;
+  const pressedButtonAnimation = React.useRef(new Animated.Value(0)).current;
+  const focusModeAnimation = React.useRef(new Animated.Value(0)).current;
+  const cancelOverlayAnimation = React.useRef(new Animated.Value(0)).current;
+
   const countdownRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
-  const cancelHoldTimeoutRef  = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelHoldTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelHoldAnimationDelayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const runningAnimationRef = React.useRef<Animated.CompositeAnimation | null>(null);
   const progressAnimationRef = React.useRef<Animated.CompositeAnimation | null>(null);
   const sessionStartedAtRef = React.useRef<number | null>(null);
   const sessionDurationMsRef = React.useRef(0);
-  const cancelButtonAnimation = React.useRef(new Animated.Value(0)).current;
-  const pressedButtonAnimation = React.useRef(new Animated.Value(0)).current;
-  const focusModeAnimation = React.useRef(new Animated.Value(0)).current; // 0 = timer inactive, 1 = timer active
-  const cancelHoldAnimationDelayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const cancelAccelStartedRef = React.useRef(false);
   const cancelHoldActiveRef = React.useRef(false);
   const cancelHoldIdRef = React.useRef(0);
   const cancelHoldStartedAtRef = React.useRef(0);
-  const cancelOverlayAnimation = React.useRef(new Animated.Value(0)).current;
 
   React.useEffect(() => {
-      if (containerHeight > 0 && !timerIsRunning) {
-        timerAnimation.setValue(containerHeight);
-      }
-    }, [containerHeight, timerIsRunning, timerAnimation]);
-
-  const timerOverlayOpacity = React.useRef(new Animated.Value(1)).current;
-
-  const cancelButtonOpacity = cancelButtonAnimation;
+    if (containerHeight > 0 && !timerIsRunning) {
+      timerAnimation.setValue(containerHeight);
+    }
+  }, [containerHeight, timerIsRunning, timerAnimation]);
 
   const pressedButtonScale = pressedButtonAnimation.interpolate({
-    inputRange: [0,  1],
-    outputRange: [1, 0.90],
+    inputRange: [0, 1],
+    outputRange: [1, 0.9],
   });
 
   const cancelButtonTranslateY = cancelButtonAnimation.interpolate({
@@ -83,6 +84,9 @@ export default function App() {
     outputRange: [16, 0],
   });
 
+  // Real timer progress comes from timerAnimation. The cancel hold adds a
+  // temporary visual offset on top so release/cancel logic does not fight the
+  // underlying progress animation.
   const timerOverlayTranslateY = Animated.add(
     timerAnimation,
     cancelOverlayAnimation
@@ -94,7 +98,7 @@ export default function App() {
 
   const countdownTranslateX = focusModeAnimation.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, -width * 0.30],
+    outputRange: [0, -width * 0.3],
   });
 
   const countdownTranslateY = focusModeAnimation.interpolate({
@@ -107,111 +111,345 @@ export default function App() {
     outputRange: [1, 0.55],
   });
 
-  const opacity = buttonAnimation.interpolate({
-      inputRange: [0, 1],
-      outputRange: [1, 0]
+  const startButtonOpacity = buttonAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0],
   });
 
-  const translateY = buttonAnimation.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 200]
+  const startButtonTranslateY = buttonAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 200],
   });
 
-  const inactiveTimerNumberOpacity = buttonAnimation.interpolate({
-      inputRange: [0, 1],
-      outputRange: [1, 0]
+  const pickerOpacity = buttonAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0],
   });
 
   const taskDetailsOpacity = taskDetailsAnimation.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1]
+    inputRange: [0, 1],
+    outputRange: [0, 1],
   });
 
   const taskDetailsTranslateY = taskDetailsAnimation.interpolate({
-      inputRange: [0, 1],
-      outputRange: [20, 0]
+    inputRange: [0, 1],
+    outputRange: [20, 0],
   });
 
-  const animateButtonPress = React.useCallback((pressed: boolean) => {
-    Animated.timing(pressedButtonAnimation, {
-      toValue: pressed ? 1 : 0,
-      duration: pressed ? 80 : 140,
-      useNativeDriver: true
-    }).start();
-  }, [pressedButtonAnimation]);
-
-  const cancelTimer = React.useCallback(() => {
-    if (!timerIsRunning){
-      return;
-    }
+  const clearCountdownInterval = React.useCallback(() => {
     if (countdownRef.current) {
       clearInterval(countdownRef.current);
       countdownRef.current = null;
     }
+  }, []);
+
+  const clearCancelHoldTimeouts = React.useCallback(() => {
+    if (cancelHoldTimeoutRef.current) {
+      clearTimeout(cancelHoldTimeoutRef.current);
+      cancelHoldTimeoutRef.current = null;
+    }
+
+    if (cancelHoldAnimationDelayRef.current) {
+      clearTimeout(cancelHoldAnimationDelayRef.current);
+      cancelHoldAnimationDelayRef.current = null;
+    }
+  }, []);
+
+  const stopRunningAnimations = React.useCallback(() => {
     runningAnimationRef.current?.stop();
     runningAnimationRef.current = null;
 
     progressAnimationRef.current?.stop();
     progressAnimationRef.current = null;
+
     cancelOverlayAnimation.stopAnimation();
+  }, [cancelOverlayAnimation]);
+
+  React.useEffect(() => {
+    return () => {
+      clearCountdownInterval();
+      clearCancelHoldTimeouts();
+      stopRunningAnimations();
+    };
+  }, [clearCancelHoldTimeouts, clearCountdownInterval, stopRunningAnimations]);
+
+  const animateButtonPress = React.useCallback(
+    (pressed: boolean) => {
+      Animated.timing(pressedButtonAnimation, {
+        toValue: pressed ? 1 : 0,
+        duration: pressed ? BUTTON_PRESS_IN_MS : BUTTON_PRESS_OUT_MS,
+        useNativeDriver: true,
+      }).start();
+    },
+    [pressedButtonAnimation]
+  );
+
+  const resetSessionValues = React.useCallback(() => {
+    sessionStartedAtRef.current = null;
+    sessionDurationMsRef.current = 0;
+    cancelHoldActiveRef.current = false;
+    cancelAccelStartedRef.current = false;
+
+    timerAnimation.setValue(containerHeight);
+    cancelOverlayAnimation.setValue(0);
+    setTimeRemaining(0);
+    setIsRunning(false);
+  }, [cancelOverlayAnimation, containerHeight, timerAnimation]);
+
+  const finishTimer = React.useCallback(() => {
+    clearCountdownInterval();
+
+    Animated.parallel([
+      Animated.timing(countdownAnimation, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(focusModeAnimation, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+      Animated.timing(taskDetailsAnimation, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      Animated.parallel([
+        Animated.timing(buttonAnimation, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(cancelButtonAnimation, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setIsRunning(false);
+        /* TODO
+          Implement store and send of ellapsed time value in seconds to DB
+          for total time spent statistic
+        */
+
+        resetSessionValues();
+      });
+    });
+  }, [
+    buttonAnimation,
+    cancelButtonAnimation,
+    clearCountdownInterval,
+    countdownAnimation,
+    focusModeAnimation,
+    resetSessionValues,
+    taskDetailsAnimation,
+  ]);
+
+  // This picks up the timer overlay animation from the current Y position and
+  // runs it to the bottom over the remaining session time.
+  const startProgressAnimation = React.useCallback(
+    (fromY: number) => {
+      const elapsedRatio = fromY / containerHeight;
+      const remainingMs = sessionDurationMsRef.current * (1 - elapsedRatio);
+
+      sessionStartedAtRef.current = Date.now() - sessionDurationMsRef.current * elapsedRatio;
+      timerAnimation.setValue(fromY);
+
+      const progressAnimation = Animated.timing(timerAnimation, {
+        toValue: containerHeight,
+        duration: remainingMs,
+        useNativeDriver: true,
+      });
+
+      progressAnimationRef.current = progressAnimation;
+      progressAnimation.start(({ finished }) => {
+        progressAnimationRef.current = null;
+
+        if (!finished) {
+          return;
+        }
+
+        finishTimer();
+      });
+    },
+    [containerHeight, finishTimer, timerAnimation]
+  );
+
+  const runStartSequence = React.useCallback(() => {
+    const runningAnimation = Animated.sequence([
+      Animated.parallel([
+        Animated.timing(buttonAnimation, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(cancelButtonAnimation, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(countdownAnimation, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(timerAnimation, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]),
+      Animated.timing(focusModeAnimation, {
+        toValue: 1,
+        duration: 450,
+        useNativeDriver: true,
+      }),
+      Animated.timing(taskDetailsAnimation, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: true,
+      }),
+    ]);
+
+    runningAnimationRef.current = runningAnimation;
+    runningAnimation.start(({ finished }) => {
+      runningAnimationRef.current = null;
+
+      if (!finished) {
+        return;
+      }
+
+      startProgressAnimation(0);
+    });
+  }, [
+    buttonAnimation,
+    cancelButtonAnimation,
+    countdownAnimation,
+    focusModeAnimation,
+    startProgressAnimation,
+    taskDetailsAnimation,
+    timerAnimation,
+  ]);
+
+  const startCountdown = React.useCallback(
+    (totalSeconds: number) => {
+      setTimeRemaining(totalSeconds);
+      clearCountdownInterval();
+
+      countdownRef.current = setInterval(() => {
+        setTimeRemaining((currentTime) => {
+          if (currentTime <= 1) {
+            clearCountdownInterval();
+            return 0;
+          }
+
+          return currentTime - 1;
+        });
+      }, 1000);
+    },
+    [clearCountdownInterval]
+  );
+
+  const startTimerSession = React.useCallback(() => {
+    if (timerIsRunning || containerHeight === 0) {
+      return;
+    }
+
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    setIsRunning(true);
+
+    taskDetailsAnimation.setValue(0);
+    countdownAnimation.setValue(0);
+    cancelOverlayAnimation.setValue(0);
+
+    const totalSeconds = duration * TIMER_UNIT_IN_SECONDS;
+    sessionStartedAtRef.current = Date.now();
+    sessionDurationMsRef.current = totalSeconds * 1000;
+
+    startCountdown(totalSeconds);
+    runStartSequence();
+  }, [
+    cancelOverlayAnimation,
+    containerHeight,
+    countdownAnimation,
+    duration,
+    runStartSequence,
+    startCountdown,
+    taskDetailsAnimation,
+    timerIsRunning,
+  ]);
+
+  const cancelTimer = React.useCallback(() => {
+    if (!timerIsRunning) {
+      return;
+    }
+
+    clearCountdownInterval();
+    clearCancelHoldTimeouts();
+    stopRunningAnimations();
 
     Animated.parallel([
       Animated.timing(cancelButtonAnimation, {
         toValue: 0,
         duration: 180,
-        useNativeDriver: true
+        useNativeDriver: true,
       }),
       Animated.timing(taskDetailsAnimation, {
         toValue: 0,
         duration: 220,
-        useNativeDriver: true
+        useNativeDriver: true,
       }),
       Animated.timing(focusModeAnimation, {
-      toValue: 0,
-      duration: 250,
-      useNativeDriver: true
-    }),
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }),
       Animated.timing(countdownAnimation, {
         toValue: 0,
         duration: 180,
-        useNativeDriver: true
+        useNativeDriver: true,
       }),
       Animated.timing(timerAnimation, {
         toValue: containerHeight,
         duration: 300,
-        useNativeDriver: true
-      }),
-      Animated.timing(timerOverlayOpacity, {
-        toValue: 0,
-        duration: 120,
         useNativeDriver: true,
       }),
       Animated.timing(cancelOverlayAnimation, {
         toValue: 0,
         duration: 120,
         useNativeDriver: true,
-      })
-      ]).start(() => {
-        Animated.timing(buttonAnimation, {
-          toValue: 0,
-          duration: 220,
-          useNativeDriver: true
-        })
-        .start(() => {
-          timerAnimation.setValue(containerHeight)
-          cancelOverlayAnimation.setValue(0);
-          timerOverlayOpacity.setValue(1);
-          setTimeRemaining(0);
-          setIsRunning(false);
-        });
-      })
-    }, [timerOverlayOpacity, buttonAnimation, cancelButtonAnimation,
-      cancelOverlayAnimation, containerHeight, countdownAnimation, timerAnimation,
-      timerIsRunning, taskDetailsAnimation, focusModeAnimation]);
+      }),
+    ]).start(() => {
+      Animated.timing(buttonAnimation, {
+        toValue: 0,
+        duration: 220,
+        useNativeDriver: true,
+      }).start(() => {
+        resetSessionValues();
+      });
+    });
+  }, [
+    buttonAnimation,
+    cancelButtonAnimation,
+    cancelOverlayAnimation,
+    clearCancelHoldTimeouts,
+    clearCountdownInterval,
+    containerHeight,
+    countdownAnimation,
+    focusModeAnimation,
+    resetSessionValues,
+    stopRunningAnimations,
+    taskDetailsAnimation,
+    timerAnimation,
+    timerIsRunning,
+  ]);
 
-  const startCancelHold = React.useCallback(() => {
+  const handleCancelHoldStart = React.useCallback(() => {
     animateButtonPress(true);
     cancelHoldIdRef.current += 1;
+
     const cancelHoldId = cancelHoldIdRef.current;
     cancelHoldActiveRef.current = true;
     cancelHoldStartedAtRef.current = Date.now();
@@ -224,6 +462,9 @@ export default function App() {
         return;
       }
 
+      // The hold starts with normal button feedback. After a short delay, we
+      // begin the accelerated red overlay preview so quick taps do not cause a
+      // jolt, while long holds still clearly show that cancel is about to fire.
       cancelAccelStartedRef.current = true;
       cancelOverlayAnimation.setValue(0);
 
@@ -240,103 +481,27 @@ export default function App() {
         toValue: cancelOffset,
         duration: remainingHoldMs,
         easing: Easing.in(Easing.quad),
-        useNativeDriver: true
-      }).start(({ finished }) => {
-        if (!finished || cancelHoldIdRef.current !== cancelHoldId) {
-          return;
-        }
-      });
+        useNativeDriver: true,
+      }).start();
     }, CANCEL_ANIMATION_DELAY_MS);
 
     cancelHoldTimeoutRef.current = setTimeout(() => {
       cancelHoldActiveRef.current = false;
       cancelHoldIdRef.current += 1;
       cancelAccelStartedRef.current = false;
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning)
+
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
       cancelTimer();
       cancelHoldTimeoutRef.current = null;
     }, HOLD_TO_CANCEL_MS);
   }, [animateButtonPress, cancelOverlayAnimation, cancelTimer, containerHeight]);
 
-  const finishTimer = React.useCallback(() => {
-    Animated.parallel([
-        Animated.timing(countdownAnimation, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        }),
-        Animated.timing(focusModeAnimation, {
-          toValue: 0,
-          duration: 250,
-          useNativeDriver: true
-        }),
-        Animated.timing(taskDetailsAnimation, {
-          toValue: 0,
-          duration: 300,
-          useNativeDriver: true
-        })
-      ]).start(() => {
-        Animated.parallel([
-          Animated.timing(buttonAnimation, {
-            toValue: 0,
-            duration: 300,
-            useNativeDriver: true
-          }),
-          Animated.timing(cancelButtonAnimation, {
-            toValue: 0,
-            duration: 300,
-            useNativeDriver: true
-          }),
-        ]).start(() => {
-          setIsRunning(false);
-        /* TODO
-          Implement store and send of ellapsed time value in seconds to DB
-          for total time spent statistic
-        */
-        })
-    })
-  }, [countdownAnimation, focusModeAnimation, taskDetailsAnimation, buttonAnimation, cancelButtonAnimation]);
-
-  const startProgressAnimation = React.useCallback((fromY: number) =>  {
-    const elapsedRatio = fromY / containerHeight;
-    const remainingMs = sessionDurationMsRef.current * (1 - elapsedRatio);
-
-    sessionStartedAtRef.current = Date.now() - sessionDurationMsRef.current * elapsedRatio;
-
-    timerAnimation.setValue(fromY);
-
-    const progressAnimation = Animated.timing(timerAnimation, {
-      toValue: containerHeight,
-      duration: remainingMs,
-      useNativeDriver: true
-    });
-
-    progressAnimationRef.current = progressAnimation;
-    progressAnimation.start(({ finished }) => {
-      progressAnimationRef.current = null;
-
-      if (!finished) {
-        return;
-      }
-
-      finishTimer();
-    });
-  }, [finishTimer, containerHeight, timerAnimation]);
-
-  const stopCancelHold = React.useCallback(() => {
+  const handleCancelHoldEnd = React.useCallback(() => {
     animateButtonPress(false);
     cancelHoldActiveRef.current = false;
     cancelHoldIdRef.current += 1;
 
-    if (cancelHoldTimeoutRef.current)  {
-      clearTimeout(cancelHoldTimeoutRef.current);
-      cancelHoldTimeoutRef.current = null;
-    }
-
-    if (cancelHoldAnimationDelayRef.current) {
-      clearTimeout(cancelHoldAnimationDelayRef.current);
-      cancelHoldAnimationDelayRef.current = null;
-    }
+    clearCancelHoldTimeouts();
 
     if (!cancelAccelStartedRef.current) {
       return;
@@ -349,252 +514,191 @@ export default function App() {
         toValue: 0,
         duration: 750,
         easing: Easing.in(Easing.bounce),
-        useNativeDriver: true
+        useNativeDriver: true,
       }).start();
     });
-  }, [animateButtonPress, cancelOverlayAnimation]);
+  }, [animateButtonPress, cancelOverlayAnimation, clearCancelHoldTimeouts]);
 
-  const animation = React.useCallback(() => {
-    if (timerIsRunning || containerHeight === 0) {
-        return;
-    }
-    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
-    setIsRunning(true);
-    taskDetailsAnimation.setValue(0);
-    countdownAnimation.setValue(0);
-    cancelOverlayAnimation.setValue(0);
-
-    const totalSeconds = duration * TIMER_UNIT_IN_SECONDS;
-    setTimeRemaining(totalSeconds);
-
-    sessionStartedAtRef.current = Date.now();
-    sessionDurationMsRef.current = totalSeconds * 1000;
-
-    if (countdownRef.current) {
-        clearInterval(countdownRef.current);
-        countdownRef.current = null;
-      }
-    countdownRef.current = setInterval(() => {
-      setTimeRemaining((currentTime) => {
-        if (currentTime <= 1) {
-          if (countdownRef.current) {
-            clearInterval(countdownRef.current);
-            countdownRef.current = null;
-          }
-          return 0;
-          }
-         return currentTime -1;
-        });
-    }, 1000);
-
-    const runningAnimation = Animated.sequence([
-      Animated.parallel([
-        Animated.timing(buttonAnimation, {
-          toValue: 1,
-          duration: 300,
-          useNativeDriver: true
-        }),
-        Animated.timing(cancelButtonAnimation, {
-          toValue: 1,
-          duration: 300,
-          useNativeDriver: true
-        }),
-
-        Animated.timing(countdownAnimation, {
-          toValue: 1,
-          duration: 300,
-          useNativeDriver: true
-        }),
-        Animated.timing(timerAnimation, {
-          toValue: 0,
-          duration: 300,
-          useNativeDriver: true
-        }),
-      ]),
-      Animated.timing(focusModeAnimation, {
-        toValue: 1,
-        duration: 450,
-        useNativeDriver: true
-      }),
-      Animated.timing(taskDetailsAnimation, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: true
-      }),
-    ]);
-    runningAnimationRef.current = runningAnimation;
-
-    runningAnimation.start(({ finished }) => {
-      runningAnimationRef.current = null;
-
-      if (!finished) {
+  const handleTimerPickerMomentumEnd = React.useCallback(
+    (event: { nativeEvent: { contentOffset: { x: number } } }) => {
+      if (timerIsRunning) {
         return;
       }
 
-      startProgressAnimation(0);
-    });
-  }, [cancelButtonAnimation, countdownAnimation,
-    buttonAnimation, cancelOverlayAnimation, taskDetailsAnimation,
-    timerAnimation, focusModeAnimation, duration, timerIsRunning, containerHeight, startProgressAnimation]);
-return (
-  <View style={styles.container}
-  onLayout={(event) => {
-    setContainerHeight(event.nativeEvent.layout.height);
-  }}>
-    <StatusBar hidden />
-    <Animated.View
-    style={[StyleSheet.absoluteFillObject, {
-      height: containerHeight,
-      width,
-      backgroundColor: colors.red,
-      transform: [{
-          translateY: timerOverlayTranslateY
-      }]
-    }]}
-    />
-    <Animated.View
-      style={[
-        StyleSheet.absoluteFillObject,
-        {
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          paddingBottom: 100,
-          opacity,
-          transform: [{
-              translateY
-          }]
-        },
-      ]}>
-        <TouchableOpacity
-        disabled={timerIsRunning}
-        onPress={animation}
-        onPressIn={() => animateButtonPress(true)}
-        onPressOut={() => animateButtonPress(false)}>
-          <Animated.View style={[styles.roundButton,
+      const index = Math.round(event.nativeEvent.contentOffset.x / ITEM_SIZE);
+      const clampedIndex = Math.max(0, Math.min(index, TIMER_OPTIONS.length - 1));
+      setDuration(TIMER_OPTIONS[clampedIndex]);
+    },
+    [timerIsRunning]
+  );
+
+  const renderTimerItem = React.useCallback(
+    ({ item, index }: { item: number; index: number }) => {
+      const inputRange = [
+        (index - 1) * ITEM_SIZE,
+        index * ITEM_SIZE,
+        (index + 1) * ITEM_SIZE,
+      ];
+
+      const baseOpacity = scrollX.interpolate({
+        inputRange,
+        outputRange: [0.4, 1, 0.4],
+      });
+
+      const opacity = Animated.multiply(baseOpacity, pickerOpacity);
+      const scale = scrollX.interpolate({
+        inputRange,
+        outputRange: [0.7, 1, 0.7],
+      });
+
+      return (
+        <View style={styles.timerOptionItem}>
+          <Animated.Text
+            style={[
+              styles.text,
+              {
+                opacity,
+                transform: [{ scale }],
+              },
+            ]}
+          >
+            {item}
+          </Animated.Text>
+        </View>
+      );
+    },
+    [pickerOpacity, scrollX]
+  );
+
+  return (
+    <View
+      style={styles.container}
+      onLayout={(event) => {
+        setContainerHeight(event.nativeEvent.layout.height);
+      }}
+    >
+      <StatusBar hidden />
+
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFillObject,
+          styles.timerOverlay,
           {
-            transform: [{ scale: pressedButtonScale }],
+            height: containerHeight,
+            width,
+            transform: [{ translateY: timerOverlayTranslateY }],
           },
-          ]}>
-            <Text className='text-text-main text-xl'>Start</Text>
-            <Text className='text-text-main text-xl'>Sprint</Text>
-          </Animated.View>
-        </TouchableOpacity>
-    </Animated.View>
-    <Animated.View
-    pointerEvents={timerIsRunning? 'auto' : 'none'}
-    style={[
-      styles.cancelButtonContainer,
-      {
-        opacity: cancelButtonOpacity,
-        transform: [{translateY: cancelButtonTranslateY}],
-      },
-    ]}>
-      <TouchableOpacity
-        onPressIn={startCancelHold}
-        onPressOut={stopCancelHold}>
-          <Animated.View style={[styles.cancelButton,
+        ]}
+      />
+
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFillObject,
+          styles.startButtonContainer,
           {
-            transform: [{ scale: pressedButtonScale }],
+            opacity: startButtonOpacity,
+            transform: [{ translateY: startButtonTranslateY }],
           },
         ]}
       >
-          <Text className='text-text-main text-xl'>Hold to end sprint</Text>
-        </Animated.View>
-      </TouchableOpacity>
-    </Animated.View>
-    <Animated.View
-        pointerEvents= 'none'
+        <TouchableOpacity
+          disabled={timerIsRunning}
+          onPress={startTimerSession}
+          onPressIn={() => animateButtonPress(true)}
+          onPressOut={() => animateButtonPress(false)}
+        >
+          <Animated.View
+            style={[
+              styles.roundButton,
+              {
+                transform: [{ scale: pressedButtonScale }],
+              },
+            ]}
+          >
+            <Text className="text-text-main text-xl">Start</Text>
+            <Text className="text-text-main text-xl">Sprint</Text>
+          </Animated.View>
+        </TouchableOpacity>
+      </Animated.View>
+
+      <Animated.View
+        pointerEvents={timerIsRunning ? 'auto' : 'none'}
         style={[
-          styles.countdownOverlay, {
+          styles.cancelButtonContainer,
+          {
+            opacity: cancelButtonAnimation,
+            transform: [{ translateY: cancelButtonTranslateY }],
+          },
+        ]}
+      >
+        <TouchableOpacity onPressIn={handleCancelHoldStart} onPressOut={handleCancelHoldEnd}>
+          <Animated.View
+            style={[
+              styles.cancelButton,
+              {
+                transform: [{ scale: pressedButtonScale }],
+              },
+            ]}
+          >
+            <Text className="text-text-main text-xl">Hold to end sprint</Text>
+          </Animated.View>
+        </TouchableOpacity>
+      </Animated.View>
+
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          styles.countdownOverlay,
+          {
             opacity: countdownAnimation,
             transform: [
-              {translateX: countdownTranslateX},
-              {translateY: countdownTranslateY},
-              {scale: countdownScale},
+              { translateX: countdownTranslateX },
+              { translateY: countdownTranslateY },
+              { scale: countdownScale },
             ],
           },
         ]}
-        >
-          <Text style= {styles.countdownText}>{formatTime(timeRemaining)}</Text>
-        </Animated.View>
-    <View
-      style={{
-        position: 'absolute',
-        top: containerHeight / 3,
-        left: 0,
-        right: 0,
-        flex: 1,
-      }}>
+      >
+        <Text style={styles.countdownText}>{formatTime(timeRemaining)}</Text>
+      </Animated.View>
 
+      <View
+        style={[
+          styles.timerPickerWrapper,
+          {
+            top: containerHeight / 3,
+          },
+        ]}
+      >
         <Animated.FlatList
-        data={timers}
-        scrollEnabled={!timerIsRunning}
-        keyExtractor={item => item.toString()}
-        horizontal
-        bounces={false}
-        onScroll={Animated.event(
-          [{nativeEvent: {contentOffset: {x: scrollX}}}],
-          { useNativeDriver: true}
-        )}
-        showsHorizontalScrollIndicator={false}
-        onMomentumScrollEnd={ev => {
-          if (timerIsRunning) {
-            return;
-          }
-
-          const index = Math.round(ev.nativeEvent.contentOffset.x / ITEM_SIZE);
-          const clampedIndex = Math.max(0, Math.min(index, timers.length - 1));
-          setDuration(timers[clampedIndex]);
-        }}
-
-        snapToInterval={ITEM_SIZE}
-        decelerationRate={"fast"}
-        style={{flexGrow: 0}}
-        contentContainerStyle={{
-          paddingHorizontal: ITEM_SPACING
-        }}
-        renderItem={({item, index}) => {
-          const timerText = item;
-          const inputRange = [
-              (index - 1) * ITEM_SIZE,
-              index * ITEM_SIZE,
-              (index + 1) * ITEM_SIZE,
-          ]
-          const normalOpacity = scrollX.interpolate({
-              inputRange,
-              outputRange: [.4, 1, .4]
-          })
-          const opacity = Animated.multiply(normalOpacity, inactiveTimerNumberOpacity);
-          const scale = scrollX.interpolate({
-              inputRange,
-              outputRange: [.7, 1, .7]
-          })
-          return <View style={{width: ITEM_SIZE, justifyContent: 'center', alignItems: 'center'}}>
-              <Animated.Text style={[styles.text, {
-                  opacity,
-                  transform: [{
-                      scale
-                  }]
-
-              }]}>
-                  {timerText}
-              </Animated.Text>
-            </View>
-          }
-        }
+          data={TIMER_OPTIONS}
+          scrollEnabled={!timerIsRunning}
+          keyExtractor={(item) => item.toString()}
+          horizontal
+          bounces={false}
+          onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+            useNativeDriver: true,
+          })}
+          showsHorizontalScrollIndicator={false}
+          onMomentumScrollEnd={handleTimerPickerMomentumEnd}
+          snapToInterval={ITEM_SIZE}
+          decelerationRate="fast"
+          style={styles.timerPickerList}
+          contentContainerStyle={styles.timerPickerContent}
+          renderItem={renderTimerItem}
         />
       </View>
+
       <Animated.View
         pointerEvents="none"
         style={[
           styles.taskDetails,
           {
             opacity: taskDetailsOpacity,
-            transform: [{
-              translateY: taskDetailsTranslateY
-            }]
-          }
-        ]}>
+            transform: [{ translateY: taskDetailsTranslateY }],
+          },
+        ]}
+      >
         <Text style={styles.taskName}>{placeholderTask.name}</Text>
         <Text style={styles.taskDescription}>{placeholderTask.description}</Text>
       </Animated.View>
@@ -607,6 +711,14 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: colors.black,
   },
+  timerOverlay: {
+    backgroundColor: colors.red,
+  },
+  startButtonContainer: {
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingBottom: 100,
+  },
   roundButton: {
     width: 80,
     height: 80,
@@ -615,6 +727,23 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  timerPickerWrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    flex: 1,
+  },
+  timerPickerList: {
+    flexGrow: 0,
+  },
+  timerPickerContent: {
+    paddingHorizontal: ITEM_SPACING,
+  },
+  timerOptionItem: {
+    width: ITEM_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   text: {
     fontSize: ITEM_SIZE * 0.8,
     fontFamily: 'Menlo',
@@ -648,7 +777,7 @@ const styles = StyleSheet.create({
     fontWeight: '900',
     textAlign: 'center',
   },
-  cancelButtonContainer:  {
+  cancelButtonContainer: {
     position: 'absolute',
     left: 0,
     right: 0,
diff --git a/notes/work-report-timer-2026-04-24.md b/notes/work-report-timer-2026-04-24.md
index f34e139..317dc5c 100644
--- a/notes/work-report-timer-2026-04-24.md
+++ b/notes/work-report-timer-2026-04-24.md
@@ -186,3 +186,6 @@ Tried to implement sound by installing expo-audio. This caused the dependency li
 ## Todo
 - Re-refactor to make code cleaner, more readable and easier to maintain.
 - Figure out the dependency issues of later dependency lists
+
+## Conclusion of dependecy saga
+There was a mismatch in the nativewind dependency, with my one being ^4.2.3 and the other list being ^4.1.23. This cause my entire timer screen to fail. Animations got borked, buttons not working properly, duration picker only showing 2 indexes... the works. Solution - keepp nativewind dependency to ^4.2.3
diff --git a/notes/work-report-timer-2026-04-25.md b/notes/work-report-timer-2026-04-25.md
new file mode 100644
index 0000000..eb8d9a0
--- /dev/null
+++ b/notes/work-report-timer-2026-04-25.md
@@ -0,0 +1,163 @@
+# Timer Refactor and Verification Work Report
+
+## #Overview
+Today the timer screen was worked on with a narrower goal than yesterday: not new interaction features, but cleanup, readability, and making the existing timer flow easier to understand and maintain.
+
+This follows directly from yesterday's state. The April 24 note ended with two follow-up items:
+- re-refactor the timer code so it becomes easier to read and work on
+- keep the dependency situation stable after the NativeWind version mismatch had broken the screen
+
+Today's work focused on the first of those. The interaction model was kept the same, but the internal structure of `timer.tsx` was cleaned up so the current hold-to-cancel and focus-mode behavior is easier to inspect without splitting the code into hooks or separate files.
+
+---
+
+## #ImplementedFeatures
+
+### #TimerCodeRefactor
+Refactored the timer screen structure inside `app/(tabs)/timer.tsx`:
+- renamed the component from `App` to `TimerScreen`
+- renamed unclear callbacks such as the old generic start-animation function into `startTimerSession`
+- grouped the file more clearly into constants, animated values, refs, derived values, actions, render helpers, and JSX
+- renamed vague animated/interpolated values to clearer names such as `startButtonOpacity`, `startButtonTranslateY`, and `pickerOpacity`
+
+This did not change the screen architecture into multiple files. The cleanup stayed local to the timer file so the animation flow is still easy to inspect in one place.
+
+---
+
+### #CleanupHelpers
+Extracted repeated timer cleanup work into small local helpers:
+- added `clearCountdownInterval()`
+- added `clearCancelHoldTimeouts()`
+- added `stopRunningAnimations()`
+- added `resetSessionValues()`
+
+Before this, the same interval, timeout, and animation-reset work was spread across multiple callbacks. Pulling it into helpers makes it easier to follow what happens when a session starts, finishes, or is cancelled.
+
+---
+
+### #RenderStructureCleanup
+Cleaned up the render section so it is easier to read:
+- moved repeated inline layout styles into named `StyleSheet` entries
+- extracted the timer picker item rendering into a local `renderTimerItem(...)` helper
+- kept the JSX order aligned with the visible screen layers: overlay, start button, cancel button, countdown, duration picker, and task details
+
+This mainly improves scanning. The old file worked, but the render section made you jump between inline style objects and animation expressions to understand each layer.
+
+---
+
+### #CommentAndNamingPass
+Added a small number of comments only where the code was genuinely hard to follow:
+- clarified that `timerAnimation` owns real timer progress
+- clarified that `cancelOverlayAnimation` is only a temporary visual offset during hold-to-cancel
+- clarified that `startProgressAnimation(fromY)` resumes overlay progress from the current Y position
+- clarified why cancel acceleration starts after a short delay
+
+The aim was not to comment every line, but to explain the parts that are hard to infer just by reading the code.
+
+---
+
+### #StateResetTightening
+Made the session cleanup more explicit:
+- reset `sessionStartedAtRef` and `sessionDurationMsRef` when a session ends
+- reset cancel-hold flags during session cleanup
+- made `finishTimer()` explicitly clear the countdown interval before running exit animations
+- kept the existing unmount cleanup so intervals, timeouts, and running animations are not left behind if the screen disappears mid-session
+
+These are small changes, but they make the timer lifecycle more predictable and reduce the amount of stale mutable state left around after finish or cancel paths.
+
+---
+
+## #LearningNotes
+
+### #ReadableCodeVsNewFeatures
+Today's timer work was a good reminder that "more maintainable" does not always mean "more abstract."
+
+For this screen, the right cleanup level was:
+- better names
+- smaller local helpers
+- clearer grouping
+- a few targeted comments
+
+The wrong cleanup level for the current stage would have been moving the logic into extra hooks or files too early, because that would make it harder to inspect the animation flow while the interaction is still being tuned.
+
+---
+
+### #MutableRefOwnership
+The timer file still relies heavily on refs because several parts of the interaction are long-lived and imperative:
+- active countdown interval
+- running start animation
+- running progress animation
+- delayed cancel-preview start
+- hold-to-cancel completion timeout
+
+The cleanup made this easier to see by separating refs that hold animated values from refs that track mutable timer/session ownership.
+
+---
+
+## #CurrentState
+
+Compared with yesterday, the timer interaction model is mostly the same, but the code behind it is more structured.
+
+The current implementation:
+- keeps the red overlay model used yesterday
+- keeps `timerAnimation` as the real progress owner
+- keeps `cancelOverlayAnimation` as the temporary hold-preview layer
+- keeps the delayed hold acceleration and release recovery flow
+- keeps all timer logic local to `timer.tsx`
+- is now easier to read because repeated cleanup and render logic have been extracted into named local pieces
+
+This means today's work was mainly a recovery and consolidation pass after yesterday's interaction-heavy changes and the earlier dependency-related breakage.
+
+---
+
+## #Verification
+
+Today's static checks passed after the refactor:
+
+```text
+npm run lint
+exited successfully
+```
+
+```text
+npx tsc --noEmit
+exited successfully
+```
+
+```text
+git diff --check -- 'app/(tabs)/timer.tsx'
+exited successfully
+```
+
+There was no new timer commit for today at the time of writing this note. The summary above is based on:
+- the current working-tree diff for `app/(tabs)/timer.tsx`
+- the verification commands run after the refactor
+- yesterday's note and timer history for context
+
+I did not do a live Expo interaction test inside this note workflow, so runtime behavior is verified statically plus by code review rather than by manually pressing through the UI.
+
+---
+
+## #FilesChanged
+
+Main file worked on:
+
+```text
+app/(tabs)/timer.tsx
+```
+
+New note added:
+
+```text
+notes/work-report-timer-2026-04-25.md
+```
+
+---
+
+## #Conclusion
+
+The main timer work today was not adding new features, but making yesterday's feature-rich timer implementation is easier to continue working on.
+
+The result is a timer file that keeps the same focus-mode and hold-to-cancel behavior, while being more readable, more structured, and easier to maintain. The biggest improvement is that the important ideas in the file now have clearer names, clearer ownership, and clearer cleanup paths.
+
+The timer is now considered finished and ready to implement into the rest of the project.
\ No newline at end of file