diff --git a/src/lib/components/SegmentedControl.svelte b/src/lib/components/SegmentedControl.svelte
index 8c0fb4d1e..5c222f4f9 100644
--- a/src/lib/components/SegmentedControl.svelte
+++ b/src/lib/components/SegmentedControl.svelte
@@ -17,7 +17,12 @@ button-like control with a segement for each possible value.
 	export let options: readonly string[];
 	export let secondary = false;
 
-	const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher<{
+		change: {
+			name: string | undefined;
+			value: string;
+		};
+	}>();
 
 	function dispatchChange(this: HTMLInputElement) {
 		dispatch('change', {
@@ -30,7 +35,7 @@ button-like control with a segement for each possible value.
 <div class="segmented-control ds-3 {secondary ? 'secondary' : 'primary'}" data-css-props>
 	{#each options as option}
 		<label class:selected={option === selected}>
-			<span>{option}</span>
+			<div><slot {option}>{option}</slot></div>
 			<input type="radio" {name} bind:group={selected} value={option} on:change={dispatchChange} />
 		</label>
 	{/each}
@@ -58,13 +63,16 @@ button-like control with a segement for each possible value.
 	}
 
 	.segmented-control {
-		display: flex;
+		display: grid;
+		grid-auto-flow: column;
 		gap: var(--gap);
 		overflow: hidden;
 	}
 
 	label {
-		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		background: var(--background-default, inherit);
 		padding: var(--padding);
 		border-radius: var(--border-radius, inherit);
@@ -77,16 +85,16 @@ button-like control with a segement for each possible value.
 			&:first-child {
 				border-radius: var(--radius-md) 0 0 var(--radius-md);
 
-				span {
-					padding-left: var(--space-xxs);
+				div {
+					padding-left: 0.25rem;
 				}
 			}
 
 			&:last-child {
 				border-radius: 0 var(--radius-md) var(--radius-md) 0;
 
-				span {
-					padding-right: var(--space-xxs);
+				div {
+					padding-right: 0.25rem;
 				}
 			}
 		}
diff --git a/src/lib/trade-executor/components/ChainFilter.svelte b/src/lib/trade-executor/components/ChainFilter.svelte
new file mode 100644
index 000000000..61e7a3e5c
--- /dev/null
+++ b/src/lib/trade-executor/components/ChainFilter.svelte
@@ -0,0 +1,66 @@
+<script context="module" lang="ts">
+	import type { StrategyRuntimeState } from 'trade-executor/strategy/runtime-state';
+	import { type Chain, chains, getChain } from '$lib/helpers/chain';
+
+	export type ChainOption = Chain['slug'] | 'all';
+
+	export function getChainOptions(strategies: StrategyRuntimeState[]): ChainOption[] {
+		const chainSlugs = chains
+			.filter((c) => strategies.some((s) => matchesChainOption(s, c.slug))) // comment to break lines
+			.map((c) => c.slug);
+
+		return ['all', ...chainSlugs];
+	}
+
+	// Type predicate to narrow type to ChainOption
+	function isChainOption(chainOptions: ChainOption[], input: MaybeString): input is ChainOption {
+		return (chainOptions as MaybeString[]).includes(input);
+	}
+
+	export function parseChainOption(chainOptions: ChainOption[], input: MaybeString): ChainOption {
+		return isChainOption(chainOptions, input) ? input : 'all';
+	}
+
+	export function matchesChainOption(strategy: StrategyRuntimeState, chainOption?: ChainOption) {
+		if (chainOption === 'all') return true;
+		const chain = getChain(chainOption);
+		return strategy.on_chain_data?.chain_id === chain?.id;
+	}
+</script>
+
+<script lang="ts">
+	import SegmentedControl from '$lib/components/SegmentedControl.svelte';
+	import { getLogoUrl } from '$lib/helpers/assets';
+
+	export let options: ChainOption[];
+	export let selected: ChainOption;
+</script>
+
+<SegmentedControl name="chainFilter" {options} bind:selected let:option on:change>
+	<div class="filter-option {option}">
+		{#if option !== 'all'}
+			<img class="chain-icon" src={getLogoUrl('blockchain', option)} alt={option} />
+		{/if}
+		<span>{option}</span>
+	</div>
+</SegmentedControl>
+
+<style>
+	.filter-option {
+		display: flex;
+		gap: 0.25rem;
+		align-items: center;
+		justify-content: center;
+		padding-inline: 0.25rem;
+		text-transform: capitalize;
+
+		/* tweak Ethereum padding (logo image is narrower) */
+		&.ethereum {
+			padding-left: 0;
+		}
+
+		img {
+			width: 1.25em;
+		}
+	}
+</style>
diff --git a/src/lib/trade-executor/components/index.ts b/src/lib/trade-executor/components/index.ts
deleted file mode 100644
index 087677004..000000000
--- a/src/lib/trade-executor/components/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as KeyMetric } from './KeyMetric.svelte';
-export { default as KeyMetricDescription } from './KeyMetricDescription.svelte';
-export { default as StrategyIcon } from './StrategyIcon.svelte';
-export { default as StrategyError } from './StrategyError.svelte';
-export * from './StrategyError.svelte';
diff --git a/src/routes/FeaturedStrategies.svelte b/src/routes/FeaturedStrategies.svelte
index 1b6dbc481..25bcde387 100644
--- a/src/routes/FeaturedStrategies.svelte
+++ b/src/routes/FeaturedStrategies.svelte
@@ -1,34 +1,38 @@
 <script lang="ts">
 	import type { StrategyRuntimeState } from 'trade-executor/strategy/runtime-state';
+	import { slide } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	import { cubicOut } from 'svelte/easing';
 	import { Alert, Button, Section } from '$lib/components';
+	import {
+		type ChainOption,
+		default as ChainFilter,
+		getChainOptions,
+		matchesChainOption
+	} from 'trade-executor/components/ChainFilter.svelte';
 	import StrategyTile from './strategies/StrategyTile.svelte';
-	import StrategyDifferentiator from './StrategyDifferentiator.svelte';
 	import { getStrategyChartDateRange } from 'trade-executor/chart/helpers';
 
 	export let strategies: StrategyRuntimeState[];
 
+	let selected: ChainOption = 'all';
+
+	$: filteredStrategies = strategies.filter((s) => matchesChainOption(s, selected));
+
 	const chartDateRange = getStrategyChartDateRange(strategies);
 </script>
 
 <Section padding="md">
 	<h2>Open strategies</h2>
-	<div class="differentiators">
-		<StrategyDifferentiator
-			title="100% transparent"
-			details="All trades, all transactions, 100% transparently visible on the blockchains for you to verify. Building trust through openness."
-		/>
-		<StrategyDifferentiator
-			title="Self-custodial"
-			details="Withdraw your crypto whenever you want; Trading Strategy does not have access to your money."
-		/>
-		<StrategyDifferentiator
-			title="No fixed fees"
-			details="No fixed monthly fees; strategies collect performance fees only if they generate profits."
-		/>
+	<div class="filters">
+		<ChainFilter options={getChainOptions(strategies)} bind:selected />
 	</div>
-	<div class="strategies">
-		{#each strategies as strategy (strategy.id)}
-			<StrategyTile simplified {strategy} {chartDateRange} />
+	<div class="strategies" style:contain="paint">
+		{#each filteredStrategies as strategy, idx (strategy.id)}
+			{@const params = { duration: 200, delay: 50 * idx, easing: cubicOut }}
+			<div transition:slide={{ axis: 'x', ...params }} animate:flip={params} style:display="grid">
+				<StrategyTile simplified {strategy} {chartDateRange} />
+			</div>
 		{:else}
 			<div class="fallback">
 				<Alert size="sm" status="info">Check back soon to see top-performing strategies.</Alert>
@@ -37,7 +41,7 @@
 	</div>
 
 	<div class="cta">
-		<Button secondary label="See all strategies" href="/strategies" />
+		<Button secondary label="See all strategies" href="/strategies?chainFilter={selected}" />
 	</div>
 </Section>
 
@@ -46,22 +50,14 @@
 		text-align: center;
 	}
 
-	.differentiators {
-		margin-top: 0.75rem;
-		display: flex;
-		gap: 2em;
+	.filters {
+		display: grid;
+		gap: 1.25rem;
 		justify-content: center;
-		font: var(--f-ui-md-medium);
-		letter-spacing: var(--f-ui-md-spacing);
+		margin-top: 1rem;
 
 		@media (--viewport-sm-down) {
-			font: var(--f-ui-sm-medium);
-			letter-spacing: var(--f-ui-sm-spacing);
-		}
-
-		@media (--viewport-xs) {
-			display: grid;
-			gap: 0.875em;
+			justify-content: stretch;
 		}
 	}
 
diff --git a/src/routes/HomeHeroBanner.svelte b/src/routes/HomeHeroBanner.svelte
index 7e94ef241..983c0c60c 100644
--- a/src/routes/HomeHeroBanner.svelte
+++ b/src/routes/HomeHeroBanner.svelte
@@ -1,26 +1,32 @@
-<!--
-@component
-Home page hero banner.
-
-@example
-
-```svelte
-<HeroBanner />
-```
--->
 <script lang="ts">
-	import { Button } from '$lib/components';
+	import StrategyDifferentiator from './StrategyDifferentiator.svelte';
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<header class="home-hero-banner" data-testid="home-hero-banner">
+<section class="home-hero-banner" data-testid="home-hero-banner">
 	<div class="inner ds-container">
-		<enhanced:img src="$lib/assets/misc/mbp-15.webp" sizes="min(1144px, 100vw)" alt="Trading Data" />
+		<header>
+			<h1>
+				<span>Unleash the power of</span>
+				<span>automated crypto trading</span>
+			</h1>
+			<div class="differentiators">
+				<StrategyDifferentiator
+					title="100% transparent"
+					details="All trades, all transactions, 100% transparently visible on the blockchains for you to verify. Building trust through openness."
+				/>
+				<StrategyDifferentiator
+					title="Self-custodial"
+					details="Withdraw your crypto whenever you want; Trading Strategy does not have access to your money."
+				/>
+				<StrategyDifferentiator
+					title="No fixed fees"
+					details="No fixed monthly fees; strategies collect performance fees only if they generate profits."
+				/>
+			</div>
+		</header>
 
 		<div class="content">
-			<h1>Unleash the power of automated crypto trading</h1>
-
-			<hr />
+			<enhanced:img class="media" src="$lib/assets/misc/mbp-15.webp" sizes="min(1144px, 100vw)" alt="Trading Data" />
 
 			<ol>
 				<li>Select a professional-grade strategy aligned with your goals.</li>
@@ -28,39 +34,54 @@ Home page hero banner.
 				<li>Track your returns as the strategy trades automatically.</li>
 				<li>Adjust your portfolio or withdraw anytime.</li>
 			</ol>
-
-			<div class="buttons">
-				<Button href="/strategies">Start trading</Button>
-				<Button ghost href="https://github.com/tradingstrategy-ai/getting-started" target="_blank" rel="noreferrer">
-					For developers
-				</Button>
-			</div>
 		</div>
 	</div>
-</header>
+</section>
 
 <style>
 	.home-hero-banner {
 		background: var(--c-background-accent-1);
-		padding: 2rem 0;
+		padding: 5rem 2rem;
 
-		@media (--viewport-md-up) {
-			padding: 6rem 2rem;
+		@media (--viewport-sm-down) {
+			padding: 3rem 0;
+		}
+
+		@media (--viewport-xs) {
+			padding: 2rem 0;
 		}
 	}
 
 	.inner {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(min(24rem, calc(100vw - 2 * 2rem)), auto));
-		gap: min(5rem, 10vw);
-		place-items: center;
+		gap: 4rem;
+
+		@media (--viewport-sm-down) {
+			gap: 2.5rem;
+		}
+	}
+
+	header {
+		display: grid;
+		gap: 0.5rem;
+		justify-items: center;
 	}
 
 	h1 {
-		font: var(--f-heading-xxl-medium);
-		letter-spacing: var(--f-heading-xxl-spacing, normal);
+		text-align: center;
+		font: var(--f-heading-xxxl-medium);
+		letter-spacing: var(--f-heading-xxxl-spacing, normal);
 
-		@media (--viewport-xl-down) {
+		span {
+			white-space: nowrap;
+		}
+
+		@media (--viewport-lg-down) {
+			font: var(--f-heading-xxl-medium);
+			letter-spacing: var(--f-heading-xxl-spacing, normal);
+		}
+
+		@media (--viewport-md-down) {
 			font: var(--f-heading-xl-medium);
 			letter-spacing: var(--f-heading-xl-spacing, normal);
 		}
@@ -71,23 +92,66 @@ Home page hero banner.
 		}
 	}
 
+	.differentiators {
+		display: flex;
+		gap: 2em;
+		font: var(--f-ui-md-medium);
+		letter-spacing: var(--f-ui-md-spacing);
+
+		@media (--viewport-sm-down) {
+			font: var(--f-ui-sm-medium);
+			letter-spacing: var(--f-ui-sm-spacing);
+		}
+
+		@media (--viewport-xs) {
+			display: grid;
+			gap: 0.875em;
+		}
+	}
+
+	.content {
+		display: grid;
+		grid-template-columns: 3fr 4fr;
+		gap: 3rem;
+		place-items: center;
+
+		@media (--viewport-lg-down) {
+			grid-template-columns: auto auto;
+		}
+
+		@media (--viewport-md-down) {
+			grid-template-columns: auto;
+		}
+
+		@media (--viewport-md-down) {
+			> * {
+				max-width: 80vw;
+			}
+		}
+	}
+
 	ol {
 		list-style: none;
 		counter-reset: item;
 		display: grid;
-		gap: 0.5em;
+		gap: 1.25em;
 		padding: 0;
-		font: var(--f-ui-xl-roman);
-		letter-spacing: var(--f-ui-xl-spacing, normal);
+		font: var(--f-heading-md-roman);
+		letter-spacing: var(--f-heading-md-spacing, normal);
 
 		@media (--viewport-xl-down) {
-			font: var(--f-ui-lg-roman);
-			letter-spacing: var(--f-ui-lg-spacing, normal);
+			font: var(--f-heading-sm-roman);
+			letter-spacing: var(--f-heading-sm-spacing, normal);
+		}
+
+		@media (--viewport-lg-down) {
+			font: var(--f-ui-xl-roman);
+			letter-spacing: var(--f-ui-xl-spacing, normal);
 		}
 
 		@media (--viewport-sm-down) {
-			font: var(--f-ui-md-roman);
-			letter-spacing: var(--f-ui-md-spacing, normal);
+			font: var(--f-ui-lg-roman);
+			letter-spacing: var(--f-ui-lg-spacing, normal);
 		}
 	}
 
@@ -95,7 +159,7 @@ Home page hero banner.
 		counter-increment: item;
 		display: grid;
 		grid-template-columns: auto 1fr;
-		gap: 0.5em;
+		gap: 0.625em;
 	}
 
 	li:before {
@@ -111,23 +175,4 @@ Home page hero banner.
 		font-size: 0.9em;
 		font-weight: bold;
 	}
-
-	.buttons {
-		display: flex;
-		gap: 1.25rem;
-		margin-top: 2.5rem;
-
-		:global([data-css-props]:first-child) {
-			--button-padding: 0.75rem 2.5rem;
-		}
-
-		@media (--viewport-xs) {
-			flex-direction: column;
-		}
-	}
-
-	hr {
-		border: 1px solid var(--c-text);
-		margin-block: 1.5rem;
-	}
 </style>
diff --git a/src/routes/strategies/+page.svelte b/src/routes/strategies/+page.svelte
index b60ea86fa..38e01a68b 100644
--- a/src/routes/strategies/+page.svelte
+++ b/src/routes/strategies/+page.svelte
@@ -1,25 +1,51 @@
 <script lang="ts">
+	import type { StrategyRuntimeState } from 'trade-executor/strategy/runtime-state';
+	import type { ComponentEvents } from 'svelte';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { slide } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	import { cubicOut } from 'svelte/easing';
 	import { PageHeading, Section, SegmentedControl } from '$lib/components';
 	import StrategyTile from './StrategyTile.svelte';
 	import StrategyTvlChart from './StrategyTvlChart.svelte';
+	import {
+		default as ChainFilter,
+		getChainOptions,
+		parseChainOption,
+		matchesChainOption
+	} from 'trade-executor/components/ChainFilter.svelte';
 	import { getStrategyChartDateRange } from 'trade-executor/chart/helpers';
+	import { getChain } from '$lib/helpers/chain';
 
 	export let data;
 	const { admin, strategies, tvlData } = data;
 
 	const chartDateRange = getStrategyChartDateRange(strategies);
 
-	const options = ['all', 'live', 'unpublished'] as const;
-	let filter: (typeof options)[number] = 'all';
+	type StatusOption = (typeof statusOptions)[number];
+	const statusOptions = ['all', 'live', 'unpublished'] as const;
+	let selectedStatus: StatusOption = 'all';
+
+	const chainOptions = getChainOptions(strategies);
+	$: selectedChain = parseChainOption(chainOptions, $page.url.searchParams.get('chainFilter'));
 
 	$: filteredStrategies = strategies.filter((s) => {
-		if (!admin || filter === 'all') return true;
+		return matchesStatus(s, selectedStatus) && matchesChainOption(s, selectedChain);
+	});
+
+	function matchesStatus(strategy: StrategyRuntimeState, status: StatusOption) {
+		if (!admin || status === 'all') return true;
 
 		// return live strategies for "live" filter; others for "unpublished" filter
-		const liveFilter = filter === 'live';
-		const liveStrategy = s.tags?.includes('live');
+		const liveFilter = status === 'live';
+		const liveStrategy = strategy.tags?.includes('live');
 		return liveFilter === liveStrategy;
-	});
+	}
+
+	function handleChainFilterChange({ detail }: ComponentEvents<ChainFilter>['change']) {
+		goto(`?chainFilter=${detail.value}`, { replaceState: true, noScroll: true });
+	}
 </script>
 
 <svelte:head>
@@ -29,22 +55,35 @@
 
 <main class="strategies-index-page ds-3">
 	<Section>
-		<PageHeading title="Strategies" description="Currently available automated trading strategies for you">
-			<svelte:fragment slot="cta">
-				{#if admin}
-					<SegmentedControl bind:selected={filter} {options} />
-				{/if}
-			</svelte:fragment>
-		</PageHeading>
+		<PageHeading title="Strategies" description="Currently available automated trading strategies for you" />
+
+		<div class="filters">
+			<ChainFilter options={chainOptions} selected={selectedChain} on:change={handleChainFilterChange} />
+			{#if admin}
+				<SegmentedControl bind:selected={selectedStatus} options={statusOptions} />
+			{/if}
+		</div>
 
 		{#if filteredStrategies.length}
 			<div class="strategy-tiles" data-testid="strategy-tiles">
-				{#each filteredStrategies as strategy (strategy.id)}
-					<StrategyTile {admin} {strategy} {chartDateRange} />
+				{#each filteredStrategies as strategy, idx (strategy.id)}
+					{@const params = { duration: 200, delay: 50 * idx, easing: cubicOut }}
+					<div transition:slide={{ axis: 'x', ...params }} animate:flip={params} style:display="grid">
+						<StrategyTile {admin} {strategy} {chartDateRange} />
+					</div>
 				{/each}
 			</div>
 		{:else}
-			<p>Currently no open strategies available.</p>
+			<p>
+				Currently no
+				{#if selectedStatus !== 'all'}
+					{selectedStatus}
+				{/if}
+				{#if selectedChain !== 'all'}
+					{getChain(selectedChain)?.name}
+				{/if}
+				strategies available.
+			</p>
 
 			<p>
 				<a class="body-link" href="/community">Join Discord to get access</a>.
@@ -64,6 +103,27 @@
 		margin-top: 1.25rem;
 	}
 
+	.filters {
+		display: grid;
+		gap: 0.75rem 1rem;
+		grid-template-columns: auto auto;
+		justify-content: space-between;
+		margin-block: -1.5rem 1.75rem;
+		text-transform: capitalize;
+
+		@media (--viewport-md-down) {
+			margin-block: -1rem 1.5rem;
+		}
+
+		@media (--viewport-sm-down) {
+			grid-template-columns: 1fr;
+		}
+
+		@media (--viewport-xs) {
+			margin-block: -0.75rem 1.25rem;
+		}
+	}
+
 	.strategy-tiles {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
diff --git a/src/routes/strategies/StrategyDataSummary.svelte b/src/routes/strategies/StrategyDataSummary.svelte
index 466b5b7c8..6d5d1e438 100644
--- a/src/routes/strategies/StrategyDataSummary.svelte
+++ b/src/routes/strategies/StrategyDataSummary.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { StrategyRuntimeState } from 'trade-executor/strategy/runtime-state';
 	import { EntitySymbol, UpDownIndicator } from '$lib/components';
-	import { KeyMetric } from 'trade-executor/components';
+	import KeyMetric from 'trade-executor/components/KeyMetric.svelte';
 	import { formatDaysAgo, formatNumber, formatPercent, formatDollar } from '$lib/helpers/formatters';
 	import { formatProfitability } from 'trade-executor/helpers/formatters';
 	import { metricDescriptions } from 'trade-executor/helpers/strategy-metric-help-texts';
diff --git a/src/routes/strategies/StrategyTile.svelte b/src/routes/strategies/StrategyTile.svelte
index acc4aec3d..abcc082a0 100644
--- a/src/routes/strategies/StrategyTile.svelte
+++ b/src/routes/strategies/StrategyTile.svelte
@@ -5,12 +5,16 @@
 	import { utcDay } from 'd3-time';
 	import { normalizeDataForInterval } from '$lib/chart';
 	import { getChain } from '$lib/helpers/chain';
-	import { Button, DataBadge, Tooltip } from '$lib/components';
-	import { StrategyIcon, StrategyError, shouldDisplayError, adminOnlyError } from 'trade-executor/components';
+	import { Alert, Button, DataBadge, Tooltip } from '$lib/components';
+	import StrategyIcon from 'trade-executor/components/StrategyIcon.svelte';
+	import {
+		default as StrategyError,
+		shouldDisplayError,
+		adminOnlyError
+	} from 'trade-executor/components/StrategyError.svelte';
 	import ChartThumbnail from './ChartThumbnail.svelte';
 	import StrategyDataSummary from './StrategyDataSummary.svelte';
 	import { getLogoUrl } from '$lib/helpers/assets';
-	import Alert from '$lib/components/Alert.svelte';
 
 	export let admin = false;
 	export let simplified = false;
@@ -115,7 +119,9 @@
 			<StrategyDataSummary {simplified} {strategy} />
 		</div>
 		<div class="actions">
-			<Button size="md" {href}>View strategy</Button>
+			<Button size="md" {href}>
+				{simplified ? 'Start trading' : 'View strategy'}
+			</Button>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/strategies/[strategy]/+layout.svelte b/src/routes/strategies/[strategy]/+layout.svelte
index 8071921b3..c228fe62d 100644
--- a/src/routes/strategies/[strategy]/+layout.svelte
+++ b/src/routes/strategies/[strategy]/+layout.svelte
@@ -2,7 +2,12 @@
 	import { page } from '$app/stores';
 	import Breadcrumbs from '$lib/breadcrumb/Breadcrumbs.svelte';
 	import { AlertList, DataBadge, PageHeading } from '$lib/components';
-	import { StrategyIcon, StrategyError, shouldDisplayError, adminOnlyError } from 'trade-executor/components';
+	import StrategyIcon from 'trade-executor/components/StrategyIcon.svelte';
+	import {
+		default as StrategyError,
+		shouldDisplayError,
+		adminOnlyError
+	} from 'trade-executor/components/StrategyError.svelte';
 	import { menuOptions, default as StrategyNav } from './StrategyNav.svelte';
 	import WalletWidget from '$lib/wallet/WalletWidget.svelte';
 
diff --git a/src/routes/strategies/[strategy]/SummaryMetrics.svelte b/src/routes/strategies/[strategy]/SummaryMetrics.svelte
index ec62443e8..f8de612a3 100644
--- a/src/routes/strategies/[strategy]/SummaryMetrics.svelte
+++ b/src/routes/strategies/[strategy]/SummaryMetrics.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { SummaryKeyMetrics } from 'trade-executor/strategy/summary';
 	import MetricsBox from './MetricsBox.svelte';
-	import { KeyMetric } from 'trade-executor/components';
 	import { UpDownIndicator } from '$lib/components';
+	import KeyMetric from 'trade-executor/components/KeyMetric.svelte';
 	import { formatDaysAgo, formatDollar, formatNumber, formatPercent, formatPrice } from '$lib/helpers/formatters';
 	import { formatCycleDuration, formatProfitability, formatTradesPerMonth } from 'trade-executor/helpers/formatters';
 	import { metricDescriptions } from 'trade-executor/helpers/strategy-metric-help-texts';
diff --git a/tests/integration/index.test.ts-snapshots/home-page-hero-banner-looks-correct-1-darwin.png b/tests/integration/index.test.ts-snapshots/home-page-hero-banner-looks-correct-1-darwin.png
index fdc256abc..9790c7872 100644
Binary files a/tests/integration/index.test.ts-snapshots/home-page-hero-banner-looks-correct-1-darwin.png and b/tests/integration/index.test.ts-snapshots/home-page-hero-banner-looks-correct-1-darwin.png differ
diff --git a/tests/integration/index.test.ts-snapshots/home-page-hero-banner-looks-correct-1-linux.png b/tests/integration/index.test.ts-snapshots/home-page-hero-banner-looks-correct-1-linux.png
index 6b776bf81..c61d3c49e 100644
Binary files a/tests/integration/index.test.ts-snapshots/home-page-hero-banner-looks-correct-1-linux.png and b/tests/integration/index.test.ts-snapshots/home-page-hero-banner-looks-correct-1-linux.png differ
diff --git a/tests/integration/strategies/index.test.ts b/tests/integration/strategies/index.test.ts
index 1ac2890f1..e5f273853 100644
--- a/tests/integration/strategies/index.test.ts
+++ b/tests/integration/strategies/index.test.ts
@@ -29,7 +29,7 @@ test.describe('strategy index page', () => {
 		await page.locator('label:has-text("live")').click();
 
 		const rows = page.locator(`[data-testid="strategy-tiles"] > *`);
-		expect(await rows.count()).toBe(1);
+		await expect(rows).toHaveCount(1);
 
 		const heading = page.getByRole('heading', { name: 'MATIC-USD breakout on Uniswap v3' });
 		await expect(heading).toBeVisible();
@@ -40,7 +40,7 @@ test.describe('strategy index page', () => {
 		await page.getByText('unpublished', { exact: true }).click();
 
 		const rows = page.locator(`[data-testid="strategy-tiles"] > *`);
-		expect(await rows.count()).toBe(1);
+		await expect(rows).toHaveCount(1);
 
 		const heading = page.getByRole('heading', { name: 'Multipair breakout strategy on Uniswap v3' });
 		await expect(heading).toBeVisible();