diff --git a/.github/workflows/pr_ci_playwright_e2e.yaml b/.github/workflows/pr_ci_playwright_e2e.yaml
index b7369f4ff..e6d9eeb99 100644
--- a/.github/workflows/pr_ci_playwright_e2e.yaml
+++ b/.github/workflows/pr_ci_playwright_e2e.yaml
@@ -4,18 +4,18 @@ on:
 
 jobs:
   frontend:
-    name: Run PR Frontend Check
+    name: Run PR Frontend E2E Check
     runs-on: ubuntu-latest
     environment: dev
 
     steps:
-      - name: cleanup old checkout
+      - name: Cleanup Old Checkout
         run: chmod +w -R ${GITHUB_WORKSPACE}; rm -rf ${GITHUB_WORKSPACE}/*;
 
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Clean up any existing containers
+      - name: Clean Any Existing Containers
         run: |
           docker stop $(docker ps -aq) || true
           docker rm $(docker ps -aq) || true
@@ -27,32 +27,39 @@ jobs:
           ! nc -z localhost 5432
 
       - name: Run Docker Compose
-        run: docker compose --env-file .env.dev up --build -d
+        run: docker compose --env-file .env.dev up --build -d backend db
 
       - name: Check Docker Container Logs
         run: docker compose --env-file .env.dev logs
 
-      - name: Setup Node environment
+      - name: Setup Node Environment
         uses: actions/setup-node@v4
         with:
           node-version: 20
 
-      - name: Clean Yarn cache
+      - uses: c-py/action-dotenv-to-setenv@v5
+        with:
+          env-file: .env.dev
+
+      - name: Clean Yarn Cache
         working-directory: ./frontend
-        run: |
-          sudo yarn cache clean
+        run: sudo yarn cache clean
 
       - name: Install dependencies via Yarn
         working-directory: ./frontend
         run: |
           sudo yarn install
+          sudo yarn build
+
+      - name: Run Node Server
+        working-directory: ./frontend
+        run: nohup node .output/server/index.mjs &
 
       - name: Install Playwright Browsers
         working-directory: ./frontend
-        run: |
-          sudo yarn playwright install --with-deps
+        run: sudo yarn playwright install --with-deps
 
-      - name: Wait for web server to be ready
+      - name: Wait for Web Server
         working-directory: ./frontend
         run: |
           MAX_ATTEMPTS=3
@@ -76,12 +83,11 @@ jobs:
             fi
           done
 
-      - name: Run Playwright tests
+      - name: Run Playwright Tests
         working-directory: ./frontend
-        run: |
-          sudo yarn playwright test --reporter=html
+        run: sudo yarn playwright test
 
-      - name: Upload Playwright report
+      - name: Upload Playwright Report
         if: always()
         uses: actions/upload-artifact@v4
         with:
diff --git a/.prettierignore b/.prettierignore
index f45f23c4d..5695e88c9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,6 @@
 node_modules/
 .nuxt/
+.output/
 
 playwright-report/
 tests-examples/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a58f56d69..72325d415 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -27,8 +27,9 @@ If you have questions or would like to communicate with the team, please [join u
 - [Documentation](#documentation-)
 - [Accessibility](#accessibility-)
 - [Design](#design-)
+- [Troubleshooting](#troubleshooting-)
 
-<a id="first-steps"></a>
+<a id="first-steps-"></a>
 
 ## First steps as a contributor [`⇧`](#contents)
 
@@ -44,7 +45,7 @@ Thank you for your interest in contributing to activist.org! We look forward to
 - Check out our [public designs on Figma](https://www.figma.com/file/I9McFfaLu1RiiWp5IP3YjE/activist_public_designs?type=design&node-id=10%3A18&mode=design&t=tdQyOtl5lU1n7oLN-1) to understand activist's goals and direction
 - Consider joining our [bi-weekly developer sync](https://etherpad.wikimedia.org/p/activist-dev-sync)!
 
-<a id="tech-stack"></a>
+<a id="tech-stack-"></a>
 
 ## Tech Stack [`⇧`](#contents)
 
@@ -73,7 +74,7 @@ The following are the current and planned technologies for [activist.org](https:
 > [!NOTE]
 > Those new to any frameworks or technologies who want to work on their skills are more than welcome to contribute!
 
-<a id="learning-the-tech"></a>
+<a id="learning-the-tech-"></a>
 
 ## Learning the tech stack [`⇧`](#contents)
 
@@ -119,7 +120,7 @@ activist is very open to contributions from people in the early stages of their
 </p>
 </details>
 
-<a id="dev-env"></a>
+<a id="dev-env-"></a>
 
 ## Development environment [`⇧`](#contents)
 
@@ -223,7 +224,7 @@ git remote add upstream https://github.com/activist-org/activist.git
 > [!NOTE]
 > Feel free to contact the team in the [Development room on Matrix](https://matrix.to/#/!CRgLpGeOBNwxYCtqmK:matrix.org?via=matrix.org&via=acter.global&via=chat.0x7cd.xyz) if you're having problems getting your environment setup!
 
-<a id="using-yarn-or-python"></a>
+<a id="using-yarn-or-python-"></a>
 
 ### Using Yarn or Python
 
@@ -237,6 +238,11 @@ The frontend currently uses [Yarn 1](https://classic.yarnpkg.com/lang/en/docs/in
 ```bash
 # In the root activist directory:
 cd frontend
+
+# Set the environment variables:
+set -a && source ../.env.dev && set +a
+
+# Install and run the project:
 yarn install
 yarn run dev:local
 ```
@@ -324,13 +330,13 @@ yarn run story:dev
 
 From there you'll be able to visit http://localhost:6006/ to view the documentation. Contributions are very welcome! -->
 
-<a id="style-guide"></a>
+<a id="style-guide-"></a>
 
 ## Style guide [`⇧`](#contents)
 
 Please see the [activist style guide](STYLEGUIDE.md) for details about how to follow the code style for the project. We made these guidelines to assure that we as a community write clean, cohesive code that's easy to write and review. Suggestions for the style guide are welcome.
 
-<a id="testing"></a>
+<a id="testing-"></a>
 
 ## Testing [`⇧`](#contents)
 
@@ -389,7 +395,41 @@ Please see the [frontend testing guide](FRONTEND_TESTING.md) for information on
 > [!NOTE]
 > The vitest test suite is still in a very early stage.  There is a lot of work left to do to increase test coverage, and some features still need troubleshooting.  If you need assistance then feel free to open a PR and we'll support!
 
-<a id="linting"></a>
+### End to End Testing
+
+#### Local E2E
+
+In order to test locally, you first need to build the production version of the frontend as directed in the [local build directions](#using-yarn-or-python-).
+
+To run the end to end tests locally, please run the following commands:
+
+```bash
+docker-compose --env-file .env.dev up backend db # run backend and db in docker
+```
+
+Then in a second shell:
+
+```bash
+node .output/server/index.mjs  # start the build frontend
+```
+
+Then in a third shell:
+
+```bash
+yarn test:local
+```
+
+#### Remote E2E
+
+To run the tests on the repository, first create a branch from the remote branch that you want to test against. This can be done with the following command:
+
+```bash
+git push upstream <local-branch-name>:<remote-branch-name-of-your-choice>
+```
+
+You can then navigate to the [actions of the repository](https://github.com/activist-org/activist/actions) and trigger [pr_ci_playwright_e2e](https://github.com/activist-org/activist/actions/workflows/pr_ci_playwright_e2e.yaml) for the remote branch that you just created.
+
+<a id="linting-"></a>
 
 ## Linting [`⇧`](#contents)
 
@@ -434,13 +474,13 @@ To make the above steps easier, the activist team asks that contributors report
 
 Again, thank you for your time in reporting issues!
 
-<a name="feature-requests"></a>
+<a name="feature-requests-"></a>
 
 ## Feature requests [`⇧`](#contents)
 
 Feature requests are more than welcome! Please take a moment to find out whether your idea fits with the scope and aims of the project. When making a suggestion, provide as much detail and context as possible, and further make clear the degree to which you would like to contribute in its development. Feature requests are marked with the [`feature`](https://github.com/activist-org/activist/issues?q=is%3Aopen+is%3Aissue+label%3Afeature) label in the [issues](https://github.com/activist-org/activist/issues).
 
-<a name="pull-requests"></a>
+<a name="pull-requests-"></a>
 
 ## Pull requests [`⇧`](#contents)
 
@@ -477,6 +517,13 @@ When making a contribution, adhering to the [GitHub flow](https://docs.github.co
 > pip install pre-commit
 > ```
 
+> [!NOTE]
+> If you are having issues with pre-commit and want to send along your changes regardless, you can ignore the pre-commit hooks via the following:
+>
+> ```bash
+> git commit --no-verify -m "COMMIT_MESSAGE"
+> ```
+
 4. Commit your changes in logical chunks, and please try to adhere to [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).
 
 > [!NOTE]
@@ -501,7 +548,7 @@ When making a contribution, adhering to the [GitHub flow](https://docs.github.co
 
 Thank you in advance for your contributions!
 
-<a id="localization"></a>
+<a id="localization-"></a>
 
 ## Localization [`⇧`](#contents)
 
@@ -525,13 +572,13 @@ To find issues related to localization, please see the [`localization`](https://
 > }
 > ```
 
-<a id="documentation"></a>
+<a id="documentation-"></a>
 
 ## Documentation [`⇧`](#contents)
 
 Documentation is an invaluable way to contribute to coding projects as it allows others to more easily understand the project structure and contribute. Issues related to documentation are marked with the [`documentation`](https://github.com/activist-org/activist/labels/documentation) label in the [issues](https://github.com/activist-org/activist/issues).
 
-<a id="accessibility"></a>
+<a id="accessibility-"></a>
 
 ## Accessibility [`⇧`](#contents)
 
@@ -562,7 +609,7 @@ Tab focusing sadly doesn't work out of the box for many browsers. Chrome works g
 
 Once the above steps are finished you should be able to use tab to navigate web pages :)
 
-<a id="design"></a>
+<a id="design-"></a>
 
 ## Design [`⇧`](#contents)
 
@@ -573,3 +620,19 @@ Designs for activist are done in the [public design file in Figma](https://www.f
 Note that the linked Figma file above is the [public facing designs](https://www.figma.com/file/I9McFfaLu1RiiWp5IP3YjE/activist_designs?node-id=805%3A231). Those interested in improving them or contributing designs for new features are invited to contact the team on GitHub or [Matrix](https://matrix.to/#/!uIGQUxlCnEzrPiRsRw:matrix.org?via=matrix.org&via=effektio.org&via=acter.global). We'd love to see a sample of your work, and if everything looks good we'll schedule a time to get connected!
 
 All branding elements such as logos, icons, colors and fonts should follow those that are set out in [activist-org/Organization](https://github.com/activist-org/Organization). As the project is fully open source, these elements are also open for discussion. Your efforts in making activist products professional with a distinct and cohesive identity are much appreciated.
+
+<a id="troubleshooting-"></a>
+
+## Troubleshooting [`⇧`](#contents)
+
+### Nuxt Auto Import Errors
+
+Nuxt uses auto imports to make frontend development more seamless, but at times these imports malfunction. For the `Property 'PROPERTY_NAME' does not exist on type...` errors, this is caused both by having an out of sync `yarn.lock` file and having Nuxt improperly installed.
+
+Things to check are:
+
+1. Replace `yarn.lock` file with the one in main
+2. Run `yarn cache clean` (this clears the yarn cache system wide and takes a long time)
+3. Delete the `node_modules` folder
+4. Load environment variables into your shell with `set -a && source ../.env.dev && set +a`
+5. Rerun `yarn install`
diff --git a/frontend/components/SearchBar.vue b/frontend/components/SearchBar.vue
index f1dc0ed38..f5dfb89f3 100644
--- a/frontend/components/SearchBar.vue
+++ b/frontend/components/SearchBar.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="location == SearchBarLocation.SIDEBAR"
+    id="search"
     class="elem-shadow-sm mx-2 flex grow select-none items-center justify-between rounded-md bg-layer-2 py-1 pl-[12px] text-left text-distinct-text transition duration-200 focus-within:mb-[-3px] focus-within:border-2 focus-within:border-link-text"
   >
     <div class="flex items-center space-x-2 pl-1">
@@ -69,19 +70,21 @@
   </div>
   <div
     v-else
+    id="search"
     class="relative inline-flex select-none items-center space-x-2 rounded-md border border-distinct-text bg-layer-2 py-1 pl-[12px] pr-[10px] text-left text-distinct-text focus-within:border-2 focus-within:border-cta-orange dark:border-distinct-text dark:text-distinct-text dark:focus-within:border-cta-orange"
   >
     <Icon
       @click="emit('on-search-toggle')"
+      id="search-toggle"
       class="my-1 h-4 w-4 flex-shrink-0"
       :name="expanded ? `${IconMap.X_LG}` : `${IconMap.SEARCH}`"
       size="1em"
     />
-    <label for="expanded-search-input" class="hidden md:block">{{
+    <label for="input-search" class="hidden md:block">{{
       $t("_global.search")
     }}</label>
     <input
-      id="expanded-search-input"
+      id="input-search"
       class="bg-transparent focus:outline-none"
       :class="{ hidden: !expanded }"
       type="text"
diff --git a/frontend/components/dropdown/DropdownItemsLayout.vue b/frontend/components/dropdown/DropdownItemsLayout.vue
index cb1314835..b47744b93 100644
--- a/frontend/components/dropdown/DropdownItemsLayout.vue
+++ b/frontend/components/dropdown/DropdownItemsLayout.vue
@@ -8,6 +8,7 @@
     <MenuLinkWrapper
       v-for="opt in options"
       :key="opt.id"
+      :id="getSelectorId(opt.label)"
       :to="opt.routeUrl"
       :selected="opt.selected"
       :isAddStyles="false"
@@ -42,4 +43,27 @@ const isSideLeftMenu = computed(() => {
 const isSideMenu = computed(() => {
   return props.location === DropdownLocation.SIDE_MENU;
 });
+
+const getSelectorId = (label: string) => {
+  const idMap: Record<string, string> = {
+    help: "help",
+    doc: "docs",
+    legal: "legal",
+    profile: "profile",
+    events: "your-events",
+    orgs: "your-organizations",
+    notifications: "notifications",
+    settings: "settings",
+    sign_out: "sign-out",
+    sign_up: "sign-up",
+    sign_in: "sign-in",
+    new_event: "create-new-event",
+    new_organization: "create-new-organization",
+    new_group: "create-new-group",
+    new_resource: "create-new-resource",
+  };
+
+  const key = Object.keys(idMap).find((k) => label.includes(k));
+  return key ? idMap[key] : undefined;
+};
 </script>
diff --git a/frontend/components/header/HeaderAppPage.vue b/frontend/components/header/HeaderAppPage.vue
index bfe531b06..322bbec1d 100644
--- a/frontend/components/header/HeaderAppPage.vue
+++ b/frontend/components/header/HeaderAppPage.vue
@@ -40,7 +40,7 @@
       </div>
     </div>
   </div>
-  <div class="flex items-baseline gap-2 md:gap-4">
+  <div id="home-header" class="flex items-baseline gap-2 md:gap-4">
     <h1
       class="responsive-h1 pt-4 font-bold text-primary-text transition-all duration-500"
     >
diff --git a/frontend/components/header/HeaderMobile.vue b/frontend/components/header/HeaderMobile.vue
index eb7da80f3..e10ea394e 100644
--- a/frontend/components/header/HeaderMobile.vue
+++ b/frontend/components/header/HeaderMobile.vue
@@ -2,6 +2,7 @@
   <header
     v-if="!aboveMediumBP"
     ref="header"
+    id="mobile-header"
     class="sticky top-0 z-50 h-12 w-full bg-layer-2 drop-shadow-md duration-500"
   >
     <div class="h-full">
@@ -29,14 +30,17 @@
             />
             <DropdownCreate
               v-if="userIsSignedIn"
+              id="create"
               class="w-full"
               :location="DropdownLocation.SIDE_MENU"
             />
             <DropdownInfo
+              id="info"
               class="w-full"
               :location="DropdownLocation.SIDE_MENU"
             />
             <DropdownUserOptions
+              id="user-options"
               class="w-full"
               :location="DropdownLocation.SIDE_MENU"
               :userIsSignedIn="userIsSignedIn"
diff --git a/frontend/components/header/HeaderWebsite.vue b/frontend/components/header/HeaderWebsite.vue
index 028be2448..7bb6096ef 100644
--- a/frontend/components/header/HeaderWebsite.vue
+++ b/frontend/components/header/HeaderWebsite.vue
@@ -35,16 +35,19 @@
           />
           <DropdownCreate
             v-if="userIsSignedIn && devMode.active"
+            id="create"
             class="w-full"
             :location="DropdownLocation.SIDE_MENU"
           />
           <DropdownInfo
             v-if="devMode.active"
+            id="info"
             class="w-full"
             :location="DropdownLocation.SIDE_MENU"
           />
           <DropdownUserOptions
             v-if="devMode.active"
+            id="user-options"
             class="w-full"
             :location="DropdownLocation.SIDE_MENU"
             :userIsSignedIn="userIsSignedIn"
diff --git a/frontend/components/indicator/IndicatorPasswordStrength.vue b/frontend/components/indicator/IndicatorPasswordStrength.vue
index 0923c4d89..40c88a2d2 100644
--- a/frontend/components/indicator/IndicatorPasswordStrength.vue
+++ b/frontend/components/indicator/IndicatorPasswordStrength.vue
@@ -2,12 +2,14 @@
   <div class="h-4">
     <div class="h-1 rounded-md bg-distinct-text">
       <div
+        id="password-strength-indicator-progress"
         class="h-1 rounded-md transition-width duration-500 ease-in"
         :class="!!passwordValue.length ? `${color}` : ''"
         :style="`width: ${width}%;`"
       ></div>
     </div>
     <div
+      id="sign-in-password-strength-text"
       class="float-right mt-1 text-xs"
       :class="{
         'text-distinct-text': color !== 'bg-primary-text',
diff --git a/frontend/components/menu/mobile/MenuMobileNavBar.vue b/frontend/components/menu/mobile/MenuMobileNavBar.vue
index fd101f627..0f2e9ba35 100644
--- a/frontend/components/menu/mobile/MenuMobileNavBar.vue
+++ b/frontend/components/menu/mobile/MenuMobileNavBar.vue
@@ -6,6 +6,7 @@
       <ul class="flex">
         <li v-for="(item, index) in menuItems" :key="index" class="flex-1">
           <MenuMobileSelector
+            :id="getSelectorId(item.label)"
             class="rounded-none"
             :label="item.label"
             :routeUrl="item.routeUrl"
@@ -23,4 +24,15 @@
 const isActive = (routeUrl: string) => {
   return isRouteActive(routeUrl);
 };
+
+const getSelectorId = (label: string) => {
+  const idMap: Record<string, string> = {
+    home: "home",
+    events: "events",
+    organizations: "organizations",
+  };
+
+  const key = Object.keys(idMap).find((k) => label.includes(k));
+  return key ? idMap[key] : undefined;
+};
 </script>
diff --git a/frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue b/frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue
index 1918cbb5f..2a87c438b 100644
--- a/frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue
+++ b/frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-if="selectedMenuItem" class="fixed z-20 h-10 w-full bg-menu-selection">
+  <div
+    v-if="selectedMenuItem"
+    id="submenu"
+    class="fixed z-20 h-10 w-full bg-menu-selection"
+  >
     <Listbox v-model="selectedMenuItem">
       <ListboxButton
         class="elem-shadow-sm focus-brand relative flex w-full items-center fill-layer-1 py-2 pl-5 text-left align-middle text-layer-1"
@@ -35,6 +39,11 @@
           >
             <NuxtLink @click="handleItemClick(menuEntry)">
               <li
+                :id="
+                  (sidebarType === SidebarType.ORGANIZATION_PAGE
+                    ? 'org-'
+                    : 'event-') + menuEntry.label.split('.').pop()
+                "
                 class="relative flex cursor-default select-none items-center py-2 pl-5 align-middle"
                 :class="{
                   'bg-layer-2 fill-primary-text text-primary-text dark:bg-section-div':
diff --git a/frontend/components/modal/ModalBase.vue b/frontend/components/modal/ModalBase.vue
index 48da8187d..98eb85da4 100644
--- a/frontend/components/modal/ModalBase.vue
+++ b/frontend/components/modal/ModalBase.vue
@@ -14,6 +14,7 @@
       }"
     >
       <DialogPanel
+        id="search-modal"
         :class="{
           'flex flex-col items-center': imageModal,
           'card-style-base container h-full w-full max-w-4xl cursor-default overflow-y-auto bg-layer-0 p-5 pl-6 text-primary-text md:h-auto':
@@ -23,6 +24,7 @@
         <button
           v-if="imageModal"
           @click="closeModal()"
+          id="close-search-modal"
           class="focus-brand absolute right-0 mr-24 mt-8 rounded-full p-1 text-distinct-text hover:text-primary-text"
           :aria-label="
             $t ? $t('components.modal_base.close_modal_aria_label') : ''
diff --git a/frontend/components/sidebar/left/SidebarLeft.vue b/frontend/components/sidebar/left/SidebarLeft.vue
index 6ae8456ed..490926139 100644
--- a/frontend/components/sidebar/left/SidebarLeft.vue
+++ b/frontend/components/sidebar/left/SidebarLeft.vue
@@ -8,6 +8,7 @@
       handleFocusOut($event);
     "
     ref="sidebarWrapper"
+    id="sidebar-left"
     role="menu"
     tabindex="0"
     class="elem-shadow-sm focus-brand absolute z-40 block h-full flex-col border-r border-section-div bg-layer-1 transition-all duration-500 md:flex"
diff --git a/frontend/components/sidebar/left/SidebarLeftFooter.vue b/frontend/components/sidebar/left/SidebarLeftFooter.vue
index 75ccaf8f2..82b8c33d3 100644
--- a/frontend/components/sidebar/left/SidebarLeftFooter.vue
+++ b/frontend/components/sidebar/left/SidebarLeftFooter.vue
@@ -17,14 +17,17 @@
     >
       <DropdownCreate
         v-if="userIsSignedIn"
+        id="create"
         class="w-full"
         :location="DropdownLocation.SIDE_LEFT_MENU"
       />
       <DropdownInfo
+        id="info"
         class="w-full"
         :location="DropdownLocation.SIDE_LEFT_MENU"
       />
       <DropdownUserOptions
+        id="user-options"
         class="w-full"
         :location="DropdownLocation.SIDE_LEFT_MENU"
         :userIsSignedIn="userIsSignedIn"
diff --git a/frontend/components/sidebar/left/SidebarLeftHeader.vue b/frontend/components/sidebar/left/SidebarLeftHeader.vue
index aa51e10eb..4aeecd762 100644
--- a/frontend/components/sidebar/left/SidebarLeftHeader.vue
+++ b/frontend/components/sidebar/left/SidebarLeftHeader.vue
@@ -38,6 +38,7 @@
             sidebar.toggleCollapsedSwitch();
             emit('toggle-pressed');
           "
+          id="sidebar-left-toggle"
           class="focus-brand flex h-7 w-7 items-center justify-center outline-offset-0 transition duration-200"
           :class="{
             '-rotate-180 pr-0.5': sidebar.collapsedSwitch == false,
diff --git a/frontend/components/sidebar/left/SidebarLeftIndex.vue b/frontend/components/sidebar/left/SidebarLeftIndex.vue
index 098f92333..0ae45e929 100644
--- a/frontend/components/sidebar/left/SidebarLeftIndex.vue
+++ b/frontend/components/sidebar/left/SidebarLeftIndex.vue
@@ -61,6 +61,7 @@
         />
       </div>
       <ul
+        id="submenu"
         class="mb-1 flex w-full flex-col px-1"
         :class="{
           'mt-4':
@@ -75,6 +76,11 @@
             : menuEntriesState.eventEntry.value"
         >
           <SidebarLeftSelector
+            :id="
+              (sidebarType === SidebarType.ORGANIZATION_PAGE
+                ? 'org-'
+                : 'event-') + menuEntry.label.split('.').pop()
+            "
             :label="menuEntry.label"
             :routeUrl="menuEntry.routeUrl"
             :iconUrl="menuEntry.iconUrl"
diff --git a/frontend/components/sidebar/left/SidebarLeftMainSectionSelectors.vue b/frontend/components/sidebar/left/SidebarLeftMainSectionSelectors.vue
index b7eaaa193..e66230656 100644
--- a/frontend/components/sidebar/left/SidebarLeftMainSectionSelectors.vue
+++ b/frontend/components/sidebar/left/SidebarLeftMainSectionSelectors.vue
@@ -5,6 +5,7 @@
       <SidebarLeftSelector
         v-for="(item, index) in menuItems.slice(1, 3)"
         :key="index"
+        :id="getSelectorId(item.label)"
         :label="item.label"
         :routeUrl="item.routeUrl"
         :iconUrl="item.iconUrl"
@@ -19,4 +20,14 @@
 const isActive = (routeUrl: string) => {
   return isRouteActive(routeUrl);
 };
+
+const getSelectorId = (label: string) => {
+  const idMap: Record<string, string> = {
+    organizations: "organizations",
+    events: "events",
+  };
+
+  const key = Object.keys(idMap).find((k) => label.includes(k));
+  return key ? idMap[key] : undefined;
+};
 </script>
diff --git a/frontend/components/sidebar/left/SidebarLeftSelector.vue b/frontend/components/sidebar/left/SidebarLeftSelector.vue
index f0bb90235..7396bf758 100644
--- a/frontend/components/sidebar/left/SidebarLeftSelector.vue
+++ b/frontend/components/sidebar/left/SidebarLeftSelector.vue
@@ -1,5 +1,5 @@
 <template>
-  <MenuLinkWrapper :to="routeUrl" :selected="selected">
+  <MenuLinkWrapper :id="id" :to="routeUrl" :selected="selected">
     <div
       class="relative z-0 flex w-full items-center space-x-2 text-left text-sm font-medium"
     >
@@ -28,6 +28,7 @@ defineProps<{
   routeUrl: string;
   iconUrl: string;
   selected: boolean;
+  id?: string;
 }>();
 
 const sidebar = useSidebar();
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 82c5a7ca9..d00754c56 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -33,6 +33,15 @@ export default defineNuxtConfig({
     server: {
       watch: {
         usePolling: true,
+        ignored: [
+          "**/playwright/**",
+          "**/playwright-report/**",
+          "**/test/**",
+          "**/test-e2e/**",
+          "**/test-results/**",
+          "**/frontend/test-results/**",
+          "**/frontend/test-results/accessibility-results/**",
+        ],
       },
     },
   },
@@ -81,5 +90,8 @@ export default defineNuxtConfig({
     "pages:extend": (pages: NuxtPage[]) => {
       applyMiddleware(pages);
     },
+    "app:resolve": (app) => {
+      console.log("App instance resolved:", app);
+    },
   },
 });
diff --git a/frontend/package.json b/frontend/package.json
index a3a2d3af7..49e3ac110 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,7 +28,7 @@
     "@nuxtjs/i18n": "8.5.5",
     "@nuxtjs/tailwindcss": "6.12.2",
     "@pinia/nuxt": "0.6.0",
-    "@playwright/test": "1.48.0",
+    "@playwright/test": "1.48.2",
     "@testing-library/vue": "8.1.0",
     "@types/node": "22.7.5",
     "@types/uuid": "10.0.0",
@@ -36,6 +36,8 @@
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "11.1.0",
     "@vueuse/nuxt": "11.1.0",
+    "axe-core": "4.10.0",
+    "axe-html-reporter": "2.2.11",
     "cross-env": "7.0.3",
     "env-cmd": "10.1.0",
     "eslint": "9.12.0",
@@ -44,7 +46,7 @@
     "happy-dom": "15.11.6",
     "nuxt": "3.13.2",
     "nuxt-icon": "0.6.10",
-    "playwright": "1.48.0",
+    "playwright": "1.48.2",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "0.6.8",
     "rollup": "4.24.0",
@@ -93,6 +95,6 @@
   },
   "resolutions": {
     "chokidar": "3.6.0",
-    "playwright-core": "1.45.1"
+    "playwright-core": "1.48.2"
   }
 }
diff --git a/frontend/pages/auth/sign-in.vue b/frontend/pages/auth/sign-in.vue
index cb6ab19ca..ffd9ce7f7 100644
--- a/frontend/pages/auth/sign-in.vue
+++ b/frontend/pages/auth/sign-in.vue
@@ -5,6 +5,7 @@
         <FormTextInput
           @update:model-value="userNameValue = $event"
           @keydown.enter.prevent="signInUser"
+          id="sign-in-username"
           :placeholder="$t('pages.auth._global.enter_user_name')"
           :model-value="userNameValue"
         />
@@ -13,6 +14,7 @@
         <FormTextInput
           @update:model-value="passwordValue = $event"
           @keydown.enter.prevent="signInUser"
+          id="sign-in-password"
           :placeholder="$t('_global.enter_password')"
           :is-icon-visible="true"
           input-type="password"
@@ -20,15 +22,19 @@
           :icons="[IconMap.VISIBLE]"
         />
       </div>
-      <IndicatorPasswordStrength :password-value="passwordValue" />
+      <IndicatorPasswordStrength
+        id="sign-in-password-strength"
+        :password-value="passwordValue"
+      />
       <div class="flex flex-col space-y-3">
-        <FriendlyCaptcha />
+        <FriendlyCaptcha id="sign-in-captcha" />
         <button
           @click="navigateTo(localePath('/auth/reset-password'))"
           @mouseover="hovered = true"
           @focus="hovered = true"
           @mouseleave="hovered = false"
           @blur="hovered = false"
+          id="sign-in-forgot-password"
           :disabled="isForgotPasswordDisabled"
           class="text-start font-bold"
           :class="{ 'link-text': !isForgotPasswordDisabled }"
@@ -40,6 +46,7 @@
           :text="$t('pages.auth.sign_in.forgot_password_captcha_tooltip')"
         />
         <BtnAction
+          id="sign-in-submit"
           class="flex max-h-[48px] w-[116px] items-center justify-center truncate md:max-h-[40px] md:w-[96px]"
           :label="$t('_global.sign_in')"
           :cta="true"
@@ -50,6 +57,7 @@
       <div class="flex pt-4 md:justify-center md:pt-6 lg:pt-8">
         <h6>{{ $t("pages.auth.sign_in.index.no_account") }}</h6>
         <NuxtLink
+          id="sign-in-signup-link"
           :to="localePath('/auth/sign-up')"
           class="link-text ml-2 font-extrabold"
           >{{ $t("_global.sign_up") }}
diff --git a/frontend/pages/home/index.vue b/frontend/pages/home/index.vue
index 072bb36c1..d502f39f2 100644
--- a/frontend/pages/home/index.vue
+++ b/frontend/pages/home/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-layer-0 px-4 text-primary-text xl:px-8">
+  <div id="home-page-main" class="bg-layer-0 px-4 text-primary-text xl:px-8">
     <Head>
       <Title>{{ $t("_global.home") }}</Title>
     </Head>
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index d055e6193..d1b4eb449 100644
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -12,7 +12,7 @@ import { defineConfig, devices } from "@playwright/test";
 
 // Environment configurations
 const environments = {
-  local: "http://127.0.0.1:3000",
+  local: "http://localhost:3000",
   prod: "https://activist.org",
 };
 
@@ -20,9 +20,9 @@ const environments = {
 const ENV = (process.env.TEST_ENV || "local") as keyof typeof environments;
 
 export default defineConfig({
-  testDir: "./tests/specs",
+  testDir: "./test-e2e/specs",
   /* Run tests in files in parallel. */
-  fullyParallel: true,
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only. */
@@ -30,7 +30,14 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters. */
-  reporter: "html",
+  reporter: [
+    ["html", { open: "never", outputDir: "test-results" }],
+    ["list"],
+    [
+      "./test-e2e/utils/axe-reporter.ts",
+      { outputDir: "test-results/accessibility-results" },
+    ],
+  ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -69,11 +76,11 @@ export default defineConfig({
       use: { ...devices["Galaxy S9+"], isMobile: true },
     },
     {
-      name: "Mobile iPad",
+      name: "Mobile iPad Portrait",
       use: { ...devices["iPad (gen 7)"], isMobile: true },
     },
     {
-      name: "Mobile iPad",
+      name: "Mobile iPad Landscape",
       use: { ...devices["iPad (gen 7 landscape)"], isMobile: true },
     },
   ],
diff --git a/frontend/plugins/i18n-head.ts b/frontend/plugins/i18n-head.ts
index a5eb03f1a..3be3fb475 100644
--- a/frontend/plugins/i18n-head.ts
+++ b/frontend/plugins/i18n-head.ts
@@ -1,6 +1,8 @@
+import type { Router } from "#vue-router";
+
 // Injects the lang attribute in all Nuxt <Head></Head> components.
 export default defineNuxtPlugin((nuxtApp) => {
-  const router = nuxtApp.vueApp.config.globalProperties.$router;
+  const router: Router = nuxtApp.vueApp.config.globalProperties.$router;
   router.afterEach((to) => {
     const languageCode = to.fullPath.split("/")[1] || "en";
     document.documentElement.setAttribute("lang", languageCode);
diff --git a/frontend/test-e2e/component-objects/EventMenu.ts b/frontend/test-e2e/component-objects/EventMenu.ts
new file mode 100644
index 000000000..3b36ba61a
--- /dev/null
+++ b/frontend/test-e2e/component-objects/EventMenu.ts
@@ -0,0 +1,85 @@
+import type { Page, Locator } from "@playwright/test";
+import { PageObjectBase } from "../utils/PageObjectBase";
+
+const locators = {
+  TOGGLE: "#submenu",
+  ABOUT: "#event-about",
+  TEAM: "#event-team",
+  RESOURCES: "#event-resources",
+  TASKS: "#event-tasks",
+  DISCUSSION: "#event-discussion",
+  SETTINGS: "#event-settings",
+};
+
+export class EventMenu extends PageObjectBase {
+  constructor(page: Page) {
+    super(page, locators);
+  }
+
+  get toggle(): Locator {
+    return this.getLocator("TOGGLE");
+  }
+
+  get about(): Locator {
+    return this.getLocator("ABOUT");
+  }
+
+  get team(): Locator {
+    return this.getLocator("TEAM");
+  }
+
+  get resources(): Locator {
+    return this.getLocator("RESOURCES");
+  }
+
+  get tasks(): Locator {
+    return this.getLocator("TASKS");
+  }
+
+  get discussion(): Locator {
+    return this.getLocator("DISCUSSION");
+  }
+
+  get settings(): Locator {
+    return this.getLocator("SETTINGS");
+  }
+
+  async open(): Promise<void> {
+    if (!(await this.isOpen())) {
+      await this.toggle.click();
+    }
+  }
+
+  override async close(): Promise<void> {
+    if (await this.isOpen()) {
+      await this.toggle.click();
+    }
+  }
+
+  async isOpen(): Promise<boolean> {
+    return (await this.toggle.getAttribute("aria-expanded")) === "true";
+  }
+
+  override async isVisible(): Promise<boolean> {
+    return await this.toggle.isVisible();
+  }
+
+  async isOptionsVisible(): Promise<boolean> {
+    return await (this.options as Locator).isVisible();
+  }
+
+  // This is probably an override too.
+  async getActiveSelectedOption(): Promise<string> {
+    const selector = (await this.isMobile())
+      ? "[data-headlessui-state='active selected']"
+      : ".style-menu-option-cta";
+    return (
+      (await (this.options as Locator).locator(selector).textContent()) || ""
+    );
+  }
+
+  // @ts-expect-error Doesn't match method signature in superclass.
+  override async selectOption(option: Locator): Promise<void> {
+    await option.click();
+  }
+}
diff --git a/frontend/tests/component-objects/HeaderWebsite.ts b/frontend/test-e2e/component-objects/HeaderWebsite.ts
similarity index 52%
rename from frontend/tests/component-objects/HeaderWebsite.ts
rename to frontend/test-e2e/component-objects/HeaderWebsite.ts
index ea085e4c6..c1f63f2db 100644
--- a/frontend/tests/component-objects/HeaderWebsite.ts
+++ b/frontend/test-e2e/component-objects/HeaderWebsite.ts
@@ -1,26 +1,28 @@
 import type { Page, Locator } from "@playwright/test";
-import BaseComponent from "./BaseComponent";
-
-export default class HeaderWebsite extends BaseComponent {
-  public static readonly locators = {
-    MOBILE_HEADER: "#mobile-header",
-    DESKTOP_HEADER: "#desktop-header",
-    ROADMAP_BUTTON: "#desktop-header #btn-roadmap",
-    GET_IN_TOUCH_BUTTON:
-      "#btn-get-in-touch-large:visible, #btn-get-in-touch-medium:visible",
-    HAMBURGER: "#sidebar-right-hamburger:visible",
-    SIDEBAR: "#drawer-navigation",
-    THEME_DROPDOWN: ".dropdown-theme:visible",
-    SELECTED_LANGUAGE: ".dropdown-language:visible .selected-option",
-    LANGUAGE_DROPDOWN: ".dropdown-language:visible",
-    LANGUAGE_MENU: ".dropdown-language:visible ul",
-    LANGUAGE_OPTIONS:
-      ".dropdown-language:visible .dropdown-language-list-items",
-  };
+import { PageObjectBase } from "../utils/PageObjectBase";
+import { SearchBar } from "./SearchBar";
+
+const locators = {
+  MOBILE_HEADER: "#mobile-header",
+  DESKTOP_HEADER: "#desktop-header",
+  ROADMAP_BUTTON: "#desktop-header #btn-roadmap",
+  GET_IN_TOUCH_BUTTON:
+    "#btn-get-in-touch-large:visible, #btn-get-in-touch-medium:visible",
+  SIGN_IN_BUTTON: "#btn-sign-in-large:visible, #btn-sign-in-medium:visible",
+  SIGN_UP_BUTTON: "#btn-sign-up-large:visible, #btn-sign-up-medium:visible",
+  THEME_DROPDOWN: ".dropdown-theme:visible",
+  SELECTED_LANGUAGE: ".dropdown-language:visible .selected-option",
+  LANGUAGE_DROPDOWN: ".dropdown-language:visible",
+  LANGUAGE_MENU: ".dropdown-language:visible ul",
+  LANGUAGE_OPTIONS: ".dropdown-language:visible .dropdown-language-list-items",
+};
+
+export class HeaderWebsite extends PageObjectBase {
+  readonly searchBar: SearchBar;
 
   constructor(page: Page) {
-    super(page);
-    this.setLocators(HeaderWebsite.locators);
+    super(page, locators);
+    this.searchBar = new SearchBar(page);
   }
 
   get mobileHeader(): Locator {
@@ -43,31 +45,19 @@ export default class HeaderWebsite extends BaseComponent {
     return this.getLocator("GET_IN_TOUCH_BUTTON");
   }
 
-  get hamburger(): Locator {
-    return this.getLocator("HAMBURGER");
+  get signInButton(): Locator {
+    return this.getLocator("SIGN_IN_BUTTON");
   }
 
-  get sidebar(): Locator {
-    return this.getLocator("SIDEBAR");
-  }
-
-  async openSidebar(): Promise<void> {
-    if (!(await this.sidebar.isVisible())) {
-      await this.hamburger.click();
-    }
-  }
-
-  async closeSidebar(): Promise<void> {
-    if (await this.sidebar.isVisible()) {
-      await this.hamburger.click();
-    }
+  get signUpButton(): Locator {
+    return this.getLocator("SIGN_UP_BUTTON");
   }
 
   async selectDropdownOption(
     dropdown: Locator,
     optionText: string
   ): Promise<void> {
-    await this.page.locator(`text=${optionText}`).click();
+    await dropdown.locator(`text=${optionText}`).click();
   }
 
   get themeDropdown(): Locator {
@@ -75,9 +65,6 @@ export default class HeaderWebsite extends BaseComponent {
   }
 
   async openThemeDropdown(): Promise<void> {
-    if (await this.isMobile()) {
-      await this.openSidebar();
-    }
     await this.themeDropdown.click();
   }
 
@@ -91,9 +78,6 @@ export default class HeaderWebsite extends BaseComponent {
   }
 
   async openLanguageDropdown(): Promise<void> {
-    if (await this.isMobile()) {
-      await this.openSidebar();
-    }
     const isDropdownOpen = await this.getLocator("LANGUAGE_MENU").isVisible();
     if (!isDropdownOpen) {
       await this.languageDropdown.click();
@@ -107,13 +91,9 @@ export default class HeaderWebsite extends BaseComponent {
 
   async getSelectedLanguage(): Promise<string> {
     await this.openLanguageDropdown();
-    return (
-      await this.page
-        .locator(HeaderWebsite.locators.SELECTED_LANGUAGE)
-        .innerText()
-    )
-      .trim()
-      .toLowerCase();
+    const selectedLanguageElement = this.getLocator("SELECTED_LANGUAGE");
+    const text = await selectedLanguageElement.innerText();
+    return text.trim().toLowerCase();
   }
 
   async getLanguageOptions(): Promise<Locator[]> {
@@ -135,7 +115,27 @@ export default class HeaderWebsite extends BaseComponent {
     return undefined;
   }
 
-  async navigateTo(link: Locator): Promise<void> {
-    await link.click();
+  async searchFor(text: string): Promise<void> {
+    await this.searchBar.fillSearchInput(text);
+  }
+
+  async isSearchBarVisible(): Promise<boolean> {
+    return this.searchBar.isSearchInputVisible();
+  }
+
+  async isSignInButtonVisible(): Promise<boolean> {
+    return this.signInButton.isVisible();
+  }
+
+  async clickSignInButton(): Promise<void> {
+    await this.signInButton.click();
+  }
+
+  async isSignUpButtonVisible(): Promise<boolean> {
+    return this.signUpButton.isVisible();
+  }
+
+  async clickSignUpButton(): Promise<void> {
+    await this.signUpButton.click();
   }
 }
diff --git a/frontend/test-e2e/component-objects/MobileNav.ts b/frontend/test-e2e/component-objects/MobileNav.ts
new file mode 100644
index 000000000..08d13f4ff
--- /dev/null
+++ b/frontend/test-e2e/component-objects/MobileNav.ts
@@ -0,0 +1,102 @@
+import type { Page, Locator } from "@playwright/test";
+import { PageObjectBase } from "../utils/PageObjectBase";
+
+const locators = {
+  HAMBURGER: "#sidebar-right-hamburger:visible",
+  DRAWER_NAVIGATION: "#drawer-navigation",
+  THEME_DROPDOWN: ".dropdown-theme:visible",
+  SELECTED_LANGUAGE: ".dropdown-language:visible .selected-option",
+  LANGUAGE_DROPDOWN: ".dropdown-language:visible",
+  LANGUAGE_MENU: ".dropdown-language:visible ul",
+  LANGUAGE_OPTIONS: ".dropdown-language:visible .dropdown-language-list-items",
+};
+
+export class MobileNav extends PageObjectBase {
+  constructor(page: Page) {
+    super(page, locators);
+  }
+
+  get hamburger(): Locator {
+    return this.getLocator("HAMBURGER");
+  }
+
+  get drawer(): Locator {
+    return this.getLocator("DRAWER_NAVIGATION");
+  }
+
+  async openDrawer(): Promise<void> {
+    if (!(await this.drawer.isVisible())) {
+      await this.hamburger.click();
+    }
+  }
+
+  async closeDrawer(): Promise<void> {
+    if (await this.drawer.isVisible()) {
+      await this.hamburger.click();
+    }
+  }
+
+  get themeDropdown(): Locator {
+    return this.getLocator("THEME_DROPDOWN");
+  }
+
+  async openThemeDropdown(): Promise<void> {
+    await this.openDrawer();
+    await this.themeDropdown.click();
+  }
+
+  async selectThemeOption(theme: string): Promise<void> {
+    await this.openThemeDropdown();
+    await this.selectDropdownOption(this.themeDropdown, theme);
+  }
+
+  get languageDropdown(): Locator {
+    return this.getLocator("LANGUAGE_DROPDOWN");
+  }
+
+  async openLanguageDropdown(): Promise<void> {
+    await this.openDrawer();
+    const isDropdownOpen = await this.getLocator("LANGUAGE_MENU").isVisible();
+    if (!isDropdownOpen) {
+      await this.languageDropdown.click();
+    }
+  }
+
+  async selectLanguageOption(language: string): Promise<void> {
+    await this.openLanguageDropdown();
+    await this.selectDropdownOption(this.languageDropdown, language);
+  }
+
+  async getSelectedLanguage(): Promise<string> {
+    await this.openLanguageDropdown();
+    const selectedLanguageElement = this.getLocator("SELECTED_LANGUAGE");
+    const text = await selectedLanguageElement.innerText();
+    return text.trim().toLowerCase();
+  }
+
+  async getLanguageOptions(): Promise<Locator[]> {
+    await this.openLanguageDropdown();
+    const languageOptions = await this.getLocator("LANGUAGE_OPTIONS").all();
+    return languageOptions;
+  }
+
+  async findLanguageOption(
+    languageOptions: Locator[],
+    optionText: string
+  ): Promise<Locator | undefined> {
+    for (const option of languageOptions) {
+      const textContent = await option.innerText();
+      if (textContent.includes(optionText)) {
+        return option;
+      }
+    }
+    return undefined;
+  }
+
+  async selectDropdownOption(
+    dropdown: Locator,
+    optionText: string
+  ): Promise<void> {
+    await dropdown.locator(`text=${optionText}`).click();
+  }
+}
diff --git a/frontend/test-e2e/component-objects/Navigation.ts b/frontend/test-e2e/component-objects/Navigation.ts
new file mode 100644
index 000000000..78f9fb80d
--- /dev/null
+++ b/frontend/test-e2e/component-objects/Navigation.ts
@@ -0,0 +1,106 @@
+import type { Page, Locator } from "@playwright/test";
+import { PageObjectBase } from "../utils/PageObjectBase";
+import { MobileNav } from "./MobileNav";
+import { OrganizationMenu } from "./OrganizationMenu";
+import { EventMenu } from "./EventMenu";
+
+const locators = {
+  HOME: "#home",
+  EVENTS: "#events",
+  ORGANIZATIONS: "#organizations",
+  CREATE: "#create button",
+  CREATE_EVENT: "#create-event",
+  CREATE_ORGANIZATION: "#create-organization",
+  INFO: "#info button",
+  INFO_DROPDOWN: "#info ul",
+  HELP: "#help",
+  DOCS: "#docs",
+  LEGAL: "#legal",
+  USER_OPTIONS: "#user-options button",
+  USER_OPTIONS_DROPDOWN: "#user-options ul",
+  SIGN_IN: "#sign-in",
+  SIGN_UP: "#sign-up",
+};
+
+export class Navigation extends PageObjectBase {
+  readonly organizationMenu: OrganizationMenu;
+  readonly eventMenu: EventMenu;
+  readonly mobileNav: MobileNav;
+
+  constructor(page: Page) {
+    super(page, locators);
+    this.mobileNav = new MobileNav(page);
+    this.organizationMenu = new OrganizationMenu(page);
+    this.eventMenu = new EventMenu(page);
+  }
+
+  get home(): Locator {
+    return this.getLocator("HOME");
+  }
+
+  get events(): Locator {
+    return this.getLocator("EVENTS");
+  }
+
+  get organizations(): Locator {
+    return this.getLocator("ORGANIZATIONS");
+  }
+
+  get createEvent(): Locator {
+    return this.getLocator("CREATE_EVENT");
+  }
+
+  get createOrganization(): Locator {
+    return this.getLocator("CREATE_ORGANIZATION");
+  }
+
+  get info(): Locator {
+    return this.getLocator("INFO");
+  }
+
+  get infoDropdown(): Locator {
+    return this.getLocator("INFO_DROPDOWN");
+  }
+
+  get help(): Locator {
+    return this.getLocator("HELP");
+  }
+
+  get docs(): Locator {
+    return this.getLocator("DOCS");
+  }
+
+  get legal(): Locator {
+    return this.getLocator("LEGAL");
+  }
+
+  get userOptions(): Locator {
+    return this.getLocator("USER_OPTIONS");
+  }
+
+  get userOptionsDropdown(): Locator {
+    return this.getLocator("USER_OPTIONS_DROPDOWN");
+  }
+
+  get signIn(): Locator {
+    return this.getLocator("SIGN_IN");
+  }
+
+  get signUp(): Locator {
+    return this.getLocator("SIGN_UP");
+  }
+
+  async openInfo(): Promise<void> {
+    if (!(await this.infoDropdown.isVisible())) {
+      await this.info.click();
+      await this.infoDropdown.isVisible();
+    }
+  }
+
+  async openUserOptions(): Promise<void> {
+    if (!(await this.userOptionsDropdown.isVisible())) {
+      await this.userOptions.click();
+      await this.userOptionsDropdown.isVisible();
+    }
+  }
+}
diff --git a/frontend/test-e2e/component-objects/OrganizationMenu.ts b/frontend/test-e2e/component-objects/OrganizationMenu.ts
new file mode 100644
index 000000000..0c63ba10f
--- /dev/null
+++ b/frontend/test-e2e/component-objects/OrganizationMenu.ts
@@ -0,0 +1,105 @@
+import type { Page, Locator } from "@playwright/test";
+import { PageObjectBase } from "../utils/PageObjectBase";
+
+const locators = {
+  TOGGLE: "#submenu",
+  OPTIONS: "#submenu ul",
+  ABOUT: "#org-about",
+  EVENTS: "#org-events",
+  GROUPS: "#org-groups",
+  RESOURCES: "#org-resources",
+  FAQ: "#org-faq",
+  AFFILIATES: "#org-affiliates",
+  TASKS: "#org-tasks",
+  DISCUSSIONS: "#org-discussions",
+  SETTINGS: "#org-settings",
+};
+
+export class OrganizationMenu extends PageObjectBase {
+  constructor(page: Page) {
+    super(page, locators);
+  }
+
+  get toggle(): Locator {
+    return this.getLocator("TOGGLE");
+  }
+
+  get options(): Locator {
+    return this.getLocator("OPTIONS");
+  }
+
+  get about(): Locator {
+    return this.getLocator("ABOUT");
+  }
+
+  get events(): Locator {
+    return this.getLocator("EVENTS");
+  }
+
+  get groups(): Locator {
+    return this.getLocator("GROUPS");
+  }
+
+  get resources(): Locator {
+    return this.getLocator("RESOURCES");
+  }
+
+  get faq(): Locator {
+    return this.getLocator("FAQ");
+  }
+
+  get affiliates(): Locator {
+    return this.getLocator("AFFILIATES");
+  }
+
+  get tasks(): Locator {
+    return this.getLocator("TASKS");
+  }
+
+  get discussions(): Locator {
+    return this.getLocator("DISCUSSIONS");
+  }
+
+  get settings(): Locator {
+    return this.getLocator("SETTINGS");
+  }
+
+  async open(): Promise<void> {
+    if (!(await this.isOpen())) {
+      await this.toggle.click();
+    }
+  }
+
+  override async close(): Promise<void> {
+    if (await this.isOpen()) {
+      await this.toggle.click();
+    }
+  }
+
+  async isOpen(): Promise<boolean> {
+    return (await this.toggle.getAttribute("aria-expanded")) === "true";
+  }
+
+  override async isVisible(): Promise<boolean> {
+    return await this.toggle.isVisible();
+  }
+
+  async isOptionsVisible(): Promise<boolean> {
+    return await this.options.isVisible();
+  }
+
+  // This is probably an override too.
+  async getActiveSelectedOption(): Promise<string> {
+    // if mobile, then "[data-headlessui-state='active selected']"
+    // if desktop, then class includes style-menu-option-cta
+    const selector = (await this.isMobile())
+      ? "[data-headlessui-state='active selected']"
+      : ".style-menu-option-cta";
+    return (await this.options.locator(selector).textContent()) || "";
+  }
+
+  // @ts-expect-error Doesn't match method signature in superclass.
+  override async selectOption(option: Locator): Promise<void> {
+    await option.click();
+  }
+}
diff --git a/frontend/test-e2e/component-objects/SearchBar.ts b/frontend/test-e2e/component-objects/SearchBar.ts
new file mode 100644
index 000000000..411ae67d2
--- /dev/null
+++ b/frontend/test-e2e/component-objects/SearchBar.ts
@@ -0,0 +1,97 @@
+import type { Page, Locator } from "@playwright/test";
+import { PageObjectBase } from "../utils/PageObjectBase";
+
+const locators = {
+  SEARCH: "#search",
+  SEARCH_TOGGLE: "#search-toggle",
+  SEARCH_INPUT: "#input-search",
+  SEARCH_MODAL: "#search-modal",
+  CLOSE_SEARCH_MODAL: "#search-modal button",
+};
+
+export class SearchBar extends PageObjectBase {
+  constructor(page: Page) {
+    super(page, locators);
+  }
+
+  get search(): Locator {
+    return this.getLocator("SEARCH");
+  }
+
+  get searchInput(): Locator {
+    return this.getLocator("SEARCH_INPUT");
+  }
+
+  get searchToggle(): Locator {
+    return this.getLocator("SEARCH_TOGGLE");
+  }
+
+  get searchModal(): Locator {
+    return this.getLocator("SEARCH_MODAL");
+  }
+
+  async fillSearchInput(text: string): Promise<void> {
+    await this.searchInput.fill(text);
+  }
+
+  async isSearchInputFocused(): Promise<boolean> {
+    return this.searchInput.evaluate((el) => el === document.activeElement);
+  }
+
+  async isSearchInputVisible(): Promise<boolean> {
+    return this.searchInput.isVisible();
+  }
+
+  async getSearchInputPlaceholder(): Promise<string | null> {
+    return this.searchInput.getAttribute("placeholder");
+  }
+
+  async pressSlashKey(): Promise<void> {
+    await this.page.keyboard.press("/");
+  }
+
+  async pressCommandOrControlK(): Promise<void> {
+    const isMac = await this.page.evaluate(() =>
+      /Mac/i.test(navigator.userAgent)
+    );
+    if (isMac) {
+      await this.page.keyboard.press("Meta+K");
+    } else {
+      await this.page.keyboard.press("Control+K");
+    }
+  }
+
+  async clickCloseSearchModal(): Promise<void> {
+    await this.getLocator("CLOSE_SEARCH_MODAL").click();
+  }
+
+  async isSearchModalVisible(): Promise<boolean> {
+    return this.searchModal.isVisible();
+  }
+
+  async fillSearchModalInput(text: string): Promise<void> {
+    await this.searchModal.fill(text);
+  }
+
+  async openSearchInput(): Promise<void> {
+    if ((await this.isMobile()) && !(await this.isSearchInputVisible())) {
+      await this.searchToggle.click();
+    } else if (
+      !(await this.isMobile()) &&
+      !(await this.isSearchInputVisible())
+    ) {
+      await this.search.click();
+    }
+  }
+
+  async closeSearchInput(): Promise<void> {
+    if ((await this.isMobile()) && (await this.isSearchInputVisible())) {
+      await this.searchToggle.click();
+    } else if (
+      !(await this.isMobile()) &&
+      (await this.isSearchInputVisible())
+    ) {
+      await this.page.click("#home-header");
+    }
+  }
+}
diff --git a/frontend/test-e2e/component-objects/SidebarLeft.ts b/frontend/test-e2e/component-objects/SidebarLeft.ts
new file mode 100644
index 000000000..f8d1ba604
--- /dev/null
+++ b/frontend/test-e2e/component-objects/SidebarLeft.ts
@@ -0,0 +1,88 @@
+import type { Page, Locator } from "@playwright/test";
+import { PageObjectBase } from "../utils/PageObjectBase";
+import { Navigation } from "./Navigation";
+
+const locators = {
+  SIDEBAR_LEFT: "#sidebar-left",
+  SIDEBAR_LEFT_TOGGLE: "#sidebar-left-toggle",
+  SIDEBAR_LEFT_INFO: "#info button",
+};
+
+export class SidebarLeft extends PageObjectBase {
+  constructor(page: Page) {
+    super(page, locators);
+    this.nav = new Navigation(page);
+  }
+
+  get component(): Locator {
+    return this.getLocator("SIDEBAR_LEFT");
+  }
+  get sidebarLeftToggle(): Locator {
+    return this.getLocator("SIDEBAR_LEFT_TOGGLE");
+  }
+
+  // click on the sidebar left toggle
+  async clickSidebarLeftToggle(): Promise<void> {
+    await this.sidebarLeftToggle.click();
+  }
+
+  // is sidebar left sticky expanded (has class -rotate-180)
+  async isSidebarLeftToggleExpanded(): Promise<boolean> {
+    const toggleClass = await this.sidebarLeftToggle.getAttribute("class");
+    return toggleClass?.includes("-rotate-180") ?? false;
+  }
+
+  // is sidebar left collapsed (does not have class -rotate-180)
+  async isSidebarLeftToggleCollapsed(): Promise<boolean> {
+    const toggleClass = await this.sidebarLeftToggle.getAttribute("class");
+    return toggleClass?.includes("pb-1 pl-0.5") ?? false;
+  }
+
+  async collapseSidebar(): Promise<void> {
+    const isExpanded = await this.isSidebarLeftToggleExpanded();
+    if (isExpanded) {
+      await this.clickSidebarLeftToggle();
+      await this.hoverOutsideSidebar();
+      await this.page.waitForSelector("#sidebar-left.w-16", {
+        state: "attached",
+      });
+    }
+  }
+
+  // hover over the sidebar left
+  async hoverSidebarLeft(): Promise<void> {
+    await this.component.hover();
+  }
+
+  // hover to the right of the sidebar left
+  async hoverOutsideSidebar(): Promise<void> {
+    const boundingBox = await this.component.boundingBox();
+    if (!boundingBox) {
+      throw new Error("Unable to get bounding box of SidebarLeft");
+    }
+
+    const { x, y, width, height } = boundingBox;
+
+    // Move the mouse to the right of the sidebar
+    const outsideX = x + width + 10; // 10 pixels to the right of the sidebar
+    const outsideY = y + height / 2; // Vertically centered
+
+    await this.page.mouse.move(outsideX, outsideY);
+  }
+
+  async hoverIntoSidebarLeft(): Promise<void> {
+    // determine the the width of the visible sidebar
+    const boundingBox = await this.component.boundingBox();
+    const x = boundingBox?.x ?? 0;
+    const y = boundingBox?.y ?? 0;
+    // move mouse to the center of the sidebar
+    await this.page.mouse.move(x / 2, y / 2);
+  }
+
+  // is sidebar collapsed (has class w-16)
+  async isSidebarCollapsed(): Promise<boolean> {
+    return (
+      (await this.component.getAttribute("class"))?.includes("w-16") ?? false
+    );
+  }
+}
diff --git a/frontend/test-e2e/component-objects/TopicsDropdown.ts b/frontend/test-e2e/component-objects/TopicsDropdown.ts
new file mode 100644
index 000000000..7e364da34
--- /dev/null
+++ b/frontend/test-e2e/component-objects/TopicsDropdown.ts
@@ -0,0 +1,32 @@
+import type { Page, Locator } from "@playwright/test";
+import { PageObjectBase } from "../utils/PageObjectBase";
+
+const locators = {
+  TOPICS_DROPDOWN: "#topics-dropdown",
+  TOPICS_OPTIONS: "#topics-dropdown ul#isVisibleElement",
+};
+
+export class TopicsDropdown extends PageObjectBase {
+  constructor(page: Page) {
+    super(page, locators);
+  }
+
+  get dropdown(): Locator {
+    return this.getLocator("TOPICS_DROPDOWN");
+  }
+  get options(): Locator {
+    return this.getLocator("TOPICS_OPTIONS");
+  }
+
+  async openTopicsDropdown(): Promise<void> {
+    if (!(await this.options.isVisible())) {
+      await this.dropdown.click();
+    }
+  }
+
+  async closeTopicsDropdown(): Promise<void> {
+    if (await this.options.isVisible()) {
+      await this.dropdown.click();
+    }
+  }
+}
diff --git a/frontend/test-e2e/fixtures/test-fixtures.ts b/frontend/test-e2e/fixtures/test-fixtures.ts
new file mode 100644
index 000000000..9f3cfa082
--- /dev/null
+++ b/frontend/test-e2e/fixtures/test-fixtures.ts
@@ -0,0 +1,35 @@
+import { test as baseTest } from "@playwright/test";
+import { LandingPage } from "../page-objects/LandingPage";
+import { HomePage } from "../page-objects/HomePage";
+import { SignInPage } from "../page-objects/SignInPage";
+
+type TestFixtures = {
+  landingPage: LandingPage;
+  homePage: HomePage;
+  signInPage: SignInPage;
+};
+
+export const test = baseTest.extend<TestFixtures>({
+  landingPage: async ({ page }, use) => {
+    const landingPage = new LandingPage(page);
+    await landingPage.navigateTo("/en");
+    await landingPage.landingSplash.waitFor({ state: "visible" });
+    await use(landingPage);
+  },
+  homePage: async ({ page }, use) => {
+    const homePage = new HomePage(page);
+    await homePage.navigateTo("/home");
+    const topics = homePage.topics;
+    await topics.dropdown.waitFor({ state: "visible" });
+    await use(homePage);
+  },
+  signInPage: async ({ page }, use) => {
+    const signInPage = new SignInPage(page);
+    await signInPage.navigateTo("/auth/sign-in");
+    await signInPage.signInButton.waitFor({ state: "visible" });
+    await use(signInPage);
+  },
+});
+
+export { expect } from "@playwright/test";
+export { LandingPage, HomePage, SignInPage };
diff --git a/frontend/test-e2e/page-objects/HomePage.ts b/frontend/test-e2e/page-objects/HomePage.ts
new file mode 100644
index 000000000..a5e8aebc3
--- /dev/null
+++ b/frontend/test-e2e/page-objects/HomePage.ts
@@ -0,0 +1,228 @@
+import type { Locator, Page } from "@playwright/test";
+import { PageObjectBase } from "../utils/PageObjectBase";
+import { HeaderWebsite } from "../component-objects/HeaderWebsite";
+import { TopicsDropdown } from "../component-objects/TopicsDropdown";
+import { SidebarLeft } from "../component-objects/SidebarLeft";
+import { Navigation } from "../component-objects/Navigation";
+const locators = {
+  HOME_HEADER: "#home-header",
+};
+
+export class HomePage extends PageObjectBase {
+  readonly header: HeaderWebsite;
+  readonly topics: TopicsDropdown;
+  readonly sidebarLeft: SidebarLeft;
+  readonly navigation: Navigation;
+
+  constructor(page: Page) {
+    super(page, locators, "Home Page", "/home");
+    this.header = new HeaderWebsite(page);
+    this.topics = new TopicsDropdown(page);
+    this.sidebarLeft = new SidebarLeft(page);
+    this.navigation = new Navigation(page);
+  }
+
+  get homeHeader(): Locator {
+    return this.getLocator("HOME_HEADER");
+  }
+
+  async checkTopicsDropdownFunctionality(): Promise<void> {
+    await this.topics.openTopicsDropdown();
+    await this.topics.options.waitFor({ state: "visible" });
+    await this.topics.closeTopicsDropdown();
+    await this.topics.options.waitFor({ state: "hidden" });
+  }
+
+  async checkSidebarVisibilityOnDesktop(): Promise<boolean> {
+    return this.sidebarLeft.component.isVisible();
+  }
+
+  async checkSidebarExpandCollapse(): Promise<boolean[]> {
+    if (await this.isMobile()) {
+      return [];
+    }
+
+    const isToggleExpanded =
+      await this.sidebarLeft.isSidebarLeftToggleExpanded();
+    if (!isToggleExpanded) {
+      return [];
+    }
+
+    const results: boolean[] = [];
+    results.push(!(await this.sidebarLeft.isSidebarCollapsed()));
+
+    await this.sidebarLeft.clickSidebarLeftToggle();
+    await this.sidebarLeft.hoverOutsideSidebar();
+    results.push(await this.sidebarLeft.isSidebarCollapsed());
+
+    await this.sidebarLeft.hoverIntoSidebarLeft();
+    results.push(!(await this.sidebarLeft.isSidebarCollapsed()));
+
+    return results;
+  }
+
+  async checkNavigationMenus(): Promise<boolean[]> {
+    const results: boolean[] = [];
+
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.openDrawer();
+    }
+
+    // Test Info dropdown
+    await this.navigation.info.click();
+    results.push(await this.navigation.help.isVisible());
+    results.push(await this.navigation.docs.isVisible());
+    results.push(await this.navigation.legal.isVisible());
+    await this.navigation.info.click();
+    results.push(await this.navigation.help.isHidden());
+    results.push(await this.navigation.docs.isHidden());
+    results.push(await this.navigation.legal.isHidden());
+
+    // Test User Options dropdown
+    await this.navigation.userOptions.click();
+    results.push(await this.navigation.signIn.isVisible());
+    results.push(await this.navigation.signUp.isVisible());
+    await this.navigation.userOptions.click();
+    results.push(await this.navigation.signIn.isHidden());
+    results.push(await this.navigation.signUp.isHidden());
+
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.closeDrawer();
+    }
+
+    return results;
+  }
+
+  async checkNavigationLinks(): Promise<string[]> {
+    const results: string[] = [];
+
+    const tabs = [
+      { nav: this.navigation.organizations, path: "/organizations" },
+      { nav: this.navigation.home, path: "/home" },
+      { nav: this.navigation.events, path: "/events" },
+    ];
+
+    const menuLinks = [
+      {
+        nav: this.navigation.help,
+        path: "/help",
+        parent: this.navigation.info,
+      },
+      {
+        nav: this.navigation.docs,
+        path: "/docs",
+        parent: this.navigation.info,
+      },
+      {
+        nav: this.navigation.legal,
+        path: "/legal",
+        parent: this.navigation.info,
+      },
+      {
+        nav: this.navigation.signIn,
+        path: "/auth/sign-in",
+        parent: this.navigation.userOptions,
+      },
+      {
+        nav: this.navigation.signUp,
+        path: "/auth/sign-up",
+        parent: this.navigation.userOptions,
+      },
+    ];
+
+    // Check tab links
+    for (const tab of tabs) {
+      try {
+        await tab.nav.waitFor({ state: "visible", timeout: 5000 });
+        await this.page.waitForLoadState("networkidle");
+        await tab.nav.click({ force: true });
+        await this.waitForUrlChange(`**${tab.path}`);
+        results.push(this.url());
+      } catch (error) {
+        console.error(`Error navigating to ${tab.path}: ${error}`);
+        results.push(`Error: ${tab.path}`);
+      }
+    }
+
+    for (const link of menuLinks) {
+      try {
+        if (await this.isMobile()) {
+          await this.navigation.mobileNav.openDrawer();
+        }
+
+        if (link.parent) {
+          await link.parent.click();
+        }
+        await link.nav.waitFor({ state: "visible", timeout: 5000 });
+        await this.page.waitForLoadState("networkidle");
+        await link.nav.click({ force: true });
+        await this.waitForUrlChange(`**${link.path}`);
+        results.push(this.url());
+        if (link.parent) {
+          await this.goBack();
+        }
+      } catch (error) {
+        console.error(`Error navigating to ${link.path}: ${error}`);
+        results.push(`Error: ${link.path}`);
+      }
+    }
+
+    return results;
+  }
+
+  async checkHotKeyFunctionality(): Promise<[boolean, boolean, boolean]> {
+    await this.header.searchBar.pressSlashKey();
+    const isSearchInputFocused =
+      await this.header.searchBar.isSearchInputFocused();
+
+    await this.header.searchBar.pressCommandOrControlK();
+    const isExpandedSearchInputVisible =
+      await this.header.searchBar.isSearchModalVisible();
+
+    await this.header.searchBar.clickCloseSearchModal();
+    const isExpandedSearchInputHidden =
+      !(await this.header.searchBar.isSearchModalVisible());
+
+    return [
+      isSearchInputFocused,
+      isExpandedSearchInputVisible,
+      isExpandedSearchInputHidden,
+    ];
+  }
+
+  async checkSearchFunctionality(): Promise<boolean[]> {
+    const results: boolean[] = [];
+    const isMobile = await this.isMobile();
+
+    // Check if search toggle/input is visible
+    results.push(
+      isMobile
+        ? await this.header.searchBar.searchToggle.isVisible()
+        : await this.header.searchBar.search.isVisible()
+    );
+
+    // Open search input
+    await this.header.searchBar.openSearchInput();
+
+    // Check if search input is visible
+    results.push(await this.header.searchBar.isSearchInputVisible());
+
+    // Fill search input
+    await this.header.searchBar.fillSearchInput("test search");
+
+    // Check if search input has correct value
+    const inputValue = await this.header.searchBar.searchInput.inputValue();
+    results.push(inputValue === "test search");
+
+    // Close search
+    if (!isMobile) {
+      await this.sidebarLeft.collapseSidebar();
+    }
+    await this.header.searchBar.closeSearchInput();
+
+    // Check if search input is hidden
+    results.push(!(await this.header.searchBar.isSearchInputVisible()));
+
+    return results;
+  }
+}
diff --git a/frontend/test-e2e/page-objects/LandingPage.ts b/frontend/test-e2e/page-objects/LandingPage.ts
new file mode 100644
index 000000000..1ee72447a
--- /dev/null
+++ b/frontend/test-e2e/page-objects/LandingPage.ts
@@ -0,0 +1,209 @@
+import type { Locator, Page } from "@playwright/test";
+import locales from "../../locales";
+import { PageObjectBase } from "../utils/PageObjectBase";
+import { HeaderWebsite } from "../component-objects/HeaderWebsite";
+import { Navigation } from "../component-objects/Navigation";
+
+// Centralized locator management
+const locators = {
+  LANDING_SPLASH: "#landing-splash-header",
+  REQUEST_ACCESS_LINK: "#request-access",
+  VIEW_ORGANIZATIONS_BUTTON: "#view-organizations",
+  VIEW_EVENTS_BUTTON: "#view-events",
+  GET_ORGANIZED_BUTTON: "#btn-get-organized",
+  GROW_ORGANIZATION_BUTTON: "#btn-grow-organization",
+  ABOUT_BUTTON: "#btn-activist",
+  BECOME_SUPPORTER_BUTTON: "#btn-become-supporter",
+  OUR_SUPPORTERS_BUTTON: "#btn-our-supporters",
+};
+
+export class LandingPage extends PageObjectBase {
+  readonly header: HeaderWebsite;
+  readonly navigation: Navigation;
+
+  constructor(page: Page) {
+    super(page, locators, "Landing Page", "/");
+    this.header = new HeaderWebsite(page);
+    this.navigation = new Navigation(page);
+  }
+
+  public static readonly urls = {
+    REQUEST_ACCESS_URL:
+      "https://app.formbricks.com/s/clvn9ywe21css8wqpt1hee57a",
+  };
+
+  get landingSplash(): Locator {
+    return this.getLocator("LANDING_SPLASH");
+  }
+
+  get requestAccessLink(): Locator {
+    return this.getLocator("REQUEST_ACCESS_LINK");
+  }
+
+  get viewOrganizationsButton(): Locator {
+    return this.getLocator("VIEW_ORGANIZATIONS_BUTTON");
+  }
+
+  get viewEventsButton(): Locator {
+    return this.getLocator("VIEW_EVENTS_BUTTON");
+  }
+
+  get getOrganizedButton(): Locator {
+    return this.getLocator("GET_ORGANIZED_BUTTON");
+  }
+
+  get growOrganizationButton(): Locator {
+    return this.getLocator("GROW_ORGANIZATION_BUTTON");
+  }
+
+  get aboutButton(): Locator {
+    return this.getLocator("ABOUT_BUTTON");
+  }
+
+  get becomeSupportersButton(): Locator {
+    return this.getLocator("BECOME_SUPPORTER_BUTTON");
+  }
+
+  get ourSupportersButton(): Locator {
+    return this.getLocator("OUR_SUPPORTERS_BUTTON");
+  }
+
+  async getImportantLinks(): Promise<Locator[]> {
+    return [
+      this.landingSplash,
+      this.viewOrganizationsButton,
+      this.viewEventsButton,
+      this.getOrganizedButton,
+      this.growOrganizationButton,
+      this.aboutButton,
+      this.becomeSupportersButton,
+      this.ourSupportersButton,
+    ];
+  }
+
+  async getVisibleHeader(): Promise<Locator> {
+    return (await this.isMobile())
+      ? this.header.mobileHeader
+      : this.header.desktopHeader;
+  }
+
+  async checkRoadmapButtonVisibility(): Promise<boolean> {
+    if (await this.isMobile()) {
+      return this.header.roadmapButton.isHidden();
+    } else {
+      await this.header.navigateToRoadmap();
+      await this.waitForUrlChange("**/about/roadmap");
+      return this.url().includes("/about/roadmap");
+    }
+  }
+
+  async checkGetInTouchButtonFunctionality(): Promise<boolean> {
+    if (await this.isMobile()) {
+      return this.header.getInTouchButton.isHidden();
+    } else {
+      await this.header.getInTouchButton.click();
+      await this.waitForUrlChange("**/contact");
+      return this.url().includes("/contact");
+    }
+  }
+
+  async selectThemeOption(theme: string): Promise<void> {
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.selectThemeOption(theme);
+    } else {
+      await this.header.selectThemeOption(theme);
+    }
+  }
+
+  async getVisibleLanguageOptions(): Promise<Locator[]> {
+    const selectedLanguage = (await this.isMobile())
+      ? await this.navigation.mobileNav.getSelectedLanguage()
+      : await this.header.getSelectedLanguage();
+
+    const languageOptions = (await this.isMobile())
+      ? await this.navigation.mobileNav.getLanguageOptions()
+      : await this.header.getLanguageOptions();
+
+    const visibleOptions: Locator[] = [];
+
+    for (const locale of locales) {
+      if (locale.code === selectedLanguage) {
+        continue;
+      }
+      const optionText = locale.name;
+      const option = (await this.isMobile())
+        ? await this.navigation.mobileNav.findLanguageOption(
+            languageOptions,
+            optionText
+          )
+        : await this.header.findLanguageOption(languageOptions, optionText);
+
+      if (option && (await option.isVisible())) {
+        visibleOptions.push(option);
+      }
+    }
+
+    return visibleOptions;
+  }
+
+  async isViewOrganizationsButtonVisible(): Promise<boolean> {
+    return this.viewOrganizationsButton.isVisible();
+  }
+
+  async isViewEventsButtonVisible(): Promise<boolean> {
+    return this.viewEventsButton.isVisible();
+  }
+
+  async navigateToViewOrganizations(): Promise<void> {
+    await this.viewOrganizationsButton.click();
+    await this.waitForUrlChange("**/organizations");
+  }
+
+  async navigateToViewEvents(): Promise<void> {
+    await this.viewEventsButton.click();
+    await this.waitForUrlChange("**/events");
+  }
+
+  async isSignInButtonVisible(): Promise<boolean> {
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.openDrawer();
+      await this.navigation.openUserOptions();
+      return await this.navigation.signIn.isVisible();
+    } else {
+      return await this.header.isSignInButtonVisible();
+    }
+  }
+
+  async navigateToSignIn(): Promise<void> {
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.openDrawer();
+      await this.navigation.openUserOptions();
+      await this.navigation.signIn.isVisible();
+      await this.navigation.signIn.click();
+    } else {
+      await this.header.clickSignInButton();
+    }
+    await this.waitForUrlChange("**/auth/sign-in");
+  }
+
+  async isSignUpButtonVisible(): Promise<boolean> {
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.openDrawer();
+      await this.navigation.openUserOptions();
+      return await this.navigation.signUp.isVisible();
+    } else {
+      return await this.header.isSignUpButtonVisible();
+    }
+  }
+
+  async navigateToSignUp(): Promise<void> {
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.openDrawer();
+      await this.navigation.openUserOptions();
+      await this.navigation.signUp.click();
+    } else {
+      await this.header.clickSignUpButton();
+    }
+    await this.waitForUrlChange("**/auth/sign-up");
+  }
+}
diff --git a/frontend/test-e2e/page-objects/SignInPage.ts b/frontend/test-e2e/page-objects/SignInPage.ts
new file mode 100644
index 000000000..297305108
--- /dev/null
+++ b/frontend/test-e2e/page-objects/SignInPage.ts
@@ -0,0 +1,174 @@
+import type { Page, Locator } from "@playwright/test";
+import { PageObjectBase } from "../utils/PageObjectBase";
+import { HeaderWebsite } from "../component-objects/HeaderWebsite";
+
+const locators = {
+  USERNAME_INPUT: "#sign-in-username input",
+  PASSWORD_INPUT: "#sign-in-password input",
+  VISIBILITY_ICON: "#sign-in-password span[role='button']",
+  SIGN_IN_BUTTON: "#sign-in-submit",
+  FORGOT_PASSWORD_BUTTON: "#sign-in-forgot-password",
+  SIGN_UP_LINK: "#sign-in-signup-link",
+  PASSWORD_STRENGTH_INDICATOR: "#sign-in-password-strength",
+  PASSWORD_STRENGTH_TEXT: "#sign-in-password-strength-text",
+  PASSWORD_STRENGTH_PROGRESS: "#password-strength-indicator-progress",
+  FRIENDLY_CAPTCHA: "#sign-in-captcha",
+};
+
+export class SignInPage extends PageObjectBase {
+  readonly header: HeaderWebsite;
+
+  constructor(page: Page) {
+    super(page, locators, "Sign In Page", "/auth/sign-in");
+    this.header = new HeaderWebsite(page);
+  }
+
+  get usernameInput(): Locator {
+    return this.getLocator("USERNAME_INPUT");
+  }
+
+  get passwordInput(): Locator {
+    return this.getLocator("PASSWORD_INPUT");
+  }
+
+  get visibilityIcon(): Locator {
+    return this.getLocator("VISIBILITY_ICON");
+  }
+
+  get signInButton(): Locator {
+    return this.getLocator("SIGN_IN_BUTTON");
+  }
+
+  get forgotPasswordButton(): Locator {
+    return this.getLocator("FORGOT_PASSWORD_BUTTON");
+  }
+
+  get signUpLink(): Locator {
+    return this.getLocator("SIGN_UP_LINK");
+  }
+
+  get passwordStrengthIndicator(): Locator {
+    return this.getLocator("PASSWORD_STRENGTH_INDICATOR");
+  }
+
+  get passwordStrengthText(): Locator {
+    return this.getLocator("PASSWORD_STRENGTH_TEXT");
+  }
+
+  get passwordStrengthProgress(): Locator {
+    return this.getLocator("PASSWORD_STRENGTH_PROGRESS");
+  }
+
+  get friendlyCaptcha(): Locator {
+    return this.getLocator("FRIENDLY_CAPTCHA");
+  }
+
+  async fillUsername(username: string): Promise<void> {
+    await this.page.fill(this.locators.USERNAME_INPUT, username);
+  }
+
+  async fillPassword(password: string): Promise<void> {
+    await this.page.fill(this.locators.PASSWORD_INPUT, password);
+  }
+
+  async getPasswordInputType(): Promise<string> {
+    const passwordInput = this.page.locator(this.locators.PASSWORD_INPUT);
+    return (await passwordInput.getAttribute("type")) || "";
+  }
+
+  async clickVisibilityIcon(): Promise<void> {
+    await this.page.click(this.locators.VISIBILITY_ICON);
+  }
+
+  async clickSignIn(): Promise<void> {
+    await this.page.click(this.locators.SIGN_IN_BUTTON);
+  }
+
+  async clickForgotPassword(): Promise<void> {
+    await this.page.click(this.locators.FORGOT_PASSWORD_BUTTON);
+  }
+
+  async clickSignUp(): Promise<void> {
+    await this.page.click(this.locators.SIGN_UP_LINK);
+  }
+
+  async isPasswordStrengthIndicatorVisible(): Promise<boolean> {
+    return await this.page.isVisible(this.locators.PASSWORD_STRENGTH_INDICATOR);
+  }
+
+  async isPasswordStrengthTextVisible(): Promise<boolean> {
+    return await this.page.isVisible(this.locators.PASSWORD_STRENGTH_TEXT);
+  }
+
+  async isPasswordStrengthProgressVisible(): Promise<boolean> {
+    return await this.page.isVisible(this.locators.PASSWORD_STRENGTH_PROGRESS);
+  }
+
+  async getPasswordStrengthText(): Promise<string> {
+    const text =
+      (await this.page.textContent(this.locators.PASSWORD_STRENGTH_TEXT)) || "";
+    const strengthRegex = /Password strength: (.*)/;
+    const match = text.match(strengthRegex);
+    return match ? match[1] : "";
+  }
+
+  async getPasswordStrengthProgress(): Promise<string> {
+    const style =
+      (await this.page.getAttribute(
+        this.locators.PASSWORD_STRENGTH_PROGRESS,
+        "style"
+      )) || "";
+    const widthRegex = /width:\s*(\d+(\.\d+)?%)/;
+    const match = style.match(widthRegex);
+    return match ? match[1] : "0%";
+  }
+
+  async getPasswordStrengthIndicatorColor(): Promise<string> {
+    const style =
+      (await this.page.getAttribute(
+        this.locators.PASSWORD_STRENGTH_PROGRESS,
+        "class"
+      )) || "";
+    const colorRegex = /bg-\[(.*?)\]|bg-light-text|dark:bg-dark-text/;
+    const match = style.match(colorRegex);
+    if (match) {
+      if (match[0] === "bg-light-text" || match[0] === "dark:bg-dark-text") {
+        return match[0];
+      }
+      return match[1] || "";
+    }
+    return "";
+  }
+
+  async isFriendlyCaptchaVisible(): Promise<boolean> {
+    return await this.page.isVisible(this.locators.FRIENDLY_CAPTCHA);
+  }
+
+  async signIn(username: string, password: string): Promise<void> {
+    await this.fillUsername(username);
+    await this.fillPassword(password);
+    await this.clickSignIn();
+  }
+
+  // Mobile-specific methods
+  async isMobileView(): Promise<boolean> {
+    return await this.isMobile();
+  }
+
+  // Desktop-specific methods
+  async isDesktopView(): Promise<boolean> {
+    return !(await this.isMobile());
+  }
+
+  // Responsive design checks
+  async checkResponsiveLayout(): Promise<void> {
+    const isMobile = await this.isMobileView();
+    if (isMobile) {
+      // Add mobile-specific layout checks here
+      // For example, check if certain elements are stacked vertically
+    } else {
+      // Add desktop-specific layout checks here
+      // For example, check if certain elements are side by side
+    }
+  }
+}
diff --git a/frontend/test-e2e/specs/home-page.spec.ts b/frontend/test-e2e/specs/home-page.spec.ts
new file mode 100644
index 000000000..7eb78b04c
--- /dev/null
+++ b/frontend/test-e2e/specs/home-page.spec.ts
@@ -0,0 +1,87 @@
+import { expect, test } from "../fixtures/test-fixtures";
+import { runAccessibilityTest } from "../utils/accessibilityTesting";
+
+test.describe("Home Page", () => {
+  test("The topics dropdown should be functional", async ({ homePage }) => {
+    await homePage.checkTopicsDropdownFunctionality();
+  });
+
+  test("The sidebar should be visible on desktop", async ({ homePage }) => {
+    const isMobile = await homePage.isMobile();
+    test.skip(isMobile, "This test is only for desktop");
+
+    const isVisible = await homePage.checkSidebarVisibilityOnDesktop();
+    expect(isVisible).toBe(true);
+  });
+
+  test("The sidebar should expand and collapse when hovered over", async ({
+    homePage,
+  }) => {
+    const results = await homePage.checkSidebarExpandCollapse();
+    results.forEach((result) => expect(result).toBe(true));
+  });
+
+  test("Navigation dropdown menus should be functional", async ({
+    homePage,
+  }) => {
+    const results = await homePage.checkNavigationMenus();
+    results.forEach((result) => expect(result).toBe(true));
+  });
+
+  test("Navigation links should be functional", async ({ homePage }) => {
+    const results = await homePage.checkNavigationLinks();
+    const expectedPaths = [
+      "/organizations",
+      "/home",
+      "/events",
+      "/help",
+      "/docs",
+      "/legal",
+      "/auth/sign-in",
+      "/auth/sign-up",
+    ];
+    results.forEach((url, index) =>
+      expect(url).toContain(expectedPaths[index])
+    );
+  });
+
+  test("Hot keys should function correctly", async ({ homePage }) => {
+    const isMobile = await homePage.isMobile();
+    test.skip(isMobile, "This test is only for desktop");
+
+    if (!isMobile) {
+      const [
+        isSearchInputFocused,
+        isExpandedSearchInputVisible,
+        isExpandedSearchInputHidden,
+      ] = await homePage.checkHotKeyFunctionality();
+      expect(isSearchInputFocused).toBe(true);
+      expect(isExpandedSearchInputVisible).toBe(true);
+      expect(isExpandedSearchInputHidden).toBe(true);
+    }
+  });
+
+  test.skip("Search bar should be functional on both mobile and desktop", async ({
+    homePage,
+  }) => {
+    const results = await homePage.checkSearchFunctionality();
+    expect(results).toEqual([true, true, true, true]);
+  });
+
+  // MARK: Accessibility
+
+  // Note: Check to make sure that this is eventually done for light and dark modes.
+  test("Home Page has no detectable accessibility issues", async ({
+    homePage,
+  }, testInfo) => {
+    const violations = await runAccessibilityTest(homePage, testInfo);
+    expect.soft(violations, "Accessibility violations found:").toHaveLength(0);
+
+    if (violations.length > 0) {
+      console.log(
+        "Accessibility violations:",
+        JSON.stringify(violations, null, 2)
+      );
+    }
+  });
+});
diff --git a/frontend/test-e2e/specs/landing-page.spec.ts b/frontend/test-e2e/specs/landing-page.spec.ts
new file mode 100644
index 000000000..5cc3c78df
--- /dev/null
+++ b/frontend/test-e2e/specs/landing-page.spec.ts
@@ -0,0 +1,131 @@
+import { LandingPage, expect, test } from "../fixtures/test-fixtures";
+import { runAccessibilityTest } from "../utils/accessibilityTesting";
+
+test.describe("Landing Page", () => {
+  // MARK: Header
+
+  // Test that the correct Header is visible on mobile or desktop.
+  test("The correct header element should be visible on mobile and desktop", async ({
+    landingPage,
+  }) => {
+    const header = await landingPage.getVisibleHeader();
+    await expect(header).toBeVisible();
+  });
+
+  // Test that the Roadmap button is visible and clickable only on Desktop Header.
+  test("Roadmap button should be visible and clickable only on Desktop", async ({
+    landingPage,
+  }) => {
+    const result = await landingPage.checkRoadmapButtonVisibility();
+    expect(result).toBe(true);
+  });
+
+  // Test that the Sign In link can be accessed from the Home Page.
+  test("Sign In link should be accessible from the Home Page", async ({
+    landingPage,
+  }) => {
+    const isSignInVisible = await landingPage.isSignInButtonVisible();
+    expect(isSignInVisible).toBe(true);
+
+    await landingPage.navigateToSignIn();
+    expect(landingPage.url()).toContain("/auth/sign-in");
+  });
+
+  // Test that the Sign Up link can be accessed from the Home Page.
+  test("Sign Up link should be accessible from the Home Page", async ({
+    landingPage,
+  }) => {
+    const isSignUpVisible = await landingPage.isSignUpButtonVisible();
+    expect(isSignUpVisible).toBe(true);
+
+    await landingPage.navigateToSignUp();
+    expect(landingPage.url()).toContain("/auth/sign-up");
+  });
+
+  // Test that the theme dropdown is visible and functional.
+  test("Theme dropdown is functional", async ({ landingPage }) => {
+    const themes = ["light", "dark"];
+
+    for (const theme of themes) {
+      await landingPage.selectThemeOption(theme);
+      const currentTheme = await landingPage.currentTheme();
+      expect(currentTheme).toContain(theme);
+    }
+  });
+
+  // Test that the language dropdown is visible and functional.
+  test("Language dropdown options are visible", async ({ landingPage }) => {
+    const visibleOptions = await landingPage.getVisibleLanguageOptions();
+    expect(visibleOptions.length).toBeGreaterThan(0);
+    for (const option of visibleOptions) {
+      await expect(option).toBeVisible();
+    }
+  });
+
+  // MARK: Landing Page
+
+  // Test that the title of the landing page contains "activist".
+  test('Title should contain "activist"', async ({ landingPage }) => {
+    const pageTitle = await landingPage.title();
+    expect(pageTitle).toContain("activist");
+  });
+
+  // Test that the landing page contains the request access link.
+  test.skip("Splash should contain the request access link", async ({
+    landingPage,
+  }) => {
+    const requestAccessLink = landingPage.requestAccessLink;
+    expect(await requestAccessLink.getAttribute("href")).toBe(
+      LandingPage.urls.REQUEST_ACCESS_URL
+    );
+  });
+
+  // Test that the view organizations button is visible and navigates to the organizations page.
+  test("View organizations button should be visible and functional", async ({
+    landingPage,
+  }) => {
+    const isVisible = await landingPage.isViewOrganizationsButtonVisible();
+    expect(isVisible).toBe(true);
+
+    await landingPage.navigateToViewOrganizations();
+    expect(landingPage.url()).toContain("/organizations");
+  });
+
+  // Test that the view events button is visible and navigates to the events page.
+  test("View events button should be visible and functional", async ({
+    landingPage,
+  }) => {
+    const isVisible = await landingPage.isViewEventsButtonVisible();
+    expect(isVisible).toBe(true);
+
+    await landingPage.navigateToViewEvents();
+    expect(landingPage.url()).toContain("/events");
+  });
+
+  // Test that all important links are visible on the landing page.
+  test("All important links should be visible on the landing page", async ({
+    landingPage,
+  }) => {
+    const importantLinks = await landingPage.getImportantLinks();
+    for (const link of importantLinks) {
+      await expect(link).toBeVisible();
+    }
+  });
+
+  // MARK: Accessibility
+
+  // Note: Check to make sure that this is eventually done for light and dark modes.
+  test("Landing Page has no detectable accessibility issues", async ({
+    landingPage,
+  }, testInfo) => {
+    const violations = await runAccessibilityTest(landingPage, testInfo);
+    expect.soft(violations, "Accessibility violations found:").toHaveLength(0);
+
+    if (violations.length > 0) {
+      console.log(
+        "Accessibility violations:",
+        JSON.stringify(violations, null, 2)
+      );
+    }
+  });
+});
diff --git a/frontend/test-e2e/specs/sign-in-page.spec.ts b/frontend/test-e2e/specs/sign-in-page.spec.ts
new file mode 100644
index 000000000..e17114290
--- /dev/null
+++ b/frontend/test-e2e/specs/sign-in-page.spec.ts
@@ -0,0 +1,124 @@
+import { expect, test } from "../fixtures/test-fixtures";
+import { runAccessibilityTest } from "../utils/accessibilityTesting";
+
+test.describe("Sign In Page", () => {
+  test("should display all necessary elements", async ({ signInPage }) => {
+    await expect(signInPage.usernameInput).toBeVisible();
+    await expect(signInPage.passwordInput).toBeVisible();
+    await expect(signInPage.visibilityIcon).toBeVisible();
+    await expect(signInPage.signInButton).toBeVisible();
+    await expect(signInPage.forgotPasswordButton).toBeVisible();
+    await expect(signInPage.signUpLink).toBeVisible();
+  });
+
+  test("should toggle password visibility", async ({ signInPage }) => {
+    await signInPage.fillPassword("testpassword");
+
+    expect(await signInPage.getPasswordInputType()).toBe("password");
+
+    await signInPage.clickVisibilityIcon();
+    expect(await signInPage.getPasswordInputType()).toBe("text");
+
+    await signInPage.clickVisibilityIcon();
+    expect(await signInPage.getPasswordInputType()).toBe("password");
+  });
+
+  test("should navigate to forgot password page", async ({ signInPage }) => {
+    await signInPage.clickForgotPassword();
+    await signInPage.waitForUrlChange("**/auth/reset-password");
+    expect(signInPage.url()).toContain("/auth/reset-password");
+  });
+
+  test("should navigate to sign up page", async ({ signInPage }) => {
+    await signInPage.clickSignUp();
+    await signInPage.waitForUrlChange("**/auth/sign-up");
+    expect(signInPage.url()).toContain("/auth/sign-up");
+  });
+
+  test("should show password strength indicator", async ({ signInPage }) => {
+    expect(await signInPage.isPasswordStrengthIndicatorVisible()).toBe(true);
+  });
+
+  test("should show correct password strength indicators for various passwords", async ({
+    signInPage,
+  }) => {
+    const passwordTests = [
+      {
+        password: "a",
+        expected: { strength: "Very Weak", color: "#cc0000", progress: "20%" },
+      },
+      {
+        password: "Activis",
+        expected: { strength: "Weak", color: "#e69138", progress: "40%" },
+      },
+      {
+        password: "Activist4Climat",
+        expected: { strength: "Medium", color: "#f1c232", progress: "60%" },
+      },
+      {
+        password: "Activist4ClimateChange",
+        expected: { strength: "Strong", color: "#6aa84f", progress: "80%" },
+      },
+      {
+        password: "Activist4ClimateChange!",
+        expected: {
+          strength: "Very Strong",
+          color: "",
+          progress: "100%",
+        },
+      },
+    ];
+
+    for (const { password, expected } of passwordTests) {
+      await signInPage.fillPassword(password);
+      expect(await signInPage.isPasswordStrengthIndicatorVisible()).toBe(true);
+      expect(await signInPage.getPasswordStrengthIndicatorColor()).toBe(
+        expected.color
+      );
+      expect((await signInPage.getPasswordStrengthText()).toLowerCase()).toBe(
+        expected.strength.toLowerCase()
+      );
+      expect(await signInPage.getPasswordStrengthProgress()).toBe(
+        expected.progress
+      );
+    }
+  });
+
+  test("should show friendly captcha", async ({ signInPage }) => {
+    expect(await signInPage.isFriendlyCaptchaVisible()).toBe(true);
+  });
+
+  test("should attempt sign in with valid credentials", async ({
+    signInPage,
+  }) => {
+    await signInPage.signIn("admin", "admin");
+    await signInPage.waitForUrlChange("**/home");
+    expect(signInPage.url()).toContain("/home");
+    // should be redirected to the home page AND sidebar left should have create button
+  });
+
+  test("should show error for invalid credentials", async ({ signInPage }) => {
+    const dialogPromise = signInPage.waitForEvent("dialog");
+    await signInPage.signIn("invaliduser", "invalidpassword");
+
+    const dialog = await dialogPromise;
+    expect(dialog.message()).toContain("Invalid sign in credentials");
+
+    await dialog.dismiss();
+    expect(signInPage.url()).toContain("/auth/sign-in");
+  });
+
+  test("Sign In Page has no detectable accessibility issues", async ({
+    signInPage,
+  }, testInfo) => {
+    const violations = await runAccessibilityTest(signInPage, testInfo);
+    expect.soft(violations, "Accessibility violations found:").toHaveLength(0);
+
+    if (violations.length > 0) {
+      console.log(
+        "Accessibility violations:",
+        JSON.stringify(violations, null, 2)
+      );
+    }
+  });
+});
diff --git a/frontend/test-e2e/utils/PageObjectBase.ts b/frontend/test-e2e/utils/PageObjectBase.ts
new file mode 100644
index 000000000..391106825
--- /dev/null
+++ b/frontend/test-e2e/utils/PageObjectBase.ts
@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
+import type { Page, Locator } from "@playwright/test";
+
+export class PageObjectBase {
+  [key: string]: unknown;
+
+  protected readonly page: Page;
+  protected readonly pageName?: string;
+  protected readonly pageURL?: string;
+  protected locators: Record<string, string> = {};
+
+  constructor(
+    page: Page,
+    locators: Record<string, string>,
+    pageName?: string,
+    pageURL?: string
+  ) {
+    this.page = page;
+    this.locators = locators;
+    this.pageName = pageName;
+    this.pageURL = pageURL;
+
+    return new Proxy(this, {
+      get: (target: PageObjectBase, prop: string | symbol) => {
+        if (prop in target) {
+          return target[prop as keyof typeof target];
+        }
+        /*
+          PageObjectBase in effect subclasses Page and can be built from an
+          existing Page instance without deep-copying the Page instance in the
+          constructor.
+        */
+        return target.page[prop as keyof typeof target.page];
+      },
+    }) as PageObjectBase & Page;
+  }
+
+  public async getPageName(): Promise<string> {
+    return this.pageName ?? "Unknown Page";
+  }
+
+  public async isMobile(): Promise<boolean> {
+    const viewportSize = this.page.viewportSize();
+    const isMobileViewport = viewportSize !== null && viewportSize.width < 768;
+    const isMobileEmulation = await this.page.evaluate(
+      () => "ontouchstart" in window
+    );
+    return isMobileViewport && isMobileEmulation;
+  }
+
+  public async navigateTo(path: string): Promise<void> {
+    await this.page.goto(path);
+    await this.page.waitForLoadState("networkidle");
+  }
+
+  public async waitForUrlChange(
+    expectedUrlPattern: string | RegExp | ((url: URL) => boolean),
+    options?: { timeout?: number }
+  ): Promise<void> {
+    const timeout = options?.timeout || 10000;
+    await this.page.waitForURL(expectedUrlPattern, { timeout });
+  }
+
+  public async currentTheme(): Promise<string> {
+    return (await this.page.locator("html").getAttribute("class")) ?? "";
+  }
+
+  public getLocator(selector: keyof typeof this.locators): Locator {
+    return this.page.locator(this.locators[selector]);
+  }
+}
+
+// This interface tells Typescript that PageObjectBase subclasses Page.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface PageObjectBase extends Page {}
diff --git a/frontend/test-e2e/utils/accessibilityTesting.ts b/frontend/test-e2e/utils/accessibilityTesting.ts
new file mode 100644
index 000000000..182dd9945
--- /dev/null
+++ b/frontend/test-e2e/utils/accessibilityTesting.ts
@@ -0,0 +1,34 @@
+import type { Page, TestInfo } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+import type { PageObjectBase } from "./PageObjectBase";
+
+export async function runAccessibilityTest(
+  page: Page | PageObjectBase,
+  testInfo: TestInfo
+) {
+  const results = await new AxeBuilder({ page })
+    .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+    .analyze();
+
+  await testInfo.attach("accessibility-scan-results", {
+    body: JSON.stringify(results, null, 2),
+    contentType: "application/json",
+  });
+  const pageName =
+    "getPageName" in page ? await page.getPageName() : "Unknown Page";
+  console.log(`Accessibility test completed for: ${pageName}`);
+  console.log(`Violations found: ${results.violations.length}`);
+
+  const formattedViolations = results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    description: violation.description,
+    help: violation.help,
+    nodes: violation.nodes.map((node) => ({
+      html: node.html,
+      failureSummary: node.failureSummary,
+    })),
+  }));
+
+  return formattedViolations;
+}
diff --git a/frontend/test-e2e/utils/axe-reporter.ts b/frontend/test-e2e/utils/axe-reporter.ts
new file mode 100644
index 000000000..3434b1494
--- /dev/null
+++ b/frontend/test-e2e/utils/axe-reporter.ts
@@ -0,0 +1,101 @@
+import type {
+  Reporter,
+  TestCase,
+  TestResult,
+  Suite,
+} from "@playwright/test/reporter";
+import { createHtmlReport } from "axe-html-reporter";
+import type { AxeResults } from "axe-core";
+
+class AxeReporter implements Reporter {
+  private outputDir: string;
+
+  constructor(options?: { outputDir?: string }) {
+    this.outputDir = options?.outputDir || "test-results/accessibility-results";
+  }
+
+  onTestBegin(test: TestCase) {
+    console.log(`Starting test ${test.title}`);
+  }
+
+  onTestEnd(test: TestCase, result: TestResult) {
+    console.log(`Test ended: ${test.title}, Status: ${result.status}`);
+
+    const axeResults = result.attachments.find(
+      (a) => a.name === "accessibility-scan-results"
+    );
+    if (axeResults && axeResults.body) {
+      const results = JSON.parse(axeResults.body.toString());
+      console.log(`Violations found: ${results.violations.length}`);
+
+      if (results.violations.length > 0) {
+        console.log(`Generating report for: ${test.title}`);
+        const pageName = this.extractPageName(test);
+        const { browserName, deviceName } = this.extractProjectInfo(test);
+        this.generateAxeReport(results, pageName, browserName, deviceName);
+      } else {
+        console.log(
+          `Skipping report generation for test with no violations: ${test.title}`
+        );
+      }
+    } else {
+      console.log(`No accessibility results found for: ${test.title}`);
+    }
+  }
+
+  private extractPageName(test: TestCase): string {
+    let currentSuite = test.parent;
+    while (currentSuite.parent) {
+      if (currentSuite.type === "describe") {
+        return currentSuite.title.replace(/\s+/g, "_");
+      }
+      currentSuite = currentSuite.parent;
+    }
+    return "unknown_page";
+  }
+
+  private extractProjectInfo(test: TestCase): {
+    browserName: string;
+    deviceName: string;
+  } {
+    let current: Suite | undefined = test.parent;
+    while (current) {
+      if (current.project) {
+        const project = current.project();
+        if (project) {
+          const projectName = project.name;
+          const [browserName, ...deviceParts] = projectName.split(" ");
+          return {
+            browserName: browserName.replace(/\s+/g, "_"),
+            deviceName:
+              deviceParts.length > 0 ? deviceParts.join("_") : "desktop",
+          };
+        }
+      }
+      current = current.parent;
+    }
+    return { browserName: "unknown_browser", deviceName: "unknown_device" };
+  }
+
+  generateAxeReport(
+    results: AxeResults,
+    pageName: string,
+    browserName: string,
+    deviceName: string
+  ) {
+    const reportFileName = `${pageName}_${browserName}_${deviceName}_axe_report.html`;
+
+    createHtmlReport({
+      results,
+      options: {
+        projectKey: "Activist",
+        customSummary: `Accessibility report for ${pageName} - ${browserName}`,
+        doNotCreateReportFile: false,
+        reportFileName: reportFileName,
+        outputDir: this.outputDir,
+      },
+    });
+  }
+}
+
+export default AxeReporter;
diff --git a/frontend/tests/component-objects/BaseComponent.ts b/frontend/tests/component-objects/BaseComponent.ts
deleted file mode 100644
index 8c614496f..000000000
--- a/frontend/tests/component-objects/BaseComponent.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Page, Locator } from "@playwright/test";
-import { isMobile } from "../utils/utils";
-
-export default abstract class BaseComponent {
-  protected readonly page: Page;
-  protected locators: Record<string, string> = {};
-
-  constructor(page: Page) {
-    this.page = page;
-  }
-
-  public async isMobile(): Promise<boolean> {
-    return isMobile(this.page);
-  }
-
-  protected setLocators(locators: Record<string, string>): void {
-    this.locators = locators;
-  }
-
-  public getLocator(key: keyof typeof this.locators): Locator {
-    return this.page.locator(this.locators[key]);
-  }
-}
diff --git a/frontend/tests/component-objects/TopicsDropdown.ts b/frontend/tests/component-objects/TopicsDropdown.ts
deleted file mode 100644
index b4341610e..000000000
--- a/frontend/tests/component-objects/TopicsDropdown.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Page, Locator } from "@playwright/test";
-import BaseComponent from "./BaseComponent";
-
-export default class TopicsDropdown extends BaseComponent {
-  public static readonly locators = {
-    TOPICS_DROPDOWN: "#topics-dropdown",
-    TOPICS_OPTIONS: "#topics-dropdown ul#isVisibleElement",
-  };
-
-  constructor(page: Page) {
-    super(page);
-    this.setLocators(TopicsDropdown.locators);
-  }
-
-  get topicsDropdown(): Locator {
-    return this.getLocator("TOPICS_DROPDOWN");
-  }
-  get topicsOptions(): Locator {
-    return this.getLocator("TOPICS_OPTIONS");
-  }
-
-  async openTopicsDropdown(): Promise<void> {
-    if (!(await this.topicsOptions.isVisible())) {
-      await this.topicsDropdown.click();
-    }
-  }
-
-  async closeTopicsDropdown(): Promise<void> {
-    if (await this.topicsOptions.isVisible()) {
-      await this.topicsDropdown.click();
-    }
-  }
-}
diff --git a/frontend/tests/fixtures/page-fixtures.ts b/frontend/tests/fixtures/page-fixtures.ts
deleted file mode 100644
index 27ff14d78..000000000
--- a/frontend/tests/fixtures/page-fixtures.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { test as baseTest } from "@playwright/test";
-import LandingPage from "../page-objects/LandingPage";
-import HomePage from "../page-objects/HomePage";
-
-export const test = baseTest.extend<{
-  landingPage: LandingPage;
-  homePage: HomePage;
-}>({
-  landingPage: async ({ page }, use) => {
-    const landingPage = new LandingPage(page);
-    await use(landingPage);
-  },
-  homePage: async ({ page }, use) => {
-    const homePage = new HomePage(page);
-    await use(homePage);
-  },
-});
-
-export { expect } from "@playwright/test";
-export { LandingPage, HomePage };
diff --git a/frontend/tests/page-objects/BasePage.ts b/frontend/tests/page-objects/BasePage.ts
deleted file mode 100644
index aec717dd0..000000000
--- a/frontend/tests/page-objects/BasePage.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { Locator, Page } from "@playwright/test";
-import { isMobile } from "../utils/utils";
-export default abstract class BasePage {
-  protected readonly pageName: string;
-  protected readonly pageUrl: string;
-  protected readonly page: Page;
-  protected locators: Record<string, string> = {};
-
-  constructor(page: Page, pageName: string, pageUrl = "/") {
-    this.page = page;
-    this.pageName = pageName;
-    this.pageUrl = pageUrl;
-  }
-
-  public static readonly urls = {
-    REQUEST_ACCESS_URL:
-      "https://forms.activist.org/s/cm30ujrcj0003107fqc75yke8",
-  };
-
-  public get getPage(): Page {
-    return this.page;
-  }
-
-  public async goto(pageUrl: string = this.pageUrl): Promise<void> {
-    await this.page.goto(`${pageUrl}`);
-  }
-
-  public async isMobile(): Promise<boolean> {
-    return isMobile(this.page);
-  }
-
-  public async waitForUrlChange(
-    expectedUrlPattern: string | RegExp | ((url: URL) => boolean),
-    options?: { timeout?: number }
-  ): Promise<void> {
-    const timeout = options?.timeout || 10000;
-    await this.page.waitForURL(expectedUrlPattern, { timeout });
-  }
-
-  public async currentTheme(): Promise<string> {
-    return (await this.page.locator("html").getAttribute("class")) ?? "";
-  }
-
-  protected setLocators(locators: Record<string, string>): void {
-    this.locators = locators;
-  }
-
-  public getLocator(key: keyof typeof this.locators): Locator {
-    return this.page.locator(this.locators[key]);
-  }
-}
diff --git a/frontend/tests/page-objects/HomePage.ts b/frontend/tests/page-objects/HomePage.ts
deleted file mode 100644
index 8b6ae058e..000000000
--- a/frontend/tests/page-objects/HomePage.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Page } from "@playwright/test";
-import TopicsDropdown from "../component-objects/TopicsDropdown";
-import BasePage from "./BasePage";
-
-export default class HomePage extends BasePage {
-  public static readonly locators = {};
-
-  readonly topicsDropdown: TopicsDropdown;
-
-  constructor(page: Page) {
-    super(page, "Home Page", "/home");
-    this.topicsDropdown = new TopicsDropdown(page);
-    this.setLocators(HomePage.locators);
-  }
-}
diff --git a/frontend/tests/page-objects/LandingPage.ts b/frontend/tests/page-objects/LandingPage.ts
deleted file mode 100644
index ab8ea6f56..000000000
--- a/frontend/tests/page-objects/LandingPage.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Locator, Page } from "@playwright/test";
-import HeaderWebsite from "../component-objects/HeaderWebsite";
-import BasePage from "./BasePage";
-
-export default class LandingPage extends BasePage {
-  public static readonly locators = {
-    LANDING_SPLASH: "#landing-splash-header",
-    REQUEST_ACCESS_LINK: "#request-access",
-    GET_ACTIVE_BUTTON: "#btn-get-active",
-    GET_ORGANIZED_BUTTON: "#btn-get-organized",
-    GROW_ORGANIZATION_BUTTON: "#btn-grow-organization",
-    ABOUT_BUTTON: "#btn-activist",
-    BECOME_SUPPORTER_BUTTON: "#btn-become-supporter",
-    OUR_SUPPORTERS_BUTTON: "#btn-our-supporters",
-  };
-
-  readonly header: HeaderWebsite;
-
-  constructor(page: Page) {
-    super(page, "Landing Page", "/");
-    this.header = new HeaderWebsite(page);
-    this.setLocators(LandingPage.locators);
-  }
-
-  get landingSplash(): Locator {
-    return this.getLocator("LANDING_SPLASH");
-  }
-
-  get requestAccessLink(): Locator {
-    return this.getLocator("REQUEST_ACCESS_LINK");
-  }
-
-  get getActiveButton(): Locator {
-    return this.getLocator("GET_ACTIVE_BUTTON");
-  }
-
-  get getOrganizedButton(): Locator {
-    return this.getLocator("GET_ORGANIZED_BUTTON");
-  }
-
-  get growOrganizationButton(): Locator {
-    return this.getLocator("GROW_ORGANIZATION_BUTTON");
-  }
-
-  get aboutButton(): Locator {
-    return this.getLocator("ABOUT_BUTTON");
-  }
-
-  get becomeSupportersButton(): Locator {
-    return this.getLocator("BECOME_SUPPORTER_BUTTON");
-  }
-
-  get ourSupportersButton(): Locator {
-    return this.getLocator("OUR_SUPPORTERS_BUTTON");
-  }
-}
diff --git a/frontend/tests/specs/home-page.spec.ts b/frontend/tests/specs/home-page.spec.ts
deleted file mode 100644
index 830a462a9..000000000
--- a/frontend/tests/specs/home-page.spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import AxeBuilder from "@axe-core/playwright";
-import { expect, test } from "../fixtures/page-fixtures";
-
-test.describe("Home Page", () => {
-  test.beforeEach(async ({ homePage }) => {
-    await homePage.goto("/home");
-    const { topicsDropdown } = homePage.topicsDropdown;
-    await topicsDropdown.waitFor({ state: "visible" });
-  });
-
-  // MARK: Accessibility
-
-  // Test accessibility of the home page (skip this test for now).
-  // Note: Check to make sure that this is eventually done for light and dark modes.
-  test.skip("There are no detectable accessibility issues", async ({
-    homePage,
-  }, testInfo) => {
-    const results = await new AxeBuilder({ page: homePage.getPage })
-      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
-      .analyze();
-
-    await testInfo.attach("accessibility-scan-results", {
-      body: JSON.stringify(results, null, 2),
-      contentType: "application/json",
-    });
-
-    expect(results.violations).toEqual([]);
-  });
-
-  test("The topics dropdown should be functional", async ({ homePage }) => {
-    await homePage.topicsDropdown.openTopicsDropdown();
-    await expect(homePage.topicsDropdown.topicsOptions).toBeVisible();
-    await homePage.topicsDropdown.closeTopicsDropdown();
-    await expect(homePage.topicsDropdown.topicsOptions).toBeHidden();
-  });
-});
diff --git a/frontend/tests/specs/landing-page.spec.ts b/frontend/tests/specs/landing-page.spec.ts
deleted file mode 100644
index 85eaa800e..000000000
--- a/frontend/tests/specs/landing-page.spec.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import AxeBuilder from "@axe-core/playwright";
-import locales from "../../locales";
-import { LandingPage, expect, test } from "../fixtures/page-fixtures";
-
-test.describe("Landing Page", () => {
-  // Initialize page before each test, wait for the landing splash to be visible.
-  test.beforeEach(async ({ landingPage }) => {
-    await landingPage.goto("/en");
-    const { landingSplash } = landingPage;
-    await landingSplash.waitFor({ state: "visible" });
-  });
-
-  // MARK: Accessibility
-
-  // Test accessibility of the landing page (skip this test for now).
-  // Note: Check to make sure that this is eventually done for light and dark modes.
-  test("There are no detectable accessibility issues", async ({
-    landingPage,
-  }, testInfo) => {
-    const results = await new AxeBuilder({ page: landingPage.getPage })
-      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
-      .analyze();
-
-    await testInfo.attach("accessibility-scan-results", {
-      body: JSON.stringify(results, null, 2),
-      contentType: "application/json",
-    });
-
-    expect(results.violations).toEqual([]);
-  });
-
-  // MARK: Header
-
-  // Test that the correct Header is visible on mobile or desktop.
-  test("The correct header element should be visible on mobile and desktop", async ({
-    landingPage,
-  }) => {
-    const header = (await landingPage.isMobile())
-      ? landingPage.header.mobileHeader
-      : landingPage.header.desktopHeader;
-    await expect(header).toBeVisible();
-  });
-
-  // Test that the Roadmap button is visible and clickable only on Desktop Header.
-  test("Roadmap button should be visible and clickable only on Desktop", async ({
-    landingPage,
-  }) => {
-    if (!(await landingPage.isMobile())) {
-      await expect(landingPage.header.roadmapButton).toBeVisible();
-      await landingPage.header.navigateToRoadmap();
-      await landingPage.waitForUrlChange("**/about/roadmap");
-      expect(landingPage.getPage.url()).toContain("/about/roadmap");
-    } else {
-      await expect(landingPage.header.roadmapButton).toBeHidden();
-    }
-  });
-
-  // Test that the Get In Touch button is visible and clickable only on Desktop Header.
-  test("Get In Touch button is functional", async ({ landingPage }) => {
-    if (!(await landingPage.isMobile())) {
-      await expect(landingPage.header.getInTouchButton).toBeVisible();
-      await landingPage.header.getInTouchButton.click();
-      await landingPage.waitForUrlChange("**/contact");
-      expect(landingPage.getPage.url()).toContain("/contact");
-    } else {
-      await expect(landingPage.header.getInTouchButton).toBeHidden();
-    }
-  });
-
-  // Test that the theme dropdown is visible and functional.
-  test("Theme dropdown is functional", async ({ landingPage }) => {
-    const themes = ["light", "dark"];
-    for (const theme of themes) {
-      await landingPage.header.selectThemeOption(theme);
-      const currentTheme = await landingPage.currentTheme();
-      expect(currentTheme).toContain(theme);
-    }
-  });
-
-  // Test that the language dropdown is visible and functional.
-  test("Language dropdown is functional", async ({ landingPage }) => {
-    const selectedLanguage = await landingPage.header.getSelectedLanguage();
-    const languageOptions = await landingPage.header.getLanguageOptions();
-
-    for (const locale of locales) {
-      if (locale.code === selectedLanguage) {
-        continue;
-      }
-      const optionText = locale.name;
-      const option = await landingPage.header.findLanguageOption(
-        languageOptions,
-        optionText
-      );
-      const langOptionIsVisible = await option?.isVisible();
-      expect(langOptionIsVisible).toBe(true);
-    }
-  });
-
-  // MARK: Landing Page
-
-  // Test that the title of the landing page contains "activist".
-  test('Title should contain "activist"', async ({ landingPage }) => {
-    const pageTitle = await landingPage.getPage.title();
-    expect(pageTitle).toContain("activist");
-  });
-
-  // Test that the landing page contains the request access link.
-  test("Splash should contain the request access link", async ({
-    landingPage,
-  }) => {
-    const { requestAccessLink } = landingPage;
-    expect(await requestAccessLink.getAttribute("href")).toBe(
-      LandingPage.urls.REQUEST_ACCESS_URL
-    );
-  });
-
-  // Test that all important links are visible on the landing page.
-  test("All important links should be visible on the landing page", async ({
-    landingPage,
-  }) => {
-    await expect(landingPage.landingSplash).toBeVisible();
-    await expect(landingPage.requestAccessLink).toBeVisible();
-    await expect(landingPage.getActiveButton).toBeVisible();
-    await expect(landingPage.getOrganizedButton).toBeVisible();
-    await expect(landingPage.growOrganizationButton).toBeVisible();
-    await expect(landingPage.aboutButton).toBeVisible();
-    await expect(landingPage.becomeSupportersButton).toBeVisible();
-    await expect(landingPage.ourSupportersButton).toBeVisible();
-  });
-});
diff --git a/frontend/tests/utils/utils.ts b/frontend/tests/utils/utils.ts
deleted file mode 100644
index 1d6e33dba..000000000
--- a/frontend/tests/utils/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { Page } from "@playwright/test";
-
-export async function isMobile(page: Page): Promise<boolean> {
-  const viewportSize = page.viewportSize();
-  return viewportSize !== null && viewportSize.width < 768;
-}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 631de7cb8..1c066adf7 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -4,6 +4,7 @@
   "compilerOptions": {
     "strict": true,
     "skipLibCheck": true,
+    "module": "ESNext",
     "types": [
       "@vueuse/nuxt",
       "@vueuse/core",
diff --git a/frontend/vitest.config.mts b/frontend/vitest.config.mts
index f64d2bcba..3ce7ca24c 100644
--- a/frontend/vitest.config.mts
+++ b/frontend/vitest.config.mts
@@ -11,7 +11,7 @@ export default defineVitestConfig({
     environment: "nuxt",
     exclude: [
       "**/node_modules/**",
-      "./tests", // exclude e2e tests
+      "./test-e2e", // exclude e2e tests
     ],
     globals: true,
     setupFiles: ["./test/setup.ts"],
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index be8b398b4..827e58960 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1934,12 +1934,12 @@
   dependencies:
     "@types/geojson" "*"
 
-"@playwright/test@1.48.0":
-  version "1.48.0"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.48.0.tgz#4b81434a3ca75e2a6f82a645287784223a45434c"
-  integrity sha512-W5lhqPUVPqhtc/ySvZI5Q8X2ztBOUgZ8LbAFy0JQgrXZs2xaILrUcNO3rQjwbLPfGK13+rZsDa1FpG+tqYkT5w==
+"@playwright/test@1.48.2":
+  version "1.48.2"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.48.2.tgz#87dd40633f980872283404c8142a65744d3f13d6"
+  integrity sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==
   dependencies:
-    playwright "1.48.0"
+    playwright "1.48.2"
 
 "@polka/url@^1.0.0-next.24":
   version "1.0.0-next.28"
@@ -3478,11 +3478,23 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+axe-core@4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.0.tgz#d9e56ab0147278272739a000880196cdfe113b59"
+  integrity sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==
+
 axe-core@~4.10.0:
   version "4.10.2"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
   integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
 
+axe-html-reporter@2.2.11:
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/axe-html-reporter/-/axe-html-reporter-2.2.11.tgz#749a4d5836f6aebb6780049933c2f6030e06c7d0"
+  integrity sha512-WlF+xlNVgNVWiM6IdVrsh+N0Cw7qupe5HT9N6Uyi+aN7f6SSi92RDomiP1noW8OWIV85V6x404m5oKMeqRV3tQ==
+  dependencies:
+    mustache "^4.0.1"
+
 axios-retry@^3.1.9:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.9.1.tgz#c8924a8781c8e0a2c5244abf773deb7566b3830d"
@@ -7588,6 +7600,11 @@ murmurhash-js@^1.0.0:
   resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51"
   integrity sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==
 
+mustache@^4.0.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.2.0.tgz#e5892324d60a12ec9c2a73359edca52972bf6f64"
+  integrity sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==
+
 mz@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
@@ -8358,17 +8375,17 @@ pkg-types@^1.0.3, pkg-types@^1.1.1, pkg-types@^1.2.0:
     mlly "^1.7.2"
     pathe "^1.1.2"
 
-playwright-core@1.45.1, playwright-core@1.48.0:
-  version "1.45.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.45.1.tgz#549a2701556b58245cc75263f9fc2795c1158dc1"
-  integrity sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==
+playwright-core@1.48.2:
+  version "1.48.2"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.48.2.tgz#cd76ed8af61690edef5c05c64721c26a8db2f3d7"
+  integrity sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==
 
-playwright@1.48.0:
-  version "1.48.0"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.48.0.tgz#00855d9a25f1991d422867f1c32af5d90f457b48"
-  integrity sha512-qPqFaMEHuY/ug8o0uteYJSRfMGFikhUysk8ZvAtfKmUK3kc/6oNl/y3EczF8OFGYIi/Ex2HspMfzYArk6+XQSA==
+playwright@1.48.2:
+  version "1.48.2"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.48.2.tgz#fca45ae8abdc34835c715718072aaff7e305167e"
+  integrity sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==
   dependencies:
-    playwright-core "1.48.0"
+    playwright-core "1.48.2"
   optionalDependencies:
     fsevents "2.3.2"