diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76d879e5e..b507e0c18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,13 @@ Format: weekly entries grouped by feature area.
 
 ---
 
+## 2026-04-21 — Calendar Sidebar Typed Indicator Dots
+
+### Added
+- Show typed indicator dots on the right-sidebar mini-calendar when viewing the Calendar tab. Each day cell renders up to 3 side-by-side colored dots, one per item, with colors matching the item's visual type: purple for events, green for imported events, blue for tasks, pink for reminders, orange for snoozes. Days with more items than available slots prioritize diversity — one dot per unique type first, then filling remaining slots with duplicates. For example, a day with 3 events, 2 tasks, and 1 snooze shows one purple, one blue, and one orange dot rather than three purple dots. The Journal tab keeps its single emerald/amber activity-intensity dot unchanged, so switching tabs visibly changes what the sidebar tells you.
+
+---
+
 ## 2026-04-20 — Calendar Sync Triggers
 
 ### Fixed
diff --git a/apps/desktop/src/renderer/src/components/calendar/calendar-item-chip.tsx b/apps/desktop/src/renderer/src/components/calendar/calendar-item-chip.tsx
index ba6e21f9d..643a566e6 100644
--- a/apps/desktop/src/renderer/src/components/calendar/calendar-item-chip.tsx
+++ b/apps/desktop/src/renderer/src/components/calendar/calendar-item-chip.tsx
@@ -1,27 +1,21 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
+import { AlarmClock, Calendar, CalendarDays, CheckSquare3, NotificationSnooze } from '@/lib/icons'
+import { getEventBaseColor, getEventBgColor, getEventTextColor } from '@/lib/event-type-colors'
 import { formatTimeOfDay } from '@/lib/time-format'
 import type { ClockFormat } from '@/lib/time-format'
 import { cn } from '@/lib/utils'
 import type { CalendarProjectionItem } from '@/services/calendar-service'
 import type { AnchorRect } from './types'
 
-const CHIP_STYLES: Record<CalendarProjectionItem['visualType'], string> = {
-  event:
-    'border-[#D8B4FE] bg-[#FAF5FF] text-violet-800 dark:border-violet-500/30 dark:bg-violet-950/30 dark:text-violet-200',
-  task: 'border-[#BEDBFF] bg-[#EFF6FF] text-blue-800 dark:border-blue-500/30 dark:bg-blue-950/30 dark:text-blue-200',
-  reminder:
-    'border-[#B9F8CF] bg-[#F0FDF4] text-green-800 dark:border-green-500/30 dark:bg-green-950/30 dark:text-green-200',
-  snooze:
-    'border-[#FFD6A7] bg-[#FFF7ED] text-orange-800 dark:border-orange-500/30 dark:bg-orange-950/30 dark:text-orange-200',
-  external_event: 'border-border bg-surface text-muted-foreground'
-}
-
-const INVERTED_CHIP_STYLES: Record<CalendarProjectionItem['visualType'], string> = {
-  event: 'bg-[#9810FA] text-white dark:bg-[#C4B5FD] dark:text-[#1a1625]',
-  task: 'bg-[#155DFC] text-white dark:bg-[#93C5FD] dark:text-[#051833]',
-  reminder: 'bg-[#FCCEE8] text-white dark:bg-[#FCA5A5] dark:text-[#5c1a2f]',
-  snooze: 'bg-[#F54900] text-white dark:bg-[#FDBA74] dark:text-[#6b2e0f]',
-  external_event: 'bg-[#00A63E] text-white dark:bg-[#86EFAC] dark:text-[#051a0a]'
+const VISUAL_TYPE_ICONS: Record<
+  CalendarProjectionItem['visualType'],
+  React.ComponentType<{ className?: string }>
+> = {
+  event: CalendarDays,
+  task: CheckSquare3,
+  reminder: AlarmClock,
+  snooze: NotificationSnooze,
+  external_event: Calendar
 }
 
 interface CalendarItemChipProps {
@@ -44,11 +38,24 @@ export function CalendarItemChip({
   onDeleteItem
 }: CalendarItemChipProps): React.JSX.Element {
   const timeLabel = item.isAllDay ? 'All day' : formatTimeOfDay(new Date(item.startAt), clockFormat)
+  const VisualIcon = VISUAL_TYPE_ICONS[item.visualType]
   const deletable = Boolean(onDeleteItem) && canDeleteEvent(item)
   const cls = cn(
-    'flex h-full w-full items-start justify-between gap-0.5 rounded-[6px] border px-1 py-0.5 text-left transition-colors @xl:px-2 @xl:py-1',
-    isSelected ? INVERTED_CHIP_STYLES[item.visualType] : CHIP_STYLES[item.visualType],
-    (onClick || deletable) && 'cursor-pointer hover:brightness-95'
+    'flex h-full w-full items-start justify-between gap-0.5 rounded-[6px] px-1 py-0.5 text-left transition-[filter] @xl:px-2 @xl:py-1',
+    (onClick || deletable) && 'cursor-pointer hover:brightness-100'
+  )
+  const chipStyle = useMemo<React.CSSProperties>(
+    () =>
+      isSelected
+        ? {
+          backgroundColor: getEventBaseColor(item.visualType),
+          color: '#FFFFFF'
+        }
+        : {
+          backgroundColor: getEventBgColor(item.visualType),
+          color: getEventTextColor(item.visualType)
+        },
+    [item.visualType, isSelected]
   )
 
   const handleContextMenu = useCallback(
@@ -69,6 +76,7 @@ export function CalendarItemChip({
 
   const content = (
     <>
+      <VisualIcon className="mt-0.5 size-3 shrink-0" />
       <span className="flex-1 truncate text-xs font-semibold leading-[18px]">{item.title}</span>
       <span className="hidden shrink-0 text-xs leading-[18px] opacity-75 @xl:inline">
         {timeLabel}
@@ -81,6 +89,7 @@ export function CalendarItemChip({
       <button
         type="button"
         className={cls}
+        style={chipStyle}
         onClick={(event) => {
           const rect = event.currentTarget.getBoundingClientRect()
           onClick?.(item, {
@@ -99,7 +108,7 @@ export function CalendarItemChip({
   }
 
   return (
-    <div className={cls} data-visual-type={item.visualType}>
+    <div className={cls} style={chipStyle} data-visual-type={item.visualType}>
       {content}
     </div>
   )
diff --git a/apps/desktop/src/renderer/src/components/calendar/calendar-year-view.tsx b/apps/desktop/src/renderer/src/components/calendar/calendar-year-view.tsx
index 9b0bd8980..d383cba00 100644
--- a/apps/desktop/src/renderer/src/components/calendar/calendar-year-view.tsx
+++ b/apps/desktop/src/renderer/src/components/calendar/calendar-year-view.tsx
@@ -11,6 +11,7 @@ import {
   toLocalDateKey,
   toLocalDateString
 } from './date-utils'
+import { EVENT_TYPE_COLORS } from '@/lib/event-type-colors'
 import type { CalendarProjectionItem } from '@/services/calendar-service'
 import type { CalendarWorkspaceView } from './calendar-toolbar'
 import type { AnchorRect } from './types'
@@ -18,14 +19,6 @@ import type { AnchorRect } from './types'
 const DAY_HEADERS = ['M', 'T', 'W', 'T', 'F', 'S', 'S']
 const CLICK_DELAY_MS = 250
 
-const DOT_COLORS: Record<CalendarProjectionItem['visualType'], string> = {
-  event: 'bg-violet-400',
-  task: 'bg-blue-400',
-  reminder: 'bg-green-400',
-  snooze: 'bg-orange-400',
-  external_event: 'bg-neutral-400'
-}
-
 function formatPopoverDate(day: string): string {
   return new Intl.DateTimeFormat(undefined, {
     weekday: 'long',
@@ -227,8 +220,10 @@ export function CalendarYearView({
                     }}
                   >
                     <span
-                      className={cn('size-2 shrink-0 rounded-full', DOT_COLORS[item.visualType])}
-                      style={item.source.color ? { backgroundColor: item.source.color } : undefined}
+                      className="size-2 shrink-0 rounded-full"
+                      style={{
+                        backgroundColor: item.source.color ?? EVENT_TYPE_COLORS[item.visualType]
+                      }}
                     />
                     <span className="flex-1 truncate text-xs text-foreground">{item.title}</span>
                     <span className="shrink-0 text-xs text-muted-foreground">
diff --git a/apps/desktop/src/renderer/src/components/calendar/day-dots.test.ts b/apps/desktop/src/renderer/src/components/calendar/day-dots.test.ts
new file mode 100644
index 000000000..2509414ec
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/calendar/day-dots.test.ts
@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest'
+
+import type { CalendarProjectionVisualType } from '@/services/calendar-service'
+
+import { buildDayDots, type DayDotsInput } from './day-dots'
+import { VISUAL_TYPE_META } from './visual-type-meta'
+
+function item(visualType: CalendarProjectionVisualType, startAt: string): DayDotsInput {
+  return { visualType, startAt }
+}
+
+const color = (type: CalendarProjectionVisualType): string => VISUAL_TYPE_META[type].dotColor
+
+describe('buildDayDots', () => {
+  it('returns an empty object for no items', () => {
+    // #given
+    const items: DayDotsInput[] = []
+    // #when
+    const result = buildDayDots(items)
+    // #then
+    expect(result).toEqual({})
+  })
+
+  it('renders a single dot for one event on one day', () => {
+    // #given
+    const items = [item('event', '2026-04-20T10:00:00.000Z')]
+    // #when
+    const result = buildDayDots(items)
+    // #then
+    expect(result).toEqual({ '2026-04-20': [color('event')] })
+  })
+
+  it('orders 2 tasks + 1 event as [event, task, task] by VISUAL_TYPE_ORDER', () => {
+    // #given
+    const items = [
+      item('task', '2026-04-20T09:00:00.000Z'),
+      item('task', '2026-04-20T15:00:00.000Z'),
+      item('event', '2026-04-20T12:00:00.000Z')
+    ]
+    // #when
+    const result = buildDayDots(items)
+    // #then
+    expect(result['2026-04-20']).toEqual([color('event'), color('task'), color('task')])
+  })
+
+  it('caps at 3 dots and drops lower-priority items when a day has 5 mixed items', () => {
+    // #given
+    const items = [
+      item('snooze', '2026-04-20T08:00:00.000Z'),
+      item('task', '2026-04-20T09:00:00.000Z'),
+      item('event', '2026-04-20T10:00:00.000Z'),
+      item('external_event', '2026-04-20T11:00:00.000Z'),
+      item('reminder', '2026-04-20T12:00:00.000Z')
+    ]
+    // #when
+    const result = buildDayDots(items)
+    // #then
+    expect(result['2026-04-20']).toEqual([color('event'), color('external_event'), color('task')])
+    expect(result['2026-04-20']).toHaveLength(3)
+  })
+
+  it('prefers uniqueness over count: 3 events + 2 tasks + 1 snooze renders one of each type', () => {
+    // #given
+    const items = [
+      item('event', '2026-04-20T08:00:00.000Z'),
+      item('event', '2026-04-20T09:00:00.000Z'),
+      item('event', '2026-04-20T10:00:00.000Z'),
+      item('task', '2026-04-20T11:00:00.000Z'),
+      item('task', '2026-04-20T12:00:00.000Z'),
+      item('snooze', '2026-04-20T13:00:00.000Z')
+    ]
+    // #when
+    const result = buildDayDots(items)
+    // #then
+    expect(result['2026-04-20']).toEqual([color('event'), color('task'), color('snooze')])
+  })
+
+  it('fills remaining slots with duplicates when fewer than 3 unique types exist', () => {
+    // #given — 5 tasks, 0 other types
+    const items = [
+      item('task', '2026-04-20T08:00:00.000Z'),
+      item('task', '2026-04-20T09:00:00.000Z'),
+      item('task', '2026-04-20T10:00:00.000Z'),
+      item('task', '2026-04-20T11:00:00.000Z'),
+      item('task', '2026-04-20T12:00:00.000Z')
+    ]
+    // #when
+    const result = buildDayDots(items)
+    // #then
+    expect(result['2026-04-20']).toEqual([color('task'), color('task'), color('task')])
+  })
+
+  it('buckets items into separate days via local date key, not UTC', () => {
+    // #given — in America/New_York (UTC-4 in April), 2026-04-20T23:00Z is 19:00 local
+    // and 2026-04-21T01:00Z is 21:00 local the same day.
+    // In UTC they are on different days; locally they are the same day.
+    const items = [
+      item('event', '2026-04-20T23:00:00.000Z'),
+      item('task', '2026-04-21T01:00:00.000Z')
+    ]
+    // #when
+    const result = buildDayDots(items)
+    // #then — both items bucket to whichever local date the runner is in.
+    // Assert: at least one bucket exists, total dots across all buckets equals 2,
+    // and buckets use YYYY-MM-DD keys.
+    const buckets = Object.values(result).flat()
+    expect(buckets).toHaveLength(2)
+    for (const key of Object.keys(result)) {
+      expect(key).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+    }
+  })
+
+  it('produces independent buckets for two distinct days', () => {
+    // #given
+    const items = [
+      item('event', '2026-04-20T12:00:00.000Z'),
+      item('task', '2026-04-22T12:00:00.000Z')
+    ]
+    // #when
+    const result = buildDayDots(items)
+    // #then
+    expect(Object.keys(result).sort()).toEqual(['2026-04-20', '2026-04-22'])
+    expect(result['2026-04-20']).toEqual([color('event')])
+    expect(result['2026-04-22']).toEqual([color('task')])
+  })
+})
diff --git a/apps/desktop/src/renderer/src/components/calendar/day-dots.ts b/apps/desktop/src/renderer/src/components/calendar/day-dots.ts
new file mode 100644
index 000000000..586eb8ec3
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/calendar/day-dots.ts
@@ -0,0 +1,54 @@
+import type { CalendarProjectionVisualType } from '@/services/calendar-service'
+
+import { toLocalDateKey } from './date-utils'
+import { VISUAL_TYPE_META, VISUAL_TYPE_ORDER } from './visual-type-meta'
+
+const MAX_DOTS_PER_DAY = 3
+
+export interface DayDotsInput {
+  visualType: CalendarProjectionVisualType
+  startAt: string
+}
+
+interface RankedItem {
+  visualType: CalendarProjectionVisualType
+  intraTypeRank: number
+}
+
+function rankItemsWithinTypes(bucket: readonly DayDotsInput[]): RankedItem[] {
+  const seenCount = new Map<CalendarProjectionVisualType, number>()
+  return bucket.map((entry) => {
+    const intraTypeRank = seenCount.get(entry.visualType) ?? 0
+    seenCount.set(entry.visualType, intraTypeRank + 1)
+    return { visualType: entry.visualType, intraTypeRank }
+  })
+}
+
+function pickDotsForBucket(bucket: readonly DayDotsInput[]): string[] {
+  const ranked = rankItemsWithinTypes(bucket)
+  ranked.sort((a, b) => {
+    if (a.intraTypeRank !== b.intraTypeRank) return a.intraTypeRank - b.intraTypeRank
+    return VISUAL_TYPE_ORDER.indexOf(a.visualType) - VISUAL_TYPE_ORDER.indexOf(b.visualType)
+  })
+  return ranked
+    .slice(0, MAX_DOTS_PER_DAY)
+    .map((entry) => VISUAL_TYPE_META[entry.visualType].dotColor)
+}
+
+export function buildDayDots(items: readonly DayDotsInput[]): Record<string, string[]> {
+  if (items.length === 0) return {}
+
+  const bucketed: Record<string, DayDotsInput[]> = {}
+  for (const entry of items) {
+    const key = toLocalDateKey(entry.startAt)
+    const existing = bucketed[key]
+    bucketed[key] = existing ? [...existing, entry] : [entry]
+  }
+
+  const result: Record<string, string[]> = {}
+  for (const [key, bucket] of Object.entries(bucketed)) {
+    result[key] = pickDotsForBucket(bucket)
+  }
+
+  return result
+}
diff --git a/apps/desktop/src/renderer/src/components/calendar/visual-type-meta.ts b/apps/desktop/src/renderer/src/components/calendar/visual-type-meta.ts
index 8673c9ec5..ebe9b5127 100644
--- a/apps/desktop/src/renderer/src/components/calendar/visual-type-meta.ts
+++ b/apps/desktop/src/renderer/src/components/calendar/visual-type-meta.ts
@@ -1,41 +1,37 @@
+import { EVENT_TYPE_COLORS } from '@/lib/event-type-colors'
 import type { CalendarProjectionVisualType } from '@/services/calendar-service'
 
 interface VisualTypeMeta {
   label: string
   swatchColor: string
-  chipClassName: string
+  dotColor: string
 }
 
 export const VISUAL_TYPE_META: Record<CalendarProjectionVisualType, VisualTypeMeta> = {
   event: {
     label: 'Event',
-    swatchColor: '#FAF5FF',
-    chipClassName:
-      'bg-[#FAF5FF] text-[#9810FA] border border-[#E9D4FF] dark:bg-[#6A34C821] dark:text-[#C4B5FD] dark:border-[#A78BFA47]'
+    swatchColor: EVENT_TYPE_COLORS.event,
+    dotColor: EVENT_TYPE_COLORS.event
   },
   external_event: {
     label: 'Imported event',
-    swatchColor: '#F0FDF4',
-    chipClassName:
-      'bg-[#F0FDF4] text-[#00A63E] border border-[#B9F8CF] dark:bg-[#4ADE801A] dark:text-[#86EFAC] dark:border-[#4ADE803D]'
+    swatchColor: EVENT_TYPE_COLORS.external_event,
+    dotColor: EVENT_TYPE_COLORS.external_event
   },
   task: {
     label: 'Task',
-    swatchColor: '#EFF6FF',
-    chipClassName:
-      'bg-[#EFF6FF] text-[#155DFC] border border-[#BEDBFF] dark:bg-[#60A5FA1A] dark:text-[#93C5FD] dark:border-[#60A5FA38]'
+    swatchColor: EVENT_TYPE_COLORS.task,
+    dotColor: EVENT_TYPE_COLORS.task
   },
   reminder: {
     label: 'Reminder',
-    swatchColor: '#FDF2F8',
-    chipClassName:
-      'bg-[#FDF2F8] text-[#FCCEE8] border border-[#FCCEE8] dark:bg-[#EF44441A] dark:text-[#FCA5A5] dark:border-[#EF44443D]'
+    swatchColor: EVENT_TYPE_COLORS.reminder,
+    dotColor: EVENT_TYPE_COLORS.reminder
   },
   snooze: {
     label: 'Snooze',
-    swatchColor: '#FFF7ED',
-    chipClassName:
-      'bg-[#FFF7ED] text-[#F54900] border border-[#FFD6A7] dark:bg-[#FB923C1A] dark:text-[#FDBA74] dark:border-[#FB923C3D]'
+    swatchColor: EVENT_TYPE_COLORS.snooze,
+    dotColor: EVENT_TYPE_COLORS.snooze
   }
 }
 
diff --git a/apps/desktop/src/renderer/src/components/day-panel/global-day-panel.tsx b/apps/desktop/src/renderer/src/components/day-panel/global-day-panel.tsx
index 6ac0c80b3..0fdcc0e9d 100644
--- a/apps/desktop/src/renderer/src/components/day-panel/global-day-panel.tsx
+++ b/apps/desktop/src/renderer/src/components/day-panel/global-day-panel.tsx
@@ -19,9 +19,9 @@ import {
 import {
   addLocalDays,
   getMonthGridDays,
-  toLocalDateKey,
   toStartOfLocalDayIso
 } from '@/components/calendar/date-utils'
+import { buildDayDots } from '@/components/calendar/day-dots'
 import { formatDateToISO, parseISODate, getTodayString } from '@/lib/journal-utils'
 
 interface GlobalDayPanelProps {
@@ -118,16 +118,7 @@ export function GlobalDayPanel({ className }: GlobalDayPanelProps) {
     return map
   }, [heatmapData])
 
-  const eventActivityData = useMemo(() => {
-    const map: Record<string, number> = {}
-    for (const item of eventItems) {
-      const key = toLocalDateKey(item.startAt)
-      map[key] = Math.min(4, (map[key] ?? 0) + 1)
-    }
-    return map
-  }, [eventItems])
-
-  const calendarActivityData = isCalendarTabActive ? eventActivityData : journalActivityData
+  const dayDotsData = useMemo(() => buildDayDots(eventItems), [eventItems])
 
   const navigateToJournal = useCallback(
     (date: string) => {
@@ -217,7 +208,8 @@ export function GlobalDayPanel({ className }: GlobalDayPanelProps) {
             <DatePickerCalendar
               selected={selectedDateObj}
               onSelect={handleDateSelect}
-              activityData={calendarActivityData}
+              activityData={isCalendarTabActive ? undefined : journalActivityData}
+              dayDots={isCalendarTabActive ? dayDotsData : undefined}
               className="w-full"
               showWeekNumbers
               onTodayClick={handleTodayClick}
diff --git a/apps/desktop/src/renderer/src/components/inbox/triage-snooze-picker.tsx b/apps/desktop/src/renderer/src/components/inbox/triage-snooze-picker.tsx
index c52cad461..5f8372e64 100644
--- a/apps/desktop/src/renderer/src/components/inbox/triage-snooze-picker.tsx
+++ b/apps/desktop/src/renderer/src/components/inbox/triage-snooze-picker.tsx
@@ -1,4 +1,4 @@
-import { Clock, Calendar } from '@/lib/icons'
+import { NotificationSnooze, Calendar } from '@/lib/icons'
 import { quickSnoozePresets, type SnoozePreset } from '@/components/snooze/snooze-presets'
 
 interface TriageSnoozPickerProps {
@@ -19,7 +19,7 @@ export function TriageSnoozePicker({
   return (
     <div className="flex flex-col gap-2 rounded-xl border border-foreground/[0.08] bg-card p-4">
       <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
-        <Clock className="size-3.5" />
+        <NotificationSnooze className="size-3.5" />
         <span>Snooze until…</span>
       </div>
 
diff --git a/apps/desktop/src/renderer/src/components/journal/journal-day-panel.tsx b/apps/desktop/src/renderer/src/components/journal/journal-day-panel.tsx
index a9c57bfc1..23089b44d 100644
--- a/apps/desktop/src/renderer/src/components/journal/journal-day-panel.tsx
+++ b/apps/desktop/src/renderer/src/components/journal/journal-day-panel.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { cn } from '@/lib/utils'
 import { useCalendarRange } from '@/hooks/use-calendar-range'
+import { EVENT_TYPE_COLORS } from '@/lib/event-type-colors'
 import type { CalendarProjectionItem } from '@/services/calendar-service'
 import {
   tasksService,
@@ -49,14 +50,6 @@ interface ScheduleEvent {
   color: string
 }
 
-const VISUAL_TYPE_COLORS = {
-  event: '#5E6AD2',
-  task: '#8B5CF6',
-  reminder: '#F97316',
-  snooze: '#06B6D4',
-  external_event: '#2563eb'
-} as const
-
 function getDayRange(date: string): { startAt: string; endAt: string } {
   const start = new Date(`${date}T00:00:00.000Z`)
   const end = new Date(start)
@@ -84,7 +77,7 @@ function formatScheduleDuration(
   startAt: string,
   endAt: string | null,
   isAllDay: boolean,
-  visualType: keyof typeof VISUAL_TYPE_COLORS
+  visualType: CalendarProjectionItem['visualType']
 ): string {
   if (isAllDay) {
     return 'All day'
@@ -127,7 +120,7 @@ function toScheduleEvent(item: CalendarProjectionItem): ScheduleEvent {
     time: formatScheduleTime(item.startAt, item.isAllDay),
     title: item.title,
     duration: formatScheduleDuration(item.startAt, item.endAt, item.isAllDay, item.visualType),
-    color: item.source.color ?? VISUAL_TYPE_COLORS[item.visualType]
+    color: item.source.color ?? EVENT_TYPE_COLORS[item.visualType]
   }
 }
 
diff --git a/apps/desktop/src/renderer/src/components/note/tags-row/tag-colors.ts b/apps/desktop/src/renderer/src/components/note/tags-row/tag-colors.ts
index 1fa819c46..caa4a1f51 100644
--- a/apps/desktop/src/renderer/src/components/note/tags-row/tag-colors.ts
+++ b/apps/desktop/src/renderer/src/components/note/tags-row/tag-colors.ts
@@ -43,12 +43,7 @@ export function getTagColors(colorName: string): TagColorConfig {
   return TAG_COLORS[colorName] || TAG_COLORS.stone
 }
 
-export function withAlpha(hex: string, opacity: number): string {
-  const alpha = Math.round(opacity * 255)
-    .toString(16)
-    .padStart(2, '0')
-  return `${hex}${alpha}`
-}
+export { withAlpha } from '@/lib/color'
 
 export function getRandomColor(): string {
   const index = Math.floor(Math.random() * COLOR_NAMES.length)
diff --git a/apps/desktop/src/renderer/src/components/tabs/tab-icon.tsx b/apps/desktop/src/renderer/src/components/tabs/tab-icon.tsx
index 8f229283c..f38140816 100644
--- a/apps/desktop/src/renderer/src/components/tabs/tab-icon.tsx
+++ b/apps/desktop/src/renderer/src/components/tabs/tab-icon.tsx
@@ -8,7 +8,7 @@ import { memo } from 'react'
 import {
   Inbox,
   Home,
-  ListChecks,
+  CheckSquare3,
   Star,
   Calendar,
   CheckCircle,
@@ -48,7 +48,7 @@ const ICON_COMPONENTS: Record<string, React.ComponentType<{ className?: string }
   // Core icons
   inbox: Inbox,
   home: Home,
-  'list-checks': ListChecks,
+  'list-checks': CheckSquare3,
   star: Star,
   calendar: Calendar,
   'check-circle': CheckCircle,
diff --git a/apps/desktop/src/renderer/src/components/tasks/date-picker-calendar.tsx b/apps/desktop/src/renderer/src/components/tasks/date-picker-calendar.tsx
index 6be5b7dac..7765214cd 100644
--- a/apps/desktop/src/renderer/src/components/tasks/date-picker-calendar.tsx
+++ b/apps/desktop/src/renderer/src/components/tasks/date-picker-calendar.tsx
@@ -14,6 +14,7 @@ interface DatePickerCalendarProps {
   disabled?: (date: Date) => boolean
   weekStartsOn?: 0 | 1
   activityData?: ActivityData
+  dayDots?: Record<string, string[]>
   className?: string
   showWeekNumbers?: boolean
   onTodayClick?: () => void
@@ -106,6 +107,7 @@ export function DatePickerCalendar({
   disabled,
   weekStartsOn = 1,
   activityData,
+  dayDots,
   className,
   showWeekNumbers = false,
   onTodayClick
@@ -249,7 +251,9 @@ export function DatePickerCalendar({
             const isToday = isSameDay(date, today)
             const isSelected = selected ? isSameDay(date, selected) : false
             const isDisabled = disabled?.(date) ?? false
-            const activity = activityData ? (activityData[toISO(date)] ?? 0) : 0
+            const isoKey = toISO(date)
+            const activity = activityData ? (activityData[isoKey] ?? 0) : 0
+            const dots = dayDots?.[isoKey]
 
             return (
               <button
@@ -292,11 +296,23 @@ export function DatePickerCalendar({
                 aria-disabled={isDisabled}
               >
                 {date.getDate()}
-                {activity > 0 && (
-                  <span
-                    className={cn('size-1 rounded-full', ACTIVITY_DOT_COLORS[activity])}
-                    aria-hidden="true"
-                  />
+                {dots && dots.length > 0 ? (
+                  <span className="inline-flex gap-[2px]" aria-hidden="true">
+                    {dots.slice(0, 3).map((dotColor, i) => (
+                      <span
+                        key={`${dotColor}-${i}`}
+                        className="size-1 rounded-full"
+                        style={{ backgroundColor: dotColor }}
+                      />
+                    ))}
+                  </span>
+                ) : (
+                  activity > 0 && (
+                    <span
+                      className={cn('size-1 rounded-full', ACTIVITY_DOT_COLORS[activity])}
+                      aria-hidden="true"
+                    />
+                  )
                 )}
               </button>
             )
diff --git a/apps/desktop/src/renderer/src/lib/color.ts b/apps/desktop/src/renderer/src/lib/color.ts
new file mode 100644
index 000000000..a3eab0afb
--- /dev/null
+++ b/apps/desktop/src/renderer/src/lib/color.ts
@@ -0,0 +1,6 @@
+export function withAlpha(hex: string, opacity: number): string {
+  const alpha = Math.round(opacity * 255)
+    .toString(16)
+    .padStart(2, '0')
+  return `${hex}${alpha}`
+}
diff --git a/apps/desktop/src/renderer/src/lib/event-type-colors.ts b/apps/desktop/src/renderer/src/lib/event-type-colors.ts
new file mode 100644
index 000000000..048933e03
--- /dev/null
+++ b/apps/desktop/src/renderer/src/lib/event-type-colors.ts
@@ -0,0 +1,26 @@
+import type { CalendarProjectionItem } from '@/services/calendar-service'
+import { withAlpha } from './color'
+
+type VisualType = CalendarProjectionItem['visualType']
+
+export const EVENT_BG_OPACITY = 0.2
+
+export const EVENT_TYPE_COLORS: Record<VisualType, string> = {
+  event: '#9FE1E7',
+  task: '#1EB06D',
+  reminder: '#1BADF8',
+  snooze: '#7BD148',
+  external_event: '#9A9CFF'
+}
+
+export function getEventBaseColor(type: VisualType): string {
+  return EVENT_TYPE_COLORS[type]
+}
+
+export function getEventBgColor(type: VisualType): string {
+  return withAlpha(EVENT_TYPE_COLORS[type], EVENT_BG_OPACITY)
+}
+
+export function getEventTextColor(type: VisualType): string {
+  return EVENT_TYPE_COLORS[type]
+}
diff --git a/apps/desktop/src/renderer/src/lib/icons/icon-map.ts b/apps/desktop/src/renderer/src/lib/icons/icon-map.ts
index b9571f64a..315c5cc59 100644
--- a/apps/desktop/src/renderer/src/lib/icons/icon-map.ts
+++ b/apps/desktop/src/renderer/src/lib/icons/icon-map.ts
@@ -152,6 +152,7 @@ import {
   CheckmarkCircle01Icon,
   CheckmarkCircle02Icon,
   CheckmarkSquare01Icon,
+  CheckmarkSquare03Icon,
   ClipboardPasteIcon,
   CloudAngledRainIcon,
   ColorsIcon,
@@ -197,6 +198,7 @@ import {
   NeuralNetworkIcon,
   NextIcon,
   Notification01Icon,
+  NotificationSnooze01Icon,
   NodeMoveDownIcon,
   NodeMoveUpIcon,
   PanelLeftIcon,
@@ -329,6 +331,7 @@ export const Timer = createIcon(Timer01Icon)
 export const AlarmClock = createIcon(AlarmClockIcon)
 export const Bell = createIcon(Notification01Icon)
 export const BellRing = createIcon(BellDotIcon)
+export const NotificationSnooze = createIcon(NotificationSnooze01Icon)
 export const Tag = createIcon(Tag01Icon)
 export const Tags = createIcon(TagsIcon)
 export const Flag = createIcon(Flag01Icon)
@@ -447,6 +450,7 @@ export const Check = createIcon(Tick01Icon)
 export const CheckCircle = createIcon(CheckmarkCircle01Icon)
 export const CheckCircle2 = createIcon(CheckmarkCircle02Icon)
 export const CheckSquare = createIcon(CheckmarkSquare01Icon)
+export const CheckSquare3 = createIcon(CheckmarkSquare03Icon)
 export const X = createIcon(Cancel01Icon)
 export const XCircle = createIcon(CancelCircleIcon)
 export const AlertCircle = createIcon(AlertCircleIcon)