diff --git a/tests/__screenshots__/production/deposited-cycles.spec.ts/deposited-cycles.png b/tests/__screenshots__/production/deposited-cycles.spec.ts/deposited-cycles.png
new file mode 100644
index 0000000..14b3024
Binary files /dev/null and b/tests/__screenshots__/production/deposited-cycles.spec.ts/deposited-cycles.png differ
diff --git a/tests/__screenshots__/production/failed-deposit-cycles.spec.ts/failed-deposit-cycles.png b/tests/__screenshots__/production/failed-deposit-cycles.spec.ts/failed-deposit-cycles.png
new file mode 100644
index 0000000..dca3489
Binary files /dev/null and b/tests/__screenshots__/production/failed-deposit-cycles.spec.ts/failed-deposit-cycles.png differ
diff --git a/tests/deposited-cycles.spec.ts b/tests/deposited-cycles.spec.ts
new file mode 100644
index 0000000..863b5f3
--- /dev/null
+++ b/tests/deposited-cycles.spec.ts
@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+import { TemplatePage } from "./page-objects/template";
+
+const title = "deposited-cycles.tsx";
+const path = "/preview/notifications/deposited-cycles";
+
+test("should contains content", async ({ page }) => {
+  const template = await TemplatePage.init({ page, title, path });
+
+  await template.assertText({
+    text: "0.01 T Cycles have been deposited on your Satellite.",
+  });
+  await template.assertText({ text: "Module: Satellite (Hello)" });
+  await template.assertText({ text: "Amount: 0.01 T Cycles" });
+  await template.assertText({ text: "Time: September 7, 2022 at 10:58 AM" });
+
+  const url =
+    "https://console.juno.build/satellite/?s=ucnx3-aqaaa-aaaal-ab3ea-cai";
+
+  await template.assertLink({ url, text: "View your module" });
+  await template.assertLink({ url, text: url });
+});
+
+test("deposited-cycles layout", async ({ page }) => {
+  await TemplatePage.init({ page, title, path });
+
+  await expect(page).toHaveScreenshot(`deposited-cycles.png`, {
+    fullPage: true,
+  });
+});
diff --git a/tests/failed-deposit-cycles.spec.ts b/tests/failed-deposit-cycles.spec.ts
new file mode 100644
index 0000000..c1ddf95
--- /dev/null
+++ b/tests/failed-deposit-cycles.spec.ts
@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+import { TemplatePage } from "./page-objects/template";
+
+const title = "failed-deposit-cycles.tsx";
+const path = "/preview/notifications/failed-deposit-cycles";
+
+test("should contains content", async ({ page }) => {
+  const template = await TemplatePage.init({ page, title, path });
+
+  await template.assertText({
+    text: "An attempt to deposit cycles on your Satellite has failed!",
+  });
+  await template.assertText({ text: "Module: Satellite (Hello)" });
+  await template.assertText({ text: "Time: September 7, 2022 at 10:58 AM" });
+
+  const url =
+    "https://console.juno.build/satellite/?s=ucnx3-aqaaa-aaaal-ab3ea-cai";
+
+  await template.assertLink({ url, text: "View your module" });
+  await template.assertLink({ url, text: url });
+});
+
+test("deposited-cycles layout", async ({ page }) => {
+  await TemplatePage.init({ page, title, path });
+
+  await expect(page).toHaveScreenshot(`failed-deposit-cycles.png`, {
+    fullPage: true,
+  });
+});
diff --git a/tests/notifications.spec.ts b/tests/notifications.spec.ts
deleted file mode 100644
index 1171c0d..0000000
--- a/tests/notifications.spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-
-test('checking the url', async ({page}) => {
-  await page.goto('/')
-  await expect(page).toHaveURL('http://localhost:3000/')
-})
-
-test('checking home page', async ({page}) => {
-  await page.goto('/')
-  await expect(page.getByRole('heading',{name: 'Welcome to React Email'})).toContainText('Welcome to React Email')
-})
-
-test('cheking for presence of notifications', async ({page}) => {
-  await page.goto('/')
-  await expect(page.locator('//h3')).toHaveText('notifications')
-})
-
-test('checking for presence of mails', async ({page}) => {
-  await page.goto('/')
-  await page.locator('//h3').click()
-  for (const element of await page.locator('span.truncate.w-\\[calc\\(100\\%\\-1\\.25rem\\)\\]').all()) {
-  expect(element).toBeVisible()}
-  })
-
-test('checking for screenshot light mode', async ({page}) => {
-  page.goto('/')
-  await page.locator('//h3').click()
-  await page.getByText('deposited-cycles').click()
-  await page.locator('#layer2')
-  await expect(page).toHaveScreenshot('deposited-cycles.png')
-
-  await page.getByText('failed-deposit-cycles').click()
-  await page.locator('#layer2')
-  await expect(page).toHaveScreenshot('failed-deposit-cycles.png')
-})
-
diff --git a/tests/page-objects/template.ts b/tests/page-objects/template.ts
new file mode 100644
index 0000000..272b453
--- /dev/null
+++ b/tests/page-objects/template.ts
@@ -0,0 +1,42 @@
+import { expect, FrameLocator, Page } from "@playwright/test";
+
+export interface TemplatePageParams {
+  page: Page;
+  path: `/${string}`;
+  title: string;
+}
+
+export class TemplatePage {
+  private readonly page: Page;
+  private readonly frame: FrameLocator;
+
+  private constructor({
+    page,
+    frame,
+  }: Pick<TemplatePageParams, "page"> & { frame: FrameLocator }) {
+    this.page = page;
+    this.frame = frame;
+  }
+
+  static async init({
+    title,
+    path,
+    page,
+  }: TemplatePageParams): Promise<TemplatePage> {
+    await page.goto(path, { waitUntil: "domcontentloaded" });
+
+    const frame = page.frameLocator(`iframe[title="${title}"]`);
+
+    return new TemplatePage({ page, frame });
+  }
+
+  async assertText({ text }: { text: string }) {
+    await expect(this.frame.getByText(text, { exact: true })).toBeVisible();
+  }
+
+  async assertLink({ url, text }: { url: string; text: string }) {
+    await expect(
+      this.frame.locator(`a[href="${url}"]`, { hasText: text }),
+    ).toHaveCount(1);
+  }
+}