diff --git a/src/lib/components/bottom-nav-namespaces.svelte b/src/lib/components/bottom-nav-namespaces.svelte
index e0a04ee5fc..7f44d0b3e3 100644
--- a/src/lib/components/bottom-nav-namespaces.svelte
+++ b/src/lib/components/bottom-nav-namespaces.svelte
@@ -4,16 +4,22 @@
   import type { NamespaceListItem } from '$lib/types/global';
   import { sortAlphabetically } from '$lib/utilities/sort-alphabetically';
 
-  export let open = false;
-  export let namespaceList: NamespaceListItem[] = [];
+  interface Props {
+    open?: boolean;
+    namespaceList?: NamespaceListItem[];
+  }
+
+  let { open = false, namespaceList = [] }: Props = $props();
 
-  let search = '';
+  let search = $state('');
 
-  $: namespaces = sortAlphabetically(
-    search
-      ? namespaceList.filter(({ namespace }) => namespace.includes(search))
-      : namespaceList,
-    (ns) => ns.namespace,
+  const namespaces = $derived(
+    sortAlphabetically(
+      search
+        ? namespaceList.filter(({ namespace }) => namespace.includes(search))
+        : namespaceList,
+      (ns) => ns.namespace,
+    ),
   );
 </script>
 
@@ -35,7 +41,11 @@
           <button
             class="namespace"
             class:selected={namespace === $lastUsedNamespace}
-            on:click|preventDefault|stopPropagation={() => onClick(namespace)}
+            onclick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onClick(namespace);
+            }}
           >
             {namespace}
           </button>
diff --git a/src/lib/components/lines-and-dots/event-type-filter.svelte b/src/lib/components/lines-and-dots/event-type-filter.svelte
index 9de9f2e660..54c570299b 100644
--- a/src/lib/components/lines-and-dots/event-type-filter.svelte
+++ b/src/lib/components/lines-and-dots/event-type-filter.svelte
@@ -2,7 +2,7 @@
   import { writable } from 'svelte/store';
 
   import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Checkbox from '$lib/holocene/checkbox.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
@@ -26,43 +26,46 @@
 
   import { CategoryIcon } from './constants';
 
-  export let compact = false;
+  interface Props {
+    compact?: boolean;
+  }
 
-  let open = writable(false);
+  let { compact = false }: Props = $props();
 
-  $: defaultOptions = compact
-    ? compactEventTypeOptions.map((o) => o.value)
-    : allEventTypeOptions.map((o) => o.value);
+  const open = writable(false);
 
-  $: options = [
-    ...(compact ? compactEventTypeOptions : allEventTypeOptions).map((o) => ({
-      ...o,
-      label: translate(o.label),
-      icon: CategoryIcon[o.value],
-      description: translate(o.description),
-    })),
-  ];
+  const defaultOptions = $derived(
+    compact
+      ? compactEventTypeOptions.map((o) => o.value)
+      : allEventTypeOptions.map((o) => o.value),
+  );
 
-  $: {
+  const options = $derived.by(() => {
+    let list = (compact ? compactEventTypeOptions : allEventTypeOptions).map(
+      (o) => ({
+        ...o,
+        label: translate(o.label),
+        icon: CategoryIcon[o.value],
+        description: o.description ? translate(o.description) : '',
+      }),
+    );
     if (isVersionNewer('1.21.0', $temporalVersion)) {
-      options = options.filter(({ value }) => value !== 'update');
+      list = list.filter(({ value }) => value !== 'update');
     }
-  }
-
-  $: {
-    if (!nexusEnabled($page.data.systemInfo?.capabilities)) {
-      options = options.filter(({ value }) => value !== 'nexus');
+    if (!nexusEnabled(page.data.systemInfo?.capabilities)) {
+      list = list.filter(({ value }) => value !== 'nexus');
     }
-  }
+    return list;
+  });
 
-  const onOptionClick = ({ value }) => {
+  const onOptionClick = ({ value }: (typeof options)[number]) => {
     clearActiveGroups();
     const newCategories = $eventTypeFilter.some((type) => type === value)
       ? $eventTypeFilter.filter((type) => type !== value)
       : [...$eventTypeFilter, value];
     $eventTypeFilter = newCategories;
     updateEventFilterParams(
-      $page.url,
+      page.url,
       {
         categories:
           newCategories.length === defaultOptions.length ? null : newCategories,
@@ -75,7 +78,7 @@
     $eventTypeFilter = defaultOptions;
     $eventStatusFilter = false;
     updateEventFilterParams(
-      $page.url,
+      page.url,
       { categories: null, statusFilter: false },
       goto,
     );
@@ -85,7 +88,7 @@
     $eventTypeFilter = defaultOptions;
     $eventStatusFilter = !$eventStatusFilter;
     updateEventFilterParams(
-      $page.url,
+      page.url,
       { categories: null, statusFilter: !$eventStatusFilter },
       goto,
     );
@@ -95,13 +98,15 @@
     $eventTypeFilter = [];
     $eventStatusFilter = false;
     updateEventFilterParams(
-      $page.url,
+      page.url,
       { categories: [], statusFilter: false },
       goto,
     );
   };
 
-  $: filterActive = $eventTypeFilter.length < defaultOptions.length;
+  const filterActive = $derived(
+    $eventTypeFilter.length < defaultOptions.length,
+  );
 </script>
 
 <MenuContainer {open}>
@@ -111,7 +116,10 @@
         class="flex h-6 w-6 flex-col items-center justify-center rounded-full transition-colors duration-200"
         class:bg-interactive={filterActive}
       >
-        <Icon name="filter" class={filterActive && 'pt-0.5 text-white'} />
+        <Icon
+          name="filter"
+          class={filterActive ? 'pt-0.5 text-white' : undefined}
+        />
       </div>
     {/snippet}
     <span class="hidden text-sm md:block">{translate('common.filter')}</span>
@@ -167,7 +175,7 @@
       {translate('common.none')}
     </MenuItem>
     <MenuDivider />
-    {#each options as option}
+    {#each options as option (option.value)}
       <MenuItem
         data-testid={option.label}
         description={option.description}
diff --git a/src/lib/components/search-attribute-filter/conditional-menu.svelte b/src/lib/components/search-attribute-filter/conditional-menu.svelte
index 1f08c84c9b..dd4a08641f 100644
--- a/src/lib/components/search-attribute-filter/conditional-menu.svelte
+++ b/src/lib/components/search-attribute-filter/conditional-menu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
+  import { getContext, type Snippet } from 'svelte';
 
   import {
     Menu,
@@ -12,8 +12,6 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  const { filter, focusedElementId, handleSubmit } =
-    getContext<FilterContext>(FILTER_CONTEXT);
   const defaultConditionOptions = [
     { value: '>' },
     { value: '>=' },
@@ -23,40 +21,55 @@
     { value: '<' },
   ];
 
-  export let options: { value: string; label?: string }[] =
-    defaultConditionOptions;
-  export let disabled = false;
-  export let inputId: string;
-  export let noBorderLeft = false;
-  export let noBorderRight = false;
+  interface Props {
+    options?: { value: string; label?: string }[];
+    disabled?: boolean;
+    inputId: string;
+    noBorderLeft?: boolean;
+    noBorderRight?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    options = defaultConditionOptions,
+    disabled = false,
+    inputId,
+    noBorderLeft = false,
+    noBorderRight = false,
+    children,
+  }: Props = $props();
 
-  let conditionalOptions = [
+  const { filter, focusedElementId, handleSubmit } =
+    getContext<FilterContext>(FILTER_CONTEXT);
+
+  const conditionalOptions = $derived([
     ...options,
     { value: 'is', label: translate('common.is-null') },
     { value: 'is not', label: translate('common.is-not-null') },
-  ];
+  ]);
 
-  $: filterConditionalOption = conditionalOptions.find(
-    (o) => o.value === $filter.conditional,
+  const filterConditionalOption = $derived(
+    conditionalOptions.find((o) => o.value === $filter.conditional),
   );
-  $: {
-    filterConditionalOption;
-    updateFilterConditional();
-  }
-  $: isNullFilter = isNullConditional($filter.conditional);
-  $: selectedOption = filterConditionalOption ?? conditionalOptions[0];
-  $: selectedLabel = selectedOption?.label ?? selectedOption?.value;
+  const isNullFilter = $derived(isNullConditional($filter.conditional));
+  const selectedOption = $derived(
+    filterConditionalOption ?? conditionalOptions[0],
+  );
+  const selectedLabel = $derived(
+    selectedOption?.label ?? selectedOption?.value,
+  );
+
+  $effect(() => {
+    if (!filterConditionalOption) {
+      $filter.conditional = conditionalOptions[0].value;
+    }
+  });
 
   function handleNullFilter() {
     $filter.value = null;
     $filter.customDate = false;
     handleSubmit();
   }
-
-  function updateFilterConditional() {
-    if (!filterConditionalOption)
-      $filter.conditional = conditionalOptions[0].value;
-  }
 </script>
 
 <MenuContainer>
@@ -85,5 +98,5 @@
   </Menu>
 </MenuContainer>
 {#if !isNullFilter}
-  <slot />
+  {@render children?.()}
 {/if}
diff --git a/src/lib/components/search-attribute-filter/list-filter.svelte b/src/lib/components/search-attribute-filter/list-filter.svelte
index d0f547b0cb..78e1284c56 100644
--- a/src/lib/components/search-attribute-filter/list-filter.svelte
+++ b/src/lib/components/search-attribute-filter/list-filter.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
+  import { getContext, type Snippet } from 'svelte';
 
   import Button from '$lib/holocene/button.svelte';
   import ChipInput from '$lib/holocene/input/chip-input.svelte';
@@ -11,12 +11,19 @@
   import ConditionalMenu from './conditional-menu.svelte';
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+
   const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
 
-  $: ({ value, conditional } = $filter);
-  $: _value = value;
-  $: chips = formatListFilterValue(_value);
-  $: options = [
+  const value = $derived($filter.value);
+  const conditional = $derived($filter.conditional);
+  let _value = $derived(value);
+  let chips = $derived(formatListFilterValue(_value));
+  const options = [
     { value: 'in', label: 'In' },
     { value: '=', label: translate('common.equal-to') },
     { value: '!=', label: translate('common.not-equal-to') },
@@ -36,7 +43,13 @@
   }
 </script>
 
-<form class="flex grow" on:submit|preventDefault={onSubmit}>
+<form
+  class="flex grow"
+  onsubmit={(e) => {
+    e.preventDefault();
+    onSubmit();
+  }}
+>
   <ConditionalMenu inputId="list-filter" noBorderLeft {options}>
     {#if isInConditional(conditional)}
       <ChipInput
@@ -54,7 +67,7 @@
         <Button disabled={!chips.length} type="submit">
           {translate('common.search')}
         </Button>
-        <slot />
+        {@render children?.()}
       </div>
     {:else}
       <Input
@@ -68,7 +81,7 @@
         bind:value={_value}
         on:keydown={handleKeydown}
       />
-      <slot />
+      {@render children?.()}
     {/if}
   </ConditionalMenu>
 </form>
diff --git a/src/lib/components/timezone-select.svelte b/src/lib/components/timezone-select.svelte
index ad11912112..38da2b385e 100644
--- a/src/lib/components/timezone-select.svelte
+++ b/src/lib/components/timezone-select.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { type Unsubscriber, writable } from 'svelte/store';
+  import { SvelteDate } from 'svelte/reactivity';
+  import { writable } from 'svelte/store';
 
-  import { onDestroy, onMount } from 'svelte';
+  import { onMount } from 'svelte';
 
   import Timestamp from '$lib/components/timestamp.svelte';
   import type { ButtonStyles } from '$lib/holocene/button.svelte';
@@ -37,8 +38,12 @@
     Timezones,
   } from '$lib/utilities/timezone';
 
-  export let position: 'left' | 'right' = 'right';
-  export let size: ButtonStyles['size'] = 'md';
+  interface Props {
+    position?: 'left' | 'right';
+    size?: ButtonStyles['size'];
+  }
+
+  let { position = 'right', size = 'md' }: Props = $props();
 
   const open = writable(false);
   const localTime = getLocalTime();
@@ -50,21 +55,22 @@
     { label: translate('common.local'), value: BASE_TIME_FORMAT_OPTIONS.LOCAL },
   ];
 
-  let search = '';
-  let intervalId: number | undefined = undefined;
-  let currentDate = new Date().setMilliseconds(0);
-  let openUnsubscriber: Unsubscriber | undefined;
+  let search = $state('');
+  let currentDate = new SvelteDate();
+  currentDate.setMilliseconds(0);
 
-  $: filteredOptions = !search
-    ? TimezoneOptions
-    : TimezoneOptions.filter(({ abbr, value, zones }) => {
-        const searchValue = search.trim().toLowerCase();
-        return (
-          value.toLowerCase().includes(searchValue) ||
-          abbr?.toLowerCase().includes(searchValue) ||
-          zones?.some((zone) => zone.toLowerCase().includes(searchValue))
-        );
-      });
+  const filteredOptions = $derived(
+    !search
+      ? TimezoneOptions
+      : TimezoneOptions.filter(({ abbr, value, zones }) => {
+          const searchValue = search.trim().toLowerCase();
+          return (
+            value.toLowerCase().includes(searchValue) ||
+            abbr?.toLowerCase().includes(searchValue) ||
+            zones?.some((zone) => zone.toLowerCase().includes(searchValue))
+          );
+        }),
+  );
 
   const selectTimezone = (value: string) => {
     if ($relativeTime && value !== BASE_TIME_FORMAT_OPTIONS.LOCAL)
@@ -88,17 +94,29 @@
     $hourFormat = format;
   };
 
-  $: timezone = Timezones[$timeFormat ?? '']?.abbr ?? $timeFormat;
+  const timezone = $derived(Timezones[$timeFormat ?? '']?.abbr ?? $timeFormat);
+
+  $effect(() => {
+    let intervalId: number;
+    const clearInterval = () => {
+      if (intervalId) {
+        window.clearInterval(intervalId);
+      }
+    };
+
+    const updateCurrentDate = () => {
+      currentDate.setTime(Date.now());
+      currentDate.setMilliseconds(0);
+    };
 
-  openUnsubscriber = open.subscribe((isOpen) => {
-    if (isOpen) {
-      currentDate = new Date().setMilliseconds(0);
+    if ($open) {
+      updateCurrentDate();
       intervalId = window.setInterval(() => {
-        currentDate = new Date().setMilliseconds(0);
+        updateCurrentDate();
       }, 1000);
-    } else {
-      window.clearInterval(intervalId);
     }
+
+    return clearInterval;
   });
 
   onMount(() => {
@@ -107,10 +125,6 @@
       $relativeTime = true;
     }
   });
-
-  onDestroy(() => {
-    openUnsubscriber?.();
-  });
 </script>
 
 <MenuContainer
diff --git a/src/lib/components/workflow/search-attribute-input/datetime-input.svelte b/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
index def8ab7f74..6b3cdab859 100644
--- a/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
+++ b/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
@@ -7,7 +7,11 @@
   import { translate } from '$lib/i18n/translate';
   import { getUTCString } from '$lib/utilities/format-date';
 
-  export let value: string | null;
+  interface Props {
+    value: string | null;
+  }
+
+  let { value = $bindable() }: Props = $props();
 
   const datetime = value ? new Date(value) : new Date();
   const utcDate = new Date(
@@ -15,10 +19,10 @@
     datetime.getUTCMonth(),
     datetime.getUTCDate(),
   );
-  let date = startOfDay(utcDate);
-  let hour = value ? String(datetime.getUTCHours()) : '';
-  let minute = value ? String(datetime.getUTCMinutes()) : '';
-  let second = value ? String(datetime.getUTCSeconds()) : '';
+  let date = $state(startOfDay(utcDate));
+  let hour = $state(value ? String(datetime.getUTCHours()) : '');
+  let minute = $state(value ? String(datetime.getUTCMinutes()) : '');
+  let second = $state(value ? String(datetime.getUTCSeconds()) : '');
 
   onMount(() => {
     if (!value) updateDatetime();