diff --git a/src/lib/components/advanced-visibility-guard.svelte b/src/lib/components/advanced-visibility-guard.svelte
deleted file mode 100644
index d227952754..0000000000
--- a/src/lib/components/advanced-visibility-guard.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-  import { supportsAdvancedVisibility } from '$lib/stores/advanced-visibility';
-</script>
-
-{#if $supportsAdvancedVisibility}
-  <slot />
-{:else}
-  <slot name="fallback" />
-{/if}
diff --git a/src/lib/components/batch-operations/header.svelte b/src/lib/components/batch-operations/header.svelte
index 2b74341774..56d12edd61 100644
--- a/src/lib/components/batch-operations/header.svelte
+++ b/src/lib/components/batch-operations/header.svelte
@@ -8,7 +8,11 @@
   import { autoRefresh } from '$lib/stores/batch-operations';
   import type { BatchOperation, BatchOperationState } from '$lib/types/batch';
 
-  export let operation: BatchOperation;
+  interface Props {
+    operation: BatchOperation;
+  }
+
+  let { operation }: Props = $props();
 
   const dispatch = createEventDispatcher<{
     toggleAutoRefresh: { checked: boolean };
diff --git a/src/lib/components/data-encoder-status.svelte b/src/lib/components/data-encoder-status.svelte
index 0c9140cfe6..a73f195292 100644
--- a/src/lib/components/data-encoder-status.svelte
+++ b/src/lib/components/data-encoder-status.svelte
@@ -13,13 +13,9 @@
     }
   };
 
-  let variant: 'primary' | 'ghost' = 'ghost';
-
-  const updateVariant = (open: boolean) => {
-    variant = open ? 'primary' : 'ghost';
-  };
-
-  $: updateVariant($viewDataEncoderSettings);
+  const variant = $derived<'primary' | 'ghost'>(
+    $viewDataEncoderSettings ? 'primary' : 'ghost',
+  );
 </script>
 
 <div class="mx-1 flex items-center">
diff --git a/src/lib/components/feature-guard.svelte b/src/lib/components/feature-guard.svelte
deleted file mode 100644
index 9534e84b6e..0000000000
--- a/src/lib/components/feature-guard.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-  export let enabled = false;
-</script>
-
-{#if enabled}
-  <slot />
-{:else}
-  <slot name="fallback" />
-{/if}
diff --git a/src/lib/components/import/event-history-file-import.svelte b/src/lib/components/import/event-history-file-import.svelte
index f2cf708e60..6b7139a4b2 100644
--- a/src/lib/components/import/event-history-file-import.svelte
+++ b/src/lib/components/import/event-history-file-import.svelte
@@ -13,8 +13,9 @@
   import { parseWithBigInt } from '$lib/utilities/parse-with-big-int';
   import { routeForEventHistoryImport } from '$lib/utilities/route-for';
 
-  let rawEvents: HistoryEvent[] | { events: HistoryEvent[] };
-  let fileLoaded = false;
+  let rawEvents: HistoryEvent[] | { events: HistoryEvent[] } | undefined =
+    $state(undefined);
+  let fileLoaded = $state(false);
 
   const onFileSelect = async (e: Event) => {
     const target = e.target as HTMLInputElement;
@@ -70,7 +71,7 @@
     class="import-input block border border-slate-200 p-2"
     type="file"
     accept=".json"
-    on:change={onFileSelect}
+    onchange={onFileSelect}
   />
   <Button leadingIcon="file-upload" on:click={onConfirm} disabled={!fileLoaded}
     >{translate('common.import')}</Button
diff --git a/src/lib/components/is-cloud-guard.svelte b/src/lib/components/is-cloud-guard.svelte
deleted file mode 100644
index 9d04e4cba3..0000000000
--- a/src/lib/components/is-cloud-guard.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-
-  export let isCloud = false;
-</script>
-
-{#if isCloud || $page.data?.settings?.runtimeEnvironment?.isCloud}
-  <slot name="fallback" />
-{:else}
-  <slot />
-{/if}
diff --git a/src/lib/components/is-legacy-cloud-guard.svelte b/src/lib/components/is-legacy-cloud-guard.svelte
deleted file mode 100644
index 6df766fad2..0000000000
--- a/src/lib/components/is-legacy-cloud-guard.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-
-  import { isCloudMatch } from '$lib/services/settings-service';
-  import { browser } from '$lib/svelte-mocks/app/environment';
-
-  export let isCloud = true;
-  $: isLegacyCloud = isCloudMatch.test(browser ? $page.url.hostname : '');
-</script>
-
-{#if isCloud && isLegacyCloud}
-  <slot name="fallback" />
-{:else}
-  <slot />
-{/if}
diff --git a/src/lib/components/is-oss-guard.svelte b/src/lib/components/is-oss-guard.svelte
index 32545d38ae..ae60dca167 100644
--- a/src/lib/components/is-oss-guard.svelte
+++ b/src/lib/components/is-oss-guard.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import type { Snippet } from 'svelte';
 
-  export let isCloud = false;
+  import { page } from '$app/state';
+
+  let {
+    isCloud = false,
+    children,
+    fallback,
+  }: { isCloud?: boolean; children?: Snippet; fallback?: Snippet } = $props();
 </script>
 
-{#if isCloud || $page.data?.settings?.runtimeEnvironment?.isCloud}
-  <slot />
+{#if isCloud || page.data?.settings?.runtimeEnvironment?.isCloud}
+  {@render children?.()}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}
diff --git a/src/lib/components/is-temporal-server-version-guard.svelte b/src/lib/components/is-temporal-server-version-guard.svelte
index 8a29e9493d..73ed6b7777 100644
--- a/src/lib/components/is-temporal-server-version-guard.svelte
+++ b/src/lib/components/is-temporal-server-version-guard.svelte
@@ -1,13 +1,23 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import { isCloud } from '$lib/stores/advanced-visibility';
   import { temporalVersion } from '$lib/stores/versions';
   import { minimumVersionRequired } from '$lib/utilities/version-check';
 
-  export let minimumVersion: string;
+  let {
+    minimumVersion,
+    children,
+    fallback,
+  }: {
+    minimumVersion: string;
+    children?: Snippet;
+    fallback?: Snippet;
+  } = $props();
 </script>
 
 {#if $isCloud || minimumVersionRequired(minimumVersion, $temporalVersion)}
-  <slot />
+  {@render children?.()}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}
diff --git a/src/lib/components/lines-and-dots/event-sort-filter.svelte b/src/lib/components/lines-and-dots/event-sort-filter.svelte
index a3c52f3ab8..15ebc9572a 100644
--- a/src/lib/components/lines-and-dots/event-sort-filter.svelte
+++ b/src/lib/components/lines-and-dots/event-sort-filter.svelte
@@ -1,9 +1,9 @@
-<script context="module">
+<script module>
   export const dateParameter = 'time-format';
 </script>
 
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import {
@@ -22,9 +22,13 @@
   import { getDateFilterValue } from '$lib/utilities/event-formatting';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
-  export let compact: boolean;
+  interface Props {
+    compact: boolean;
+  }
 
-  let sortOptions: EventSortOrderOptions = [
+  let { compact }: Props = $props();
+
+  const sortOptions: EventSortOrderOptions = [
     { label: translate('events.sort-ascending'), option: 'ascending' },
     { label: translate('events.sort-descending'), option: 'descending' },
   ];
@@ -34,7 +38,7 @@
     updateQueryParameters({
       parameter: 'sort',
       value: option,
-      url: $page.url,
+      url: page.url,
     });
   };
 
@@ -46,11 +50,13 @@
     }
   };
 
-  $: value = getDateFilterValue({
-    compact,
-    sortOrder: $eventFilterSort,
-    showElapsed: $eventShowElapsed,
-  });
+  const value = $derived(
+    getDateFilterValue({
+      compact,
+      sortOrder: $eventFilterSort,
+      showElapsed: $eventShowElapsed,
+    }),
+  );
 </script>
 
 <MenuContainer>
diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte b/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
index 0048821884..dd2d181325 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
+++ b/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
@@ -17,38 +17,64 @@
   import TimelineGraphRow from './timeline-graph-row.svelte';
   import WorkflowRow from './workflow-row.svelte';
 
-  export let x = 0;
-  export let y = 0;
-  export let workflow: WorkflowExecution;
-  export let groups: EventGroups;
-  export let viewportHeight: number | undefined;
-  export let readOnly = false;
-  export let error: boolean = false;
+  interface Props {
+    x?: number;
+    y?: number;
+    workflow: WorkflowExecution;
+    groups: EventGroups;
+    viewportHeight: number | undefined;
+    readOnly?: boolean;
+    error?: boolean;
+  }
+
+  let {
+    x = 0,
+    y = 0,
+    workflow,
+    groups,
+    viewportHeight,
+    readOnly = false,
+    error = false,
+  }: Props = $props();
 
   const { height, gutter, radius } = TimelineConfig;
 
-  let canvasWidth = 0;
-  let scrollY = 0;
+  let canvasWidth = $state(0);
+  let scrollY = $state(0);
+
+  const expandedGroupHeight = $derived(readOnly ? 0 : $activeGroupHeight);
+  const filteredGroups = $derived(
+    getFailedOrPendingGroups(groups, $eventStatusFilter),
+  );
+  const firstStartTime = $derived.by(() => {
+    const firstEventTime = $fullEventHistory[0]?.eventTime;
 
-  $: expandedGroupHeight = readOnly ? 0 : $activeGroupHeight;
-  $: filteredGroups = getFailedOrPendingGroups(groups, $eventStatusFilter);
-  $: firstStartTime =
-    $fullEventHistory[0]?.eventTime < workflow.executionTime
-      ? $fullEventHistory[0]?.eventTime
+    if (!firstEventTime) {
+      return workflow.executionTime;
+    }
+
+    return firstEventTime < workflow.executionTime
+      ? firstEventTime
       : workflow.executionTime;
-  $: startTime =
-    (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime;
-  $: timelineHeight =
-    Math.max(height * (filteredGroups.length + 2), 120) + expandedGroupHeight;
-  $: canvasHeight = timelineHeight + 120;
+  });
+
+  const startTime = $derived(
+    (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime,
+  );
+  const timelineHeight = $derived(
+    Math.max(height * (filteredGroups.length + 2), 120) + expandedGroupHeight,
+  );
+  const canvasHeight = $derived(timelineHeight + 120);
 
-  const handleScroll = (e) => {
-    scrollY = e?.target?.scrollTop;
+  const handleScroll = (e: Event) => {
+    scrollY = (e?.target as HTMLElement)?.scrollTop;
   };
 
-  $: groupIndexMap = new Map(filteredGroups.map((g, i) => [g.id, i]));
+  const groupIndexMap = $derived(
+    new Map(filteredGroups.map((g, i) => [g.id, i])),
+  );
 
-  $: activeGroupsHeightAboveGroup = (groupIndex: number) => {
+  const activeGroupsHeightAboveGroup = (groupIndex: number) => {
     const hasActiveAbove = $activeGroups?.some((id) => {
       const activeIndex = groupIndexMap.get(id);
       return activeIndex !== undefined && activeIndex < groupIndex;
@@ -62,7 +88,7 @@
   class="relative h-auto overflow-auto border border-t-0 border-subtle bg-primary"
   bind:clientWidth={canvasWidth}
   style={viewportHeight ? `max-height: ${viewportHeight}px;` : ''}
-  on:scroll={handleScroll}
+  onscroll={handleScroll}
 >
   <EndTimeInterval
     {workflow}
@@ -108,7 +134,7 @@
         x2={canvasWidth - gutter + radius / 4}
         {timelineHeight}
         {startTime}
-        {duration}
+        duration={duration ?? 0}
       />
       <WorkflowRow {workflow} y={height} length={canvasWidth} />
       {#each filteredGroups as group, index (group.id)}
diff --git a/src/lib/components/search-attribute-filter/close-filter-button.svelte b/src/lib/components/search-attribute-filter/close-filter-button.svelte
index 93b68eabd0..c44fdb399d 100644
--- a/src/lib/components/search-attribute-filter/close-filter-button.svelte
+++ b/src/lib/components/search-attribute-filter/close-filter-button.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
   import { getContext } from 'svelte';
 
diff --git a/src/lib/components/search-attribute-filter/duration-filter.svelte b/src/lib/components/search-attribute-filter/duration-filter.svelte
index e414127e31..75cb904d02 100644
--- a/src/lib/components/search-attribute-filter/duration-filter.svelte
+++ b/src/lib/components/search-attribute-filter/duration-filter.svelte
@@ -10,10 +10,8 @@
 
   const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
 
-  $: ({ value } = $filter);
-  $: _value = value;
-
-  let isValid = true;
+  let _value = $derived($filter.value);
+  let isValid = $state(true);
 
   const handleKeydown = (e: KeyboardEvent) => {
     const newValue = _value.trim();
@@ -24,12 +22,12 @@
     }
   };
 
-  const validateDuration = (event: Event & { target: HTMLInputElement }) => {
-    if (isValidDurationQuery(event.target.value.trim())) {
-      isValid = true;
-    } else {
-      isValid = false;
+  const validateDuration = (event: Event) => {
+    if (!(event.currentTarget instanceof HTMLInputElement)) {
+      return;
     }
+
+    isValid = isValidDurationQuery(event.currentTarget.value.trim());
   };
 </script>
 
diff --git a/src/lib/components/search-attribute-filter/filter-list.svelte b/src/lib/components/search-attribute-filter/filter-list.svelte
index 284ec6f261..f33392d9bb 100644
--- a/src/lib/components/search-attribute-filter/filter-list.svelte
+++ b/src/lib/components/search-attribute-filter/filter-list.svelte
@@ -3,7 +3,7 @@
 
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Timestamp from '$lib/components/timestamp.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
@@ -24,7 +24,11 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  export let filters: SearchAttributeFilter[];
+  interface Props {
+    filters: SearchAttributeFilter[];
+  }
+
+  let { filters = $bindable() }: Props = $props();
 
   const { filter, activeQueryIndex } =
     getContext<FilterContext>(FILTER_CONTEXT);
@@ -32,7 +36,7 @@
   const removeQuery = (index: number) => {
     filters.splice(index, 1);
     filters = filters;
-    updateQueryParamsFromFilter($page.url, filters);
+    updateQueryParamsFromFilter(page.url, filters);
 
     if (index === filters.length) {
       const previousQuery = filters[filters.length - 1];
@@ -49,10 +53,10 @@
     }
   };
 
-  let totalFiltersInView = 5;
+  let totalFiltersInView = $state(5);
 
-  $: visibleFilters = filters.slice(0, totalFiltersInView);
-  $: hasMoreFilters = totalFiltersInView < filters.length;
+  const visibleFilters = $derived(filters.slice(0, totalFiltersInView));
+  const hasMoreFilters = $derived(totalFiltersInView < filters.length);
 
   const viewMoreFilters = () => {
     if (hasMoreFilters) {
diff --git a/src/lib/components/search-attribute-filter/number-filter.svelte b/src/lib/components/search-attribute-filter/number-filter.svelte
index 6069162038..0cb51cd652 100644
--- a/src/lib/components/search-attribute-filter/number-filter.svelte
+++ b/src/lib/components/search-attribute-filter/number-filter.svelte
@@ -11,8 +11,7 @@
     getContext<FilterContext>(FILTER_CONTEXT);
   const min = 0;
 
-  $: ({ value } = $filter);
-  $: _value = value ? Number(value) : null;
+  let _value = $derived($filter.value ? Number($filter.value) : null);
 
   const handleKeydown = (e: KeyboardEvent) => {
     $focusedElementId = '';
diff --git a/src/lib/components/search-attribute-filter/search-attribute-menu.svelte b/src/lib/components/search-attribute-filter/search-attribute-menu.svelte
index 9383c5476c..5e6a05042a 100644
--- a/src/lib/components/search-attribute-filter/search-attribute-menu.svelte
+++ b/src/lib/components/search-attribute-filter/search-attribute-menu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Input from '$lib/holocene/input/input.svelte';
@@ -24,8 +24,12 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  export let filters: SearchAttributeFilter[];
-  export let options: SearchAttributeOption[];
+  interface Props {
+    filters: SearchAttributeFilter[];
+    options: SearchAttributeOption[];
+  }
+
+  let { filters, options }: Props = $props();
 
   const { filter, activeQueryIndex, focusedElementId } =
     getContext<FilterContext>(FILTER_CONTEXT);
@@ -45,22 +49,26 @@
     $focusedElementId = getFocusedElementId($filter);
   }
 
-  let searchAttributeValue = '';
+  let searchAttributeValue = $state('');
 
-  $: filteredOptions = !searchAttributeValue
-    ? options
-    : options.filter((option) =>
-        option.value.toLowerCase().includes(searchAttributeValue.toLowerCase()),
-      );
+  const filteredOptions = $derived(
+    !searchAttributeValue
+      ? options
+      : options.filter((option) =>
+          option.value
+            .toLowerCase()
+            .includes(searchAttributeValue.toLowerCase()),
+        ),
+  );
 
-  $: query = $page.url.searchParams.get('query');
+  const query = $derived(page.url.searchParams.get('query') ?? '');
 </script>
 
 <MenuContainer>
   <MenuButton
     id="search-attribute-filter-button"
     controls="search-attribute-menu"
-    disabled={$activeQueryIndex !== null || query?.length >= MAX_QUERY_LENGTH}
+    disabled={$activeQueryIndex !== null || query.length >= MAX_QUERY_LENGTH}
     onclick={() => (searchAttributeValue = '')}
     class="text-nowrap"
   >
diff --git a/src/lib/components/search-attribute-filter/status-filter.svelte b/src/lib/components/search-attribute-filter/status-filter.svelte
index aacffdc753..f69f0aabd0 100644
--- a/src/lib/components/search-attribute-filter/status-filter.svelte
+++ b/src/lib/components/search-attribute-filter/status-filter.svelte
@@ -3,7 +3,7 @@
 
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Checkbox from '$lib/holocene/checkbox.svelte';
@@ -22,16 +22,22 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  export let filters: SearchAttributeFilter[];
+  interface Props {
+    filters: SearchAttributeFilter[];
+  }
+
+  let { filters = $bindable() }: Props = $props();
 
   const { filter, resetFilter } = getContext<FilterContext>(FILTER_CONTEXT);
   const open = writable(true);
-  $: _filters = [...filters];
-  $: statusFilters = _filters.filter((filter) => isStatusFilter(filter));
+  let _filters: SearchAttributeFilter[] = $derived([...filters]);
+  const statusFilters = $derived(
+    _filters.filter((filter) => isStatusFilter(filter)),
+  );
 
   function apply() {
     filters = _filters;
-    updateQueryParamsFromFilter($page.url, filters);
+    updateQueryParamsFromFilter(page.url, filters);
   }
 
   function mapStatusToFilter(value: string) {
diff --git a/src/lib/components/search-attribute-filter/text-filter.svelte b/src/lib/components/search-attribute-filter/text-filter.svelte
index 6b555c7283..f830e53223 100644
--- a/src/lib/components/search-attribute-filter/text-filter.svelte
+++ b/src/lib/components/search-attribute-filter/text-filter.svelte
@@ -11,8 +11,7 @@
 
   const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
 
-  $: ({ value } = $filter);
-  $: _value = value;
+  let _value = $derived($filter.value);
 
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter' && _value !== '') {
@@ -22,13 +21,13 @@
     }
   }
 
-  $: options = [
+  const options = $derived([
     { value: '=', label: translate('common.equal-to') },
     { value: '!=', label: translate('common.not-equal-to') },
     ...($prefixSearchEnabled && $filter.type === SEARCH_ATTRIBUTE_TYPE.KEYWORD
       ? [{ value: 'STARTS_WITH', label: translate('common.starts-with') }]
       : []),
-  ];
+  ]);
 </script>
 
 <ConditionalMenu {options} inputId="text-filter" noBorderLeft>
diff --git a/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte b/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte
index bc964c9fc1..7bf93f7d2c 100644
--- a/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte
+++ b/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
   import FilterBar from '$lib/components/shared-search-attribute-filter/filter-bar.svelte';
   import { activitiesQuery, activityRefresh } from '$lib/stores/activities';
diff --git a/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte b/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte
index b1db9457f7..f7812ffd21 100644
--- a/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte
+++ b/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte
@@ -13,11 +13,21 @@
 
   import OrderableList from './orderable-list.svelte';
 
-  export let availableColumns: Readable<ConfigurableTableHeader[]>;
-  export let open: boolean;
-  export let table: ConfigurableTableType = TABLE_TYPE.WORKFLOWS;
-  export let type: string;
-  export let title: string;
+  interface Props {
+    availableColumns: Readable<ConfigurableTableHeader[]>;
+    open: boolean;
+    table?: ConfigurableTableType;
+    type: string;
+    title: string;
+  }
+
+  let {
+    availableColumns,
+    open = $bindable(),
+    table = TABLE_TYPE.WORKFLOWS,
+    type,
+    title,
+  }: Props = $props();
 
   const closeCustomizationDrawer = () => {
     open = false;
diff --git a/src/lib/components/workflow/configurable-table-headers-drawer/orderable-list.svelte b/src/lib/components/workflow/configurable-table-headers-drawer/orderable-list.svelte
index 28f7d496c2..191f69eff3 100644
--- a/src/lib/components/workflow/configurable-table-headers-drawer/orderable-list.svelte
+++ b/src/lib/components/workflow/configurable-table-headers-drawer/orderable-list.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Readable } from 'svelte/store';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import OrderableListItem from '$lib/holocene/orderable-list/orderable-list-item.svelte';
   import OrderableList from '$lib/holocene/orderable-list/orderable-list.svelte';
@@ -16,15 +16,21 @@
     removeColumn,
   } from '$lib/stores/configurable-table-columns';
 
-  export let table: ConfigurableTableType;
-  export let availableColumns: Readable<ConfigurableTableHeader[]>;
-  export let type: string;
+  interface Props {
+    table: ConfigurableTableType;
+    availableColumns: Readable<ConfigurableTableHeader[]>;
+    type: string;
+  }
 
-  $: namespace = $page.params.namespace;
-  $: columnsInUse = $configurableTableColumns?.[namespace]?.[table] ?? [];
-  $: availableCustomColumns = availableCustomSearchAttributeColumns(
-    namespace,
-    table,
+  let { table, availableColumns, type }: Props = $props();
+
+  const namespace = $derived(page.params.namespace);
+  const columnsInUse = $derived(
+    $configurableTableColumns?.[namespace]?.[table] ?? [],
+  );
+
+  const availableCustomColumns = $derived(
+    availableCustomSearchAttributeColumns(namespace, table),
   );
 </script>
 
@@ -65,7 +71,7 @@
     <svelte:fragment slot="heading">
       Available Columns <span class="font-normal">(not in view)</span>
     </svelte:fragment>
-    {#each $availableColumns as { label }}
+    {#each $availableColumns as { label } (label)}
       <OrderableListItem
         static
         on:addItem={() => addColumn(label, namespace, table)}
@@ -86,7 +92,7 @@
       {translate('events.custom-search-attributes')}
       <span class="font-normal">(not in view)</span>
     </svelte:fragment>
-    {#each $availableCustomColumns as { label }}
+    {#each $availableCustomColumns as { label } (label)}
       <OrderableListItem
         static
         on:addItem={() => addColumn(label, namespace, table)}
diff --git a/src/lib/components/workflow/dropdown-filter/conditional.svelte b/src/lib/components/workflow/dropdown-filter/conditional.svelte
index baffba2ed8..1e2f31ecc3 100644
--- a/src/lib/components/workflow/dropdown-filter/conditional.svelte
+++ b/src/lib/components/workflow/dropdown-filter/conditional.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
-  export let conditional = '=';
+  interface Props {
+    conditional?: string;
+  }
+
+  let { conditional = $bindable('=') }: Props = $props();
 </script>
 
 <div class="mt-2 transition-all hover:cursor-pointer">
-  <button class="flex items-center" on:click={() => (conditional = '=')}>
+  <button class="flex items-center" onclick={() => (conditional = '=')}>
     <div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '='}>
       Is
     </div>
   </button>
-  <button class="flex items-center" on:click={() => (conditional = '!=')}>
+  <button class="flex items-center" onclick={() => (conditional = '!=')}>
     <div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '!='}>
       Is Not
     </div>
diff --git a/src/lib/components/workflow/relationships/workflow-family-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-tree.svelte
index 9c14803d16..82516d2740 100644
--- a/src/lib/components/workflow/relationships/workflow-family-tree.svelte
+++ b/src/lib/components/workflow/relationships/workflow-family-tree.svelte
@@ -13,12 +13,16 @@
   import WorkflowFamilyNodeDescription from './workflow-family-node-description.svelte';
   import WorkflowFamilyNodeTree from './workflow-family-node-tree.svelte';
 
-  export let root: RootNode;
-  export let namespace: string;
+  interface Props {
+    root: RootNode;
+    namespace: string;
+  }
 
-  $: expandAll = !$showFullTree;
-  let activeWorkflow: WorkflowExecution | undefined = undefined;
-  let openRuns = new Map<number, string>();
+  let { root = $bindable(), namespace }: Props = $props();
+
+  let expandAll = $derived(!$showFullTree);
+  let activeWorkflow = $state<WorkflowExecution | undefined>(undefined);
+  let openRuns = $state(new Map<number, string>());
 
   const onExpandAll = () => {
     expandAll = !expandAll;
diff --git a/src/lib/components/workflow/workflow-relationships-old.svelte b/src/lib/components/workflow/workflow-relationships-old.svelte
index 4fee8dc2dd..da1ea6d20d 100644
--- a/src/lib/components/workflow/workflow-relationships-old.svelte
+++ b/src/lib/components/workflow/workflow-relationships-old.svelte
@@ -12,25 +12,25 @@
   import ParentWorkflowTable from './parent-workflow-table.svelte';
   import SchedulerTable from './scheduler-table.svelte';
 
-  $: ({ namespace, workflow: workflowId, run: runId } = page.params);
-  $: ({ workflow } = $workflowRun);
+  const namespace = $derived(page.params.namespace);
+  const workflowId = $derived(page.params.workflow);
+  const runId = $derived(page.params.run);
+  const workflow = $derived($workflowRun.workflow);
 
-  $: workflowRelationships = getWorkflowRelationships(
-    workflow,
-    $fullEventHistory,
-    page.data.namespace,
+  const workflowRelationships = $derived(
+    getWorkflowRelationships(workflow, $fullEventHistory, page.data.namespace),
   );
 
-  $: ({
-    hasChildren,
-    first,
-    parent,
-    parentNamespaceName,
-    children,
-    next,
-    previous,
-    scheduleId,
-  } = workflowRelationships);
+  const hasChildren = $derived(workflowRelationships.hasChildren);
+  const first = $derived(workflowRelationships.first);
+  const parent = $derived(workflowRelationships.parent);
+  const parentNamespaceName = $derived(
+    workflowRelationships.parentNamespaceName,
+  );
+  const children = $derived(workflowRelationships.children);
+  const next = $derived(workflowRelationships.next);
+  const previous = $derived(workflowRelationships.previous);
+  const scheduleId = $derived(workflowRelationships.scheduleId);
 </script>
 
 <div class="flex flex-col gap-4 px-4 py-4 xl:px-8">
diff --git a/src/lib/holocene/accordion/accordion-group.svelte b/src/lib/holocene/accordion/accordion-group.svelte
index d412246356..df446b8ef2 100644
--- a/src/lib/holocene/accordion/accordion-group.svelte
+++ b/src/lib/holocene/accordion/accordion-group.svelte
@@ -1,3 +1,9 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children?: Snippet } = $props();
+</script>
+
 <div class="*:border-t-0 [&>*:first-child]:border-t">
-  <slot />
+  {@render children?.()}
 </div>
diff --git a/src/lib/holocene/day-of-month-picker.svelte b/src/lib/holocene/day-of-month-picker.svelte
index 91770b2eb6..6601910373 100644
--- a/src/lib/holocene/day-of-month-picker.svelte
+++ b/src/lib/holocene/day-of-month-picker.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
   import Button from '$lib/holocene/button.svelte';
 
-  const daysInMonth = Array.from({ length: 31 }).map((_, i) => i + 1);
+  interface Props {
+    daysOfMonth: number[];
+  }
 
-  export let daysOfMonth: number[];
+  let { daysOfMonth = $bindable() }: Props = $props();
+
+  const daysInMonth = Array.from({ length: 31 }).map((_, i) => i + 1);
 
   const onClick = (e: MouseEvent, day: number) => {
     if (e.metaKey) {
@@ -21,7 +25,7 @@
 <div
   class="surface-primary grid place-items-center gap-1 rounded border border-subtle px-0 py-4 text-center sm:gap-4 md:gap-x-8 md:px-2 xl:gap-x-16 xl:px-4"
 >
-  {#each daysInMonth as day}
+  {#each daysInMonth as day (day)}
     {@const active = daysOfMonth.includes(day)}
     <Button
       variant="secondary"
diff --git a/src/lib/holocene/day-of-week-picker.svelte b/src/lib/holocene/day-of-week-picker.svelte
index ba2a7d8a28..0ea0a30ead 100644
--- a/src/lib/holocene/day-of-week-picker.svelte
+++ b/src/lib/holocene/day-of-week-picker.svelte
@@ -2,7 +2,11 @@
   import Button from '$lib/holocene/button.svelte';
   import { genericWeekDays, weekDays } from '$lib/utilities/calendar';
 
-  export let daysOfWeek: string[];
+  interface Props {
+    daysOfWeek: string[];
+  }
+
+  let { daysOfWeek = $bindable() }: Props = $props();
 
   const onClick = (e: MouseEvent, day: string) => {
     if (e.metaKey) {
@@ -29,11 +33,11 @@
 
 <div class="flex flex-col gap-4 text-center">
   <div class="flex flex-wrap gap-2 text-center">
-    {#each genericWeekDays as { label, value }}
+    {#each genericWeekDays as { label, value } (value)}
       {@const active = daysOfWeek.includes(value)}
       <Button
         variant="secondary"
-        class={active && 'bg-interactive-secondary-active'}
+        class={active ? 'bg-interactive-secondary-active' : undefined}
         on:click={(e) => onClick(e, value)}
       >
         {label}
@@ -41,11 +45,11 @@
     {/each}
   </div>
   <div class="flex flex-wrap gap-2 text-center">
-    {#each weekDays as { label, value }}
+    {#each weekDays as { label, value } (value)}
       {@const active = daysOfWeek.includes(value)}
       <Button
         variant="secondary"
-        class={active && 'bg-interactive-secondary-active'}
+        class={active ? 'bg-interactive-secondary-active' : undefined}
         on:click={(e) => onClick(e, value)}
       >
         {label}
diff --git a/src/lib/holocene/error-boundary.svelte b/src/lib/holocene/error-boundary.svelte
index 3aa78812ae..cc2c28f715 100644
--- a/src/lib/holocene/error-boundary.svelte
+++ b/src/lib/holocene/error-boundary.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import Error from './error.svelte';
+
+  let { children }: { children?: Snippet } = $props();
 </script>
 
 <svelte:boundary>
-  <slot />
+  {@render children?.()}
   {#snippet failed(error, reset)}
     <Error {reset} {error} />
   {/snippet}
diff --git a/src/lib/holocene/month-picker.svelte b/src/lib/holocene/month-picker.svelte
index 5e2ced8ce7..35b4ac7e6f 100644
--- a/src/lib/holocene/month-picker.svelte
+++ b/src/lib/holocene/month-picker.svelte
@@ -2,7 +2,11 @@
   import Button from '$lib/holocene/button.svelte';
   import { monthNames } from '$lib/utilities/calendar';
 
-  export let months: string[];
+  interface Props {
+    months: string[];
+  }
+
+  let { months = $bindable() }: Props = $props();
 
   const onClick = (e: MouseEvent, month: string) => {
     if (e.metaKey && month !== '*') {
@@ -21,11 +25,11 @@
 </script>
 
 <div class="flex flex-wrap gap-4 text-center">
-  {#each monthNames as { label, value }}
+  {#each monthNames as { label, value } (value)}
     {@const active = months.includes(value)}
     <Button
       variant="secondary"
-      class={active && 'bg-interactive-secondary-active'}
+      class={active ? 'bg-interactive-secondary-active' : undefined}
       on:click={(e) => onClick(e, value)}
     >
       {label}
diff --git a/src/lib/holocene/page-transition.svelte b/src/lib/holocene/page-transition.svelte
index f6d3745f99..d58e301adc 100644
--- a/src/lib/holocene/page-transition.svelte
+++ b/src/lib/holocene/page-transition.svelte
@@ -1,10 +1,14 @@
-<script>
+<script lang="ts">
   import { fly } from 'svelte/transition';
+
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children?: Snippet } = $props();
 </script>
 
 <div
   in:fly={{ y: -50, duration: 150, delay: 50 }}
   out:fly={{ y: -50, duration: 150 }}
 >
-  <slot />
+  {@render children?.()}
 </div>
diff --git a/src/lib/holocene/select/multi-select.svelte b/src/lib/holocene/select/multi-select.svelte
index 2eaf3fa19a..404769ebfb 100644
--- a/src/lib/holocene/select/multi-select.svelte
+++ b/src/lib/holocene/select/multi-select.svelte
@@ -19,25 +19,46 @@
   import type { IconName } from '../icon';
   import Icon from '../icon/icon.svelte';
 
-  export let options: MultiSelectOptions = [];
-  export let initialSelected: MultiSelectOptions = [];
-  export let onChange: (options: MultiSelectOptions) => void;
-  export let label: string;
-  export let id: string;
-  export let variant: ButtonStyles['variant'] = 'secondary';
-  export let icon: IconName | undefined = undefined;
-  export let selectAllLabel: string;
-  export let clearAllLabel: string;
-  export let active = false;
-  export let disabled = false;
-  export let position: 'left' | 'right' = 'left';
-  export let initialSelectedAll = true;
+  interface Props {
+    options?: MultiSelectOptions;
+    initialSelected?: MultiSelectOptions;
+    onChange: (options: MultiSelectOptions) => void;
+    label: string;
+    id: string;
+    variant?: ButtonStyles['variant'];
+    icon?: IconName | undefined;
+    selectAllLabel: string;
+    clearAllLabel: string;
+    active?: boolean;
+    disabled?: boolean;
+    position?: 'left' | 'right';
+    initialSelectedAll?: boolean;
+  }
 
-  let selectedOptions = initialSelected.length
-    ? initialSelected
-    : initialSelectedAll
-      ? options
-      : [];
+  let {
+    options = [],
+    initialSelected = [],
+    onChange,
+    label,
+    id,
+    variant = 'secondary',
+    icon = undefined,
+    selectAllLabel,
+    clearAllLabel,
+    active = false,
+    disabled = false,
+    position = 'left',
+    initialSelectedAll = true,
+  }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  let selectedOptions = $state(
+    initialSelected.length
+      ? initialSelected
+      : initialSelectedAll
+        ? options
+        : [],
+  );
 
   const open = writable(false);
 
diff --git a/src/lib/holocene/toaster.svelte b/src/lib/holocene/toaster.svelte
index ab19f7b0fa..e4902c3bfc 100644
--- a/src/lib/holocene/toaster.svelte
+++ b/src/lib/holocene/toaster.svelte
@@ -10,10 +10,14 @@
   import Link from './link.svelte';
   import ToastComponent from './toast.svelte';
 
-  export let pop: Toast['pop'];
-  export let toasts: Toast['toasts'];
-  export let closeButtonLabel: string;
-  export let position: Writable<ToastPosition>;
+  interface Props {
+    pop: Toast['pop'];
+    toasts: Toast['toasts'];
+    closeButtonLabel: string;
+    position: Writable<ToastPosition>;
+  }
+
+  let { pop, toasts, closeButtonLabel, position }: Props = $props();
 
   const dismissToast = (event: CustomEvent<{ id: string }>) => {
     pop(event.detail.id);
diff --git a/src/lib/holocene/user-menu.svelte b/src/lib/holocene/user-menu.svelte
index 0a4f48fa6f..59ef3faa09 100644
--- a/src/lib/holocene/user-menu.svelte
+++ b/src/lib/holocene/user-menu.svelte
@@ -13,9 +13,13 @@
   import Icon from './icon/icon.svelte';
   import MenuDivider from './menu/menu-divider.svelte';
 
-  export let logout: () => void;
+  interface Props {
+    logout: () => void;
+  }
+
+  let { logout }: Props = $props();
 
-  let showProfilePic = true;
+  let showProfilePic = $state(true);
 
   function fixImage() {
     showProfilePic = false;
@@ -34,7 +38,7 @@
         src={$authUser?.picture}
         alt={$authUser?.profile ?? translate('common.user-profile')}
         class="h-[24px] w-[24px] cursor-pointer"
-        on:error={fixImage}
+        onerror={fixImage}
         class:hidden={!showProfilePic}
       />
       <div
diff --git a/src/lib/pages/batch-operation.svelte b/src/lib/pages/batch-operation.svelte
index 03ac0c3186..f2bb7e9c8a 100644
--- a/src/lib/pages/batch-operation.svelte
+++ b/src/lib/pages/batch-operation.svelte
@@ -9,10 +9,14 @@
   import { autoRefresh } from '$lib/stores/batch-operations';
   import { routeForBatchOperations } from '$lib/utilities/route-for';
 
-  export let namespace: string;
-  export let jobId: string;
+  interface Props {
+    namespace: string;
+    jobId: string;
+  }
 
-  let fetchKey: number = 0;
+  let { namespace, jobId }: Props = $props();
+
+  let fetchKey = $state(0);
   let timeout: number;
 
   const handleToggleAutoRefresh = (
diff --git a/src/lib/pages/import-events-view.svelte b/src/lib/pages/import-events-view.svelte
index d5b25316f6..af845d3ea9 100644
--- a/src/lib/pages/import-events-view.svelte
+++ b/src/lib/pages/import-events-view.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import HistoryImport from '$lib/components/import/event-history-file-import.svelte';
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
   import { translate } from '$lib/i18n/translate';
   import { lastUsedNamespace } from '$lib/stores/namespaces';
   import { routeForEventHistoryImport } from '$lib/utilities/route-for';
+
+  let { children }: { children?: Snippet } = $props();
 </script>
 
 <section id="event-history">
@@ -43,5 +47,5 @@
       </ToggleButtons>
     </div>
   </nav>
-  <slot />
+  {@render children?.()}
 </section>
diff --git a/src/lib/pages/workflow-metadata.svelte b/src/lib/pages/workflow-metadata.svelte
index 92ffa6ff69..a18a623923 100644
--- a/src/lib/pages/workflow-metadata.svelte
+++ b/src/lib/pages/workflow-metadata.svelte
@@ -4,7 +4,7 @@
   import { translate } from '$lib/i18n/translate';
   import { workflowRun } from '$lib/stores/workflow-run';
 
-  $: ({ workflow } = $workflowRun);
+  const workflow = $derived($workflowRun.workflow);
 </script>
 
 <div class="flex flex-col gap-4">
diff --git a/src/lib/utilities/dark-mode/dark-mode.svelte b/src/lib/utilities/dark-mode/dark-mode.svelte
index b90106b6c8..5b3ce499e3 100644
--- a/src/lib/utilities/dark-mode/dark-mode.svelte
+++ b/src/lib/utilities/dark-mode/dark-mode.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import { darkMode } from './dark-mode';
+
+  let { children }: { children?: Snippet } = $props();
 </script>
 
 <svelte:body use:darkMode />
-<slot />
+{@render children?.()}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 0c55d6e0f9..cdcd346cc7 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,29 +1,33 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import '../app.css';
 </script>
 
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Error from '$lib/holocene/error.svelte';
   import { isNetworkError } from '$lib/utilities/is-network-error';
   import { parseWithBigInt } from '$lib/utilities/parse-with-big-int';
 
-  $: error = $page.error;
-  $: status = $page.status;
-  let requestFromAPIError: Record<string, unknown>;
+  const error = $derived(page.error);
+  const status = $derived.by(() => {
+    let resolvedStatus: number = page.status;
+    let requestFromAPIError: Record<string, unknown> = {};
 
-  try {
-    if (error?.message) {
-      requestFromAPIError = parseWithBigInt(error.message);
-    }
+    try {
+      if (error?.message) {
+        requestFromAPIError = parseWithBigInt(error.message);
+      }
 
-    if (isNetworkError(requestFromAPIError)) {
-      status = requestFromAPIError.statusCode;
+      if (isNetworkError(requestFromAPIError)) {
+        resolvedStatus = requestFromAPIError.statusCode;
+      }
+    } catch (e) {
+      console.error(e);
     }
-  } catch (e) {
-    console.error(e);
-  }
+
+    return resolvedStatus;
+  });
 </script>
 
 <Error {error} {status} />