diff --git a/public/robots.txt b/public/robots.txt
index ce2fcc1..13a32c1 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,4 +1,5 @@
 User-agent: *
 Allow: /
+Disallow: /*/recipes/*/timer/
 
 Sitemap: https://trybrew.app/sitemap-index.xml
diff --git a/src/components/Recipe.astro b/src/components/Recipe.astro
index a81257f..6eb0cc7 100644
--- a/src/components/Recipe.astro
+++ b/src/components/Recipe.astro
@@ -15,13 +15,15 @@ type Entry = CollectionEntry<'recipes'>
 type Props = { recipe: Entry['data'] }
 
 const { recipe } = Astro.props
+const { name } = Astro.params
 
 const locale = Astro.currentLocale || 'en'
 const messages = commonMessages(locale)
 const recipeMessages = getRecipeMessages(locale)
 const { time, weight } = createPropertyFormatters(Astro.currentLocale)
 
-const href = getRelativeLocaleUrl(locale, `/recipes/${recipe.method}`)
+const methodHref = getRelativeLocaleUrl(locale, `/recipes/${recipe.method}`)
+const timerHref = getRelativeLocaleUrl(locale, `/recipes/${recipe.method}/${name}/timer`)
 const DEFAULT_GROUP = Symbol('default')
 
 const formattedSteps = recipe.steps
@@ -61,7 +63,7 @@ const groupedSteps = formattedSteps
 
 <div class="root">
   <h1 class="title">
-    <a class="method-link" {href}>{messages[recipe.method as keyof typeof messages]}</a> / {recipe.name}
+    <a class="method-link" href={methodHref}>{messages[recipe.method]}</a> / {recipe.name}
   </h1>
   <RecipeProperties properties={recipe.properties} />
   <div>
@@ -94,6 +96,9 @@ const groupedSteps = formattedSteps
     }
     <slot />
   </div>
+  {recipe.steps
+    ? <a class="timer-link" href={timerHref}>Open timer</a>
+    : null}
   <div class="source">
     <span>{messages.source}:</span>
     <Author image={recipe.authorImg} link={recipe.link} name={recipe.author} />
@@ -183,6 +188,12 @@ const groupedSteps = formattedSteps
     align-items: center;
     gap: 12px;
   }
+
+  .timer-link {
+    display: inline-block;
+    margin-block: 24px;
+    color: inherit;
+  }
 </style>
 
 <!-- TODO: Drop these styles, when we migrate new recipes to MDX or frontmatter -->
diff --git a/src/components/Timer.astro b/src/components/Timer.astro
index a0d467a..4a8eb74 100644
--- a/src/components/Timer.astro
+++ b/src/components/Timer.astro
@@ -1,47 +1,66 @@
 ---
+import { commonMessages } from '@/i18n/locales/common/en'
 interface Props {
   steps: {
-    description: null | string;
-    time: number;
-    water: number;
-  }
+    description?: string
+    group?: string
+    time: number
+    totalWater: string
+  }[]
 }
+const locale = Astro.currentLocale || 'en'
+const messages = commonMessages(locale)
 
 const { steps } = Astro.props
 ---
 
-<div data-steps={JSON.stringify(steps)} id="timer-root">
+<div data-locale={locale} data-steps={JSON.stringify(steps)} id="timer-root">
   <div class="wrapper">
     <svg viewBox="0 0 200 200">
       <!-- Background Circle -->
       <circle class="baseArc" cx="100" cy="100" fill="none" r="90" stroke-width="8"></circle>
       <!-- Progress Arc -->
-      <circle class="progressArc" cx="100" cy="100" fill="none" id="progressArc" r="90" stroke-linecap="round"
-          stroke-width="8"
-      ></circle>
+      <circle
+        class="progressArc"
+        cx="100"
+        cy="100"
+        fill="none"
+        id="progressArc"
+        r="90"
+        stroke-linecap="round"
+        stroke-width="8"></circle>
     </svg>
-    <div class="time segmented-1" id="time"></div>
+    <div class="time segmented" id="time"></div>
     <div class="steps">
       <div class="step" id="step">
+        <div class="group" id="group"></div>
         <div id="description"></div>
         <div id="totalWeight"></div>
       </div>
-      <!--<div class="nextStep" id="nextStep">-->
-      <!--</div>-->
     </div>
   </div>
-  <div>
-    <button id="startTimer">Start</button>
-    <button id="stopTimer">Stop</button>
-    <button id="stopBrew">Reset</button>
+  <div class="control-panel">
+    <button class="control-panel--btn" id="startTimer">{messages.start}</button>
+    <button class="control-panel--btn" id="stopBrew">{messages.reset}</button>
   </div>
 </div>
 
 <style>
   .wrapper {
     position: relative;
-    width: 500px;
-    height: 500px;
+    max-width: 500px;
+    margin-inline: auto;
+  }
+
+  .group {
+    color: var(--text-secondary);
+    font-size: 20px;
+    text-transform: uppercase;
+    font-weight: 600;
+
+    @media screen and (max-width: 500px) {
+      font-size: 14px;
+    }
   }
 
   .time {
@@ -54,16 +73,34 @@ const { steps } = Astro.props
     font-size: 50px;
   }
 
-  @font-palette-values --segmented-1 {
+  @font-palette-values --segmented-light {
     font-family: Segmented;
-    override-colors: 0 oklch(0 0 0), 1 oklch(0 0 0 / 0.08);
+    override-colors:
+      0 oklch(0 0 0),
+      1 oklch(0 0 0 / 0.08);
   }
 
-  .segmented-1 {
+  @font-palette-values --segmented-dark {
     font-family: Segmented;
-    font-palette: --segmented-1;
-    /*font-feature-settings: 'ss${formattedCurrentStyleNumber}' on;*/
-    font-variation-settings: 'wght' 600, 'wdth' 100, 'slnt' 5;
+    override-colors:
+      0 oklch(100 0 0),
+      1 oklch(100 0 0 / 0.08);
+  }
+
+  .segmented {
+    font-family: Segmented, system-ui;
+    font-variation-settings:
+      'wght' 600,
+      'wdth' 100,
+      'slnt' 5;
+  }
+
+  html[data-theme='dark'] .segmented {
+    font-palette: --segmented-dark;
+  }
+
+  .segmented {
+    font-palette: --segmented-light;
   }
 
   .steps {
@@ -81,148 +118,171 @@ const { steps } = Astro.props
     gap: 12px;
     font-size: 30px;
     color: var(--text-primary);
-  }
 
-  .nextStep {
-    margin-block-start: 12px;
-    color: var(--text-secondary);
+    @media screen and (max-width: 500px) {
+      font-size: 18px;
+    }
   }
 
   .baseArc {
-    stroke: oklch(0 0 0 / 0.08);
+    stroke: var(--color-timer-base-arc);
   }
 
   .progressArc {
-    stroke: oklch(0 0 0);
+    stroke: var(--color-timer-progress-arc);
   }
-</style>
 
-<script>
-type Step = {
-  description: null | string;
-  time: number;
-  water: number;
-}
-
-let startTime: number
-let elapsedTime = 0
-let isRunning = false
-let stepIndex = 0
-const reverseTimer = true
-
-const root = document.getElementById('timer-root')
-const timeSlot = document.getElementById('time')
-const descriptionSlot = document.getElementById('description')
-const totalWeightSlot = document.getElementById('totalWeight')
-const nextStepSlot = document.getElementById('nextStep')
-const progressArc = document.getElementById('progressArc')
-
-const steps: Step[] = root?.dataset.steps
-  ? JSON.parse(root.dataset.steps).map((it: Step) => ({
-    ...it,
-    time: it.time * 1000
-  }))
-  : []
-
-let step = steps[stepIndex]
-let nextStep = steps[stepIndex + 1]
-let timeLeft = 0
-
-function updateStep (index: number) {
-  if (!descriptionSlot || !totalWeightSlot) return
-  stepIndex = index
-  step = steps[stepIndex]
-  nextStep = steps[stepIndex + 1]
-  descriptionSlot.textContent = step.description
-  totalWeightSlot.textContent = `${step.water}g`
-  // nextStepSlot.textContent = nextStep ? nextStep.description : "";
-}
-
-function updateTime (time: number) {
-  if (!timeSlot || !progressArc) return
-  elapsedTime = time
-  timeLeft = step.time - time
-  const displayTime = reverseTimer ? timeLeft : elapsedTime
-  timeSlot.textContent = formatTime(displayTime)
-  progressArc.setAttribute('stroke-dasharray', getDashArray((displayTime / step.time) * 100))
-}
+  .control-panel {
+    position: sticky;
+    inset-block-end: 0;
+    background: var(--color-background);
+    padding: 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    justify-content: center;
+  }
 
-function startTimer () {
-  isRunning = true
-  startTime = performance.now() - elapsedTime
-  requestAnimationFrame(updateTimer)
-}
+  .control-panel--btn {
+    font-size: 16px;
+    padding: 8px 14px;
+    border-radius: 4px;
+    border: none;
+    min-width: 100px;
+  }
+</style>
 
-function stopTimer () {
-  isRunning = false
-}
+<script>
+  import { commonMessages } from '@/i18n/locales/common/en'
 
-function resetTimer () {
-  stopTimer()
-  updateTime(0)
-}
+  type Step = {
+    description?: string
+    time: number
+    totalWater: string
+    group?: string
+  }
 
-function updateTimer (currentTime: number) {
-  if (!isRunning) return
+  let startTime: number
+  let elapsedTime = 0
+  let isRunning = false
+  let stepIndex = 0
+  const reverseTimer = true
+
+  const root = document.getElementById('timer-root')
+  const timeSlot = document.getElementById('time')
+  const groupSlot = document.getElementById('group')
+  const descriptionSlot = document.getElementById('description')
+  const totalWeightSlot = document.getElementById('totalWeight')
+  const progressArc = document.getElementById('progressArc')
+  const startTimerBtn = document.getElementById('startTimer')!
+
+  const messages = commonMessages(root?.dataset.locale)
+
+  const steps: Step[] = root?.dataset.steps
+    ? JSON.parse(root.dataset.steps).map((it: Step) => ({
+      ...it,
+      time: it.time * 1000
+    }))
+    : []
+
+  let step = steps[stepIndex]
+  let timeLeft = 0
+
+  function updateStep(index: number) {
+    if (!descriptionSlot || !totalWeightSlot || !groupSlot) return
+    stepIndex = index
+    step = steps[stepIndex]
+    groupSlot.textContent = step.group ?? null
+    descriptionSlot.textContent = step.description ?? null
+    totalWeightSlot.textContent = step.totalWater
+  }
 
-  updateTime(currentTime - startTime)
+  function updateTime(time: number) {
+    if (!timeSlot || !progressArc) return
+    elapsedTime = time
+    timeLeft = step.time - time
+    const displayTime = reverseTimer ? timeLeft : elapsedTime
+    timeSlot.textContent = formatTime(displayTime)
+    progressArc.setAttribute('stroke-dasharray', getDashArray((displayTime / step.time) * 100))
+  }
 
-  if (elapsedTime > step.time) {
-    resetTimer()
-    if (stepIndex + 1 >= steps.length) {
-      console.debug('stopping brew', stepIndex, steps.length)
-      stopBrew()
+  function toggleTimer() {
+    if (isRunning) {
+      stopTimer()
     } else {
-      updateStep(stepIndex + 1)
       startTimer()
     }
   }
 
-  requestAnimationFrame(updateTimer)
-}
+  function startTimer() {
+    isRunning = true
+    startTime = performance.now() - elapsedTime
+    requestAnimationFrame(updateTimer)
+    startTimerBtn.textContent = messages['pause']
+  }
 
-function formatTime (time: number) {
-  const totalMilliseconds = Math.floor(time)
-  const minutes = Math.floor((totalMilliseconds % 3600_000) / 60_000)
-  const seconds = Math.floor((totalMilliseconds % 60_000) / 1000)
-  // const milliseconds = totalMilliseconds % 1000;
+  function stopTimer() {
+    isRunning = false
+    startTimerBtn.textContent = messages['start']
+  }
 
-  return pad(minutes) + ':' + pad(seconds)
-  // + ":" + milliseconds.toString().padStart(3, "0");
-}
+  function resetTimer() {
+    stopTimer()
+    updateTime(0)
+  }
 
-function getDashArray (percent: number) {
-  const circumference = 2 * Math.PI * 90
-  const dashArray = circumference * (percent / 100)
-  return `${dashArray} ${circumference}`
-}
+  function updateTimer(currentTime: number) {
+    if (!isRunning) return
 
-function pad (value: number) {
-  return value < 10 ? '0' + value : value
-}
+    updateTime(currentTime - startTime)
 
-function stopBrew () {
-  updateStep(0)
-  resetTimer()
-}
+    if (elapsedTime > step.time) {
+      resetTimer()
+      if (stepIndex + 1 >= steps.length) {
+        console.debug('stopping brew', stepIndex, steps.length)
+        stopBrew()
+      } else {
+        updateStep(stepIndex + 1)
+        startTimer()
+      }
+    }
 
-const startTimerBtn = document.getElementById('startTimer')
-const stopTimerBtn = document.getElementById('stopTimer')
-const stopBrewBtn = document.getElementById('stopBrew')
+    requestAnimationFrame(updateTimer)
+  }
 
-if (startTimerBtn && stopBrewBtn && stopTimerBtn) {
-  startTimerBtn.addEventListener('click', () => {
-    startTimer()
-  })
+  function formatTime(time: number) {
+    const totalMilliseconds = Math.floor(time)
+    const minutes = Math.floor((totalMilliseconds % 3600_000) / 60_000)
+    const seconds = Math.floor((totalMilliseconds % 60_000) / 1000)
 
-  stopTimerBtn.addEventListener('click', () => {
-    stopTimer()
-  })
+    return pad(minutes) + ':' + pad(seconds)
+  }
 
-  stopBrewBtn.addEventListener('click', () => {
-    stopBrew()
-  })
-}
+  function getDashArray(percent: number) {
+    const circumference = 2 * Math.PI * 90
+    const dashArray = circumference * (percent / 100)
+    return `${dashArray} ${circumference}`
+  }
+
+  function pad(value: number) {
+    return value < 10 ? '0' + value : value
+  }
+
+  function stopBrew() {
+    updateStep(0)
+    resetTimer()
+  }
+
+  const stopBrewBtn = document.getElementById('stopBrew')
+
+  if (startTimerBtn && stopBrewBtn) {
+    startTimerBtn.addEventListener('click', () => {
+      toggleTimer()
+    })
+    stopBrewBtn.addEventListener('click', () => {
+      stopBrew()
+    })
+  }
 
-stopBrew()
+  stopBrew()
 </script>
diff --git a/src/constants/brewMethods.ts b/src/constants/brewMethods.ts
new file mode 100644
index 0000000..86cfabd
--- /dev/null
+++ b/src/constants/brewMethods.ts
@@ -0,0 +1,8 @@
+export const BREW_METHODS = [
+  'aeropress',
+  'cezve',
+  'chemex',
+  'coldbrew',
+  'pourover',
+  'summer'
+] as const
diff --git a/src/content/config.ts b/src/content/config.ts
index a30b940..5b7b4b1 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -1,6 +1,8 @@
 /* eslint-disable perfectionist/sort-objects */
 import { defineCollection, z } from 'astro:content'
 
+import { BREW_METHODS } from '@/constants/brewMethods.ts'
+
 const recipeStep = z.object({
   description: z.string().optional(),
   time: z.string(),
@@ -13,7 +15,7 @@ const recipesCollection = defineCollection({
     title: z.string(),
     description: z.string(),
     name: z.string(),
-    method: z.string(),
+    method: z.enum(BREW_METHODS),
     properties: z.object({
       coffeeWeight: z.number(),
       water: z.number(),
diff --git a/src/content/recipes/en/pourover/aeroplan-01.md b/src/content/recipes/en/pourover/aeroplan-01.md
index 4186f0e..e3b9f99 100644
--- a/src/content/recipes/en/pourover/aeroplan-01.md
+++ b/src/content/recipes/en/pourover/aeroplan-01.md
@@ -12,18 +12,22 @@ properties:
   temperature: 95
 
 steps:
-  - description: Pre-wetting in a spiral and intensely
+  - description: In a spiral and intensely
     water: 50
     time: "0:50"
+    group: Pre-wetting
   - description: From the center to the edges of the coffee tablet
     water: 70
     time: "0:30"
+    group: Infusions
   - description: To the center and back to spiral brewing
     water: 60
     time: "0:40"
+    group: Infusions
   - description: Into the center of the funnel
     water: 29
     time: "1:25"
+    group: Infusions
 
 author: Aeroplan.Coffee
 authorImg: aeroplan
diff --git a/src/content/recipes/ru/pourover/aeroplan-01.md b/src/content/recipes/ru/pourover/aeroplan-01.md
index a4ff5d0..fba82e9 100644
--- a/src/content/recipes/ru/pourover/aeroplan-01.md
+++ b/src/content/recipes/ru/pourover/aeroplan-01.md
@@ -11,6 +11,24 @@ properties:
   time: '3:25'
   temperature: 95
 
+steps:
+  - description: Интенсивно по спирали
+    water: 50
+    time: '0:50'
+    group: Предсмачивание
+  - description: От центра к краям кофейной таблетки
+    water: 120
+    time: '0:30'
+    group: Вливания
+  - description: В центр и возвращаемся к завариванию по спирали
+    water: 180
+    time: '0:40'
+    group: Вливания
+  - description: В центр воронки
+    water: 309
+    time: '1:25'
+    group: Вливания
+
 author: Aeroplan.Coffee
 authorImg: aeroplan
 
@@ -19,78 +37,6 @@ tags:
   - pourover
 ---
 
-## Рецепт
-
-
-<div class="time-line">
-
-Время
-
-Вес
-
-Итого
-
-</div>
-
-### Предсмачивание
-
-<div class="time-line">
-
-0:00
-
-50 г
-
-50 г
-
-</div>
-
-<p class="time-note">по спирали и интенсивно</p>
-
-### Вливания
-
-<div class="time-line">
-
-0:50
-
-70 г
-
-120 г
-
-</div>
-
-<p class="time-note">от центра к краям кофейной таблетки</p>
-
-
-<div class="time-line">
-
-1:20
-
-60 г
-
-180 г
-
-</div>
-
-<p class="time-note">в центр и возвращаемся к завариванию по спирали</p>
-
-<div class="time-line">
-
-2:00
-
-129 г
-
-309 г
-
-</div>
-
-<p class="time-note">в центр воронки</p>
-
-<br>
-
-Общее время экстракции __3:25__
-
-<br>
-
 <div class="info-note">
 
 ## Примечание
diff --git a/src/i18n/locales/common/en.ts b/src/i18n/locales/common/en.ts
index ab2426e..03b4f24 100644
--- a/src/i18n/locales/common/en.ts
+++ b/src/i18n/locales/common/en.ts
@@ -13,11 +13,14 @@ export function commonMessages (locale?: string) {
     description: 'Recipes for brewing alternatives',
     languageName: 'English',
     menu: 'Menu',
+    pause: 'Pause',
     pourover: 'Pourover',
+    reset: 'Reset',
     sections: 'Sections',
     settings: 'Settings',
     source: 'Source',
     sourceCode: params('Source code on {link}'),
+    start: 'Start',
     summer: 'Summer',
     switchTo: params('Switch to {link}'),
     title: 'Recipes'
diff --git a/src/i18n/locales/common/ru.json b/src/i18n/locales/common/ru.json
index 00555ad..e5d54aa 100644
--- a/src/i18n/locales/common/ru.json
+++ b/src/i18n/locales/common/ru.json
@@ -15,5 +15,8 @@
   "settings": "Настройки",
   "sourceCode": "Исходный код на {link}",
   "summer": "Лето",
-  "switchTo": "Переключиться на {link}"
+  "switchTo": "Переключиться на {link}",
+  "start": "Старт",
+  "pause": "Пауза",
+  "reset": "Сбросить"
 }
diff --git a/src/pages/[lang]/recipes/[method]/[name].astro b/src/pages/[lang]/recipes/[method]/[name]/index.astro
similarity index 100%
rename from src/pages/[lang]/recipes/[method]/[name].astro
rename to src/pages/[lang]/recipes/[method]/[name]/index.astro
diff --git a/src/pages/[lang]/recipes/[method]/[name]/timer.astro b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
new file mode 100644
index 0000000..2aebfff
--- /dev/null
+++ b/src/pages/[lang]/recipes/[method]/[name]/timer.astro
@@ -0,0 +1,81 @@
+---
+import type { GetStaticPaths } from 'astro'
+import type { CollectionEntry } from 'astro:content'
+
+import { getCollection } from 'astro:content'
+import { getRelativeLocaleUrl } from 'astro:i18n'
+
+import TimerComponent from '@/components/Timer.astro'
+import { commonMessages } from '@/i18n/locales/common/en'
+import { createPropertyFormatters } from '@/i18n/utils'
+import Layout from '@/layouts/Layout.astro'
+import { humanTimeToSeconds } from '@/utils'
+
+type Entry = CollectionEntry<'recipes'>
+interface Props {
+  entry: CollectionEntry<'recipes'>
+}
+
+const { entry } = Astro.props
+const { method, name } = Astro.params
+const locale = Astro.currentLocale || 'en'
+const messages = commonMessages(locale)
+
+export const getStaticPaths = (async () => {
+  const recipes = await getCollection('recipes')
+  return recipes
+    .filter(entry => entry.data.steps !== undefined)
+    .map(entry => {
+      const [lang, method, name] = entry.slug.split('/')
+
+      return {
+        params: { lang, method, name },
+        props: { entry }
+      }
+    })
+}) satisfies GetStaticPaths
+const { weight } = createPropertyFormatters(Astro.currentLocale)
+
+const methodHref = getRelativeLocaleUrl(locale, `/recipes/${method}`)
+const recipeHref = getRelativeLocaleUrl(locale, `/recipes/${method}/${name}`)
+const formattedSteps = entry.data.steps!
+  .reduce<({ totalWater: number } & Exclude<Entry['data']['steps'], undefined>[number])[]>((acc, step, index) => {
+    const previousStepTotalWater = index > 0 ? acc[index - 1].totalWater : 0
+    acc.push({
+      ...step,
+      totalWater: step.water + previousStepTotalWater
+    })
+    return acc
+  }, [])
+  .map(step => ({
+    ...step,
+    time: humanTimeToSeconds(step.time),
+    totalWater: weight(step.totalWater)
+  }))
+---
+
+<Layout author={entry.data.author} description={entry.data.description} title={entry.data.title}>
+  <h1 class="title">
+    <a class="link" href={methodHref}>{messages[entry.data.method]}</a>
+    / <a class="link" href={recipeHref}>{entry.data.name}</a>
+    / Timer
+  </h1>
+  <TimerComponent steps={formattedSteps} />
+</Layout>
+
+<style>
+  .title {
+    margin-block: 0 28px;
+    font-size: 24px;
+    text-transform: capitalize;
+  }
+
+  .link {
+    display: inline-block;
+    color: inherit;
+  }
+
+  .link:visited {
+    color: inherit;
+  }
+</style>
diff --git a/src/styles/colors.css b/src/styles/colors.css
index 70d6295..e13b70b 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -21,6 +21,9 @@
 
   --color-author-icon-background: transparent;
   --color-focus: black;
+
+  --color-timer-progress-arc: oklch(0 0 0);
+  --color-timer-base-arc: oklch(0 0 0 / 0.08);
 }
 
 html[data-theme='dark'] {
@@ -42,4 +45,7 @@ html[data-theme='dark'] {
   --color-footer-boder: transparent;
   --color-author-icon-background: white;
   --color-focus: white;
+
+  --color-timer-progress-arc: oklch(100 0 0);
+  --color-timer-base-arc: oklch(100 0 0 / 0.08);
 }