diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index ef0312afcd..640664c00f 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -263,7 +263,8 @@ const AppearanceView = () => {
         type="submit"
         loading={mutation.isLoading}
         color="primary"
-        className="mt-8">
+        className="mt-8"
+        data-testid="update-theme-btn">
         {t("update")}
       </Button>
     </Form>
diff --git a/apps/web/playwright/change-theme.e2e.ts b/apps/web/playwright/change-theme.e2e.ts
new file mode 100644
index 0000000000..9f77e98889
--- /dev/null
+++ b/apps/web/playwright/change-theme.e2e.ts
@@ -0,0 +1,45 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe("Change Theme Test", () => {
+  test("change theme to dark", async ({ page, users }) => {
+    const pro = await users.create();
+    await pro.apiLogin();
+
+    await page.goto("/settings/my-account/appearance");
+
+    await page.waitForLoadState("networkidle");
+    //Click the "Dark" theme label
+    await page.click('[data-testid="theme-dark"]');
+    //Click the update button
+    await page.click('[data-testid="update-theme-btn"]');
+    //Wait for the toast to appear
+    const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
+    expect(toast).toBeTruthy();
+    //Go to the profile page and check if the theme is dark
+    await page.goto(`/${pro.username}`);
+    const darkModeClass = await page.getAttribute("html", "class");
+    expect(darkModeClass).toContain("dark");
+  });
+
+  test("change theme to light", async ({ page, users }) => {
+    const pro = await users.create();
+    await pro.apiLogin();
+
+    await page.goto("/settings/my-account/appearance");
+
+    await page.waitForLoadState("networkidle");
+    //Click the "Light" theme label
+    await page.click('[data-testid="theme-light"]');
+    //Click the update theme button
+    await page.click('[data-testid="update-theme-btn"]');
+    //Wait for the toast to appear
+    const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
+    expect(toast).toBeTruthy();
+    //Go to the profile page and check if the theme is light
+    await page.goto(`/${pro.username}`);
+    const darkModeClass = await page.getAttribute("html", "class");
+    expect(darkModeClass).toContain("light");
+  });
+});
diff --git a/packages/features/settings/ThemeLabel.tsx b/packages/features/settings/ThemeLabel.tsx
index 32fe8aebdf..0983a174e5 100644
--- a/packages/features/settings/ThemeLabel.tsx
+++ b/packages/features/settings/ThemeLabel.tsx
@@ -12,7 +12,8 @@ export default function ThemeLabel(props: ThemeLabelProps) {
   return (
     <label
       className="relative mb-4 flex-1 cursor-pointer text-center last:mb-0 last:mr-0 sm:mr-4 sm:mb-0"
-      htmlFor={`theme-${variant}`}>
+      htmlFor={`theme-${variant}`}
+      data-testid={`theme-${variant}`}>
       <input
         className="peer absolute top-8 left-8"
         type="radio"