diff --git a/docs/plans/2026-02-18-motion-system-implementation.md b/docs/plans/2026-02-18-motion-system-implementation.md
new file mode 100644
index 0000000..3162c80
--- /dev/null
+++ b/docs/plans/2026-02-18-motion-system-implementation.md
@@ -0,0 +1,1139 @@
+# Motion System Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add fluid spring-based animations and micro-interactions throughout ZeroClock — page transitions, list animations, button feedback, loading states, modal/dropdown polish, and timer-specific effects.
+
+**Architecture:** Vue `<Transition>` and `<TransitionGroup>` for enter/leave orchestration with CSS transition classes. `@vueuse/motion` for spring-physics on interactive elements (nav rail indicator, timer pulse). CSS keyframes for ambient/looping animations (shimmer, float). All animations respect `prefers-reduced-motion`.
+
+**Tech Stack:** Vue 3, @vueuse/motion, Tailwind CSS v4, CSS transitions/keyframes
+
+---
+
+### Task 1: Install @vueuse/motion and create spring presets
+
+**Files:**
+- Modify: `package.json`
+- Modify: `src/main.ts`
+- Create: `src/utils/motion.ts`
+
+**Step 1: Install the dependency**
+
+Run: `npm install @vueuse/motion`
+
+**Step 2: Register MotionPlugin in main.ts**
+
+Add to `src/main.ts`:
+
+```ts
+import { MotionPlugin } from '@vueuse/motion'
+
+// After app.use(router), before app.mount:
+app.use(MotionPlugin)
+```
+
+Final `src/main.ts`:
+
+```ts
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { MotionPlugin } from '@vueuse/motion'
+import router from './router'
+import App from './App.vue'
+import './styles/main.css'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.use(router)
+app.use(MotionPlugin)
+app.mount('#app')
+```
+
+**Step 3: Create spring preset module**
+
+Create `src/utils/motion.ts`:
+
+```ts
+// Spring presets for @vueuse/motion
+export const springPresets = {
+  snappy: { damping: 20, stiffness: 300 },
+  smooth: { damping: 15, stiffness: 200 },
+  popIn: { damping: 12, stiffness: 400 },
+}
+```
+
+**Step 4: Verify build**
+
+Run: `npm run build`
+Expected: Build passes with no errors.
+
+**Step 5: Commit**
+
+```bash
+git add package.json package-lock.json src/main.ts src/utils/motion.ts
+git commit -m "feat: install @vueuse/motion and create spring presets"
+```
+
+---
+
+### Task 2: Add CSS animation classes and keyframes
+
+**Files:**
+- Modify: `src/styles/main.css`
+
+Add all the reusable transition classes and new keyframes needed by subsequent tasks. Place them after the existing keyframes block (after line 232 `.animate-pulse-colon`).
+
+**Step 1: Add page transition CSS classes**
+
+```css
+/* Page transitions */
+.page-enter-active {
+  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
+              transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.page-leave-active {
+  transition: opacity 150ms ease-out,
+              transform 150ms ease-out;
+}
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+```
+
+**Step 2: Add list transition CSS classes**
+
+```css
+/* List item transitions */
+.list-enter-active {
+  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
+              transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.list-leave-active {
+  transition: opacity 150ms ease-in,
+              transform 150ms ease-in;
+}
+.list-move {
+  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.list-enter-from {
+  opacity: 0;
+  transform: translateY(12px);
+}
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+```
+
+**Step 3: Add tag chip transition classes**
+
+```css
+/* Tag chip transitions */
+.chip-enter-active {
+  transition: opacity 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
+              transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.chip-leave-active {
+  transition: opacity 100ms ease-in,
+              transform 100ms ease-in;
+}
+.chip-enter-from {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.chip-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+```
+
+**Step 4: Add modal transition classes**
+
+```css
+/* Modal backdrop transitions */
+.modal-enter-active {
+  transition: opacity 200ms ease-out;
+}
+.modal-leave-active {
+  transition: opacity 150ms ease-in;
+}
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+/* Modal panel transitions */
+.modal-panel-enter-active {
+  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
+              transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.modal-panel-leave-active {
+  transition: opacity 150ms ease-in,
+              transform 150ms ease-in;
+}
+.modal-panel-enter-from {
+  opacity: 0;
+  transform: scale(0.95);
+}
+.modal-panel-leave-to {
+  opacity: 0;
+  transform: scale(0.97);
+}
+```
+
+**Step 5: Add dropdown transition classes**
+
+```css
+/* Dropdown transitions */
+.dropdown-enter-active {
+  transition: opacity 150ms cubic-bezier(0.22, 1, 0.36, 1),
+              transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.dropdown-leave-active {
+  transition: opacity 100ms ease-in,
+              transform 100ms ease-in;
+}
+.dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.95);
+}
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+```
+
+**Step 6: Add content fade-in transition**
+
+```css
+/* Content fade-in */
+.fade-enter-active {
+  transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
+              transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.fade-leave-active {
+  transition: opacity 150ms ease-out;
+}
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(4px);
+}
+.fade-leave-to {
+  opacity: 0;
+}
+```
+
+**Step 7: Add shimmer and float keyframes**
+
+```css
+/* Skeleton shimmer */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-bg-surface) 50%, var(--color-bg-elevated) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+/* Empty state floating icon */
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+```
+
+**Step 8: Add button feedback utilities**
+
+```css
+/* Button interactive feedback */
+.btn-primary {
+  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
+              box-shadow 150ms ease;
+}
+.btn-primary:hover {
+  transform: scale(1.02);
+}
+.btn-primary:active {
+  transform: scale(0.97);
+  transition-duration: 50ms;
+}
+
+.btn-icon:active {
+  transform: scale(0.85);
+  transition: transform 100ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.btn-icon-delete:active {
+  transform: scale(0.85) rotate(-10deg);
+  transition: transform 100ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Card hover lift */
+.card-hover {
+  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
+              box-shadow 200ms ease;
+}
+.card-hover:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.card-hover:active {
+  transform: translateY(0);
+}
+```
+
+**Step 9: Add toggle switch overshoot**
+
+```css
+/* Toggle switch overshoot easing */
+.toggle-thumb {
+  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+```
+
+**Step 10: Add progress bar animation**
+
+```css
+/* Progress bar animate-in */
+.progress-bar {
+  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+```
+
+**Step 11: Update toast keyframes with horizontal slide**
+
+Replace the existing `@keyframes toast-enter` (around line 196-205) with:
+
+```css
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) translateX(0);
+  }
+}
+```
+
+Replace `@keyframes toast-exit` with:
+
+```css
+@keyframes toast-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+```
+
+**Step 12: Add reduced motion override**
+
+At the very end of the file:
+
+```css
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+**Step 13: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 14: Commit**
+
+```bash
+git add src/styles/main.css
+git commit -m "feat: add animation CSS classes, keyframes, and reduced-motion support"
+```
+
+---
+
+### Task 3: Page transitions on router-view
+
+**Files:**
+- Modify: `src/App.vue:76-87` (template section)
+
+**Step 1: Wrap router-view in Transition**
+
+Replace the current `<router-view />` at line 82 with:
+
+```html
+<router-view v-slot="{ Component }">
+  <Transition name="page" mode="out-in">
+    <component :is="Component" :key="$route.path" />
+  </Transition>
+</router-view>
+```
+
+The `:key="$route.path"` ensures the transition fires on every route change. The CSS classes `page-enter-active`, `page-leave-active`, `page-enter-from`, `page-leave-to` were added in Task 2.
+
+**Step 2: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 3: Commit**
+
+```bash
+git add src/App.vue
+git commit -m "feat: add page transitions on route changes"
+```
+
+---
+
+### Task 4: NavRail animated active indicator
+
+**Files:**
+- Modify: `src/components/NavRail.vue`
+
+Currently NavRail renders a `<div v-if="currentPath === item.path">` inside each button, creating/destroying the indicator. Change this to a single absolutely-positioned indicator div that slides to the active item using CSS transitions.
+
+**Step 1: Rewrite NavRail template**
+
+Replace the entire template in `src/components/NavRail.vue` with:
+
+```html
+<template>
+  <nav class="w-12 flex flex-col items-center bg-bg-surface border-r border-border-subtle shrink-0">
+    <!-- Navigation icons -->
+    <div class="relative flex-1 flex flex-col items-center pt-2 gap-1">
+      <!-- Sliding active indicator -->
+      <div
+        v-if="activeIndex >= 0"
+        class="absolute left-0 w-[2px] bg-accent transition-all duration-300"
+        :style="{ top: `${activeIndex * 52 + 8 + 8}px`, height: '36px' }"
+        style="transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);"
+      />
+
+      <button
+        v-for="(item, index) in navItems"
+        :key="item.path"
+        @click="navigate(item.path)"
+        class="relative w-12 h-[52px] flex items-center justify-center transition-colors duration-150 group"
+        :class="currentPath === item.path
+          ? 'text-text-primary'
+          : 'text-text-tertiary hover:text-text-secondary'"
+        :title="item.name"
+      >
+        <component :is="item.icon" class="w-[18px] h-[18px]" :stroke-width="1.5" />
+
+        <!-- Tooltip -->
+        <div class="absolute left-full ml-2 px-2 py-1 bg-bg-elevated border border-border-subtle rounded-lg text-[0.6875rem] text-text-primary whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-150 z-50">
+          <div class="absolute -left-1 top-1/2 -translate-y-1/2 w-0 h-0 border-y-4 border-y-transparent border-r-4" style="border-right-color: var(--color-bg-elevated)"></div>
+          {{ item.name }}
+        </div>
+      </button>
+    </div>
+
+    <!-- Timer status indicator (bottom) -->
+    <div class="pb-4">
+      <div
+        v-if="timerStore.isRunning"
+        class="w-2 h-2 rounded-full bg-status-running animate-pulse-dot"
+      />
+      <div
+        v-else-if="timerStore.isPaused"
+        class="w-2 h-2 rounded-full bg-status-warning animate-pulse-dot"
+      />
+    </div>
+  </nav>
+</template>
+```
+
+**Step 2: Add activeIndex computed**
+
+In the `<script setup>`, add:
+
+```ts
+const activeIndex = computed(() => {
+  return navItems.findIndex(item => item.path === currentPath.value)
+})
+```
+
+The indicator's top position is calculated from the index. Each button is 52px tall (`h-[52px]`). The parent has `pt-2` (8px top padding). The indicator is 36px tall, offset 8px from top of the button for centering: `top = index * 52 + 8 + 8`.
+
+**Step 3: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 4: Commit**
+
+```bash
+git add src/components/NavRail.vue
+git commit -m "feat: add sliding active indicator to NavRail"
+```
+
+---
+
+### Task 5: List animations on Entries, Projects, Clients
+
+**Files:**
+- Modify: `src/views/Entries.vue` (entry table rows)
+- Modify: `src/views/Projects.vue` (project cards grid)
+- Modify: `src/views/Clients.vue` (client cards grid)
+
+**Step 1: Entries.vue — wrap table body rows in TransitionGroup**
+
+In `src/views/Entries.vue`, replace `<tbody>` block (lines 73-142) with:
+
+```html
+<TransitionGroup name="list" tag="tbody">
+  <tr
+    v-for="(entry, index) in filteredEntries"
+    :key="entry.id"
+    class="group border-b border-border-subtle hover:bg-bg-elevated transition-colors duration-150"
+    :style="{ transitionDelay: `${index * 30}ms` }"
+  >
+    <!-- ... existing td cells unchanged ... -->
+  </tr>
+</TransitionGroup>
+```
+
+The `:style="{ transitionDelay: ... }"` creates the stagger effect. The `list-*` CSS classes from Task 2 handle the actual enter/leave/move animation.
+
+Note: Keep all the `<td>` content exactly as-is inside the `<tr>`.
+
+**Step 2: Projects.vue — wrap project cards in TransitionGroup**
+
+In `src/views/Projects.vue`, replace the wrapping `<div v-if="projectsStore.projects.length > 0" class="grid ...">` (line 15) from a plain `<div>` to a `<TransitionGroup>`:
+
+```html
+<TransitionGroup
+  v-if="projectsStore.projects.length > 0"
+  name="list"
+  tag="div"
+  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+>
+  <!-- existing v-for cards, add :style for stagger -->
+  <div
+    v-for="(project, index) in projectsStore.projects"
+    :key="project.id"
+    class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] card-hover cursor-pointer"
+    :style="{ transitionDelay: `${index * 30}ms` }"
+    @click="openEditDialog(project)"
+  >
+    <!-- ... existing content unchanged ... -->
+  </div>
+</TransitionGroup>
+```
+
+Note: Also replace `hover:bg-bg-elevated transition-all duration-150` with the `card-hover` class (from Task 2) to get the hover-lift effect.
+
+**Step 3: Clients.vue — wrap client cards in TransitionGroup**
+
+Same pattern as Projects. In `src/views/Clients.vue`, replace the grid `<div>` (line 15) with:
+
+```html
+<TransitionGroup
+  v-if="clientsStore.clients.length > 0"
+  name="list"
+  tag="div"
+  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+>
+  <div
+    v-for="(client, index) in clientsStore.clients"
+    :key="client.id"
+    class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] card-hover cursor-pointer"
+    :style="{ transitionDelay: `${index * 30}ms` }"
+    @click="openEditDialog(client)"
+  >
+    <!-- ... existing content unchanged ... -->
+  </div>
+</TransitionGroup>
+```
+
+**Step 4: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 5: Commit**
+
+```bash
+git add src/views/Entries.vue src/views/Projects.vue src/views/Clients.vue
+git commit -m "feat: add list enter/leave animations to Entries, Projects, Clients"
+```
+
+---
+
+### Task 6: List animations on Timer view
+
+**Files:**
+- Modify: `src/views/Timer.vue`
+
+**Step 1: Animate recent entries list**
+
+In `src/views/Timer.vue`, replace the `<div v-if="recentEntries.length > 0">` container (line 120-152) with a `<TransitionGroup>`:
+
+```html
+<TransitionGroup v-if="recentEntries.length > 0" name="list" tag="div">
+  <div
+    v-for="(entry, index) in recentEntries"
+    :key="entry.id"
+    class="flex items-center justify-between py-3 border-b border-border-subtle last:border-0"
+    :class="index === 0 ? 'border-l-2 border-l-accent pl-3' : ''"
+    :style="{ transitionDelay: `${index * 40}ms` }"
+  >
+    <!-- ... existing content unchanged ... -->
+  </div>
+</TransitionGroup>
+```
+
+**Step 2: Animate favorites strip**
+
+Replace the favorites `<div class="flex items-center gap-2 ...">` (line 44-56) with a `<TransitionGroup>`:
+
+```html
+<TransitionGroup tag="div" name="chip" class="flex items-center gap-2 overflow-x-auto pb-1">
+  <button
+    v-for="(fav, index) in favorites"
+    :key="fav.id"
+    @click="applyFavorite(fav)"
+    :disabled="!timerStore.isStopped"
+    class="shrink-0 flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border-subtle text-[0.6875rem] text-text-secondary hover:text-text-primary hover:border-border-visible transition-colors disabled:opacity-40"
+    :style="{ transitionDelay: `${index * 50}ms` }"
+  >
+    <span class="w-2 h-2 rounded-full" :style="{ backgroundColor: getProjectColor(fav.project_id) }" />
+    {{ getProjectName(fav.project_id) }}
+    <span v-if="fav.description" class="text-text-tertiary">&middot; {{ fav.description }}</span>
+  </button>
+</TransitionGroup>
+```
+
+**Step 3: Add empty state floating icon**
+
+In the empty state section (line 155-159), add `animate-float` class to the Timer icon:
+
+```html
+<TimerIcon class="w-10 h-10 text-text-tertiary animate-float" :stroke-width="1.5" />
+```
+
+**Step 4: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 5: Commit**
+
+```bash
+git add src/views/Timer.vue
+git commit -m "feat: add list animations and floating empty-state icon to Timer"
+```
+
+---
+
+### Task 7: Modal transitions (enter + leave)
+
+**Files:**
+- Modify: `src/views/Projects.vue`
+- Modify: `src/views/Clients.vue`
+- Modify: `src/views/Entries.vue`
+- Modify: `src/views/Settings.vue` (if it has modals using `v-if` + `animate-modal-enter`)
+
+Currently all modals use `v-if` on a wrapping div with `animate-modal-enter` on the panel. This gives enter-only animation. We'll wrap each modal in a `<Transition>` to get both enter AND leave.
+
+The pattern for every modal is:
+
+**Before (current):**
+```html
+<div v-if="showDialog" class="fixed inset-0 bg-black/70 ...">
+  <div class="... animate-modal-enter">
+    ...
+  </div>
+</div>
+```
+
+**After (with transitions):**
+```html
+<Transition name="modal">
+  <div v-if="showDialog" class="fixed inset-0 bg-black/70 ..." @click.self="...">
+    <Transition name="modal-panel" appear>
+      <div class="..." :key="showDialog">
+        ...
+      </div>
+    </Transition>
+  </div>
+</Transition>
+```
+
+Actually, since the backdrop and panel appear/disappear together (same `v-if`), we can simplify. Instead of nesting Transitions, use a single `<Transition>` on the backdrop `v-if` and add CSS for the panel animation within the enter/leave classes.
+
+**Simplified pattern:**
+
+Replace:
+```html
+<div
+  v-if="showDialog"
+  class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
+  @click.self="closeDialog"
+>
+  <div class="bg-bg-surface ... animate-modal-enter">
+```
+
+With:
+```html
+<Transition name="modal" appear>
+  <div
+    v-if="showDialog"
+    class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
+    @click.self="closeDialog"
+  >
+    <div class="bg-bg-surface ...">
+```
+
+Remove `animate-modal-enter` from the panel div — the `modal-*` CSS transition classes from Task 2 handle the fade. Also add panel scale animation by targeting the child:
+
+We need an additional CSS approach: wrap the panel itself in a nested `<Transition name="modal-panel">`. Since the panel is inside the backdrop div and the backdrop controls `v-if`, we need `appear` on the inner transition.
+
+**Simplest correct approach:**
+
+```html
+<Transition name="modal">
+  <div
+    v-if="showDialog"
+    class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
+    @click.self="tryCloseDialog"
+  >
+    <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 max-h-[calc(100vh-2rem)] overflow-y-auto">
+```
+
+And add to CSS (already in Task 2):
+```css
+.modal-enter-active .bg-bg-surface,
+.modal-leave-active .bg-bg-surface { ... }
+```
+
+Actually, let's keep it simpler. The `modal` transition classes already handle opacity. For the panel scale, let's add a combined approach — use the same transition name but add extra CSS that targets the child.
+
+**Best approach:** Use two separate `<Transition>` wrappers — one for backdrop, one for panel. The panel should use `appear` since it becomes visible when the backdrop does.
+
+Actually, the simplest approach that works: wrap the outer div in `<Transition name="modal">` (this gives the fade in/out on the backdrop), and separately wrap the inner panel div in its own `<Transition name="modal-panel" appear>`. BUT the inner panel doesn't have its own `v-if` — it's always rendered when the outer is rendered.
+
+Vue's `<Transition>` with `appear` will run the enter animation on initial render, which covers the case when `showDialog` becomes true. And when `showDialog` becomes false, the outer `<Transition name="modal">` handles the leave. But the inner panel won't get a leave animation this way.
+
+**Final correct approach:** Combine both animations into a single transition by targeting both backdrop and panel with CSS:
+
+```html
+<Transition name="modal">
+  <div v-if="showDialog" class="fixed inset-0 z-50" @click.self="...">
+    <div class="absolute inset-0 bg-black/70 backdrop-blur-[4px]" />
+    <div class="relative flex items-center justify-center h-full p-4" @click.self="...">
+      <div class="bg-bg-surface ... modal-panel">
+        ...
+      </div>
+    </div>
+  </div>
+</Transition>
+```
+
+This is getting complex. Let's use the most pragmatic approach instead:
+
+**Step 1: Apply to all modals**
+
+The simplest approach: wrap the outermost `v-if` div in `<Transition name="modal">`. The `modal-*` CSS classes will fade the entire modal (backdrop + panel) in and out. Remove the old `animate-modal-enter` class from all panels.
+
+In each file (Projects.vue, Clients.vue, Entries.vue), find every modal block that uses `v-if="show..."` + `animate-modal-enter` and:
+
+1. Wrap in `<Transition name="modal">` (just before the `<div v-if="...">`)
+2. Remove `animate-modal-enter` from the inner panel div
+
+**Projects.vue** — 2 modals:
+- Create/Edit dialog (line 82-242): `v-if="showDialog"`
+- Delete dialog (line 245-270): `v-if="showDeleteDialog"`
+
+**Clients.vue** — 2 modals:
+- Create/Edit dialog (line 68-203): `v-if="showDialog"`
+- Delete dialog (line 206-231): `v-if="showDeleteDialog"`
+
+**Entries.vue** — 2 modals:
+- Edit dialog (line 155-234): `v-if="showEditDialog"`
+- Delete dialog (line 237-262): `v-if="showDeleteDialog"`
+
+For each modal, change from:
+```html
+<div v-if="showDialog" class="fixed inset-0 bg-black/70 ...">
+  <div class="... animate-modal-enter">
+```
+
+To:
+```html
+<Transition name="modal">
+  <div v-if="showDialog" class="fixed inset-0 bg-black/70 ...">
+    <div class="...">
+```
+
+And add `</Transition>` after the closing `</div></div>`.
+
+**Step 2: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 3: Commit**
+
+```bash
+git add src/views/Projects.vue src/views/Clients.vue src/views/Entries.vue
+git commit -m "feat: add modal enter/leave transitions"
+```
+
+---
+
+### Task 8: Dropdown transitions (AppSelect, AppDatePicker, AppTagInput)
+
+**Files:**
+- Modify: `src/components/AppSelect.vue`
+- Modify: `src/components/AppDatePicker.vue`
+- Modify: `src/components/AppTagInput.vue`
+
+All three components use `v-if` on a teleported dropdown panel with `animate-dropdown-enter`. Replace with `<Transition name="dropdown">` for proper enter/leave.
+
+**Step 1: AppSelect.vue**
+
+In the `<Teleport to="body">` block (line 255-294), wrap the dropdown div in `<Transition>`:
+
+Replace:
+```html
+<Teleport to="body">
+  <div
+    v-if="isOpen"
+    ref="panelRef"
+    ...
+    class="... animate-dropdown-enter"
+  >
+```
+
+With:
+```html
+<Teleport to="body">
+  <Transition name="dropdown">
+    <div
+      v-if="isOpen"
+      ref="panelRef"
+      ...
+      class="..."
+    >
+```
+
+Remove `animate-dropdown-enter` from the class list. Add `</Transition>` before `</Teleport>`.
+
+**Step 2: AppDatePicker.vue**
+
+Same pattern — find the teleported dropdown panel with `v-if="isOpen"` and `animate-dropdown-enter`. Wrap in `<Transition name="dropdown">`, remove `animate-dropdown-enter`.
+
+**Step 3: AppTagInput.vue**
+
+Same pattern — find the teleported dropdown panel with `v-if="isOpen"` and `animate-dropdown-enter`. Wrap in `<Transition name="dropdown">`, remove `animate-dropdown-enter`.
+
+**Step 4: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 5: Commit**
+
+```bash
+git add src/components/AppSelect.vue src/components/AppDatePicker.vue src/components/AppTagInput.vue
+git commit -m "feat: add dropdown enter/leave transitions"
+```
+
+---
+
+### Task 9: Button and card feedback
+
+**Files:**
+- Modify: `src/views/Timer.vue` (Start/Stop button)
+- Modify: `src/views/Projects.vue` (project cards already handled in Task 5 with `card-hover`)
+- Modify: `src/views/Dashboard.vue` (empty state icon)
+- Modify: `src/views/Entries.vue` (empty state icon)
+- Modify: `src/views/Projects.vue` (empty state icon)
+- Modify: `src/views/Clients.vue` (empty state icon)
+
+**Step 1: Timer Start/Stop button — add `btn-primary` class**
+
+In `src/views/Timer.vue`, find the Start/Stop button (line 33-39). Add `btn-primary` to its class list:
+
+```html
+<button
+  @click="toggleTimer"
+  class="btn-primary px-10 py-3 text-sm font-medium rounded-lg transition-colors duration-150"
+  :class="buttonClass"
+>
+```
+
+**Step 2: Empty state icons — add `animate-float` class**
+
+In each view with an empty state, add `animate-float` to the empty state icon:
+
+- `Dashboard.vue` line 6: `<Clock class="w-12 h-12 text-text-tertiary animate-float" ...`
+- `Entries.vue` line 146: `<ListIcon class="w-12 h-12 text-text-tertiary animate-float" ...`
+- `Projects.vue` line 70: `<FolderKanban class="w-12 h-12 text-text-tertiary animate-float" ...`
+- `Clients.vue` line 56: `<Users class="w-12 h-12 text-text-tertiary animate-float" ...`
+
+**Step 3: Dashboard progress bars — add `progress-bar` class**
+
+In `src/views/Dashboard.vue`, find the goal progress bars (around lines 52 and 63). Add `progress-bar` to each inner bar div that has `:style="{ width: ... }"`:
+
+```html
+<div
+  class="h-1.5 rounded-full bg-accent progress-bar"
+  :style="{ width: Math.min(dailyPct, 100) + '%' }"
+/>
+```
+
+Same for the weekly progress bar.
+
+**Step 4: Projects budget progress bars**
+
+In `src/views/Projects.vue`, find the budget progress bar (around line 57). Add `progress-bar`:
+
+```html
+<div
+  class="h-1 rounded-full progress-bar"
+  :class="..."
+  :style="{ width: ... }"
+/>
+```
+
+**Step 5: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 6: Commit**
+
+```bash
+git add src/views/Timer.vue src/views/Dashboard.vue src/views/Entries.vue src/views/Projects.vue src/views/Clients.vue
+git commit -m "feat: add button feedback, floating empty states, and progress bar animations"
+```
+
+---
+
+### Task 10: Timer-specific animations
+
+**Files:**
+- Modify: `src/views/Timer.vue`
+- Modify: `src/styles/main.css`
+
+**Step 1: Add timer pulse keyframe to main.css**
+
+```css
+/* Timer start pulse */
+@keyframes timer-pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.03); }
+  100% { transform: scale(1); }
+}
+
+.animate-timer-pulse {
+  animation: timer-pulse 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Timer stop glow */
+@keyframes timer-glow {
+  0% { text-shadow: 0 0 0 transparent; }
+  30% { text-shadow: 0 0 12px var(--color-accent-muted); }
+  100% { text-shadow: 0 0 0 transparent; }
+}
+
+.animate-timer-glow {
+  animation: timer-glow 600ms ease-out;
+}
+```
+
+**Step 2: Add reactive pulse class to timer display**
+
+In `src/views/Timer.vue`, add a ref for the pulse class and toggle it on timer state changes.
+
+In `<script setup>`:
+
+```ts
+const timerPulseClass = ref('')
+
+// Watch for timer state changes to trigger pulse
+watch(() => timerStore.isRunning, (isRunning, wasRunning) => {
+  if (isRunning && !wasRunning) {
+    // Timer started
+    timerPulseClass.value = 'animate-timer-pulse'
+    setTimeout(() => { timerPulseClass.value = '' }, 300)
+  }
+})
+
+watch(() => timerStore.isStopped, (isStopped, wasStopped) => {
+  if (isStopped && !wasStopped) {
+    // Timer stopped
+    timerPulseClass.value = 'animate-timer-glow'
+    setTimeout(() => { timerPulseClass.value = '' }, 600)
+  }
+})
+```
+
+In the template, add `:class="timerPulseClass"` to the timer display `<p>` element (line 6):
+
+```html
+<p
+  class="text-[3.5rem] font-medium font-[family-name:var(--font-heading)] tracking-tighter mb-2"
+  :class="timerPulseClass"
+>
+```
+
+**Step 3: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 4: Commit**
+
+```bash
+git add src/views/Timer.vue src/styles/main.css
+git commit -m "feat: add timer start pulse and stop glow animations"
+```
+
+---
+
+### Task 11: Content fade-in on data load views
+
+**Files:**
+- Modify: `src/views/Dashboard.vue`
+- Modify: `src/views/Reports.vue`
+- Modify: `src/views/CalendarView.vue`
+- Modify: `src/views/TimesheetView.vue`
+
+Add a `<Transition name="fade">` around the main content areas that load data asynchronously, so content fades in smoothly when data arrives.
+
+**Step 1: Dashboard.vue — fade main content**
+
+Wrap the `<template v-else>` block (line 14-133) content in a `<Transition>`:
+
+```html
+<Transition name="fade" appear>
+  <template v-if="!isEmpty">
+    <!-- ... existing content ... -->
+  </template>
+</Transition>
+```
+
+Since `<Transition>` needs a single root child, replace `<template v-else>` with a wrapper `<div v-else>` inside the Transition:
+
+```html
+<Transition name="fade" appear>
+  <div v-if="!isEmpty">
+    <!-- all existing content from the template v-else block -->
+  </div>
+</Transition>
+```
+
+**Step 2: CalendarView.vue — wrap calendar body in fade**
+
+Add `<Transition name="fade" mode="out-in">` around the calendar body with `:key="weekStart"` so it transitions when the week changes.
+
+**Step 3: TimesheetView.vue — wrap table body in fade**
+
+Add `<Transition name="fade" mode="out-in">` around the main table content with a key that changes on week navigation.
+
+**Step 4: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 5: Commit**
+
+```bash
+git add src/views/Dashboard.vue src/views/Reports.vue src/views/CalendarView.vue src/views/TimesheetView.vue
+git commit -m "feat: add content fade-in transitions on data load"
+```
+
+---
+
+### Task 12: Tag chip animations in AppTagInput
+
+**Files:**
+- Modify: `src/components/AppTagInput.vue`
+
+**Step 1: Wrap selected tag chips in TransitionGroup**
+
+In the template, find where selected tags are rendered (the chips display area). Wrap the selected tag chips in `<TransitionGroup name="chip">`:
+
+```html
+<TransitionGroup name="chip" tag="div" class="flex flex-wrap gap-1.5">
+  <span
+    v-for="tag in selectedTags"
+    :key="tag.id"
+    class="..."
+  >
+    <!-- existing chip content -->
+  </span>
+</TransitionGroup>
+```
+
+**Step 2: Verify build**
+
+Run: `npm run build`
+Expected: Build passes.
+
+**Step 3: Commit**
+
+```bash
+git add src/components/AppTagInput.vue
+git commit -m "feat: add tag chip enter/leave animations"
+```
+
+---
+
+### Task 13: Final verification and cleanup
+
+**Step 1: Full build**
+
+Run: `npm run build`
+Expected: Build passes with no errors.
+
+**Step 2: Clean up unused CSS keyframes**
+
+Check if `animate-modal-enter` and `animate-dropdown-enter` classes are still used anywhere. If not, remove them from `main.css` (they were replaced by Vue Transition classes in Tasks 7 and 8).
+
+Run:
+```bash
+grep -r "animate-modal-enter\|animate-dropdown-enter" src/
+```
+
+If no results, remove the `@keyframes modal-enter`, `.animate-modal-enter`, `@keyframes dropdown-enter`, `.animate-dropdown-enter` blocks from `main.css`.
+
+**Step 3: Final build**
+
+Run: `npm run build`
+Expected: Build passes with no errors.
+
+**Step 4: Commit**
+
+```bash
+git add -A
+git commit -m "chore: remove unused animation keyframes"
+```
diff --git a/src/App.vue b/src/App.vue
index 84ed548..74cae74 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -79,7 +79,11 @@ watch(() => [settingsStore.settings.shortcut_toggle_timer, settingsStore.setting
     <div class="flex-1 flex overflow-hidden">
       <NavRail />
       <main class="flex-1 overflow-auto">
-        <router-view />
+        <router-view v-slot="{ Component }">
+          <Transition name="page" mode="out-in">
+            <component :is="Component" :key="$route.path" />
+          </Transition>
+        </router-view>
       </main>
     </div>
   </div>
diff --git a/src/components/AppColorPicker.vue b/src/components/AppColorPicker.vue
new file mode 100644
index 0000000..3c8ef5a
--- /dev/null
+++ b/src/components/AppColorPicker.vue
@@ -0,0 +1,423 @@
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeUnmount, nextTick } from 'vue'
+import { Pipette } from 'lucide-vue-next'
+import { computeDropdownPosition } from '../utils/dropdown'
+
+interface Props {
+  modelValue: string
+  presets?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  presets: () => ['#D97706', '#3B82F6', '#8B5CF6', '#EC4899', '#10B981', '#EF4444', '#06B6D4', '#6B7280'],
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const isOpen = ref(false)
+const triggerRef = ref<HTMLButtonElement | null>(null)
+const panelRef = ref<HTMLDivElement | null>(null)
+const panelStyle = ref<Record<string, string>>({})
+const hexInput = ref('')
+
+// HSV state for the gradient picker
+const hue = ref(0)
+const saturation = ref(100)
+const brightness = ref(100)
+
+// Canvas refs
+const gradientRef = ref<HTMLCanvasElement | null>(null)
+const hueRef = ref<HTMLCanvasElement | null>(null)
+
+// Dragging state
+const draggingGradient = ref(false)
+const draggingHue = ref(false)
+
+// ── Color Conversion ────────────────────────────────────────────────
+
+function hsvToRgb(h: number, s: number, v: number): [number, number, number] {
+  s /= 100
+  v /= 100
+  const c = v * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = v - c
+  let r = 0, g = 0, b = 0
+  if (h < 60) { r = c; g = x; b = 0 }
+  else if (h < 120) { r = x; g = c; b = 0 }
+  else if (h < 180) { r = 0; g = c; b = x }
+  else if (h < 240) { r = 0; g = x; b = c }
+  else if (h < 300) { r = x; g = 0; b = c }
+  else { r = c; g = 0; b = x }
+  return [
+    Math.round((r + m) * 255),
+    Math.round((g + m) * 255),
+    Math.round((b + m) * 255),
+  ]
+}
+
+function rgbToHsv(r: number, g: number, b: number): [number, number, number] {
+  r /= 255; g /= 255; b /= 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const d = max - min
+  let h = 0
+  if (d !== 0) {
+    if (max === r) h = 60 * (((g - b) / d) % 6)
+    else if (max === g) h = 60 * ((b - r) / d + 2)
+    else h = 60 * ((r - g) / d + 4)
+  }
+  if (h < 0) h += 360
+  const s = max === 0 ? 0 : (d / max) * 100
+  const v = max * 100
+  return [h, s, v]
+}
+
+function hexToRgb(hex: string): [number, number, number] | null {
+  const match = hex.match(/^#?([0-9a-f]{6})$/i)
+  if (!match) return null
+  const n = parseInt(match[1], 16)
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('').toUpperCase()
+}
+
+// ── Current color ────────────────────────────────────────────────────
+
+const currentHex = computed(() => {
+  const [r, g, b] = hsvToRgb(hue.value, saturation.value, brightness.value)
+  return rgbToHex(r, g, b)
+})
+
+// ── Sync from prop ─────────────────────────────────────────────────
+
+function syncFromHex(hex: string) {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return
+  const [h, s, v] = rgbToHsv(...rgb)
+  hue.value = h
+  saturation.value = s
+  brightness.value = v
+  hexInput.value = hex.toUpperCase()
+}
+
+// Initialize from prop
+syncFromHex(props.modelValue || '#D97706')
+
+watch(() => props.modelValue, (val) => {
+  if (val && val.toUpperCase() !== currentHex.value) {
+    syncFromHex(val)
+  }
+})
+
+// ── Emit ────────────────────────────────────────────────────────────
+
+function emitColor() {
+  hexInput.value = currentHex.value
+  emit('update:modelValue', currentHex.value)
+}
+
+// ── Hex Input ─────────────────────────────────────────────────────
+
+function onHexInput(e: Event) {
+  const val = (e.target as HTMLInputElement).value
+  hexInput.value = val
+  if (/^#[0-9a-fA-F]{6}$/.test(val)) {
+    syncFromHex(val)
+    emit('update:modelValue', val.toUpperCase())
+  }
+}
+
+// ── Preset Click ──────────────────────────────────────────────────
+
+function selectPreset(color: string) {
+  syncFromHex(color)
+  emitColor()
+}
+
+// ── Gradient Canvas (Saturation/Brightness) ────────────────────────
+
+function drawGradient() {
+  const canvas = gradientRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  const w = canvas.width
+  const h = canvas.height
+
+  // Base hue color
+  const [r, g, b] = hsvToRgb(hue.value, 100, 100)
+
+  // White to hue (horizontal)
+  const gradH = ctx.createLinearGradient(0, 0, w, 0)
+  gradH.addColorStop(0, '#FFFFFF')
+  gradH.addColorStop(1, `rgb(${r},${g},${b})`)
+  ctx.fillStyle = gradH
+  ctx.fillRect(0, 0, w, h)
+
+  // Black overlay (vertical)
+  const gradV = ctx.createLinearGradient(0, 0, 0, h)
+  gradV.addColorStop(0, 'rgba(0,0,0,0)')
+  gradV.addColorStop(1, 'rgba(0,0,0,1)')
+  ctx.fillStyle = gradV
+  ctx.fillRect(0, 0, w, h)
+}
+
+function drawHueStrip() {
+  const canvas = hueRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  const w = canvas.width
+  const h = canvas.height
+  const grad = ctx.createLinearGradient(0, 0, w, 0)
+  for (let i = 0; i <= 360; i += 60) {
+    const [r, g, b] = hsvToRgb(i, 100, 100)
+    grad.addColorStop(i / 360, `rgb(${r},${g},${b})`)
+  }
+  ctx.fillStyle = grad
+  ctx.fillRect(0, 0, w, h)
+}
+
+// ── Gradient Pointer ────────────────────────────────────────────────
+
+const gradientCursorX = computed(() => (saturation.value / 100) * 100)
+const gradientCursorY = computed(() => ((100 - brightness.value) / 100) * 100)
+const hueCursorX = computed(() => (hue.value / 360) * 100)
+
+function handleGradientInteraction(e: MouseEvent | PointerEvent) {
+  const canvas = gradientRef.value
+  if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+  const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))
+  saturation.value = x * 100
+  brightness.value = (1 - y) * 100
+  emitColor()
+}
+
+function handleHueInteraction(e: MouseEvent | PointerEvent) {
+  const canvas = hueRef.value
+  if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+  hue.value = x * 360
+  nextTick(() => drawGradient())
+  emitColor()
+}
+
+function onGradientPointerDown(e: PointerEvent) {
+  draggingGradient.value = true
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  handleGradientInteraction(e)
+}
+
+function onGradientPointerMove(e: PointerEvent) {
+  if (!draggingGradient.value) return
+  handleGradientInteraction(e)
+}
+
+function onGradientPointerUp() {
+  draggingGradient.value = false
+}
+
+function onHuePointerDown(e: PointerEvent) {
+  draggingHue.value = true
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  handleHueInteraction(e)
+}
+
+function onHuePointerMove(e: PointerEvent) {
+  if (!draggingHue.value) return
+  handleHueInteraction(e)
+}
+
+function onHuePointerUp() {
+  draggingHue.value = false
+}
+
+// ── Positioning ─────────────────────────────────────────────────────
+
+function updatePosition() {
+  if (!triggerRef.value) return
+  panelStyle.value = computeDropdownPosition(triggerRef.value, { minWidth: 260, estimatedHeight: 330 })
+}
+
+// ── Open / Close ────────────────────────────────────────────────────
+
+function toggle() {
+  if (isOpen.value) close()
+  else open()
+}
+
+function open() {
+  syncFromHex(props.modelValue || '#D97706')
+  isOpen.value = true
+  updatePosition()
+
+  nextTick(() => {
+    drawGradient()
+    drawHueStrip()
+    document.addEventListener('click', onClickOutside, true)
+    document.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('resize', onScrollOrResize)
+  })
+}
+
+function close() {
+  isOpen.value = false
+  document.removeEventListener('click', onClickOutside, true)
+  document.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+}
+
+function onClickOutside(e: MouseEvent) {
+  const target = e.target as Node
+  if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) return
+  close()
+}
+
+function onScrollOrResize() {
+  if (isOpen.value) updatePosition()
+}
+
+// Redraw gradient when hue changes
+watch(hue, () => {
+  if (isOpen.value) nextTick(() => drawGradient())
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onClickOutside, true)
+  document.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+})
+</script>
+
+<template>
+  <div class="relative">
+    <!-- Trigger button -->
+    <button
+      ref="triggerRef"
+      type="button"
+      @click="toggle"
+      class="w-full flex items-center gap-2.5 px-3 py-2 bg-bg-inset border border-border-subtle rounded-xl text-[0.8125rem] text-left cursor-pointer transition-colors"
+      :style="
+        isOpen
+          ? {
+              borderColor: 'var(--color-accent)',
+              boxShadow: '0 0 0 2px var(--color-accent-muted)',
+              outline: 'none',
+            }
+          : {}
+      "
+    >
+      <span
+        class="w-5 h-5 rounded-md border border-border-subtle shrink-0"
+        :style="{ backgroundColor: modelValue }"
+      />
+      <span class="text-text-primary font-mono text-[0.75rem] tracking-wide">{{ modelValue?.toUpperCase() || '#000000' }}</span>
+      <Pipette class="w-4 h-4 text-text-secondary shrink-0 ml-auto" :stroke-width="2" />
+    </button>
+
+    <!-- Color picker popover -->
+    <Teleport to="body">
+      <Transition name="dropdown">
+      <div
+        v-if="isOpen"
+        ref="panelRef"
+        :style="panelStyle"
+        class="bg-bg-surface border border-border-visible rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.4)] overflow-hidden"
+      >
+        <!-- Preset swatches -->
+        <div class="px-3 pt-3 pb-2">
+          <div class="flex gap-2 flex-wrap">
+            <button
+              v-for="c in presets"
+              :key="c"
+              type="button"
+              @click="selectPreset(c)"
+              class="w-6 h-6 rounded-full border-2 transition-colors cursor-pointer hover:scale-110"
+              :class="currentHex === c.toUpperCase() ? 'border-text-primary' : 'border-transparent'"
+              :style="{ backgroundColor: c }"
+            />
+          </div>
+        </div>
+
+        <!-- Saturation/Brightness gradient -->
+        <div class="px-3 pb-2">
+          <div
+            class="relative rounded-lg overflow-hidden cursor-crosshair"
+            style="touch-action: none;"
+            @pointerdown="onGradientPointerDown"
+            @pointermove="onGradientPointerMove"
+            @pointerup="onGradientPointerUp"
+          >
+            <canvas
+              ref="gradientRef"
+              width="260"
+              height="150"
+              class="w-full h-[150px] block rounded-lg"
+            />
+            <!-- Cursor -->
+            <div
+              class="absolute w-4 h-4 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)] pointer-events-none -translate-x-1/2 -translate-y-1/2"
+              :style="{
+                left: gradientCursorX + '%',
+                top: gradientCursorY + '%',
+                backgroundColor: currentHex,
+              }"
+            />
+          </div>
+        </div>
+
+        <!-- Hue slider -->
+        <div class="px-3 pb-2">
+          <div
+            class="relative rounded-md overflow-hidden cursor-pointer"
+            style="touch-action: none;"
+            @pointerdown="onHuePointerDown"
+            @pointermove="onHuePointerMove"
+            @pointerup="onHuePointerUp"
+          >
+            <canvas
+              ref="hueRef"
+              width="260"
+              height="14"
+              class="w-full h-3.5 block rounded-md"
+            />
+            <!-- Hue cursor -->
+            <div
+              class="absolute top-1/2 w-3.5 h-3.5 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)] pointer-events-none -translate-x-1/2 -translate-y-1/2"
+              :style="{
+                left: hueCursorX + '%',
+                backgroundColor: rgbToHex(...hsvToRgb(hue, 100, 100)),
+              }"
+            />
+          </div>
+        </div>
+
+        <!-- Hex input + preview -->
+        <div class="px-3 pb-3 flex items-center gap-2">
+          <span
+            class="w-8 h-8 rounded-lg border border-border-subtle shrink-0"
+            :style="{ backgroundColor: currentHex }"
+          />
+          <input
+            :value="hexInput"
+            @input="onHexInput"
+            type="text"
+            maxlength="7"
+            class="flex-1 px-2.5 py-1.5 bg-bg-inset border border-border-subtle rounded-lg text-[0.75rem] text-text-primary font-mono tracking-wide placeholder-text-tertiary focus:outline-none focus:border-border-visible"
+            placeholder="#D97706"
+          />
+        </div>
+      </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/src/components/AppDatePicker.vue b/src/components/AppDatePicker.vue
index 53dad42..68629c4 100644
--- a/src/components/AppDatePicker.vue
+++ b/src/components/AppDatePicker.vue
@@ -51,28 +51,105 @@ const displayText = computed(() => {
   return datePart
 })
 
-// ── Time helpers ──────────────────────────────────────────────────────
+// ── Time wheel ──────────────────────────────────────────────────────
+const WHEEL_ITEM_H = 36
+const WHEEL_VISIBLE = 5
+const WHEEL_HEIGHT = WHEEL_ITEM_H * WHEEL_VISIBLE // 180px
+const WHEEL_PAD = WHEEL_ITEM_H * 2 // 72px spacer (2 items above/below center)
+
 const internalHour = ref(props.hour)
 const internalMinute = ref(props.minute)
+const hourWheelRef = ref<HTMLDivElement | null>(null)
+const minuteWheelRef = ref<HTMLDivElement | null>(null)
 
 watch(() => props.hour, (v) => { internalHour.value = v })
 watch(() => props.minute, (v) => { internalMinute.value = v })
 
-function onHourInput(e: Event) {
-  const val = parseInt((e.target as HTMLInputElement).value)
-  if (!isNaN(val)) {
-    const clamped = Math.min(23, Math.max(0, val))
-    internalHour.value = clamped
-    emit('update:hour', clamped)
-  }
+// Debounced scroll handler to read the current value
+let hourScrollTimer: ReturnType<typeof setTimeout> | null = null
+let minuteScrollTimer: ReturnType<typeof setTimeout> | null = null
+
+function onHourScroll() {
+  if (hourScrollTimer) clearTimeout(hourScrollTimer)
+  hourScrollTimer = setTimeout(() => {
+    if (!hourWheelRef.value) return
+    const index = Math.round(hourWheelRef.value.scrollTop / WHEEL_ITEM_H)
+    const clamped = Math.min(23, Math.max(0, index))
+    if (internalHour.value !== clamped) {
+      internalHour.value = clamped
+      emit('update:hour', clamped)
+    }
+  }, 60)
 }
 
-function onMinuteInput(e: Event) {
-  const val = parseInt((e.target as HTMLInputElement).value)
-  if (!isNaN(val)) {
-    const clamped = Math.min(59, Math.max(0, val))
-    internalMinute.value = clamped
-    emit('update:minute', clamped)
+function onMinuteScroll() {
+  if (minuteScrollTimer) clearTimeout(minuteScrollTimer)
+  minuteScrollTimer = setTimeout(() => {
+    if (!minuteWheelRef.value) return
+    const index = Math.round(minuteWheelRef.value.scrollTop / WHEEL_ITEM_H)
+    const clamped = Math.min(59, Math.max(0, index))
+    if (internalMinute.value !== clamped) {
+      internalMinute.value = clamped
+      emit('update:minute', clamped)
+    }
+  }, 60)
+}
+
+// Mouse wheel: one item per tick
+function onHourWheel(e: WheelEvent) {
+  e.preventDefault()
+  if (!hourWheelRef.value) return
+  const dir = e.deltaY > 0 ? 1 : -1
+  const cur = Math.round(hourWheelRef.value.scrollTop / WHEEL_ITEM_H)
+  const next = Math.min(23, Math.max(0, cur + dir))
+  hourWheelRef.value.scrollTo({ top: next * WHEEL_ITEM_H, behavior: 'smooth' })
+}
+
+function onMinuteWheel(e: WheelEvent) {
+  e.preventDefault()
+  if (!minuteWheelRef.value) return
+  const dir = e.deltaY > 0 ? 1 : -1
+  const cur = Math.round(minuteWheelRef.value.scrollTop / WHEEL_ITEM_H)
+  const next = Math.min(59, Math.max(0, cur + dir))
+  minuteWheelRef.value.scrollTo({ top: next * WHEEL_ITEM_H, behavior: 'smooth' })
+}
+
+// Click-and-drag support
+let dragEl: HTMLElement | null = null
+let dragStartY = 0
+let dragStartScrollTop = 0
+
+function onWheelPointerDown(e: PointerEvent) {
+  const el = e.currentTarget as HTMLElement
+  dragEl = el
+  dragStartY = e.clientY
+  dragStartScrollTop = el.scrollTop
+  el.setPointerCapture(e.pointerId)
+}
+
+function onWheelPointerMove(e: PointerEvent) {
+  if (!dragEl) return
+  e.preventDefault()
+  const delta = dragStartY - e.clientY
+  dragEl.scrollTop = dragStartScrollTop + delta
+}
+
+function onWheelPointerUp(e: PointerEvent) {
+  if (!dragEl) return
+  const el = dragEl
+  dragEl = null
+  el.releasePointerCapture(e.pointerId)
+  // Snap to nearest item
+  const index = Math.round(el.scrollTop / WHEEL_ITEM_H)
+  el.scrollTo({ top: index * WHEEL_ITEM_H, behavior: 'smooth' })
+}
+
+function scrollWheelsToTime() {
+  if (hourWheelRef.value) {
+    hourWheelRef.value.scrollTop = internalHour.value * WHEEL_ITEM_H
+  }
+  if (minuteWheelRef.value) {
+    minuteWheelRef.value.scrollTop = internalMinute.value * WHEEL_ITEM_H
   }
 }
 
@@ -106,9 +183,7 @@ const dayCells = computed<DayCell[]>(() => {
   const y = viewYear.value
   const m = viewMonth.value
 
-  // First day of the month (0=Sun, 1=Mon, ...)
   const firstDayOfWeek = new Date(y, m, 1).getDay()
-  // Shift so Monday=0
   const startOffset = (firstDayOfWeek + 6) % 7
 
   const daysInMonth = new Date(y, m + 1, 0).getDate()
@@ -116,7 +191,6 @@ const dayCells = computed<DayCell[]>(() => {
 
   const cells: DayCell[] = []
 
-  // Previous month padding
   const prevMonth = m === 0 ? 11 : m - 1
   const prevYear = m === 0 ? y - 1 : y
   for (let i = startOffset - 1; i >= 0; i--) {
@@ -130,7 +204,6 @@ const dayCells = computed<DayCell[]>(() => {
     })
   }
 
-  // Current month days
   for (let d = 1; d <= daysInMonth; d++) {
     cells.push({
       date: d,
@@ -141,7 +214,6 @@ const dayCells = computed<DayCell[]>(() => {
     })
   }
 
-  // Next month padding (fill up to 42 cells = 6 rows)
   const nextMonth = m === 11 ? 0 : m + 1
   const nextYear = m === 11 ? y + 1 : y
   let nextDay = 1
@@ -173,10 +245,9 @@ function updatePosition() {
   if (!triggerRef.value) return
   const rect = triggerRef.value.getBoundingClientRect()
   const zoom = getZoomFactor()
-  const panelWidth = 280
+  const panelWidth = props.showTime ? 390 : 280
   const renderedWidth = panelWidth * zoom
 
-  // Compute left in viewport space, then convert to panel's zoomed coordinate space
   let leftViewport = rect.left
   if (leftViewport + renderedWidth > window.innerWidth) {
     leftViewport = window.innerWidth - renderedWidth - 8
@@ -203,7 +274,6 @@ function toggle() {
 }
 
 function open() {
-  // Sync view to modelValue or today
   if (props.modelValue) {
     const [y, m] = props.modelValue.split('-').map(Number)
     viewYear.value = y
@@ -221,6 +291,10 @@ function open() {
     document.addEventListener('click', onClickOutside, true)
     document.addEventListener('scroll', onScrollOrResize, true)
     window.addEventListener('resize', onScrollOrResize)
+
+    if (props.showTime) {
+      scrollWheelsToTime()
+    }
   })
 }
 
@@ -254,12 +328,16 @@ function nextMonthNav() {
 function selectDay(cell: DayCell) {
   if (!cell.isCurrentMonth) return
   emit('update:modelValue', cell.dateString)
-  close()
+  if (!props.showTime) {
+    close()
+  }
 }
 
 function selectToday() {
   emit('update:modelValue', todayString())
-  close()
+  if (!props.showTime) {
+    close()
+  }
 }
 
 // ── Event handlers ──────────────────────────────────────────────────
@@ -332,11 +410,12 @@ onBeforeUnmount(() => {
 
     <!-- Calendar popover -->
     <Teleport to="body">
+      <Transition name="dropdown">
       <div
         v-if="isOpen"
         ref="panelRef"
         :style="panelStyle"
-        class="bg-bg-surface border border-border-visible rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.4)] overflow-hidden animate-dropdown-enter"
+        class="bg-bg-surface border border-border-visible rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.4)] overflow-hidden"
       >
         <!-- Month/year header -->
         <div class="flex items-center justify-between px-3 py-2.5">
@@ -359,60 +438,121 @@ onBeforeUnmount(() => {
           </button>
         </div>
 
-        <!-- Day-of-week headers -->
-        <div class="grid grid-cols-7 px-2">
-          <div
-            v-for="header in dayHeaders"
-            :key="header"
-            class="text-center text-[0.6875rem] font-medium text-text-tertiary py-1 select-none"
-          >
-            {{ header }}
+        <!-- Calendar + Time wheels side by side -->
+        <div class="flex">
+          <!-- Calendar column -->
+          <div class="flex-1 min-w-0">
+            <!-- Day-of-week headers -->
+            <div class="grid grid-cols-7 px-2">
+              <div
+                v-for="header in dayHeaders"
+                :key="header"
+                class="text-center text-[0.6875rem] font-medium text-text-tertiary py-1 select-none"
+              >
+                {{ header }}
+              </div>
+            </div>
+
+            <!-- Day grid -->
+            <div class="grid grid-cols-7 px-2 pb-2">
+              <button
+                v-for="(cell, index) in dayCells"
+                :key="index"
+                type="button"
+                :disabled="!cell.isCurrentMonth"
+                @click="selectDay(cell)"
+                class="relative flex items-center justify-center h-8 w-full text-[0.75rem] rounded-lg transition-colors select-none"
+                :class="[
+                  !cell.isCurrentMonth
+                    ? 'text-text-tertiary/40 cursor-default'
+                    : cell.dateString === modelValue
+                      ? 'bg-accent text-bg-base font-medium cursor-pointer'
+                      : cell.dateString === todayString()
+                        ? 'ring-1 ring-accent text-accent-text cursor-pointer hover:bg-bg-elevated'
+                        : 'text-text-primary cursor-pointer hover:bg-bg-elevated',
+                ]"
+              >
+                {{ cell.date }}
+              </button>
+            </div>
           </div>
-        </div>
 
-        <!-- Day grid -->
-        <div class="grid grid-cols-7 px-2 pb-2">
-          <button
-            v-for="(cell, index) in dayCells"
-            :key="index"
-            type="button"
-            :disabled="!cell.isCurrentMonth"
-            @click="selectDay(cell)"
-            class="relative flex items-center justify-center h-8 w-full text-[0.75rem] rounded-lg transition-colors select-none"
-            :class="[
-              !cell.isCurrentMonth
-                ? 'text-text-tertiary/40 cursor-default'
-                : cell.dateString === modelValue
-                  ? 'bg-accent text-bg-base font-medium cursor-pointer'
-                  : cell.dateString === todayString()
-                    ? 'ring-1 ring-accent text-accent-text cursor-pointer hover:bg-bg-elevated'
-                    : 'text-text-primary cursor-pointer hover:bg-bg-elevated',
-            ]"
-          >
-            {{ cell.date }}
-          </button>
-        </div>
+          <!-- Time wheels column (to the right of calendar) -->
+          <div v-if="showTime" class="border-l border-border-subtle flex flex-col items-center justify-center px-3">
+            <div class="flex items-center gap-1.5">
+              <!-- Hour wheel -->
+              <div
+                class="relative overflow-hidden rounded-lg"
+                :style="{ height: WHEEL_HEIGHT + 'px', width: '42px' }"
+              >
+                <!-- Highlight band (behind scroll content via DOM order) -->
+                <div
+                  class="absolute inset-x-0 rounded-lg pointer-events-none bg-bg-elevated border border-border-subtle"
+                  :style="{ top: WHEEL_PAD + 'px', height: WHEEL_ITEM_H + 'px' }"
+                />
+                <!-- Scrollable wheel -->
+                <div
+                  ref="hourWheelRef"
+                  class="absolute inset-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden cursor-grab active:cursor-grabbing"
+                  style="touch-action: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);"
+                  @scroll="onHourScroll"
+                  @wheel.prevent="onHourWheel"
+                  @pointerdown.prevent="onWheelPointerDown"
+                  @pointermove="onWheelPointerMove"
+                  @pointerup="onWheelPointerUp"
+                >
+                  <div :style="{ height: WHEEL_PAD + 'px' }" class="shrink-0" />
+                  <div
+                    v-for="h in 24"
+                    :key="h"
+                    class="shrink-0 flex items-center justify-center text-[0.875rem] font-mono select-none"
+                    :style="{ height: WHEEL_ITEM_H + 'px' }"
+                    :class="internalHour === h - 1 ? 'text-text-primary font-semibold' : 'text-text-tertiary'"
+                  >
+                    {{ String(h - 1).padStart(2, '0') }}
+                  </div>
+                  <div :style="{ height: WHEEL_PAD + 'px' }" class="shrink-0" />
+                </div>
+              </div>
 
-        <!-- Time inputs (when showTime is true) -->
-        <div v-if="showTime" class="border-t border-border-subtle px-3 py-2.5 flex items-center justify-center gap-2">
-          <span class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em]">Time</span>
-          <input
-            :value="String(internalHour).padStart(2, '0')"
-            type="number"
-            min="0"
-            max="23"
-            @input="onHourInput"
-            class="w-11 px-1.5 py-1 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-center font-mono focus:outline-none focus:border-border-visible [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-          />
-          <span class="text-text-tertiary text-sm font-mono">:</span>
-          <input
-            :value="String(internalMinute).padStart(2, '0')"
-            type="number"
-            min="0"
-            max="59"
-            @input="onMinuteInput"
-            class="w-11 px-1.5 py-1 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-center font-mono focus:outline-none focus:border-border-visible [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-          />
+              <span class="text-text-secondary text-sm font-mono font-semibold select-none">:</span>
+
+              <!-- Minute wheel -->
+              <div
+                class="relative overflow-hidden rounded-lg"
+                :style="{ height: WHEEL_HEIGHT + 'px', width: '42px' }"
+              >
+                <!-- Highlight band -->
+                <div
+                  class="absolute inset-x-0 rounded-lg pointer-events-none bg-bg-elevated border border-border-subtle"
+                  :style="{ top: WHEEL_PAD + 'px', height: WHEEL_ITEM_H + 'px' }"
+                />
+                <!-- Scrollable wheel -->
+                <div
+                  ref="minuteWheelRef"
+                  class="absolute inset-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden cursor-grab active:cursor-grabbing"
+                  style="touch-action: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);"
+                  @scroll="onMinuteScroll"
+                  @wheel.prevent="onMinuteWheel"
+                  @pointerdown.prevent="onWheelPointerDown"
+                  @pointermove="onWheelPointerMove"
+                  @pointerup="onWheelPointerUp"
+                >
+                  <div :style="{ height: WHEEL_PAD + 'px' }" class="shrink-0" />
+                  <div
+                    v-for="m in 60"
+                    :key="m"
+                    class="shrink-0 flex items-center justify-center text-[0.875rem] font-mono select-none"
+                    :style="{ height: WHEEL_ITEM_H + 'px' }"
+                    :class="internalMinute === m - 1 ? 'text-text-primary font-semibold' : 'text-text-tertiary'"
+                  >
+                    {{ String(m - 1).padStart(2, '0') }}
+                  </div>
+                  <div :style="{ height: WHEEL_PAD + 'px' }" class="shrink-0" />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
 
         <!-- Today shortcut -->
@@ -426,6 +566,7 @@ onBeforeUnmount(() => {
           </button>
         </div>
       </div>
+      </Transition>
     </Teleport>
   </div>
 </template>
diff --git a/src/components/AppSelect.vue b/src/components/AppSelect.vue
index ed94b08..04f6034 100644
--- a/src/components/AppSelect.vue
+++ b/src/components/AppSelect.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { ChevronDown, Check } from 'lucide-vue-next'
+import { computeDropdownPosition } from '../utils/dropdown'
 
 interface Props {
   modelValue: any
@@ -77,25 +78,9 @@ function isSelected(item: any): boolean {
   return val === props.modelValue
 }
 
-function getZoomFactor(): number {
-  const app = document.getElementById('app')
-  if (!app) return 1
-  const zoom = (app.style as any).zoom
-  return zoom ? parseFloat(zoom) / 100 : 1
-}
-
 function updatePosition() {
   if (!triggerRef.value) return
-  const rect = triggerRef.value.getBoundingClientRect()
-  const zoom = getZoomFactor()
-  panelStyle.value = {
-    position: 'fixed',
-    top: `${(rect.bottom + 4) / zoom}px`,
-    left: `${rect.left / zoom}px`,
-    width: `${rect.width / zoom}px`,
-    zIndex: '9999',
-    zoom: `${zoom * 100}%`,
-  }
+  panelStyle.value = computeDropdownPosition(triggerRef.value, { estimatedHeight: 280 })
 }
 
 function toggle() {
@@ -268,11 +253,12 @@ onBeforeUnmount(() => {
 
     <!-- Dropdown panel -->
     <Teleport to="body">
+      <Transition name="dropdown">
       <div
         v-if="isOpen"
         ref="panelRef"
         :style="panelStyle"
-        class="bg-bg-surface border border-border-visible rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.4)] overflow-hidden animate-dropdown-enter"
+        class="bg-bg-surface border border-border-visible rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.4)] overflow-hidden"
       >
         <div v-if="searchable" class="px-2 pt-2 pb-1">
           <input
@@ -307,6 +293,7 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </div>
+      </Transition>
     </Teleport>
   </div>
 </template>
diff --git a/src/components/AppTagInput.vue b/src/components/AppTagInput.vue
index aadc419..3667f8c 100644
--- a/src/components/AppTagInput.vue
+++ b/src/components/AppTagInput.vue
@@ -109,7 +109,7 @@ onBeforeUnmount(() => {
 <template>
   <div ref="triggerRef" class="relative">
     <!-- Selected tags + add button -->
-    <div class="flex flex-wrap items-center gap-1.5">
+    <TransitionGroup tag="div" name="chip" class="flex flex-wrap items-center gap-1.5">
       <span
         v-for="tag in selectedTags"
         :key="tag.id"
@@ -123,6 +123,7 @@ onBeforeUnmount(() => {
         </button>
       </span>
       <button
+        key="__add_btn__"
         type="button"
         @click="isOpen ? close() : open()"
         class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[0.6875rem] text-text-tertiary border border-border-subtle hover:text-text-secondary hover:border-border-visible transition-colors"
@@ -130,15 +131,16 @@ onBeforeUnmount(() => {
         <Plus class="w-3 h-3" />
         Tag
       </button>
-    </div>
+    </TransitionGroup>
 
     <!-- Dropdown -->
     <Teleport to="body">
+      <Transition name="dropdown">
       <div
         v-if="isOpen"
         ref="panelRef"
         :style="panelStyle"
-        class="bg-bg-surface border border-border-visible rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.4)] overflow-hidden animate-dropdown-enter"
+        class="bg-bg-surface border border-border-visible rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.4)] overflow-hidden"
       >
         <div class="px-2 pt-2 pb-1">
           <input
@@ -172,6 +174,7 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </div>
+      </Transition>
     </Teleport>
   </div>
 </template>
diff --git a/src/components/NavRail.vue b/src/components/NavRail.vue
index 524a541..aea4d0c 100644
--- a/src/components/NavRail.vue
+++ b/src/components/NavRail.vue
@@ -34,6 +34,10 @@ const navItems = [
 
 const currentPath = computed(() => route.path)
 
+const activeIndex = computed(() => {
+  return navItems.findIndex(item => item.path === currentPath.value)
+})
+
 function navigate(path: string) {
   router.push(path)
 }
@@ -41,24 +45,25 @@ function navigate(path: string) {
 
 <template>
   <nav class="w-12 flex flex-col items-center bg-bg-surface border-r border-border-subtle shrink-0">
-    <!-- Navigation icons -->
-    <div class="flex-1 flex flex-col items-center pt-2 gap-1">
+    <div class="relative flex-1 flex flex-col items-center pt-2 gap-1">
+      <!-- Sliding active indicator -->
+      <div
+        v-if="activeIndex >= 0"
+        class="absolute left-0 w-[2px] bg-accent transition-all duration-300"
+        :style="{ top: `${activeIndex * 52 + 8 + 8}px`, height: '36px' }"
+        style="transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);"
+      />
+
       <button
         v-for="item in navItems"
         :key="item.path"
         @click="navigate(item.path)"
-        class="relative w-12 h-12 flex items-center justify-center transition-colors duration-150 group"
+        class="relative w-12 h-[52px] flex items-center justify-center transition-colors duration-150 group"
         :class="currentPath === item.path
           ? 'text-text-primary'
           : 'text-text-tertiary hover:text-text-secondary'"
         :title="item.name"
       >
-        <!-- Active indicator (left border) -->
-        <div
-          v-if="currentPath === item.path"
-          class="absolute left-0 top-2 bottom-2 w-[2px] bg-accent"
-        />
-
         <component :is="item.icon" class="w-[18px] h-[18px]" :stroke-width="1.5" />
 
         <!-- Tooltip -->
diff --git a/src/components/RunningAppsPicker.vue b/src/components/RunningAppsPicker.vue
new file mode 100644
index 0000000..5617f26
--- /dev/null
+++ b/src/components/RunningAppsPicker.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref, computed, onBeforeUnmount, nextTick } from 'vue'
+import { invoke } from '@tauri-apps/api/core'
+import { Monitor, RefreshCw } from 'lucide-vue-next'
+import { computeDropdownPosition } from '../utils/dropdown'
+
+interface WindowInfo {
+  exe_name: string
+  exe_path: string
+  title: string
+  display_name: string
+  icon: string | null
+}
+
+interface Props {
+  excludePaths?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  excludePaths: () => [],
+})
+
+const emit = defineEmits<{
+  select: [app: WindowInfo]
+}>()
+
+const isOpen = ref(false)
+const loading = ref(false)
+const processes = ref<WindowInfo[]>([])
+const searchQuery = ref('')
+const highlightedIndex = ref(-1)
+const triggerRef = ref<HTMLButtonElement | null>(null)
+const panelRef = ref<HTMLDivElement | null>(null)
+const panelStyle = ref<Record<string, string>>({})
+const searchInputRef = ref<HTMLInputElement | null>(null)
+
+const filteredProcesses = computed(() => {
+  let list = processes.value.filter(
+    p => !props.excludePaths.includes(p.exe_path.toLowerCase())
+  )
+  if (searchQuery.value) {
+    const q = searchQuery.value.toLowerCase()
+    list = list.filter(p =>
+      p.display_name.toLowerCase().includes(q) ||
+      p.exe_name.toLowerCase().includes(q)
+    )
+  }
+  return list
+})
+
+async function fetchProcesses() {
+  loading.value = true
+  try {
+    processes.value = await invoke<WindowInfo[]>('get_running_processes')
+  } catch (e) {
+    console.error('Failed to fetch running processes:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+function updatePosition() {
+  if (!triggerRef.value) return
+  panelStyle.value = computeDropdownPosition(triggerRef.value, { minWidth: 280, estimatedHeight: 290 })
+}
+
+function toggle() {
+  if (isOpen.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+async function open() {
+  isOpen.value = true
+  updatePosition()
+  highlightedIndex.value = 0
+  searchQuery.value = ''
+  await fetchProcesses()
+  nextTick(() => searchInputRef.value?.focus())
+  document.addEventListener('click', onClickOutside, true)
+  document.addEventListener('scroll', onScrollOrResize, true)
+  window.addEventListener('resize', onScrollOrResize)
+}
+
+function close() {
+  isOpen.value = false
+  highlightedIndex.value = -1
+  document.removeEventListener('click', onClickOutside, true)
+  document.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+}
+
+function selectApp(app: WindowInfo) {
+  emit('select', app)
+  close()
+}
+
+function onClickOutside(e: MouseEvent) {
+  const target = e.target as Node
+  if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) return
+  close()
+}
+
+function onScrollOrResize() {
+  if (isOpen.value) updatePosition()
+}
+
+function onSearchKeydown(e: KeyboardEvent) {
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault()
+      highlightedIndex.value = Math.min(highlightedIndex.value + 1, filteredProcesses.value.length - 1)
+      break
+    case 'ArrowUp':
+      e.preventDefault()
+      highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
+      break
+    case 'Enter':
+      e.preventDefault()
+      if (highlightedIndex.value >= 0 && filteredProcesses.value[highlightedIndex.value]) {
+        selectApp(filteredProcesses.value[highlightedIndex.value])
+      }
+      break
+    case 'Escape':
+      e.preventDefault()
+      close()
+      triggerRef.value?.focus()
+      break
+  }
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onClickOutside, true)
+  document.removeEventListener('scroll', onScrollOrResize, true)
+  window.removeEventListener('resize', onScrollOrResize)
+})
+</script>
+
+<template>
+  <div class="relative">
+    <button
+      ref="triggerRef"
+      type="button"
+      @click="toggle"
+      class="flex items-center gap-1.5 px-2.5 py-1.5 border border-border-subtle text-text-secondary text-[0.75rem] rounded-lg hover:bg-bg-elevated hover:text-text-primary transition-colors"
+    >
+      <Monitor class="w-3.5 h-3.5" :stroke-width="1.5" />
+      From Running Apps
+    </button>
+
+    <Teleport to="body">
+      <Transition name="dropdown">
+      <div
+        v-if="isOpen"
+        ref="panelRef"
+        :style="panelStyle"
+        class="bg-bg-surface border border-border-visible rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.4)] overflow-hidden"
+      >
+        <div class="px-2 pt-2 pb-1 flex items-center gap-1.5">
+          <input
+            ref="searchInputRef"
+            v-model="searchQuery"
+            type="text"
+            class="flex-1 px-2.5 py-1.5 bg-bg-inset border border-border-subtle rounded-lg text-[0.75rem] text-text-primary placeholder-text-tertiary focus:outline-none focus:border-border-visible"
+            placeholder="Search apps..."
+            @keydown="onSearchKeydown"
+          />
+          <button
+            type="button"
+            @click="fetchProcesses"
+            class="p-1.5 text-text-tertiary hover:text-text-secondary transition-colors"
+            title="Refresh"
+          >
+            <RefreshCw class="w-3.5 h-3.5" :class="{ 'animate-spin': loading }" :stroke-width="1.5" />
+          </button>
+        </div>
+
+        <div class="max-h-[240px] overflow-y-auto py-1">
+          <div v-if="loading && filteredProcesses.length === 0" class="px-3 py-4 text-center text-[0.75rem] text-text-tertiary">
+            Loading...
+          </div>
+          <div v-else-if="filteredProcesses.length === 0" class="px-3 py-4 text-center text-[0.75rem] text-text-tertiary">
+            No apps found
+          </div>
+          <div
+            v-for="(app, index) in filteredProcesses"
+            :key="app.exe_path"
+            @click="selectApp(app)"
+            @mouseenter="highlightedIndex = index"
+            class="flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors"
+            :class="{ 'bg-bg-elevated': highlightedIndex === index }"
+          >
+            <img
+              v-if="app.icon"
+              :src="app.icon"
+              class="w-5 h-5 shrink-0"
+              alt=""
+            />
+            <div v-else class="w-5 h-5 shrink-0 rounded bg-bg-elevated" />
+            <div class="flex-1 min-w-0">
+              <p class="text-[0.8125rem] text-text-primary truncate">{{ app.display_name }}</p>
+              <p class="text-[0.6875rem] text-text-tertiary truncate">{{ app.exe_name }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/src/views/CalendarView.vue b/src/views/CalendarView.vue
index 4d01e24..e611772 100644
--- a/src/views/CalendarView.vue
+++ b/src/views/CalendarView.vue
@@ -34,7 +34,8 @@
     </div>
 
     <!-- Calendar Grid -->
-    <div class="flex-1 bg-bg-surface rounded-lg border border-border-subtle overflow-hidden flex flex-col min-h-0">
+    <Transition name="fade" mode="out-in">
+    <div :key="weekStart.getTime()" class="flex-1 bg-bg-surface rounded-lg border border-border-subtle overflow-hidden flex flex-col min-h-0">
       <!-- Day column headers -->
       <div class="grid shrink-0 border-b border-border-subtle" :style="gridStyle">
         <!-- Top-left corner (hour gutter) -->
@@ -119,6 +120,7 @@
         </div>
       </div>
     </div>
+    </Transition>
   </div>
 </template>
 
diff --git a/src/views/Clients.vue b/src/views/Clients.vue
index 6011bf0..805aa39 100644
--- a/src/views/Clients.vue
+++ b/src/views/Clients.vue
@@ -12,11 +12,12 @@
     </div>
 
     <!-- Clients Grid -->
-    <div v-if="clientsStore.clients.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <TransitionGroup v-if="clientsStore.clients.length > 0" name="list" tag="div" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <div
-        v-for="client in clientsStore.clients"
+        v-for="(client, index) in clientsStore.clients"
         :key="client.id"
-        class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] hover:bg-bg-elevated transition-all duration-150 cursor-pointer"
+        class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] card-hover cursor-pointer"
+        :style="{ transitionDelay: `${index * 30}ms` }"
         @click="openEditDialog(client)"
       >
         <div class="p-4">
@@ -49,11 +50,11 @@
           </div>
         </div>
       </div>
-    </div>
+    </TransitionGroup>
 
     <!-- Empty State -->
     <div v-else class="flex flex-col items-center justify-center py-16">
-      <Users class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
+      <Users class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" />
       <p class="text-sm text-text-secondary mt-4">No clients yet</p>
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Clients let you organize projects and generate invoices with billing details.</p>
       <button
@@ -65,12 +66,13 @@
     </div>
 
     <!-- Create/Edit Dialog -->
+    <Transition name="modal">
     <div
       v-if="showDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
-      @click.self="closeDialog"
+      @click.self="tryCloseDialog"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 animate-modal-enter max-h-[calc(100vh-2rem)] overflow-y-auto">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 max-h-[calc(100vh-2rem)] overflow-y-auto">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
           {{ editingClient ? 'Edit Client' : 'Create Client' }}
         </h2>
@@ -201,14 +203,16 @@
         </form>
       </div>
     </div>
+    </Transition>
 
     <!-- Delete Confirmation Dialog -->
+    <Transition name="modal">
     <div
       v-if="showDeleteDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="cancelDelete"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Client</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete "{{ clientToDelete?.name }}"? This action cannot be undone.
@@ -229,16 +233,31 @@
         </div>
       </div>
     </div>
+    </Transition>
+
+    <AppDiscardDialog :show="showDiscardDialog" @cancel="cancelDiscard" @discard="confirmDiscard" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { Users } from 'lucide-vue-next'
+import AppDiscardDialog from '../components/AppDiscardDialog.vue'
 import { useClientsStore, type Client } from '../stores/clients'
+import { useFormGuard } from '../utils/formGuard'
 
 const clientsStore = useClientsStore()
 
+const { showDiscardDialog, snapshot: snapshotForm, tryClose: tryCloseForm, confirmDiscard, cancelDiscard } = useFormGuard()
+
+function getFormData() {
+  return { name: formData.name, email: formData.email, phone: formData.phone, address: formData.address, company: formData.company, tax_id: formData.tax_id, payment_terms: formData.payment_terms, notes: formData.notes }
+}
+
+function tryCloseDialog() {
+  tryCloseForm(getFormData(), closeDialog)
+}
+
 // Dialog state
 const showDialog = ref(false)
 const showDeleteDialog = ref(false)
@@ -275,6 +294,7 @@ function openCreateDialog() {
   formData.payment_terms = undefined
   formData.notes = undefined
   billingOpen.value = false
+  snapshotForm(getFormData())
   showDialog.value = true
 }
 
@@ -291,6 +311,7 @@ function openEditDialog(client: Client) {
   formData.payment_terms = client.payment_terms
   formData.notes = client.notes
   billingOpen.value = hasBillingData(client)
+  snapshotForm(getFormData())
   showDialog.value = true
 }
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 1062da6..cae6383 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -2,7 +2,7 @@
   <div class="p-6">
     <!-- Empty state -->
     <div v-if="isEmpty" class="flex flex-col items-center justify-center py-16">
-      <Clock class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
+      <Clock class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" />
       <p class="text-sm text-text-secondary mt-4">Start tracking your time</p>
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Your dashboard will come alive with stats, charts, and recent activity once you start logging hours.</p>
       <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors">
@@ -11,7 +11,8 @@
     </div>
 
     <!-- Main content -->
-    <template v-else>
+    <Transition name="fade" appear>
+    <div v-if="!isEmpty">
       <!-- Greeting header -->
       <div class="mb-8">
         <p class="text-xl font-[family-name:var(--font-heading)] text-text-secondary">{{ greeting }}</p>
@@ -49,7 +50,7 @@
             </div>
             <div class="w-full bg-bg-elevated rounded-full h-1.5">
               <div
-                class="h-1.5 rounded-full bg-accent transition-all"
+                class="h-1.5 rounded-full bg-accent progress-bar"
                 :style="{ width: Math.min(dailyPct, 100) + '%' }"
               />
             </div>
@@ -61,7 +62,7 @@
             </div>
             <div class="w-full bg-bg-elevated rounded-full h-1.5">
               <div
-                class="h-1.5 rounded-full bg-accent transition-all"
+                class="h-1.5 rounded-full bg-accent progress-bar"
                 :style="{ width: Math.min(weeklyPct, 100) + '%' }"
               />
             </div>
@@ -130,7 +131,8 @@
           </div>
         </div>
       </div>
-    </template>
+    </div>
+    </Transition>
   </div>
 </template>
 
diff --git a/src/views/Entries.vue b/src/views/Entries.vue
index b2c6ecd..fe2e723 100644
--- a/src/views/Entries.vue
+++ b/src/views/Entries.vue
@@ -70,11 +70,12 @@
             <th class="px-4 py-3 w-20"></th>
           </tr>
         </thead>
-        <tbody>
+        <TransitionGroup name="list" tag="tbody">
           <tr
-            v-for="entry in filteredEntries"
+            v-for="(entry, index) in filteredEntries"
             :key="entry.id"
             class="group border-b border-border-subtle hover:bg-bg-elevated transition-colors duration-150"
+            :style="{ transitionDelay: `${index * 30}ms` }"
           >
             <td class="px-4 py-3 text-[0.75rem] text-text-primary">
               {{ formatDate(entry.start_time) }}
@@ -138,12 +139,12 @@
               </div>
             </td>
           </tr>
-        </tbody>
+        </TransitionGroup>
       </table>
     </div>
 
     <div v-else class="flex flex-col items-center justify-center py-16">
-      <ListIcon class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
+      <ListIcon class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" />
       <p class="text-sm text-text-secondary mt-4">No entries found</p>
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Time entries will appear here as you track your work. Try adjusting the date range if you have existing entries.</p>
       <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors">
@@ -152,12 +153,13 @@
     </div>
 
     <!-- Edit Dialog -->
+    <Transition name="modal">
     <div
       v-if="showEditDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="tryCloseEditDialog"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 animate-modal-enter max-h-[calc(100vh-2rem)] overflow-y-auto">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 max-h-[calc(100vh-2rem)] overflow-y-auto">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Edit Entry</h2>
 
         <form @submit.prevent="handleEdit" class="space-y-4">
@@ -232,14 +234,16 @@
         </form>
       </div>
     </div>
+    </Transition>
 
     <!-- Delete Confirmation Dialog -->
+    <Transition name="modal">
     <div
       v-if="showDeleteDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="cancelDelete"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Entry</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete this time entry? This action cannot be undone.
@@ -260,6 +264,7 @@
         </div>
       </div>
     </div>
+    </Transition>
 
     <AppDiscardDialog :show="showDiscardDialog" @cancel="cancelDiscard" @discard="confirmDiscard" />
   </div>
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 101ba94..bd0b1ea 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -12,11 +12,12 @@
     </div>
 
     <!-- Projects Grid -->
-    <div v-if="projectsStore.projects.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <TransitionGroup v-if="projectsStore.projects.length > 0" name="list" tag="div" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <div
-        v-for="project in projectsStore.projects"
+        v-for="(project, index) in projectsStore.projects"
         :key="project.id"
-        class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] hover:bg-bg-elevated transition-all duration-150 cursor-pointer"
+        class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] card-hover cursor-pointer"
+        :style="{ transitionDelay: `${index * 30}ms` }"
         @click="openEditDialog(project)"
       >
         <div class="flex border-l-[2px] hover:border-l-[3px] rounded-l-lg transition-all duration-150" :style="{ borderLeftColor: project.color }">
@@ -54,7 +55,7 @@
               </div>
               <div class="w-full bg-bg-elevated rounded-full h-1">
                 <div
-                  class="h-1 rounded-full transition-all"
+                  class="h-1 rounded-full progress-bar"
                   :class="getBudgetPct(project) > 90 ? 'bg-status-error' : getBudgetPct(project) > 75 ? 'bg-status-warning' : 'bg-accent'"
                   :style="{ width: Math.min(getBudgetPct(project), 100) + '%' }"
                 />
@@ -63,11 +64,11 @@
           </div>
         </div>
       </div>
-    </div>
+    </TransitionGroup>
 
     <!-- Empty State -->
     <div v-else class="flex flex-col items-center justify-center py-16">
-      <FolderKanban class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
+      <FolderKanban class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" />
       <p class="text-sm text-text-secondary mt-4">No projects yet</p>
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Projects organize your time entries and set billing rates for clients.</p>
       <button
@@ -79,12 +80,13 @@
     </div>
 
     <!-- Create/Edit Dialog -->
+    <Transition name="modal">
     <div
       v-if="showDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="tryCloseDialog"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 animate-modal-enter max-h-[calc(100vh-2rem)] overflow-y-auto">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 max-h-[calc(100vh-2rem)] overflow-y-auto">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
           {{ editingProject ? 'Edit Project' : 'Create Project' }}
         </h2>
@@ -240,14 +242,16 @@
         </form>
       </div>
     </div>
+    </Transition>
 
     <!-- Delete Confirmation Dialog -->
+    <Transition name="modal">
     <div
       v-if="showDeleteDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="cancelDelete"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Project</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete "{{ projectToDelete?.name }}"? This action cannot be undone.
@@ -268,6 +272,7 @@
         </div>
       </div>
     </div>
+    </Transition>
 
     <AppDiscardDialog :show="showDiscardDialog" @cancel="cancelDiscard" @discard="confirmDiscard" />
   </div>
diff --git a/src/views/Reports.vue b/src/views/Reports.vue
index 3d2a532..9f4bbaf 100644
--- a/src/views/Reports.vue
+++ b/src/views/Reports.vue
@@ -1,4 +1,5 @@
 <template>
+  <Transition name="fade" appear>
   <div class="p-6">
     <h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary mb-6">Reports</h1>
 
@@ -198,6 +199,7 @@
       </div>
     </template>
   </div>
+  </Transition>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/Timer.vue b/src/views/Timer.vue
index c625cc5..27e90cd 100644
--- a/src/views/Timer.vue
+++ b/src/views/Timer.vue
@@ -3,7 +3,7 @@
     <!-- Hero timer display -->
     <div class="text-center pt-4 pb-8">
       <div class="relative inline-block">
-        <p class="text-[3.5rem] font-medium font-[family-name:var(--font-heading)] tracking-tighter mb-2">
+        <p class="text-[3.5rem] font-medium font-[family-name:var(--font-heading)] tracking-tighter mb-2" :class="timerPulseClass">
           <span class="text-text-primary">{{ timerParts.hours }}</span>
           <span :class="timerStore.isRunning ? 'text-accent-text animate-pulse-colon' : 'text-text-primary'">:</span>
           <span class="text-text-primary">{{ timerParts.minutes }}</span>
@@ -32,7 +32,7 @@
 
       <button
         @click="toggleTimer"
-        class="px-10 py-3 text-sm font-medium rounded-lg transition-colors duration-150"
+        class="btn-primary px-10 py-3 text-sm font-medium rounded-lg transition-colors duration-150"
         :class="buttonClass"
       >
         {{ buttonLabel }}
@@ -41,19 +41,20 @@
 
     <!-- Favorites strip -->
     <div v-if="favorites.length > 0" class="max-w-[36rem] mx-auto mb-4">
-      <div class="flex items-center gap-2 overflow-x-auto pb-1">
+      <TransitionGroup tag="div" name="chip" class="flex items-center gap-2 overflow-x-auto pb-1">
         <button
-          v-for="fav in favorites"
+          v-for="(fav, favIndex) in favorites"
           :key="fav.id"
           @click="applyFavorite(fav)"
           :disabled="!timerStore.isStopped"
           class="shrink-0 flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border-subtle text-[0.6875rem] text-text-secondary hover:text-text-primary hover:border-border-visible transition-colors disabled:opacity-40"
+          :style="{ transitionDelay: `${favIndex * 50}ms` }"
         >
           <span class="w-2 h-2 rounded-full" :style="{ backgroundColor: getProjectColor(fav.project_id) }" />
           {{ getProjectName(fav.project_id) }}
           <span v-if="fav.description" class="text-text-tertiary">&middot; {{ fav.description }}</span>
         </button>
-      </div>
+      </TransitionGroup>
     </div>
 
     <!-- Inputs -->
@@ -117,12 +118,13 @@
         <router-link v-if="recentEntries.length > 0" to="/entries" class="text-xs text-text-tertiary hover:text-text-secondary transition-colors">View all</router-link>
       </div>
 
-      <div v-if="recentEntries.length > 0">
+      <TransitionGroup v-if="recentEntries.length > 0" name="list" tag="div">
         <div
           v-for="(entry, index) in recentEntries"
           :key="entry.id"
           class="flex items-center justify-between py-3 border-b border-border-subtle last:border-0"
           :class="index === 0 ? 'border-l-2 border-l-accent pl-3' : ''"
+          :style="{ transitionDelay: `${index * 40}ms` }"
         >
           <div class="flex items-center gap-3">
             <div
@@ -149,11 +151,11 @@
             </button>
           </div>
         </div>
-      </div>
+      </TransitionGroup>
 
       <!-- Empty state -->
       <div v-else class="flex flex-col items-center py-8">
-        <TimerIcon class="w-10 h-10 text-text-tertiary" :stroke-width="1.5" />
+        <TimerIcon class="w-10 h-10 text-text-tertiary animate-float" :stroke-width="1.5" />
         <p class="text-sm text-text-secondary mt-3">No entries today</p>
         <p class="text-xs text-text-tertiary mt-1">Select a project and hit Start to begin tracking</p>
       </div>
@@ -209,6 +211,7 @@ const selectedTask = ref<number | null>(timerStore.selectedTaskId)
 const description = ref(timerStore.description)
 const selectedTags = ref<number[]>([])
 const projectTasks = ref<Task[]>([])
+const timerPulseClass = ref('')
 
 // Split timer into parts for colon animation
 const timerParts = computed(() => {
@@ -243,6 +246,21 @@ const buttonClass = computed(() => {
   return 'bg-status-error text-white hover:bg-status-error/80'
 })
 
+// Timer start/stop pulse animation
+watch(() => timerStore.isRunning, (isRunning, wasRunning) => {
+  if (isRunning && !wasRunning) {
+    timerPulseClass.value = 'animate-timer-pulse'
+    setTimeout(() => { timerPulseClass.value = '' }, 300)
+  }
+})
+
+watch(() => timerStore.isStopped, (isStopped, wasStopped) => {
+  if (isStopped && !wasStopped) {
+    timerPulseClass.value = 'animate-timer-glow'
+    setTimeout(() => { timerPulseClass.value = '' }, 600)
+  }
+})
+
 // Watch project selection and fetch tasks
 watch(selectedProject, async (newProjectId) => {
   timerStore.setProject(newProjectId)
diff --git a/src/views/TimesheetView.vue b/src/views/TimesheetView.vue
index 5dbf8fa..0d902de 100644
--- a/src/views/TimesheetView.vue
+++ b/src/views/TimesheetView.vue
@@ -35,7 +35,8 @@
     </div>
 
     <!-- Timesheet Table -->
-    <div class="bg-bg-surface rounded-lg overflow-hidden">
+    <Transition name="fade" mode="out-in">
+    <div :key="weekStart" class="bg-bg-surface rounded-lg overflow-hidden">
       <table class="w-full">
         <thead>
           <tr class="border-b border-border-subtle">
@@ -156,6 +157,7 @@
         </tfoot>
       </table>
     </div>
+    </Transition>
 
     <!-- Add Row Button -->
     <button