diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 000000000..90b6b700d
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
diff --git a/.gitignore b/.gitignore
index 60ff6bb8c..76ec0182e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,4 +33,8 @@ build-storybook.log
 storybook-static/
 
 # cypress
-cypress.env.json
\ No newline at end of file
+cypress.env.json
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e9de8904..ffce029ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,42 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.83.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.83.0...v0.83.0)
+
+- fix(media): update routes [`#1862`](https://github.com/isomerpages/isomercms-frontend/pull/1862)
+
+#### [v0.83.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.82.0...v0.83.0)
+
+> 21 March 2024
+
+- Test/repo privatisation [`#1342`](https://github.com/isomerpages/isomercms-frontend/pull/1342)
+- fix(resourceModal): sane default permalink [`#1858`](https://github.com/isomerpages/isomercms-frontend/pull/1858)
+- fix(routeselector/resourceroom): remove accidental comments + fix typo [`#1859`](https://github.com/isomerpages/isomercms-frontend/pull/1859)
+- chore(validation): add validation for all routes [`#1854`](https://github.com/isomerpages/isomercms-frontend/pull/1854)
+- fix(permalinks): default permalink for create [`#1843`](https://github.com/isomerpages/isomercms-frontend/pull/1843)
+- feat(tiptap): add supersub [`#1855`](https://github.com/isomerpages/isomercms-frontend/pull/1855)
+- fix(app): change service to `isomer` [`#1857`](https://github.com/isomerpages/isomercms-frontend/pull/1857)
+- fix(accordion): styles [`#1834`](https://github.com/isomerpages/isomercms-frontend/pull/1834)
+- fet(admin): add release prep script [`#1853`](https://github.com/isomerpages/isomercms-frontend/pull/1853)
+- feat(playwright): migrate [`#1805`](https://github.com/isomerpages/isomercms-frontend/pull/1805)
+- feat(editpage): add resource spec, remove cypress spec [`#1796`](https://github.com/isomerpages/isomercms-frontend/pull/1796)
+- feat(editpage): add collection page tests [`#1795`](https://github.com/isomerpages/isomercms-frontend/pull/1795)
+- feat(e2e): migrate unlinked page tests to playwright [`#1790`](https://github.com/isomerpages/isomercms-frontend/pull/1790)
+- feat(playwright): migrate dashboard spec [`#1789`](https://github.com/isomerpages/isomercms-frontend/pull/1789)
+- chore(deps-dev): bump browserify-sign from 4.2.1 to 4.2.3 [`#1836`](https://github.com/isomerpages/isomercms-frontend/pull/1836)
+- chore(deps-dev): bump @adobe/css-tools from 4.2.0 to 4.3.3 [`#1837`](https://github.com/isomerpages/isomercms-frontend/pull/1837)
+- chore(deps): bump follow-redirects from 1.15.4 to 1.15.6 [`#1849`](https://github.com/isomerpages/isomercms-frontend/pull/1849)
+- chore(deps): bump react-select from 5.7.4 to 5.8.0 [`#1847`](https://github.com/isomerpages/isomercms-frontend/pull/1847)
+- build(package-lock): bump pm to 2.0.8 to avoid legal [`#1833`](https://github.com/isomerpages/isomercms-frontend/pull/1833)
+- chore(deps): bump the npm_and_yarn group group with 2 updates [`#1842`](https://github.com/isomerpages/isomercms-frontend/pull/1842)
+- chore(deps-dev): bump @storybook/addon-actions from 7.1.1 to 8.0.0 [`#1841`](https://github.com/isomerpages/isomercms-frontend/pull/1841)
+- backport v0.82.0 [`#1846`](https://github.com/isomerpages/isomercms-frontend/pull/1846)
+- chore: bump version to v0.83.0 [`f981939`](https://github.com/isomerpages/isomercms-frontend/commit/f9819395c2078f3c21e639c7fc68d40abae4c9dc)
+
 #### [v0.82.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.81.0...v0.82.0)
 
+> 14 March 2024
+
 - chore(deps-dev): bump @babel/traverse from 7.22.8 to 7.23.2 [`#1599`](https://github.com/isomerpages/isomercms-frontend/pull/1599)
 - deps: fix package-lock.json [`#1840`](https://github.com/isomerpages/isomercms-frontend/pull/1840)
 - fix: package.json to reduce vulnerabilities [`#1816`](https://github.com/isomerpages/isomercms-frontend/pull/1816)
@@ -21,6 +55,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat(app): add link between traces + rum [`#1832`](https://github.com/isomerpages/isomercms-frontend/pull/1832)
 - fix(no broken link): not reporting duplicate permalink [`#1831`](https://github.com/isomerpages/isomercms-frontend/pull/1831)
 - 0.81.0 [`#1830`](https://github.com/isomerpages/isomercms-frontend/pull/1830)
+- chore: bump version to v0.82.0 [`566e5c8`](https://github.com/isomerpages/isomercms-frontend/commit/566e5c8190d4cbef3ed0d9e73ddbccd4006a6c74)
 
 #### [v0.81.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.80.0...v0.81.0)
 
diff --git a/cypress/e2e/dashboard.spec.ts b/cypress/e2e/dashboard.spec.ts
deleted file mode 100644
index 719757086..000000000
--- a/cypress/e2e/dashboard.spec.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { closeReviewRequests } from "../api"
-import {
-  E2E_EMAIL_REPO_MASTER_LINK,
-  E2E_EMAIL_REPO_STAGING_LINK,
-  E2E_EMAIL_TEST_SITE,
-  ISOMER_GUIDE_LINK,
-  TEST_REPO_NAME,
-} from "../fixtures/constants"
-import { getOpenStagingButton, visitE2eEmailTestRepo } from "../utils"
-
-const getReviewRequestButton = () => cy.contains("button", "Request a Review")
-
-const getOpenStagingDropdownButton = () =>
-  getOpenStagingButton().siblings("button")
-
-const goToWorkspace = () => cy.contains("a", "Edit site").click()
-
-const REVIEW_MODAL_SUBTITLE =
-  "An Admin needs to review and approve your changes before they can be published"
-
-const REVIEW_REQUEST_ALERT_MESSAGE =
-  "There’s a Review request pending approval. Any changes you make now will be added to the existing Review request, and published with the changes in it."
-
-describe("dashboard flow", () => {
-  beforeEach(() => {
-    cy.setupDefaultInterceptors()
-    cy.setEmailSessionDefaults("Email admin")
-    visitE2eEmailTestRepo()
-    closeReviewRequests()
-  })
-
-  it('should open the staging site on click of the "Open staging" button', () => {
-    // Assert
-    getOpenStagingButton()
-      .should("have.attr", "href", E2E_EMAIL_REPO_STAGING_LINK)
-      .should("have.attr", "target", "_blank")
-  })
-
-  it('should open the "Request a Review" modal on click of the "Request a Review" button', () => {
-    // Act
-    getReviewRequestButton().click()
-
-    // Assert
-    cy.contains(REVIEW_MODAL_SUBTITLE).should("be.visible")
-  })
-
-  it("should be able to navigate to the staging site using the dropdown button", () => {
-    // Act
-    getOpenStagingDropdownButton().click()
-
-    // Assert
-    cy.contains("Open staging site")
-      .should("be.visible")
-      .should("have.attr", "href", E2E_EMAIL_REPO_STAGING_LINK)
-      .should("have.attr", "target", "_blank")
-  })
-
-  it("should be able to navigate to the production site using the dropdown button", () => {
-    // Act
-    getOpenStagingDropdownButton().click()
-
-    // Assert
-    cy.contains("Visit live site")
-      .should("be.visible")
-      .should("have.attr", "href", E2E_EMAIL_REPO_MASTER_LINK)
-      .should("have.attr", "target", "_blank")
-  })
-
-  it('should navigate to the isomer guide on click of the "Get help" button', () => {
-    // Act
-    cy.contains("Get help")
-      .should("be.visible")
-      .should("have.attr", "href", ISOMER_GUIDE_LINK)
-      .should("have.attr", "target", "_blank")
-  })
-
-  it("should navigate to the settings page when manage site settings is clicked", () => {
-    // Act
-    cy.contains("Site settings")
-      .should("be.visible")
-      .parent()
-      .parent()
-      .siblings("a")
-      .should(
-        "have.attr",
-        "href",
-        `/sites/${E2E_EMAIL_TEST_SITE.repo}/settings`
-      )
-      .click()
-
-    // Assert
-    cy.contains("Site settings").should("be.visible")
-  })
-
-  it("should navigate to the workspace when edit site is clicked", () => {
-    // Act
-    cy.contains("Edit site")
-      .should("be.visible")
-      .should(
-        "have.attr",
-        "href",
-        `/sites/${E2E_EMAIL_TEST_SITE.repo}/workspace`
-      )
-      .click()
-
-    // Assert
-    cy.contains("My Workspace").should("be.visible")
-    cy.contains(REVIEW_REQUEST_ALERT_MESSAGE).should("not.exist")
-  })
-})
diff --git a/cypress/e2e/editPage.spec.ts b/cypress/e2e/editPage.spec.ts
deleted file mode 100644
index ac563ab4e..000000000
--- a/cypress/e2e/editPage.spec.ts
+++ /dev/null
@@ -1,446 +0,0 @@
-import "cypress-file-upload"
-import {
-  slugifyCategory,
-  generateResourceFileName,
-  titleToPageFileName,
-} from "utils/fileNameUtils"
-
-import {
-  CMS_BASEURL,
-  Interceptors,
-  TEST_REPO_NAME,
-} from "../fixtures/constants"
-import { SUCCESSFUL_EDIT_PAGE_TOAST } from "../fixtures/messages"
-
-// Constants
-const PRIMARY_COLOUR = "rgb(255, 0, 0)"
-const SECONDARY_COLOUR = "rgb(0, 255, 0)"
-
-describe("editPage.spec", () => {
-  beforeEach(() => {
-    cy.setupDefaultInterceptors()
-    cy.setGithubSessionDefaults()
-  })
-
-  describe("Edit unlinked page", () => {
-    const TEST_PAGE_CONTENT = "lorem ipsum"
-    const TEST_INSTAGRAM_EMBED_SCRIPT =
-      '<script async src="//www.instagram.com/embed.js"></script>'
-    const TEST_SANITIZED_INSTAGRAM_EMBED_SCRIPT =
-      '<script async="" src="//www.instagram.com/embed.js"></script>'
-    const TEST_UNTRUSTED_SCRIPT =
-      '<script src="https://www.example.com/evil.js"></script>'
-    const TEST_INLINE_SCRIPT = '<script>alert("hello")</script>'
-
-    const TEST_UNLINKED_PAGE_TITLE = "Test Unlinked Page"
-    const TEST_UNLINKED_PAGE_FILENAME = titleToPageFileName(
-      TEST_UNLINKED_PAGE_TITLE
-    )
-    const TEST_PAGE_TITLE_ENCODED = encodeURIComponent(
-      TEST_UNLINKED_PAGE_FILENAME
-    )
-
-    const DEFAULT_IMAGE_TITLE = "isomer-logo.svg"
-    const ADDED_IMAGE_TITLE = "balloon"
-    const ADDED_IMAGE_PATH = "images/balloon.png"
-
-    const ADDED_FILE_TITLE = "singapore-pages"
-    const ADDED_FILE_PATH = "files/singapore.pdf"
-
-    const LINK_TITLE = "link"
-    const LINK_URL = "https://www.google.com"
-
-    before(() => {
-      cy.setDefaultSettings()
-
-      // NOTE: We need to repeat the interceptor here as
-      // cypress resolves by type before nesting level.
-      // Hence, the alias here will not be resolved as the `before` hook
-      // will be resolved before the outer `beforeEach`
-      cy.setupDefaultInterceptors()
-
-      // Set up test resource categories
-      cy.visit(`/sites/${TEST_REPO_NAME}/workspace`)
-      cy.contains("a", "Create page").click({ force: true })
-      cy.get("#title").clear().type(TEST_UNLINKED_PAGE_TITLE)
-      cy.contains("Save").click().wait(Interceptors.POST)
-    })
-
-    beforeEach(() => {
-      cy.visit(`/sites/${TEST_REPO_NAME}/editPage/${TEST_PAGE_TITLE_ENCODED}`)
-      cy.contains("verify").should("not.exist")
-    })
-
-    it("Edit page (unlinked) should have correct colour", () => {
-      cy.get("#display-header").should(
-        "have.css",
-        "background-color",
-        PRIMARY_COLOUR
-      )
-    })
-
-    it("Edit page (unlinked) should have name of title", () => {
-      cy.contains(TEST_UNLINKED_PAGE_TITLE)
-    })
-
-    it("Edit page (unlinked) should provide a warning to users when navigating away", () => {
-      cy.get(".CodeMirror-scroll").type(TEST_PAGE_CONTENT)
-      cy.get('button[aria-label="Back to sites"]').click()
-
-      cy.contains("Warning")
-      cy.contains(":button", "No").click()
-
-      // Sanity check: still in unlinked pages and content still present
-      cy.url().should(
-        "include",
-        `${CMS_BASEURL}/sites/${TEST_REPO_NAME}/editPage/${TEST_PAGE_TITLE_ENCODED}`
-      )
-      cy.contains(TEST_PAGE_CONTENT)
-
-      cy.get('button[aria-label="Back to sites"]').click()
-
-      cy.contains("Warning")
-      cy.contains(":button", "Yes").click()
-
-      // Assert: in Workspace
-      cy.url().should(
-        "include",
-        `${CMS_BASEURL}/sites/${TEST_REPO_NAME}/workspace`
-      )
-    })
-
-    it("Edit page (unlinked) should allow user to modify and save content", () => {
-      cy.get(".CodeMirror-scroll").type(TEST_PAGE_CONTENT)
-      cy.contains(":button", "Save").click()
-
-      // Asserts
-      // 1. Toast
-      cy.contains(SUCCESSFUL_EDIT_PAGE_TOAST)
-
-      // 2. Content is there even after refreshing
-      cy.reload()
-      cy.contains(TEST_PAGE_CONTENT).should("exist")
-    })
-
-    it("Edit page (unlinked) should allow user to add existing image", () => {
-      // NOTE: Multiple GET requests are fired off and hence, unable to use default GET to match
-      cy.intercept("**/images").as("getImages")
-      cy.get(".image").click().wait("@getImages")
-      cy.contains(DEFAULT_IMAGE_TITLE).should("exist").click()
-      cy.contains(":button", "Select").click()
-
-      cy.get("#altText").clear().type("Hello World")
-      cy.contains(":button", "Save").click()
-
-      cy.contains(`/images/${DEFAULT_IMAGE_TITLE}`)
-    })
-
-    it("Edit page (unlinked) should allow user to upload and add new image", () => {
-      cy.get(".image").click().wait(Interceptors.GET)
-      cy.contains(":button", "Add new").click()
-
-      cy.get("#file-upload").attachFile(ADDED_IMAGE_PATH)
-      cy.get("#name").clear().type(ADDED_IMAGE_TITLE)
-      cy.get("button")
-        .contains(/^Upload$/)
-        .click()
-        .wait(Interceptors.POST)
-
-      cy.get("#altText").clear().type("Hello World")
-      cy.contains(":button", "Save").click()
-
-      cy.contains(`/images/${ADDED_IMAGE_TITLE}`)
-    })
-
-    it("Edit page (unlinked) should allow user to upload and add new file", () => {
-      cy.get(".file").click().wait(Interceptors.GET)
-      cy.contains(":button", "Add new").click()
-
-      cy.get("#file-upload").attachFile(ADDED_FILE_PATH)
-      cy.get("#name").clear().type(ADDED_FILE_TITLE)
-      cy.get("button")
-        .contains(/^Upload$/)
-        .click()
-        .wait(Interceptors.POST)
-
-      cy.get("#altText").clear().type("Hello World")
-      cy.contains(":button", "Save").click()
-
-      cy.contains(`/files/${ADDED_FILE_TITLE}`)
-    })
-
-    it("Edit page (unlinked) should allow user to add existing file", () => {
-      cy.get(".file").click().wait(Interceptors.GET)
-      cy.contains(ADDED_FILE_TITLE).click()
-      cy.contains(":button", "Select").click()
-
-      cy.get("#altText").clear().type("Hello World")
-      cy.contains(":button", "Save").click()
-      cy.contains(`/files/${ADDED_FILE_TITLE}`)
-    })
-
-    it("Edit page (unlinked) should allow user to add link", () => {
-      cy.get(".link").click()
-
-      cy.get('input[id="text"]').type(LINK_TITLE)
-      cy.get('input[id="link"]').type(LINK_URL)
-      cy.contains(":button", "Save").click()
-
-      cy.contains(`[${LINK_TITLE}](${LINK_URL})`)
-    })
-
-    it("Edit page (unlinked) should allow users to add Instagram embed script", () => {
-      cy.get(".CodeMirror-scroll").type(TEST_INSTAGRAM_EMBED_SCRIPT)
-      cy.contains(":button", "Save").click()
-
-      // Asserts
-      // 1. Toast
-      cy.contains(SUCCESSFUL_EDIT_PAGE_TOAST)
-
-      // 2. Content is there even after refreshing
-      cy.reload()
-      cy.contains(TEST_SANITIZED_INSTAGRAM_EMBED_SCRIPT).should("exist")
-    })
-
-    it("Edit page (unlinked) should not allow users to add untrusted external scripts", () => {
-      cy.get(".CodeMirror-scroll").type(TEST_UNTRUSTED_SCRIPT)
-
-      // Asserts
-      // 1. Save button is disabled
-      cy.contains(":button", "Save").should("be.disabled")
-
-      // 2. CSP warning appears
-      cy.contains(
-        "Intended <script> content violates Content Security Policy and therefore could not be displayed. Isomer does not support display of any forbidden resources."
-      ).should("exist")
-
-      // 3. Content is not saved
-      cy.reload()
-      cy.contains(TEST_UNTRUSTED_SCRIPT).should("not.exist")
-    })
-
-    it("Edit page (unlinked) should not allow users to add inline scripts", () => {
-      cy.get(".CodeMirror-scroll").type(TEST_INLINE_SCRIPT)
-      cy.contains(":button", "Save").click()
-
-      // Asserts
-      // 1. XSS warning modal is shown
-      cy.contains(
-        "There is unauthorised JS detected in the following snippet"
-      ).should("exist")
-
-      // 2. Content is not saved
-      cy.contains(":button", "Acknowledge").click()
-      cy.reload()
-      cy.contains(TEST_INLINE_SCRIPT).should("not.exist")
-    })
-  })
-
-  describe("Edit collection page", () => {
-    const TEST_FOLDER_TITLE = "Test Edit Collection Category"
-    const TEST_FOLDER_TITLE_SLUGIFIED = slugifyCategory(TEST_FOLDER_TITLE)
-
-    const TEST_PAGE_TITLE = "Test Collection Page"
-    const TEST_PAGE_FILENAME = titleToPageFileName(TEST_PAGE_TITLE)
-    const TEST_PAGE_TITLE_ENCODED = encodeURIComponent(TEST_PAGE_FILENAME)
-
-    const TEST_PAGE_CONTENT = "lorem ipsum"
-
-    const DEFAULT_IMAGE_TITLE = "isomer-logo.svg"
-
-    const ADDED_FILE_TITLE = "singapore-pages.pdf"
-
-    const LINK_TITLE = "link"
-    const LINK_URL = "https://www.google.com"
-
-    before(() => {
-      cy.setGithubSessionDefaults()
-
-      // Set up test resource categories
-      // NOTE: We need to repeat the interceptor here as
-      // cypress resolves by type before nesting level.
-      // Hence, the alias here will not be resolved as the `before` hook
-      // will be resolved before the outer `beforeEach`
-      cy.setupDefaultInterceptors()
-
-      // Set up test collection
-      cy.visit(`/sites/${TEST_REPO_NAME}/workspace`)
-      cy.contains("a", "Create folder").should("exist").click({ force: true })
-      cy.get("input#newDirectoryName").clear().type(TEST_FOLDER_TITLE)
-      cy.contains("Next").click()
-      cy.contains("Skip").click()
-
-      cy.wait(Interceptors.POST)
-
-      // Set up test collection page
-      cy.visit(
-        `/sites/${TEST_REPO_NAME}/folders/${TEST_FOLDER_TITLE_SLUGIFIED}`
-      )
-      cy.contains("Create page").should("exist").click()
-      cy.get("#title").clear().type(TEST_PAGE_TITLE)
-      cy.contains("Save").click()
-
-      cy.wait(Interceptors.POST)
-    })
-
-    beforeEach(() => {
-      cy.visit(
-        `/sites/${TEST_REPO_NAME}/folders/${TEST_FOLDER_TITLE_SLUGIFIED}/editPage/${TEST_PAGE_TITLE_ENCODED}`
-      ).wait(Interceptors.GET)
-    })
-
-    it("Edit page (collection) should have correct colour", () => {
-      cy.get("#display-header").should(
-        "have.css",
-        "background-color",
-        PRIMARY_COLOUR
-      )
-    })
-
-    it("Edit page (collection) should have name of title", () => {
-      cy.contains(TEST_PAGE_TITLE)
-    })
-
-    it("Edit page (collection) should have third nav menu", () => {
-      cy.wait(Interceptors.GET)
-      // NOTE: Wait for the markdown editor + preview to load
-      cy.get(".spinner-border").should("not.exist")
-      cy.get("#sidenav")
-        .should("be.visible")
-        .contains(TEST_PAGE_TITLE)
-        .should("exist")
-    })
-
-    it("Edit page (collection) should provide a warning to users when navigating away", () => {
-      cy.get(".CodeMirror-scroll").type(TEST_PAGE_CONTENT)
-      cy.get('button[aria-label="Back to sites"]').click()
-
-      cy.contains("Warning")
-      cy.contains(":button", "No").click()
-
-      // Sanity check: still in edit collection pages and content still present
-      cy.url().should(
-        "include",
-        `${CMS_BASEURL}/sites/${TEST_REPO_NAME}/folders/${TEST_FOLDER_TITLE_SLUGIFIED}/editPage/${TEST_PAGE_TITLE_ENCODED}`
-      )
-      cy.contains(TEST_PAGE_CONTENT)
-
-      cy.get('button[aria-label="Back to sites"]').click()
-
-      cy.contains("Warning")
-      cy.contains(":button", "Yes").click()
-
-      // Assert: in Collection folder
-      cy.url().should(
-        "include",
-        `${CMS_BASEURL}/sites/${TEST_REPO_NAME}/folders/${TEST_FOLDER_TITLE_SLUGIFIED}`
-      )
-    })
-
-    it("Edit page (collection) should allow user to modify and save content", () => {
-      cy.get(".CodeMirror-scroll").type(TEST_PAGE_CONTENT)
-      cy.contains(":button", "Save").click()
-
-      // Asserts
-      // 1. Toast
-      cy.contains(SUCCESSFUL_EDIT_PAGE_TOAST)
-
-      // 2. Content is there even after refreshing
-      cy.reload()
-      cy.contains(TEST_PAGE_CONTENT).should("exist")
-    })
-
-    it("Edit page (collection) should allow user to add existing image", () => {
-      // NOTE: Multiple GET requests are fired off and hence, unable to use default GET to match
-      cy.intercept("**/images").as("getImages")
-      cy.get(".image").click().wait("@getImages")
-      cy.contains(DEFAULT_IMAGE_TITLE).click()
-      cy.contains(":button", "Select").click()
-
-      cy.get("#altText").clear().type("Hello World")
-      cy.contains(":button", "Save").click()
-      cy.contains(`/images/${DEFAULT_IMAGE_TITLE}`)
-    })
-
-    it("Edit page (collection) should allow user to add existing file", () => {
-      cy.get(".file").click()
-      cy.contains(ADDED_FILE_TITLE).click()
-      cy.contains(":button", "Select").click()
-
-      cy.get("#altText").clear().type("Hello World")
-      cy.contains(":button", "Save").click()
-      cy.contains(`/files/${ADDED_FILE_TITLE}`)
-    })
-
-    it("Edit page (collection) should allow user to add link", () => {
-      cy.get(".link").click()
-
-      cy.get('input[id="text"]').type(LINK_TITLE)
-      cy.get('input[id="link"]').type(LINK_URL)
-      cy.contains(":button", "Save").click()
-
-      cy.contains(`[${LINK_TITLE}](${LINK_URL})`)
-    })
-  })
-
-  describe("Edit resource page", () => {
-    const TEST_CATEGORY = "Test Edit Resource Category"
-    const TEST_CATEGORY_SLUGIFIED = slugifyCategory(TEST_CATEGORY)
-    const TEST_RESOURCE_ROOM = "resources"
-    const TEST_PAGE_TITLE = "Test Resource Page"
-    const TEST_PAGE_DATE = "2021-05-17"
-
-    before(() => {
-      cy.setDefaultSettings()
-
-      // NOTE: We need to repeat the interceptor here as
-      // cypress resolves by type before nesting level.
-      // Hence, the alias here will not be resolved as the `before` hook
-      // will be resolved before the outer `beforeEach`
-      cy.setupDefaultInterceptors()
-
-      // Set up test resource categories
-      // Set up test resource category
-      cy.visit(
-        `/sites/${TEST_REPO_NAME}/resourceRoom/${TEST_RESOURCE_ROOM}`
-      ).wait(Interceptors.GET)
-      cy.contains("Create category").should("be.visible").click()
-      cy.get('input[placeholder="Title"]').type(TEST_CATEGORY)
-      cy.contains("Next").click()
-
-      cy.wait(Interceptors.POST)
-
-      // Set up test resource page
-      cy.visit(
-        `${CMS_BASEURL}/sites/${TEST_REPO_NAME}/resourceRoom/${TEST_RESOURCE_ROOM}/resourceCategory/${TEST_CATEGORY_SLUGIFIED}`
-      )
-      cy.contains("Create page")
-        .should("be.visible")
-        .click()
-        .wait(Interceptors.GET)
-
-      cy.get('input[id="title"]').clear().type(TEST_PAGE_TITLE)
-      cy.get('input[id="date"]').clear().type(TEST_PAGE_DATE)
-      cy.contains("Save").click().wait(Interceptors.POST)
-    })
-
-    beforeEach(() => {
-      cy.visit(
-        `${CMS_BASEURL}/sites/${TEST_REPO_NAME}/resourceRoom/${TEST_RESOURCE_ROOM}/resourceCategory/${TEST_CATEGORY_SLUGIFIED}/editPage/${generateResourceFileName(
-          encodeURIComponent(TEST_PAGE_TITLE),
-          TEST_PAGE_DATE,
-          true
-        )}`
-      )
-      cy.contains("Verify").should("not.exist")
-    })
-
-    it("Edit page (resource) should have correct colour", () => {
-      cy.get("#display-header").should(
-        "have.css",
-        "background-color",
-        SECONDARY_COLOUR
-      )
-    })
-  })
-})
diff --git a/cypress/e2e/folders.spec.ts b/cypress/e2e/folders.spec.ts
index 71bc96cd8..375c3bc77 100644
--- a/cypress/e2e/folders.spec.ts
+++ b/cypress/e2e/folders.spec.ts
@@ -1,5 +1,7 @@
 import slugify from "slugify"
 
+import { SUCCESSFUL_EDIT_PAGE_TOAST } from "hooks/pageHooks/useUpdatePageHook"
+
 import { deslugifyDirectory } from "utils/deslugify"
 import { titleToPageFileName, pageFileNameToTitle } from "utils/fileNameUtils"
 
@@ -8,7 +10,6 @@ import {
   Interceptors,
   TEST_REPO_NAME,
 } from "../fixtures/constants"
-import { SUCCESSFUL_EDIT_PAGE_TOAST } from "../fixtures/messages"
 
 describe("Folders flow", () => {
   const DEFAULT_REPO_FOLDER_NAME = "default"
diff --git a/cypress/e2e/resourceCategory.spec.ts b/cypress/e2e/resourceCategory.spec.ts
index 21a495f59..2076c601a 100644
--- a/cypress/e2e/resourceCategory.spec.ts
+++ b/cypress/e2e/resourceCategory.spec.ts
@@ -1,4 +1,6 @@
 import "cypress-file-upload"
+import { SUCCESSFUL_EDIT_PAGE_TOAST } from "hooks/pageHooks/useUpdatePageHook"
+
 import { generateResourceFileName, slugifyCategory } from "utils/fileNameUtils"
 
 import {
@@ -6,7 +8,6 @@ import {
   TEST_REPO_NAME,
   Interceptors,
 } from "../fixtures/constants"
-import { SUCCESSFUL_EDIT_PAGE_TOAST } from "../fixtures/messages"
 
 describe("Resource category page", () => {
   const TEST_RESOURCE_ROOM_NAME = "resources"
diff --git a/cypress/e2e/settings.spec.ts b/cypress/e2e/settings.spec.ts
index 1fe1e1c1c..d85935329 100644
--- a/cypress/e2e/settings.spec.ts
+++ b/cypress/e2e/settings.spec.ts
@@ -245,6 +245,131 @@ describe("Settings page", () => {
     cy.get("@showReach").should("not.be.checked")
   })
 
+  // Skipping privatisation tests - need to configur separately for email and github repos (github repos have no password settings)
+  it.skip("Should toggle Privatise staging site button and automatically generate a password", () => {
+    // Arrange
+    // NOTE: Initial state is privatise staging off
+    cy.contains("Privatise staging site")
+      .parent()
+      .parent()
+      .find("input")
+      .as("privatiseStaging")
+    cy.get("@privatiseStaging").should("not.be.checked")
+
+    // Act
+    // Trigger click event
+    // NOTE: We have to force as chakra uses an invisible input as a checkbox
+    cy.get("@privatiseStaging")
+      .check({ force: true, timeout: 0 })
+      .then(() => {
+        // Checking within then because of wonky focus preventing the field from being populated
+        cy.contains("You should change this every 90 days")
+          .parent()
+          .next()
+          .find("input")
+          .as("passwordInput")
+        cy.wait(1000)
+        cy.get("@passwordInput").should("have.length.gt", 0)
+        cy.saveSettings()
+      })
+
+    // Assert
+    cy.get("@privatiseStaging").should("be.checked")
+    cy.contains("Username").parent().next().as("usernameInput")
+    cy.get("@usernameInput").should("be.disabled")
+  })
+
+  it.skip("Should regenerate a password if password field is emptied and privatise button toggled again", () => {
+    // Arrange
+    cy.contains("Privatise staging site")
+      .parent()
+      .parent()
+      .find("input")
+      .as("privatiseStaging")
+    cy.get("@privatiseStaging").should("be.checked")
+    cy.contains("You should change this every 90 days")
+      .parent()
+      .next()
+      .find("input")
+      .as("passwordInput")
+    cy.get("@passwordInput").clear()
+
+    // Act
+    // Trigger click event
+    // NOTE: We have to force as chakra uses an invisible input as a checkbox
+    cy.get("@privatiseStaging").uncheck({ force: true })
+    cy.get("@privatiseStaging")
+      .check({ force: true })
+      .then(() => {
+        // Assert
+        cy.contains("You should change this every 90 days")
+          .parent()
+          .next()
+          .find("input")
+          .as("passwordInput")
+        cy.wait(1000)
+        cy.get("@passwordInput").should("have.length.gt", 0)
+      })
+  })
+
+  it.skip("Should disallow passwords that do not match the criteria", () => {
+    // Arrange
+    const shortPassword = "1!Aa"
+    const noSymbol = "Blahblahblahblahblah1"
+    const noNumber = "Blahblahblahblahblah!"
+    const noCaps = "blahblahblahblahblah1!"
+    const noLower = "BLAHBLAHBLAHBLAHBLAH1!"
+    const expectedError =
+      "Password must be at least 12 characters long, and contain upper and lower case letters, numbers, and special characters"
+    cy.contains("Privatise staging site")
+      .parent()
+      .next()
+      .find("input")
+      .as("privatiseStaging")
+    cy.get("@privatiseStaging").should("be.checked")
+    cy.contains("You should change this every 90 days")
+      .parent()
+      .next()
+      .find("input")
+      .as("passwordInput")
+
+    // Assert
+    cy.get("@passwordInput").clear().type(shortPassword).blur()
+    cy.contains(expectedError).should("exist")
+    cy.get("@passwordInput").clear().type(noSymbol).blur()
+    cy.contains(expectedError).should("exist")
+    cy.get("@passwordInput").clear().type(noNumber).blur()
+    cy.contains(expectedError).should("exist")
+    cy.get("@passwordInput").clear().type(noCaps).blur()
+    cy.contains(expectedError).should("exist")
+    cy.get("@passwordInput").clear().type(noLower).blur()
+    cy.contains(expectedError).should("exist")
+  })
+
+  it.skip("Should be able to turn off password", () => {
+    // Arrange
+    cy.contains("Privatise staging site")
+      .parent()
+      .parent()
+      .find("input")
+      .as("privatiseStaging")
+    cy.get("@privatiseStaging").should("be.checked")
+    cy.contains("You should change this every 90 days")
+      .parent()
+      .next()
+      .find("input")
+      .as("passwordInput")
+
+    // Act
+    // Trigger click event
+    // NOTE: We have to force as chakra uses an invisible input as a checkbox
+    cy.get("@privatiseStaging").uncheck({ force: true })
+    cy.saveSettings()
+
+    // Assert
+    cy.get("@privatiseStaging").should("not.be.checked")
+  })
+
   it("Should change Logos and have change reflect correctly on save", () => {
     cy.get("button:contains(Upload Image)").each((el, index) => {
       cy.wrap(el).click()
diff --git a/cypress/e2e/sites.spec.ts b/cypress/e2e/sites.spec.ts
deleted file mode 100644
index 2136850a4..000000000
--- a/cypress/e2e/sites.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  CMS_BASEURL,
-  Interceptors,
-  TEST_REPO_NAME,
-} from "../fixtures/constants"
-
-describe("Sites page", () => {
-  beforeEach(() => {
-    cy.setGithubSessionDefaults()
-    cy.setupDefaultInterceptors()
-  })
-
-  it("Sites page should have sites header", () => {
-    cy.visit(`${CMS_BASEURL}/sites`).wait(Interceptors.GET)
-    cy.contains("Get help").should("exist")
-  })
-
-  it("Sites page should allow user to click into a test site repo", () => {
-    cy.visit(`${CMS_BASEURL}/sites`)
-      // NOTE: `/whoami` and `/sites`
-      .wait(Interceptors.GET)
-      .wait(Interceptors.GET)
-
-    cy.contains("Loading sites").should("not.exist")
-
-    cy.contains(TEST_REPO_NAME).click()
-    cy.url().should(
-      "include",
-      `${CMS_BASEURL}/sites/${TEST_REPO_NAME}/workspace`
-    )
-  })
-})
diff --git a/cypress/e2e/workspace.spec.ts b/cypress/e2e/workspace.spec.ts
index 1d399fc07..f1270bf17 100644
--- a/cypress/e2e/workspace.spec.ts
+++ b/cypress/e2e/workspace.spec.ts
@@ -1,3 +1,5 @@
+import { SUCCESSFUL_EDIT_PAGE_TOAST } from "hooks/pageHooks/useUpdatePageHook"
+
 import { deslugifyDirectory } from "utils/deslugify"
 import { slugifyCategory, titleToPageFileName } from "utils/fileNameUtils"
 
@@ -6,7 +8,6 @@ import {
   TEST_REPO_NAME,
   Interceptors,
 } from "../fixtures/constants"
-import { SUCCESSFUL_EDIT_PAGE_TOAST } from "../fixtures/messages"
 
 const DATA_LOAD_ASSERTION_TEXT = "You can link folders to your navigation bar."
 
diff --git a/cypress/fixtures/messages.ts b/cypress/fixtures/messages.ts
deleted file mode 100644
index 116a1e8de..000000000
--- a/cypress/fixtures/messages.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const SUCCESSFUL_EDIT_PAGE_TOAST =
-  "Changes saved. See a preview on Staging, or request a Review for them to be published."
diff --git a/cypress/support/settings.ts b/cypress/support/settings.ts
index 7c3e4db9f..489741b41 100644
--- a/cypress/support/settings.ts
+++ b/cypress/support/settings.ts
@@ -6,15 +6,29 @@ import {
 
 Cypress.Commands.add("saveSettings", () => {
   cy.intercept("POST", `/v2/sites/${TEST_REPO_NAME}/settings`).as("awaitSave")
+  // cy.intercept("POST", `/v2/sites/${TEST_REPO_NAME}/settings/repo-password`).as(
+  //   "awaitSavePassword"
+  // )
   cy.contains("button", "Save").click()
   cy.wait("@awaitSave")
+  // cy.wait(["@awaitSavePassword", "@awaitSave"], {
+  //   timeout: 10000,
+  //   requestTimeout: 10000,
+  // })
 })
 
 // Reusable visit command
 Cypress.Commands.add("visitLoadSettings", (siteName, sitePath) => {
   cy.intercept("GET", `/v2/sites/${siteName}/settings`).as("awaitSettings")
+  // cy.intercept("GET", `/v2/sites/${siteName}/settings/repo-password`).as(
+  //   "awaitPassword"
+  // )
   cy.visit(sitePath)
-  cy.wait("@awaitSettings")
+  cy.wait("@awaitSave")
+  // cy.wait(["@awaitPassword", "@awaitSettings"], {
+  //   timeout: 10000,
+  //   requestTimeout: 10000,
+  // })
 })
 
 Cypress.Commands.add("setDefaultSettings", () => {
diff --git a/e2e/api/context.api.ts b/e2e/api/context.api.ts
new file mode 100644
index 000000000..814147185
--- /dev/null
+++ b/e2e/api/context.api.ts
@@ -0,0 +1,12 @@
+import { APIRequestContext, request } from "@playwright/test"
+
+export const getApi = async (
+  storageState: Parameters<typeof request.newContext>[0]["storageState"]
+): Promise<APIRequestContext> => {
+  const req = await request.newContext({
+    baseURL: process.env.CYPRESS_BACKEND_URL,
+    storageState,
+  })
+
+  return req
+}
diff --git a/e2e/dashboard.spec.ts b/e2e/dashboard.spec.ts
new file mode 100644
index 000000000..e301ee468
--- /dev/null
+++ b/e2e/dashboard.spec.ts
@@ -0,0 +1,143 @@
+import { test, expect, Page } from "@playwright/test"
+
+import {
+  E2E_EMAIL_REPO_MASTER_LINK,
+  E2E_EMAIL_REPO_STAGING_LINK,
+  E2E_EMAIL_TEST_SITE,
+  ISOMER_GUIDE_LINK,
+} from "./fixtures/constants"
+import { setEmailSessionDefaults } from "./utils/session"
+
+const REVIEW_MODAL_SUBTITLE =
+  "An Admin needs to review and approve your changes before they can be published"
+
+const REVIEW_REQUEST_ALERT_MESSAGE =
+  "There’s a Review request pending approval. Any changes you make now will be added to the existing Review request, and published with the changes in it."
+
+const getReviewRequestButton = (page: Page) => {
+  const button = page.locator("button", { hasText: /Request a Review/ }).first()
+
+  expect(button).toBeVisible()
+
+  return button
+}
+
+test.describe("dashboard flow", () => {
+  test.beforeEach(async ({ page, context }) => {
+    setEmailSessionDefaults(context, "Email admin")
+    await page.goto(`/sites/${E2E_EMAIL_TEST_SITE.repo}/dashboard`)
+    expect(page.getByText(E2E_EMAIL_TEST_SITE.repo)).toBeVisible()
+    // TODO: Close review requests
+    // closeReviewRequests()
+  })
+
+  test('should open the staging site on click of the "Open staging" button', async ({
+    page,
+  }) => {
+    // Act
+    const link = page.getByRole("link", {
+      name: /Open staging/,
+    })
+
+    // Assert
+    await expect(link).toHaveAttribute("href", E2E_EMAIL_REPO_STAGING_LINK)
+    await expect(link).toHaveAttribute("target", "_blank")
+  })
+
+  test('should open the "Request a Review" modal on click of the "Request a Review" button', async ({
+    page,
+  }) => {
+    // Act
+    const button = await getReviewRequestButton(page)
+    await button.click()
+
+    // Assert
+    await expect(page.getByText(REVIEW_MODAL_SUBTITLE).first()).toBeVisible()
+  })
+
+  test("should be able to navigate to the staging site using the dropdown button", async ({
+    page,
+  }) => {
+    // Act
+    const dropdown = page.getByLabel("Select options")
+    await dropdown.click()
+    const stagingLink = page.getByRole("menuitem", {
+      name: "Open staging site",
+    })
+
+    // Assert
+    await expect(stagingLink).toBeVisible()
+    await expect(stagingLink).toHaveAttribute(
+      "href",
+      E2E_EMAIL_REPO_STAGING_LINK
+    )
+    await expect(stagingLink).toHaveAttribute("target", "_blank")
+  })
+
+  test("should be able to navigate to the production site using the dropdown button", async ({
+    page,
+  }) => {
+    // Act
+    const dropdown = page.getByLabel("Select options")
+    await dropdown.click()
+    const prodLink = page.getByRole("menuitem", {
+      name: "Visit live site",
+    })
+
+    // Assert
+    await expect(prodLink).toBeVisible()
+    await expect(prodLink).toHaveAttribute("href", E2E_EMAIL_REPO_MASTER_LINK)
+    await expect(prodLink).toHaveAttribute("target", "_blank")
+  })
+
+  test('should navigate to the isomer guide on click of the "Get help" button', async ({
+    page,
+  }) => {
+    // Act
+    const helpLink = page.getByRole("link", { name: "Get help" })
+
+    await expect(helpLink).toBeVisible()
+    await expect(helpLink).toHaveAttribute("href", ISOMER_GUIDE_LINK)
+    await expect(helpLink).toHaveAttribute("target", "_blank")
+  })
+
+  test("should navigate to the settings page when manage site settings is clicked", async ({
+    page,
+  }) => {
+    // Act
+    // NOTE: Even though there are 2 visually identical links with the text "Manage",
+    // the first one is actually a button so this will work.
+    const settingsLink = await page.getByRole("link", { name: "Manage" })
+
+    await expect(settingsLink).toHaveAttribute(
+      "href",
+      `/sites/${E2E_EMAIL_TEST_SITE.repo}/settings`
+    )
+    await settingsLink.click()
+
+    // Assert
+    await expect(
+      page.getByRole("heading", { name: "Site settings" })
+    ).toBeVisible()
+  })
+
+  test("should navigate to the workspace when edit site is clicked", async ({
+    page,
+  }) => {
+    // Act
+    const editSiteButton = page.getByRole("link", {
+      name: "Edit site",
+    })
+    await expect(editSiteButton).toBeVisible()
+    await editSiteButton.click()
+
+    // Assert
+    await expect(
+      page.getByRole("heading", { name: "My Workspace" })
+    ).toBeVisible()
+    // NOTE: check that the locator matches nothing
+    await expect(
+      await page.getByText(REVIEW_REQUEST_ALERT_MESSAGE).count()
+    ).toEqual(0)
+  })
+})
diff --git a/e2e/editPage.spec.ts b/e2e/editPage.spec.ts
new file mode 100644
index 000000000..98bcb1f8d
--- /dev/null
+++ b/e2e/editPage.spec.ts
@@ -0,0 +1,627 @@
+import { test, expect } from "@playwright/test"
+
+import {
+  slugifyCategory,
+  generateResourceFileName,
+  titleToPageFileName,
+} from "utils/fileNameUtils"
+
+import { getApi } from "./api/context.api"
+import {
+  BASE_SEO_LINK,
+  CMS_BASEURL,
+  E2E_EMAIL_TEST_SITE,
+  TEST_REPO_NAME,
+} from "./fixtures/constants"
+import { SUCCESSFUL_EDIT_PAGE_TOAST } from "./fixtures/messages"
+import { setEmailSessionDefaults } from "./utils/session"
+
+// Constants
+const PRIMARY_COLOUR = "rgb(255, 0, 0)"
+
+test.describe("editPage.spec", () => {
+  test.beforeEach(({ context }) => {
+    setEmailSessionDefaults(context, "Email admin")
+  })
+
+  const BASE_SETTINGS = {
+    title: "Title",
+    description: "An Isomer site of the Singapore Government",
+    favicon: "/images/favicon-isomer.ico",
+    shareicon: "/images/isomer-logo.svg",
+    google_analytics_ga4: "",
+    is_government: false,
+    contact_us: "/contact-us/",
+    feedback: "",
+    faq: "/faq/",
+    show_reach: true,
+    logo: "/images/isomer-logo.svg",
+    url: BASE_SEO_LINK,
+    social_media: {
+      facebook: "https://www.facebook.com/YourFBPage",
+      linkedin: "https://www.linkedin.com/company/YourAgency",
+      twitter: "https://www.twitter.com/YourTwitter",
+      youtube: "https://www.youtube.com/YourYoutube",
+      instagram: "https://www.instagram.com/your.insta/",
+      telegram: "",
+      tiktok: "",
+    },
+    colors: {
+      "primary-color": PRIMARY_COLOUR,
+      "secondary-color": SECONDARY_COLOUR,
+      "media-colors": [
+        { title: "media-color-one", color: "#ff0000" },
+        { title: "media-color-two", color: "#ff0000" },
+        { title: "media-color-three", color: "#ff0000" },
+        { title: "media-color-four", color: "#ff0000" },
+        { title: "media-color-five", color: "#ff0000" },
+      ],
+    },
+    "facebook-pixel": "",
+    "linkedin-insights": "",
+  }
+
+  test.describe("Edit unlinked page", () => {
+    const TEST_PAGE_CONTENT = "lorem ipsum"
+    const TEST_INSTAGRAM_EMBED_SCRIPT =
+      '<script async src="//www.instagram.com/embed.js"></script>'
+    const TEST_SANITIZED_INSTAGRAM_EMBED_SCRIPT =
+      '<script async="" src="//www.instagram.com/embed.js"></script>'
+    const TEST_UNTRUSTED_SCRIPT =
+      '<script src="https://www.example.com/evil.js"></script>'
+    const TEST_INLINE_SCRIPT = '<script>alert("hello")</script>'
+
+    const TEST_UNLINKED_PAGE_TITLE = "Test Unlinked Page"
+    const TEST_UNLINKED_PAGE_FILENAME = titleToPageFileName(
+      TEST_UNLINKED_PAGE_TITLE
+    )
+    const TEST_PAGE_TITLE_ENCODED = encodeURIComponent(
+      TEST_UNLINKED_PAGE_FILENAME
+    )
+
+    const DEFAULT_IMAGE_TITLE = "isomer-logo.svg"
+    const ADDED_IMAGE_TITLE = "balloon"
+    const ADDED_IMAGE_PATH = "images/balloon.png"
+
+    const ADDED_FILE_TITLE = "singapore-pages"
+    const ADDED_FILE_PATH = "files/singapore.pdf"
+
+    const LINK_TITLE = "link"
+    const LINK_URL = "https://www.google.com"
+
+    const UNLINKED_PAGE = {
+      frontMatter: {
+        title: TEST_UNLINKED_PAGE_TITLE,
+        permalink: "/permalink",
+        variant: "tiptap",
+        description: "",
+      },
+    }
+
+    test.beforeEach(async ({ page, context }) => {
+      setEmailSessionDefaults(context, "Email admin")
+      const api = await getApi(await context.storageState())
+      await api.post("v2/sites/e2e-email-test-repo/pages/pages", {
+        data: {
+          content: UNLINKED_PAGE,
+          newFileName: TEST_UNLINKED_PAGE_FILENAME,
+        },
+      })
+      await page.goto(
+        `/sites/${E2E_EMAIL_TEST_SITE.repo}/editPage/${TEST_PAGE_TITLE_ENCODED}`
+      )
+    })
+
+    test("Edit page (unlinked) should have correct colour", async ({
+      page,
+      context,
+    }) => {
+      // Arrange
+      const api = await getApi(await context.storageState())
+      const header = page.locator("#display-header")
+
+      // Act
+      await api.post("v2/sites/e2e-email-test-repo/settings", {
+        data: BASE_SETTINGS,
+      })
+      page.reload()
+
+      // Assert
+      await expect(header).toHaveCSS("background-color", PRIMARY_COLOUR)
+    })
+
+    test("Edit page (unlinked) should have name of title", async ({ page }) => {
+      // Act
+      const title = page.getByRole("heading", {
+        name: TEST_UNLINKED_PAGE_TITLE,
+      })
+
+      // Assert
+      // NOTE: At least 1 heading
+      await expect(await title.count()).toBeGreaterThan(0)
+    })
+
+    test("Edit page (unlinked) should provide a warning to users when navigating away", async ({
+      page,
+    }) => {
+      // Arrange
+      await page.getByRole("textbox").fill(TEST_PAGE_CONTENT)
+      const backButton = page.getByRole("button", { name: "Back to sites" })
+      await backButton.click()
+
+      // Act
+      const warningModal = page.getByText("Warning")
+      await expect(warningModal).toBeVisible()
+      await page.getByRole("button", { name: "No" }).click()
+
+      // Sanity check: still in unlinked pages and content still present
+      await expect(page.url()).toContain(
+        `${E2E_EMAIL_TEST_SITE.repo}/editPage/${TEST_PAGE_TITLE_ENCODED}`
+      )
+      await expect(page.getByText(TEST_PAGE_CONTENT)).toBeVisible()
+
+      await backButton.click()
+      await expect(warningModal).toBeVisible()
+      await page.getByRole("button", { name: "Yes" }).click()
+
+      // Assert
+      await expect(page.url()).toContain(
+        `${E2E_EMAIL_TEST_SITE.repo}/workspace`
+      )
+    })
+
+    test("Edit page (unlinked) should allow user to modify and save content", async ({
+      page,
+    }) => {
+      // Arrange
+      await page.getByRole("textbox").fill(TEST_PAGE_CONTENT)
+      const saveButton = page.getByRole("button", { name: "Save" })
+
+      // Act
+      await saveButton.click()
+
+      // Assert
+      // 1. Toast
+      await expect(page.getByText(SUCCESSFUL_EDIT_PAGE_TOAST)).toBeVisible()
+
+      // 2. Content is there even after refreshing
+      await page.reload()
+      await expect(page.getByText(TEST_PAGE_CONTENT)).toBeVisible()
+    })
+
+    test("Edit page (unlinked) should allow user to add existing image", async ({
+      page,
+    }) => {
+      // Arrange
+      const addImageButton = page.getByRole("button", {
+        name: "Insert Image",
+      })
+      await addImageButton.click()
+      const defaultImageButton = page.getByRole("button").filter({
+        hasText: DEFAULT_IMAGE_TITLE,
+      })
+      await defaultImageButton.click()
+
+      // Act
+      await page.getByRole("button", { name: "Add image to page" }).click()
+      await page.getByPlaceholder("Alt text").fill("Hello World")
+      await page.locator("form").getByRole("button", { name: "Save" }).click()
+
+      await expect(
+        page.getByText(`/images/${DEFAULT_IMAGE_TITLE}`)
+      ).toBeVisible()
+    })
+
+    // TODO: Fix this test so that it does not depend on the previous test to create the dependency.
+    test("Edit page (unlinked) should allow user to upload and add new image", async ({
+      page,
+    }) => {
+      // Act
+      const addImageButton = page.getByRole("button", {
+        name: "Insert Image",
+      })
+      await addImageButton.click()
+      const uploadNewImageButton = page.getByRole("button", {
+        name: "Upload new image",
+      })
+      await uploadNewImageButton.click()
+      const fileChooserPromise = page.waitForEvent("filechooser")
+      await page
+        .getByRole("button", { name: "Choose files or drag and drop" })
+        .click()
+      const fileChooser = await fileChooserPromise
+      await fileChooser.setFiles(ADDED_IMAGE_PATH)
+      const fileUploadPromise = page.waitForResponse((res) =>
+        // NOTE: Not using a string/path here cos it gets merged
+        // as we have provided a `baseURL` (our frontend URL) for playwright.
+        res.url().includes("media/images/pages")
+      )
+      await page.getByRole("button", { name: "Upload" }).click()
+      await fileUploadPromise
+
+      // Assert
+      await expect(
+        page.getByText("Successfully uploaded 1 image")
+      ).toBeVisible()
+      await expect(page.getByText(`/images/${ADDED_IMAGE_TITLE}`)).toBeVisible()
+    })
+
+    test("Edit page (unlinked) should allow user to upload and add new file", async ({
+      page,
+    }) => {
+      // Act
+      const addFileButton = page.getByRole("button", {
+        name: "Insert File",
+      })
+      await addFileButton.click()
+      const uploadNewFileButton = page.getByRole("button", {
+        name: "Upload new file",
+      })
+      await uploadNewFileButton.click()
+      const fileChooserPromise = page.waitForEvent("filechooser")
+      await page
+        .getByRole("button", { name: "Choose files or drag and drop" })
+        .click()
+      const fileChooser = await fileChooserPromise
+      await fileChooser.setFiles(ADDED_FILE_PATH)
+      const fileUploadPromise = page.waitForResponse((res) =>
+        // NOTE: Not using a string/path here cos it gets merged
+        // as we have provided a `baseURL` (our frontend URL) for playwright.
+        res.url().includes("media/files/pages")
+      )
+      await page.getByRole("button", { name: "Upload" }).click()
+      await fileUploadPromise
+
+      // Assert
+      await expect(page.getByText("Successfully uploaded 1 file")).toBeVisible()
+      await expect(page.getByText(`/images/${ADDED_FILE_TITLE}`)).toBeVisible()
+    })
+
+    // TODO: Fix this test so that it does not depend on the previous test to create the dependency.
+    test("Edit page (unlinked) should allow user to add existing file", async ({
+      page,
+    }) => {
+      // NOTE: This test has an implicit dependency on the previous test
+      // We might wish to squash the two tests together in the future.
+      // Arrange
+      const addFileButton = page.getByRole("button", {
+        name: "Insert File",
+      })
+      await addFileButton.click()
+      const defaultFileButton = page.getByRole("button").filter({
+        hasText: ADDED_FILE_TITLE,
+      })
+      await defaultFileButton.click()
+
+      // Act
+      await page.getByRole("button", { name: "Add file to page" }).click()
+      await page.getByPlaceholder("Alt text").fill("Hello World")
+      await page.locator("form").getByRole("button", { name: "Save" }).click()
+
+      await expect(page.getByText(`/files/${ADDED_FILE_TITLE}`)).toBeVisible()
+    })
+
+    test("Edit page (unlinked) should allow user to add link", async ({
+      page,
+    }) => {
+      // Act
+      await page.getByRole("button", { name: "Insert Link" }).click()
+
+      await page.getByPlaceholder("Text").fill(LINK_TITLE)
+      await page.getByPlaceholder("Link").fill(LINK_URL)
+
+      await page.getByRole("button", { name: "Save" }).click()
+
+      // Assert
+      page.getByText(`[${LINK_TITLE}](${LINK_URL})`)
+    })
+
+    test("Edit page (unlinked) should allow users to add Instagram embed script", async ({
+      page,
+    }) => {
+      // Arrange
+      await page.getByRole("textbox").fill(TEST_INSTAGRAM_EMBED_SCRIPT)
+
+      // Act
+      await page.getByRole("button", { name: "Save" }).click()
+
+      // Assert
+      // 1. Toast
+      await expect(page.getByText(SUCCESSFUL_EDIT_PAGE_TOAST)).toBeVisible()
+
+      // 2. Content is there even after refreshing
+      await page.reload()
+      await expect(
+        page.getByText(TEST_SANITIZED_INSTAGRAM_EMBED_SCRIPT)
+      ).toBeVisible()
+    })
+
+    // TODO: Add functionality to prevent users from adding
+    // untrusted external scripts
+    test.skip("Edit page (unlinked) should not allow users to add untrusted external scripts", async ({
+      page,
+    }) => {
+      // NOTE: This test will fail at present
+      // Arrange
+      const PAGE_VIOLATION_WARNING =
+        "Intended <script> content violates Content Security Policy and therefore could not be displayed. Isomer does not support display of any forbidden resources."
+
+      // Act
+      await page.getByRole("textbox").fill(TEST_UNTRUSTED_SCRIPT)
+
+      // Assert
+      // 1. Save button is disabled
+      expect(page.getByRole("button", { name: "Save" })).toBeDisabled()
+      // 2. CSP warning appears
+      expect(page.getByText(PAGE_VIOLATION_WARNING)).toBeVisible()
+      // 3. Content is not saved
+      await page.reload()
+      await expect(await page.getByText(TEST_UNTRUSTED_SCRIPT).count()).toEqual(
+        0
+      )
+    })
+
+    // TODO: Add functionality to prevent users from adding
+    // inline scripts
+    test.skip("Edit page (unlinked) should not allow users to add inline scripts", async ({
+      page,
+    }) => {
+      // NOTE: THis test fails - we can still add inline scripts.
+      // Arrange
+      await page.getByRole("textbox").fill(TEST_INLINE_SCRIPT)
+
+      // Act
+      await page.getByRole("button", { name: "Save" }).click()
+
+      // Asserts
+      // 1. XSS warning modal is shown
+      await expect(
+        page.getByText(
+          "There is unauthorised JS detected in the following snippet"
+        )
+      ).toBeVisible()
+      // 2. Content is not saved
+      await page.getByRole("button", { name: "Acknowledge" }).click()
+      await page.reload()
+      await expect(await page.getByText(TEST_INLINE_SCRIPT).count()).toEqual(0)
+    })
+  })
+
+  test.describe("Edit collection page", () => {
+    const TEST_FOLDER_TITLE = "Test Edit Collection Category"
+    const TEST_FOLDER_TITLE_SLUGIFIED = slugifyCategory(TEST_FOLDER_TITLE)
+
+    const TEST_PAGE_TITLE = "Test Collection Page"
+    const TEST_PAGE_FILENAME = titleToPageFileName(TEST_PAGE_TITLE)
+    const TEST_PAGE_TITLE_ENCODED = encodeURIComponent(TEST_PAGE_FILENAME)
+
+    const TEST_PAGE_CONTENT = "lorem ipsum"
+
+    const DEFAULT_IMAGE_TITLE = "isomer-logo.svg"
+
+    const ADDED_FILE_TITLE = "singapore-pages.pdf"
+
+    const LINK_TITLE = "link"
+    const LINK_URL = "https://www.google.com"
+
+    const COLLECTION_PAGE = {
+      frontMatter: {
+        title: TEST_PAGE_TITLE,
+        permalink: "/permalink",
+        variant: "tiptap",
+        description: "",
+      },
+    }
+
+    test.beforeEach(async ({ page, context }) => {
+      setEmailSessionDefaults(context, "Email admin")
+      const api = await getApi(await context.storageState())
+      await api.post(`v2/sites/${E2E_EMAIL_TEST_SITE.repo}/collections`, {
+        data: { items: [], newDirectoryName: TEST_FOLDER_TITLE },
+      })
+      await api.post(
+        `/v2/sites/${E2E_EMAIL_TEST_SITE.repo}/collections/${TEST_FOLDER_TITLE_SLUGIFIED}/pages`,
+        {
+          data: {
+            content: COLLECTION_PAGE,
+            newFileName: TEST_PAGE_FILENAME,
+          },
+        }
+      )
+      await page.goto(
+        `/sites/${E2E_EMAIL_TEST_SITE.repo}/folders/${TEST_FOLDER_TITLE_SLUGIFIED}/editPage/${TEST_PAGE_FILENAME}`
+      )
+    })
+
+    test("Edit page (collection) should be created correctly", async ({
+      page,
+    }) => {
+      // Arrange
+      await page.waitForLoadState("domcontentloaded")
+
+      // Act
+      const displayHeader = page.locator("#display-header")
+      const header = page.getByRole("heading", { name: TEST_PAGE_TITLE })
+      const sidenav = page.locator("#sidenav")
+
+      // Assert
+      await expect(displayHeader).toHaveCSS("background-color", PRIMARY_COLOUR)
+      await expect(header).toBeVisible()
+      await expect(sidenav).toBeVisible()
+      await expect(sidenav.getByText(TEST_PAGE_TITLE)).toBeVisible()
+    })
+
+    test("Edit page (collection) should provide a warning to users when navigating away", async ({
+      page,
+    }) => {
+      // Arrange
+      await page.getByRole("textbox").fill(TEST_PAGE_CONTENT)
+      const backButton = page.getByRole("button", { name: "Back to sites" })
+      await backButton.click()
+
+      // Act
+      const warningModal = page.getByText("Warning")
+      await expect(warningModal).toBeVisible()
+      await page.getByRole("button", { name: "No" }).click()
+
+      // Sanity check: still in unlinked pages and content still present
+      await expect(page.url()).toContain(
+        `/sites/${E2E_EMAIL_TEST_SITE.repo}/folders/${TEST_FOLDER_TITLE_SLUGIFIED}/editPage/${TEST_PAGE_TITLE_ENCODED}`
+      )
+      await expect(page.getByText(TEST_PAGE_CONTENT)).toBeVisible()
+
+      await backButton.click()
+      await expect(warningModal).toBeVisible()
+      await page.getByRole("button", { name: "Yes" }).click()
+
+      // Assert
+      await expect(page.url()).toContain(
+        `/sites/${E2E_EMAIL_TEST_SITE.repo}/folders/${TEST_FOLDER_TITLE_SLUGIFIED}`
+      )
+    })
+
+    test("Edit page (collection) should allow user to modify and save content", async ({
+      page,
+    }) => {
+      // Arrange
+      await page.getByRole("textbox").fill(TEST_PAGE_CONTENT)
+      const saveButton = page.getByRole("button", { name: "Save" })
+
+      // Act
+      await saveButton.click()
+
+      // Assert
+      // 1. Toast
+      await expect(page.getByText(SUCCESSFUL_EDIT_PAGE_TOAST)).toBeVisible()
+
+      // 2. Content is there even after refreshing
+      await page.reload()
+      await expect(page.getByText(TEST_PAGE_CONTENT)).toBeVisible()
+    })
+
+    // TODO: Fix this test so that it does not depend on the previous test suite to create the dependency.
+    test("Edit page (collection) should allow user to add existing image", async ({
+      page,
+    }) => {
+      // Arrange
+      const addImageButton = page.getByRole("button", {
+        name: "Insert Image",
+      })
+      await addImageButton.click()
+      const defaultImageButton = page.getByRole("button").filter({
+        hasText: DEFAULT_IMAGE_TITLE,
+      })
+      await defaultImageButton.click()
+
+      // Act
+      await page.getByRole("button", { name: "Add image to page" }).click()
+      await page.getByPlaceholder("Alt text").fill("Hello World")
+      await page.locator("form").getByRole("button", { name: "Save" }).click()
+
+      await expect(
+        page.getByText(`/images/${DEFAULT_IMAGE_TITLE}`)
+      ).toBeVisible()
+    })
+
+    // TODO: Fix this test so that it does not depend on the previous test suite to create the dependency.
+    test("Edit page (collection) should allow user to add existing file", async ({
+      page,
+    }) => {
+      // Arrange
+      const addFileButton = page.getByRole("button", {
+        name: "Insert File",
+      })
+      await addFileButton.click()
+      const defaultFileButton = page.getByRole("button").filter({
+        hasText: ADDED_FILE_TITLE,
+      })
+      await defaultFileButton.click()
+
+      // Act
+      await page
+        .getByRole("button", { name: `Add file to ${TEST_PAGE_TITLE}` })
+        .click()
+      await page.getByPlaceholder("Text").fill("Hello World")
+      await page.locator("form").getByRole("button", { name: "Save" }).click()
+
+      await expect(page.getByText(`/files/${ADDED_FILE_TITLE}`)).toBeVisible()
+    })
+
+    test("Edit page (collection) should allow user to add link", async ({
+      page,
+    }) => {
+      // Act
+      await page.getByRole("button", { name: "Insert Link" }).click()
+
+      await page.getByPlaceholder("Text").fill(LINK_TITLE)
+      await page.getByPlaceholder("Link").fill(LINK_URL)
+
+      await page.getByRole("button", { name: "Save" }).click()
+
+      // Assert
+      page.getByText(`[${LINK_TITLE}](${LINK_URL})`)
+    })
+  })
+
+  test.describe("Edit resource page", () => {
+    const TEST_CATEGORY = "Test Edit Resource Category"
+    const TEST_CATEGORY_SLUGIFIED = slugifyCategory(TEST_CATEGORY)
+    const TEST_RESOURCE_ROOM = "resources"
+    const TEST_PAGE_TITLE = "Test Resource Page"
+    const TEST_PAGE_DATE = "2021-05-17"
+    const TEST_PAGE_URL_SUFFIX = generateResourceFileName(
+      encodeURIComponent(TEST_PAGE_TITLE),
+      TEST_PAGE_DATE,
+      true
+    )
+
+    const TEST_RESOURCE_PAGE = {
+      content: {
+        frontMatter: {
+          title: TEST_PAGE_TITLE,
+          permalink: `/resources/${TEST_CATEGORY_SLUGIFIED}/permalink`,
+          date: TEST_PAGE_DATE,
+          layout: "post",
+          description: "",
+          image: "",
+          variant: "tiptap",
+        },
+      },
+      newFileName: `${TEST_PAGE_DATE}-post-${TEST_PAGE_TITLE}.md`,
+    }
+
+    test.beforeEach(async ({ page, context }) => {
+      setEmailSessionDefaults(context, "Email admin")
+      const api = await getApi(await context.storageState())
+      await api.post(`v2/sites/${E2E_EMAIL_TEST_SITE.repo}/resourceRoom`, {
+        data: { newDirectoryName: TEST_RESOURCE_ROOM },
+      })
+      await api.post(
+        `v2/sites/${E2E_EMAIL_TEST_SITE.repo}/resourceRoom/${TEST_RESOURCE_ROOM}`,
+        {
+          data: { items: [], newDirectoryName: TEST_CATEGORY },
+        }
+      )
+      await api.post(
+        `/v2/sites/${E2E_EMAIL_TEST_SITE.repo}/resourceRoom/resources/${TEST_RESOURCE_ROOM}/${TEST_CATEGORY_SLUGIFIED}/pages`,
+        {
+          data: TEST_RESOURCE_PAGE,
+        }
+      )
+      await api.post("v2/sites/e2e-email-test-repo/settings", {
+        data: BASE_SETTINGS,
+      })
+      await page.goto(
+        `/sites/${E2E_EMAIL_TEST_SITE.repo}/resourceRoom/${TEST_RESOURCE_ROOM}/resourceCategory/${TEST_CATEGORY_SLUGIFIED}/editPage/${TEST_PAGE_URL_SUFFIX}`
+      )
+    })
+
+    test("Edit page (resource) should have correct colour", async ({
+      page,
+    }) => {
+      const header = page.locator("#display-header")
+
+      await expect(header).toHaveCSS("background-color", SECONDARY_COLOUR)
+    })
+  })
+})
diff --git a/e2e/fixtures/constants.ts b/e2e/fixtures/constants.ts
new file mode 100644
index 000000000..f18fc7912
--- /dev/null
+++ b/e2e/fixtures/constants.ts
@@ -0,0 +1,80 @@
+export const {
+  CYPRESS_TEST_REPO_NAME: TEST_REPO_NAME,
+  CYPRESS_CMS_BASEURL: CMS_BASEURL,
+  CYPRESS_BACKEND_URL: BACKEND_URL,
+  CYPRESS_COOKIE_NAME: COOKIE_NAME,
+  CYPRESS_COOKIE_VALUE: COOKIE_VALUE,
+} = process.env as Record<string, string>
+
+export const E2E_USER = {
+  userId: "test",
+  email: "test@open.gov.sg",
+  contactNumber: "99999999",
+}
+
+export const E2E_EMAIL_ADMIN = {
+  email: "admin@e2e.gov.sg",
+} as const
+
+export const E2E_EMAIL_ADMIN_2 = {
+  email: "twodmin@e2e.gov.sg",
+} as const
+
+export const E2E_EMAIL_COLLAB = {
+  email: "collab@e2e.gov.sg",
+} as const
+
+export const E2E_EMAIL_COLLAB_NON_GOV = {
+  email: "collab@e2etest.com",
+} as const
+
+export const E2E_EMAIL_TEST_SITE = {
+  name: "e2e email test site",
+  repo: "e2e-email-test-repo",
+}
+
+export const E2E_COOKIE = {
+  Auth: {
+    key: COOKIE_NAME,
+    value: COOKIE_VALUE,
+  },
+  Site: { key: "site", value: E2E_EMAIL_TEST_SITE.name },
+  EmailUserType: { key: "e2eUserType" },
+  Email: { key: "email" },
+}
+
+export const E2E_USER_TYPE_COOKIE_KEY = "e2eUserType"
+export const E2E_SITE_KEY = "site"
+export const LOCAL_STORAGE_USERID_KEY = "userId"
+export const LOCAL_STORAGE_USER_KEY = "user"
+export const TEST_PRIMARY_COLOR = [255, 0, 0]
+
+export const BASE_SEO_LINK = "www.open.gov.sg"
+
+export const E2E_EMAIL_REPO_STAGING_LINK =
+  "https://staging.d2qim5mov3pptm.amplifyapp.com"
+
+export const E2E_EMAIL_REPO_MASTER_LINK =
+  "https://master.d2qim5mov3pptm.amplifyapp.com"
+
+export const ISOMER_GUIDE_LINK = "https://guide.isomer.gov.sg/"
+
+export const MOCK_REVIEW_TITLE = "Some interesting title"
+export const MOCK_REVIEW_DESCRIPTION = "Some interesting description"
+
+export const FORBIDDEN_CHARACTERS = "!@#$%^&*()"
+export const NON_ENGLISH_CHARACTERS = "文கி"
+
+export const timings = {
+  outOfTheWay: 0.2,
+  // greater than the out of the way time
+  // so that when the drop ends everything will
+  // have to be out of the way
+  minDropTime: 0.33,
+  maxDropTime: 0.55,
+}
+
+export const keyCodes = {
+  space: 32,
+  arrowDown: 40,
+}
diff --git a/e2e/fixtures/messages.ts b/e2e/fixtures/messages.ts
new file mode 100644
index 000000000..cbce175c1
--- /dev/null
+++ b/e2e/fixtures/messages.ts
@@ -0,0 +1 @@
+export const SUCCESSFUL_EDIT_PAGE_TOAST = `Changes saved. See a preview on Staging, or request a Review for them to be published.`
diff --git a/e2e/fixtures/users.ts b/e2e/fixtures/users.ts
new file mode 100644
index 000000000..1a0b8578d
--- /dev/null
+++ b/e2e/fixtures/users.ts
@@ -0,0 +1,9 @@
+export const USER_TYPES = {
+  Email: {
+    Admin: "Email admin",
+    Collaborator: "Email collaborator",
+  },
+  Github: "Github user",
+} as const
+
+export type EmailUserTypes = typeof USER_TYPES["Email"][keyof typeof USER_TYPES["Email"]]
diff --git a/e2e/sites.spec.ts b/e2e/sites.spec.ts
new file mode 100644
index 000000000..f71796cd4
--- /dev/null
+++ b/e2e/sites.spec.ts
@@ -0,0 +1,38 @@
+import { test, expect, Page } from "@playwright/test"
+
+import { E2E_EMAIL_TEST_SITE } from "./fixtures/constants"
+import { setEmailSessionDefaults } from "./utils/session"
+
+test.describe("Sites flow", () => {
+  test.beforeEach(async ({ page, context }) => {
+    setEmailSessionDefaults(context, "Email admin")
+    await page.goto(`/sites`)
+  })
+
+  test("Sites page should have sites header", async ({ page }) => {
+    const closeButton = page.getByRole("button", { name: "Close" })
+    await closeButton.click()
+
+    const header = page.getByText("Get help")
+
+    await expect(header).toBeVisible()
+  })
+
+  test("Sites page should allow user to click into a test site repo", async ({
+    page,
+  }) => {
+    // Arrange
+    await page.waitForLoadState("domcontentloaded")
+    const closeButton = page.getByRole("button", { name: "Close" })
+    await closeButton.click()
+    const site = page.getByRole("link", { name: E2E_EMAIL_TEST_SITE.repo })
+
+    // Act
+    await site.click()
+
+    // Assert
+    await expect(page.url()).toContain(
+      `/sites/${E2E_EMAIL_TEST_SITE.repo}/dashboard`
+    )
+  })
+})
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
new file mode 100644
index 000000000..3b241a7fb
--- /dev/null
+++ b/e2e/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../src",
+    "paths": {
+      "utils": ["../src/utils/index"]
+    }
+  },
+  "include": ["**/*.ts"]
+}
diff --git a/e2e/utils/session.ts b/e2e/utils/session.ts
new file mode 100644
index 000000000..dfaec0a2c
--- /dev/null
+++ b/e2e/utils/session.ts
@@ -0,0 +1,58 @@
+import { APIRequestContext, BrowserContext } from "@playwright/test"
+
+import {
+  BACKEND_URL,
+  COOKIE_NAME,
+  COOKIE_VALUE,
+  E2E_COOKIE,
+  E2E_EMAIL_ADMIN,
+  E2E_EMAIL_COLLAB,
+  E2E_EMAIL_TEST_SITE,
+  E2E_SITE_KEY,
+  E2E_USER_TYPE_COOKIE_KEY,
+} from "../fixtures/constants"
+import { EmailUserTypes } from "../fixtures/users"
+
+const setCookieWithDomain = (
+  context: BrowserContext,
+  name: string,
+  value: string
+) => {
+  context.addCookies([
+    {
+      name,
+      value,
+      url: BACKEND_URL,
+    },
+  ])
+}
+
+export const setEmailSessionDefaults = (
+  context: BrowserContext,
+  userType: EmailUserTypes
+) => {
+  setCookieWithDomain(context, COOKIE_NAME, COOKIE_VALUE)
+  setCookieWithDomain(context, E2E_USER_TYPE_COOKIE_KEY, userType)
+  setCookieWithDomain(context, E2E_SITE_KEY, E2E_EMAIL_TEST_SITE.name)
+  setCookieWithDomain(
+    context,
+    E2E_COOKIE.Email.key,
+    userType === "Email admin" ? E2E_EMAIL_ADMIN.email : E2E_EMAIL_COLLAB.email
+  )
+  setCookieWithDomain(context, E2E_COOKIE.Site.key, E2E_COOKIE.Site.value)
+}
+
+export const actAsEmailUser = (
+  context: BrowserContext,
+  apiContext: APIRequestContext,
+  email: string,
+  userType: EmailUserTypes,
+  site = ""
+) => {
+  setCookieWithDomain(context, E2E_COOKIE.Site.key, site)
+  setCookieWithDomain(context, COOKIE_NAME, COOKIE_VALUE)
+  setCookieWithDomain(context, E2E_COOKIE.Auth.key, E2E_COOKIE.Auth.value)
+  setCookieWithDomain(context, E2E_COOKIE.EmailUserType.key, userType)
+  setCookieWithDomain(context, E2E_COOKIE.Email.key, email)
+  apiContext.get(`/auth/whoami`)
+}
diff --git a/package-lock.json b/package-lock.json
index 6b9008f40..3696784ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.82.0",
+  "version": "0.83.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "isomercms-frontend",
-      "version": "0.82.0",
+      "version": "0.83.0",
       "hasInstallScript": true,
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.1",
@@ -41,6 +41,8 @@
         "@tiptap/extension-image": "^2.1.12",
         "@tiptap/extension-link": "^2.1.12",
         "@tiptap/extension-placeholder": "^2.1.12",
+        "@tiptap/extension-subscript": "^2.2.4",
+        "@tiptap/extension-superscript": "^2.2.4",
         "@tiptap/extension-table": "^2.1.12",
         "@tiptap/extension-table-cell": "^2.1.12",
         "@tiptap/extension-table-header": "^2.1.12",
@@ -93,7 +95,7 @@
         "react-markdown": "^8.0.7",
         "react-query": "^3.34.16",
         "react-router-dom": "^5.1.2",
-        "react-select": "^5.4.0",
+        "react-select": "^5.8.0",
         "react-simplemde-editor": "^5.2.0",
         "react-virtuoso": "^2.19.0",
         "remixicon": "^3.5.0",
@@ -119,7 +121,8 @@
         "@cypress/webpack-preprocessor": "^5.17.0",
         "@jest/globals": "^27.0.3",
         "@mdx-js/react": "^2.3.0",
-        "@storybook/addon-actions": "^7.0.24",
+        "@playwright/test": "^1.41.1",
+        "@storybook/addon-actions": "^8.0.0",
         "@storybook/addon-docs": "^7.0.24",
         "@storybook/addon-essentials": "^7.0.24",
         "@storybook/addon-links": "^7.0.24",
@@ -136,6 +139,7 @@
         "@types/html": "^1.0.4",
         "@types/invariant": "^2.2.35",
         "@types/jest": "^29.4.4",
+        "@types/node": "^20.10.5",
         "@types/qrcode": "^1.5.4",
         "@types/react-color": "^3.0.6",
         "@types/react-router-dom": "^5.3.3",
@@ -146,7 +150,7 @@
         "auto-changelog": "^2.4.0",
         "babel-jest": "^29.5.0",
         "chromatic": "^6.5.6",
-        "cypress": "^12.8.0",
+        "cypress": "^13.7.0",
         "cypress-pipe": "^2.0.0",
         "cz-conventional-changelog": "^3.3.0",
         "eslint": "^7.28.0",
@@ -1144,12 +1148,10 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "version": "7.22.5",
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.22.13",
-        "chalk": "^2.4.2"
+        "@babel/highlight": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1210,12 +1212,11 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
-      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
+      "version": "7.22.9",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.23.0",
+        "@babel/types": "^7.22.5",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -1318,22 +1319,20 @@
       }
     },
     "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
-      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+      "version": "7.22.5",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
-      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+      "version": "7.22.5",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.22.15",
-        "@babel/types": "^7.23.0"
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1481,9 +1480,8 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "version": "7.22.5",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1523,12 +1521,11 @@
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
-      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "version": "7.22.5",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "chalk": "^2.4.2",
+        "@babel/helper-validator-identifier": "^7.22.5",
+        "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       },
       "engines": {
@@ -1536,10 +1533,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.22.7",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -3189,33 +3185,31 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
-      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+      "version": "7.22.5",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/parser": "^7.22.15",
-        "@babel/types": "^7.22.15"
+        "@babel/code-frame": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
-      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
+      "version": "7.22.8",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.0",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
+        "@babel/code-frame": "^7.22.5",
+        "@babel/generator": "^7.22.7",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.0",
-        "@babel/types": "^7.23.0",
+        "@babel/parser": "^7.22.7",
+        "@babel/types": "^7.22.5",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -3224,12 +3218,11 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.22.5",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.20",
+        "@babel/helper-validator-identifier": "^7.22.5",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -5053,9 +5046,9 @@
       }
     },
     "node_modules/@cypress/request": {
-      "version": "2.88.12",
-      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-2.88.12.tgz",
-      "integrity": "sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
+      "integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==",
       "dev": true,
       "dependencies": {
         "aws-sign2": "~0.7.0",
@@ -5071,7 +5064,7 @@
         "json-stringify-safe": "~5.0.1",
         "mime-types": "~2.1.19",
         "performance-now": "^2.1.0",
-        "qs": "~6.10.3",
+        "qs": "6.10.4",
         "safe-buffer": "^5.1.2",
         "tough-cookie": "^4.1.3",
         "tunnel-agent": "^0.6.0",
@@ -5083,8 +5076,9 @@
     },
     "node_modules/@cypress/request/node_modules/form-data": {
       "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -5096,8 +5090,9 @@
     },
     "node_modules/@cypress/request/node_modules/qs": {
       "version": "6.10.4",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
+      "integrity": "sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==",
       "dev": true,
-      "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.0.4"
       },
@@ -5110,8 +5105,9 @@
     },
     "node_modules/@cypress/request/node_modules/uuid": {
       "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -5466,20 +5462,6 @@
       "version": "0.3.1",
       "license": "MIT"
     },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.17.19",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "dev": true,
@@ -7640,6 +7622,21 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz",
+      "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.42.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.10",
       "dev": true,
@@ -7764,34 +7761,6 @@
       "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.2.tgz",
       "integrity": "sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ=="
     },
-    "node_modules/@remirror/core-helpers": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@remirror/core-helpers/-/core-helpers-3.0.0.tgz",
-      "integrity": "sha512-tusEgQJIqg4qKj6HSBUFcyRnWnziw3neh4T9wOmsPGHFC3w9kl5KSrDb9UAgE8uX6y32FnS7vJ955mWOl3n50A==",
-      "dependencies": {
-        "@remirror/core-constants": "^2.0.2",
-        "@remirror/types": "^1.0.1",
-        "@types/object.omit": "^3.0.0",
-        "@types/object.pick": "^1.3.2",
-        "@types/throttle-debounce": "^2.1.0",
-        "case-anything": "^2.1.13",
-        "dash-get": "^1.0.2",
-        "deepmerge": "^4.3.1",
-        "fast-deep-equal": "^3.1.3",
-        "make-error": "^1.3.6",
-        "object.omit": "^3.0.0",
-        "object.pick": "^1.3.0",
-        "throttle-debounce": "^3.0.1"
-      }
-    },
-    "node_modules/@remirror/types": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@remirror/types/-/types-1.0.1.tgz",
-      "integrity": "sha512-VlZQxwGnt1jtQ18D6JqdIF+uFZo525WEqrfp9BOc3COPpK4+AWCgdnAWL+ho6imWcoINlGjR/+3b6y5C1vBVEA==",
-      "dependencies": {
-        "type-fest": "^2.19.0"
-      }
-    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "dev": true,
@@ -8584,42 +8553,34 @@
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "7.1.1",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.0.0.tgz",
+      "integrity": "sha512-QXfnEWZt5k35cPYsLvxq505XrCgXujc4UEkky1lBtSMI9SLzlXZg3fC/lW0c0hiu2c0+zI+y4fj5vTE9AZJdjw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@storybook/client-logger": "7.1.1",
-        "@storybook/components": "7.1.1",
-        "@storybook/core-events": "7.1.1",
+        "@storybook/core-events": "8.0.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.1.1",
-        "@storybook/preview-api": "7.1.1",
-        "@storybook/theming": "7.1.1",
-        "@storybook/types": "7.1.1",
+        "@types/uuid": "^9.0.1",
         "dequal": "^2.0.2",
-        "lodash": "^4.17.21",
         "polished": "^4.2.2",
-        "prop-types": "^15.7.2",
-        "react-inspector": "^6.0.0",
-        "telejson": "^7.0.3",
-        "ts-dedent": "^2.0.0",
         "uuid": "^9.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-actions/node_modules/@storybook/core-events": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-8.0.0.tgz",
+      "integrity": "sha512-kkabj4V99gOTBW+y3HM/LTCDekglqb+lslZMamM+Ytxv1lCqCEOIR/OGfnYOyEaK4BLcx61Zp+fO30FZxtoT1w==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
       },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/addon-actions/node_modules/uuid": {
@@ -8773,6 +8734,59 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-actions": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.1.1.tgz",
+      "integrity": "sha512-IDxBmNnVgLFfQ407MxOUJmqjz0hgiZB9syi4sfp7BKp5MIPUDT1m+z603kGrvx0bk0W0DPqkp/H8ySEGEx0x6g==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.1.1",
+        "@storybook/components": "7.1.1",
+        "@storybook/core-events": "7.1.1",
+        "@storybook/global": "^5.0.0",
+        "@storybook/manager-api": "7.1.1",
+        "@storybook/preview-api": "7.1.1",
+        "@storybook/theming": "7.1.1",
+        "@storybook/types": "7.1.1",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "polished": "^4.2.2",
+        "prop-types": "^15.7.2",
+        "react-inspector": "^6.0.0",
+        "telejson": "^7.0.3",
+        "ts-dedent": "^2.0.0",
+        "uuid": "^9.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-essentials/node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@storybook/addon-highlight": {
       "version": "7.1.1",
       "dev": true,
@@ -9064,21 +9078,6 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/builder-manager/node_modules/@esbuild/darwin-x64": {
-      "version": "0.18.17",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@storybook/builder-manager/node_modules/esbuild": {
       "version": "0.18.17",
       "dev": true,
@@ -9615,21 +9614,6 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/core-common/node_modules/@esbuild/darwin-x64": {
-      "version": "0.18.17",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@storybook/core-common/node_modules/@types/node": {
       "version": "16.18.39",
       "dev": true,
@@ -10908,164 +10892,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@swc/core-darwin-x64": {
-      "version": "1.3.73",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.3.73",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.73.tgz",
-      "integrity": "sha512-EmJALh7KUJhcdr7uUQg7wTpdcX5k1Xjspgy3QMg8j2dwb4DsnFgrnArsFNXHBB1Dj7LlQSoyxQ5mBcJtUtCb8A==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.3.73",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.73.tgz",
-      "integrity": "sha512-RK6jTm8ppvglh42YOq/k2AqpHS9uYP5h5FNMmA9OI8lupCCS8HMtexbwqw+Xd0MGmSrsJiURw3Z6az8cEObrag==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.3.73",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.73.tgz",
-      "integrity": "sha512-hhS6yfgZLKPVAklGjKlbyf9InAhDGj3u+jbZkjStrOgtYNBCk5tbkROZP9ib5enN9m9Oosl5gM5v6oTw27TbUw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.3.95",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.95.tgz",
-      "integrity": "sha512-n9SuHEFtdfSJ+sHdNXNRuIOVprB8nbsz+08apKfdo4lEKq6IIPBBAk5kVhPhkjmg2dFVHVo4Tr/OHXM1tzWCCw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.3.73",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.73.tgz",
-      "integrity": "sha512-DMz2W0PnzMXAhbMPGArQUBVayyzzzuivvJyJkyFaMPiIwaI+QG+UvLgjSM7NmG/9Eq9hX2zZ1zdaalVKXyyCHQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.3.73",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.73.tgz",
-      "integrity": "sha512-yHB1jG3c4/5An//nA9+War6oiNrM/NUz6ivDPbrBfbJHtU/iPfgdAvxfm5/xpOFx4U18JJHnOt853sDyXJwi/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.3.73",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.73.tgz",
-      "integrity": "sha512-cA61i4VPTrABAZ8LDvNVqwcO1VLEDO+71iWettvhyk7p6/H/lXG4VQVyHcncmfrAUzDQalXVbgZm6MA3hpqhFQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.3.73",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.73.tgz",
-      "integrity": "sha512-QwTO9IlIpEr2GsJvW8qNVvQXTzT1ASqf8C8aZDLtVwHKdreTMjlrNMRYw1883DVLRuHMs5RLP4IA2A47Oexp1Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core/node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.3.73",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.73.tgz",
-      "integrity": "sha512-ZGcY63EtFW5OLz1tsKhqhymzvoto329c0oRS9ptzMO66eUrjsHxTt5uPixrI24F6y+bn+qFqsgIw3nwMV8jTPw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@tanstack/react-table": {
       "version": "8.9.3",
       "license": "MIT",
@@ -11612,6 +11438,30 @@
         "@tiptap/core": "^2.0.0"
       }
     },
+    "node_modules/@tiptap/extension-subscript": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-subscript/-/extension-subscript-2.2.4.tgz",
+      "integrity": "sha512-W8HVGJNqRT7Ho5LIlTn/yaOHpRnfSWPGh5YxMDmmR4fH+mG4ZgwOrxS7D1HrE1Ak9YZ+/ebFyRUHhcdUVu46Bg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-superscript": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-2.2.4.tgz",
+      "integrity": "sha512-RUmQ92Yow1z1GSVWV7TxqXaH9XpmA+TohDAWtXokLlfNfodz99zLOxPFf/+kE1voSFLuJxwHsWS9TV27V3N3aA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
     "node_modules/@tiptap/extension-table": {
       "version": "2.1.12",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.1.12.tgz",
@@ -12386,8 +12236,12 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.4.5",
-      "license": "MIT"
+      "version": "20.11.28",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.28.tgz",
+      "integrity": "sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
     },
     "node_modules/@types/node-fetch": {
       "version": "2.6.4",
@@ -12403,16 +12257,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/object.omit": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/object.omit/-/object.omit-3.0.2.tgz",
-      "integrity": "sha512-BxWU36cMP+FKD3OLFluQaj2cBev2sx2LJaHELuphHwnleq+xnEhTmuYYYx4pOT/1U/ZoR6B+RdvxWh2FD6lGGA=="
-    },
-    "node_modules/@types/object.pick": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@types/object.pick/-/object.pick-1.3.3.tgz",
-      "integrity": "sha512-qZqHmdGEALeSATMB1djT1S5szv6Wtpb7DKpHrt2XG4iyKlV7C2Xk8GmDXr1KXakOqUfX6ohw7ceruYt4NVmB1Q=="
-    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "license": "MIT"
@@ -12643,11 +12487,6 @@
         "@types/jest": "*"
       }
     },
-    "node_modules/@types/throttle-debounce": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
-      "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ=="
-    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -13939,16 +13778,18 @@
     },
     "node_modules/aws-sign2": {
       "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
       "dev": true,
-      "license": "Apache-2.0",
       "engines": {
         "node": "*"
       }
     },
     "node_modules/aws4": {
       "version": "1.12.0",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.12.0.tgz",
+      "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==",
+      "dev": true
     },
     "node_modules/axe-core": {
       "version": "4.7.2",
@@ -15090,15 +14931,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/buildcheck": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/buildcheck/-/buildcheck-0.0.6.tgz",
-      "integrity": "sha512-8f9ZJCUXyT1M35Jx7MkBgmBMo3oHTTBIPLiY9xyL0pl3T5RwcPEY8cUHr5LBNfu/fk6c2T4DJZuVM/8ZZT2D2A==",
-      "optional": true,
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/builtin-modules": {
       "version": "3.3.0",
       "dev": true,
@@ -15284,17 +15116,6 @@
       ],
       "license": "CC-BY-4.0"
     },
-    "node_modules/case-anything": {
-      "version": "2.1.13",
-      "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.13.tgz",
-      "integrity": "sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==",
-      "engines": {
-        "node": ">=12.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "dev": true,
@@ -15305,8 +15126,9 @@
     },
     "node_modules/caseless": {
       "version": "0.12.0",
-      "dev": true,
-      "license": "Apache-2.0"
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "dev": true
     },
     "node_modules/ccount": {
       "version": "2.0.1",
@@ -16290,20 +16112,6 @@
       "version": "1.5.7",
       "license": "MIT"
     },
-    "node_modules/cpu-features": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/cpu-features/-/cpu-features-0.0.9.tgz",
-      "integrity": "sha512-AKjgn2rP2yJyfbepsmLfiYcmtNn/2eUvocUyM/09yB0YDiz39HteK/5/T4Onf0pmdYDMgkBoGvRLvEguzyL7wQ==",
-      "hasInstallScript": true,
-      "optional": true,
-      "dependencies": {
-        "buildcheck": "~0.0.6",
-        "nan": "^2.17.0"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/create-ecdh": {
       "version": "4.0.4",
       "dev": true,
@@ -16897,20 +16705,20 @@
       "license": "MIT"
     },
     "node_modules/cypress": {
-      "version": "12.17.2",
+      "version": "13.7.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.7.0.tgz",
+      "integrity": "sha512-UimjRSJJYdTlvkChcdcfywKJ6tUYuwYuk/n1uMMglrvi+ZthNhoRYcxnWgTqUtkl17fXrPAsD5XT2rcQYN1xKA==",
       "dev": true,
       "hasInstallScript": true,
-      "license": "MIT",
       "dependencies": {
-        "@cypress/request": "^2.88.11",
+        "@cypress/request": "^3.0.0",
         "@cypress/xvfb": "^1.2.4",
-        "@types/node": "^14.14.31",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
         "arch": "^2.2.0",
         "blob-util": "^2.0.2",
         "bluebird": "^3.7.2",
-        "buffer": "^5.6.0",
+        "buffer": "^5.7.1",
         "cachedir": "^2.3.0",
         "chalk": "^4.1.0",
         "check-more-types": "^2.24.0",
@@ -16928,7 +16736,7 @@
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
         "getos": "^3.2.1",
-        "is-ci": "^3.0.0",
+        "is-ci": "^3.0.1",
         "is-installed-globally": "~0.4.0",
         "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
@@ -16937,6 +16745,7 @@
         "minimist": "^1.2.8",
         "ospath": "^1.2.2",
         "pretty-bytes": "^5.6.0",
+        "process": "^0.11.10",
         "proxy-from-env": "1.0.0",
         "request-progress": "^3.0.0",
         "semver": "^7.5.3",
@@ -16949,7 +16758,7 @@
         "cypress": "bin/cypress"
       },
       "engines": {
-        "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
+        "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
       }
     },
     "node_modules/cypress-file-upload": {
@@ -16967,11 +16776,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/cypress/node_modules/@types/node": {
-      "version": "14.18.54",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/cypress/node_modules/ansi-styles": {
       "version": "4.3.0",
       "dev": true,
@@ -17139,11 +16943,6 @@
       "dev": true,
       "license": "Apache-2.0"
     },
-    "node_modules/dash-get": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/dash-get/-/dash-get-1.0.2.tgz",
-      "integrity": "sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ=="
-    },
     "node_modules/dashdash": {
       "version": "1.14.1",
       "license": "MIT",
@@ -17940,9 +17739,9 @@
       "license": "BSD-2-Clause"
     },
     "node_modules/dompurify": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz",
-      "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w=="
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.9.tgz",
+      "integrity": "sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ=="
     },
     "node_modules/domutils": {
       "version": "3.1.0",
@@ -19732,11 +19531,12 @@
     },
     "node_modules/extsprintf": {
       "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
       "dev": true,
       "engines": [
         "node >=0.6.0"
-      ],
-      "license": "MIT"
+      ]
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -20383,8 +20183,9 @@
     },
     "node_modules/forever-agent": {
       "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
       "dev": true,
-      "license": "Apache-2.0",
       "engines": {
         "node": "*"
       }
@@ -21992,8 +21793,9 @@
     },
     "node_modules/http-signature": {
       "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
+      "integrity": "sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0",
         "jsprim": "^2.0.2",
@@ -22665,6 +22467,7 @@
     },
     "node_modules/is-extendable": {
       "version": "1.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-plain-object": "^2.0.4"
@@ -22675,6 +22478,7 @@
     },
     "node_modules/is-extendable/node_modules/is-plain-object": {
       "version": "2.0.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "isobject": "^3.0.1"
@@ -23064,8 +22868,9 @@
     },
     "node_modules/isstream": {
       "version": "0.1.2",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "dev": true
     },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.0",
@@ -27168,8 +26973,9 @@
     },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
-      "dev": true,
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -27233,11 +27039,12 @@
     },
     "node_modules/jsprim": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
+      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
       "dev": true,
       "engines": [
         "node >=0.6.0"
       ],
-      "license": "MIT",
       "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -29063,9 +28870,9 @@
       "license": "MIT"
     },
     "node_modules/msw": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/msw/-/msw-1.3.2.tgz",
-      "integrity": "sha512-wKLhFPR+NitYTkQl5047pia0reNGgf0P6a1eTnA5aNlripmiz0sabMvvHcicE8kQ3/gZcI0YiPFWmYfowfm3lA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-1.3.3.tgz",
+      "integrity": "sha512-CiPyRFiYJCXYyH/vwxT7m+sa4VZHuUH6cGwRBj0kaTjBGpsk4EnL47YzhoA859htVCF2vzqZuOsomIUlFqg9GQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -29100,7 +28907,7 @@
         "url": "https://opencollective.com/mswjs"
       },
       "peerDependencies": {
-        "typescript": ">= 4.4.x <= 5.2.x"
+        "typescript": ">= 4.4.x"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -29206,12 +29013,6 @@
         "thenify-all": "^1.0.0"
       }
     },
-    "node_modules/nan": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",
-      "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==",
-      "optional": true
-    },
     "node_modules/nano-time": {
       "version": "1.0.0",
       "license": "ISC",
@@ -29646,19 +29447,9 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/object.omit": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-3.0.0.tgz",
-      "integrity": "sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==",
-      "dependencies": {
-        "is-extendable": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/object.pick": {
       "version": "1.3.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "isobject": "^3.0.1"
@@ -29877,9 +29668,9 @@
       }
     },
     "node_modules/outvariant": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz",
-      "integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.2.tgz",
+      "integrity": "sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ==",
       "dev": true
     },
     "node_modules/p-limit": {
@@ -30369,6 +30160,36 @@
         "node": ">=4"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz",
+      "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.42.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz",
+      "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/please-upgrade-node": {
       "version": "3.2.0",
       "dev": true,
@@ -32028,12 +31849,11 @@
       }
     },
     "node_modules/prosemirror-trailing-node": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.7.tgz",
-      "integrity": "sha512-8zcZORYj/8WEwsGo6yVCRXFMOfBo0Ub3hCUvmoWIZYfMP26WqENU0mpEP27w7mt8buZWuGrydBewr0tOArPb1Q==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.8.tgz",
+      "integrity": "sha512-ujRYhSuhQb1Jsarh1IHqb2KoSnRiD7wAMDGucP35DN7j5af6X7B18PfdPIrbwsPTqIAj0fyOvxbuPsWhNvylmA==",
       "dependencies": {
         "@remirror/core-constants": "^2.0.2",
-        "@remirror/core-helpers": "^3.0.0",
         "escape-string-regexp": "^4.0.0"
       },
       "peerDependencies": {
@@ -33099,8 +32919,9 @@
     },
     "node_modules/react-inspector": {
       "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz",
+      "integrity": "sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==",
       "dev": true,
-      "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.4 || ^17.0.0 || ^18.0.0"
       }
@@ -34564,8 +34385,9 @@
       }
     },
     "node_modules/react-select": {
-      "version": "5.7.4",
-      "license": "MIT",
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz",
+      "integrity": "sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==",
       "dependencies": {
         "@babel/runtime": "^7.12.0",
         "@emotion/cache": "^11.4.0",
@@ -38053,14 +37875,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/throttle-debounce": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/throttleit": {
       "version": "1.0.0",
       "dev": true,
@@ -38244,9 +38058,9 @@
       }
     },
     "node_modules/tough-cookie/node_modules/punycode": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -38610,8 +38424,9 @@
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
       "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
         "safe-buffer": "^5.0.1"
       },
@@ -38660,6 +38475,7 @@
     },
     "node_modules/type-fest": {
       "version": "2.19.0",
+      "dev": true,
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=12.20"
@@ -38823,6 +38639,11 @@
         "undeclared-identifiers": "bin.js"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "dev": true,
@@ -39416,11 +39237,12 @@
     },
     "node_modules/verror": {
       "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
       "dev": true,
       "engines": [
         "node >=0.6.0"
       ],
-      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -39429,8 +39251,9 @@
     },
     "node_modules/verror/node_modules/core-util-is": {
       "version": "1.0.2",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "dev": true
     },
     "node_modules/vfile": {
       "version": "5.3.7",
diff --git a/package.json b/package.json
index 51815de94..844345677 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.82.0",
+  "version": "0.83.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
@@ -38,6 +38,8 @@
     "@tiptap/extension-image": "^2.1.12",
     "@tiptap/extension-link": "^2.1.12",
     "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/extension-subscript": "^2.2.4",
+    "@tiptap/extension-superscript": "^2.2.4",
     "@tiptap/extension-table": "^2.1.12",
     "@tiptap/extension-table-cell": "^2.1.12",
     "@tiptap/extension-table-header": "^2.1.12",
@@ -90,7 +92,7 @@
     "react-markdown": "^8.0.7",
     "react-query": "^3.34.16",
     "react-router-dom": "^5.1.2",
-    "react-select": "^5.4.0",
+    "react-select": "^5.8.0",
     "react-simplemde-editor": "^5.2.0",
     "react-virtuoso": "^2.19.0",
     "remixicon": "^3.5.0",
@@ -116,6 +118,7 @@
     "build:netlify": "CI=false npm run build && npm run sourcemaps:upload",
     "release": "npm version $npm_config_isomer_update && git push --tags",
     "test": "craco test",
+    "test:playwright": "source .env && npm run reset-e2e && npx playwright test --ui",
     "test:ci": "node scripts/run-e2e.js run",
     "test:email-ci": "node scripts/run-e2e.js run-email",
     "test-e2e": "source .env && node scripts/run-e2e.js run",
@@ -166,7 +169,8 @@
     "@cypress/webpack-preprocessor": "^5.17.0",
     "@jest/globals": "^27.0.3",
     "@mdx-js/react": "^2.3.0",
-    "@storybook/addon-actions": "^7.0.24",
+    "@playwright/test": "^1.41.1",
+    "@storybook/addon-actions": "^8.0.0",
     "@storybook/addon-docs": "^7.0.24",
     "@storybook/addon-essentials": "^7.0.24",
     "@storybook/addon-links": "^7.0.24",
@@ -183,6 +187,7 @@
     "@types/html": "^1.0.4",
     "@types/invariant": "^2.2.35",
     "@types/jest": "^29.4.4",
+    "@types/node": "^20.10.5",
     "@types/qrcode": "^1.5.4",
     "@types/react-color": "^3.0.6",
     "@types/react-router-dom": "^5.3.3",
@@ -193,7 +198,7 @@
     "auto-changelog": "^2.4.0",
     "babel-jest": "^29.5.0",
     "chromatic": "^6.5.6",
-    "cypress": "^12.8.0",
+    "cypress": "^13.7.0",
     "cypress-pipe": "^2.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.28.0",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 000000000..28936f2fa
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,77 @@
+import { defineConfig, devices } from "@playwright/test"
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* 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",
+  /* 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('/')`. */
+    baseURL: process.env.CYPRESS_BASEURL || "http://localhost:3000", // TODO: rename this to a framework agnostic name
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+})
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
index d7243e2bf..35b982861 100644
--- a/public/mockServiceWorker.js
+++ b/public/mockServiceWorker.js
@@ -2,22 +2,21 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.42.3).
+ * Mock Service Worker (1.3.3).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = "02f4ad4a2797f85668baf196e553d929"
-const bypassHeaderName = "x-msw-bypass"
+const INTEGRITY_CHECKSUM = "3d6b9f06410d179a7f7404d4bf4c3c70"
 const activeClientIds = new Set()
 
 self.addEventListener("install", function () {
-  return self.skipWaiting()
+  self.skipWaiting()
 })
 
-self.addEventListener("activate", async function (event) {
-  return self.clients.claim()
+self.addEventListener("activate", function (event) {
+  event.waitUntil(self.clients.claim())
 })
 
 self.addEventListener("message", async function (event) {
@@ -33,7 +32,9 @@ self.addEventListener("message", async function (event) {
     return
   }
 
-  const allClients = await self.clients.matchAll()
+  const allClients = await self.clients.matchAll({
+    type: "window",
+  })
 
   switch (event.data) {
     case "KEEPALIVE_REQUEST": {
@@ -83,30 +84,58 @@ self.addEventListener("message", async function (event) {
   }
 })
 
-// Resolve the "main" client for the given event.
-// Client that issues a request doesn't necessarily equal the client
-// that registered the worker. It's with the latter the worker should
-// communicate with during the response resolving phase.
-async function resolveMainClient(event) {
-  const client = await self.clients.get(event.clientId)
+self.addEventListener("fetch", function (event) {
+  const { request } = event
+  const accept = request.headers.get("accept") || ""
 
-  if (client.frameType === "top-level") {
-    return client
+  // Bypass server-sent events.
+  if (accept.includes("text/event-stream")) {
+    return
   }
 
-  const allClients = await self.clients.matchAll()
+  // Bypass navigation requests.
+  if (request.mode === "navigate") {
+    return
+  }
 
-  return allClients
-    .filter((client) => {
-      // Get only those clients that are currently visible.
-      return client.visibilityState === "visible"
-    })
-    .find((client) => {
-      // Find the client ID that's recorded in the
-      // set of clients that have registered the worker.
-      return activeClientIds.has(client.id)
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = Math.random().toString(16).slice(2)
+
+  event.respondWith(
+    handleRequest(event, requestId).catch((error) => {
+      if (error.name === "NetworkError") {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url
+        )
+        return
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
+      console.error(
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+        request.method,
+        request.url,
+        `${error.name}: ${error.message}`
+      )
     })
-}
+  )
+})
 
 async function handleRequest(event, requestId) {
   const client = await resolveMainClient(event)
@@ -128,7 +157,7 @@ async function handleRequest(event, requestId) {
           statusText: clonedResponse.statusText,
           body:
             clonedResponse.body === null ? null : await clonedResponse.text(),
-          headers: serializeHeaders(clonedResponse.headers),
+          headers: Object.fromEntries(clonedResponse.headers.entries()),
           redirected: clonedResponse.redirected,
         },
       })
@@ -138,14 +167,54 @@ async function handleRequest(event, requestId) {
   return response
 }
 
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === "top-level") {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: "window",
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === "visible"
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
 async function getResponse(event, client, requestId) {
   const { request } = event
-  const requestClone = request.clone()
-  const getOriginalResponse = () => fetch(requestClone)
+  const clonedRequest = request.clone()
+
+  function passthrough() {
+    // Clone the request because it might've been already used
+    // (i.e. its body has been read and sent to the client).
+    const headers = Object.fromEntries(clonedRequest.headers.entries())
+
+    // Remove MSW-specific request headers so the bypassed requests
+    // comply with the server's CORS preflight check.
+    // Operate with the headers as an object because request "Headers"
+    // are immutable.
+    delete headers["x-msw-bypass"]
 
-  // Bypass mocking when the request client is not active.
+    return fetch(clonedRequest, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
   if (!client) {
-    return getOriginalResponse()
+    return passthrough()
   }
 
   // Bypass initial page load requests (i.e. static assets).
@@ -153,34 +222,23 @@ async function getResponse(event, client, requestId) {
   // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
   // and is not ready to handle requests.
   if (!activeClientIds.has(client.id)) {
-    return await getOriginalResponse()
+    return passthrough()
   }
 
-  // Bypass requests with the explicit bypass header
-  if (requestClone.headers.get(bypassHeaderName) === "true") {
-    const cleanRequestHeaders = serializeHeaders(requestClone.headers)
-
-    // Remove the bypass header to comply with the CORS preflight check.
-    delete cleanRequestHeaders[bypassHeaderName]
-
-    const originalRequest = new Request(requestClone, {
-      headers: new Headers(cleanRequestHeaders),
-    })
-
-    return fetch(originalRequest)
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  if (request.headers.get("x-msw-bypass") === "true") {
+    return passthrough()
   }
 
-  // Send the request to the client-side MSW.
-  const reqHeaders = serializeHeaders(request.headers)
-  const body = await request.text()
-
+  // Notify the client that a request has been intercepted.
   const clientMessage = await sendToClient(client, {
     type: "REQUEST",
     payload: {
       id: requestId,
       url: request.url,
       method: request.method,
-      headers: reqHeaders,
+      headers: Object.fromEntries(request.headers.entries()),
       cache: request.cache,
       mode: request.mode,
       credentials: request.credentials,
@@ -189,115 +247,32 @@ async function getResponse(event, client, requestId) {
       redirect: request.redirect,
       referrer: request.referrer,
       referrerPolicy: request.referrerPolicy,
-      body,
+      body: await request.text(),
       bodyUsed: request.bodyUsed,
       keepalive: request.keepalive,
     },
   })
 
   switch (clientMessage.type) {
-    case "MOCK_SUCCESS": {
-      return delayPromise(
-        () => respondWithMock(clientMessage),
-        clientMessage.payload.delay
-      )
+    case "MOCK_RESPONSE": {
+      return respondWithMock(clientMessage.data)
     }
 
     case "MOCK_NOT_FOUND": {
-      return getOriginalResponse()
+      return passthrough()
     }
 
     case "NETWORK_ERROR": {
-      const { name, message } = clientMessage.payload
+      const { name, message } = clientMessage.data
       const networkError = new Error(message)
       networkError.name = name
 
-      // Rejecting a request Promise emulates a network error.
+      // Rejecting a "respondWith" promise emulates a network error.
       throw networkError
     }
-
-    case "INTERNAL_ERROR": {
-      const parsedBody = JSON.parse(clientMessage.payload.body)
-
-      console.error(
-        `\
-[MSW] Uncaught exception in the request handler for "%s %s":
-
-${parsedBody.location}
-
-This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error, as it indicates a mistake in your code. If you wish to mock an error response, please see this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
-`,
-        request.method,
-        request.url
-      )
-
-      return respondWithMock(clientMessage)
-    }
-  }
-
-  return getOriginalResponse()
-}
-
-self.addEventListener("fetch", function (event) {
-  const { request } = event
-  const accept = request.headers.get("accept") || ""
-
-  // Bypass server-sent events.
-  if (accept.includes("text/event-stream")) {
-    return
-  }
-
-  // Bypass navigation requests.
-  if (request.mode === "navigate") {
-    return
-  }
-
-  // Opening the DevTools triggers the "only-if-cached" request
-  // that cannot be handled by the worker. Bypass such requests.
-  if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
-    return
-  }
-
-  // Bypass all requests when there are no active clients.
-  // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
-  if (activeClientIds.size === 0) {
-    return
   }
 
-  const requestId = uuidv4()
-
-  return event.respondWith(
-    handleRequest(event, requestId).catch((error) => {
-      if (error.name === "NetworkError") {
-        console.warn(
-          '[MSW] Successfully emulated a network error for the "%s %s" request.',
-          request.method,
-          request.url
-        )
-        return
-      }
-
-      // At this point, any exception indicates an issue with the original request/response.
-      console.error(
-        `\
-[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
-        request.method,
-        request.url,
-        `${error.name}: ${error.message}`
-      )
-    })
-  )
-})
-
-function serializeHeaders(headers) {
-  const reqHeaders = {}
-  headers.forEach((value, name) => {
-    reqHeaders[name] = reqHeaders[name]
-      ? [].concat(reqHeaders[name]).concat(value)
-      : value
-  })
-  return reqHeaders
+  return passthrough()
 }
 
 function sendToClient(client, message) {
@@ -312,27 +287,17 @@ function sendToClient(client, message) {
       resolve(event.data)
     }
 
-    client.postMessage(JSON.stringify(message), [channel.port2])
+    client.postMessage(message, [channel.port2])
   })
 }
 
-function delayPromise(cb, duration) {
+function sleep(timeMs) {
   return new Promise((resolve) => {
-    setTimeout(() => resolve(cb()), duration)
+    setTimeout(resolve, timeMs)
   })
 }
 
-function respondWithMock(clientMessage) {
-  return new Response(clientMessage.payload.body, {
-    ...clientMessage.payload,
-    headers: clientMessage.payload.headers,
-  })
-}
-
-function uuidv4() {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0
-    const v = c == "x" ? r : (r & 0x3) | 0x8
-    return v.toString(16)
-  })
+async function respondWithMock(response) {
+  await sleep(response.delay)
+  return new Response(response.body, response)
 }
diff --git a/scripts/release_prep.sh b/scripts/release_prep.sh
new file mode 100644
index 000000000..caeb12cd2
--- /dev/null
+++ b/scripts/release_prep.sh
@@ -0,0 +1,164 @@
+#!/bin/bash
+
+set -x
+
+# pre-requisites: install github CLI
+# - github documentation: https://github.com/cli/cli#installation
+# - github is remote 'origin'
+# - PRs should use a test section by convention starting with "## Test" (captures "Tests" "Testing")
+# - PRs should use a deploy notes section by convention starting with "## Deploy Notes"
+# - ALL build and release PRs start with "build: "
+#
+# To run, from root of project:
+# bash scripts/release_prep.sh
+
+has_local_changes=$(git status --porcelain --untracked-files=no --ignored=no)
+if [[ ${has_local_changes} ]]; then
+  set +x
+  echo ==========
+  echo "ABORT: You have local modifications. Please stash or commit changes and run again."
+  echo ==========
+  exit 1
+fi
+
+git fetch --tags --force
+git fetch --all
+git reset --hard
+git pull
+git checkout develop
+git reset --hard origin/develop
+
+short_hash=$(git rev-parse --short HEAD)
+current_version=v$(node -p "require('./package.json').version")
+temp_release_branch=temp_${short_hash}
+
+git checkout -b ${temp_release_branch}
+
+release_version=$(npm --no-git-tag-version version minor | grep -E '^v\d')
+release_branch=release_${release_version}
+may_force_push=
+
+if [[ "$1" == "--recut" ]]; then
+  git tag -d ${release_version}
+  git push --delete origin ${release_version}
+  git branch -D ${release_branch}
+  may_force_push=-f
+fi
+
+git commit -a -n -m "chore: bump version to ${release_version}"
+git tag ${release_version}
+git checkout -b ${release_branch}
+git branch -D ${temp_release_branch}
+
+git push origin ${may_force_push} HEAD:${release_branch}
+git push -f origin HEAD:staging
+git push origin ${release_version}
+
+# Prep temp files to hold extracted content
+pr_body_file=.pr_body_${release_version}
+pr_body_file_grouped=.pr_body_${release_version}_grouped
+pr_body_file_tests=.pr_body_${release_version}_tests
+pr_body_file_notes=.pr_body_${release_version}_notes
+
+# Extract the changelog for the release version specifically, and discard irrelevant lines (empty or not starting with a dash)
+# Line items from the changelog (generated by the command `npm version minor` above) are of the form:
+# - <pr title> [`#<pr_id>`](pr_github_link)
+# Thanks to this deterministic format, we can extract PR ids, and load their data with github API below
+awk "/^#### \[${release_version}\]/{flag=1;next}/####/{flag=0}flag" CHANGELOG.md | sed -E '/^([^-]|[[:space:]]*$)/d' > ${pr_body_file}
+
+# Show new items
+echo "## New" > ${pr_body_file_grouped}
+echo "" >> ${pr_body_file_grouped}
+grep -v -E -- '- [a-z]+\(deps(-dev)?\)' ${pr_body_file} >> ${pr_body_file_grouped}
+echo "" >> ${pr_body_file_grouped}
+
+# Show dependency upgrades
+deps=$(grep -E -- '- [a-z]+\(deps\)' ${pr_body_file})
+if [[ ${deps} =~ [^[:space:]] ]]; then
+  echo "## Dependencies" >> ${pr_body_file_grouped}
+  echo "" >> ${pr_body_file_grouped}
+  echo "${deps}" >> ${pr_body_file_grouped}
+  echo "" >> ${pr_body_file_grouped}
+fi
+
+# Show dev-dependency upgrades
+devdeps=$(grep -E -- '- [a-z]+\(deps-dev\)' ${pr_body_file})
+if [[ ${devdeps} =~ [^[:space:]] ]]; then
+  echo "## Dev-Dependencies" >> ${pr_body_file_grouped}
+  echo "" >> ${pr_body_file_grouped}
+  echo "${devdeps}" >> ${pr_body_file_grouped}
+  echo "" >> ${pr_body_file_grouped}
+fi
+
+# Login to github to be able to query PR info
+if ! gh auth status >/dev/null 2>&1; then
+    gh auth login
+fi
+
+repo_url=$(gh repo view --json url --jq '.url')
+
+# Extract tests and deploy notes from each feature PR
+echo "## Tests" > ${pr_body_file_tests}
+echo "" >> ${pr_body_file_tests}
+
+echo "## Deploy Notes" > ${pr_body_file_notes}
+echo "" >> ${pr_body_file_notes}
+
+# Find relevant line items (feature PRs; not auto dep upgrades or release prs)
+grep -v -E -- '- [a-z]+\(deps(-dev)?\)' ${pr_body_file} | grep -v -E -- '- (release|backport) v' | grep -v -E -- '- \d+\.\d+\.\d+ ' | while read line_item; do
+  pr_id=$(echo ${line_item} | grep -o -E '\[`#\d+`\]' | grep -o -E '\d+')
+  pr_content=$(gh pr view ${pr_id})
+
+  tests=$(echo "$pr_content" | awk "/^## Test/{flag=1;next}/^## /{flag=0}flag" | sed -E "s/\[[Xx]\]/[ ]/" | sed -E "s/^(###+) /\1## /")
+  if [[ ${tests} =~ [^[:space:]] ]]; then
+    echo "${line_item}" | sed "s/^- /### /" >> ${pr_body_file_tests}
+    echo "${tests}" >> ${pr_body_file_tests}
+    echo "" >> ${pr_body_file_tests}
+  fi
+
+  notes=$(echo "$pr_content" | awk "/^## Deploy Notes/{flag=1;next}/^## /{flag=0}flag" | sed -E "s/\[[Xx]\]/[ ]/" | sed -E "s/^(###+) /\1## /")
+  if [[ ${notes} =~ [^[:space:]] ]]; then
+    echo "${line_item}" | sed "s/^- /### /" >> ${pr_body_file_notes}
+    echo "${notes}" >> ${pr_body_file_notes}
+    echo "" >> ${pr_body_file_notes}
+  fi
+done
+
+cat ${pr_body_file_tests} >> ${pr_body_file_grouped}
+cat ${pr_body_file_notes} >> ${pr_body_file_grouped}
+
+echo "" >> ${pr_body_file_grouped}
+
+echo "**Full Changelog**: ${repo_url}/compare/${current_version}..${release_version}" >> ${pr_body_file_grouped}
+
+
+# release pr
+release_pr_url=$(gh pr create \
+  -H ${release_branch} \
+  -B master \
+  -t "release ${release_version}" \
+  -F ${pr_body_file_grouped})
+
+# backport pr
+gh pr create \
+  -H ${release_branch} \
+  -B develop \
+  -t "backport ${release_version}" \
+  -b "Details in ${release_pr_url}"
+
+# prep draft release
+gh release create \
+  --draft \
+  --title "${release_version}" \
+  --generate-notes \
+  --notes-start-tag "${current_version}" \
+  --verify-tag \
+  "${release_version}"
+
+# cleanup
+rm ${pr_body_file}
+rm ${pr_body_file_grouped}
+rm ${pr_body_file_tests}
+rm ${pr_body_file_notes}
+git checkout develop
+git branch -D ${release_branch}
diff --git a/src/App.jsx b/src/App.jsx
index 2642b0282..566f25149 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -59,7 +59,7 @@ if (REACT_APP_ENV === "staging" || REACT_APP_ENV === "production") {
     applicationId: REACT_APP_DATADOG_APP_ID,
     clientToken: REACT_APP_DATADOG_CLIENT_TOKEN,
     site: "datadoghq.com",
-    service: "isomer-infra",
+    service: "isomer",
     env: REACT_APP_ENV,
     // Specify a version number to identify the deployed version of your application in Datadog
     version: REACT_APP_VERSION,
diff --git a/src/__tests__/RouteSelector.spec.jsx b/src/__tests__/RouteSelector.spec.jsx
index 16fa6a0e1..ea5a4b55e 100644
--- a/src/__tests__/RouteSelector.spec.jsx
+++ b/src/__tests__/RouteSelector.spec.jsx
@@ -384,7 +384,7 @@ describe("Tests for RouteSelector", () => {
       render(
         <MemoryRouter
           initialEntries={[
-            "/sites/site-name/resourceRoom/my-resource/resourceCategory/my-category/editPage/my-file",
+            "/sites/site-name/resourceRoom/my-resource/resourceCategory/my-category/editPage/my-file.md",
           ]}
         >
           <LoggedInContextProvider>
@@ -518,7 +518,7 @@ describe("Tests for RouteSelector", () => {
     test("Should render EditPage page for site site-name if logged in", () => {
       // Act
       render(
-        <MemoryRouter initialEntries={["/sites/site-name/editPage/my-file"]}>
+        <MemoryRouter initialEntries={["/sites/site-name/editPage/my-file.md"]}>
           <LoggedInContextProvider>
             <RouteSelector />
           </LoggedInContextProvider>
@@ -551,7 +551,7 @@ describe("Tests for RouteSelector", () => {
       render(
         <MemoryRouter
           initialEntries={[
-            "/sites/site-name/media/my-room/mediaDirectory/my-directory-name",
+            "/sites/site-name/media/images/mediaDirectory/images%2Fmy%20directory%20name",
           ]}
         >
           <LoggedInContextProvider>
@@ -617,7 +617,7 @@ describe("Tests for RouteSelector", () => {
       render(
         <MemoryRouter
           initialEntries={[
-            "/sites/site-name/folders/my-folder/subfolders/my-subfolder",
+            "/sites/site-name/folders/my-folder/subfolders/my%20subfolder",
           ]}
         >
           <LoggedInContextProvider>
@@ -656,7 +656,7 @@ describe("Tests for RouteSelector", () => {
       render(
         <MemoryRouter
           initialEntries={[
-            "/sites/site-name/folders/my-folder/editPage/my-file",
+            "/sites/site-name/folders/my-folder/editPage/my-file.md",
           ]}
         >
           <LoggedInContextProvider>
@@ -693,7 +693,7 @@ describe("Tests for RouteSelector", () => {
       render(
         <MemoryRouter
           initialEntries={[
-            "/sites/site-name/folders/my-folder/subfolders/my-subfolder/editPage/my-file",
+            "/sites/site-name/folders/my-folder/subfolders/my%20subfolder/editPage/my-file.md",
           ]}
         >
           <LoggedInContextProvider>
diff --git a/src/assets/icons/BxSubscript.tsx b/src/assets/icons/BxSubscript.tsx
new file mode 100644
index 000000000..55948d8dc
--- /dev/null
+++ b/src/assets/icons/BxSubscript.tsx
@@ -0,0 +1,23 @@
+export const BxSubscript = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.17707 6.22064H5.34855L7.64119 9.73416L9.96178 6.22064L12.0028 6.26724L8.63839 11.0855L12.1519 16.202H10.0084L7.52935 12.4555L5.12488 16.202H3L6.51351 11.0855L3.17707 6.22064Z"
+        fill="#666C7A"
+      />
+      <path
+        d="M15.2089 13.7031C15.0901 13.561 14.92 13.4899 14.6987 13.4899C14.3958 13.4899 14.1896 13.6029 14.0801 13.8289C14.0172 13.9594 13.9799 14.1668 13.9683 14.451H13.0002C13.0165 14.02 13.0946 13.6717 13.2343 13.4061C13.5 12.9005 13.9718 12.6477 14.6498 12.6477C15.1857 12.6477 15.612 12.7968 15.9289 13.095C16.2458 13.3909 16.4042 13.7835 16.4042 14.2728C16.4042 14.6479 16.2924 14.9811 16.0687 15.2723C15.9219 15.4657 15.6808 15.6812 15.3452 15.9189L14.9468 16.202C14.6975 16.379 14.5263 16.5072 14.4331 16.5864C14.3422 16.6656 14.2653 16.7576 14.2024 16.8625H16.4147V17.7397H12.9443C12.9536 17.3762 13.0316 17.0442 13.1784 16.7437C13.3206 16.4058 13.6561 16.0482 14.185 15.6707C14.6439 15.3422 14.941 15.1069 15.0761 14.9648C15.2835 14.7434 15.3872 14.5011 15.3872 14.2378C15.3872 14.0235 15.3278 13.8452 15.2089 13.7031Z"
+        fill="#666C7A"
+      />
+    </svg>
+  )
+}
diff --git a/src/assets/icons/BxSuperscript.tsx b/src/assets/icons/BxSuperscript.tsx
new file mode 100644
index 000000000..5b0b79f0c
--- /dev/null
+++ b/src/assets/icons/BxSuperscript.tsx
@@ -0,0 +1,23 @@
+export const BxSuperscript = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.18874 6.60465H5.50324L7.94687 10.2639L10.4203 6.60465L12.5957 6.65318L9.00976 11.6713L12.7547 17H10.47L7.82767 13.0981L5.26483 17H3L6.74492 11.6713L3.18874 6.60465Z"
+        fill="#666C7A"
+      />
+      <path
+        d="M15.7149 4.09923C15.5882 3.95121 15.4069 3.8772 15.171 3.8772C14.8482 3.8772 14.6284 3.99489 14.5117 4.23026C14.4446 4.36615 14.4049 4.58211 14.3925 4.87815H13.3606C13.378 4.42924 13.4612 4.06647 13.6102 3.78984C13.8933 3.26328 14.3962 3 15.1188 3C15.69 3 16.1445 3.1553 16.4822 3.4659C16.82 3.77407 16.9888 4.18294 16.9888 4.69252C16.9888 5.0832 16.8696 5.43019 16.6312 5.73351C16.4748 5.93492 16.2177 6.15937 15.8601 6.40688L15.4355 6.70171C15.1698 6.88613 14.9872 7.01959 14.8879 7.10209C14.791 7.18459 14.7091 7.28044 14.642 7.38964H17V8.30323H13.301C13.311 7.92469 13.3941 7.57891 13.5506 7.26588C13.7021 6.91403 14.0597 6.54155 14.6234 6.14845C15.1126 5.80631 15.4293 5.56123 15.5733 5.41321C15.7943 5.18268 15.9048 4.93032 15.9048 4.65612C15.9048 4.43288 15.8415 4.24725 15.7149 4.09923Z"
+        fill="#666C7A"
+      />
+    </svg>
+  )
+}
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index faf366323..48c8f8d0b 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -27,3 +27,5 @@ export * from "./BxDelCol"
 export * from "./BxDelRow"
 export * from "./BxMergeCells"
 export * from "./BxSplitCell"
+export * from "./BxSubscript"
+export * from "./BxSuperscript"
diff --git a/src/components/PageSettingsModal/PageSettingsModal.tsx b/src/components/PageSettingsModal/PageSettingsModal.tsx
index 14fe98706..b90ebc4b1 100644
--- a/src/components/PageSettingsModal/PageSettingsModal.tsx
+++ b/src/components/PageSettingsModal/PageSettingsModal.tsx
@@ -37,6 +37,7 @@ import FormFieldMedia from "components/FormFieldMedia"
 import { LoadingButton } from "components/LoadingButton"
 import { Modal } from "components/Modal"
 
+import { getDefaultPermalink } from "utils/permalink"
 import { isWriteActionsDisabled } from "utils/reviewRequests"
 
 import { PageVariant } from "types/pages"
@@ -96,6 +97,7 @@ export const PageSettingsModal = ({
 }: PageSettingsModalParams) => {
   const { siteName, fileName } = params
   const isTiptapEnabled = useFeatureIsOn("is-tiptap-enabled")
+  const isPageCreated = !fileName
 
   const existingTitlesArray = pagesData
     .filter((page) => page.name !== fileName)
@@ -146,6 +148,14 @@ export const PageSettingsModal = ({
     })
   }
 
+  const currTitle = watch("title")
+  const currPermalink = watch("permalink")
+  useEffect(() => {
+    if (isPageCreated && currPermalink !== getDefaultPermalink(currTitle)) {
+      setValue("permalink", getDefaultPermalink(currTitle))
+    }
+  }, [isPageCreated, setValue, currTitle, currPermalink])
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />
@@ -169,8 +179,17 @@ export const PageSettingsModal = ({
                 isLink={false}
               />
               {/* Title */}
-              <FormControl isRequired isInvalid={!!errors.title?.message}>
-                <FormLabel>Page title</FormLabel>
+              <FormControl
+                isRequired
+                isInvalid={!!errors.title?.message}
+                mb="1rem"
+              >
+                <Box mb="0.75rem">
+                  <FormLabel mb={0}>Page title</FormLabel>
+                  <FormLabel.Description color="text.description">
+                    This appears on the top of the browser window or tab
+                  </FormLabel.Description>
+                </Box>
                 <Input
                   placeholder="Page title"
                   id="title"
@@ -178,23 +197,36 @@ export const PageSettingsModal = ({
                 />
                 <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
               </FormControl>
-              <br />
               {/* Permalink */}
-              <FormControl isInvalid={!!errors.permalink?.message} isRequired>
+              <FormControl
+                isInvalid={!!errors.permalink?.message}
+                isRequired
+                mb="1rem"
+              >
                 <Box mb="0.75rem">
                   <FormLabel mb={0}>Page URL</FormLabel>
                   <FormLabel.Description color="text.description">
-                    {`${siteUrl}${watch("permalink")}`}
+                    {isPageCreated
+                      ? "You can change this later in Page Settings."
+                      : `${siteUrl}${watch("permalink")}`}
                   </FormLabel.Description>
                 </Box>
                 <Input
                   {...register("permalink", { required: true })}
                   id="permalink"
                   placeholder="Insert /page-url or https://"
+                  isDisabled={isPageCreated}
                 />
+                {isPageCreated && (
+                  <Box my="0.5rem">
+                    <Text textStyle="body-2">
+                      {`${siteUrl}${watch("permalink")}`}
+                    </Text>
+                  </Box>
+                )}
+
                 <FormErrorMessage>{errors.permalink?.message}</FormErrorMessage>
               </FormControl>
-              <br />
               {isTiptapEnabled && (
                 <FormControl isInvalid={!!errors.permalink?.message} isRequired>
                   <Flex mb="0.75rem" alignItems="center">
diff --git a/src/components/PageSettingsModal/ResourcePageSettingsModal.tsx b/src/components/PageSettingsModal/ResourcePageSettingsModal.tsx
index 07e16894d..9799a961a 100644
--- a/src/components/PageSettingsModal/ResourcePageSettingsModal.tsx
+++ b/src/components/PageSettingsModal/ResourcePageSettingsModal.tsx
@@ -43,6 +43,7 @@ import FormFieldMedia from "components/FormFieldMedia"
 import { LoadingButton } from "components/LoadingButton"
 import { Modal } from "components/Modal"
 
+import { getDefaultPermalink } from "utils/permalink"
 import { isWriteActionsDisabled } from "utils/reviewRequests"
 
 import { PageVariant } from "types/pages"
@@ -228,6 +229,19 @@ export const ResourcePageSettingsModal = ({
     })
   }
 
+  const isResourcePageCreated = !fileName
+
+  const currTitle = watch("title")
+  const currPermalink = watch("permalink")
+  useEffect(() => {
+    if (
+      isResourcePageCreated &&
+      currPermalink !== getDefaultPermalink(currTitle)
+    ) {
+      setValue("permalink", getDefaultPermalink(currTitle))
+    }
+  }, [isResourcePageCreated, setValue, currTitle, currPermalink])
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />
@@ -235,7 +249,9 @@ export const ResourcePageSettingsModal = ({
         <ModalCloseButton id="settings-CLOSE" />
         <ModalHeader>
           <Text as="h1">
-            {fileName ? "Resource page settings" : "Create new resource"}
+            {isResourcePageCreated
+              ? "Create new resource"
+              : "Resource page settings"}
           </Text>
         </ModalHeader>
         <ModalBody>
@@ -297,14 +313,24 @@ export const ResourcePageSettingsModal = ({
                     <Box mb="0.75rem">
                       <FormLabel mb={0}>Page URL</FormLabel>
                       <FormLabel.Description color="text.description">
-                        {`${siteUrl}${watch("permalink")}`}
+                        {isResourcePageCreated
+                          ? `You can change this later in Resource Page Settings.`
+                          : `${siteUrl}${watch("permalink")}`}
                       </FormLabel.Description>
                     </Box>
                     <Input
                       {...register("permalink", { required: true })}
                       id="permalink"
                       placeholder="Insert /page-url or https://"
+                      isDisabled={isResourcePageCreated}
                     />
+                    {isResourcePageCreated && (
+                      <Box my="0.5rem">
+                        <Text textStyle="body-2">
+                          {`${siteUrl}${watch("permalink")}`}
+                        </Text>
+                      </Box>
+                    )}
                     <FormErrorMessage>
                       {errors.permalink?.message}
                     </FormErrorMessage>
diff --git a/src/hooks/pageHooks/useUpdatePageHook.jsx b/src/hooks/pageHooks/useUpdatePageHook.jsx
index 9d3142fec..0a64b023b 100644
--- a/src/hooks/pageHooks/useUpdatePageHook.jsx
+++ b/src/hooks/pageHooks/useUpdatePageHook.jsx
@@ -15,6 +15,8 @@ import { useSuccessToast, useErrorToast } from "utils/toasts"
 
 import { extractPageInfo } from "./utils"
 
+export const SUCCESSFUL_EDIT_PAGE_TOAST = `Changes saved. See a preview on Staging, or request a Review for them to be published.`
+
 export function useUpdatePageHook(params, queryParams) {
   const queryClient = useQueryClient()
   const { pageService } = useContext(ServicesContext)
@@ -57,7 +59,7 @@ export function useUpdatePageHook(params, queryParams) {
           ]) // invalidates unlinked pages
         successToast({
           id: "update-resource-room-name-success",
-          description: `Changes saved. See a preview on Staging, or request a Review for them to be published.`,
+          description: SUCCESSFUL_EDIT_PAGE_TOAST,
         })
         if (queryParams && queryParams.onSuccess) queryParams.onSuccess(data)
       },
diff --git a/src/layouts/EditPage/hooks/useTiptapEditor.ts b/src/layouts/EditPage/hooks/useTiptapEditor.ts
index 8efd441e9..e32d3d0e7 100644
--- a/src/layouts/EditPage/hooks/useTiptapEditor.ts
+++ b/src/layouts/EditPage/hooks/useTiptapEditor.ts
@@ -3,6 +3,8 @@ import CharacterCount from "@tiptap/extension-character-count"
 import Highlight from "@tiptap/extension-highlight"
 import Link from "@tiptap/extension-link"
 import Placeholder from "@tiptap/extension-placeholder"
+import Subscript from "@tiptap/extension-subscript"
+import Superscript from "@tiptap/extension-superscript"
 import TableCell from "@tiptap/extension-table-cell"
 import TableHeader from "@tiptap/extension-table-header"
 import TableRow from "@tiptap/extension-table-row"
@@ -104,6 +106,8 @@ export const useTiptapEditor = () => {
       }),
       IsomerDetailsGroup,
       TrailingNode,
+      Superscript,
+      Subscript,
     ],
     autofocus: "start",
   })
diff --git a/src/layouts/Media/Media.tsx b/src/layouts/Media/Media.tsx
index 0cac8ceed..44a4f577d 100644
--- a/src/layouts/Media/Media.tsx
+++ b/src/layouts/Media/Media.tsx
@@ -58,7 +58,13 @@ import {
 } from "features/FeatureTour/FeatureTourSequence"
 import { MediaData } from "types/directory"
 import { MediaFolderTypes, MediaLabels, SelectedMediaDto } from "types/media"
-import { DEFAULT_RETRY_MSG, useErrorToast, useSuccessToast } from "utils"
+import {
+  ALLOWED_CHARACTERS_REGEX,
+  DEFAULT_RETRY_MSG,
+  specialCharactersRegexTest,
+  useErrorToast,
+  useSuccessToast,
+} from "utils"
 
 import { CreateButton } from "../components"
 import { SiteEditLayout } from "../layouts"
@@ -259,7 +265,7 @@ export const Media = (): JSX.Element => {
       setSelectedMedia([])
       onCreateMediaFolderModalClose()
     },
-    onSuccess: (data, variables, context) => {
+    onSuccess: (data, variables) => {
       if (variables.selectedPages.length === 0) {
         successToast({
           id: "create-directory-success",
@@ -280,7 +286,7 @@ export const Media = (): JSX.Element => {
         `${url}%2F${encodeURIComponent(variables.newDirectoryName)}`
       )
     },
-    onError: (err, variables, context) => {
+    onError: () => {
       errorToast({
         id: "create-directory-error",
         description: `Your ${singularDirectoryLabel} could not be created successfully. ${DEFAULT_RETRY_MSG}`,
@@ -296,7 +302,7 @@ export const Media = (): JSX.Element => {
       setSelectedMedia([])
       onMoveModalClose()
     },
-    onSuccess: (data, variables, context) => {
+    onSuccess: (data, variables) => {
       successToast({
         id: "move-multiple-media-success",
         description: `Successfully moved ${
@@ -304,7 +310,7 @@ export const Media = (): JSX.Element => {
         }!`,
       })
     },
-    onError: (err, variables, context) => {
+    onError: (err, variables) => {
       errorToast({
         id: "move-multiple-media-error",
         description: `Your ${
@@ -318,7 +324,7 @@ export const Media = (): JSX.Element => {
     mutate: deleteMultipleMedia,
     isLoading: isDeleteMultipleMediaLoading,
   } = useDeleteMultipleMediaHook(params, {
-    onSettled: (data, error, variables, context) => {
+    onSettled: (data, error, variables) => {
       if (variables.length === 1) {
         setSelectedMedia(
           selectedMedia.filter((selectedData) =>
@@ -333,7 +339,7 @@ export const Media = (): JSX.Element => {
       if (individualMedia) setIndividualMedia(null)
       onDeleteModalClose()
     },
-    onSuccess: (data, variables, context) => {
+    onSuccess: (data, variables) => {
       successToast({
         id: "delete-multiple-media-success",
         description: `Successfully deleted ${
@@ -341,7 +347,7 @@ export const Media = (): JSX.Element => {
         }!`,
       })
     },
-    onError: (err, variables, context) => {
+    onError: (err, variables) => {
       errorToast({
         id: "delete-multiple-media-error",
         description: `Your ${
@@ -724,16 +730,43 @@ export const Media = (): JSX.Element => {
           path={[`${path}/editMediaSettings/:fileName`]}
           component={MediaSettingsScreen}
           onClose={() => history.goBack()}
+          validate={{
+            fileName: (value) => {
+              const encodedName = value.split(".").slice(0, -1).join(".")
+              const decodedName = decodeURIComponent(encodedName)
+              return ALLOWED_CHARACTERS_REGEX.test(decodedName)
+            },
+          }}
         />
         <ProtectedRouteWithProps
           path={[`${path}/deleteDirectory/:mediaDirectoryName`]}
           component={DeleteWarningScreen}
           onClose={() => history.goBack()}
+          validate={{
+            mediaDirectoryName: (value) => {
+              // NOTE: This value is prepended with either `files|images`
+              // and nested directories are separated by `/` as well.
+              const decodedValues = decodeURIComponent(value).split("/")
+              return decodedValues.every((val) =>
+                ALLOWED_CHARACTERS_REGEX.test(val)
+              )
+            },
+          }}
         />
         <ProtectedRouteWithProps
           path={[`${path}/editDirectorySettings/:mediaDirectoryName`]}
           component={DirectorySettingsScreen}
           onClose={() => history.goBack()}
+          validate={{
+            mediaDirectoryName: (value) => {
+              // NOTE: This value is prepended with either `files|images`
+              // and nested directories are separated by `/` as well.
+              const decodedValues = decodeURIComponent(value).split("/")
+              return decodedValues.every((val) =>
+                ALLOWED_CHARACTERS_REGEX.test(val)
+              )
+            },
+          }}
         />
       </Switch>
     </>
diff --git a/src/layouts/ResourceRoom/ResourceRoom.tsx b/src/layouts/ResourceRoom/ResourceRoom.tsx
index c1d0b2281..57a608019 100644
--- a/src/layouts/ResourceRoom/ResourceRoom.tsx
+++ b/src/layouts/ResourceRoom/ResourceRoom.tsx
@@ -62,13 +62,20 @@ import { useErrorToast, useSuccessToast } from "utils/toasts"
 
 import { DirectoryData, DirectoryInfoProps } from "types/directory"
 import { ResourceRoomRouteParams } from "types/resources"
-import { DEFAULT_RETRY_MSG, deslugifyDirectory } from "utils"
+import {
+  DEFAULT_RETRY_MSG,
+  deslugifyDirectory,
+  resourceCategoryRegexTest,
+} from "utils"
 
 import { ResourceRoomNameUpdateProps } from "../../types/directory"
 import { SiteEditLayout } from "../layouts"
 
 import { CategoryCard, ResourceBreadcrumb } from "./components"
 
+const INVALID_CHAR_MESSAGE =
+  "Please ensure that you only use alphanumeric characters with dashes and space!"
+
 const EmptyResourceRoom = () => {
   const params = useParams<ResourceRoomRouteParams>()
   const { siteName } = params
@@ -142,6 +149,10 @@ const EmptyResourceRoom = () => {
                 placeholder="Resource room name"
                 {...register("newDirectoryName", {
                   required: "Please enter resource room name",
+                  pattern: {
+                    value: resourceCategoryRegexTest,
+                    message: INVALID_CHAR_MESSAGE,
+                  },
                 })}
               />
               <FormErrorMessage>
@@ -379,6 +390,10 @@ const ResourceRoomContent = ({
                   {...register("newDirectoryName", {
                     required:
                       "Please ensure that you have entered a resource room name!",
+                    pattern: {
+                      value: resourceCategoryRegexTest,
+                      message: INVALID_CHAR_MESSAGE,
+                    },
                   })}
                 />
                 <FormErrorMessage>
@@ -394,7 +409,7 @@ const ResourceRoomContent = ({
                 <Button
                   type="submit"
                   isLoading={isUpdateResourceRoomNameLoading}
-                  isDisabled={isWriteDisabled}
+                  isDisabled={isWriteDisabled || !!errors.newDirectoryName}
                 >
                   Save
                 </Button>
diff --git a/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx b/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx
index 4bc487fae..bc5d1f594 100644
--- a/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx
+++ b/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx
@@ -31,6 +31,7 @@ export const BlockWrapper = ({
           backgroundColor="#055AFF"
           textColor="white"
           p="0.25rem"
+          mt="-0.75rem"
         >
           <Text textStyle="caption-1" contentEditable="false">
             {name}
diff --git a/src/layouts/components/Editor/components/MenuBar.tsx b/src/layouts/components/Editor/components/MenuBar.tsx
index 0a9821577..75318ead6 100644
--- a/src/layouts/components/Editor/components/MenuBar.tsx
+++ b/src/layouts/components/Editor/components/MenuBar.tsx
@@ -41,6 +41,8 @@ import { RTE_BLOCKS, RTEBlockValues } from "constants/rteBlocks"
 import { useEditorModal } from "contexts/EditorModalContext"
 
 import {
+  BxSubscript,
+  BxSuperscript,
   EditorAccordionImage,
   EditorCardsImage,
   EditorDividerImage,
@@ -213,7 +215,20 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
       action: () => editor.chain().focus().toggleStrike().run(),
       isActive: () => editor.isActive("strike"),
     },
-
+    {
+      type: "item",
+      icon: BxSuperscript,
+      title: "Superscript",
+      action: () => editor.chain().focus().toggleSuperscript().run(),
+      isActive: () => editor.isActive("superscript"),
+    },
+    {
+      type: "item",
+      icon: BxSubscript,
+      title: "Subscript",
+      action: () => editor.chain().focus().toggleSubscript().run(),
+      isActive: () => editor.isActive("subscript"),
+    },
     {
       type: "divider",
     },
diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx
index f83f57702..e4d1151d0 100644
--- a/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx
+++ b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx
@@ -1,8 +1,6 @@
 import { Box, HStack, Icon, IconButton, Tooltip } from "@chakra-ui/react"
 import { NodeViewContent, NodeViewProps } from "@tiptap/react"
-import { BiPencil, BiPlus, BiTrash } from "react-icons/bi"
-
-import { useEditorDrawerContext } from "contexts/EditorDrawerContext"
+import { BiPlus, BiTrash } from "react-icons/bi"
 
 import { BlockWrapper } from "../../components/BlockWrapper"
 
@@ -14,72 +12,50 @@ export const IsomerDetailGroupView = ({
   const startPos = getPos()
   const endPos = startPos + node.nodeSize
   const activePos = editor.state.selection.anchor
-  const selected = activePos >= startPos && activePos <= endPos
+  const selected = activePos >= startPos && activePos < endPos
 
-  const { onDrawerOpen } = useEditorDrawerContext()
   const otherButtons = (
     <>
       <Box
-        display={selected ? "block" : "none"}
+        display={selected ? "flex" : "none"}
         position="absolute"
         width="100%"
+        justifyContent="end"
       >
         <HStack
+          bgColor="#fafafa"
+          borderRadius="0.25rem"
+          border="1px solid"
           borderColor="base.divider.medium"
-          display="flex"
-          justifyContent="flex-end"
+          boxShadow="0px 8px 12px 0px rgba(187, 187, 187, 0.50)"
+          px="0.5rem"
+          py="0.25rem"
+          mr="-0.5rem"
+          mt="-1.5rem"
         >
-          <Box
-            backgroundColor={selected ? "white" : "transparent"}
-            marginTop="-0.25rem"
-            boxShadow="0px 0px 4px 0px rgba(0, 0, 0, 0.8)"
-            borderRadius="4px"
-          >
-            <Tooltip label="Edit accordion grid" hasArrow placement="top">
-              <IconButton
-                _hover={{ bg: "gray.100" }}
-                _active={{ bg: "gray.200" }}
-                onClick={onDrawerOpen("accordion")}
-                bgColor="transparent"
-                border="none"
-                h="1.75rem"
-                w="1.75rem"
-                minH="1.75rem"
-                minW="1.75rem"
-                p="0.25rem"
-                aria-label="edit accordion block"
-              >
-                <Icon
-                  as={BiPencil}
-                  fontSize="1.25rem"
-                  color="base.content.medium"
-                />
-              </IconButton>
-            </Tooltip>
-            <Tooltip label="Delete accordion " hasArrow placement="top">
-              <IconButton
-                _hover={{ bg: "gray.100" }}
-                _active={{ bg: "gray.200" }}
-                onClick={() => {
-                  editor.chain().focus().unsetDetailsGroup().run()
-                }}
-                bgColor="transparent"
-                border="none"
-                h="1.75rem"
-                w="1.75rem"
-                minH="1.75rem"
-                minW="1.75rem"
-                p="0.25rem"
-                aria-label="delete accordion block"
-              >
-                <Icon
-                  as={BiTrash}
-                  fontSize="1.25rem"
-                  color="interaction.critical.default"
-                />
-              </IconButton>
-            </Tooltip>
-          </Box>
+          <Tooltip label="Delete accordion block" hasArrow placement="top">
+            <IconButton
+              _hover={{ bg: "gray.100" }}
+              _active={{ bg: "gray.200" }}
+              onClick={() => {
+                editor.chain().focus().unsetDetailsGroup().run()
+              }}
+              bgColor="transparent"
+              border="none"
+              h="1.75rem"
+              w="1.75rem"
+              minH="1.75rem"
+              minW="1.75rem"
+              p="0.25rem"
+              aria-label="delete accordion block"
+            >
+              <Icon
+                as={BiTrash}
+                fontSize="1.25rem"
+                color="interaction.critical.default"
+              />
+            </IconButton>
+          </Tooltip>
         </HStack>
       </Box>
       <Box
@@ -87,16 +63,25 @@ export const IsomerDetailGroupView = ({
         bottom="0"
         left="50%"
         transform="translateX(-50%)"
-        mb="-1.5rem"
-        zIndex={1}
-        background="white"
-        h="2.75rem"
-        w="2.75rem"
+        mb="-1rem"
+        zIndex={2}
+        px="0.5rem"
+        py="0.25rem"
+        mr="-0.5rem"
+        bgColor="interaction.mainLight.default"
+        borderRadius="0.25rem"
+        border="1px solid"
+        borderColor="base.divider.medium"
+        boxShadow="0px 8px 12px 0px rgba(187, 187, 187, 0.50)"
       >
         <IconButton
+          _hover={{ bg: "gray.100" }}
+          _active={{ bg: "gray.200" }}
           variant="outline"
           aria-label="Add accordion"
-          icon={<Icon as={BiPlus} w="1.5rem" h="1.5rem" />}
+          icon={
+            <Icon as={BiPlus} fontSize="1.25rem" color="base.content.medium" />
+          }
           onClick={() => {
             editor.chain().appendDetail(startPos, endPos).run()
           }}
@@ -105,14 +90,21 @@ export const IsomerDetailGroupView = ({
           left="50%"
           transform="translateX(-50%)"
           zIndex={2}
-          background="white"
+          bgColor="#fafafa"
+          border=" 1px solid"
+          borderColor="base.divider.medium"
+          h="1.75rem"
+          w="1.75rem"
+          minW="1.75rem"
+          minH="1.75rem"
+          p="0.25rem 0.5rem"
         />
       </Box>
     </>
   )
   return (
     <BlockWrapper
-      name="Accordion grid"
+      name="Accordion"
       isSelected={selected}
       childButtons={otherButtons}
       padding-top="0.5rem"
@@ -120,10 +112,10 @@ export const IsomerDetailGroupView = ({
     >
       <Box
         borderColor="base.divider.strong"
-        borderWidth="1px"
-        mt="1rem"
         h="100%"
         w="100%"
+        borderTop="1px solid #d4d4d4"
+        borderBottom="1px solid #d4d4d4"
       >
         <NodeViewContent />
       </Box>
diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts b/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts
index 8b082d529..803bed29c 100644
--- a/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts
+++ b/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts
@@ -10,7 +10,7 @@ export const IsomerDetails = Details.extend({
       const outerDiv = document.createElement("div")
       const i = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
         "data-type": this.name,
-        class: "isomer-detail",
+        class: "isomer-details",
       })
       Object.entries(i).forEach(([key, value]) =>
         outerDiv.setAttribute(key, value)
diff --git a/src/layouts/components/Editor/styles.scss b/src/layouts/components/Editor/styles.scss
index dc233b983..ece6e9b12 100644
--- a/src/layouts/components/Editor/styles.scss
+++ b/src/layouts/components/Editor/styles.scss
@@ -148,18 +148,8 @@
     border-bottom: 0;
   }
 
-  summary {
-    color: #4372d6;
-    font-size: 1.25rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 1.75rem; /* 140% */
-    letter-spacing: -0.0175rem;
-  }
-
   [data-type="details"] {
     display: flex;
-
     border-bottom: 1px solid #d4d4d4;
     padding: 0.5rem;
     margin-top: 0;
@@ -177,7 +167,9 @@
       color: black;
 
       &::after {
-        content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M16.293%209.29297L12%2013.586L7.70697%209.29297L6.29297%2010.707L12%2016.414L17.707%2010.707L16.293%209.29297Z%22%20fill%3D%22%23484848%22%2F%3E%3C%2Fsvg%3E");
+        // Using sgds-icons.chevron-down
+        font-family: "sgds-icons";
+        content: "\E93C";
         justify-content: center;
         align-items: center;
         width: 1.5em;
@@ -193,21 +185,19 @@
       list-style: none;
     }
 
+    &.is-open summary {
+      font-weight: 700;
+    }
+
     &.is-open > button::after {
-      content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.29297%2013.2932L7.70697%2014.7072L12%2010.4142L16.293%2014.7072L17.707%2013.2932L12%207.58618L6.29297%2013.2932Z%22%20fill%3D%22%234372D6%22%2F%3E%3C%2Fsvg%3E");
+      // Using sgds-icons.chevron-down
+      font-family: "sgds-icons";
+      content: "\E93C";
+      transform: rotate(180deg);
     }
 
     :last-child {
       margin-bottom: 0;
     }
-
-    [data-type="detailsContent"] > p {
-      color: #838894;
-      font-size: 1.25rem;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 2.2rem; /* 176% */
-      letter-spacing: -0.0175rem;
-    }
   }
 }
diff --git a/src/routing/ProtectedRoute.tsx b/src/routing/ProtectedRoute.tsx
index 41a282739..e271e7784 100644
--- a/src/routing/ProtectedRoute.tsx
+++ b/src/routing/ProtectedRoute.tsx
@@ -1,7 +1,7 @@
 import { Box, Center, Spinner } from "@chakra-ui/react"
 import { useGrowthBook } from "@growthbook/growthbook-react"
 import axios from "axios"
-import _ from "lodash"
+import _, { identity } from "lodash"
 import { useEffect } from "react"
 import { Redirect, Route, RouteProps, useLocation } from "react-router-dom"
 
@@ -12,6 +12,8 @@ import { getSiteNameAttributeFromPath } from "utils/growthbook"
 
 import { GBAttributes } from "types/featureFlags"
 
+import { WithValidator } from "./types"
+
 // axios settings
 axios.defaults.withCredentials = true
 
@@ -25,7 +27,7 @@ export const ProtectedRoute = ({
   children,
   component: WrappedComponent,
   ...rest
-}: RouteProps): JSX.Element => {
+}: WithValidator<RouteProps>): JSX.Element => {
   const {
     displayedName,
     isLoading,
@@ -35,8 +37,27 @@ export const ProtectedRoute = ({
     contactNumber,
   } = useLoginContext()
   const growthbook = useGrowthBook()
+
   const currPath = useLocation().pathname
   const siteNameFromPath = getSiteNameAttributeFromPath(currPath)
+  const { validate } = rest
+
+  const validateParams = (
+    params: Record<string, string | undefined> | undefined
+  ) => {
+    return _.entries(params)
+      .map(([key, value]) => {
+        // NOTE: There's no provided validation function
+        // so we will assume it's valid
+        if (!validate?.[key]) return true
+
+        // NOTE: If the value is falsy, we will return true as there's nothing to validate
+        if (!value) return true
+
+        return validate[key](value)
+      })
+      .every(identity)
+  }
 
   useEffect(() => {
     if (growthbook) {
@@ -75,7 +96,19 @@ export const ProtectedRoute = ({
   }
 
   if (displayedName && children) {
-    return <Route {...rest}>{children}</Route>
+    return (
+      <Route {...rest}>
+        {({ match }) => {
+          const isValid = validateParams(match?.params)
+
+          if (!isValid) {
+            return <Redirect to="/not-found" />
+          }
+
+          return <>{children}</>
+        }}
+      </Route>
+    )
   }
 
   if (displayedName && WrappedComponent) {
@@ -84,11 +117,17 @@ export const ProtectedRoute = ({
         {...rest}
         render={(props) => {
           const { match } = props
-          const { params } = match
+          const isValid = validateParams(match?.params)
+
+          if (!isValid) {
+            return <Redirect to="/not-found" />
+          }
+
           const newMatch = {
             ...match,
-            decodedParams: getDecodedParams(prune(params)),
+            decodedParams: getDecodedParams(prune(match.params)),
           }
+
           return <WrappedComponent {...rest} {...props} match={newMatch} />
         }}
       />
diff --git a/src/routing/ProtectedRouteWithProps.tsx b/src/routing/ProtectedRouteWithProps.tsx
index 9b6710124..b39568bf8 100644
--- a/src/routing/ProtectedRouteWithProps.tsx
+++ b/src/routing/ProtectedRouteWithProps.tsx
@@ -4,13 +4,16 @@ import { RouteProps as BaseRouteProps } from "react-router-dom"
 import FallbackComponent from "components/FallbackComponent"
 
 import { ProtectedRoute } from "./ProtectedRoute"
+import { WithValidator } from "./types"
 
 type RouteProps = {
   component?: () => JSX.Element
   onClose: () => void
 } & BaseRouteProps
 
-export const ProtectedRouteWithProps = (props: RouteProps): JSX.Element => {
+export const ProtectedRouteWithProps = (
+  props: WithValidator<RouteProps>
+): JSX.Element => {
   return (
     <Sentry.ErrorBoundary fallback={FallbackComponent}>
       <ProtectedRoute {...props} />
diff --git a/src/routing/RouteSelector.jsx b/src/routing/RouteSelector.jsx
index e24d8658d..7f3a265d3 100644
--- a/src/routing/RouteSelector.jsx
+++ b/src/routing/RouteSelector.jsx
@@ -35,6 +35,8 @@ import { Workspace } from "layouts/Workspace"
 import { ProtectedRouteWithProps } from "routing/ProtectedRouteWithProps"
 import RedirectIfLoggedInRoute from "routing/RedirectIfLoggedInRoute"
 
+import { ALLOWED_CHARACTERS_REGEX } from "utils"
+
 import {
   ApprovedReviewRedirect,
   injectApprovalRedirect,
@@ -66,19 +68,34 @@ export const RouteSelector = () => {
         <ProtectedRouteWithProps
           exact
           path={[
-            "/sites/:siteName([a-zA-Z0-9-]+)/resourceRoom/:resourceRoomName/resourceCategory/:resourceCategoryName/editPage/:fileName",
-            "/sites/:siteName([a-zA-Z0-9-]+)/folders/:collectionName/subfolders/:subCollectionName/editPage/:fileName",
-            "/sites/:siteName([a-zA-Z0-9-]+)/folders/:collectionName/editPage/:fileName",
+            "/sites/:siteName([a-zA-Z0-9-]+)/resourceRoom/:resourceRoomName([a-zA-Z0-9-]+)/resourceCategory/:resourceCategoryName([a-zA-Z0-9-]+)/editPage/:fileName",
+            "/sites/:siteName([a-zA-Z0-9-]+)/folders/:collectionName([a-zA-Z0-9-]+)/subfolders/:subCollectionName/editPage/:fileName",
+            "/sites/:siteName([a-zA-Z0-9-]+)/folders/:collectionName([a-zA-Z0-9-]+)/editPage/:fileName",
             "/sites/:siteName([a-zA-Z0-9-]+)/editPage/:fileName",
           ]}
           component={injectApprovalRedirect(EditPage)}
+          validate={{
+            fileName: (value) => {
+              const encodedName = value.split(".").slice(0, -1).join(".")
+              const decodedName = decodeURIComponent(encodedName)
+              return ALLOWED_CHARACTERS_REGEX.test(decodedName)
+            },
+            subCollectionName: (value) => {
+              return ALLOWED_CHARACTERS_REGEX.test(decodeURIComponent(value))
+            },
+          }}
         />
 
         <ProtectedRouteWithProps
           path={[
-            "/sites/:siteName([a-zA-Z0-9-]+)/folders/:collectionName/subfolders/:subCollectionName",
-            "/sites/:siteName([a-zA-Z0-9-]+)/folders/:collectionName",
+            "/sites/:siteName([a-zA-Z0-9-]+)/folders/:collectionName([a-zA-Z0-9-]+)/subfolders/:subCollectionName",
+            "/sites/:siteName([a-zA-Z0-9-]+)/folders/:collectionName([a-zA-Z0-9-]+)",
           ]}
+          validate={{
+            subCollectionName: (value) => {
+              return ALLOWED_CHARACTERS_REGEX.test(decodeURIComponent(value))
+            },
+          }}
         >
           <ApprovedReviewRedirect>
             <Folders />
@@ -93,8 +110,18 @@ export const RouteSelector = () => {
 
         <ProtectedRouteWithProps
           path={[
-            "/sites/:siteName([a-zA-Z0-9-]+)/media/:mediaRoom/mediaDirectory/:mediaDirectoryName",
+            "/sites/:siteName([a-zA-Z0-9-]+)/media/:mediaRoom(images|files)/mediaDirectory/:mediaDirectoryName",
           ]}
+          validate={{
+            mediaDirectoryName: (value) => {
+              // NOTE: This value is prepended with either `files|images`
+              // and nested directories are separated by `/` as well.
+              const decodedValues = decodeURIComponent(value).split("/")
+              return decodedValues.every((val) =>
+                ALLOWED_CHARACTERS_REGEX.test(val)
+              )
+            },
+          }}
         >
           <ApprovedReviewRedirect>
             <Media />
@@ -119,7 +146,7 @@ export const RouteSelector = () => {
           </SiteLaunchProvider>
         </ProtectedRouteWithProps>
 
-        <ProtectedRouteWithProps path="/sites/:siteName([a-zA-Z0-9-]+)/review/:reviewId">
+        <ProtectedRouteWithProps path="/sites/:siteName([a-zA-Z0-9-]+)/review/:reviewId([0-9]+)">
           <ReviewRequestRoleProvider>
             <ReviewRequestDashboard />
           </ReviewRequestRoleProvider>
@@ -141,7 +168,7 @@ export const RouteSelector = () => {
           component={injectApprovalRedirect(EditContactUs)}
         />
 
-        <ProtectedRouteWithProps path="/sites/:siteName([a-zA-Z0-9-]+)/resourceRoom/:resourceRoomName/resourceCategory/:resourceCategoryName">
+        <ProtectedRouteWithProps path="/sites/:siteName([a-zA-Z0-9-]+)/resourceRoom/:resourceRoomName([a-zA-Z0-9-]+)/resourceCategory/:resourceCategoryName([a-zA-Z0-9-]+)">
           <ApprovedReviewRedirect>
             <ResourceCategory />
           </ApprovedReviewRedirect>
@@ -149,7 +176,7 @@ export const RouteSelector = () => {
 
         <ProtectedRouteWithProps
           path={[
-            "/sites/:siteName([a-zA-Z0-9-]+)/resourceRoom/:resourceRoomName",
+            "/sites/:siteName([a-zA-Z0-9-]+)/resourceRoom/:resourceRoomName([a-zA-Z0-9-]+)",
             "/sites/:siteName([a-zA-Z0-9-]+)/resourceRoom",
           ]}
         >
diff --git a/src/routing/types.ts b/src/routing/types.ts
new file mode 100644
index 000000000..7e07fff2e
--- /dev/null
+++ b/src/routing/types.ts
@@ -0,0 +1,5 @@
+// NOTE: If it returns true, it is a valid value.
+// Otherwise, it is invalid and we should reject.
+// This is inline w/ validation libraries.
+export type Validator = (value: string) => boolean
+export type WithValidator<T> = T & { validate?: Record<string, Validator> }
diff --git a/src/styles/isomer-cms/pages/Editor.module.scss b/src/styles/isomer-cms/pages/Editor.module.scss
index f87e2f837..68e806ed4 100644
--- a/src/styles/isomer-cms/pages/Editor.module.scss
+++ b/src/styles/isomer-cms/pages/Editor.module.scss
@@ -188,9 +188,11 @@ details.isomer-details summary::marker {
 }
 
 details.isomer-details summary::after {
-  content: url("https://raw.githubusercontent.com/atisawd/boxicons/master/svg/solid/bxs-chevron-down.svg");
+  // Using sgds-icons.chevron-down
+  font-family: "sgds-icons";
+  content: "\E93C";
   transition: 0.25s transform ease;
-  padding-top: 0.25rem;
+  margin-left: 0.75rem;
 }
 
 details.isomer-details[open] summary::after {
@@ -217,8 +219,7 @@ details.isomer-details {
     flex: 1 1 auto;
   }
 
-  div.isomer-details-content > p {
-    color: var(--site-secondary-color);
+  div.isomer-details-content > * {
     margin-left: 1rem;
     margin-right: 1.25rem;
     margin-bottom: 1rem;
@@ -251,7 +252,10 @@ details.isomer-details ~ details.isomer-details {
 
 .isomer-accordion-white > details.isomer-details > summary {
   background-color: #fff;
-  color: #4372d6;
+}
+
+.isomer-accordion-white > details.isomer-details[open] > summary {
+  font-weight: 700;
 }
 
 .isomer-accordion-gray > details.isomer-details > summary {
diff --git a/src/utils/permalink.ts b/src/utils/permalink.ts
new file mode 100644
index 000000000..8fce88ce5
--- /dev/null
+++ b/src/utils/permalink.ts
@@ -0,0 +1,8 @@
+export const getDefaultPermalink = (title: string) => {
+  if (!title) return ""
+  const titleSlug = title
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+  return `/${titleSlug}/`
+}
diff --git a/src/utils/validators.js b/src/utils/validators.js
index 288c254af..7cab88c03 100644
--- a/src/utils/validators.js
+++ b/src/utils/validators.js
@@ -63,6 +63,11 @@ export const fileNameExtensionRegexTest = /^[a-zA-z]{3,4}$/
 export const RESOURCE_CATEGORY_REGEX = "^([a-zA-Z0-9]*[- ]?)+$"
 export const slugifyLowerFalseRegexTest = /^([a-zA-Z0-9]+-)*[a-zA-Z0-9]+$/
 export const resourceCategoryRegexTest = RegExp(RESOURCE_CATEGORY_REGEX)
+// NOTE: This is a negation of the specialCharactersRegex
+// and also allows for `-`.
+// This is because of migration of pre-cms sites from github
+// over to cms allows for dashes in the file/folder name.
+export const ALLOWED_CHARACTERS_REGEX = /[^~%^*_+./\\`;~{}[\]"<>]/
 export const specialCharactersRegexTest = /[~%^*_+\-./\\`;~{}[\]"<>]/
 export const jekyllFirstCharacterRegexTest = /^[._#~]/
 export const mediaSpecialCharactersRegexTest = /[~%^?*+#./\\`;~{}[\]"<>]/