diff --git a/alfy-bot-frontend/src/features/calendar/lib/use-create-slot-drag.ts b/alfy-bot-frontend/src/features/calendar/lib/use-create-slot-drag.ts
index 43343ed..f6e3c65 100644
--- a/alfy-bot-frontend/src/features/calendar/lib/use-create-slot-drag.ts
+++ b/alfy-bot-frontend/src/features/calendar/lib/use-create-slot-drag.ts
@@ -1,4 +1,5 @@
-import { ref, computed, type Ref, type CSSProperties } from 'vue'
+import type { CSSProperties, MaybeRefOrGetter, Ref } from 'vue'
+import { computed, ref, toValue } from 'vue'
 
 const MAX_MINUTES = 23 * 60 + 55
 const SHOW_OVERLAY_THRESHOLD_PX = 3
@@ -10,7 +11,7 @@ export interface CreateSlotDragOptions {
   trackEl: Ref<HTMLElement | null>
   dayOffset: (date: Date) => number
   dateFromX: (x: number) => Date
-  dayWidth: number
+  dayWidth: MaybeRefOrGetter<number>
   onCreated: (date: Date, startMinutes: number, durationMinutes: number) => Promise<void>
 }
 
@@ -39,7 +40,7 @@ export function useCreateSlotDrag(options: CreateSlotDragOptions) {
     position: 'absolute',
     top: `${overlayTop.value}px`,
     left: `${overlayLeft.value}px`,
-    width: `${options.dayWidth - 4}px`,
+    width: `${toValue(options.dayWidth) - 4}px`,
   }))
 
   const overlayTimeLabel = computed(() => {
@@ -49,14 +50,19 @@ export function useCreateSlotDrag(options: CreateSlotDragOptions) {
   })
 
   function onPointerDown(e: PointerEvent) {
-    if (e.button !== 0) return
-    if (e.ctrlKey || e.metaKey) return
+    if (e.button !== 0)
+      return
+    if (e.ctrlKey || e.metaKey)
+      return
     const target = e.target as HTMLElement | null
-    if (!target) return
-    if (target.closest('[data-calendar-event-block]')) return
+    if (!target)
+      return
+    if (target.closest('[data-calendar-event-block]'))
+      return
 
     const track = options.trackEl.value
-    if (!track) return
+    if (!track)
+      return
 
     const rect = track.getBoundingClientRect()
     const initialX = e.clientX - rect.left
@@ -94,7 +100,8 @@ export function useCreateSlotDrag(options: CreateSlotDragOptions) {
         if (!showOverlay.value) {
           const dx = Math.abs(ev.clientX - rect.left - initialX)
           const dy = Math.abs(y - initialY)
-          if (dx < SHOW_OVERLAY_THRESHOLD_PX && dy < SHOW_OVERLAY_THRESHOLD_PX) return
+          if (dx < SHOW_OVERLAY_THRESHOLD_PX && dy < SHOW_OVERLAY_THRESHOLD_PX)
+            return
           showOverlay.value = true
         }
 
@@ -149,7 +156,8 @@ export function useCreateSlotDrag(options: CreateSlotDragOptions) {
     }, LONG_PRESS_DELAY_MS)
 
     function onWaitMove(ev: PointerEvent) {
-      if (timerFired) return
+      if (timerFired)
+        return
       const dx = ev.clientX - initialClientX
       const dy = ev.clientY - initialClientY
       if (Math.sqrt(dx * dx + dy * dy) > TOUCH_DRAG_THRESHOLD_PX) {
@@ -158,7 +166,8 @@ export function useCreateSlotDrag(options: CreateSlotDragOptions) {
     }
 
     function onWaitEnd() {
-      if (!timerFired) cleanupWait()
+      if (!timerFired)
+        cleanupWait()
     }
 
     function cleanupWait() {
diff --git a/alfy-bot-frontend/src/features/calendar/lib/use-pointer-dnd.ts b/alfy-bot-frontend/src/features/calendar/lib/use-pointer-dnd.ts
index b6e87f8..9faf554 100644
--- a/alfy-bot-frontend/src/features/calendar/lib/use-pointer-dnd.ts
+++ b/alfy-bot-frontend/src/features/calendar/lib/use-pointer-dnd.ts
@@ -1,6 +1,7 @@
-import { ref, computed, type Ref, type CSSProperties } from 'vue'
-import { startOfDay } from 'date-fns'
+import type { CSSProperties, MaybeRefOrGetter, Ref } from 'vue'
 import type { CalendarEvent } from '../model/types'
+import { startOfDay } from 'date-fns'
+import { computed, ref, toValue } from 'vue'
 
 const MAX_MINUTES = 23 * 60 + 55
 
@@ -8,7 +9,7 @@ export interface PointerDndOptions {
   trackEl: Ref<HTMLElement | null>
   dayOffset: (date: Date) => number
   dateFromX: (x: number) => Date
-  dayWidth: number
+  dayWidth: MaybeRefOrGetter<number>
   onMoved: (taskId: string, newDate: Date, startMinutes: number) => Promise<void>
   onClicked?: (event: CalendarEvent) => void
   onResized?: (taskId: string, durationMinutes: number) => Promise<void>
@@ -39,7 +40,7 @@ export function usePointerDnd(options: PointerDndOptions) {
     position: 'absolute',
     top: `${overlayTop.value}px`,
     left: `${overlayLeft.value}px`,
-    width: `${options.dayWidth - 4}px`,
+    width: `${toValue(options.dayWidth) - 4}px`,
   }))
 
   const overlayTimeLabel = computed(() => {
@@ -52,7 +53,8 @@ export function usePointerDnd(options: PointerDndOptions) {
 
   function onGrab(event: CalendarEvent, e: PointerEvent) {
     const track = options.trackEl.value
-    if (!track) return
+    if (!track)
+      return
 
     isDragging.value = true
     showOverlay.value = false
@@ -83,7 +85,8 @@ export function usePointerDnd(options: PointerDndOptions) {
       previewDate.value = date
       overlayLeft.value = options.dayOffset(date) + 2
 
-      if (!showOverlay.value) showOverlay.value = true
+      if (!showOverlay.value)
+        showOverlay.value = true
     }
 
     const cleanup = () => {
@@ -106,7 +109,8 @@ export function usePointerDnd(options: PointerDndOptions) {
 
       if (movedTime || movedDay) {
         await options.onMoved(event.taskId, previewDate.value, previewMinutes.value)
-      } else if (!showOverlay.value && options.onClicked) {
+      }
+      else if (!showOverlay.value && options.onClicked) {
         options.onClicked(event)
       }
 
@@ -125,7 +129,8 @@ export function usePointerDnd(options: PointerDndOptions) {
 
   function onResizeStart(event: CalendarEvent, e: PointerEvent) {
     const track = options.trackEl.value
-    if (!track) return
+    if (!track)
+      return
 
     isDragging.value = true
     showOverlay.value = false
@@ -147,7 +152,8 @@ export function usePointerDnd(options: PointerDndOptions) {
       const newDuration = Math.max(newBottom - event.startMinutes, MIN_RESIZE_DURATION)
       overlayHeight.value = newDuration
 
-      if (!showOverlay.value) showOverlay.value = true
+      if (!showOverlay.value)
+        showOverlay.value = true
     }
 
     const cleanup = () => {
diff --git a/alfy-bot-frontend/src/features/calendar/lib/week.ts b/alfy-bot-frontend/src/features/calendar/lib/week.ts
index 2282ede..dfb9f6c 100644
--- a/alfy-bot-frontend/src/features/calendar/lib/week.ts
+++ b/alfy-bot-frontend/src/features/calendar/lib/week.ts
@@ -1,4 +1,4 @@
-import { startOfWeek, addWeeks, eachDayOfInterval, addDays, isSameDay, format } from 'date-fns'
+import { addDays, addWeeks, eachDayOfInterval, format, isSameDay, startOfWeek } from 'date-fns'
 import { dateFnsLocale, weekStartsOn } from '@/composables/useLocale'
 
 export function getWeekStart(date: Date): Date {
@@ -32,13 +32,17 @@ export function formatWeekRange(weekStart: Date): string {
   return `${startDay} ${startMonth} \u2013 ${endDay} ${endMonth} ${year}`
 }
 
-export function formatDayHeader(date: Date): { dayName: string; dayNumber: string } {
+export function formatDayHeader(date: Date): { dayName: string, dayNumber: string } {
   return {
     dayName: format(date, 'EEEEEE', { locale: dateFnsLocale.value }),
     dayNumber: format(date, 'd'),
   }
 }
 
+export function formatDayTitle(date: Date): string {
+  return format(date, 'd MMMM yyyy', { locale: dateFnsLocale.value })
+}
+
 export function formatDateRange(start: Date, end: Date): string {
   const startMonth = format(start, 'LLLL', { locale: dateFnsLocale.value })
   const endMonth = format(end, 'LLLL', { locale: dateFnsLocale.value })
diff --git a/alfy-bot-frontend/src/features/calendar/model/types.ts b/alfy-bot-frontend/src/features/calendar/model/types.ts
index 4f3db3d..ca5fd50 100644
--- a/alfy-bot-frontend/src/features/calendar/model/types.ts
+++ b/alfy-bot-frontend/src/features/calendar/model/types.ts
@@ -1,4 +1,4 @@
-import type { Task, Priority } from '@/features/tasks/model/types'
+import type { Priority, Task } from '@/features/tasks/model/types'
 
 export interface CalendarEvent {
   taskId: string
@@ -16,6 +16,8 @@ export interface CalendarEvent {
   pomodoroLabel?: string
 }
 
+export type CalendarViewMode = 'week' | 'day'
+
 export interface CalendarDropPayload {
   taskId: string
   newDate: Date
diff --git a/alfy-bot-frontend/src/features/calendar/ui/CalendarHeader.vue b/alfy-bot-frontend/src/features/calendar/ui/CalendarHeader.vue
index a9ea4dc..dbbcf36 100644
--- a/alfy-bot-frontend/src/features/calendar/ui/CalendarHeader.vue
+++ b/alfy-bot-frontend/src/features/calendar/ui/CalendarHeader.vue
@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import type { CalendarViewMode } from '../model/types'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+
+defineProps<{
+  label: string
+  viewMode: CalendarViewMode
+}>()
+
+defineEmits<{
+  'navigate': [direction: number]
+  'today': []
+  'update:viewMode': [value: CalendarViewMode]
+}>()
+
+function tabClass(active: boolean) {
+  return [
+    'h-7 rounded px-2.5 text-xs font-medium transition-colors cursor-pointer',
+    active
+      ? 'bg-background shadow-sm text-foreground'
+      : 'text-muted-foreground hover:text-foreground',
+  ]
+}
+</script>
+
 <template>
   <div class="flex items-center justify-between px-4 py-3">
     <div class="flex items-center gap-2">
@@ -10,21 +36,27 @@
       <Button variant="outline" size="sm" @click="$emit('today')">
         Сегодня
       </Button>
+      <div class="flex items-center gap-0.5 rounded-md bg-muted p-0.5">
+        <button
+          type="button"
+          :class="tabClass(viewMode === 'week')"
+          :aria-pressed="viewMode === 'week'"
+          aria-label="Неделя"
+          @click="viewMode !== 'week' && $emit('update:viewMode', 'week')"
+        >
+          Неделя
+        </button>
+        <button
+          type="button"
+          :class="tabClass(viewMode === 'day')"
+          :aria-pressed="viewMode === 'day'"
+          aria-label="День"
+          @click="viewMode !== 'day' && $emit('update:viewMode', 'day')"
+        >
+          День
+        </button>
+      </div>
     </div>
     <span class="text-sm font-medium capitalize">{{ label }}</span>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-
-defineProps<{
-  label: string
-}>()
-
-defineEmits<{
-  navigate: [direction: number]
-  today: []
-}>()
-</script>
diff --git a/alfy-bot-frontend/src/features/calendar/ui/HourGrid.vue b/alfy-bot-frontend/src/features/calendar/ui/HourGrid.vue
index fb5b6b0..240aa8e 100644
--- a/alfy-bot-frontend/src/features/calendar/ui/HourGrid.vue
+++ b/alfy-bot-frontend/src/features/calendar/ui/HourGrid.vue
@@ -132,7 +132,7 @@ const { showOverlay, draggedTaskId, draggedEvent, overlayStyle, overlayHeight, o
   trackEl: trackRef,
   dayOffset: (d: Date) => props.dayOffset(d),
   dateFromX: (x: number) => props.dateFromX(x),
-  dayWidth: props.dayWidth,
+  dayWidth: () => props.dayWidth,
   onMoved: (taskId, newDate, startMinutes) => props.onTaskMoved(taskId, newDate, startMinutes),
   onClicked: (event) => emit('open', event),
   onResized: (taskId, durationMinutes) => props.onTaskResized(taskId, durationMinutes),
@@ -148,7 +148,7 @@ const {
   trackEl: trackRef,
   dayOffset: (d: Date) => props.dayOffset(d),
   dateFromX: (x: number) => props.dateFromX(x),
-  dayWidth: props.dayWidth,
+  dayWidth: () => props.dayWidth,
   onCreated: (date, startMinutes, durationMinutes) => props.onSlotCreate(date, startMinutes, durationMinutes),
 })
 
diff --git a/alfy-bot-frontend/src/features/calendar/ui/WeeklyCalendar.vue b/alfy-bot-frontend/src/features/calendar/ui/WeeklyCalendar.vue
index 9e82ff6..2110a52 100644
--- a/alfy-bot-frontend/src/features/calendar/ui/WeeklyCalendar.vue
+++ b/alfy-bot-frontend/src/features/calendar/ui/WeeklyCalendar.vue
@@ -1,102 +1,23 @@
-<template>
-  <div class="flex flex-col bg-card overflow-hidden">
-    <CalendarHeader
-      :label="rangeLabel"
-      @navigate="onNavigate"
-      @today="onToday"
-    />
-
-    <!-- Single scroll container for both axes -->
-    <div
-      ref="gridRef"
-      :class="['flex-1 min-h-0 overflow-auto select-none', grabCursor]"
-      @scroll="onScroll"
-      @mousedown="onGrabMouseDown"
-      @mousemove="onGrabMouseMove"
-      @mouseup="onGrabMouseUp"
-    >
-      <div :style="{ width: TRACK_WIDTH + GUTTER_WIDTH + 'px' }" class="relative">
-
-        <!-- Day headers: sticky top -->
-        <div class="sticky top-0 z-30 bg-card border-b border-border flex" style="height: 52px">
-          <div class="w-14 shrink-0 border-r border-border/40 sticky left-0 z-40 bg-card" />
-          <div class="relative" :style="{ width: TRACK_WIDTH + 'px', height: '52px' }">
-            <div
-              v-for="day in visibleDays"
-              :key="'h-' + day.toISOString()"
-              :class="[
-                'absolute top-0 text-center py-2 border-r border-border/40',
-                isToday(day) && 'bg-primary/5',
-              ]"
-              :style="{ left: dayOffset(day) + 'px', width: DAY_WIDTH + 'px', height: '52px' }"
-            >
-              <div class="text-[10px] uppercase text-muted-foreground">{{ formatDayHeader(day).dayName }}</div>
-              <div
-                :class="[
-                  'text-sm font-medium',
-                  isToday(day) && 'text-primary',
-                ]"
-              >
-                {{ formatDayHeader(day).dayNumber }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- All-day section: sticky below headers -->
-        <AllDaySection
-          :visible-days="visibleDays"
-          :day-offset="dayOffset"
-          :day-width="DAY_WIDTH"
-          :track-width="TRACK_WIDTH"
-          :events="calendarEvents"
-          @drop="onDrop"
-          @dragstart="onDragStart"
-          @open="onEventOpen"
-          @materialize="onMaterialize"
-        />
-
-        <!-- Hour grid -->
-        <HourGrid
-          :visible-days="visibleDays"
-          :day-offset="dayOffset"
-          :date-from-x="dateFromX"
-          :day-width="DAY_WIDTH"
-          :track-width="TRACK_WIDTH"
-          :events="calendarEvents"
-          :grid-ref="gridRef"
-          :on-task-moved="onTaskMoved"
-          :on-task-resized="onTaskResized"
-          :on-slot-create="onSlotCreate"
-          @drop="onDrop"
-          @open="onEventOpen"
-          @toggle="onToggleTask"
-          @materialize="onMaterialize"
-        />
-
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { useTaskStore } from '@/features/tasks/model/task-store'
-import { useRecurringReschedule } from '@/features/tasks/lib/use-recurring-reschedule'
+import type { CalendarDropPayload, CalendarEvent, CalendarViewMode } from '../model/types'
+import { useElementSize } from '@vueuse/core'
+import { addDays, startOfDay } from 'date-fns'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { useConfirm } from '@/composables/useConfirm'
+import { useRecurringReschedule } from '@/features/tasks/lib/use-recurring-reschedule'
+import { useTaskStore } from '@/features/tasks/model/task-store'
 import { tasksToCalendarEvents } from '../lib/calendar-events'
-import { isToday, formatDayHeader, formatDateRange, getWeekStart, navigateWeek } from '../lib/week'
 import { useCalendarDnd } from '../lib/use-calendar-dnd'
-import { useInfiniteDays, DAY_WIDTH, TRACK_WIDTH, GUTTER_WIDTH } from '../lib/use-infinite-days'
 import { useGrabScroll } from '../lib/use-grab-scroll'
-import type { CalendarEvent, CalendarDropPayload } from '../model/types'
-import CalendarHeader from './CalendarHeader.vue'
+import { DAY_WIDTH, GUTTER_WIDTH, TRACK_WIDTH, useInfiniteDays } from '../lib/use-infinite-days'
+import { formatDateRange, formatDayHeader, formatDayTitle, getWeekStart, isToday, navigateWeek } from '../lib/week'
 import AllDaySection from './AllDaySection.vue'
+import CalendarHeader from './CalendarHeader.vue'
 import HourGrid from './HourGrid.vue'
 
 const emit = defineEmits<{
   'open-task': [task: import('@/features/tasks/model/types').Task]
-  'create-task': [payload: { date: Date; startMinutes: number; durationMinutes: number }]
+  'create-task': [payload: { date: Date, startMinutes: number, durationMinutes: number }]
 }>()
 
 const taskStore = useTaskStore()
@@ -105,38 +26,121 @@ const { rescheduleDueDate } = useRecurringReschedule()
 const { confirm } = useConfirm()
 
 const gridRef = ref<HTMLElement | null>(null)
-const { visibleDays, dateRange, dayOffset, dateFromX, scrollToDate, onScroll } = useInfiniteDays(gridRef)
+const viewMode = ref<CalendarViewMode>('week')
+const selectedDate = ref(startOfDay(new Date()))
+const isDayView = computed(() => viewMode.value === 'day')
+
+const {
+  visibleDays: weekDays,
+  dateRange,
+  centerDate,
+  dayOffset: weekDayOffset,
+  dateFromX: weekDateFromX,
+  scrollToDate,
+  onScroll: onWeekScroll,
+} = useInfiniteDays(gridRef)
+const { width: gridWidth } = useElementSize(gridRef)
 const {
-  grabbing, ctrlHeld,
+  grabbing,
+  ctrlHeld,
   onMouseDown: onGrabMouseDown,
   onMouseMove: onGrabMouseMove,
   onMouseUp: onGrabMouseUp,
 } = useGrabScroll(gridRef)
 
+const dayColumnWidth = computed(() => Math.max(200, (gridWidth.value || 800) - GUTTER_WIDTH))
+const dayWidth = computed(() => isDayView.value ? dayColumnWidth.value : DAY_WIDTH)
+const trackWidth = computed(() => isDayView.value ? dayColumnWidth.value : TRACK_WIDTH)
+
+const visibleDays = computed(() =>
+  isDayView.value ? [selectedDate.value] : weekDays.value,
+)
+
+function dayOffset(date: Date): number {
+  if (isDayView.value)
+    return 0
+  return weekDayOffset(date)
+}
+
+function dateFromX(x: number): Date {
+  if (isDayView.value)
+    return selectedDate.value
+  return weekDateFromX(x)
+}
+
+function onScroll() {
+  if (isDayView.value)
+    return
+  onWeekScroll()
+}
+
 const grabCursor = computed(() => {
-  if (grabbing.value) return 'cursor-grabbing'
-  if (ctrlHeld.value) return 'cursor-grab'
+  if (grabbing.value)
+    return 'cursor-grabbing'
+  if (ctrlHeld.value)
+    return 'cursor-grab'
   return ''
 })
 
-const rangeLabel = computed(() => formatDateRange(dateRange.value.start, dateRange.value.end))
+const rangeLabel = computed(() => {
+  if (isDayView.value)
+    return formatDayTitle(selectedDate.value)
+  return formatDateRange(dateRange.value.start, dateRange.value.end)
+})
 
 const calendarEvents = computed(() => {
   const days = visibleDays.value
-  if (days.length === 0) return []
+  if (days.length === 0)
+    return []
   const start = days[0]!
   const end = new Date(days[days.length - 1]!)
   end.setHours(23, 59, 59, 999)
   return tasksToCalendarEvents(taskStore.tasks, start, end)
 })
 
+function scrollToCurrentHour() {
+  if (!gridRef.value)
+    return
+  const hour = new Date().getHours()
+  gridRef.value.scrollTop = Math.max(0, (hour - 1) * 60)
+}
+
+function onViewModeChange(mode: CalendarViewMode) {
+  if (mode === 'day') {
+    selectedDate.value = startOfDay(centerDate.value)
+  }
+  viewMode.value = mode
+  nextTick(() => {
+    if (!gridRef.value)
+      return
+    if (mode === 'day') {
+      gridRef.value.scrollLeft = 0
+      if (isToday(selectedDate.value))
+        scrollToCurrentHour()
+    }
+    else {
+      scrollToDate(selectedDate.value)
+    }
+  })
+}
+
 function onNavigate(direction: number) {
+  if (isDayView.value) {
+    selectedDate.value = addDays(selectedDate.value, direction)
+    return
+  }
   const currentWeekStart = getWeekStart(dateRange.value.start)
   scrollToDate(navigateWeek(currentWeekStart, direction), true)
 }
 
 function onToday() {
-  scrollToDate(new Date(), true)
+  const today = startOfDay(new Date())
+  if (isDayView.value) {
+    selectedDate.value = today
+    nextTick(scrollToCurrentHour)
+    return
+  }
+  scrollToDate(today, true)
 }
 
 function onDragStart(e: DragEvent, taskId: string) {
@@ -147,14 +151,17 @@ async function applyTaskMove(taskId: string, newDate: Date, startMinutes?: numbe
   const date = new Date(newDate)
   if (startMinutes !== undefined) {
     date.setHours(Math.floor(startMinutes / 60), startMinutes % 60, 0, 0)
-  } else {
+  }
+  else {
     date.setHours(0, 0, 0, 0)
   }
   try {
     const task = taskStore.tasks.find(t => t.id === taskId)
-    if (!task) return
+    if (!task)
+      return
     await rescheduleDueDate(task, date)
-  } catch (err) {
+  }
+  catch (err) {
     console.error('Ошибка перемещения задачи:', err)
   }
 }
@@ -166,7 +173,8 @@ async function onTaskMoved(taskId: string, newDate: Date, startMinutes: number)
 async function onTaskResized(taskId: string, durationMinutes: number) {
   try {
     await taskStore.updateTask(taskId, { durationMinutes }, false)
-  } catch (err) {
+  }
+  catch (err) {
     console.error('Ошибка изменения длительности:', err)
   }
 }
@@ -174,7 +182,8 @@ async function onTaskResized(taskId: string, durationMinutes: number) {
 async function onToggleTask(taskId: string) {
   try {
     await taskStore.toggleTask(taskId)
-  } catch (err) {
+  }
+  catch (err) {
     console.error('Ошибка переключения задачи:', err)
   }
 }
@@ -193,16 +202,19 @@ async function onMaterialize(event: CalendarEvent) {
     rememberKey: 'alfy:skip-materialize-confirm',
     rememberLabel: 'Больше не показывать',
   })
-  if (!ok) return
+  if (!ok)
+    return
   try {
     await taskStore.materializeOccurrence(event.taskId)
-  } catch (err) {
+  }
+  catch (err) {
     console.error('Ошибка проявления задачи:', err)
   }
 }
 
 function onDrop(payload: CalendarDropPayload) {
-  if (payload.isVirtual) return
+  if (payload.isVirtual)
+    return
   applyTaskMove(payload.taskId, payload.newDate, payload.startMinutes)
 }
 
@@ -216,3 +228,84 @@ onMounted(() => {
   }
 })
 </script>
+
+<template>
+  <div class="flex flex-col bg-card overflow-hidden">
+    <CalendarHeader
+      :label="rangeLabel"
+      :view-mode="viewMode"
+      @navigate="onNavigate"
+      @today="onToday"
+      @update:view-mode="onViewModeChange"
+    />
+
+    <!-- Single scroll container for both axes -->
+    <div
+      ref="gridRef"
+      class="flex-1 min-h-0 overflow-y-auto select-none" :class="[isDayView ? 'overflow-x-hidden' : 'overflow-x-auto', grabCursor]"
+      @scroll="onScroll"
+      @mousedown="onGrabMouseDown"
+      @mousemove="onGrabMouseMove"
+      @mouseup="onGrabMouseUp"
+    >
+      <div :style="{ width: `${trackWidth + GUTTER_WIDTH}px` }" class="relative">
+        <!-- Day headers: sticky top -->
+        <div class="sticky top-0 z-30 bg-card border-b border-border flex" style="height: 52px">
+          <div class="w-14 shrink-0 border-r border-border/40 sticky left-0 z-40 bg-card" />
+          <div class="relative" :style="{ width: `${trackWidth}px`, height: '52px' }">
+            <div
+              v-for="day in visibleDays"
+              :key="`h-${day.toISOString()}`"
+              class="absolute top-0 text-center py-2 border-r border-border/40" :class="[
+                isToday(day) && 'bg-primary/5',
+              ]"
+              :style="{ left: `${dayOffset(day)}px`, width: `${dayWidth}px`, height: '52px' }"
+            >
+              <div class="text-[10px] uppercase text-muted-foreground">
+                {{ formatDayHeader(day).dayName }}
+              </div>
+              <div
+                class="text-sm font-medium" :class="[
+                  isToday(day) && 'text-primary',
+                ]"
+              >
+                {{ formatDayHeader(day).dayNumber }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- All-day section: sticky below headers -->
+        <AllDaySection
+          :visible-days="visibleDays"
+          :day-offset="dayOffset"
+          :day-width="dayWidth"
+          :track-width="trackWidth"
+          :events="calendarEvents"
+          @drop="onDrop"
+          @dragstart="onDragStart"
+          @open="onEventOpen"
+          @materialize="onMaterialize"
+        />
+
+        <!-- Hour grid -->
+        <HourGrid
+          :visible-days="visibleDays"
+          :day-offset="dayOffset"
+          :date-from-x="dateFromX"
+          :day-width="dayWidth"
+          :track-width="trackWidth"
+          :events="calendarEvents"
+          :grid-ref="gridRef"
+          :on-task-moved="onTaskMoved"
+          :on-task-resized="onTaskResized"
+          :on-slot-create="onSlotCreate"
+          @drop="onDrop"
+          @open="onEventOpen"
+          @toggle="onToggleTask"
+          @materialize="onMaterialize"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/alfy-bot-frontend/tests/features/calendar/ui/CalendarHeader.spec.ts b/alfy-bot-frontend/tests/features/calendar/ui/CalendarHeader.spec.ts
new file mode 100644
index 0000000..1bab808
--- /dev/null
+++ b/alfy-bot-frontend/tests/features/calendar/ui/CalendarHeader.spec.ts
@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import CalendarHeader from '@/features/calendar/ui/CalendarHeader.vue'
+
+describe('calendarHeader', () => {
+  it('рендерит табы Неделя и День', () => {
+    const wrapper = mount(CalendarHeader, {
+      props: { label: '10–16 марта 2026', viewMode: 'week' },
+    })
+    const tabs = wrapper.findAll('[aria-label="Неделя"], [aria-label="День"]')
+    expect(tabs).toHaveLength(2)
+  })
+
+  it('подсвечивает активный вид', () => {
+    const wrapper = mount(CalendarHeader, {
+      props: { label: '14 марта 2026', viewMode: 'day' },
+    })
+    expect(wrapper.get('[aria-label="День"]').attributes('aria-pressed')).toBe('true')
+    expect(wrapper.get('[aria-label="Неделя"]').attributes('aria-pressed')).toBe('false')
+  })
+
+  it('эмитит update:viewMode при клике на День', async () => {
+    const wrapper = mount(CalendarHeader, {
+      props: { label: '10–16 марта 2026', viewMode: 'week' },
+    })
+    await wrapper.get('[aria-label="День"]').trigger('click')
+    expect(wrapper.emitted('update:viewMode')?.[0]).toEqual(['day'])
+  })
+
+  it('не эмитит при клике на уже активный таб', async () => {
+    const wrapper = mount(CalendarHeader, {
+      props: { label: '10–16 марта 2026', viewMode: 'week' },
+    })
+    await wrapper.get('[aria-label="Неделя"]').trigger('click')
+    expect(wrapper.emitted('update:viewMode')).toBeUndefined()
+  })
+})