diff --git a/.bazelrc b/.bazelrc
index 004bf062a0a9..390eeb762a26 100644
--- a/.bazelrc
+++ b/.bazelrc
@@ -8,6 +8,7 @@ test --test_output=errors
 build --show_result=20
 build --reuse_sandbox_directories
 build --nolegacy_external_runfiles
+build --incompatible_strict_action_env
 build --noexperimental_check_output_files --experimental_allow_tags_propagation
 fetch --noexperimental_check_output_files --experimental_allow_tags_propagation
 query --noexperimental_check_output_files --experimental_allow_tags_propagation
diff --git a/MODULE.bazel.lock b/MODULE.bazel.lock
index 8475a0064e2f..743512e24c1d 100644
--- a/MODULE.bazel.lock
+++ b/MODULE.bazel.lock
@@ -616,7 +616,7 @@
     },
     "@@rules_rust+//crate_universe:extension.bzl%crate": {
       "general": {
-        "bzlTransitiveDigest": "2bm8JGpVfTeP2/OEWLfaiC0BppLkZjpmq45/K90H3Zw=",
+        "bzlTransitiveDigest": "hCuKz2FMeqFDuYQoH1d3ptMTfAOR4t1WTwnn+cqGoWc=",
         "usagesDigest": "jdSuIdTp7Rqi17ioQocHd+ejglFQ3z+AyEWLmlCK/og=",
         "recordedFileInputs": {
           "@@rules_rust++rust_host_tools+rust_host_tools//bin/rustc": "241027b94ad67beb36d0356f7cc05180daaa9966b2958cfba1d4de089d2e521c",
diff --git a/app/common/package.json b/app/common/package.json
index fdd5227dd804..d5fb7e21cb8d 100644
--- a/app/common/package.json
+++ b/app/common/package.json
@@ -26,6 +26,7 @@
     "@tanstack/vue-query": "5.59.20"
   },
   "dependencies": {
+    "@internationalized/date": "3.7.0",
     "@tanstack/query-persist-client-core": "5.59.20",
     "@tanstack/vue-query": "5.59.20",
     "@types/node": "^20.11.21",
diff --git a/app/common/src/services/Backend.ts b/app/common/src/services/Backend.ts
index be64fc96e295..8032b70d3c04 100644
--- a/app/common/src/services/Backend.ts
+++ b/app/common/src/services/Backend.ts
@@ -381,20 +381,20 @@ export type ProjectParallelMode = (typeof PROJECT_PARALLEL_MODES)[number]
 
 export const PROJECT_EXECUTION_REPEAT_TYPES = [
   'none',
-  'hourly',
   'daily',
-  'monthly-date',
-  'monthly-weekday',
-  'monthly-last-weekday',
+  'weekly',
+  'monthlyDate',
+  'monthlyWeekday',
+  'monthlyLastWeekday',
 ] as const
 
 export const PROJECT_EXECUTION_REPEAT_TYPE_TO_TEXT_ID = {
   none: 'noneProjectExecutionRepeatType',
-  hourly: 'hourlyProjectExecutionRepeatType',
   daily: 'dailyProjectExecutionRepeatType',
-  'monthly-date': 'monthlyProjectExecutionRepeatType',
-  'monthly-weekday': 'monthlyProjectExecutionRepeatType',
-  'monthly-last-weekday': 'monthlyProjectExecutionRepeatType',
+  weekly: 'weeklyProjectExecutionRepeatType',
+  monthlyDate: 'monthlyProjectExecutionRepeatType',
+  monthlyWeekday: 'monthlyProjectExecutionRepeatType',
+  monthlyLastWeekday: 'monthlyProjectExecutionRepeatType',
 } satisfies {
   readonly [K in ProjectExecutionRepeatType]: TextId & `${string}ProjectExecutionRepeatType`
 }
@@ -407,22 +407,20 @@ export interface ProjectExecutionNoneRepeatInfo {
   readonly type: 'none'
 }
 
-/** Details for a project execution that repeats hourly. */
-export interface ProjectExecutionHourlyRepeatInfo {
-  readonly type: 'hourly'
-  readonly startHour: number
-  readonly endHour: number
-}
-
 /** Details for a project execution that repeats daily. */
 export interface ProjectExecutionDailyRepeatInfo {
   readonly type: 'daily'
+}
+
+/** Details for a project execution that repeats weekly on one or more days. */
+export interface ProjectExecutionWeeklyRepeatInfo {
+  readonly type: 'weekly'
   readonly daysOfWeek: readonly number[]
 }
 
 /** Details for a project execution that repeats monthly on a specific date. */
 export interface ProjectExecutionMonthlyDateRepeatInfo {
-  readonly type: 'monthly-date'
+  readonly type: 'monthlyDate'
   readonly date: number
   readonly months: readonly number[]
 }
@@ -432,7 +430,7 @@ export interface ProjectExecutionMonthlyDateRepeatInfo {
  * of a specific month.
  */
 export interface ProjectExecutionMonthlyWeekdayRepeatInfo {
-  readonly type: 'monthly-weekday'
+  readonly type: 'monthlyWeekday'
   readonly weekNumber: number
   readonly dayOfWeek: number
   readonly months: readonly number[]
@@ -443,14 +441,14 @@ export interface ProjectExecutionMonthlyWeekdayRepeatInfo {
  * of a specific month.
  */
 export interface ProjectExecutionMonthlyLastWeekdayRepeatInfo {
-  readonly type: 'monthly-last-weekday'
+  readonly type: 'monthlyLastWeekday'
   readonly dayOfWeek: number
   readonly months: readonly number[]
 }
 
 export type ProjectExecutionRepeatInfo =
-  | ProjectExecutionHourlyRepeatInfo
   | ProjectExecutionDailyRepeatInfo
+  | ProjectExecutionWeeklyRepeatInfo
   | ProjectExecutionMonthlyDateRepeatInfo
   | ProjectExecutionMonthlyWeekdayRepeatInfo
   | ProjectExecutionMonthlyLastWeekdayRepeatInfo
@@ -459,18 +457,21 @@ export type ProjectExecutionRepeatInfo =
 /** Metadata for a {@link ProjectExecution}. */
 export interface ProjectExecutionInfo {
   readonly projectId: ProjectId
-  readonly timeZone: string
   readonly repeat: ProjectExecutionRepeatInfo
-  readonly parallelMode: ProjectParallelMode
-  readonly maxDurationMinutes: number
   readonly startDate: dateTime.Rfc3339DateTime
+  readonly endDate: dateTime.Rfc3339DateTime | null
+  readonly timeZone: string
+  readonly maxDurationMinutes: number
+  readonly parallelMode: ProjectParallelMode
 }
 
 /** A specific execution schedule of a project. */
 export interface ProjectExecution extends ProjectExecutionInfo {
-  readonly enabled: boolean
   readonly executionId: ProjectExecutionId
+  readonly organizationId: OrganizationId
   readonly versionId: S3ObjectVersionId
+  readonly nextExecution: dateTime.Rfc3339DateTime
+  readonly projectSessions?: readonly ProjectSession[]
 }
 
 /** Metadata describing the location of an uploaded file. */
@@ -1824,6 +1825,10 @@ export default abstract class Backend {
     body: CreateProjectExecutionRequestBody,
     title: string,
   ): Promise<ProjectExecution>
+  abstract getProjectExecutionDetails(
+    executionId: ProjectExecutionId,
+    title: string,
+  ): Promise<ProjectExecution>
   abstract updateProjectExecution(
     executionId: ProjectExecutionId,
     body: UpdateProjectExecutionRequestBody,
diff --git a/app/common/src/services/Backend/__test__/projectExecution.test.ts b/app/common/src/services/Backend/__test__/projectExecution.test.ts
index 19201359d015..781aefc8bfdd 100644
--- a/app/common/src/services/Backend/__test__/projectExecution.test.ts
+++ b/app/common/src/services/Backend/__test__/projectExecution.test.ts
@@ -1,41 +1,23 @@
+import { ZonedDateTime } from '@internationalized/date'
 import * as v from 'vitest'
 import { toRfc3339 } from '../../../utilities/data/dateTime'
 import { ProjectExecutionInfo, ProjectId } from '../../Backend'
 import { firstProjectExecutionOnOrAfter, nextProjectExecutionDate } from '../projectExecution'
 
-const HOURLY_EXECUTION_1: ProjectExecutionInfo = {
-  projectId: ProjectId('project-aaaaaaaa'),
-  repeat: {
-    type: 'hourly',
-    startHour: 7,
-    endHour: 15,
-  },
-  startDate: toRfc3339(new Date(2020, 0, 1, 10, 59)),
-  timeZone: 'UTC',
-  maxDurationMinutes: 60,
-  parallelMode: 'ignore',
-}
+const TIME_ZONE = 'America/Los_Angeles'
+const TIME_ZONE_WINTER_OFFSET = -28800000
+const TIME_ZONE_SUMMER_OFFSET = -25200000
 
-const HOURLY_EXECUTION_2: ProjectExecutionInfo = {
+const WEEKLY_EXECUTION: ProjectExecutionInfo = {
   projectId: ProjectId('project-aaaaaaaa'),
   repeat: {
-    type: 'hourly',
-    startHour: 20,
-    endHour: 4,
-  },
-  startDate: toRfc3339(new Date(2015, 2, 8, 22, 33)),
-  timeZone: 'UTC',
-  maxDurationMinutes: 60,
-  parallelMode: 'ignore',
-}
-
-const DAILY_EXECUTION: ProjectExecutionInfo = {
-  projectId: ProjectId('project-aaaaaaaa'),
-  repeat: {
-    type: 'daily',
+    type: 'weekly',
     daysOfWeek: [0, 5],
   },
-  startDate: toRfc3339(new Date(2000, 0, 1, 7, 3)),
+  startDate: toRfc3339(
+    new ZonedDateTime(2000, 1, 1, TIME_ZONE, TIME_ZONE_WINTER_OFFSET, 7, 3).toDate(),
+  ),
+  endDate: null,
   timeZone: 'UTC',
   maxDurationMinutes: 60,
   parallelMode: 'ignore',
@@ -43,58 +25,45 @@ const DAILY_EXECUTION: ProjectExecutionInfo = {
 
 v.test.each([
   {
-    info: DAILY_EXECUTION,
-    current: new Date(2000, 5, 4, 7, 3),
-    next1: new Date(2000, 5, 9, 7, 3),
-    next2: new Date(2000, 5, 11, 7, 3),
-    next3: new Date(2000, 5, 16, 7, 3),
-  },
-  {
-    info: HOURLY_EXECUTION_1,
-    current: new Date(2022, 10, 21, 14, 59),
-    next1: new Date(2022, 10, 21, 15, 59),
-    next2: new Date(2022, 10, 22, 7, 59),
-    next3: new Date(2022, 10, 22, 8, 59),
-  },
-  {
-    info: HOURLY_EXECUTION_2,
-    current: new Date(2018, 4, 11, 3, 33),
-    next1: new Date(2018, 4, 11, 4, 33),
-    next2: new Date(2018, 4, 11, 20, 33),
-    next3: new Date(2018, 4, 11, 21, 33),
-  },
-  {
-    info: HOURLY_EXECUTION_2,
-    current: new Date(2018, 4, 11, 23, 33),
-    next1: new Date(2018, 4, 12, 0, 33),
-    next2: new Date(2018, 4, 12, 1, 33),
-    next3: new Date(2018, 4, 12, 2, 33),
+    info: WEEKLY_EXECUTION,
+    current: new ZonedDateTime(2000, 6, 4, TIME_ZONE, TIME_ZONE_SUMMER_OFFSET, 7, 3),
+    next1: new ZonedDateTime(2000, 6, 9, TIME_ZONE, TIME_ZONE_SUMMER_OFFSET, 7, 3),
+    next2: new ZonedDateTime(2000, 6, 11, TIME_ZONE, TIME_ZONE_SUMMER_OFFSET, 7, 3),
+    next3: new ZonedDateTime(2000, 6, 16, TIME_ZONE, TIME_ZONE_SUMMER_OFFSET, 7, 3),
   },
 ] satisfies readonly {
   info: ProjectExecutionInfo
-  current: Date
-  next1: Date
-  next2: Date
-  next3: Date
+  current: ZonedDateTime
+  next1: ZonedDateTime
+  next2: ZonedDateTime
+  next3: ZonedDateTime
 }[])(
   'Get next project execution date (current: $current)',
   ({ info, current, next1, next2, next3 }) => {
-    v.expect(nextProjectExecutionDate(info, current)).toStrictEqual(next1)
-    v.expect(nextProjectExecutionDate(info, next1)).toStrictEqual(next2)
-    v.expect(nextProjectExecutionDate(info, next2)).toStrictEqual(next3)
+    v.expect(nextProjectExecutionDate(info, current)?.toString()).toBe(next1.toString())
+    v.expect(nextProjectExecutionDate(info, next1)?.toString()).toBe(next2.toString())
+    v.expect(nextProjectExecutionDate(info, next2)?.toString()).toBe(next3.toString())
   },
 )
 
 v.test.each([
-  { info: DAILY_EXECUTION, current: new Date(1999, 1, 1), next: new Date(2000, 0, 2, 7, 3) },
-  { info: DAILY_EXECUTION, current: new Date(2000, 10, 16), next: new Date(2000, 10, 17, 7, 3) },
+  {
+    info: WEEKLY_EXECUTION,
+    current: new ZonedDateTime(1999, 1, 1, TIME_ZONE, TIME_ZONE_WINTER_OFFSET),
+    next: new ZonedDateTime(2000, 1, 2, TIME_ZONE, TIME_ZONE_WINTER_OFFSET, 7, 3),
+  },
+  {
+    info: WEEKLY_EXECUTION,
+    current: new ZonedDateTime(2000, 11, 16, TIME_ZONE, TIME_ZONE_WINTER_OFFSET),
+    next: new ZonedDateTime(2000, 11, 17, TIME_ZONE, TIME_ZONE_WINTER_OFFSET, 7, 3),
+  },
 ] satisfies readonly {
   info: ProjectExecutionInfo
-  current: Date
-  next: Date
+  current: ZonedDateTime
+  next: ZonedDateTime
 }[])(
   'Get first project execution date on or after (current: $current)',
   ({ info, current, next }) => {
-    v.expect(firstProjectExecutionOnOrAfter(info, current)).toStrictEqual(next)
+    v.expect(firstProjectExecutionOnOrAfter(info, current).toString()).toBe(next.toString())
   },
 )
diff --git a/app/common/src/services/Backend/projectExecution.ts b/app/common/src/services/Backend/projectExecution.ts
index 9c092571db20..442384bf5444 100644
--- a/app/common/src/services/Backend/projectExecution.ts
+++ b/app/common/src/services/Backend/projectExecution.ts
@@ -1,160 +1,135 @@
+import { ZonedDateTime, parseAbsolute } from '@internationalized/date'
 import { EMPTY_ARRAY } from '../../utilities/data/array'
+import { DAYS_PER_WEEK, MONTHS_PER_YEAR, getDay } from '../../utilities/data/dateTime'
 import { ProjectExecutionInfo } from '../Backend'
 
-const DAYS_PER_WEEK = 7
-const MONTHS_PER_YEAR = 12
+/** Positive modulo of the number with respect to the base. */
+function remainder(n: number, mod: number) {
+  return ((n % mod) + mod) % mod
+}
 
 /** The first execution date of the given {@link ProjectExecution} on or after the given date. */
 export function firstProjectExecutionOnOrAfter(
   projectExecution: ProjectExecutionInfo,
-  startDate: Date,
-): Date {
-  // TODO: Account for timezone.
-  let nextDate = new Date(startDate)
+  startDate: ZonedDateTime,
+): ZonedDateTime {
+  let nextDate = startDate
   const { repeat } = projectExecution
-  const executionStartDate = new Date(projectExecution.startDate)
-  if (nextDate < executionStartDate) {
-    nextDate = new Date(executionStartDate)
+  const executionStartDate = parseAbsolute(
+    new Date(projectExecution.startDate).toISOString(),
+    startDate.timeZone,
+  )
+  if (nextDate.compare(executionStartDate) < 0) {
+    nextDate = executionStartDate
   }
-  nextDate.setMinutes(executionStartDate.getMinutes())
-  if (repeat.type !== 'hourly') {
-    nextDate.setHours(executionStartDate.getHours())
+  nextDate = nextDate.set({
+    hour: executionStartDate.hour,
+    minute: executionStartDate.minute,
+    second: executionStartDate.second,
+  })
+  if (nextDate.compare(startDate) < 0) {
+    nextDate = nextDate.add({ days: 1 })
   }
   switch (repeat.type) {
-    case 'hourly': {
-      while (nextDate < startDate) {
-        nextDate.setHours(nextDate.getHours() + 1)
-      }
-      const currentHours = nextDate.getHours()
-      if (repeat.startHour < repeat.endHour) {
-        if (currentHours < repeat.startHour) {
-          nextDate.setHours(repeat.startHour)
-        } else if (currentHours > repeat.endHour) {
-          nextDate.setHours(repeat.startHour)
-          nextDate.setDate(nextDate.getDate() + 1)
-        }
-      } else {
-        if (currentHours > repeat.endHour && currentHours < repeat.startHour) {
-          nextDate.setHours(repeat.startHour)
-        }
-      }
-      break
+    case 'monthlyDate':
+    case 'monthlyWeekday': {
+      const currentMonth = nextDate.month
+      const month = repeat.months.find((month) => month >= currentMonth) ?? repeat.months[0] ?? 0
+      const monthOffset = remainder(month - currentMonth, MONTHS_PER_YEAR)
+      nextDate = nextDate.add({ months: monthOffset })
+    }
+  }
+  switch (repeat.type) {
+    case 'none': {
+      return parseAbsolute(projectExecution.startDate, startDate.timeZone)
     }
     case 'daily': {
-      const currentDay = nextDate.getDay()
+      break
+    }
+    case 'weekly': {
+      const currentDay = getDay(nextDate)
       const day = repeat.daysOfWeek.find((day) => day >= currentDay) ?? repeat.daysOfWeek[0] ?? 0
-      const dayOffset = (day - currentDay + DAYS_PER_WEEK) % DAYS_PER_WEEK
-      nextDate.setDate(nextDate.getDate() + dayOffset)
+      const dayOffset = remainder(day - currentDay, DAYS_PER_WEEK)
+      nextDate = nextDate.add({ days: dayOffset })
       break
     }
-    case 'monthly-weekday': {
-      const currentDate = nextDate.getDate()
-      nextDate.setDate(1)
-      nextDate.setDate(1 + (repeat.weekNumber - 1) * DAYS_PER_WEEK)
-      const currentDay = nextDate.getDay()
+    case 'monthlyWeekday': {
+      const currentDate = nextDate.day
+      nextDate = nextDate.set({ day: 1 + (repeat.weekNumber - 1) * DAYS_PER_WEEK })
+      const currentDay = getDay(nextDate)
       const dayOffset = (repeat.dayOfWeek - currentDay + 7) % 7
-      nextDate.setDate(nextDate.getDate() + dayOffset)
-      if (nextDate.getDate() < currentDate) {
-        nextDate.setDate(1)
-        nextDate.setMonth(nextDate.getMonth() + 1)
-        nextDate.setDate(1 + (repeat.weekNumber - 1) * DAYS_PER_WEEK)
-        const currentDay = nextDate.getDay()
+      nextDate = nextDate.add({ days: dayOffset })
+      if (nextDate.day < currentDate) {
+        nextDate = nextDate.set({ day: 1 })
+        nextDate = nextDate.add({ months: 1 })
+        nextDate = nextDate.set({ day: 1 + (repeat.weekNumber - 1) * DAYS_PER_WEEK })
+        const currentDay = getDay(nextDate)
         const dayOffset = (repeat.dayOfWeek - currentDay + 7) % 7
-        nextDate.setDate(nextDate.getDate() + dayOffset)
+        nextDate = nextDate.add({ days: dayOffset })
       }
       break
     }
-    case 'monthly-date': {
-      const currentDate = nextDate.getDate()
+    case 'monthlyDate': {
+      const currentDate = nextDate.day
       const date = repeat.date
       const goToNextMonth = date < currentDate
-      nextDate.setDate(date)
+      nextDate = nextDate.set({ day: date })
       if (goToNextMonth) {
-        const startMonth = nextDate.getMonth()
-        nextDate.setMonth(startMonth + 1)
-        if ((nextDate.getMonth() + MONTHS_PER_YEAR - startMonth) % MONTHS_PER_YEAR > 1) {
-          nextDate.setDate(0)
+        const startMonth = nextDate.month
+        nextDate = nextDate.add({ months: 1 })
+        if (remainder(nextDate.month - startMonth, MONTHS_PER_YEAR) > 1) {
+          nextDate = nextDate.set({ day: 1 })
         }
       }
       break
     }
   }
-  switch (repeat.type) {
-    case 'hourly':
-    case 'daily': {
-      break
-    }
-    case 'monthly-date':
-    case 'monthly-weekday': {
-      const currentMonth = nextDate.getMonth()
-      const month = repeat.months.find((month) => month >= currentMonth) ?? repeat.months[0] ?? 0
-      const monthOffset = (month - currentMonth + MONTHS_PER_YEAR) % MONTHS_PER_YEAR
-      nextDate.setMonth(nextDate.getMonth() + monthOffset)
-    }
-  }
   return nextDate
 }
 
 /** The next scheduled execution date of given {@link ProjectExecution}. */
-export function nextProjectExecutionDate(projectExecution: ProjectExecutionInfo, date: Date): Date {
-  // TODO: Account for timezone.
-  const nextDate = new Date(date)
+export function nextProjectExecutionDate(
+  projectExecution: ProjectExecutionInfo,
+  date: ZonedDateTime,
+): ZonedDateTime | null {
+  let nextDate = date
   const { repeat } = projectExecution
   switch (repeat.type) {
-    case 'hourly': {
-      nextDate.setHours(nextDate.getHours() + 1)
-      const currentHours = nextDate.getHours()
-      if (repeat.startHour < repeat.endHour) {
-        if (currentHours < repeat.startHour) {
-          nextDate.setHours(repeat.startHour)
-        } else if (currentHours > repeat.endHour) {
-          nextDate.setDate(nextDate.getDate() + 1)
-          nextDate.setHours(repeat.startHour)
-        }
-      } else {
-        if (currentHours > repeat.endHour && currentHours < repeat.startHour) {
-          nextDate.setHours(repeat.startHour)
-        }
-      }
-      break
+    case 'monthlyDate':
+    case 'monthlyWeekday': {
+      const currentMonth = nextDate.month
+      const month = repeat.months.find((month) => month > currentMonth) ?? repeat.months[0] ?? 0
+      const monthOffset = remainder(month - currentMonth, MONTHS_PER_YEAR)
+      nextDate = nextDate.add({ months: monthOffset })
+    }
+  }
+  switch (repeat.type) {
+    case 'none':
+    default: {
+      return null
     }
     case 'daily': {
-      const currentDay = nextDate.getDay()
-      const day = repeat.daysOfWeek.find((day) => day > currentDay) ?? repeat.daysOfWeek[0] ?? 0
-      const dayOffset = ((day - currentDay + 6) % 7) + 1
-      nextDate.setDate(nextDate.getDate() + dayOffset)
+      nextDate = nextDate.add({ days: 1 })
       break
     }
-    case 'monthly-weekday': {
-      nextDate.setDate(1)
-      nextDate.setMonth(nextDate.getMonth() + 1)
-      nextDate.setDate(1 + (repeat.weekNumber - 1) * DAYS_PER_WEEK)
-      const currentDay = nextDate.getDay()
-      const dayOffset = ((repeat.dayOfWeek - currentDay + 6) % 7) + 1
-      nextDate.setDate(nextDate.getDate() + dayOffset)
+    case 'weekly': {
+      const currentDay = getDay(nextDate)
+      const day = repeat.daysOfWeek.find((day) => day > currentDay) ?? repeat.daysOfWeek[0] ?? 0
+      const dayOffset = ((day - currentDay + 6) % 7) + 1
+      nextDate = nextDate.add({ days: dayOffset })
       break
     }
-    case 'monthly-date': {
-      const startMonth = nextDate.getMonth()
-      nextDate.setMonth(startMonth + 1)
-      if ((nextDate.getMonth() + MONTHS_PER_YEAR - startMonth) % MONTHS_PER_YEAR > 1) {
-        nextDate.setDate(0)
-      }
+    case 'monthlyWeekday': {
+      nextDate = nextDate.set({ day: 1 + (repeat.weekNumber - 1) * DAYS_PER_WEEK })
+      const currentDay = getDay(nextDate)
+      const dayOffset = remainder(repeat.dayOfWeek - currentDay - 1, DAYS_PER_WEEK) + 1
+      nextDate = nextDate.add({ days: dayOffset })
       break
     }
-  }
-  switch (repeat.type) {
-    case 'hourly':
-    case 'daily': {
+    case 'monthlyDate': {
+      nextDate = nextDate.set({ day: repeat.date })
       break
     }
-    case 'monthly-date':
-    case 'monthly-weekday': {
-      const currentMonth = nextDate.getMonth()
-      const month = repeat.months.find((month) => month >= currentMonth) ?? repeat.months[0] ?? 0
-      const monthOffset = (month - currentMonth + MONTHS_PER_YEAR) % MONTHS_PER_YEAR
-      nextDate.setMonth(nextDate.getMonth() + monthOffset)
-    }
   }
   return nextDate
 }
@@ -166,17 +141,22 @@ export function nextProjectExecutionDate(projectExecution: ProjectExecutionInfo,
  */
 export function getProjectExecutionRepetitionsForDateRange(
   projectExecution: ProjectExecutionInfo,
-  startDate: Date,
-  endDate: Date,
-): readonly Date[] {
+  startDate: ZonedDateTime,
+  endDate: ZonedDateTime,
+): readonly ZonedDateTime[] {
+  if (projectExecution.repeat.type === 'none') {
+    const soleExecutionDate = parseAbsolute(projectExecution.startDate, startDate.timeZone)
+    const isSoleExecutionWithinRange =
+      startDate.compare(soleExecutionDate) < 0 && endDate.compare(soleExecutionDate) > 0
+    return isSoleExecutionWithinRange ? [soleExecutionDate] : []
+  }
   const firstDate = firstProjectExecutionOnOrAfter(projectExecution, startDate)
-  if (firstDate >= endDate) {
+  if (firstDate.compare(endDate) > 0) {
     return EMPTY_ARRAY
   }
-  const repetitions: Date[] = [firstDate]
-  let currentDate = firstDate
-  currentDate = nextProjectExecutionDate(projectExecution, currentDate)
-  while (currentDate < endDate) {
+  const repetitions: ZonedDateTime[] = [firstDate]
+  let currentDate = nextProjectExecutionDate(projectExecution, firstDate)
+  while (currentDate != null && currentDate.compare(endDate) < 0) {
     repetitions.push(currentDate)
     currentDate = nextProjectExecutionDate(projectExecution, currentDate)
   }
diff --git a/app/common/src/text.ts b/app/common/src/text.ts
index 338311140895..adcda6c2a159 100644
--- a/app/common/src/text.ts
+++ b/app/common/src/text.ts
@@ -86,6 +86,7 @@ interface PlaceholderOverrides {
   readonly closeProjectBackendError: [projectTitle: string]
   readonly listProjectSessionsBackendError: [projectTitle: string]
   readonly createProjectExecutionBackendError: [projectTitle: string]
+  readonly getProjectExecutionDetailsBackendError: [projectTitle: string]
   readonly updateProjectExecutionBackendError: [projectTitle: string]
   readonly deleteProjectExecutionBackendError: [projectTitle: string]
   readonly listProjectExecutionsBackendError: [projectTitle: string]
@@ -139,7 +140,6 @@ interface PlaceholderOverrides {
   readonly organizationNameSettingsInputDescription: [howLong: number]
   readonly trialDescription: [days: number]
 
-  readonly repeatsAtX: [dates: string]
   readonly xMinutes: [minutes: number]
   readonly xAm: [hour: string]
   readonly xPm: [hour: string]
@@ -152,13 +152,14 @@ interface PlaceholderOverrides {
   readonly dateXTimeX: [date: string, time: string]
   readonly hourlyBetweenX: [startTime: string, endTime: string]
   readonly projectSessionsOnX: [date: string]
-  readonly xthDayOfMonth: [dateOrdinal: string]
-  readonly xthXDayOfMonth: [weekOrdinal: string, dayOfWeek: string]
-  readonly lastXDayOfMonth: [dayOfWeek: string]
+  readonly monthlyXthDay: [dateOrdinal: string]
+  readonly monthlyXthXDay: [weekOrdinal: string, dayOfWeek: string]
+  readonly monthlyLastXDay: [dayOfWeek: string]
   readonly repeatsTimeXMonthsXDateX: [time: string, months: string, date: string]
   readonly repeatsTimeXMonthsXDayXWeekX: [time: string, months: string, day: string, week: string]
   readonly repeatsTimeXMonthsXDayXLastWeek: [time: string, months: string, day: string]
   readonly xthWeek: [weekOrdinal: string]
+  readonly xExecutionsScheduledOnX: [count: number, date: string]
 
   readonly arbitraryFieldTooLarge: [maxSize: string]
   readonly arbitraryFieldTooSmall: [minSize: string]
diff --git a/app/common/src/text/english.json b/app/common/src/text/english.json
index 9d590e7907bc..cff7be6b156c 100644
--- a/app/common/src/text/english.json
+++ b/app/common/src/text/english.json
@@ -1,8 +1,5 @@
 {
-  "submit": "Submit",
-  "retry": "Retry",
-  "hide": "Hide",
-  "more": "More",
+  "ellipsis": "...",
 
   "arbitraryFetchError": "An error occurred while fetching data",
   "arbitraryFetchImageError": "An error occurred while fetching an image",
@@ -146,6 +143,7 @@
   "closeProjectBackendError": "Could not close project '$0'",
   "listProjectSessionsBackendError": "Could not list sessions for project '$0'",
   "createProjectExecutionBackendError": "Could not create project execution for project '$0'",
+  "getProjectExecutionDetailsBackendError": "Could not update project execution for project '$0'",
   "updateProjectExecutionBackendError": "Could not update project execution for project '$0'",
   "deleteProjectExecutionBackendError": "Could not delete project execution for project '$0'",
   "listProjectExecutionsBackendError": "Could not list project executions for project '$0'",
@@ -297,6 +295,9 @@
   "options": "Options",
   "googleIcon": "Google icon",
   "gitHubIcon": "GitHub icon",
+  "submit": "Submit",
+  "retry": "Retry",
+  "hide": "Hide",
   "more": "More",
   "close": "Close",
 
@@ -677,6 +678,7 @@
   "repeatIntervalLabel": "Repeat",
   "monthlyRepeatTypeLabel": "Monthly repeat type",
   "firstOccurrenceLabel": "First occurrence",
+  "timeZoneLabel": "Time zone",
   "endAtLabel": "End at",
   "parallelModeLabel": "Parallel mode",
   "dateLabel": "Date",
@@ -688,11 +690,11 @@
   "weekOfMonthLabel": "Week of month",
   "minuteLabel": "Minute",
   "doesNotRepeat": "Does not repeat",
-  "hourly": "Hourly",
   "daily": "Daily",
-  "xthDayOfMonth": "$0 of month",
-  "xthXDayOfMonth": "$0 $1 of month",
-  "lastXDayOfMonth": "Last $0 of month",
+  "weekly": "Weekly",
+  "monthlyXthDay": "Monthly ($0)",
+  "monthlyXthXDay": "Monthly ($0 $1)",
+  "monthlyLastXDay": "Monthly (last $0)",
   "repeatsTimeXMonthsXDateX": "$0 $1 $2",
   "repeatsTimeXMonthsXDayXWeekX": "$0 $1 $2 $3",
   "repeatsTimeXMonthsXDayXLastWeek": "$0 $1 last $2",
@@ -703,7 +705,6 @@
   "ignoreParallelModeDescription": "Do nothing when trying to start an execution while one is already running.",
   "restartParallelModeDescription": "Stop the old execution before starting the new execution.",
   "parallelParallelModeDescription": "Run the new execution as well as the old execution.",
-  "hourlyBetweenX": "Hourly between $0-$1",
   "everyDaySuffix": "every day",
   "everyMonth": "Every month",
   "monday": "Monday",
@@ -737,13 +738,14 @@
   "pluralFew": "rd",
   "pluralOther": "th",
   "pleaseSelectATime": "Please select a time.",
-  "repeatsAtX": "Repeats at $0",
-  "maxDurationLabel": "Maximum duration (minutes)",
+  "repeatsAt": "Repeats at",
+  "maxDurationLabel": "Maximum duration",
   "maxDurationMinutesLabel": "Maximum duration (minutes)",
   "xMinutes": "$0 minute(s)",
   "xAm": "$0 am",
   "xPm": "$0 pm",
   "dateXTimeX": "$0 $1",
+  "xExecutionsScheduledOnX": "$0 execution(s) scheduled on $1 (click to view)",
   "currentlyEnabledLabel": "Enabled (click to disable)",
   "currentlyDisabledLabel": "Disabled (click to enable)",
   "updateExecutionToLatestVersionLabel": "Use latest project version",
@@ -760,8 +762,8 @@
   "downloadToExecuteWorkflow": "Download Enso to execute workflows.",
   "advancedOptions": "Advanced options",
   "noneProjectExecutionRepeatType": "No repeat",
-  "hourlyProjectExecutionRepeatType": "Hourly",
   "dailyProjectExecutionRepeatType": "Daily",
+  "weeklyProjectExecutionRepeatType": "Weekly",
   "monthlyProjectExecutionRepeatType": "Monthly",
   "xthWeek": "$0 week",
 
diff --git a/app/common/src/utilities/data/dateTime.ts b/app/common/src/utilities/data/dateTime.ts
index d4bd7dbe8607..4b346ac8d100 100644
--- a/app/common/src/utilities/data/dateTime.ts
+++ b/app/common/src/utilities/data/dateTime.ts
@@ -1,15 +1,24 @@
 /** @file Utilities for manipulating and displaying dates and times. */
+import { ZonedDateTime, getDayOfWeek } from '@internationalized/date'
 import type { TextId } from '../../text'
 import { type Newtype, newtypeConstructor } from './newtype'
 
+// 0 = Monday. Use `en-US` for 0 = Sunday.
+const DAY_OF_WEEK_LOCALE = 'en-GB'
+const ISO_FORMAT = Intl.DateTimeFormat('sv', { dateStyle: 'short', timeStyle: 'short' })
 /** The number of hours in half a day. This is used to get the number of hours for AM/PM time. */
 export const HALF_DAY_HOURS = 12
-/** The number of milliseconds in one minute. */
-export const MINUTE_MS = 60_000
 export const MAX_DAYS_PER_MONTH = 31
 export const DAYS_PER_WEEK = 7
-export const HOURS_PER_DAY = 24
-export const HOUR_MINUTE = 60
+export const MONTHS_PER_YEAR = 12
+export const MINUTE_MS = 60_000
+/** The number of minutes in an hour. */
+export const HOUR_MINUTES = 60
+
+/** All possible day numbers. */
+export const DAYS = [...Array(DAYS_PER_WEEK).keys()] as const
+/** All possible month numbers. */
+export const MONTHS = [...Array(MONTHS_PER_YEAR).keys()] as const
 
 /** A mapping from the month index returned by {@link Date.getMonth} to its full name. */
 export const MONTH_NAMES = [
@@ -28,23 +37,23 @@ export const MONTH_NAMES = [
 ]
 
 export const DAY_3_LETTER_TEXT_IDS = [
-  'sunday3',
   'monday3',
   'tuesday3',
   'wednesday3',
   'thursday3',
   'friday3',
   'saturday3',
+  'sunday3',
 ] satisfies TextId[]
 
 export const DAY_TEXT_IDS = [
-  'sunday',
   'monday',
   'tuesday',
   'wednesday',
   'thursday',
   'friday',
   'saturday',
+  'sunday',
 ] satisfies TextId[]
 
 export const MONTH_3_LETTER_TEXT_IDS = [
@@ -62,6 +71,409 @@ export const MONTH_3_LETTER_TEXT_IDS = [
   'december3',
 ] satisfies TextId[]
 
+export const WHITELISTED_TIME_ZONE_INFO = [
+  { timeZone: 'Etc/GMT+12', description: 'International Date Line West' },
+  { timeZone: 'Etc/GMT+11', description: 'Coordinated Universal Time-11' },
+  { timeZone: 'Pacific/Midway', description: 'Midway' },
+  { timeZone: 'Pacific/Niue', description: 'Niue' },
+  { timeZone: 'Pacific/Pago_Pago', description: 'Pago_Pago' },
+  { timeZone: 'Pacific/Samoa', description: 'Samoa' },
+  { timeZone: 'America/Adak', description: 'Adak' },
+  { timeZone: 'Pacific/Rarotonga', description: 'Rarotonga' },
+  { timeZone: 'Pacific/Tahiti', description: 'Tahiti' },
+  { timeZone: 'Pacific/Honolulu', description: 'Hawaii' },
+  { timeZone: 'Pacific/Marquesas', description: 'Marquesas Islands' },
+  { timeZone: 'America/Anchorage', description: 'Alaska' },
+  { timeZone: 'Pacific/Gambier', description: 'Gambier' },
+  { timeZone: 'America/Juneau', description: 'Juneau' },
+  { timeZone: 'America/Nome', description: 'Nome' },
+  { timeZone: 'America/Metlakatla', description: 'Metlakatla' },
+  { timeZone: 'America/Sitka', description: 'Sitka' },
+  { timeZone: 'America/Yakutat', description: 'Yakutat' },
+  { timeZone: 'America/Tijuana', description: 'Baja California' },
+  { timeZone: 'America/Los_Angeles', description: 'Pacific Time (US & Canada)' },
+  { timeZone: 'Pacific/Pitcairn', description: 'Pitcairn' },
+  { timeZone: 'America/Creston', description: 'Creston' },
+  { timeZone: 'America/Chihuahua', description: 'Chihuahua, Mazatlan' },
+  { timeZone: 'America/Dawson', description: 'Dawson' },
+  { timeZone: 'America/Dawson_Creek', description: 'Dawson Creek' },
+  { timeZone: 'America/Denver', description: 'Mountain Time (US & Canada)' },
+  { timeZone: 'America/Ensenada', description: 'Ensenada' },
+  { timeZone: 'America/Fort_Nelson', description: 'Fort Nelson' },
+  { timeZone: 'America/Hermosillo', description: 'Hermosillo' },
+  { timeZone: 'America/Vancouver', description: 'Vancouver' },
+  { timeZone: 'America/Whitehorse', description: 'Whitehorse' },
+  { timeZone: 'America/Phoenix', description: 'Arizona' },
+  { timeZone: 'America/Bahia_Banderas', description: 'Bahia Banderas' },
+  { timeZone: 'America/Belize', description: 'Belize' },
+  { timeZone: 'America/Boise', description: 'Boise' },
+  { timeZone: 'America/Costa_Rica', description: 'Costa Rica' },
+  { timeZone: 'America/Chicago', description: 'Central Time (US & Canada)' },
+  { timeZone: 'America/Edmonton', description: 'Edmonton' },
+  { timeZone: 'America/El_Salvador', description: 'El Salvador' },
+  { timeZone: 'America/Guatemala', description: 'Central America' },
+  { timeZone: 'America/Managua', description: 'Managua' },
+  { timeZone: 'America/Mazatlan', description: 'Mazatlan' },
+  { timeZone: 'America/Ojinaga', description: 'Ojinaga' },
+  { timeZone: 'America/Swift_Current', description: 'Swift Current' },
+  { timeZone: 'America/Tegucigalpa', description: 'Tegucigalpa' },
+  { timeZone: 'America/Mexico_City', description: 'Guadalajara, Mexico City, Monterrey' },
+  { timeZone: 'America/Regina', description: 'Saskatchewan' },
+  { timeZone: 'Pacific/Galapagos', description: 'Galapagos' },
+  { timeZone: 'America/Atikokan', description: 'Atikokan' },
+  { timeZone: 'America/Bogota', description: 'Bogota, Lima, Quito' },
+  { timeZone: 'America/Cancun', description: 'Cancun' },
+  { timeZone: 'America/Cayman', description: 'Cayman' },
+  { timeZone: 'America/Coral_Harbour', description: 'Coral Harbour' },
+  { timeZone: 'America/Eirunepe', description: 'Eirunepe' },
+  { timeZone: 'America/Guayaquil', description: 'Guayaquil' },
+  { timeZone: 'America/Indianapolis', description: 'Indiana (East)' },
+  { timeZone: 'America/Jamaica', description: 'Jamaica' },
+  { timeZone: 'America/Lima', description: 'Lima' },
+  { timeZone: 'America/Matamoros', description: 'Matamoros' },
+  { timeZone: 'America/Menominee', description: 'Menominee' },
+  { timeZone: 'America/Merida', description: 'Merida' },
+  { timeZone: 'America/Monterrey', description: 'Monterrey' },
+  { timeZone: 'America/Nipigon', description: 'Nipigon' },
+  { timeZone: 'America/Panama', description: 'Panama' },
+  { timeZone: 'America/Rainy_River', description: 'Rainy River' },
+  { timeZone: 'America/Rio_Branco', description: 'Rio Branco' },
+  { timeZone: 'America/Thunder_Bay', description: 'Thunder Bay' },
+  { timeZone: 'America/Winnipeg', description: 'Winnipeg' },
+  { timeZone: 'America/New_York', description: 'Eastern Time (US & Canada)' },
+  { timeZone: 'Pacific/Easter', description: 'Easter' },
+  { timeZone: 'America/Caracas', description: 'Caracas' },
+  { timeZone: 'America/Anguilla', description: 'Anguilla' },
+  { timeZone: 'America/Antigua', description: 'Antigua' },
+  { timeZone: 'America/Aruba', description: 'Aruba' },
+  { timeZone: 'America/Asuncion', description: 'Asuncion' },
+  { timeZone: 'America/Barbados', description: 'Barbados' },
+  { timeZone: 'America/Boa_Vista', description: 'Boa Vista' },
+  { timeZone: 'America/Campo_Grande', description: 'Campo Grande' },
+  { timeZone: 'America/Curacao', description: 'Curacao' },
+  { timeZone: 'America/Cuiaba', description: 'Cuiaba' },
+  { timeZone: 'America/Detroit', description: 'Detroit' },
+  { timeZone: 'America/Dominica', description: 'Dominica' },
+  { timeZone: 'America/Grand_Turk', description: 'Grand Turk' },
+  { timeZone: 'America/Grenada', description: 'Grenada' },
+  { timeZone: 'America/Guadeloupe', description: 'Guadeloupe' },
+  { timeZone: 'America/Guyana', description: 'Guyana' },
+  { timeZone: 'America/Halifax', description: 'Atlantic Time (Canada)' },
+  { timeZone: 'America/Havana', description: 'Havana' },
+  { timeZone: 'America/La_Paz', description: 'Georgetown, La Paz, Manaus, San Juan' },
+  { timeZone: 'America/Manaus', description: 'Manaus' },
+  { timeZone: 'America/Martinique', description: 'Martinique' },
+  { timeZone: 'America/Montreal', description: 'Montreal' },
+  { timeZone: 'America/Montserrat', description: 'Montserrat' },
+  { timeZone: 'America/Nassau', description: 'Nassau' },
+  { timeZone: 'America/Port_of_Spain', description: 'Port of Spain' },
+  { timeZone: 'America/Porto_Velho', description: 'Porto Velho' },
+  { timeZone: 'America/Puerto_Rico', description: 'Puerto Rico' },
+  { timeZone: 'America/Santo_Domingo', description: 'Santo Domingo' },
+  { timeZone: 'America/St_Kitts', description: 'St. Kitts' },
+  { timeZone: 'America/St_Lucia', description: 'St. Lucia' },
+  { timeZone: 'America/St_Thomas', description: 'St. Thomas' },
+  { timeZone: 'America/St_Vincent', description: 'St. Vincent' },
+  { timeZone: 'America/Toronto', description: 'Toronto' },
+  { timeZone: 'America/Tortola', description: 'Tortola' },
+  { timeZone: 'America/Santiago', description: 'Santiago' },
+  { timeZone: 'America/St_Johns', description: 'Newfoundland' },
+  { timeZone: 'America/Araguaina', description: 'Araguaina' },
+  { timeZone: 'America/Bahia', description: 'Bahia' },
+  { timeZone: 'America/Belem', description: 'Belem' },
+  { timeZone: 'America/Buenos_Aires', description: 'Buenos Aires' },
+  { timeZone: 'America/Cayenne', description: 'Cayenne, Fortaleza' },
+  { timeZone: 'America/Fortaleza', description: 'Fortaleza' },
+  { timeZone: 'America/Glace_Bay', description: 'Glace Bay' },
+  { timeZone: 'America/Goose_Bay', description: 'Goose Bay' },
+  { timeZone: 'America/Godthab', description: 'Greenland' },
+  { timeZone: 'America/Maceio', description: 'Maceio' },
+  { timeZone: 'America/Moncton', description: 'Moncton' },
+  { timeZone: 'America/Paramaribo', description: 'Paramaribo' },
+  { timeZone: 'America/Punta_Arenas', description: 'Punta Arenas' },
+  { timeZone: 'America/Recife', description: 'Recife' },
+  { timeZone: 'America/Rosario', description: 'Rosario' },
+  { timeZone: 'America/Santarem', description: 'Santarem' },
+  { timeZone: 'America/Thule', description: 'Thule' },
+  { timeZone: 'America/Montevideo', description: 'Montevideo' },
+  { timeZone: 'America/Sao_Paulo', description: 'Brasilia' },
+  { timeZone: 'Antarctica/Rothera', description: 'Rothera' },
+  { timeZone: 'Atlantic/Bermuda', description: 'Bermuda' },
+  { timeZone: 'Atlantic/Stanley', description: 'Stanley' },
+  { timeZone: 'America/Miquelon', description: 'Miquelon' },
+  { timeZone: 'America/Noronha', description: 'Noronha' },
+  { timeZone: 'Atlantic/South_Georgia', description: 'South Georgia' },
+  { timeZone: 'Etc/GMT+2', description: 'Coordinated Universal Time-02' },
+  { timeZone: 'Atlantic/Azores', description: 'Azores' },
+  { timeZone: 'Atlantic/Cape_Verde', description: 'Cape Verde' },
+  { timeZone: 'UTC', description: 'Default' },
+  { timeZone: 'America/Danmarkshavn', description: 'Danmarkshavn' },
+  { timeZone: 'America/Scoresbysund', description: 'Scoresbysund' },
+  { timeZone: 'Africa/Accra', description: 'Accra' },
+  { timeZone: 'Africa/Abidjan', description: 'Abidjan' },
+  { timeZone: 'Africa/Bamako', description: 'Bamako' },
+  { timeZone: 'Africa/Banjul', description: 'Banjul' },
+  { timeZone: 'Africa/Bissau', description: 'Bissau' },
+  { timeZone: 'Africa/Conakry', description: 'Conakry' },
+  { timeZone: 'Africa/Dakar', description: 'Dakar' },
+  { timeZone: 'Africa/El_Aaiun', description: 'El Aaiun' },
+  { timeZone: 'Africa/Freetown', description: 'Freetown' },
+  { timeZone: 'Africa/Lome', description: 'Lome' },
+  { timeZone: 'Africa/Monrovia', description: 'Monrovia' },
+  { timeZone: 'Africa/Nouakchott', description: 'Nouakchott' },
+  { timeZone: 'Africa/Ouagadougou', description: 'Ouagadougou' },
+  { timeZone: 'Africa/Sao_Tome', description: 'Sao Tome' },
+  { timeZone: 'Africa/Timbuktu', description: 'Timbuktu' },
+  { timeZone: 'Antarctica/Troll', description: 'Troll' },
+  { timeZone: 'Atlantic/St_Helena', description: 'St. Helena' },
+  { timeZone: 'Atlantic/Reykjavik', description: 'Monrovia, Reykjavik' },
+  {
+    timeZone: 'Europe/London',
+    description: 'Greenwich Mean Time, Dublin, Edinburgh, Lisbon, London',
+  },
+  { timeZone: 'Africa/Bangui', description: 'Bangui' },
+  { timeZone: 'Africa/Casablanca', description: 'Casablanca' },
+  { timeZone: 'Africa/Algiers', description: 'Algiers' },
+  { timeZone: 'Africa/Brazzaville', description: 'Brazzaville' },
+  { timeZone: 'Africa/Douala', description: 'Douala' },
+  { timeZone: 'Africa/Kinshasa', description: 'Kinshasa' },
+  { timeZone: 'Africa/Libreville', description: 'Libreville' },
+  { timeZone: 'Africa/Luanda', description: 'Luanda' },
+  { timeZone: 'Africa/Malabo', description: 'Malabo' },
+  { timeZone: 'Africa/Ndjamena', description: 'Ndjamena' },
+  { timeZone: 'Africa/Niamey', description: 'Niamey' },
+  { timeZone: 'Africa/Tunis', description: 'Tunis' },
+  { timeZone: 'Africa/Lagos', description: 'West Central Africa' },
+  { timeZone: 'Atlantic/Canary', description: 'Canary' },
+  { timeZone: 'Atlantic/Faroe', description: 'Faroe' },
+  { timeZone: 'Atlantic/Madeira', description: 'Madeira' },
+  { timeZone: 'Europe/Belfast', description: 'Belfast' },
+  { timeZone: 'Europe/Berlin', description: 'Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna' },
+  { timeZone: 'Europe/Budapest', description: 'Belgrade, Bratislava, Budapest, Ljubljana, Prague' },
+  { timeZone: 'Europe/Dublin', description: 'Dublin' },
+  { timeZone: 'Europe/Guernsey', description: 'Guernsey' },
+  { timeZone: 'Europe/Isle_of_Man', description: 'Isle of Man' },
+  { timeZone: 'Europe/Jersey', description: 'Jersey' },
+  { timeZone: 'Europe/Lisbon', description: 'Lisbon' },
+  { timeZone: 'Europe/Paris', description: 'Brussels, Copenhagen, Madrid, Paris' },
+  { timeZone: 'Europe/Warsaw', description: 'Sarajevo, Skopje, Warsaw, Zagreb' },
+  { timeZone: 'Africa/Blantyre', description: 'Blantyre' },
+  { timeZone: 'Africa/Bujumbura', description: 'Bujumbura' },
+  { timeZone: 'Africa/Cairo', description: 'Cairo' },
+  { timeZone: 'Africa/Ceuta', description: 'Ceuta' },
+  { timeZone: 'Africa/Johannesburg', description: 'Johannesburg' },
+  { timeZone: 'Africa/Gaborone', description: 'Gaborone' },
+  { timeZone: 'Africa/Harare', description: 'Harare' },
+  { timeZone: 'Africa/Khartoum', description: 'Khartoum' },
+  { timeZone: 'Africa/Kigali', description: 'Kigali' },
+  { timeZone: 'Africa/Lubumbashi', description: 'Lubumbashi' },
+  { timeZone: 'Africa/Lusaka', description: 'Lusaka' },
+  { timeZone: 'Africa/Maputo', description: 'Maputo' },
+  { timeZone: 'Africa/Maseru', description: 'Maseru' },
+  { timeZone: 'Africa/Mbabane', description: 'Mbabane' },
+  { timeZone: 'Africa/Tripoli', description: 'Tripoli' },
+  { timeZone: 'Africa/Windhoek', description: 'Windhoek' },
+  { timeZone: 'Asia/Amman', description: 'Amman' },
+  { timeZone: 'Asia/Beirut', description: 'Beirut' },
+  { timeZone: 'Asia/Damascus', description: 'Damascus' },
+  { timeZone: 'Asia/Jerusalem', description: 'Jerusalem' },
+  { timeZone: 'Europe/Amsterdam', description: 'Amsterdam' },
+  { timeZone: 'Europe/Andorra', description: 'Andorra' },
+  { timeZone: 'Europe/Belgrade', description: 'Belgrade' },
+  { timeZone: 'Europe/Brussels', description: 'Brussels' },
+  { timeZone: 'Europe/Copenhagen', description: 'Copenhagen' },
+  { timeZone: 'Europe/Gibraltar', description: 'Gibraltar' },
+  { timeZone: 'Europe/Istanbul', description: 'Athens, Bucharest, Istanbul' },
+  { timeZone: 'Europe/Kaliningrad', description: 'Kaliningrad' },
+  { timeZone: 'Europe/Kiev', description: 'Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius' },
+  { timeZone: 'Europe/Ljubljana', description: 'Ljubljana' },
+  { timeZone: 'Europe/Luxembourg', description: 'Luxembourg' },
+  { timeZone: 'Europe/Madrid', description: 'Madrid' },
+  { timeZone: 'Europe/Malta', description: 'Malta' },
+  { timeZone: 'Europe/Monaco', description: 'Monaco' },
+  { timeZone: 'Europe/Minsk', description: 'Minsk' },
+  { timeZone: 'Europe/Oslo', description: 'Oslo' },
+  { timeZone: 'Europe/Prague', description: 'Prague' },
+  { timeZone: 'Europe/Rome', description: 'Rome' },
+  { timeZone: 'Europe/Sarajevo', description: 'Sarajevo' },
+  { timeZone: 'Europe/Skopje', description: 'Skopje' },
+  { timeZone: 'Europe/Stockholm', description: 'Stockholm' },
+  { timeZone: 'Europe/Tirane', description: 'Tirane' },
+  { timeZone: 'Europe/Vaduz', description: 'Vaduz' },
+  { timeZone: 'Europe/Vienna', description: 'Vienna' },
+  { timeZone: 'Europe/Zagreb', description: 'Zagreb' },
+  { timeZone: 'Europe/Zurich', description: 'Zurich' },
+  { timeZone: 'Africa/Addis_Ababa', description: 'Addis Ababa' },
+  { timeZone: 'Africa/Asmara', description: 'Asmara' },
+  { timeZone: 'Africa/Dar_es_Salaam', description: 'Dar es Salaam' },
+  { timeZone: 'Africa/Djibouti', description: 'Djibouti' },
+  { timeZone: 'Africa/Juba', description: 'Juba' },
+  { timeZone: 'Africa/Kampala', description: 'Kampala' },
+  { timeZone: 'Africa/Mogadishu', description: 'Mogadishu' },
+  { timeZone: 'Africa/Nairobi', description: 'Nairobi' },
+  { timeZone: 'Asia/Aden', description: 'Aden' },
+  { timeZone: 'Asia/Bahrain', description: 'Bahrain' },
+  { timeZone: 'Asia/Baghdad', description: 'Baghdad' },
+  { timeZone: 'Asia/Famagusta', description: 'Famagusta' },
+  { timeZone: 'Asia/Gaza', description: 'Gaza' },
+  { timeZone: 'Asia/Hebron', description: 'Hebron' },
+  { timeZone: 'Asia/Kuwait', description: 'Kuwait' },
+  { timeZone: 'Asia/Nicosia', description: 'Nicosia' },
+  { timeZone: 'Asia/Qatar', description: 'Qatar' },
+  { timeZone: 'Asia/Tel_Aviv', description: 'Tel Aviv' },
+  { timeZone: 'Asia/Riyadh', description: 'Kuwait, Riyadh' },
+  { timeZone: 'Europe/Athens', description: 'Athens' },
+  { timeZone: 'Europe/Bucharest', description: 'Bucharest' },
+  { timeZone: 'Europe/Chisinau', description: 'Chisinau' },
+  { timeZone: 'Europe/Helsinki', description: 'Helsinki' },
+  { timeZone: 'Europe/Kirov', description: 'Kirov' },
+  { timeZone: 'Europe/Moscow', description: 'Moscow, St. Petersburg, Volgograd' },
+  { timeZone: 'Europe/Riga', description: 'Riga' },
+  { timeZone: 'Europe/Simferopol', description: 'Simferopol' },
+  { timeZone: 'Europe/Sofia', description: 'Sofia' },
+  { timeZone: 'Europe/Tallinn', description: 'Tallinn' },
+  { timeZone: 'Europe/Tiraspol', description: 'Tiraspol' },
+  { timeZone: 'Europe/Uzhgorod', description: 'Uzhgorod' },
+  { timeZone: 'Europe/Vilnius', description: 'Vilnius' },
+  { timeZone: 'Europe/Volgograd', description: 'Volgograd' },
+  { timeZone: 'Europe/Zaporozhye', description: 'Zaporozhye' },
+  { timeZone: 'Indian/Antananarivo', description: 'Antananarivo' },
+  { timeZone: 'Indian/Comoro', description: 'Comoro' },
+  { timeZone: 'Indian/Mayotte', description: 'Mayotte' },
+  { timeZone: 'Asia/Tehran', description: 'Tehran' },
+  { timeZone: 'Asia/Baku', description: 'Baku' },
+  { timeZone: 'Asia/Muscat', description: 'Muscat' },
+  { timeZone: 'Asia/Dubai', description: 'Abu Dhabi, Muscat' },
+  { timeZone: 'Asia/Tbilisi', description: 'Tbilisi' },
+  { timeZone: 'Asia/Yerevan', description: 'Yerevan' },
+  { timeZone: 'Europe/Astrakhan', description: 'Astrakhan' },
+  { timeZone: 'Europe/Samara', description: 'Samara' },
+  { timeZone: 'Europe/Saratov', description: 'Saratov' },
+  { timeZone: 'Europe/Ulyanovsk', description: 'Ulyanovsk' },
+  { timeZone: 'Indian/Mahe', description: 'Mahe' },
+  { timeZone: 'Indian/Mauritius', description: 'Port Louis' },
+  { timeZone: 'Indian/Reunion', description: 'Reunion' },
+  { timeZone: 'Asia/Kabul', description: 'Kabul' },
+  { timeZone: 'Antarctica/Mawson', description: 'Mawson' },
+  { timeZone: 'Asia/Aqtau', description: 'Aqtau' },
+  { timeZone: 'Asia/Aqtobe', description: 'Aqtobe' },
+  { timeZone: 'Asia/Ashgabat', description: 'Ashgabat' },
+  { timeZone: 'Asia/Atyrau', description: 'Atyrau' },
+  { timeZone: 'Asia/Dushanbe', description: 'Dushanbe' },
+  { timeZone: 'Asia/Oral', description: 'Oral' },
+  { timeZone: 'Asia/Samarkand', description: 'Samarkand' },
+  { timeZone: 'Asia/Karachi', description: 'Islamabad, Karachi' },
+  { timeZone: 'Asia/Tashkent', description: 'Tashkent' },
+  { timeZone: 'Asia/Yekaterinburg', description: 'Yekaterinburg' },
+  { timeZone: 'Indian/Maldives', description: 'Maldives' },
+  { timeZone: 'Asia/Calcutta', description: 'Chennai, Kolkata, Mumbai, New Delhi' },
+  { timeZone: 'Asia/Colombo', description: 'Sri Jayawardenepura' },
+  { timeZone: 'Asia/Kolkata', description: 'Kolkata' },
+  { timeZone: 'Asia/Kathmandu', description: 'Kathmandu' },
+  { timeZone: 'Asia/Almaty', description: 'Astana' },
+  { timeZone: 'Asia/Bishkek', description: 'Bishkek' },
+  { timeZone: 'Asia/Kashgar', description: 'Kashgar' },
+  { timeZone: 'Asia/Omsk', description: 'Omsk' },
+  { timeZone: 'Asia/Qyzylorda', description: 'Qyzylorda' },
+  { timeZone: 'Asia/Thimphu', description: 'Thimphu' },
+  { timeZone: 'Asia/Urumqi', description: 'Urumqi' },
+  { timeZone: 'Asia/Dhaka', description: 'Dhaka' },
+  { timeZone: 'Asia/Novosibirsk', description: 'Novosibirsk' },
+  { timeZone: 'Indian/Chagos', description: 'Chagos' },
+  { timeZone: 'Asia/Yangon', description: 'Yangon' },
+  { timeZone: 'Asia/Rangoon', description: 'Yangon (Rangoon)' },
+  { timeZone: 'Indian/Cocos', description: 'Cocos' },
+  { timeZone: 'Antarctica/Davis', description: 'Davis' },
+  { timeZone: 'Asia/Barnaul', description: 'Barnaul' },
+  { timeZone: 'Asia/Bangkok', description: 'Bangkok, Hanoi, Jakarta' },
+  { timeZone: 'Asia/Ho_Chi_Minh', description: 'Ho Chi Minh' },
+  { timeZone: 'Asia/Hovd', description: 'Hovd' },
+  { timeZone: 'Asia/Jakarta', description: 'Jakarta' },
+  { timeZone: 'Asia/Novokuznetsk', description: 'Novokuznetsk' },
+  { timeZone: 'Asia/Phnom_Penh', description: 'Phnom Penh' },
+  { timeZone: 'Asia/Pontianak', description: 'Pontianak' },
+  { timeZone: 'Asia/Tomsk', description: 'Tomsk' },
+  { timeZone: 'Asia/Vientiane', description: 'Vientiane' },
+  { timeZone: 'Asia/Krasnoyarsk', description: 'Krasnoyarsk' },
+  { timeZone: 'Indian/Christmas', description: 'Christmas' },
+  { timeZone: 'Antarctica/Casey', description: 'Casey' },
+  { timeZone: 'Asia/Brunei', description: 'Brunei' },
+  { timeZone: 'Asia/Choibalsan', description: 'Choibalsan' },
+  { timeZone: 'Asia/Chongqing', description: 'Chongqing' },
+  { timeZone: 'Asia/Harbin', description: 'Harbin' },
+  { timeZone: 'Asia/Hong_Kong', description: 'Hong Kong' },
+  { timeZone: 'Asia/Kuala_Lumpur', description: 'Kuala Lumpur' },
+  { timeZone: 'Asia/Kuching', description: 'Kuching' },
+  { timeZone: 'Asia/Macau', description: 'Macau' },
+  { timeZone: 'Asia/Makassar', description: 'Makassar' },
+  { timeZone: 'Asia/Manila', description: 'Manila' },
+  { timeZone: 'Asia/Irkutsk', description: 'Irkutsk' },
+  { timeZone: 'Asia/Shanghai', description: 'Beijing, Chongqing, Hong Kong, Urumqi' },
+  { timeZone: 'Asia/Singapore', description: 'Kuala Lumpur, Singapore' },
+  { timeZone: 'Asia/Taipei', description: 'Taipei' },
+  { timeZone: 'Asia/Ulaanbaatar', description: 'Ulaanbaatar' },
+  { timeZone: 'Australia/Perth', description: 'Perth' },
+  { timeZone: 'Asia/Pyongyang', description: 'Pyongyang' },
+  { timeZone: 'Australia/Eucla', description: 'Eucla' },
+  { timeZone: 'Asia/Chita', description: 'Chita' },
+  { timeZone: 'Asia/Dili', description: 'Dili' },
+  { timeZone: 'Asia/Jayapura', description: 'Jayapura' },
+  { timeZone: 'Asia/Khandyga', description: 'Khandyga' },
+  { timeZone: 'Asia/Tokyo', description: 'Osaka, Sapporo, Tokyo' },
+  { timeZone: 'Asia/Seoul', description: 'Seoul' },
+  { timeZone: 'Asia/Yakutsk', description: 'Yakutsk' },
+  { timeZone: 'Pacific/Palau', description: 'Palau' },
+  { timeZone: 'Australia/Adelaide', description: 'Adelaide' },
+  { timeZone: 'Australia/Broken_Hill', description: 'Broken Hill' },
+  { timeZone: 'Australia/Darwin', description: 'Darwin' },
+  { timeZone: 'Australia/Brisbane', description: 'Brisbane' },
+  { timeZone: 'Asia/Vladivostok', description: 'Vladivostok' },
+  { timeZone: 'Australia/Hobart', description: 'Hobart' },
+  { timeZone: 'Australia/Lindeman', description: 'Lindeman' },
+  { timeZone: 'Pacific/Chuuk', description: 'Chuuk' },
+  { timeZone: 'Pacific/Saipan', description: 'Saipan' },
+  { timeZone: 'Pacific/Port_Moresby', description: 'Guam, Port Moresby' },
+  { timeZone: 'Australia/LHI', description: 'Lord Howe Island' },
+  { timeZone: 'Australia/Lord_Howe', description: 'Lord Howe Island' },
+  { timeZone: 'Asia/Sakhalin', description: 'Sakhalin' },
+  { timeZone: 'Asia/Srednekolymsk', description: 'Srednekolymsk' },
+  { timeZone: 'Asia/Magadan', description: 'Magadan, Solomon Is., New Caledonia' },
+  { timeZone: 'Australia/Currie', description: 'Currie' },
+  { timeZone: 'Australia/Melbourne', description: 'Melbourne' },
+  { timeZone: 'Australia/Sydney', description: 'Sydney' },
+  { timeZone: 'Pacific/Efate', description: 'Efate' },
+  { timeZone: 'Pacific/Bougainville', description: 'Bougainville' },
+  { timeZone: 'Pacific/Guadalcanal', description: 'Guadalcanal' },
+  { timeZone: 'Pacific/Kosrae', description: 'Kosrae' },
+  { timeZone: 'Pacific/Norfolk', description: 'Norfolk' },
+  { timeZone: 'Pacific/Noumea', description: 'Noumea' },
+  { timeZone: 'Pacific/Pohnpei', description: 'Pohnpei' },
+  { timeZone: 'Asia/Anadyr', description: 'Anadyr' },
+  { timeZone: 'Asia/Kamchatka', description: 'Petropavlovsk-Kamchatsky' },
+  { timeZone: 'Etc/GMT-12', description: 'Coordinated Universal Time+12' },
+  { timeZone: 'Pacific/Funafuti', description: 'Funafuti' },
+  { timeZone: 'Pacific/Kwajalein', description: 'Kwajalein' },
+  { timeZone: 'Pacific/Majuro', description: 'Majuro' },
+  { timeZone: 'Pacific/Nauru', description: 'Nauru' },
+  { timeZone: 'Pacific/Tarawa', description: 'Tarawa' },
+  { timeZone: 'Pacific/Wake', description: 'Wake' },
+  { timeZone: 'Pacific/Wallis', description: 'Wallis' },
+  { timeZone: 'Pacific/Auckland', description: 'Auckland, Wellington' },
+  { timeZone: 'Pacific/Fiji', description: 'Fiji' },
+  { timeZone: 'Pacific/Chatham', description: 'Chatham Islands' },
+  { timeZone: 'Pacific/Enderbury', description: 'Phoenix Islands, Tokelau, Tonga' },
+  { timeZone: 'Pacific/Fakaofo', description: 'Fakaofo' },
+  { timeZone: 'Pacific/Tongatapu', description: 'Tongatapu' },
+  { timeZone: 'Pacific/Apia', description: 'Apia' },
+  { timeZone: 'Pacific/Kiritimati', description: 'Line Islands' },
+]
+
+export const WHITELISTED_TIME_ZONES = WHITELISTED_TIME_ZONE_INFO.map(({ timeZone }) => timeZone)
+
+export const WHITELISTED_TIME_ZONE_MAP = new Map(
+  WHITELISTED_TIME_ZONE_INFO.map((info) => [info.timeZone, info]),
+)
+
 /** A string with date and time, following the RFC3339 specification. */
 export type Rfc3339DateTime = Newtype<string, 'Rfc3339DateTime'>
 /** Create a {@link Rfc3339DateTime}. */
@@ -111,12 +523,46 @@ export function toRfc3339(date: Date) {
   return Rfc3339DateTime(date.toISOString())
 }
 
-/** Convert a UTC date to a local date. */
-export function localDateToUtcDate(date: Date) {
-  return new Date(Number(date) + date.getTimezoneOffset() * MINUTE_MS)
+/** Format a {@link Date} as a human-readable ISO string (`YYYY-MM-DD HH:mm`). */
+export function toReadableIsoString(date: Date, timeZone?: string) {
+  const formatter =
+    timeZone == null ? ISO_FORMAT : (
+      Intl.DateTimeFormat('sv', { dateStyle: 'short', timeStyle: 'short', timeZone })
+    )
+  return formatter.format(date)
+}
+
+/** Format a {@link ZonedDateTime} as a {@link Rfc3339DateTime}. */
+export function zonedDateTimeToReadableIsoString(date: ZonedDateTime) {
+  const isoString = date.toString()
+  const [, dateString, hour, minute] = isoString.match(/(.+)T(\d+):(\d+)/) ?? []
+  return `${dateString} ${hour}:${minute}`
+}
+
+/** Get a consistent day number for the day of week no matter the locale of the local device. */
+export function getDay(date: ZonedDateTime) {
+  return getDayOfWeek(date, DAY_OF_WEEK_LOCALE)
+}
+
+/**
+ * Get the number of times this day of the week has occurred so far this month.
+ * Dates 1 through 7 are week 1, 8 through 14 are week 2, etc.
+ */
+export function getWeekOfMonth(day: number) {
+  return Math.floor((day - 1) / DAYS_PER_WEEK) + 1
+}
+
+/** Get a string representing the timezone offset of a date. */
+export function getTimeZoneOffsetString(date: ZonedDateTime) {
+  const offsetMin = date.offset / MINUTE_MS
+  const offsetNegative = offsetMin < 0
+  const absoluteOffsetMin = Math.abs(offsetMin)
+  const offsetHours = Math.floor(absoluteOffsetMin / HOUR_MINUTES)
+  const offsetMinutes = absoluteOffsetMin % HOUR_MINUTES
+  return `${offsetNegative ? '-' : '+'}${`${offsetHours}`.padStart(2, '0')}:${`${offsetMinutes}`.padStart(2, '0')}`
 }
 
-/** Convert a local date to a UTC date. */
-export function utcDateToLocalDate(date: Date) {
-  return new Date(Number(date) - date.getTimezoneOffset() * MINUTE_MS)
+/** Get a string representing the timezone offset of a date, wrapped in `(GMT` and `)`. */
+export function getTimeZoneOffsetStringWithGMT(date: ZonedDateTime) {
+  return `(GMT${getTimeZoneOffsetString(date)})`
 }
diff --git a/app/common/src/utilities/data/object.ts b/app/common/src/utilities/data/object.ts
index 5599b6b3d3f2..394617a38ec4 100644
--- a/app/common/src/utilities/data/object.ts
+++ b/app/common/src/utilities/data/object.ts
@@ -1,21 +1,18 @@
 /** @file Functions related to manipulating objects. */
 
-// ===============
-// === Mutable ===
-// ===============
-
 /** Remove the `readonly` modifier from all fields in a type. */
 export type Mutable<T> = {
   -readonly [K in keyof T]: T[K]
 }
 
-// =============
-// === merge ===
-// =============
-
 /** Prevents generic parameter inference by hiding the type parameter behind a conditional type. */
 type NoInfer<T> = [T][T extends T ? 0 : never]
 
+/** UNSAFE when `Key` is not a literal type. */
+export function unsafeKeyValuePair<Key extends PropertyKey, Value>(key: Key, value: Value) {
+  return { [key]: value } as { [K in Key]: Value }
+}
+
 /**
  * Immutably shallowly merge an object with a partial update.
  * Does not preserve classes. Useful for preserving order of properties.
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts b/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
index adf7517104ec..7d9971330a4d 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
@@ -15,6 +15,7 @@ import { useOffline, useOfflineChange } from '#/hooks/offlineHooks'
 import { useText } from '#/providers/TextProvider'
 import * as errorUtils from '#/utilities/error'
 import { useMutation } from '@tanstack/react-query'
+import { IS_DEV_MODE } from 'enso-common/src/detect'
 import * as schemaModule from './schema'
 import type * as types from './types'
 
@@ -84,6 +85,10 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
         {
           async: true,
           errorMap: (issue) => {
+            if (IS_DEV_MODE) {
+              // eslint-disable-next-line no-restricted-properties
+              console.error('(Development only) Form validation error:', issue)
+            }
             switch (issue.code) {
               case 'too_small':
                 if (issue.minimum === 1 && issue.type === 'string') {
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/ComboBox/ComboBox.stories.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/ComboBox/ComboBox.stories.tsx
new file mode 100644
index 000000000000..1cfaae599874
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/ComboBox/ComboBox.stories.tsx
@@ -0,0 +1,60 @@
+import { Text } from '#/components/AriaComponents/Text'
+import { roundedVariants } from '#/components/AriaComponents/utilities'
+import type { Meta, StoryObj } from '@storybook/react'
+import { z } from 'zod'
+import { Form } from '../../Form/index'
+import type { ComboBoxProps } from './ComboBox'
+import { ComboBox } from './ComboBox'
+
+type Props = ComboBoxProps<typeof schema, 'value'>
+type Story = StoryObj<Props>
+
+const schema = z.object({ value: z.string() })
+
+const sizes = ['medium', 'small'] as const
+const roundeds = roundedVariants()
+
+export default {
+  title: 'Components/Inputs/ComboBox',
+  component: ComboBox,
+  render: (args) => <ComboBox {...args} />,
+  tags: ['autodocs'],
+  decorators: [(Story, context) => <Form schema={schema}>{Story(context)}</Form>],
+  args: {
+    name: 'value',
+    items: ['one', 'two', 'three'],
+    className: 'w-40',
+    children: (x: string) => x,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<Props>
+
+export const Default: Story = {}
+
+export const Rounded: Story = {
+  render: (_Story, context) => (
+    <div className="grid grid-cols-3 gap-4">
+      {roundeds.map((rounded) => (
+        <div key={rounded} className="flex flex-col items-center gap-1">
+          <ComboBox {...context.args} rounded={rounded} />
+          <Text variant="caption">{rounded}</Text>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const Size: Story = {
+  render: (_Story, context) => (
+    <div className="grid grid-cols-1 gap-4">
+      {sizes.map((size) => (
+        <div key={size} className="flex flex-col items-center gap-1">
+          <ComboBox {...context.args} size={size} />
+          <Text variant="caption">{size}</Text>
+        </div>
+      ))}
+    </div>
+  ),
+}
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/ComboBox/ComboBox.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/ComboBox/ComboBox.tsx
index 6228c142b6d5..80f501315013 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/ComboBox/ComboBox.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/ComboBox/ComboBox.tsx
@@ -1,22 +1,26 @@
 /** @file A combo box with a list of items that can be filtered. */
-import { useContext, useMemo, type ForwardedRef } from 'react'
+import { useContext, useRef, type ForwardedRef } from 'react'
 
 import CrossIcon from '#/assets/cross.svg'
 import ArrowIcon from '#/assets/folder_arrow.svg'
 import {
   ComboBox as AriaComboBox,
   ComboBoxStateContext,
-  Label,
   ListBox,
   ListBoxItem,
   type ComboBoxProps as AriaComboBoxProps,
 } from '#/components/aria'
+import { useText } from '#/providers/TextProvider'
+import { forwardRef } from '#/utilities/react'
+import type { VariantProps } from '#/utilities/tailwindVariants'
+import { tv } from '#/utilities/tailwindVariants'
 import {
   Button,
   Form,
-  Input,
+  makeRoundedStyles,
   Popover,
   Text,
+  UncontrolledInput,
   type FieldComponentProps,
   type FieldPath,
   type FieldProps,
@@ -24,18 +28,23 @@ import {
   type FieldValues,
   type InputProps,
   type TSchema,
-} from '#/components/AriaComponents'
-import { useText } from '#/providers/TextProvider'
-import { forwardRef } from '#/utilities/react'
-import type { VariantProps } from '#/utilities/tailwindVariants'
-import { tv } from '#/utilities/tailwindVariants'
-
-const POPOVER_CROSS_OFFSET_PX = -32
+} from '../..'
 
 const COMBO_BOX_STYLES = tv({
   base: 'w-full',
+  variants: {
+    rounded: makeRoundedStyles('inputContainer'),
+    size: {
+      small: {
+        inputContainer: 'h-6 px-2',
+      },
+      medium: {
+        inputContainer: 'h-8 px-4',
+      },
+    },
+  },
   slots: {
-    inputContainer: 'flex items-center gap-2 px-1.5',
+    inputContainer: 'flex items-center gap-2 px-1.5 rounded-full border-0.5 border-primary/20',
     input: 'grow',
     resetButton: '',
     popover: 'py-2',
@@ -44,6 +53,7 @@ const COMBO_BOX_STYLES = tv({
   },
   defaultVariants: {
     size: 'medium',
+    rounded: 'xlarge',
   },
 })
 
@@ -61,10 +71,17 @@ export interface ComboBoxProps<Schema extends TSchema, TFieldName extends FieldP
     FieldProps,
     Pick<FieldComponentProps<Schema>, 'className' | 'style'>,
     VariantProps<typeof COMBO_BOX_STYLES>,
-    Pick<InputProps<Schema, TFieldName, string>, 'placeholder'> {
+    Pick<InputProps<Schema, TFieldName, string>, 'addonEnd' | 'addonStart' | 'placeholder'> {
   /** This may change as the user types in the input. */
   readonly items: readonly FieldValues<Schema>[TFieldName][]
+  /** A text representation of the item to be shown on each option. */
   readonly children: (item: FieldValues<Schema>[TFieldName]) => string
+  /**
+   * Convert an item to a unique text id, if the default text format returned by
+   * `children` is not guaranteed (or not supposed) to be unique.
+   */
+  readonly toTextValue?: (item: FieldValues<Schema>[TFieldName]) => string
+  /** Hide the `x` button to disable resetting the input. */
   readonly noResetButton?: boolean
 }
 
@@ -83,19 +100,26 @@ export const ComboBox = forwardRef(function ComboBox<
     isDisabled,
     form,
     defaultValue,
+    defaultInputValue,
+    defaultSelectedKey,
     label,
     isRequired,
     className,
     placeholder,
+    size,
+    rounded,
     children,
+    toTextValue,
     noResetButton = false,
     variants = COMBO_BOX_STYLES,
+    addonStart,
+    addonEnd,
   } = props
   const itemsAreStrings = typeof items[0] === 'string'
-  const effectiveItems = useMemo(
-    () => (itemsAreStrings ? items.map((id) => ({ id })) : items),
-    [items, itemsAreStrings],
-  )
+  const effectiveItems = itemsAreStrings ? items.map((id) => ({ id })) : items
+  const toTextValueOrText = toTextValue ?? children
+  const reverseMapping = new Map(items.map((item) => [toTextValueOrText(item), item]))
+  const popoverTriggerRef = useRef<HTMLDivElement>(null)
 
   const { fieldState, formInstance } = useStringField({
     name,
@@ -104,7 +128,7 @@ export const ComboBox = forwardRef(function ComboBox<
     defaultValue,
   })
 
-  const styles = variants({})
+  const styles = variants({ size, rounded })
 
   return (
     <Form.Field
@@ -124,51 +148,59 @@ export const ComboBox = forwardRef(function ComboBox<
       <Form.Controller
         control={formInstance.control}
         name={name}
-        render={(renderProps) => {
-          return (
-            <AriaComboBox
-              className={styles.base({ className })}
-              // @ts-expect-error Items must not be strings; this is a limitation of `react-aria`.
-              items={effectiveItems}
-              {...renderProps.field}
-              onSelectionChange={(key) => {
-                renderProps.field.onChange(key ?? '')
-              }}
-            >
-              <Label>{label}</Label>
-              <div className={styles.inputContainer()}>
-                <Button variant="icon" icon={ArrowIcon} className="rotate-90" />
-                <Input
-                  name={name}
-                  placeholder={placeholder}
-                  size="custom"
-                  variant="custom"
-                  value={renderProps.field.value}
-                />
-                {!noResetButton && <ComboBoxResetButton className={styles.resetButton()} />}
-              </div>
-              <Popover crossOffset={POPOVER_CROSS_OFFSET_PX} className={styles.popover()}>
-                <ListBox className={styles.listBox()}>
-                  {(item) => {
-                    const text = children(
+        render={(renderProps) => (
+          <AriaComboBox
+            aria-label={props['aria-label'] ?? 'Combo box'}
+            className={styles.base({ className })}
+            // @ts-expect-error Items must not be strings; this is a limitation of `react-aria`.
+            defaultItems={effectiveItems}
+            {...renderProps.field}
+            defaultInputValue={defaultInputValue}
+            defaultSelectedKey={defaultSelectedKey ?? renderProps.field.value}
+            onSelectionChange={(key) => {
+              renderProps.field.onChange(typeof key === 'string' ? reverseMapping.get(key) : null)
+            }}
+          >
+            <div ref={popoverTriggerRef} className={styles.inputContainer()}>
+              <Button variant="icon" icon={ArrowIcon} className="rotate-90" />
+              <UncontrolledInput
+                name={name}
+                placeholder={placeholder}
+                addonStart={addonStart}
+                addonEnd={addonEnd}
+                size="custom"
+                variant="custom"
+              />
+              {!noResetButton && <ComboBoxResetButton className={styles.resetButton()} />}
+            </div>
+            <Popover triggerRef={popoverTriggerRef} className={styles.popover()}>
+              <ListBox aria-label={props['aria-label'] ?? 'Combo box'} className={styles.listBox()}>
+                {(item) => {
+                  // eslint-disable-next-line no-restricted-syntax
+                  const fieldValue = (
+                    itemsAreStrings ?
                       // @ts-expect-error When items are strings, they are mapped to
                       // `{ id: item }`.
-                      // eslint-disable-next-line no-restricted-syntax
-                      (itemsAreStrings ? item.id : item) as FieldValues<Schema>[TFieldName],
-                    )
-                    return (
-                      <ListBoxItem id={text} className={styles.listBoxItem()}>
-                        <Text truncate="1" className="w-full" tooltipPlacement="left">
-                          {text}
-                        </Text>
-                      </ListBoxItem>
-                    )
-                  }}
-                </ListBox>
-              </Popover>
-            </AriaComboBox>
-          )
-        }}
+                      item.id
+                    : item) as FieldValues<Schema>[TFieldName]
+                  const text = children(fieldValue)
+                  const textValue = toTextValue?.(fieldValue) ?? text
+                  return (
+                    <ListBoxItem
+                      id={textValue}
+                      textValue={textValue}
+                      className={styles.listBoxItem()}
+                    >
+                      <Text truncate="1" className="w-full" tooltipPlacement="left">
+                        {text}
+                      </Text>
+                    </ListBoxItem>
+                  )
+                }}
+              </ListBox>
+            </Popover>
+          </AriaComboBox>
+        )}
       />
     </Form.Field>
   )
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/DatePicker/DatePicker.stories.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/DatePicker/DatePicker.stories.tsx
new file mode 100644
index 000000000000..662bac9cd99c
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/DatePicker/DatePicker.stories.tsx
@@ -0,0 +1,70 @@
+import { Text } from '#/components/AriaComponents/Text'
+import { roundedVariants } from '#/components/AriaComponents/utilities'
+import { CalendarDate, ZonedDateTime, now } from '@internationalized/date'
+import type { Meta, StoryObj } from '@storybook/react'
+import { z } from 'zod'
+import { Form } from '../../Form/index'
+import type { DatePickerProps } from './DatePicker'
+import { DatePicker } from './DatePicker'
+
+type Props = DatePickerProps<typeof schema, 'value'>
+type Story = StoryObj<Props>
+
+const schema = z.object({ value: z.instanceof(ZonedDateTime).or(z.instanceof(CalendarDate)) })
+
+const sizes = ['medium', 'small'] as const
+const roundeds = roundedVariants()
+
+export default {
+  title: 'Components/Inputs/DatePicker',
+  component: DatePicker,
+  render: (args) => <DatePicker {...args} />,
+  tags: ['autodocs'],
+  decorators: [
+    (Story, context) => (
+      <Form schema={schema} className="text-primary">
+        {Story(context)}
+      </Form>
+    ),
+  ],
+  args: { name: 'value' },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<Props>
+
+export const Default: Story = {}
+
+export const WithTime: Story = {
+  args: { name: 'value', defaultValue: now('Etc/GMT+0') } satisfies Props,
+}
+
+export const WithoutTimeZone: Story = {
+  args: { name: 'value', defaultValue: now('Etc/GMT+0'), hideTimeZone: true } satisfies Props,
+}
+
+export const Rounded: Story = {
+  render: (_Story, context) => (
+    <div className="grid grid-cols-3 gap-4">
+      {roundeds.map((rounded) => (
+        <div key={rounded} className="flex flex-col items-center gap-1">
+          <DatePicker {...context.args} rounded={rounded} />
+          <Text variant="caption">{rounded}</Text>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const Size: Story = {
+  render: (_Story, context) => (
+    <div className="around grid grid-cols-1 gap-4">
+      {sizes.map((size) => (
+        <div key={size} className="flex flex-col items-center gap-1">
+          <DatePicker {...context.args} size={size} />
+          <Text variant="caption">{size}</Text>
+        </div>
+      ))}
+    </div>
+  ),
+}
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx
index 18a3189d54b5..e0fd57661fba 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx
@@ -19,43 +19,47 @@ import {
   Dialog,
   Group,
   Heading,
+  I18nProvider,
   Label,
   type DatePickerProps as AriaDatePickerProps,
   type DateValue,
 } from '#/components/aria'
+import { useText } from '#/providers/TextProvider'
+import { forwardRef } from '#/utilities/react'
+import type { VariantProps } from '#/utilities/tailwindVariants'
+import { tv } from '#/utilities/tailwindVariants'
 import {
   Button,
   Form,
   Popover,
   Text,
+  makeRoundedStyles,
   type FieldComponentProps,
   type FieldPath,
   type FieldProps,
   type FieldStateProps,
   type FieldValues,
   type TSchema,
-} from '#/components/AriaComponents'
-import { useText } from '#/providers/TextProvider'
-import { forwardRef } from '#/utilities/react'
-import type { VariantProps } from '#/utilities/tailwindVariants'
-import { tv } from '#/utilities/tailwindVariants'
+} from '../..'
 
 const DATE_PICKER_STYLES = tv({
   base: '',
   variants: {
+    rounded: makeRoundedStyles('inputContainer'),
     size: {
       small: {
-        inputGroup: 'h-6 px-2',
+        inputContainer: 'h-6 px-2',
       },
       medium: {
-        inputGroup: 'h-8 px-4',
+        inputContainer: 'h-8 px-4',
       },
     },
   },
   slots: {
-    inputGroup: 'flex items-center gap-2 rounded-full border-0.5 border-primary/20',
-    dateInput: 'flex justify-center grow',
+    inputContainer: 'flex items-center gap-2 rounded-full border-0.5 border-primary/20',
+    dateInput: 'flex justify-start grow order-2',
     dateSegment: 'rounded placeholder-shown:text-primary/30 focus:bg-primary/10 px-[0.5px]',
+    calendarButton: 'order-1 rotate-90',
     resetButton: '',
     calendarPopover: '',
     calendarDialog: 'text-primary text-xs mx-2',
@@ -71,6 +75,7 @@ const DATE_PICKER_STYLES = tv({
   },
   defaultVariants: {
     size: 'medium',
+    rounded: 'xlarge',
   },
 })
 
@@ -119,6 +124,10 @@ export const DatePicker = forwardRef(function DatePicker<
     size,
     variants = DATE_PICKER_STYLES,
     granularity,
+    isInvalid,
+    style,
+    rounded,
+    ...rest
   } = props
 
   const { fieldState, formInstance } = useDateValueField({
@@ -128,7 +137,7 @@ export const DatePicker = forwardRef(function DatePicker<
     defaultValue,
   })
 
-  const styles = variants({ size })
+  const styles = variants({ size, rounded })
 
   return (
     <Form.Field
@@ -143,64 +152,71 @@ export const DatePicker = forwardRef(function DatePicker<
       isInvalid={fieldState.invalid}
       aria-details={props['aria-details']}
       ref={ref}
-      style={props.style}
+      style={style}
     >
       <Form.Controller
         control={formInstance.control}
         name={name}
-        render={(renderProps) => {
-          return (
-            <AriaDatePicker
-              className={styles.base({ className })}
-              {...(granularity != null ? { granularity } : {})}
-              {...renderProps.field}
-            >
-              <Label />
-              <Group className={styles.inputGroup()}>
-                <Button variant="icon" icon={ArrowIcon} className="rotate-90" />
+        render={(renderProps) => (
+          <AriaDatePicker
+            {...rest}
+            isInvalid={isInvalid ?? false}
+            className={styles.base({ className })}
+            {...(granularity != null ? { granularity } : {})}
+            {...renderProps.field}
+          >
+            <Label />
+            <Group className={styles.inputContainer()}>
+              {/* Use Swedish locale (`sv`) because it uses ISO dates. */}
+              <I18nProvider locale="sv">
                 <DateInput className={styles.dateInput()}>
                   {(segment) =>
                     segments[segment.type] === false ?
                       <></>
-                    : <DateSegment segment={segment} className={styles.dateSegment()} />
+                    : <DateSegment
+                        segment={segment}
+                        className={styles.dateSegment({
+                          className:
+                            segment.type === 'literal' && segment.text === ' ' ? 'w-1.5' : '',
+                        })}
+                      />
                   }
                 </DateInput>
-                {!noResetButton && <DatePickerResetButton className={styles.resetButton()} />}
-              </Group>
-              {props.description != null && <Text slot="description" />}
-              <Popover size="auto" className={styles.calendarPopover()}>
-                <Dialog className={styles.calendarDialog()}>
-                  <Calendar className={styles.calendarContainer()}>
-                    <header className={styles.calendarHeader()}>
-                      <Button
-                        variant="icon"
-                        slot="previous"
-                        icon={ArrowIcon}
-                        className="rotate-180"
-                      />
-                      <Heading className={styles.calendarHeading()} />
-                      <Button variant="icon" slot="next" icon={ArrowIcon} />
-                    </header>
-                    <CalendarGrid className={styles.calendarGrid()}>
-                      {noCalendarHeader ?
-                        <></>
-                      : <CalendarGridHeader className={styles.calendarGridHeader()}>
-                          {() => <CalendarHeaderCell className={styles.calendarGridHeaderCell()} />}
-                        </CalendarGridHeader>
-                      }
-                      <CalendarGridBody className={styles.calendarGridBody()}>
-                        {(date) => (
-                          <CalendarCell date={date} className={styles.calendarGridCell()} />
-                        )}
-                      </CalendarGridBody>
-                    </CalendarGrid>
-                    <Text slot="errorMessage" />
-                  </Calendar>
-                </Dialog>
-              </Popover>
-            </AriaDatePicker>
-          )
-        }}
+              </I18nProvider>
+              <Button variant="icon" icon={ArrowIcon} className={styles.calendarButton()} />
+              {!noResetButton && <DatePickerResetButton className={styles.resetButton()} />}
+            </Group>
+            {props.description != null && <Text slot="description" />}
+            <Popover size="auto" className={styles.calendarPopover()}>
+              <Dialog className={styles.calendarDialog()}>
+                <Calendar className={styles.calendarContainer()}>
+                  <header className={styles.calendarHeader()}>
+                    <Button
+                      variant="icon"
+                      slot="previous"
+                      icon={ArrowIcon}
+                      className="rotate-180"
+                    />
+                    <Heading className={styles.calendarHeading()} />
+                    <Button variant="icon" slot="next" icon={ArrowIcon} />
+                  </header>
+                  <CalendarGrid className={styles.calendarGrid()}>
+                    {noCalendarHeader ?
+                      <></>
+                    : <CalendarGridHeader className={styles.calendarGridHeader()}>
+                        {() => <CalendarHeaderCell className={styles.calendarGridHeaderCell()} />}
+                      </CalendarGridHeader>
+                    }
+                    <CalendarGridBody className={styles.calendarGridBody()}>
+                      {(date) => <CalendarCell date={date} className={styles.calendarGridCell()} />}
+                    </CalendarGridBody>
+                  </CalendarGrid>
+                  <Text slot="errorMessage" />
+                </Calendar>
+              </Dialog>
+            </Popover>
+          </AriaDatePicker>
+        )}
       />
     </Form.Field>
   )
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx
index c7fc4f2c9036..3cd192bbe1c4 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx
@@ -2,7 +2,7 @@
 import { useEffect, useMemo, useRef, useState, type ForwardedRef, type ReactNode } from 'react'
 
 import CheckMarkIcon from '#/assets/check_mark.svg'
-import FolderArrowIcon from '#/assets/folder_arrow.svg'
+import ArrowIcon from '#/assets/folder_arrow.svg'
 import {
   FieldError,
   ListBox,
@@ -17,9 +17,10 @@ import SvgMask from '#/components/SvgMask'
 import { useSyncRef } from '#/hooks/syncRefHooks'
 import { mergeRefs } from '#/utilities/mergeRefs'
 import { forwardRef } from '#/utilities/react'
-import { tv } from '#/utilities/tailwindVariants'
+import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 import {
   Form,
+  makeRoundedStyles,
   type FieldComponentProps,
   type FieldPath,
   type FieldProps,
@@ -28,7 +29,7 @@ import {
   type FieldVariantProps,
   type FormInstance,
   type TSchema,
-} from '../../Form'
+} from '../..'
 
 const DROPDOWN_STYLES = tv({
   base: 'focus-child group relative flex w-max cursor-pointer flex-col items-start whitespace-nowrap rounded-input leading-cozy',
@@ -36,13 +37,13 @@ const DROPDOWN_STYLES = tv({
     isFocused: {
       true: {
         container: 'z-1',
-        options: 'before:h-full before:shadow-soft before:bg-frame before:backdrop-blur-md',
+        options: 'before:shadow-soft before:bg-frame before:backdrop-blur-md',
         optionsContainer: 'grid-rows-1fr',
         input: 'z-1',
       },
       false: {
         container: 'overflow-hidden',
-        options: 'before:h-6 group-hover:before:bg-hover-bg',
+        options: 'before:h-full',
         optionsContainer: 'grid-rows-0fr',
       },
     },
@@ -56,21 +57,43 @@ const DROPDOWN_STYLES = tv({
         optionsItem: 'hover:font-semibold',
       },
     },
+    rounded: makeRoundedStyles('options', (classes) => `before:${classes}`),
+    size: {
+      medium: {
+        input: 'px-4 pb-[6.5px] pt-[8.5px]',
+        optionsItem: 'px-4',
+        hiddenOption: 'px-4',
+        icon: 'size-4',
+      },
+      small: {
+        input: 'px-4 pb-0.5 pt-1',
+        optionsItem: 'px-4',
+        hiddenOption: 'px-4',
+        icon: 'size-3',
+      },
+      custom: {},
+    },
   },
   slots: {
-    container: 'absolute left-0 h-full w-full min-w-max',
+    container: 'absolute left-0 min-h-full w-full min-w-max pb-px',
+    icon: '',
     options:
-      'relative before:absolute before:top-0 before:w-full before:rounded-input before:border-0.5 before:border-primary/20 before:transition-colors',
-    optionsSpacing: 'padding relative h-6',
+      'relative before:absolute before:top-0 before:h-full before:w-full before:rounded-input before:border-0.5 before:border-primary/20 before:transition-colors',
+    optionsSpacing: 'padding relative h-full',
     optionsContainer:
-      'relative grid max-h-dropdown-items w-full overflow-auto rounded-input transition-grid-template-rows',
+      'relative grid max-h-60 w-full overflow-auto rounded-input transition-grid-template-rows',
     optionsList: 'overflow-hidden',
     optionsItem:
-      'flex h-6 items-center gap-dropdown-arrow rounded-input px-input-x transition-colors focus:cursor-default focus:bg-frame focus:font-bold focus:focus-ring not-focus:hover:bg-hover-bg not-selected:hover:bg-hover-bg',
-    input: 'relative flex h-6 items-center gap-dropdown-arrow px-input-x',
+      'flex min-h-6 items-center gap-2 rounded-input transition-colors focus:cursor-default focus:bg-frame focus:font-bold focus:focus-ring not-focus:hover:bg-hover-bg not-selected:hover:bg-hover-bg',
+    input: 'group relative flex items-center gap-2',
+    dropdownArrow: 'rotate-90 opacity-80 group-hover:opacity-100',
     inputDisplay: 'grow select-none',
     hiddenOptions: 'flex h-0 flex-col overflow-hidden',
-    hiddenOption: 'flex gap-dropdown-arrow px-input-x font-bold',
+    hiddenOption: 'flex gap-2 font-bold',
+  },
+  defaultVariants: {
+    rounded: 'xlarge',
+    size: 'small',
   },
 })
 
@@ -91,7 +114,9 @@ interface InternalChildrenProps<T> {
 }
 
 /** Props for a {@link Dropdown} shared between all variants. */
-interface InternalBaseDropdownProps<T> extends InternalChildrenProps<T> {
+interface InternalBaseDropdownProps<T>
+  extends InternalChildrenProps<T>,
+    Omit<VariantProps<typeof DROPDOWN_STYLES>, 'isFocused' | 'isReadOnly' | 'multiple'> {
   readonly readOnly?: boolean
   readonly className?: string
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -121,7 +146,15 @@ export const Dropdown = forwardRef(function Dropdown<T>(
   props: DropdownProps<T>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const { readOnly = false, className, items, children: Child } = props
+  const {
+    readOnly = false,
+    className,
+    items,
+    rounded,
+    size,
+    variants = DROPDOWN_STYLES,
+    children: Child,
+  } = props
   const listBoxItems = useMemo(() => items.map((item, i) => ({ item, i })), [items])
   const [tempSelectedIndex, setTempSelectedIndex] = useState<number | null>(null)
   const rootRef = useRef<HTMLDivElement | null>(null)
@@ -148,7 +181,14 @@ export const Dropdown = forwardRef(function Dropdown<T>(
   const visuallySelectedItem = visuallySelectedIndex == null ? null : items[visuallySelectedIndex]
 
   const isFocused = isFocusVisible ? isFocusWithin : isMouseFocused
-  const styles = DROPDOWN_STYLES({ isFocused, isReadOnly: readOnly })
+
+  const styles = variants({
+    isFocused,
+    isReadOnly: readOnly,
+    multiple,
+    rounded,
+    size,
+  })
 
   useEffect(() => {
     setTempSelectedIndex(selectedIndex)
@@ -204,11 +244,10 @@ export const Dropdown = forwardRef(function Dropdown<T>(
         <div className={styles.container()}>
           <div className={styles.options()}>
             {/* Spacing. */}
-            <div className={styles.optionsSpacing()} />
+            <div className={styles.input()}>&nbsp;</div>
             <div className={styles.optionsContainer()}>
               <ListBox
-                // eslint-disable-next-line @typescript-eslint/naming-convention
-                {...(props['aria-label'] != null ? { 'aria-label': props['aria-label'] } : {})}
+                aria-label={props['aria-label'] ?? 'Dropdown'}
                 selectionMode={multiple ? 'multiple' : 'single'}
                 selectionBehavior={multiple ? 'toggle' : 'replace'}
                 items={listBoxItems}
@@ -247,7 +286,9 @@ export const Dropdown = forwardRef(function Dropdown<T>(
                   >
                     <SvgMask
                       src={CheckMarkIcon}
-                      className={selectedIndices.includes(i) ? '' : 'invisible'}
+                      className={styles.icon({
+                        className: selectedIndices.includes(i) ? '' : 'invisible',
+                      })}
                     />
                     <Child item={item} />
                   </ListBoxItem>
@@ -257,9 +298,11 @@ export const Dropdown = forwardRef(function Dropdown<T>(
           </div>
         </div>
         <div className={styles.input()}>
-          <SvgMask src={FolderArrowIcon} className="rotate-90" />
+          <SvgMask src={ArrowIcon} className={styles.dropdownArrow()} />
           <div className={styles.inputDisplay()}>
-            {visuallySelectedItem != null ?
+            {isMouseFocused && !multiple ?
+              '\u00a0'
+            : visuallySelectedItem != null ?
               <Child item={visuallySelectedItem} />
             : multiple && <props.renderMultiple items={selectedItems}>{Child}</props.renderMultiple>
             }
@@ -305,7 +348,7 @@ export function FormDropdown<
   TFieldName extends FieldPath<Schema, Constraint>,
   Constraint,
 >(props: FormDropdownProps<Schema, TFieldName, Constraint>) {
-  const { name, children, ...inputProps } = props
+  const { name, children, rounded, size, variants, ...inputProps } = props
   const { items } = inputProps
 
   const form = Form.useFormContext(props.form)
@@ -332,7 +375,14 @@ export function FormDropdown<
           const { value, onChange } = field
           return (
             <>
-              <Dropdown {...inputProps} selectedIndex={items.indexOf(value)} onChange={onChange}>
+              <Dropdown
+                {...inputProps}
+                selectedIndex={items.indexOf(value)}
+                onChange={onChange}
+                rounded={rounded}
+                size={size}
+                variants={variants}
+              >
                 {children}
               </Dropdown>
               <FieldError>{fieldState.error?.message}</FieldError>
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/Input/Input.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/Input/Input.tsx
index 3a1f25d9366a..95362e9318ae 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/Input/Input.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/Input/Input.tsx
@@ -43,7 +43,6 @@ export interface InputProps<
     FieldVariantProps,
     Omit<VariantProps<typeof INPUT_STYLES>, 'disabled' | 'invalid'>,
     TestIdProps {
-  // readonly className?: string
   readonly style?: CSSProperties
   readonly inputRef?: Ref<HTMLInputElement>
   readonly addonStart?: ReactNode
@@ -63,13 +62,9 @@ export const Input = forwardRef(function Input<
 >(props: InputProps<Schema, TFieldName, Constraint>, ref: ForwardedRef<HTMLDivElement>) {
   const {
     name,
-    description,
     inputRef,
-    addonStart,
-    addonEnd,
     size,
     rounded,
-    icon,
     type = 'text',
     variant,
     variants = INPUT_STYLES,
@@ -141,57 +136,136 @@ export const Input = forwardRef(function Input<
         form: formInstance,
       })}
       ref={ref}
-      name={props.name}
+      name={name}
       data-testid={testId}
     >
-      <div
-        className={classes.base()}
-        onClick={() => privateInputRef.current?.focus({ preventScroll: true })}
-      >
-        <div className={classes.content()}>
-          {addonStart != null && (
-            <div className={classes.addonStart()} data-testid="addon-start">
-              {addonStart}
-            </div>
-          )}
-
-          {icon != null &&
-            (typeof icon === 'string' ? <SvgMask src={icon} className={classes.icon()} /> : icon)}
-
-          <div className={classes.inputContainer()}>
-            <aria.Input
-              {...aria.mergeProps<aria.InputProps>()(
-                {
-                  className: (classNameStates) =>
-                    classes.textArea({ className: computedClassName(classNameStates) }),
-                  type,
-                  name,
-                  // eslint-disable-next-line @typescript-eslint/naming-convention
-                  'aria-invalid': invalid,
-                },
-                omit(inputProps, 'isInvalid', 'isRequired', 'isDisabled'),
-                omit(fieldProps, 'isInvalid', 'isRequired', 'isDisabled', 'invalid'),
-              )}
-              ref={(el) => {
-                mergeRefs(inputRef, privateInputRef, fieldProps.ref)(el)
-              }}
-              data-testid="input"
-            />
+      <UncontrolledInput
+        {...aria.mergeProps<UncontrolledInputProps>()(
+          {
+            className: (classNameStates) =>
+              classes.textArea({ className: computedClassName(classNameStates) }),
+            type,
+            name,
+            isInvalid: invalid,
+            isDisabled: disabled,
+          },
+          omit(inputProps, 'isInvalid', 'isRequired', 'isDisabled'),
+          omit(fieldProps, 'isInvalid', 'isRequired', 'isDisabled', 'invalid'),
+        )}
+        ref={(el) => {
+          mergeRefs(inputRef, fieldProps.ref)(el)
+        }}
+      />
+    </Form.Field>
+  )
+})
+
+/** Props for an {@link UncontrolledInput}. */
+export interface UncontrolledInputProps
+  extends Omit<aria.InputProps, 'children' | 'size'>,
+    Omit<VariantProps<typeof INPUT_STYLES>, 'disabled' | 'invalid'>,
+    TestIdProps {
+  readonly inputRef?: Ref<HTMLInputElement> | undefined
+  readonly description?: ReactNode | undefined
+  readonly addonStart?: ReactNode | undefined
+  readonly addonEnd?: ReactNode | undefined
+  readonly placeholder?: string | undefined
+  /** The icon to display in the input. */
+  readonly icon?: ReactElement | string | null | undefined
+  readonly isInvalid?: boolean | undefined
+  readonly isDisabled?: boolean | undefined
+  readonly variants?: ExtractFunction<typeof INPUT_STYLES> | undefined
+}
+
+/** An input without a {@link Form.Field}. */
+export const UncontrolledInput = forwardRef(function UncontrolledInput(
+  props: UncontrolledInputProps,
+  ref?: Ref<HTMLInputElement>,
+) {
+  const {
+    description,
+    addonStart,
+    addonEnd,
+    icon,
+    variant,
+    variants = INPUT_STYLES,
+    autoFocus = false,
+    size,
+    rounded,
+    isInvalid,
+    isDisabled,
+    className,
+    ...inputProps
+  } = props
+
+  const privateInputRef = useRef<HTMLInputElement>(null)
+
+  const classes = variants({
+    variant,
+    size,
+    rounded,
+    invalid: isInvalid,
+    readOnly: inputProps.readOnly,
+    disabled: isDisabled,
+  })
+
+  const computedClassName = (states: aria.InputRenderProps) => {
+    if (typeof className === 'function') {
+      return className({
+        ...states,
+        defaultClassName: classes.textArea(),
+      })
+    } else {
+      return className
+    }
+  }
+
+  useAutoFocus({ ref: privateInputRef, disabled: !autoFocus })
+
+  return (
+    <div
+      className={classes.base()}
+      onClick={() => privateInputRef.current?.focus({ preventScroll: true })}
+    >
+      <div className={classes.content()}>
+        {addonStart != null && (
+          <div className={classes.addonStart()} data-testid="addon-start">
+            {addonStart}
           </div>
+        )}
+
+        {icon != null &&
+          (typeof icon === 'string' ? <SvgMask src={icon} className={classes.icon()} /> : icon)}
 
-          {addonEnd != null && (
-            <div className={classes.addonEnd()} data-testid="addon-end">
-              {addonEnd}
-            </div>
-          )}
+        <div className={classes.inputContainer()}>
+          <aria.Input
+            {...aria.mergeProps<aria.InputProps>()(
+              {
+                className: (states) => classes.textArea({ className: computedClassName(states) }),
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'aria-invalid': isInvalid,
+              },
+              inputProps,
+            )}
+            ref={(el) => {
+              mergeRefs(ref, privateInputRef)(el)
+            }}
+            data-testid="input"
+          />
         </div>
 
-        {description != null && (
-          <Text slot="description" className={classes.description()} data-testid="description">
-            {description}
-          </Text>
+        {addonEnd != null && (
+          <div className={classes.addonEnd()} data-testid="addon-end">
+            {addonEnd}
+          </div>
         )}
       </div>
-    </Form.Field>
+
+      {description != null && (
+        <Text slot="description" className={classes.description()} data-testid="description">
+          {description}
+        </Text>
+      )}
+    </div>
   )
 })
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.stories.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.stories.tsx
index d231d73ee995..28d014d6ba43 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.stories.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.stories.tsx
@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { userEvent, within } from '@storybook/test'
 import { z } from 'zod'
 import { Form } from '../../Form'
-import type { MultiSelectorProps } from './MultiSelector.tsx'
-import { MultiSelector } from './MultiSelector.tsx'
+import type { MultiSelectorProps } from './MultiSelector'
+import { MultiSelector } from './MultiSelector'
 
 type Props = MultiSelectorProps<typeof schema, 'value', unknown>
 type Story = StoryObj<Props>
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx
index 452ffbd7e715..d9c165a7413d 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx
@@ -21,7 +21,16 @@ import {
 import { mergeRefs } from '#/utilities/mergeRefs'
 import { forwardRef } from '#/utilities/react'
 import { tv, type VariantProps } from '#/utilities/tailwindVariants'
-import { MultiSelectorOption } from './MultiSelectorOption'
+import { MultiSelectorOption, type MultiSelectorOptionProps } from './MultiSelectorOption'
+
+const OPTION_VARIANTS: Record<
+  MultiSelectorProps<never, never, never>['variant'] & {},
+  MultiSelectorOptionProps['variant'] & {}
+> = {
+  outline: 'default',
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  'separate-outline': 'outline',
+}
 
 /** * Props for the MultiSelector component. */
 export interface MultiSelectorProps<
@@ -54,7 +63,7 @@ export const MULTI_SELECTOR_STYLES = tv({
     },
     readOnly: { true: 'cursor-default' },
     size: {
-      medium: { base: '' },
+      medium: '',
     },
     rounded: {
       none: 'rounded-none',
@@ -67,9 +76,9 @@ export const MULTI_SELECTOR_STYLES = tv({
       full: 'rounded-full',
     },
     variant: {
-      outline: {
-        base: 'border-[0.5px] border-primary/20',
-      },
+      outline: 'border-[0.5px] border-primary/20',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'separate-outline': { listBox: 'gap-2' },
     },
   },
   defaultVariants: {
@@ -105,6 +114,7 @@ export const MultiSelector = forwardRef(function MultiSelector<
     size,
     rounded,
     isRequired = false,
+    variant,
     ...inputProps
   } = props
 
@@ -123,8 +133,11 @@ export const MultiSelector = forwardRef(function MultiSelector<
     rounded,
     readOnly: inputProps.readOnly,
     disabled: isDisabled || formInstance.formState.isSubmitting,
+    variant,
   })
 
+  const optionVariant = OPTION_VARIANTS[variant ?? 'outline']
+
   return (
     <Form.Field
       form={formInstance}
@@ -177,7 +190,13 @@ export const MultiSelector = forwardRef(function MultiSelector<
                 }}
               >
                 {items.map((item, i) => (
-                  <MultiSelectorOption key={i} id={i} value={{ item }} label={children(item)} />
+                  <MultiSelectorOption
+                    key={i}
+                    id={i}
+                    value={{ item }}
+                    label={children(item)}
+                    variant={optionVariant}
+                  />
                 ))}
               </ListBox>
             )
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelectorOption.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelectorOption.tsx
index b84fac5db031..577c5650bfcf 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelectorOption.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelectorOption.tsx
@@ -34,15 +34,20 @@ export const MULTI_SELECTOR_OPTION_STYLES = tv({
       medium: { base: 'px-[11px] pb-1.5 pt-2' },
       small: { base: 'px-[11px] pb-0.5 pt-1' },
     },
-    variant: {
+    color: {
       primary:
         'selected:bg-primary selected:text-white hover:bg-primary/5 pressed:bg-primary/10 outline outline-2 outline-transparent outline-offset-[-2px] focus-visible:outline-primary focus-visible:outline-offset-0',
     },
+    variant: {
+      default: '',
+      outline: 'border-[0.5px] border-primary/20',
+    },
   },
   defaultVariants: {
     size: 'medium',
     rounded: 'xxxlarge',
-    variant: 'primary',
+    color: 'primary',
+    variant: 'default',
   },
 })
 
@@ -50,7 +55,7 @@ export const MultiSelectorOption = forwardRef(function MultiSelectorOption(
   props: MultiSelectorOptionProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { label, ...radioProps } = props
+  const { label, size, rounded, color, variant, ...radioProps } = props
   const { className } = props
 
   return (
@@ -60,6 +65,10 @@ export const MultiSelectorOption = forwardRef(function MultiSelectorOption(
       className={(renderProps) =>
         MULTI_SELECTOR_OPTION_STYLES({
           className: typeof className === 'function' ? className(renderProps) : className,
+          size,
+          rounded,
+          color,
+          variant,
         })
       }
     >
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/TimeField/TimeField.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/TimeField/TimeField.tsx
new file mode 100644
index 000000000000..700adc5f3e6f
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/TimeField/TimeField.tsx
@@ -0,0 +1,193 @@
+/** @file A date picker. */
+import { useContext, type ForwardedRef } from 'react'
+
+import type { DateSegment as DateSegmentType } from 'react-stately'
+
+import CrossIcon from '#/assets/cross.svg'
+import {
+  TimeField as AriaTimeField,
+  DateInput,
+  DateSegment,
+  Group,
+  Label,
+  TimeFieldStateContext,
+  type TimeFieldProps as AriaTimeFieldProps,
+  type TimeValue,
+} from '#/components/aria'
+import {
+  Button,
+  Form,
+  Text,
+  type FieldComponentProps,
+  type FieldPath,
+  type FieldProps,
+  type FieldStateProps,
+  type FieldValues,
+  type TSchema,
+} from '#/components/AriaComponents'
+import { useText } from '#/providers/TextProvider'
+import { forwardRef } from '#/utilities/react'
+import type { VariantProps } from '#/utilities/tailwindVariants'
+import { tv } from '#/utilities/tailwindVariants'
+
+const DATE_PICKER_STYLES = tv({
+  base: '',
+  variants: {
+    size: {
+      small: {
+        inputGroup: 'h-6 px-2',
+      },
+      medium: {
+        inputGroup: 'h-8 px-4',
+      },
+    },
+  },
+  slots: {
+    inputGroup: 'flex items-center gap-2 rounded-full border-0.5 border-primary/20',
+    dateInput: 'flex justify-center grow',
+    dateSegment: 'rounded placeholder-shown:text-primary/30 focus:bg-primary/10 px-[0.5px]',
+    resetButton: '',
+    calendarPopover: '',
+    calendarDialog: 'text-primary text-xs mx-2',
+    calendarContainer: '',
+    calendarHeader: 'flex items-center mb-2',
+    calendarHeading: 'grow text-center',
+    calendarGrid: '',
+    calendarGridHeader: 'flex',
+    calendarGridHeaderCell: '',
+    calendarGridBody: '',
+    calendarGridCell:
+      'text-center px-1 rounded border border-transparent hover:bg-primary/10 outside-visible-range:text-primary/30 disabled:text-primary/30 selected:border-primary/40',
+  },
+  defaultVariants: {
+    size: 'medium',
+  },
+})
+
+/** Props for a {@link TimeField}. */
+export interface TimeFieldProps<
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema, TimeValue>,
+> extends Pick<AriaTimeFieldProps<TimeValue>, 'granularity'>,
+    FieldStateProps<
+      Omit<
+        AriaTimeFieldProps<Extract<FieldValues<Schema>[TFieldName], TimeValue>>,
+        'children' | 'className' | 'style'
+      >,
+      Schema,
+      TFieldName,
+      TimeValue
+    >,
+    FieldProps,
+    Pick<FieldComponentProps<Schema>, 'className' | 'style'>,
+    VariantProps<typeof DATE_PICKER_STYLES> {
+  readonly noResetButton?: boolean
+  readonly segments?: Partial<Record<DateSegmentType['type'], boolean>>
+}
+
+// This is a function, even though it does not contain function syntax.
+// eslint-disable-next-line no-restricted-syntax
+const useTimeValueField = Form.makeUseField<TimeValue>()
+
+/** A date picker. */
+export const TimeField = forwardRef(function TimeField<
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema, TimeValue>,
+>(props: TimeFieldProps<Schema, TFieldName>, ref: ForwardedRef<HTMLDivElement>) {
+  const {
+    isRequired = false,
+    noResetButton = isRequired,
+    segments = {},
+    name,
+    isDisabled,
+    form,
+    defaultValue,
+    label,
+    className,
+    size,
+    variants = DATE_PICKER_STYLES,
+    granularity,
+    style,
+    isInvalid,
+    ...rest
+  } = props
+
+  const { fieldState, formInstance } = useTimeValueField({
+    name,
+    isDisabled,
+    form,
+    defaultValue,
+  })
+
+  const styles = variants({ size })
+
+  return (
+    <Form.Field
+      form={formInstance}
+      name={name}
+      fullWidth
+      label={label}
+      aria-label={props['aria-label']}
+      aria-labelledby={props['aria-labelledby']}
+      aria-describedby={props['aria-describedby']}
+      isRequired={isRequired}
+      isInvalid={fieldState.invalid}
+      aria-details={props['aria-details']}
+      ref={ref}
+      style={style}
+    >
+      <Form.Controller
+        control={formInstance.control}
+        name={name}
+        render={(renderProps) => (
+          <AriaTimeField
+            {...rest}
+            isInvalid={isInvalid ?? false}
+            className={styles.base({ className })}
+            {...(granularity != null ? { granularity } : {})}
+            {...renderProps.field}
+          >
+            <Label />
+            <Group className={styles.inputGroup()}>
+              <DateInput className={styles.dateInput()}>
+                {(segment) =>
+                  segments[segment.type] === false ?
+                    <></>
+                  : <DateSegment segment={segment} className={styles.dateSegment()} />
+                }
+              </DateInput>
+              {!noResetButton && <TimeFieldResetButton className={styles.resetButton()} />}
+            </Group>
+            {props.description != null && <Text slot="description" />}
+          </AriaTimeField>
+        )}
+      />
+    </Form.Field>
+  )
+})
+
+/** Props for a {@link TimeFieldResetButton}. */
+interface TimeFieldResetButtonProps {
+  readonly className?: string
+}
+
+/** A reset button for a {@link TimeField}. */
+function TimeFieldResetButton(props: TimeFieldResetButtonProps) {
+  const { className } = props
+  const state = useContext(TimeFieldStateContext)
+  const { getText } = useText()
+
+  return (
+    <Button
+      // Do not inherit default Button behavior from TimeField.
+      slot={null}
+      variant="icon"
+      aria-label={getText('reset')}
+      icon={CrossIcon}
+      className={className ?? ''}
+      onPress={() => {
+        state?.setValue(null)
+      }}
+    />
+  )
+}
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/TimeField/index.ts b/app/gui/src/dashboard/components/AriaComponents/Inputs/TimeField/index.ts
new file mode 100644
index 000000000000..a0da83d9e6ba
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/TimeField/index.ts
@@ -0,0 +1,2 @@
+/** @file Barrel file for the `TimeField` component. */
+export * from './TimeField'
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/index.ts b/app/gui/src/dashboard/components/AriaComponents/Inputs/index.ts
index 4e5093094feb..385728e1f480 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/index.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/index.ts
@@ -14,4 +14,5 @@ export * from './OTPInput'
 export * from './Password'
 export * from './ResizableInput'
 export * from './Selector'
+export * from './TimeField'
 export * from './variants'
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/variants.ts b/app/gui/src/dashboard/components/AriaComponents/Inputs/variants.ts
index 908b5bdf988a..ddf19a72623f 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/variants.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/variants.ts
@@ -3,6 +3,7 @@
  *
  * Variants for the ResizableInput component.
  */
+import { makeRoundedStyles } from '#/components/AriaComponents/utilities'
 import { tv } from '#/utilities/tailwindVariants'
 import { TEXT_STYLE } from '../Text'
 
@@ -28,16 +29,7 @@ export const INPUT_STYLES = tv({
       small: { base: 'px-[11px] pb-0.5 pt-1', icon: 'size-3' },
       custom: {},
     },
-    rounded: {
-      none: { base: 'rounded-none' },
-      small: { base: 'rounded-sm' },
-      medium: { base: 'rounded-md' },
-      large: { base: 'rounded-lg' },
-      xlarge: { base: 'rounded-xl' },
-      xxlarge: { base: 'rounded-2xl' },
-      xxxlarge: { base: 'rounded-3xl' },
-      full: { base: 'rounded-full' },
-    },
+    rounded: makeRoundedStyles('base'),
     variant: {
       custom: {},
       outline: {
diff --git a/app/gui/src/dashboard/components/AriaComponents/Tooltip/index.ts b/app/gui/src/dashboard/components/AriaComponents/Tooltip/index.ts
index fbaec58309b2..ca9a5841d243 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Tooltip/index.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/Tooltip/index.ts
@@ -1,7 +1,2 @@
-/**
- * @file
- *
- * Barrel file for the Tooltip component.
- */
-
+/** @file Barrel file for the `Tooltip` component. */
 export * from './Tooltip'
diff --git a/app/gui/src/dashboard/components/AriaComponents/WithVisualTooltip/WithVisualTooltip.tsx b/app/gui/src/dashboard/components/AriaComponents/WithVisualTooltip/WithVisualTooltip.tsx
new file mode 100644
index 000000000000..024857734aac
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/WithVisualTooltip/WithVisualTooltip.tsx
@@ -0,0 +1,39 @@
+/** @file Wraps another component in a visual tooltip. */
+import { useRef, type PropsWithChildren, type ReactElement } from 'react'
+
+import type { Placement } from '#/components/aria'
+import { useVisualTooltip } from '#/components/AriaComponents/Text'
+
+/** Props for a {@link WithVisualTooltip}. */
+export interface WithVisualTooltipProps extends Readonly<PropsWithChildren> {
+  /** Falls back to `aria-label`. Pass `false` to explicitly disable the tooltip. */
+  readonly tooltip?: ReactElement | string | false | null | undefined
+  readonly tooltipPlacement?: Placement | undefined
+  readonly className?: string | undefined
+}
+
+/** Wrap an element in a visual tooltip. */
+export function WithVisualTooltip(props: WithVisualTooltipProps) {
+  const { tooltip, tooltipPlacement, className, children } = props
+  const shouldShowTooltip = tooltip !== false && tooltip != null
+  const ref = useRef<HTMLDivElement>(null)
+
+  const tooltipElement = shouldShowTooltip ? tooltip : null
+
+  const { tooltip: visualTooltip, targetProps } = useVisualTooltip({
+    targetRef: ref,
+    children: tooltipElement,
+    isDisabled: !shouldShowTooltip,
+    ...(tooltipPlacement && { overlayPositionProps: { placement: tooltipPlacement } }),
+  })
+
+  if (tooltipElement == null) {
+    return children
+  }
+
+  return (
+    <div ref={ref} className={className} {...targetProps}>
+      {children} {visualTooltip}
+    </div>
+  )
+}
diff --git a/app/gui/src/dashboard/components/AriaComponents/WithVisualTooltip/index.ts b/app/gui/src/dashboard/components/AriaComponents/WithVisualTooltip/index.ts
new file mode 100644
index 000000000000..b40a379c3fc5
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/WithVisualTooltip/index.ts
@@ -0,0 +1,2 @@
+/** @file Barrel file for the `WithVisualTooltip` component. */
+export * from './WithVisualTooltip'
diff --git a/app/gui/src/dashboard/components/AriaComponents/index.ts b/app/gui/src/dashboard/components/AriaComponents/index.ts
index b456905aadc8..fabf723fa374 100644
--- a/app/gui/src/dashboard/components/AriaComponents/index.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/index.ts
@@ -17,4 +17,6 @@ export * from './Text'
 export * from './Tooltip'
 export * from './types'
 export * from './Underlay'
+export * from './utilities'
 export * from './VisuallyHidden'
+export * from './WithVisualTooltip'
diff --git a/app/gui/src/dashboard/components/AriaComponents/utilities.ts b/app/gui/src/dashboard/components/AriaComponents/utilities.ts
new file mode 100644
index 000000000000..f10dec81884b
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/utilities.ts
@@ -0,0 +1,26 @@
+/** @file Constants for aria components. */
+
+import { identity } from '#/utilities/functions'
+import { unsafeKeyValuePair } from 'enso-common/src/utilities/data/object'
+
+/** Possible values for the `rounded` variant. */
+export function roundedVariants() {
+  return Object.keys(makeRoundedStyles(''))
+}
+
+/** Make a set of rounded styles. UNSAFE when `Key` is not a string literal type. */
+export function makeRoundedStyles<Key extends string>(
+  key: Key,
+  map: (value: string) => string = identity,
+) {
+  return {
+    none: unsafeKeyValuePair(key, map('rounded-none')),
+    small: unsafeKeyValuePair(key, map('rounded-sm')),
+    medium: unsafeKeyValuePair(key, map('rounded-md')),
+    large: unsafeKeyValuePair(key, map('rounded-lg')),
+    xlarge: unsafeKeyValuePair(key, map('rounded-xl')),
+    xxlarge: unsafeKeyValuePair(key, map('rounded-2xl')),
+    xxxlarge: unsafeKeyValuePair(key, map('rounded-3xl')),
+    full: unsafeKeyValuePair(key, map('rounded-full')),
+  } as const
+}
diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsImpl.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsImpl.tsx
index bd2672079ffe..094587d7a1d5 100644
--- a/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsImpl.tsx
+++ b/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsImpl.tsx
@@ -222,7 +222,6 @@ export function EnsoDevtools() {
                       setFeatureFlag('enableMultitabs', value)
                     }}
                   />
-
                   <div>
                     <ariaComponents.Switch
                       form={form}
@@ -254,7 +253,6 @@ export function EnsoDevtools() {
                       }}
                     />
                   </div>
-
                   <ariaComponents.Switch
                     form={form}
                     name="enableCloudExecution"
@@ -264,7 +262,6 @@ export function EnsoDevtools() {
                       setFeatureFlag('enableCloudExecution', value)
                     }}
                   />
-
                   <ariaComponents.Switch
                     form={form}
                     name="enableAsyncExecution"
@@ -274,6 +271,15 @@ export function EnsoDevtools() {
                       setFeatureFlag('enableAsyncExecution', value)
                     }}
                   />
+                  <ariaComponents.Switch
+                    form={form}
+                    name="enableAdvancedProjectExecutionOptions"
+                    label="Enable Advanced Project Excecution Options"
+                    description="Enable Advanced Project Excecution Options"
+                    onChange={(value) => {
+                      setFeatureFlag('enableAdvancedProjectExecutionOptions', value)
+                    }}
+                  />
                 </>
               )}
             </ariaComponents.Form>
diff --git a/app/gui/src/dashboard/hooks/backendHooks.ts b/app/gui/src/dashboard/hooks/backendHooks.ts
index 2963135924c9..416bd32fcf64 100644
--- a/app/gui/src/dashboard/hooks/backendHooks.ts
+++ b/app/gui/src/dashboard/hooks/backendHooks.ts
@@ -56,6 +56,8 @@ import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
 import type { MergeValuesOfObjectUnion } from 'enso-common/src/utilities/data/object'
 import { useMemo } from 'react'
 
+const PROJECT_EXECUTIONS_STALE_TIME = 60_000
+
 export function backendQueryOptions<Method extends BackendQueryMethod>(
   backend: Backend,
   method: Method,
@@ -823,3 +825,28 @@ export function duplicateProjectMutationOptions(
     },
   })
 }
+
+/** Build a query options object to list executions for a project. */
+export function listProjectExecutionsQueryOptions(
+  backend: Backend,
+  id: backendModule.ProjectId,
+  title: string,
+) {
+  return queryOptions({
+    ...backendQueryOptions(backend, 'listProjectExecutions', [id, title]),
+    select: (executions) => [...executions].reverse(),
+    staleTime: PROJECT_EXECUTIONS_STALE_TIME,
+  })
+}
+
+/** Build a query options object to get details for a project execution. */
+export function getProjectExecutionDetailsQueryOptions(
+  backend: Backend,
+  id: backendModule.ProjectExecutionId,
+  title: string,
+) {
+  return queryOptions({
+    ...backendQueryOptions(backend, 'getProjectExecutionDetails', [id, title]),
+    staleTime: PROJECT_EXECUTIONS_STALE_TIME,
+  })
+}
diff --git a/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecution.tsx b/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecution.tsx
index ca38548cf9e0..de8acf48c969 100644
--- a/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecution.tsx
+++ b/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecution.tsx
@@ -1,36 +1,47 @@
 /** @file Displays information describing a specific version of an asset. */
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQuery } from '@tanstack/react-query'
 
 import {
   DAY_3_LETTER_TEXT_IDS,
   DAY_TEXT_IDS,
-  DAYS_PER_WEEK,
-  HOUR_MINUTE,
-  HOURS_PER_DAY,
-  MINUTE_MS,
   MONTH_3_LETTER_TEXT_IDS,
 } from 'enso-common/src/utilities/data/dateTime'
 
+import LogsIcon from '#/assets/logs.svg'
 import RepeatIcon from '#/assets/repeat.svg'
 import TimeIcon from '#/assets/time.svg'
 import { DialogTrigger } from '#/components/aria'
-import { Button, ButtonGroup, CloseButton } from '#/components/AriaComponents'
-import { backendMutationOptions } from '#/hooks/backendHooks'
+import {
+  Button,
+  ButtonGroup,
+  CloseButton,
+  Text,
+  WithVisualTooltip,
+} from '#/components/AriaComponents'
+import {
+  backendMutationOptions,
+  getProjectExecutionDetailsQueryOptions,
+} from '#/hooks/backendHooks'
 import { useGetOrdinal } from '#/hooks/ordinalHooks'
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
+import ProjectLogsModal from '#/modals/ProjectLogsModal'
+import { useFeatureFlag } from '#/providers/FeatureFlagsProvider'
 import { useLocalStorageState } from '#/providers/LocalStorageProvider'
 import { useText } from '#/providers/TextProvider'
 import type Backend from '#/services/Backend'
 import * as backendModule from '#/services/Backend'
 import { tv } from '#/utilities/tailwindVariants'
-import { getLocalTimeZone, now } from '@internationalized/date'
+import { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date'
 
+/** The maximum duration, in milliseconds, between two dates to be considered the same project execution. */
+const EXECUTION_TIME_DIFFERENCE_THRESHOLD_MS = 60_000
 const MONTHS_IN_YEAR = 12
 
 const PROJECT_EXECUTION_STYLES = tv({
   base: 'group flex flex-row gap-1 w-full rounded-default items-center odd:bg-primary/5 p-2',
   variants: {
     isEnabled: { false: { time: 'opacity-50', optionContainer: 'opacity-50' } },
+    compact: { true: { base: 'px-2' } },
   },
   slots: {
     timeContainer: 'flex flex-row items-center gap-2 grow px-2 py-0.5',
@@ -47,81 +58,69 @@ const PROJECT_EXECUTION_STYLES = tv({
 /** Props for a {@link ProjectExecution}. */
 export interface ProjectExecutionProps {
   /** Defaults to `false`. */
-  readonly hideDay?: boolean
+  readonly compact?: boolean
   readonly backend: Backend
   readonly item: backendModule.ProjectAsset
   readonly projectExecution: backendModule.ProjectExecution
   /** Defaults to the first date of `projectExecution` if not given. */
-  readonly date?: Date
+  readonly date?: ZonedDateTime
 }
 
 /** Displays information describing a specific version of an asset. */
 export function ProjectExecution(props: ProjectExecutionProps) {
-  const { backend, item, projectExecution, date } = props
+  const { compact = false, backend, item, projectExecution, date } = props
   const { getText } = useText()
   const getOrdinal = useGetOrdinal()
-  const [timeZone] = useLocalStorageState('preferredTimeZone')
+  const [timeZone = getLocalTimeZone()] = useLocalStorageState('preferredTimeZone')
+  const enableAdvancedProjectExecutionOptions = useFeatureFlag(
+    'enableAdvancedProjectExecutionOptions',
+  )
   const { repeat } = projectExecution
 
-  const timeZoneOffsetMs =
-    now(timeZone ?? getLocalTimeZone()).offset - now(projectExecution.timeZone).offset
-  const timeZoneOffsetMinutesTotal = Math.trunc(timeZoneOffsetMs / MINUTE_MS)
-  let timeZoneOffsetHours = Math.floor(timeZoneOffsetMinutesTotal / HOUR_MINUTE)
-  const timeZoneOffsetMinutes = timeZoneOffsetMinutesTotal - timeZoneOffsetHours * HOUR_MINUTE
-
-  const startDate = new Date(projectExecution.startDate)
-  let minute = startDate.getMinutes()
-  minute += timeZoneOffsetMinutes
-  while (minute < 0) {
-    minute += HOUR_MINUTE
-    timeZoneOffsetHours += 1
-  }
-  while (minute > HOUR_MINUTE) {
-    minute -= HOUR_MINUTE
-    timeZoneOffsetHours -= 1
-  }
-  const minuteString = String(minute).padStart(2, '0')
-  const startDateHour = (startDate.getHours() + timeZoneOffsetHours + HOURS_PER_DAY) % HOURS_PER_DAY
-  const startDateDailyRepeat = getText(
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    startDateHour > 11 ? 'xPm' : 'xAm',
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    `${startDateHour % 12 || 12}:${minuteString}`,
+  const { data: details } = useQuery(
+    getProjectExecutionDetailsQueryOptions(backend, projectExecution.executionId, item.title),
   )
 
+  const sessions = details?.projectSessions
+  const session =
+    date == null ? null : (
+      sessions?.find(
+        (otherSession) =>
+          Number(new Date(otherSession.createdAt)) - Number(date.toDate()) <
+          EXECUTION_TIME_DIFFERENCE_THRESHOLD_MS,
+      )
+    )
+
   const repeatString = (() => {
     if (date) {
-      const hour = (date.getHours() + timeZoneOffsetHours + HOURS_PER_DAY) % HOURS_PER_DAY
+      const minuteString = String(date.minute).padStart(2, '0')
       // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      return getText(hour > 11 ? 'xPm' : 'xAm', `${hour % 12 || 12}:${minuteString}`)
+      return getText(date.hour > 11 ? 'xPm' : 'xAm', `${date.hour % 12 || 12}:${minuteString}`)
     } else {
+      const zonedStartDate = parseAbsolute(projectExecution.startDate, timeZone)
+      const minuteString = String(zonedStartDate.minute).padStart(2, '0')
+      const startDateDailyRepeat = getText(
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        zonedStartDate.hour > 11 ? 'xPm' : 'xAm',
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        `${zonedStartDate.hour % 12 || 12}:${minuteString}`,
+      )
       switch (repeat.type) {
         case 'none': {
           return getText('doesNotRepeat')
         }
-        case 'hourly': {
-          const startHour = (repeat.startHour + timeZoneOffsetHours + HOURS_PER_DAY) % HOURS_PER_DAY
-          const endHour = (repeat.endHour + timeZoneOffsetHours + HOURS_PER_DAY) % HOURS_PER_DAY
-          return getText(
-            'hourlyBetweenX',
-            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-            getText(startHour > 11 ? 'xPm' : 'xAm', `${startHour % 12 || 12}:${minuteString}`),
-            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-            getText(endHour > 11 ? 'xPm' : 'xAm', `${endHour % 12 || 12}:${minuteString}`),
-          )
-        }
         case 'daily': {
-          const dayNames =
-            repeat.daysOfWeek.length === DAYS_PER_WEEK ?
-              getText('everyDaySuffix')
-            : repeat.daysOfWeek
-                .map((day) => getText(DAY_3_LETTER_TEXT_IDS[day] ?? 'monday3'))
-                .join(', ')
+          return `${startDateDailyRepeat} ${getText('everyDaySuffix')}`
+        }
+        case 'weekly': {
+          const dayNames = repeat.daysOfWeek
+            .map((day) => getText(DAY_3_LETTER_TEXT_IDS[day] ?? 'monday3'))
+            .join(', ')
           return `${startDateDailyRepeat} ${dayNames}`
         }
-        case 'monthly-date':
-        case 'monthly-weekday':
-        case 'monthly-last-weekday': {
+        case 'monthlyDate':
+        case 'monthlyWeekday':
+        case 'monthlyLastWeekday': {
           const monthNames =
             repeat.months.length === MONTHS_IN_YEAR ?
               getText('everyMonth')
@@ -129,7 +128,7 @@ export function ProjectExecution(props: ProjectExecutionProps) {
                 .map((month) => getText(MONTH_3_LETTER_TEXT_IDS[month] ?? 'january3'))
                 .join(', ')
           switch (repeat.type) {
-            case 'monthly-date': {
+            case 'monthlyDate': {
               return getText(
                 'repeatsTimeXMonthsXDateX',
                 startDateDailyRepeat,
@@ -137,7 +136,7 @@ export function ProjectExecution(props: ProjectExecutionProps) {
                 getOrdinal(repeat.date),
               )
             }
-            case 'monthly-weekday': {
+            case 'monthlyWeekday': {
               return getText(
                 'repeatsTimeXMonthsXDayXWeekX',
                 startDateDailyRepeat,
@@ -146,7 +145,7 @@ export function ProjectExecution(props: ProjectExecutionProps) {
                 getText('xthWeek', getOrdinal(repeat.weekNumber)),
               )
             }
-            case 'monthly-last-weekday': {
+            case 'monthlyLastWeekday': {
               return getText(
                 'repeatsTimeXMonthsXDayXLastWeek',
                 startDateDailyRepeat,
@@ -161,17 +160,54 @@ export function ProjectExecution(props: ProjectExecutionProps) {
   })()
 
   const styles = PROJECT_EXECUTION_STYLES({
-    isEnabled: projectExecution.enabled,
+    compact,
+    isEnabled: true,
   })
 
   const deleteProjectExecution = useMutation(
     backendMutationOptions(backend, 'deleteProjectExecution'),
   )
 
+  const repeatEl = <div>{repeatString}</div>
+
+  const maxDurationLabel = getText('maxDurationLabel')
+  const maxDurationDescription = getText('xMinutes', projectExecution.maxDurationMinutes)
+  const repeatIntervalLabel = getText('repeatIntervalLabel')
+  const repeatIntervalDescription = getText(
+    backendModule.PROJECT_EXECUTION_REPEAT_TYPE_TO_TEXT_ID[projectExecution.repeat.type],
+  )
+
   return (
     <div className={styles.base()}>
       <div className={styles.timeContainer()}>
-        <div className={styles.times()}>{repeatString}</div>
+        {!compact ?
+          repeatEl
+        : <WithVisualTooltip
+            tooltip={
+              <div>
+                {enableAdvancedProjectExecutionOptions && (
+                  <Text color="inherit">{`${maxDurationLabel}: ${maxDurationDescription}`}</Text>
+                )}
+                <Text color="inherit">{`${repeatIntervalLabel}: ${repeatIntervalDescription}`}</Text>
+              </div>
+            }
+            tooltipPlacement="left"
+            className={styles.times()}
+          >
+            {repeatEl}
+          </WithVisualTooltip>
+        }
+        {session && (
+          <DialogTrigger>
+            <Button variant="icon" isActive icon={LogsIcon} aria-label={getText('showLogs')} />
+
+            <ProjectLogsModal
+              backend={backend}
+              projectSessionId={session.projectSessionId}
+              projectTitle={item.title}
+            />
+          </DialogTrigger>
+        )}
         <DialogTrigger>
           <CloseButton
             className={styles.timeButtons()}
@@ -186,30 +222,32 @@ export function ProjectExecution(props: ProjectExecutionProps) {
           />
         </DialogTrigger>
       </div>
-      <ButtonGroup className={styles.optionContainer()}>
-        <Button
-          size="xsmall"
-          variant="outline"
-          icon={TimeIcon}
-          tooltip={getText('maxDurationLabel')}
-          tooltipPlacement="left"
-          className={styles.maximumDuration()}
-        >
-          {getText('xMinutes', projectExecution.maxDurationMinutes)}
-        </Button>
-        <Button
-          size="xsmall"
-          variant="outline"
-          icon={RepeatIcon}
-          tooltip={getText('repeatIntervalLabel')}
-          tooltipPlacement="left"
-          className={styles.repeatInterval()}
-        >
-          {getText(
-            backendModule.PROJECT_EXECUTION_REPEAT_TYPE_TO_TEXT_ID[projectExecution.repeat.type],
+      {!compact && (
+        <ButtonGroup className={styles.optionContainer()}>
+          {enableAdvancedProjectExecutionOptions && (
+            <Button
+              size="xsmall"
+              variant="outline"
+              icon={TimeIcon}
+              tooltip={maxDurationLabel}
+              tooltipPlacement="left"
+              className={styles.maximumDuration()}
+            >
+              {maxDurationDescription}
+            </Button>
           )}
-        </Button>
-      </ButtonGroup>
+          <Button
+            size="xsmall"
+            variant="outline"
+            icon={RepeatIcon}
+            tooltip={repeatIntervalLabel}
+            tooltipPlacement="left"
+            className={styles.repeatInterval()}
+          >
+            {repeatIntervalDescription}
+          </Button>
+        </ButtonGroup>
+      )}
     </div>
   )
 }
diff --git a/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecutions.tsx b/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecutions.tsx
index af63504a132d..5e2d1336520f 100644
--- a/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecutions.tsx
+++ b/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecutions.tsx
@@ -1,8 +1,8 @@
 /** @file A list of exeuctions of a project. */
-import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 
 import { Button, DialogTrigger, Text } from '#/components/AriaComponents'
-import { backendQueryOptions } from '#/hooks/backendHooks'
+import { listProjectExecutionsQueryOptions } from '#/hooks/backendHooks'
 import { useStore } from '#/hooks/storeHooks'
 import { assetPanelStore } from '#/layouts/AssetPanel/AssetPanelState'
 import { AssetPanelPlaceholder } from '#/layouts/AssetPanel/components/AssetPanelPlaceholder'
@@ -48,10 +48,7 @@ function ProjectExecutionsInternal(props: ProjectExecutionsInternalProps) {
   const { getText } = useText()
 
   const projectExecutionsQuery = useSuspenseQuery(
-    queryOptions({
-      ...backendQueryOptions(backend, 'listProjectExecutions', [item.id, item.title]),
-      select: (executions) => [...executions].reverse(),
-    }),
+    listProjectExecutionsQueryOptions(backend, item.id, item.title),
   )
   const projectExecutions = projectExecutionsQuery.data
 
diff --git a/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecutionsCalendar.tsx b/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecutionsCalendar.tsx
index 1c1b0f1be2cd..49698ce4d08c 100644
--- a/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecutionsCalendar.tsx
+++ b/app/gui/src/dashboard/layouts/AssetPanel/components/ProjectExecutionsCalendar.tsx
@@ -4,16 +4,17 @@ import { useState } from 'react'
 import {
   CalendarDate,
   getLocalTimeZone,
-  parseAbsolute,
   startOfMonth,
   toCalendarDate,
   today,
   toZoned,
+  type ZonedDateTime,
 } from '@internationalized/date'
 import { useSuspenseQuery } from '@tanstack/react-query'
 
 import { getProjectExecutionRepetitionsForDateRange } from 'enso-common/src/services/Backend/projectExecution'
 
+import CalendarIcon from '#/assets/calendar_repeat_outline.svg'
 import ArrowIcon from '#/assets/folder_arrow.svg'
 import {
   Calendar,
@@ -25,6 +26,7 @@ import {
   Heading,
 } from '#/components/aria'
 import { Button, DialogTrigger, Form, Text } from '#/components/AriaComponents'
+import { listProjectExecutionsQueryOptions } from '#/hooks/backendHooks'
 import { useStore } from '#/hooks/storeHooks'
 import { assetPanelStore } from '#/layouts/AssetPanel/AssetPanelState'
 import { AssetPanelPlaceholder } from '#/layouts/AssetPanel/components/AssetPanelPlaceholder'
@@ -108,30 +110,27 @@ function ProjectExecutionsCalendarInternal(props: ProjectExecutionsCalendarInter
     defaultValue: todayDate,
   })
 
-  const projectExecutionsQuery = useSuspenseQuery({
-    queryKey: [backend.type, 'listProjectExecutions', item.id, item.title],
-    queryFn: async () => {
-      const executions = await backend.listProjectExecutions(item.id, item.title)
-      return [...executions].reverse()
-    },
-  })
+  const projectExecutionsQuery = useSuspenseQuery(
+    listProjectExecutionsQueryOptions(backend, item.id, item.title),
+  )
   const projectExecutions = projectExecutionsQuery.data
 
   const start = startOfMonth(focusedMonth)
-  const startDate = start.toDate(timeZone)
+  const startDate = toZoned(start, timeZone)
   const end = startOfMonth(focusedMonth.add({ months: 1 }))
-  const endDate = end.toDate(timeZone)
+  const endDate = toZoned(end, timeZone)
   const projectExecutionsByDate: Record<
     string,
-    { readonly date: Date; readonly projectExecution: BackendProjectExecution }[]
+    { readonly date: ZonedDateTime; readonly projectExecution: BackendProjectExecution }[]
   > = {}
+
   for (const projectExecution of projectExecutions) {
     for (const date of getProjectExecutionRepetitionsForDateRange(
       projectExecution,
       startDate,
       endDate,
     )) {
-      const dateString = toCalendarDate(parseAbsolute(date.toISOString(), timeZone)).toString()
+      const dateString = toCalendarDate(date).toString()
       ;(projectExecutionsByDate[dateString] ??= []).push({ date, projectExecution })
     }
   }
@@ -143,8 +142,8 @@ function ProjectExecutionsCalendarInternal(props: ProjectExecutionsCalendarInter
     .flatMap((projectExecution) =>
       getProjectExecutionRepetitionsForDateRange(
         projectExecution,
-        selectedDate.toDate(timeZone),
-        selectedDate.add({ days: 1 }).toDate(timeZone),
+        toZoned(selectedDate, timeZone),
+        toZoned(selectedDate.add({ days: 1 }), timeZone),
       ).flatMap((date) => ({ date, projectExecution })),
     )
     .sort((a, b) => Number(a.date) - Number(b.date))
@@ -178,8 +177,13 @@ function ProjectExecutionsCalendarInternal(props: ProjectExecutionsCalendarInter
               <CalendarGridBody className={styles.calendarGridBody()}>
                 {(date) => {
                   const isToday = date.compare(todayDate) === 0
+                  const todaysExecutions = projectExecutionsByDate[date.toString()]
                   return (
-                    <CalendarCell date={date} className={styles.calendarGridCell()}>
+                    <CalendarCell
+                      key={date.toString()}
+                      date={date}
+                      className={styles.calendarGridCell()}
+                    >
                       <div className="flex flex-col items-center">
                         <Text
                           weight={isToday ? 'bold' : 'medium'}
@@ -187,9 +191,23 @@ function ProjectExecutionsCalendarInternal(props: ProjectExecutionsCalendarInter
                         >
                           {date.day}
                         </Text>
-                        {projectExecutionsByDate[date.toString()]?.map((data) => (
-                          <Text color="disabled">{`${data.date.getHours().toString().padStart(2, '0')}:${data.date.getMinutes().toString().padStart(2, '0')}`}</Text>
-                        ))}
+                        {todaysExecutions && (
+                          <Button
+                            slot={null}
+                            isDisabled
+                            tooltip={getText(
+                              'xExecutionsScheduledOnX',
+                              todaysExecutions.length,
+                              date.toString(),
+                            )}
+                            size="xxsmall"
+                            variant="custom"
+                            className="disabled:opacity-100"
+                            icon={CalendarIcon}
+                          >
+                            {todaysExecutions.length}
+                          </Button>
+                        )}
                       </div>
                     </CalendarCell>
                   )
@@ -207,26 +225,19 @@ function ProjectExecutionsCalendarInternal(props: ProjectExecutionsCalendarInter
           defaultDate={toZoned(selectedDate, timeZone)}
         />
       </DialogTrigger>
-      <>
-        <Text>
-          {getText(
-            'projectSessionsOnX',
-            Intl.DateTimeFormat().format(selectedDate.toDate(timeZone)),
-          )}
-        </Text>
-        {projectExecutionsForToday.length === 0 ?
-          <Text color="disabled">{getText('noProjectExecutions')}</Text>
-        : projectExecutionsForToday.map(({ projectExecution, date }) => (
-            <ProjectExecution
-              hideDay
-              backend={backend}
-              item={item}
-              projectExecution={projectExecution}
-              date={date}
-            />
-          ))
-        }
-      </>
+      <Text>{getText('projectSessionsOnX', selectedDate.toString())}</Text>
+      {projectExecutionsForToday.length === 0 ?
+        <Text color="disabled">{getText('noProjectExecutions')}</Text>
+      : projectExecutionsForToday.map(({ projectExecution, date }) => (
+          <ProjectExecution
+            compact
+            backend={backend}
+            item={item}
+            projectExecution={projectExecution}
+            date={date}
+          />
+        ))
+      }
     </Form>
   )
 }
diff --git a/app/gui/src/dashboard/layouts/AssetPanel/types.ts b/app/gui/src/dashboard/layouts/AssetPanel/types.ts
index 2d0dc07b61b0..ac8d4c0f1f8e 100644
--- a/app/gui/src/dashboard/layouts/AssetPanel/types.ts
+++ b/app/gui/src/dashboard/layouts/AssetPanel/types.ts
@@ -4,7 +4,14 @@
  */
 
 /** Determines the content of the {@link import('./AssetPanel').AssetPanel}. */
-export const ASSET_PANEL_TABS = ['settings', 'versions', 'sessions', 'schedules', 'docs'] as const
+export const ASSET_PANEL_TABS = [
+  'settings',
+  'versions',
+  'sessions',
+  'executions',
+  'executionsCalendar',
+  'docs',
+] as const
 
 /** Determines the content of the {@link import('./AssetPanel').AssetPanel}. */
 export type AssetPanelTab = (typeof ASSET_PANEL_TABS)[number]
diff --git a/app/gui/src/dashboard/layouts/NewProjectExecutionModal.tsx b/app/gui/src/dashboard/layouts/NewProjectExecutionModal.tsx
index 7221108c6b3a..6eba9df80052 100644
--- a/app/gui/src/dashboard/layouts/NewProjectExecutionModal.tsx
+++ b/app/gui/src/dashboard/layouts/NewProjectExecutionModal.tsx
@@ -1,20 +1,13 @@
 /** @file Modal for confirming delete of any type of asset. */
 import * as z from 'zod'
 
-import {
-  ZonedDateTime,
-  endOfMonth,
-  getDayOfWeek,
-  getLocalTimeZone,
-  now,
-} from '@internationalized/date'
+import { endOfMonth, getLocalTimeZone, now, toZoned, ZonedDateTime } from '@internationalized/date'
 import { useMutation } from '@tanstack/react-query'
 
 import type Backend from '#/services/Backend'
 import type {
   ProjectExecutionInfo,
   ProjectExecutionRepeatInfo,
-  ProjectExecutionRepeatType,
   ProjectId,
 } from '#/services/Backend'
 import {
@@ -28,6 +21,7 @@ import {
 import {
   Button,
   ButtonGroup,
+  ComboBox,
   DatePicker,
   Dialog,
   DialogDismiss,
@@ -41,6 +35,7 @@ import {
 import { backendMutationOptions } from '#/hooks/backendHooks'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useGetOrdinal } from '#/hooks/ordinalHooks'
+import { useSyncRef } from '#/hooks/syncRefHooks'
 import { useFeatureFlag } from '#/providers/FeatureFlagsProvider'
 import { useLocalStorageState } from '#/providers/LocalStorageProvider'
 import { useText } from '#/providers/TextProvider'
@@ -51,134 +46,127 @@ import {
 import {
   DAY_3_LETTER_TEXT_IDS,
   DAY_TEXT_IDS,
+  DAYS,
+  DAYS_PER_WEEK,
+  getDay,
+  getTimeZoneOffsetStringWithGMT,
+  getWeekOfMonth,
   MONTH_3_LETTER_TEXT_IDS,
+  MONTHS,
+  MONTHS_PER_YEAR,
   toRfc3339,
+  WHITELISTED_TIME_ZONE_MAP,
+  WHITELISTED_TIME_ZONES,
+  zonedDateTimeToReadableIsoString,
 } from 'enso-common/src/utilities/data/dateTime'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
+// This is a SAFE upcast.
+// eslint-disable-next-line no-restricted-syntax
+const DISABLE_LAST_WEEKDAY_REPEAT_TYPE = true as boolean
 const MAX_DURATION_DEFAULT_MINUTES = 60
 const MAX_DURATION_MINIMUM_MINUTES = 1
 const MAX_DURATION_MAXIMUM_MINUTES = 180
-const REPEAT_TIMES_COUNT = 5
-const DAYS_PER_WEEK = 7
-const HOURS_PER_DAY = 24
-const MONTHS_PER_YEAR = 12
-
-const DAYS = [...Array(DAYS_PER_WEEK).keys()] as const
-const MONTHS = [...Array(MONTHS_PER_YEAR).keys()] as const
+const REPEAT_TIMES_COUNT = 3
 
-/** Create the form schema for this page. */
-function createUpsertExecutionSchema(timeZone: string | undefined) {
-  return z
-    .object({
-      projectId: z.string().refine((x: unknown): x is ProjectId => true),
-      repeatType: z.enum(PROJECT_EXECUTION_REPEAT_TYPES),
-      days: z
-        .number()
-        .int()
-        .min(0)
-        .max(DAYS_PER_WEEK - 1)
-        .array()
-        .min(1)
-        .transform((arr) => arr.sort((a, b) => a - b))
-        .readonly(),
-      months: z
-        .number()
-        .int()
-        .min(0)
-        .max(MONTHS_PER_YEAR - 1)
-        .array()
-        .min(1)
-        .transform((arr) => arr.sort((a, b) => a - b))
-        .readonly(),
-      startHour: z
-        .number()
-        .int()
-        .min(0)
-        .max(HOURS_PER_DAY - 1),
-      endHour: z
-        .number()
-        .int()
-        .min(0)
-        .max(HOURS_PER_DAY - 1),
-      startDate: z.instanceof(ZonedDateTime).or(z.null()).optional(),
-      maxDurationMinutes: z
-        .number()
-        .int()
-        .min(MAX_DURATION_MINIMUM_MINUTES)
-        .max(MAX_DURATION_MAXIMUM_MINUTES),
-      parallelMode: z.enum(PROJECT_PARALLEL_MODES),
-    })
-    .transform(
-      ({
-        projectId,
-        startDate = null,
-        repeatType,
-        maxDurationMinutes,
-        parallelMode,
-        days,
-        months,
-        startHour,
-        endHour,
-      }): ProjectExecutionInfo => {
-        timeZone ??= getLocalTimeZone()
-        startDate ??= now(timeZone)
-        const startDateTime = toRfc3339(startDate.toDate())
-        const repeat = ((): ProjectExecutionRepeatInfo => {
-          switch (repeatType) {
-            case 'none': {
-              return {
-                type: repeatType,
-              }
+/** The form schema for this page. */
+const UPSERT_EXECUTION_SCHEMA = z
+  .object({
+    projectId: z.string().refine((x: unknown): x is ProjectId => true),
+    repeatType: z.enum(PROJECT_EXECUTION_REPEAT_TYPES),
+    days: z
+      .number()
+      .int()
+      .min(0)
+      .max(DAYS_PER_WEEK - 1)
+      .array()
+      .min(1)
+      .transform((arr) => arr.sort((a, b) => a - b))
+      .readonly(),
+    months: z
+      .number()
+      .int()
+      .min(0)
+      .max(MONTHS_PER_YEAR - 1)
+      .array()
+      .min(1)
+      .transform((arr) => arr.sort((a, b) => a - b))
+      .readonly(),
+    startDate: z.instanceof(ZonedDateTime).or(z.null()).optional(),
+    timeZone: z.string(),
+    maxDurationMinutes: z
+      .number()
+      .int()
+      .min(MAX_DURATION_MINIMUM_MINUTES)
+      .max(MAX_DURATION_MAXIMUM_MINUTES),
+    parallelMode: z.enum(PROJECT_PARALLEL_MODES),
+  })
+  .transform(
+    ({
+      projectId,
+      startDate = null,
+      repeatType,
+      maxDurationMinutes,
+      parallelMode,
+      days,
+      months,
+      timeZone,
+    }): ProjectExecutionInfo => {
+      startDate ??= now(timeZone)
+      const startDateTime = toRfc3339(new Date(startDate.toAbsoluteString()))
+      const repeat = ((): ProjectExecutionRepeatInfo => {
+        switch (repeatType) {
+          case 'none': {
+            return {
+              type: repeatType,
             }
-            case 'hourly': {
-              return {
-                type: repeatType,
-                startHour: startHour,
-                endHour: endHour,
-              }
+          }
+          case 'daily': {
+            return {
+              type: repeatType,
             }
-            case 'daily': {
-              return {
-                type: repeatType,
-                daysOfWeek: days,
-              }
+          }
+          case 'weekly': {
+            return {
+              type: repeatType,
+              daysOfWeek: days,
             }
-            case 'monthly-date': {
-              return {
-                type: repeatType,
-                date: startDate.day,
-                months,
-              }
+          }
+          case 'monthlyDate': {
+            return {
+              type: repeatType,
+              date: startDate.day,
+              months,
             }
-            case 'monthly-weekday': {
-              return {
-                type: repeatType,
-                dayOfWeek: getDayOfWeek(startDate, 'en-US'),
-                weekNumber: Math.floor(startDate.day / DAYS_PER_WEEK) + 1,
-                months,
-              }
+          }
+          case 'monthlyWeekday': {
+            return {
+              type: repeatType,
+              dayOfWeek: getDay(startDate),
+              weekNumber: getWeekOfMonth(startDate.day),
+              months,
             }
-            case 'monthly-last-weekday': {
-              return {
-                type: repeatType,
-                dayOfWeek: getDayOfWeek(startDate, 'en-US'),
-                months,
-              }
+          }
+          case 'monthlyLastWeekday': {
+            return {
+              type: repeatType,
+              dayOfWeek: getDay(startDate),
+              months,
             }
           }
-        })()
-        return {
-          projectId,
-          timeZone: timeZone,
-          repeat,
-          maxDurationMinutes,
-          parallelMode,
-          startDate: startDateTime,
         }
-      },
-    )
-}
+      })()
+      return {
+        projectId,
+        timeZone,
+        repeat,
+        maxDurationMinutes,
+        parallelMode,
+        startDate: startDateTime,
+        endDate: null,
+      }
+    },
+  )
 
 /** Props for a {@link NewProjectExecutionModal}. */
 export interface NewProjectExecutionModalProps {
@@ -218,22 +206,21 @@ export function NewProjectExecutionForm(props: NewProjectExecutionFormProps) {
   )
   const valueJson = useRef('')
 
-  const nowZonedDateTime = now(timeZone)
-  const minFirstOccurrence = nowZonedDateTime
+  // Only initialize `minFirstOccurrence` once.
+  const [minFirstOccurrence] = useState(() => now(timeZone))
+  const defaultStartDate = defaultDate ?? minFirstOccurrence
   const form = Form.useForm({
     method: 'dialog',
-    schema: createUpsertExecutionSchema(preferredTimeZone),
+    schema: UPSERT_EXECUTION_SCHEMA,
     defaultValues: {
       projectId: item.id,
       repeatType: 'daily',
       parallelMode: 'restart',
-      startDate: defaultDate ?? minFirstOccurrence,
+      startDate: defaultStartDate,
       maxDurationMinutes: MAX_DURATION_DEFAULT_MINUTES,
-      // Use `en-US` locale because it matches JavaScript conventions.
-      days: [getDayOfWeek(minFirstOccurrence, 'en-US')],
-      months: [minFirstOccurrence.month - 1],
-      startHour: 0,
-      endHour: HOURS_PER_DAY - 1,
+      days: DAYS,
+      months: MONTHS,
+      timeZone,
     },
     onSubmit: async (values) => {
       await createProjectExecution([values, item.title])
@@ -241,25 +228,33 @@ export function NewProjectExecutionForm(props: NewProjectExecutionFormProps) {
   })
   const repeatType = form.watch('repeatType', 'daily')
   const parallelMode = form.watch('parallelMode', 'restart')
-  const date = form.watch('startDate', nowZonedDateTime) ?? nowZonedDateTime
+  const date = form.watch('startDate', defaultStartDate) ?? defaultStartDate
+  const formTimeZone = form.watch('timeZone', timeZone)
   // Reactively watch for `days` and `months` so that repeat dates are kept up to date.
   form.watch('days')
   form.watch('months')
   const daysToEndOfMonth = endOfMonth(date).day - date.day
   const validRepeatTypes =
-    daysToEndOfMonth >= DAYS_PER_WEEK ?
-      PROJECT_EXECUTION_REPEAT_TYPES.filter((type) => type !== 'monthly-last-weekday')
+    DISABLE_LAST_WEEKDAY_REPEAT_TYPE || daysToEndOfMonth >= DAYS_PER_WEEK ?
+      PROJECT_EXECUTION_REPEAT_TYPES.filter((type) => type !== 'monthlyLastWeekday')
     : PROJECT_EXECUTION_REPEAT_TYPES
 
+  const changeTimezoneDeps = useSyncRef({ date, form })
   useEffect(() => {
-    if (onChange) {
-      const parsed = form.schema.safeParse(form.getValues())
-      if (parsed.success) {
-        const newJson = JSON.stringify(parsed)
-        if (newJson !== valueJson.current) {
-          onChange(parsed.data)
-          valueJson.current = newJson
-        }
+    const deps = changeTimezoneDeps.current
+    deps.form.setValue('startDate', toZoned(deps.date, formTimeZone))
+  }, [formTimeZone, changeTimezoneDeps])
+
+  useEffect(() => {
+    if (!onChange) {
+      return
+    }
+    const parsed = form.schema.safeParse(form.getValues())
+    if (parsed.success) {
+      const newJson = JSON.stringify(parsed)
+      if (newJson !== valueJson.current) {
+        onChange(parsed.data)
+        valueJson.current = newJson
       }
     }
   })
@@ -274,106 +269,97 @@ export function NewProjectExecutionForm(props: NewProjectExecutionFormProps) {
     if (!projectExecution) {
       return []
     }
-    let nextDate = firstProjectExecutionOnOrAfter(projectExecution, date.toDate())
+    let nextDate: ZonedDateTime | null = firstProjectExecutionOnOrAfter(projectExecution, date)
     const dates = [nextDate]
-    while (dates.length < REPEAT_TIMES_COUNT) {
-      nextDate = nextProjectExecutionDate(projectExecution, nextDate)
+    nextDate = nextProjectExecutionDate(projectExecution, nextDate)
+    while (nextDate && dates.length < REPEAT_TIMES_COUNT) {
       dates.push(nextDate)
+      nextDate = nextProjectExecutionDate(projectExecution, nextDate)
     }
     return dates
   })()
 
-  const repeatText = useEventCallback((otherRepeatType: ProjectExecutionRepeatType) => {
+  const repeatText = useEventCallback((otherRepeatType: typeof repeatType) => {
     // Use `en-US` locale because it matches JavaScript conventions.
-    const dayOfWeekNumber = getDayOfWeek(date, 'en-US')
+    const dayOfWeekNumber = getDay(date)
     const dayOfWeek = getText(DAY_TEXT_IDS[dayOfWeekNumber] ?? 'monday')
     switch (otherRepeatType) {
       case 'none': {
         return getText('doesNotRepeat')
       }
-      case 'hourly': {
-        return getText('hourly')
-      }
       case 'daily': {
         return getText('daily')
       }
-      case 'monthly-date': {
-        return getText('xthDayOfMonth', getOrdinal(date.day))
+      case 'weekly': {
+        return getText('weekly')
+      }
+      case 'monthlyDate': {
+        return getText('monthlyXthDay', getOrdinal(date.day))
       }
-      case 'monthly-weekday': {
-        return getText(
-          'xthXDayOfMonth',
-          getOrdinal(Math.floor(date.day / DAYS_PER_WEEK) + 1),
-          dayOfWeek,
-        )
+      case 'monthlyWeekday': {
+        return getText('monthlyXthXDay', getOrdinal(getWeekOfMonth(date.day)), dayOfWeek)
       }
-      case 'monthly-last-weekday': {
-        return getText('lastXDayOfMonth', dayOfWeek)
+      case 'monthlyLastWeekday': {
+        return getText('monthlyLastXDay', dayOfWeek)
       }
     }
   })
 
   return (
     <Form form={form} className="w-full">
-      <div className="flex flex-col">
-        <DatePicker
-          form={form}
-          isRequired
-          noCalendarHeader
-          name="startDate"
-          granularity="minute"
-          label={getText('firstOccurrenceLabel')}
-          minValue={minFirstOccurrence}
-        />
-        <Text>
-          {getText(
-            'repeatsAtX',
-            (repeatType === 'hourly' ?
-              // eslint-disable-next-line @typescript-eslint/unbound-method
-              repeatTimes.map(Intl.DateTimeFormat(undefined, { timeStyle: 'short' }).format)
-              // eslint-disable-next-line @typescript-eslint/unbound-method
-            : repeatTimes.map(Intl.DateTimeFormat(undefined, { dateStyle: 'short' }).format)
-            ).join(', '),
-          )}
-        </Text>
-      </div>
+      <ComboBox
+        form={form}
+        isRequired
+        name="timeZone"
+        label={getText('timeZoneLabel')}
+        items={WHITELISTED_TIME_ZONES}
+        addonStart={
+          <Text className="w-20">{getTimeZoneOffsetStringWithGMT(toZoned(date, timeZone))}</Text>
+        }
+        toTextValue={(otherTimeZone) => otherTimeZone}
+        className="w-full"
+      >
+        {(otherTimeZone) => {
+          const timezoneOffsetString = getTimeZoneOffsetStringWithGMT(toZoned(date, otherTimeZone))
+          const description =
+            WHITELISTED_TIME_ZONE_MAP.get(otherTimeZone)?.timeZone ?? otherTimeZone
+          return `${timezoneOffsetString} ${description}`
+        }}
+      </ComboBox>
+      <DatePicker
+        form={form}
+        isRequired
+        noCalendarHeader
+        name="startDate"
+        hideTimeZone
+        label={getText('firstOccurrenceLabel')}
+        minValue={minFirstOccurrence}
+        className="w-full"
+      />
       <FormDropdown
         form={form}
         isRequired
         name="repeatType"
         label={getText('repeatIntervalLabel')}
         items={validRepeatTypes}
+        size="medium"
+        className="w-full"
       >
         {({ item: otherItem }) => repeatText(otherItem)}
       </FormDropdown>
-      {repeatType === 'hourly' && (
-        <Input
-          form={form}
-          isRequired
-          name="startHour"
-          label={getText('startHourLabel')}
-          type="number"
-          min={0}
-          max={HOURS_PER_DAY - 1}
-        />
-      )}
-      {repeatType === 'hourly' && (
-        <Input
+      {repeatType === 'weekly' && (
+        <MultiSelector
           form={form}
           isRequired
-          name="endHour"
-          label={getText('endHourLabel')}
-          type="number"
-          min={0}
-          max={HOURS_PER_DAY - 1}
-        />
-      )}
-      {repeatType === 'daily' && (
-        <MultiSelector form={form} isRequired name="days" label={getText('daysLabel')} items={DAYS}>
+          name="days"
+          label={getText('daysLabel')}
+          items={DAYS}
+          variant="separate-outline"
+        >
           {(n) => getText(DAY_3_LETTER_TEXT_IDS[n] ?? 'monday3')}
         </MultiSelector>
       )}
-      {(repeatType === 'monthly-date' || repeatType === 'monthly-weekday') && (
+      {(repeatType === 'monthlyDate' || repeatType === 'monthlyWeekday') && (
         <MultiSelector
           form={form}
           isRequired
@@ -381,10 +367,18 @@ export function NewProjectExecutionForm(props: NewProjectExecutionFormProps) {
           label={getText('monthsLabel')}
           items={MONTHS}
           columns={6}
+          variant="separate-outline"
         >
           {(n) => getText(MONTH_3_LETTER_TEXT_IDS[n] ?? 'january3')}
         </MultiSelector>
       )}
+      <div className={repeatType === 'none' ? 'hidden' : ''}>
+        <Text>{getText('repeatsAt')}</Text>
+        {repeatTimes.map((dateTime, i) => (
+          <Text key={i}>{zonedDateTimeToReadableIsoString(dateTime)}</Text>
+        ))}
+        <Text>{getText('ellipsis')}</Text>
+      </div>
       {enableAdvancedProjectExecutionOptions && (
         <details className="w-full">
           <summary className="cursor-pointer">{getText('advancedOptions')}</summary>
diff --git a/app/gui/src/dashboard/providers/FeatureFlagsProvider.tsx b/app/gui/src/dashboard/providers/FeatureFlagsProvider.tsx
index b101caf36abe..8a40e76d8389 100644
--- a/app/gui/src/dashboard/providers/FeatureFlagsProvider.tsx
+++ b/app/gui/src/dashboard/providers/FeatureFlagsProvider.tsx
@@ -20,7 +20,7 @@ export function featureFlagsForInternalTesting() {
   return {
     enableCloudExecution: true,
     enableAsyncExecution: true,
-    enableAdvancedProjectExecutionOptions: true,
+    enableAdvancedProjectExecutionOptions: false,
   }
 }
 
@@ -54,8 +54,8 @@ const flagsStore = createStore<FeatureFlagsStore>()(
         enableAssetsTableBackgroundRefresh: true,
         assetsTableBackgroundRefreshInterval: DEFAULT_ASSETS_TABLE_REFRESH_INTERVAL_MS,
         enableCloudExecution: IS_DEV_MODE || isOnElectron(),
-        enableAsyncExecution: false,
-        enableAdvancedProjectExecutionOptions: true,
+        enableAsyncExecution: true,
+        enableAdvancedProjectExecutionOptions: false,
       },
       setFeatureFlag: (key, value) => {
         set(({ featureFlags }) => ({ featureFlags: { ...featureFlags, [key]: value } }))
diff --git a/app/gui/src/dashboard/services/LocalBackend.ts b/app/gui/src/dashboard/services/LocalBackend.ts
index 67b5d5336b87..f40626a68e77 100644
--- a/app/gui/src/dashboard/services/LocalBackend.ts
+++ b/app/gui/src/dashboard/services/LocalBackend.ts
@@ -809,6 +809,11 @@ export default class LocalBackend extends Backend {
     return this.invalidOperation()
   }
 
+  /** Invalid operation. */
+  override getProjectExecutionDetails() {
+    return this.invalidOperation()
+  }
+
   /** Invalid operation. */
   override updateProjectExecution() {
     return this.invalidOperation()
diff --git a/app/gui/src/dashboard/services/RemoteBackend.ts b/app/gui/src/dashboard/services/RemoteBackend.ts
index b0d9b1fda5e2..c616cc64ac08 100644
--- a/app/gui/src/dashboard/services/RemoteBackend.ts
+++ b/app/gui/src/dashboard/services/RemoteBackend.ts
@@ -861,6 +861,23 @@ export default class RemoteBackend extends Backend {
     }
   }
 
+  /**
+   * Create a project execution.
+   * @throws An error if a non-successful status code (not 200-299) was received.
+   */
+  override async getProjectExecutionDetails(
+    executionId: backend.ProjectExecutionId,
+    title: string,
+  ): Promise<backend.ProjectExecution> {
+    const path = remoteBackendPaths.getProjectExecutionDetailsPath(executionId)
+    const response = await this.get<backend.ProjectExecution>(path)
+    if (!responseIsSuccessful(response)) {
+      return await this.throw(response, 'getProjectExecutionDetailsBackendError', title)
+    } else {
+      return await response.json()
+    }
+  }
+
   /**
    * Update a project execution.
    * @throws An error if a non-successful status code (not 200-299) was received.
diff --git a/app/gui/src/dashboard/services/remoteBackendPaths.ts b/app/gui/src/dashboard/services/remoteBackendPaths.ts
index fdf7fc57cd22..9b585c5a8879 100644
--- a/app/gui/src/dashboard/services/remoteBackendPaths.ts
+++ b/app/gui/src/dashboard/services/remoteBackendPaths.ts
@@ -163,6 +163,10 @@ export function listProjectExecutionsPath(projectId: backend.ProjectId) {
 export function createProjectExecutionPath(projectId: backend.ProjectId) {
   return `projects/${projectId}/executions/new`
 }
+/** Relative HTTP path to the "get project execution details" endpoint of the Cloud backend API. */
+export function getProjectExecutionDetailsPath(executionId: backend.ProjectExecutionId) {
+  return `executions/${executionId}`
+}
 /** Relative HTTP path to the "update project execution" endpoint of the Cloud backend API. */
 export function updateProjectExecutionPath(executionId: backend.ProjectExecutionId) {
   return `executions/${executionId}`
@@ -173,7 +177,7 @@ export function syncProjectExecutionPath(executionId: backend.ProjectExecutionId
 }
 /** Relative HTTP path to the "delete project execution" endpoint of the Cloud backend API. */
 export function deleteProjectExecutionPath(executionId: backend.ProjectExecutionId) {
-  return `project-executions/${executionId}`
+  return `executions/${executionId}`
 }
 /** Relative HTTP path to the "get file details" endpoint of the Cloud backend API. */
 export function getFileDetailsPath(fileId: backend.FileId) {
diff --git a/app/gui/src/dashboard/tailwind.css b/app/gui/src/dashboard/tailwind.css
index 010aa6447066..4d7cffaf275d 100644
--- a/app/gui/src/dashboard/tailwind.css
+++ b/app/gui/src/dashboard/tailwind.css
@@ -139,9 +139,6 @@
   --label-icons-gap: 0.25rem;
   /* The transition duration of an arrow transitioning between two directions. */
   --arrow-transition-duration: 300ms;
-  /* The horizontal gap between the arrow of a dropdown and the label of the current item. */
-  --dropdown-arrow-gap: 0.25rem;
-  --dropdown-items-height: 15rem;
   --selection-brush-corner-radius: 0.5rem;
   /* This MUST be in `px` as `border-width` does not understand `rem`. */
   --selection-brush-border-width: 6px;
diff --git a/app/gui/src/dashboard/utilities/functions.ts b/app/gui/src/dashboard/utilities/functions.ts
index f53b116afea7..6d75ab960d3f 100644
--- a/app/gui/src/dashboard/utilities/functions.ts
+++ b/app/gui/src/dashboard/utilities/functions.ts
@@ -1,8 +1,10 @@
-/**
- * @file
- * A collection of utilities that work with functions.
- */
+/** @file A collection of generic utility functions. */
 
-/** A function that does nothing, except stable reference. */
+/** A stable reference to a function that does nothing. */
 // eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-explicit-any
 export const noop: (...args: any[]) => void = () => {}
+
+/** A stable reference to a function that returns its input. */
+export function identity<T>(value: T) {
+  return value
+}
diff --git a/app/gui/tailwind.config.ts b/app/gui/tailwind.config.ts
index 2185a678c9b1..f8a12231626b 100644
--- a/app/gui/tailwind.config.ts
+++ b/app/gui/tailwind.config.ts
@@ -186,7 +186,6 @@ export default {
         'chat-thread-list': 'var(--chat-thread-list-height)',
         'payment-form': 'var(--payment-form-height)',
         'paragraph-input': 'var(--paragraph-input-height)',
-        'dropdown-items': 'var(--dropdown-items-height)',
         'manage-permissions-modal-permissions-list':
           'var(--manage-permissions-modal-permissions-list-height)',
         'manage-labels-list': 'var(--manage-labels-list-height)',
@@ -234,7 +233,6 @@ export default {
         'name-column-icon': 'var(--name-column-icon-gap)',
         'permission-type-button': 'var(--permission-type-button-gap)',
         'modal-tabs': 'var(--modal-tabs-gap)',
-        'dropdown-arrow': 'var(--dropdown-arrow-gap)',
         'context-menus': 'var(--context-menus-gap)',
         'asset-panel': 'var(--asset-panel-gap)',
         'search-suggestions': 'var(--search-suggestions-gap)',
diff --git a/flake.nix b/flake.nix
index d70cf579b832..fba376961f69 100644
--- a/flake.nix
+++ b/flake.nix
@@ -25,9 +25,39 @@
                 minimal.rustc
                 targets.x86_64-unknown-linux-musl.latest.rust-std
               ] else fenix.packages.${system}.minimal.toolchain;
+	    # https://github.com/NixOS/nixpkgs/blob/618c81f7b15d3e2dd73d9d413d9e7b13fbc9520f/pkgs/development/tools/build-managers/bazel/bazel_7/default.nix#L58
+	    defaultShellUtils = with pkgs; [
+	      bash
+	      coreutils
+	      diffutils
+	      file
+	      findutils
+	      gawk
+	      gnugrep
+	      gnupatch
+	      gnused
+	      gnutar
+	      gzip
+	      python3
+	      unzip
+	      which
+	      zip
+	      makeWrapper
+	    ];
+	    # https://github.com/NixOS/nixpkgs/blob/618c81f7b15d3e2dd73d9d413d9e7b13fbc9520f/pkgs/development/tools/build-managers/bazel/bazel_7/default.nix#L257
+            defaultShellPath = pkgs.lib.makeBinPath defaultShellUtils;
           in
           pkgs.mkShell rec {
             buildInputs = with pkgs; [
+              # === Bazel ===
+              (bazel_7.overrideAttrs (self: super: {
+	        patches = super.patches ++ [
+		  (substituteAll {
+		    src = ./nix/patches/bazel_actions_path.patch;
+		    actionsPathPatch = defaultShellPath;
+		  })
+		];
+	      }))
               # === Graal dependencies ===
               libxcrypt-legacy
               # === Rust dependencies ===
diff --git a/nix/patches/bazel_actions_path.patch b/nix/patches/bazel_actions_path.patch
new file mode 100644
index 000000000000..1fa1e5748333
--- /dev/null
+++ b/nix/patches/bazel_actions_path.patch
@@ -0,0 +1,41 @@
+diff --git a/src/main/java/com/google/devtools/build/lib/exec/local/PosixLocalEnvProvider.java b/src/main/java/com/google/devtools/build/lib/exec/local/PosixLocalEnvProvider.java
+index 6fff2af..7e2877e 100644
+--- a/src/main/java/com/google/devtools/build/lib/exec/local/PosixLocalEnvProvider.java
++++ b/src/main/java/com/google/devtools/build/lib/exec/local/PosixLocalEnvProvider.java
+@@ -47,6 +47,16 @@ public final class PosixLocalEnvProvider implements LocalEnvProvider {
+       Map<String, String> env, BinTools binTools, String fallbackTmpDir) {
+     ImmutableMap.Builder<String, String> result = ImmutableMap.builder();
+     result.putAll(Maps.filterKeys(env, k -> !k.equals("TMPDIR")));
++
++    // In case we are running on NixOS.
++    // If bash is called with an unset PATH on this platform,
++    // it will set it to /no-such-path and default tools will be missings.
++    // See, https://github.com/NixOS/nixpkgs/issues/94222
++    // So we ensure that minimal dependencies are present.
++    if (!env.containsKey("PATH")){
++        result.put("PATH", "@actionsPathPatch@");
++    }
++ 
+     String p = clientEnv.get("TMPDIR");
+     if (Strings.isNullOrEmpty(p)) {
+       // Do not use `fallbackTmpDir`, use `/tmp` instead. This way if the user didn't export TMPDIR
+index 95642767c6..39d3c62461 100644
+--- a/src/main/java/com/google/devtools/build/lib/exec/local/XcodeLocalEnvProvider.java
++++ b/src/main/java/com/google/devtools/build/lib/exec/local/XcodeLocalEnvProvider.java
+@@ -74,6 +74,16 @@ public final class XcodeLocalEnvProvider implements LocalEnvProvider {
+
+     ImmutableMap.Builder<String, String> newEnvBuilder = ImmutableMap.builder();
+     newEnvBuilder.putAll(Maps.filterKeys(env, k -> !k.equals("TMPDIR")));
++
++    // In case we are running on NixOS.
++    // If bash is called with an unset PATH on this platform,
++    // it will set it to /no-such-path and default tools will be missings.
++    // See, https://github.com/NixOS/nixpkgs/issues/94222
++    // So we ensure that minimal dependencies are present.
++    if (!env.containsKey("PATH")){
++      newEnvBuilder.put("PATH", "@actionsPathPatch@");
++    }
++
+     String p = clientEnv.get("TMPDIR");
+     if (Strings.isNullOrEmpty(p)) {
+       // Do not use `fallbackTmpDir`, use `/tmp` instead. This way if the user didn't export TMPDIR
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abd9cd98a1e1..7acea769a980 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -85,6 +85,9 @@ importers:
 
   app/common:
     dependencies:
+      '@internationalized/date':
+        specifier: 3.7.0
+        version: 3.7.0
       '@tanstack/query-core':
         specifier: 5.59.20
         version: 5.59.20