diff --git a/.gitignore b/.gitignore
index 8b3c209853..b923a644ee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,5 +40,3 @@ backend-v*.wasm.gz
 /blob-report/
 /playwright/.cache/
 pocket-ic
-
-e2e/*-snapshots/*Chrome-darwin.png
\ No newline at end of file
diff --git a/e2e/homepage.spec.ts b/e2e/homepage.spec.ts
index a804ee18a4..ef760a7b30 100644
--- a/e2e/homepage.spec.ts
+++ b/e2e/homepage.spec.ts
@@ -1,11 +1,45 @@
-import { expect, test } from '@playwright/test';
+import { testWithII } from '@dfinity/internet-identity-playwright';
+import { expect, test, type Page } from '@playwright/test';
 
 const testUrl = '/';
 
-test('should display not logged in homepage', async ({ page }) => {
-	await page.goto(testUrl);
+const hideHeroAnimation = async (page: Page): Promise<void> => {
+	await page
+		.getByTestId('three-background-canvas')
+		.evaluate((element) => (element.style.display = 'none'));
+};
 
-	await page.getByTestId('login-button').waitFor();
+test.describe('logged out user', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto(testUrl);
 
-	await expect(page).toHaveScreenshot();
+		await page.getByTestId('login-button').waitFor();
+	});
+
+	test('should display logged out hero and blurred tokens', async ({ page }) => {
+		await hideHeroAnimation(page);
+
+		await expect(page).toHaveScreenshot({
+			fullPage: true
+		});
+	});
+});
+
+testWithII.describe('logged in user', () => {
+	testWithII.beforeEach(async ({ page, iiPage }) => {
+		await page.goto(testUrl);
+
+		await iiPage.signInWithNewIdentity();
+
+		await page.getByTestId('exchange-balance-output').waitFor();
+		await page.getByTestId('tokens-skeletons-initialized').waitFor();
+	});
+
+	testWithII('should display logged in hero and tokens', async ({ page }) => {
+		await hideHeroAnimation(page);
+
+		await expect(page).toHaveScreenshot({
+			fullPage: true
+		});
+	});
 });
diff --git a/e2e/homepage.spec.ts-snapshots/logged-in-user-should-display-logged-in-hero-and-tokens-1-Google-Chrome-darwin.png b/e2e/homepage.spec.ts-snapshots/logged-in-user-should-display-logged-in-hero-and-tokens-1-Google-Chrome-darwin.png
new file mode 100644
index 0000000000..67f9b0a49e
Binary files /dev/null and b/e2e/homepage.spec.ts-snapshots/logged-in-user-should-display-logged-in-hero-and-tokens-1-Google-Chrome-darwin.png differ
diff --git a/e2e/homepage.spec.ts-snapshots/logged-out-user-should-display-logged-out-hero-and-blurred-tokens-1-Google-Chrome-darwin.png b/e2e/homepage.spec.ts-snapshots/logged-out-user-should-display-logged-out-hero-and-blurred-tokens-1-Google-Chrome-darwin.png
new file mode 100644
index 0000000000..39e8172185
Binary files /dev/null and b/e2e/homepage.spec.ts-snapshots/logged-out-user-should-display-logged-out-hero-and-blurred-tokens-1-Google-Chrome-darwin.png differ
diff --git a/e2e/homepage.spec.ts-snapshots/should-display-not-logged-in-homepage-1-Google-Chrome-linux.png b/e2e/homepage.spec.ts-snapshots/should-display-not-logged-in-homepage-1-Google-Chrome-linux.png
deleted file mode 100644
index 9089a50236..0000000000
Binary files a/e2e/homepage.spec.ts-snapshots/should-display-not-logged-in-homepage-1-Google-Chrome-linux.png and /dev/null differ
diff --git a/src/frontend/src/lib/components/exchange/ExchangeBalance.svelte b/src/frontend/src/lib/components/exchange/ExchangeBalance.svelte
index 5ca686f637..0144b0c270 100644
--- a/src/frontend/src/lib/components/exchange/ExchangeBalance.svelte
+++ b/src/frontend/src/lib/components/exchange/ExchangeBalance.svelte
@@ -13,6 +13,7 @@
 <span class="text-off-white block">
 	<output
 		class={`break-all text-5xl font-bold ${totalUsd === 0 ? 'opacity-50' : 'opacity-100'} inline-block mt-8`}
+		data-tid="exchange-balance-output"
 	>
 		{#if $exchangeInitialized}
 			{formatUSD(totalUsd)}
diff --git a/src/frontend/src/lib/components/tokens/TokensSkeletons.svelte b/src/frontend/src/lib/components/tokens/TokensSkeletons.svelte
index 1ae15afde0..d2ee6d2721 100644
--- a/src/frontend/src/lib/components/tokens/TokensSkeletons.svelte
+++ b/src/frontend/src/lib/components/tokens/TokensSkeletons.svelte
@@ -7,7 +7,7 @@
 {#if $erc20UserTokensNotInitialized}
 	<SkeletonCards rows={5} />
 {:else}
-	<div in:fade>
+	<div in:fade data-tid="tokens-skeletons-initialized">
 		<slot />
 	</div>
 {/if}
diff --git a/src/frontend/src/lib/components/ui/ThreeBackground.svelte b/src/frontend/src/lib/components/ui/ThreeBackground.svelte
index f3c0056350..ca22746aa6 100644
--- a/src/frontend/src/lib/components/ui/ThreeBackground.svelte
+++ b/src/frontend/src/lib/components/ui/ThreeBackground.svelte
@@ -114,6 +114,7 @@ void main(){
 		renderer = new WebGLRenderer();
 		renderer.domElement.style.width = '100%';
 		renderer.domElement.style.height = '100%';
+		renderer.domElement.setAttribute('data-tid', 'three-background-canvas');
 		container.appendChild(renderer.domElement);
 
 		material = new ShaderMaterial({