diff --git a/cypress.config.js b/cypress.config.js
index 2a88f86fa1..169a8f3dd4 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -5,6 +5,7 @@ module.exports = defineConfig({
   viewportWidth: 1920,
   viewportHeight: 1080,
   video: false,
+  defaultCommandTimeout: 15000,
   env: {
     API_AUTH: "https://auth.api.dev.zesty.io",
     COOKIE_NAME: "DEV_APP_SID",
diff --git a/cypress/e2e/content/pages/ContentItemPage.js b/cypress/e2e/content/pages/ContentItemPage.js
new file mode 100644
index 0000000000..b2379e8e0d
--- /dev/null
+++ b/cypress/e2e/content/pages/ContentItemPage.js
@@ -0,0 +1,24 @@
+class ContentItemPage {
+  elements = {
+    createItemButton: () => cy.getBySelector("CreateItemSaveButton"),
+    duoModeToggle: () => cy.getBySelector("DuoModeToggle"),
+    moreMenu: () => cy.getBySelector("ContentItemMoreButton"),
+    deleteItemButton: () => cy.getBySelector("DeleteContentItem"),
+    confirmDeleteItemButton: () =>
+      cy.getBySelector("DeleteContentItemConfirmButton"),
+    versionSelector: () => cy.getBySelector("VersionSelector"),
+    versionItem: () => cy.getBySelector("VersionItem"),
+    addWorkflowStatusLabel: () => cy.getBySelector("AddWorkflowStatusLabel"),
+    workflowStatusLabelOption: () =>
+      cy.getBySelector("WorkflowStatusLabelOption"),
+    activeWorkflowStatusLabel: () =>
+      cy.getBySelector("ActiveWorkflowStatusLabel"),
+    publishItemButton: () => cy.getBySelector("PublishButton"),
+    confirmPublishItemButton: () => cy.getBySelector("ConfirmPublishButton"),
+    toast: () => cy.getBySelector("toast"),
+    contentPublishedIndicator: () =>
+      cy.getBySelector("ContentPublishedIndicator"),
+  };
+}
+
+export default new ContentItemPage();
diff --git a/cypress/e2e/content/workflows.spec.js b/cypress/e2e/content/workflows.spec.js
new file mode 100644
index 0000000000..2775672194
--- /dev/null
+++ b/cypress/e2e/content/workflows.spec.js
@@ -0,0 +1,198 @@
+import ContentItemPage from "./pages/ContentItemPage";
+import CONFIG from "../../../src/shell/app.config";
+import instanceZUID from "../../../src/utility/instanceZUID";
+
+const INSTANCE_API = `${
+  CONFIG?.[process.env.NODE_ENV]?.API_INSTANCE_PROTOCOL
+}${instanceZUID}${CONFIG?.[process.env.NODE_ENV]?.API_INSTANCE}`;
+const TITLES = {
+  contentItem: "Content item workflow test",
+  publishLabel: "Publish Approval",
+  testLabel: "Random Test Label",
+};
+const LABEL_DATA = {
+  publishLabel: {
+    name: TITLES.publishLabel,
+    description: "",
+    color: "#4E5BA6",
+    allowPublish: true,
+    addPermissionRoles: ["30-86f8ccec82-swp72s", "30-8ee88afe82-gmx631"],
+    removePermissionRoles: ["30-86f8ccec82-swp72s", "30-8ee88afe82-gmx631"],
+  },
+  testLabel: {
+    name: TITLES.testLabel,
+    description: "",
+    color: "#4E5BA6",
+    allowPublish: false,
+    addPermissionRoles: ["30-86f8ccec82-swp72s", "30-8ee88afe82-gmx631"],
+    removePermissionRoles: ["30-86f8ccec82-swp72s", "30-8ee88afe82-gmx631"],
+  },
+};
+
+describe("Content Item Workflows", () => {
+  before(() => {
+    cy.intercept("POST", "**/labels").as("createLabel");
+    cy.intercept("GET", "**/labels*").as("getLabels");
+
+    // Create allow publish workflow label
+    Object.values(LABEL_DATA).forEach((data) => {
+      cy.apiRequest({
+        method: "POST",
+        url: `${INSTANCE_API}/env/labels`,
+        body: data,
+      });
+    });
+
+    // Visit test page
+    cy.apiRequest({
+      method: "POST",
+      url: `${INSTANCE_API}/content/models/6-b6cde1aa9f-wftv50/items`,
+      body: {
+        data: {
+          title: TITLES.contentItem,
+          description: TITLES.contentItem,
+          tc_title: TITLES.contentItem,
+          tc_description: TITLES.contentItem,
+          tc_image: null,
+        },
+        web: {
+          canonicalTagMode: 1,
+          parentZUID: "0",
+          metaLinkText: TITLES.contentItem,
+          metaTitle: TITLES.contentItem,
+          pathPart: TITLES.contentItem?.replaceAll(" ", "-")?.toLowerCase(),
+          metaDescription: TITLES.contentItem,
+        },
+        meta: { langID: 1, contentModelZUID: "6-b6cde1aa9f-wftv50" },
+      },
+    }).then((response) => {
+      cy.visit(`/content/6-b6cde1aa9f-wftv50/${response.data?.ZUID}`);
+    });
+  });
+
+  after(() => {
+    // Delete test content item
+    cy.location("pathname").then((loc) => {
+      const [_, __, modelZUID, itemZUID] = loc?.split("/");
+      cy.apiRequest({
+        method: "DELETE",
+        url: `${INSTANCE_API}/content/models/${modelZUID}/items/${itemZUID}`,
+      });
+    });
+
+    // Delete test labels
+    cy.apiRequest({ url: `${INSTANCE_API}/env/labels?showDeleted=true` }).then(
+      (response) => {
+        response?.data
+          ?.filter(
+            (label) =>
+              !label?.deletedAt &&
+              [TITLES.publishLabel, TITLES.testLabel].includes(label?.name)
+          )
+          .forEach((label) => {
+            cy.apiRequest({
+              url: `${INSTANCE_API}/env/labels/${label.ZUID}`,
+              method: "DELETE",
+            });
+          });
+      }
+    );
+  });
+
+  it("Can add a workflow label", () => {
+    ContentItemPage.elements.versionSelector().should("exist").click();
+    ContentItemPage.elements.addWorkflowStatusLabel().should("exist").click();
+    ContentItemPage.elements
+      .workflowStatusLabelOption()
+      .contains(TITLES.testLabel)
+      .should("exist")
+      .click({ force: true });
+
+    cy.get("body").type("{esc}");
+
+    cy.intercept("PUT", "**/labels/*").as("updateLabel");
+    cy.wait("@updateLabel");
+
+    cy.reload();
+
+    ContentItemPage.elements.versionSelector().should("exist").click();
+    ContentItemPage.elements
+      .versionItem()
+      .first()
+      .within(() => {
+        ContentItemPage.elements
+          .activeWorkflowStatusLabel()
+          .should("have.length", 1);
+      });
+
+    cy.get("body").type("{esc}");
+  });
+
+  it("Cannot add a workflow label when role has no permission", () => {
+    ContentItemPage.elements.versionSelector().should("exist").click();
+    ContentItemPage.elements.addWorkflowStatusLabel().should("exist").click();
+    ContentItemPage.elements
+      .workflowStatusLabelOption()
+      .first()
+      .should("exist")
+      .click({ force: true });
+
+    cy.get("body").type("{esc}");
+
+    cy.reload();
+
+    ContentItemPage.elements.versionSelector().should("exist").click();
+    ContentItemPage.elements
+      .versionItem()
+      .first()
+      .within(() => {
+        ContentItemPage.elements
+          .activeWorkflowStatusLabel()
+          .should("have.length", 1);
+      });
+
+    cy.get("body").type("{esc}");
+  });
+
+  it("Cannot publish a content item if label with allowPublish is missing", () => {
+    ContentItemPage.elements
+      .publishItemButton()
+      .should("exist")
+      .click({ force: true });
+    ContentItemPage.elements
+      .confirmPublishItemButton()
+      .should("exist")
+      .click({ force: true });
+    ContentItemPage.elements
+      .toast()
+      .contains(
+        `Cannot Publish: "${TITLES.contentItem}". Does not have a status that allows publishing`
+      );
+  });
+
+  it("Can publish a content item if label with allowPublish is applied", () => {
+    cy.reload();
+    ContentItemPage.elements.versionSelector().should("exist").click();
+    ContentItemPage.elements.addWorkflowStatusLabel().should("exist").click();
+    ContentItemPage.elements
+      .workflowStatusLabelOption()
+      .contains(TITLES.publishLabel)
+      .should("exist")
+      .click({ force: true });
+
+    cy.get("body").type("{esc}");
+
+    cy.intercept("PUT", "**/labels/*").as("updateLabel");
+    cy.wait("@updateLabel");
+
+    cy.reload();
+
+    ContentItemPage.elements.publishItemButton().should("exist").click();
+    ContentItemPage.elements.confirmPublishItemButton().should("exist").click();
+
+    cy.intercept("GET", "**/publishings").as("publish");
+    cy.wait("@publish");
+
+    ContentItemPage.elements.contentPublishedIndicator().should("exist");
+  });
+});
diff --git a/cypress/e2e/settings/workflows.spec.js b/cypress/e2e/settings/workflows.spec.js
new file mode 100644
index 0000000000..1ecc8b48c8
--- /dev/null
+++ b/cypress/e2e/settings/workflows.spec.js
@@ -0,0 +1,530 @@
+import instanceZUID from "../../../src/utility/instanceZUID";
+import CONFIG from "../../../src/shell/app.config";
+import {
+  AUTHORIZED_ROLES,
+  colorMenu,
+} from "../../../src/apps/settings/src/app/views/User/Workflows/constants";
+
+const TIMEOUT = { timeout: 40_000 };
+
+const INSTANCE_API = `${
+  CONFIG?.[process.env.NODE_ENV]?.API_INSTANCE_PROTOCOL
+}${instanceZUID}${CONFIG?.[process.env.NODE_ENV]?.API_INSTANCE}`;
+
+const FOCUSED_LABEL_COLOR = "rgba(253, 133, 58, 0.1)";
+
+const ENDPOINTS = {
+  userRoles: "**/v1/users/**/roles",
+  instanceUserRoles: `**/v1/instances/**/users/roles`,
+  allStatusLabels: "**/v1/env/labels?showDeleted=true",
+  statusLabels: "**/v1/env/labels",
+};
+
+const RESTRICTED_USER = {
+  data: [
+    {
+      ZUID: "30-8ee88afe82-gmx631",
+      entityZUID: "8-f48cf3a682-7fthvk",
+      name: "Developer",
+      systemRoleZUID: "31-71cfc74-d3v3l0p3r",
+      systemRole: {
+        ZUID: "31-71cfc74-d3v3l0p3r",
+        name: "Developer",
+      },
+    },
+  ],
+};
+
+const LABELS = {
+  restrictedPageHeader: "You need permission to view and edit workflows",
+  restrictedPageSubheader:
+    "Contact the instance owner or administrators listed below to upgrade your role to Admin or Owner",
+  activeLabelsHeader: "Active Statuses",
+  activeLabelsSubheader:
+    "Active statuses are available to be added and removed from content items",
+  deactivatedLabelsHeader: "Deactivated Statuses",
+  deactivatedLabelsSubheader:
+    "These statuses can be re-activated at any time if you would like to add or remove them from content items",
+};
+
+const EMPTY_SEARCH_TEXT = "xx_yy_zz_00";
+
+const TEST_DATA = {
+  new: {
+    name: "Test__new",
+    description: "Test__new Description",
+    color: "Grey",
+    addPermissionRoles: "Admin",
+    removePermissionRoles: "Admin",
+    allowPublish: true,
+  },
+  edited: {
+    name: "Test__edited",
+    description: "Test__edited Description",
+    color: "Pink",
+    addPermissionRoles: [],
+    removePermissionRoles: [],
+    allowPublish: true,
+  },
+  temp1: {
+    name: "Test__temp1",
+    description: "Test__temp1 Description",
+    color: "Red",
+    addPermissionRoles: [],
+    removePermissionRoles: [],
+    allowPublish: false,
+  },
+  temp2: {
+    name: "Test__temp2",
+    description: "Test__temp2 Description",
+    color: "Yellow",
+    addPermissionRoles: [],
+    removePermissionRoles: [],
+    allowPublish: false,
+  },
+  temp3: {
+    name: "Test__temp3",
+    description: "Test__temp3 Description",
+    color: "Purple",
+    addPermissionRoles: [],
+    removePermissionRoles: [],
+    allowPublish: false,
+  },
+};
+
+before(() => {
+  cy.cleanTestData();
+  cy.createTestData();
+});
+
+after(() => {
+  cy.cleanTestData();
+});
+
+describe("Restricted User", { retries: 1 }, () => {
+  it("displays restricted access message and admin profiles", () => {
+    cy.intercept("GET", ENDPOINTS?.userRoles, {
+      statusCode: 200,
+      body: RESTRICTED_USER,
+    }).as("getRestrictedUser");
+    cy.intercept("GET", ENDPOINTS?.instanceUserRoles).as(
+      "getInstanceUserRoles"
+    );
+
+    cy.visit("/settings/user/workflows");
+    cy.get('[data-cy="workflows-restricted-page"]', TIMEOUT);
+
+    cy.wait("@getInstanceUserRoles")
+      .its("response.body.data")
+      .then((users) => {
+        const authorizedUsers = users.filter((user) =>
+          AUTHORIZED_ROLES.includes(user?.role?.systemRoleZUID)
+        );
+        cy.get('[data-cy="user-profile-container"] > *').should(
+          "have.length",
+          authorizedUsers.length
+        );
+      });
+    cy.contains(LABELS?.restrictedPageHeader).should("exist");
+    cy.contains(LABELS?.restrictedPageSubheader).should("exist");
+    cy.get('[data-cy="restricted-image"]').should("exist");
+  });
+});
+
+describe("Authorized User", { retries: 1 }, () => {
+  before(() => {
+    cy.goToWorkflowsPage();
+  });
+
+  it("displays workflow page elements for authorized users", () => {
+    cy.get('[data-cy="active-labels-container"]', TIMEOUT);
+
+    cy.contains("Workflows").should("exist");
+    cy.get("button").contains("Create Status").should("exist");
+    cy.get('input[placeholder="Search Statuses"]').should("exist");
+    cy.get('input[value="deactivated"]').should("exist");
+  });
+
+  it("Show Deactivated Labels: Displays active and deactivated sections", () => {
+    cy.get('input[value="deactivated"]').click();
+    cy.contains(LABELS.activeLabelsHeader).should("exist");
+    cy.contains(LABELS.deactivatedLabelsHeader).should("exist");
+  });
+});
+
+describe("Create New Status Label", { retries: 1 }, () => {
+  before(() => {
+    cy.goToWorkflowsPage();
+  });
+
+  it("Form Validation: should display error message when required fields are empty", function () {
+    cy.get("button").contains("Create Status").click(TIMEOUT);
+
+    cy.get('[data-cy="status-label-form"]', TIMEOUT);
+
+    const nameFieldErrorMessage = "Name is required";
+    cy.get('[data-cy="status-label-submit-button"]').click();
+    cy.contains(nameFieldErrorMessage).should("exist");
+    cy.get("button").contains("Cancel").click();
+  });
+
+  it("Fills out and submits form", () => {
+    cy.get("button").contains("Create Status").click(TIMEOUT);
+
+    cy.get('[data-cy="status-label-form"]', TIMEOUT);
+
+    cy.get('input[name="name"]').type(TEST_DATA.new.name);
+    cy.get('textarea[name="description"]').type(TEST_DATA.new.description);
+    cy.get('input[name="color"]').parent().find("button").click();
+    cy.get('ul li[role="option"]').contains(TEST_DATA.new.color).click();
+
+    cy.get('input[name="addPermissionRoles"]').parent().find("button").click();
+    cy.get('ul li[role="option"]')
+      .contains(TEST_DATA.new.addPermissionRoles)
+      .click();
+    cy.get('form[role="dialog"]').click();
+
+    cy.get('input[name="removePermissionRoles"]')
+      .parent()
+      .find("button")
+      .click();
+    cy.get('ul li[role="option"]')
+      .contains(TEST_DATA.new.removePermissionRoles)
+      .click();
+    cy.get('form[role="dialog"]').click();
+
+    if (TEST_DATA.new.allowPublish) {
+      cy.get('input[name="allowPublish"]').check();
+    } else {
+      cy.get('input[name="allowPublish"]').uncheck();
+    }
+
+    cy.intercept("POST", ENDPOINTS?.statusLabels).as("createStatusLabel");
+    cy.intercept(ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
+
+    cy.get('[data-cy="status-label-submit-button"]').click();
+
+    cy.wait(["@createStatusLabel", "@getAllStatusLabels"], TIMEOUT).spread(
+      (createStatusLabel, getAllStatusLabels) => {
+        const createdStatusLabel = createStatusLabel?.response?.body?.data;
+        const { active } = parseStatusLabels(
+          getAllStatusLabels?.response?.body?.data
+        );
+
+        expect(createdStatusLabel).to.include({
+          name: TEST_DATA.new.name,
+          description: TEST_DATA.new.description,
+          color: colorMenu.find((color) => color?.label === TEST_DATA.new.color)
+            ?.value,
+          allowPublish: TEST_DATA.new.allowPublish,
+        });
+        expect(createdStatusLabel.addPermissionRoles).to.have.lengthOf(1);
+        expect(createdStatusLabel.removePermissionRoles).to.have.lengthOf(1);
+
+        cy.get(
+          '[data-cy="active-labels-container"] [data-cy="status-label"]'
+        ).should("have.length", active.length);
+      }
+    );
+    cy.wait(1500);
+  });
+
+  it("Highlights the newly created status label.", () => {
+    cy.get('[data-cy="active-labels-container"] [data-cy="status-label"]')
+      .contains(TEST_DATA.new.name)
+      .parents('[data-cy="status-label"]')
+      .should("have.css", "background-color", FOCUSED_LABEL_COLOR, TIMEOUT);
+  });
+
+  it("Clicking outside the focused label restores it to its default state.", () => {
+    cy.get('[data-cy="active-labels-container"]').click();
+    cy.get('[data-cy="active-labels-container"] [data-cy="status-label"]')
+      .contains(TEST_DATA.new.name)
+      .parents('[data-cy="status-label"]')
+      .should("not.have.css", "background-color", FOCUSED_LABEL_COLOR);
+  });
+});
+
+describe("Edit Status Label", { retries: 1 }, () => {
+  it("Open Status Label and Edit Details", () => {
+    cy.goToWorkflowsPage();
+
+    cy.get('[data-cy="active-labels-container"]', TIMEOUT);
+
+    cy.get('[data-cy="active-labels-container"] [data-cy="status-label"]')
+      .contains(TEST_DATA?.temp1?.name)
+      .parents('[data-cy="status-label"]')
+      .find('[data-cy="status-label-more-actions"]')
+      .click({ force: true });
+
+    cy.get('[data-cy="menu-item-edit"]').click({ force: true });
+
+    cy.get('[data-cy="status-label-form"]', TIMEOUT);
+
+    cy.get("button").contains("Deactivate Status").should("be.enabled");
+
+    cy.get('input[name="name"]').clear().type(TEST_DATA.edited.name);
+
+    cy.get('textarea[name="description"]')
+      .clear()
+      .type(TEST_DATA.edited.description);
+
+    cy.get('input[name="color"]').parent().find("button").click();
+    cy.get('ul li[role="option"]').contains(TEST_DATA.edited.color).click();
+
+    cy.intercept("PUT", `${ENDPOINTS?.statusLabels}/**`).as("editStatusLabel");
+    cy.intercept(ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
+
+    cy.get('[data-cy="status-label-submit-button"]').click();
+
+    cy.wait(["@editStatusLabel", "@getAllStatusLabels"], TIMEOUT).spread(
+      (editStatusLabel, getAllStatusLabels) => {
+        const targetLabelZUID = editStatusLabel.response.body.data;
+        const updatedLabel = getAllStatusLabels.response.body.data.find(
+          (label) => label.ZUID === targetLabelZUID
+        );
+
+        expect(editStatusLabel.response.statusCode).to.eq(200);
+        expect(getAllStatusLabels.response.statusCode).to.eq(200);
+        expect(updatedLabel).to.deep.include({
+          name: TEST_DATA.edited.name,
+          description: TEST_DATA.edited.description,
+          color: colorMenu.find(
+            (color) => color?.label === TEST_DATA.edited.color
+          )?.value,
+        });
+      }
+    );
+  });
+});
+
+describe("Re-order Status Labels", { retries: 1 }, () => {
+  before(() => {
+    cy.goToWorkflowsPage();
+  });
+
+  it("Drag status label to a new position", () => {
+    const dataTransfer = new DataTransfer();
+
+    cy.get('[data-cy="active-labels-container"]', TIMEOUT);
+
+    cy.intercept("PUT", ENDPOINTS.statusLabels).as("reorderStatusLabel");
+    cy.intercept("GET", ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
+
+    cy.get(`[data-cy="status-label"] [data-cy="status-label-drag-handle"]`)
+      .eq(0)
+      .trigger("dragstart", { dataTransfer });
+
+    cy.get(`[data-cy="status-label"] [data-cy="status-label-drag-handle"]`)
+      .eq(1)
+      .trigger("dragover", { dataTransfer })
+      .trigger("drop", { dataTransfer });
+
+    cy.wait(["@reorderStatusLabel", "@getAllStatusLabels"], TIMEOUT).spread(
+      (reorderStatusLabel, getAllStatusLabels) => {
+        const reorderedLabels = reorderStatusLabel?.request?.body?.data;
+        const updatedLabel = getAllStatusLabels?.response?.body?.data;
+
+        expect(reorderStatusLabel.response.statusCode).to.eq(200);
+        expect(getAllStatusLabels.response.statusCode).to.eq(200);
+
+        reorderedLabels.forEach((label) => {
+          expect(
+            updatedLabel.find((item) => item?.ZUID === label?.ZUID)?.sort
+          ).to.eq(label.sort);
+        });
+      }
+    );
+  });
+});
+
+describe("Deactivate Status Label", { retries: 1 }, () => {
+  beforeEach(() => {
+    cy.goToWorkflowsPage();
+  });
+
+  it("Deactivate using menu options", () => {
+    cy.get('[data-cy="active-labels-container"]', TIMEOUT);
+
+    cy.get('[data-cy="active-labels-container"] [data-cy="status-label"]')
+      .contains(TEST_DATA?.temp2?.name)
+      .parents('[data-cy="status-label"]')
+      .find('[data-cy="status-label-more-actions"]')
+      .click(TIMEOUT);
+
+    cy.get('[data-cy="menu-item-deactivate"]').click();
+
+    cy.intercept("DELETE", `${ENDPOINTS?.statusLabels}/**`).as(
+      "deactivateStatusLabel"
+    );
+    cy.intercept("GET", ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
+
+    cy.get('[data-cy="deactivation-dialog-confirm-button"]').click();
+
+    cy.wait(["@deactivateStatusLabel", "@getAllStatusLabels"]).spread(
+      (deactivateStatusLabel, getAllStatusLabels) => {
+        const deactivatedLabel = deactivateStatusLabel?.response?.body?.data;
+        const { active, deactivated } = parseStatusLabels(
+          getAllStatusLabels?.response?.body?.data
+        );
+
+        expect(active?.some((label) => label.ZUID === deactivatedLabel)).to.be
+          .false;
+        expect(deactivated?.some((label) => label.ZUID === deactivatedLabel)).to
+          .be.true;
+      }
+    );
+    cy.wait(1000);
+
+    cy.get(".notistack-Snackbar").contains(
+      new RegExp(`Status De-activated:\\s*${TEST_DATA?.temp2?.name}`)
+    );
+  });
+
+  it("Deactivate using form button", () => {
+    cy.get('[data-cy="active-labels-container"]', TIMEOUT);
+
+    cy.get('[data-cy="active-labels-container"] [data-cy="status-label"]')
+      .contains(TEST_DATA?.temp3?.name)
+      .parents('[data-cy="status-label"]')
+      .find('[data-cy="status-label-more-actions"]')
+      .click(TIMEOUT);
+
+    cy.get('[data-cy="menu-item-edit"]').click();
+
+    cy.intercept("DELETE", `${ENDPOINTS?.statusLabels}/**`).as(
+      "deactivateStatusLabel"
+    );
+    cy.intercept("GET", ENDPOINTS.allStatusLabels).as("getAllStatusLabels");
+
+    cy.get('[data-cy="form-deactivate-status-button"]').click();
+
+    cy.get('[data-cy="deactivation-dialog-confirm-button"]').click();
+
+    cy.wait(["@deactivateStatusLabel", "@getAllStatusLabels"]).spread(
+      (deactivateStatusLabel, getAllStatusLabels) => {
+        const deactivatedLabel = deactivateStatusLabel?.response?.body?.data;
+        const { active, deactivated } = parseStatusLabels(
+          getAllStatusLabels?.response?.body?.data
+        );
+
+        expect(active?.some((label) => label.ZUID === deactivatedLabel)).to.be
+          .false;
+        expect(deactivated?.some((label) => label.ZUID === deactivatedLabel)).to
+          .be.true;
+      }
+    );
+    cy.wait(1000);
+    cy.get(".notistack-Snackbar").contains(
+      new RegExp(`Status De-activated:\\s*${TEST_DATA?.temp3?.name}`)
+    );
+  });
+});
+
+describe("Filter Active and Deactivated Status Labels", { retries: 1 }, () => {
+  before(() => {
+    cy.getStatusLabels().then((data) =>
+      cy.wrap(data).as("activeDeactivatedStatusLabels")
+    );
+    cy.goToWorkflowsPage();
+    cy.get('input[value="deactivated"]').click(TIMEOUT);
+  });
+
+  it("Displays active/deactivated status labels", function () {
+    const { active, deactivated } = this.activeDeactivatedStatusLabels || {};
+    cy.get(
+      '[data-cy="active-labels-container"] [data-cy="status-label"]'
+    ).should("have.length", active?.length);
+    cy.get(
+      '[data-cy="deactivated-labels-container"] [data-cy="status-label"]'
+    ).should("have.length", deactivated?.length);
+  });
+
+  it("Displays Error page when search results returns empty", () => {
+    cy.get('input[placeholder="Search Statuses"]')
+      .clear()
+      .type(EMPTY_SEARCH_TEXT);
+    cy.get(
+      '[data-cy="active-labels-container"], [data-cy="deactivated-labels-container"]'
+    ).should("not.exist");
+    cy.get('[data-cy="no-results-page"]').should("exist");
+  });
+
+  it("Clears and focuses search field when clicking 'Search Again'", () => {
+    cy.get("button").contains("Search Again").click();
+    cy.get(
+      '[data-cy="active-labels-container"], [data-cy="deactivated-labels-container"]'
+    ).should("exist");
+    cy.get('[data-cy="no-results-page"]').should("not.exist");
+    cy.get('input[placeholder="Search Statuses"]').should("be.empty");
+  });
+});
+
+Cypress.Commands.add("goToWorkflowsPage", () => {
+  cy.visit("/settings/user/workflows");
+  cy.get('[data-cy="workflows-authorized-page"]', { timeout: 60_000 });
+});
+
+Cypress.Commands.add("cleanTestData", function () {
+  const testLabels = [
+    TEST_DATA?.new?.name,
+    TEST_DATA?.edited?.name,
+    TEST_DATA?.temp1?.name,
+    TEST_DATA?.temp2?.name,
+    TEST_DATA?.temp3?.name,
+  ];
+
+  cy.apiRequest({ url: `${INSTANCE_API}/env/labels?showDeleted=true` }).then(
+    (response) => {
+      response?.data
+        ?.filter(
+          (label) => !label?.deletedAt && testLabels.includes(label?.name)
+        )
+        .forEach((label) => {
+          cy.apiRequest({
+            url: `${INSTANCE_API}/env/labels/${label.ZUID}`,
+            method: "DELETE",
+          });
+        });
+    }
+  );
+});
+
+Cypress.Commands.add("createTestData", () => {
+  const testLabels = [TEST_DATA?.temp1, TEST_DATA?.temp2, TEST_DATA?.temp3];
+  testLabels.forEach((label) => {
+    cy.apiRequest({
+      url: `${INSTANCE_API}/env/labels`,
+      method: "POST",
+      body: {
+        ...label,
+        color: colorMenu.find((color) => color?.label === label.color)?.value,
+      },
+    });
+  });
+});
+
+Cypress.Commands.add("getStatusLabels", () => {
+  return cy
+    .apiRequest({
+      url: `${INSTANCE_API}/env/labels?showDeleted=true`,
+    })
+    .then((response) => {
+      return parseStatusLabels(response?.data);
+    });
+});
+
+function parseStatusLabels(statusLabels = []) {
+  const { active, deactivated } = statusLabels.reduce(
+    (acc, curr) => {
+      if (!!curr.deletedAt) {
+        acc.deactivated.push(curr);
+      } else {
+        acc.active.push(curr);
+      }
+      return acc;
+    },
+    { active: [], deactivated: [] }
+  );
+  return { active, deactivated };
+}
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 3ecb8d9bef..917707b7c4 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -51,3 +51,23 @@ Cypress.Commands.add("blockAnnouncements", () => {
     req.reply({});
   });
 });
+
+Cypress.Commands.add(
+  "apiRequest",
+  ({ method = "GET", url = "", body = undefined }) => {
+    return cy.getCookie(Cypress.env("COOKIE_NAME")).then((cookie) => {
+      const token = cookie?.value;
+      return cy
+        .request({
+          url,
+          method,
+          headers: { authorization: `Bearer ${token}` },
+          ...(body ? { body: body } : {}),
+        })
+        .then((response) => ({
+          status: response?.isOkStatusCode ? "success" : "error",
+          data: response?.body?.data,
+        }));
+    });
+  }
+);
diff --git a/public/images/restricted-image.svg b/public/images/restricted-image.svg
new file mode 100644
index 0000000000..94152cab0c
--- /dev/null
+++ b/public/images/restricted-image.svg
@@ -0,0 +1,13 @@
+<svg width="320" height="386" viewBox="0 0 320 386" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M257.012 73.9723L159.35 38.918L62.669 73.5396C50.3207 79.3098 39.588 82.8585 39.588 94.3414V151.582C39.3758 191.78 50.3654 231.243 71.3244 265.545C92.2689 300.208 123.318 327.633 160.302 344.136C199.828 331.297 229.343 297.051 247.375 267.796C268.385 233.508 279.425 194.045 279.256 153.833V102.333C279.256 85.9168 270.543 77.925 257.012 73.9723Z" fill="#FF5D0A"/>
+<g opacity="0.3">
+<path d="M160.301 310.899C131.002 297.667 106.441 275.804 89.9042 248.234C73.303 221.09 64.582 189.863 64.7169 158.045V117.884C64.7169 108.796 70.1987 100.256 81.1045 95.178L159.378 65.9228V38.918L62.6974 73.5396C52.5417 77.9538 39.6163 82.8585 39.6163 94.3414V151.582C39.4041 191.78 50.3937 231.243 71.3527 265.545C92.2972 300.208 123.346 327.633 160.33 344.136L160.301 310.899Z" fill="black"/>
+</g>
+<g opacity="0.4">
+<path d="M160.302 344.136C166.927 341.966 173.347 339.214 179.488 335.913C194.551 327.373 208.236 316.605 220.082 303.975C230.847 292.392 240.318 279.67 248.327 266.036C269.616 231.51 280.365 191.522 279.256 150.977V103.689C279.256 80.1465 267.109 78.4154 256.954 73.9723L159.35 38.918V65.9228L238.575 95.6108C249.481 100.718 254.963 109.229 254.963 118.346V158.507C255.098 190.319 246.366 221.54 229.747 248.667C213.59 276.086 189.327 297.819 160.302 310.871V344.136Z" fill="black"/>
+</g>
+<path opacity="0.5" d="M185.258 155.479V147.747C185.036 141.173 182.268 134.942 177.539 130.37C172.81 125.798 166.49 123.242 159.912 123.242C153.334 123.242 147.013 125.798 142.284 130.37C137.555 134.942 134.788 141.173 134.566 147.747V155.624C131.201 156.121 128.127 157.811 125.903 160.384C123.679 162.958 122.453 166.244 122.448 169.645V215.23C122.456 218.99 123.955 222.593 126.616 225.249C129.277 227.905 132.883 229.396 136.643 229.396H183.959C185.822 229.4 187.667 229.037 189.389 228.326C191.111 227.616 192.676 226.573 193.995 225.258C195.313 223.942 196.359 222.379 197.073 220.658C197.787 218.938 198.154 217.093 198.154 215.23V169.645C198.162 166.1 196.842 162.68 194.456 160.059C192.069 157.437 188.788 155.804 185.258 155.479ZM166.793 203.834H154.415L156.349 194.919C154.982 194.038 153.938 192.738 153.372 191.214C152.806 189.69 152.748 188.023 153.208 186.464C153.667 184.904 154.619 183.535 155.921 182.561C157.223 181.588 158.805 181.061 160.431 181.061C162.057 181.061 163.639 181.588 164.941 182.561C166.243 183.535 167.195 184.904 167.654 186.464C168.114 188.023 168.056 189.69 167.49 191.214C166.924 192.738 165.88 194.038 164.513 194.919L166.793 203.834ZM179.805 155.422H140.019V147.747C140.215 142.602 142.396 137.734 146.105 134.163C149.815 130.592 154.763 128.598 159.912 128.598C165.06 128.598 170.009 130.592 173.718 134.163C177.427 137.734 179.609 142.602 179.805 147.747V155.422Z" fill="white"/>
+<path d="M80.528 154.93C79.7039 152.359 79.2189 149.692 79.0854 146.996C78.3383 140.542 78.0683 134.043 78.2776 127.55C78.2776 123.741 78.6526 120.135 78.9988 116.846C79.1298 113.845 79.8658 110.9 81.1627 108.191C82.1015 106.346 83.5949 104.843 85.4327 103.892C86.7598 103.257 87.5965 103.286 87.5965 103.401C85.2417 104.493 83.3503 106.384 82.259 108.739C81.1967 111.353 80.6199 114.14 80.5568 116.961C80.2972 120.222 80.0952 123.799 79.9798 127.579C79.7778 135.109 79.9798 142.004 80.2683 146.851C80.5847 149.532 80.6715 152.234 80.528 154.93Z" fill="white"/>
+<path d="M82.0277 179.857C81.5661 179.857 81.1333 177.52 81.0756 174.606C81.0179 171.692 81.3641 169.326 81.8257 169.297C82.2874 169.268 82.7202 171.663 82.7779 174.577C82.8356 177.491 82.4316 179.857 82.0277 179.857Z" fill="white"/>
+<path d="M290.161 45.0067C292.801 45.6378 295.387 46.4771 297.894 47.5168C300.958 48.7402 303.865 50.3289 306.549 52.2484C310.344 54.8393 313.484 58.2764 315.724 62.2887C318.422 67.3859 319.866 73.0533 319.936 78.8205C319.936 85.1101 319.936 91.919 319.936 99.2761C319.936 113.961 320.08 130.753 319.936 149.477C319.666 170.055 317.013 190.531 312.031 210.498C306.18 233.75 297.141 256.081 285.17 276.856C271.775 300.114 255.177 321.374 235.863 340.012C215.667 359.313 190.74 376.393 161.629 385.452H161.369H161.109C150.914 381.096 140.964 376.184 131.306 370.738C121.431 365.015 111.92 358.685 102.83 351.783C84.07 337.431 67.3723 320.568 53.2054 301.668C22.5566 261.274 4.32207 212.836 0.724921 162.259C-0.198321 150.285 0.0613252 138.456 0.0324739 126.829V92.4095C0.0324739 86.6392 0.0324739 81.2152 0.0324739 75.7046C-0.0572845 72.9219 0.0390751 70.1363 0.320961 67.3665C0.741917 64.5498 1.8961 61.8932 3.66772 59.6632C7.29945 55.5622 11.8052 52.3283 16.8528 50.2C21.671 47.9207 26.518 45.93 31.2785 43.8239L159.926 0.546875H160.071H160.244L255.684 33.1777L281.16 41.8331L287.709 44.1124L289.931 44.9491C289.931 44.9491 289.152 44.7471 287.68 44.2566L281.073 42.0928L255.511 33.4374L160.157 1.38354H160.475L31.942 45.0356C27.2104 47.1418 22.3345 49.1325 17.5164 51.4117C12.6486 53.4642 8.30132 56.5792 4.79292 60.5288C3.16294 62.582 2.10756 65.0313 1.73469 67.6262C1.47201 70.3201 1.38528 73.0282 1.47504 75.7334V92.4383C1.47504 103.661 1.47504 115.115 1.47504 126.714C1.47504 138.312 1.27308 150.141 2.19632 162.028C5.78907 212.325 23.9329 260.491 54.4172 300.658C68.5131 319.449 85.1232 336.214 103.782 350.485C112.812 357.351 122.265 363.644 132.085 369.324C141.729 374.804 151.669 379.745 161.86 384.125H161.369C190.22 375.181 214.888 358.159 235.084 339.059C254.334 320.534 270.892 299.401 284.276 276.279C296.188 255.649 305.225 233.488 311.136 210.411C316.151 190.535 318.852 170.147 319.186 149.65C319.186 130.955 319.186 114.135 319.359 99.4492C319.359 92.0921 319.359 85.2543 319.359 79.0225C319.351 73.3364 317.975 67.7356 315.349 62.6926C313.171 58.7328 310.123 55.3194 306.433 52.71C303.738 50.7919 300.835 49.1852 297.778 47.9207C295.892 47.1296 293.966 46.4362 292.008 45.8434L290.161 45.0067Z" fill="#FF5D0A"/>
+</svg>
diff --git a/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx b/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx
index ff5819d989..effbb06b25 100644
--- a/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx
+++ b/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx
@@ -27,6 +27,7 @@ import {
   useCreateItemPublishingMutation,
   useGetContentItemQuery,
   useGetContentModelFieldsQuery,
+  useGetWorkflowStatusLabelsQuery,
 } from "../../../../../../shell/services/instance";
 import { Error } from "../../components/Editor/Field/FieldShell";
 import {
@@ -100,6 +101,10 @@ export const ItemCreate = () => {
     isSuccess: isSuccessNewModelFields,
     isLoading: isFetchingNewModelFields,
   } = useGetContentModelFieldsQuery(modelZUID);
+  const { data: statusLabels } = useGetWorkflowStatusLabelsQuery();
+  const hasAllowPublishLabel = statusLabels?.some(
+    (label) => label.allowPublish
+  );
 
   // on mount and update modelZUID, load item fields
   useEffect(() => {
@@ -310,28 +315,85 @@ export const ItemCreate = () => {
             break;
 
           case "publishNow":
-            // Make an api call to publish now
-            handlePublish(res.data.ZUID);
-            setWillRedirect(true);
+            if (hasAllowPublishLabel) {
+              // New items will by default have no workflow labels, therefore as long as there's a workflow label
+              // that is used to allow publish permissions, new content items should never be allowed to be published
+              // from the create new content item page
+              dispatch(
+                notify({
+                  message: `Cannot Publish: "${item.web.metaTitle}". Does not have a status that allows publishing`,
+                  kind: "error",
+                })
+              );
+              history.push(
+                `/${
+                  model?.type === "block" ? "blocks" : "content"
+                }/${modelZUID}/${res.data.ZUID}`
+              );
+            } else {
+              // Make an api call to publish now
+              handlePublish(res.data.ZUID);
+              setWillRedirect(true);
+            }
             break;
 
           case "schedulePublish":
-            // Open schedule publish flyout and redirect to item once done
-            setIsScheduleDialogOpen(true);
-            setWillRedirect(true);
+            if (hasAllowPublishLabel) {
+              // New items will by default have no workflow labels, therefore as long as there's a workflow label
+              // that is used to allow publish permissions, new content items should never be allowed to be published
+              // from the create new content item page
+              dispatch(
+                notify({
+                  message: `Cannot Publish: "${item.web.metaTitle}". Does not have a status that allows publishing`,
+                  kind: "error",
+                })
+              );
+              history.push(
+                `/${
+                  model?.type === "block" ? "blocks" : "content"
+                }/${modelZUID}/${res.data.ZUID}`
+              );
+            } else {
+              // Open schedule publish flyout and redirect to item once done
+              setIsScheduleDialogOpen(true);
+              setWillRedirect(true);
+            }
             break;
 
           case "publishAddNew":
-            // Publish but stay on page
-            handlePublish(res.data.ZUID);
-            setWillRedirect(false);
-
+            if (hasAllowPublishLabel) {
+              // New items will by default have no workflow labels, therefore as long as there's a workflow label
+              // that is used to allow publish permissions, new content items should never be allowed to be published
+              // from the create new content item page
+              dispatch(
+                notify({
+                  message: `Cannot Publish: "${item.web.metaTitle}". Does not have a status that allows publishing`,
+                  kind: "error",
+                })
+              );
+            } else {
+              // Publish but stay on page
+              handlePublish(res.data.ZUID);
+              setWillRedirect(false);
+            }
             break;
 
           case "schedulePublishAddNew":
-            // Open schedule publish flyout but stay on page once done
-            setIsScheduleDialogOpen(true);
-            setWillRedirect(false);
+            if (hasAllowPublishLabel) {
+              // New items will by default have no workflow labels, therefore as long as there's a workflow label
+              // that is used to allow publish permissions, new content items should never be allowed to be published
+              // from the create new content item page
+              dispatch(
+                notify({
+                  message: `Cannot Publish: "${item.web.metaTitle}". Does not have a status that allows publishing`,
+                  kind: "error",
+                })
+              );
+            } else {
+              // Open schedule publish flyout but stay on page once done
+              setIsScheduleDialogOpen(true);
+              setWillRedirect(false);
+            }
             break;
 
           default:
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx
index dafbf137f4..f25252523a 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx
@@ -18,6 +18,8 @@ import {
   useGetAuditsQuery,
   useGetContentModelFieldsQuery,
   useGetItemPublishingsQuery,
+  useGetItemWorkflowStatusQuery,
+  useGetWorkflowStatusLabelsQuery,
 } from "../../../../../../../../shell/services/instance";
 import { useHistory, useParams } from "react-router";
 import { useEffect, useMemo, useState } from "react";
@@ -50,6 +52,8 @@ import {
   ContentModel,
 } from "../../../../../../../../shell/services/types";
 import { SchedulePublish } from "../../../../../../../../shell/components/SchedulePublish";
+import { notify } from "../../../../../../../../shell/store/notifications";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { ConfirmPublishModal } from "../../../../../../../../shell/components/ConfirmPublishModal";
 import { UnpublishedRelatedItem } from "./UnpublishedRelatedItem";
 import { uniqBy } from "lodash";
@@ -120,6 +124,12 @@ export const ItemEditHeaderActions = ({
   const activePublishing = itemPublishings?.find(
     (itemPublishing) => itemPublishing._active
   );
+  const { data: statusLabels } = useGetWorkflowStatusLabelsQuery();
+  const { data: itemWorkflowStatus, isLoading: isLoadingItemWorkflowStatus } =
+    useGetItemWorkflowStatusQuery(
+      { itemZUID, modelZUID },
+      { skip: !itemZUID || !modelZUID }
+    );
 
   const saveShortcut = useMetaKey("s", () => {
     if (!canUpdate) return;
@@ -224,61 +234,90 @@ export const ItemEditHeaderActions = ({
     }
   })();
 
+  const allowPublish = useMemo(() => {
+    const allowPublishLabelZUIDs = statusLabels?.reduce((acc, next) => {
+      if (next.allowPublish) {
+        return (acc = [...acc, next.ZUID]);
+      }
+
+      return acc;
+    }, []);
+
+    if (!allowPublishLabelZUIDs?.length) return true;
+
+    const itemWorkflowLabelZUIDs = itemWorkflowStatus?.find(
+      (i) => i.itemVersion === item?.meta?.version
+    )?.labelZUIDs;
+
+    return itemWorkflowLabelZUIDs?.some((labelZUID) =>
+      allowPublishLabelZUIDs?.includes(labelZUID)
+    );
+  }, [statusLabels, itemWorkflowStatus, item?.meta?.version]);
+
   const handlePublish = async () => {
-    setIsPublishing(true);
-    try {
-      // Delete scheduled publishings first
-      const deleteScheduledPromises = [
-        // Delete main item's scheduled publishing if it exists
-        itemState === ITEM_STATES.scheduled &&
-          deleteItemPublishing({
+    if (allowPublish) {
+      setIsPublishing(true);
+      try {
+        // Delete scheduled publishings first
+        const deleteScheduledPromises = [
+          // Delete main item's scheduled publishing if it exists
+          itemState === ITEM_STATES.scheduled &&
+            deleteItemPublishing({
+              modelZUID,
+              itemZUID,
+              publishingZUID: item?.scheduling?.ZUID,
+            }),
+          // Delete related items' scheduled publishings if they exist
+          ...relatedItemsToPublish
+            .filter((item) => !!item.scheduling?.ZUID)
+            .map((item) =>
+              deleteItemPublishing({
+                modelZUID: item.meta.contentModelZUID,
+                itemZUID: item.meta.ZUID,
+                publishingZUID: item.scheduling.ZUID,
+              })
+            ),
+        ].filter((item) => !!item);
+
+        await Promise.all(deleteScheduledPromises);
+
+        // Proceed with publishing
+        await Promise.allSettled([
+          createPublishing({
             modelZUID,
             itemZUID,
-            publishingZUID: item?.scheduling?.ZUID,
+            body: {
+              version: item?.meta.version,
+              publishAt: "now",
+              unpublishAt: "never",
+            },
           }),
-        // Delete related items' scheduled publishings if they exist
-        ...relatedItemsToPublish
-          .filter((item) => !!item.scheduling?.ZUID)
-          .map((item) =>
-            deleteItemPublishing({
+          ...relatedItemsToPublish.map((item) =>
+            createPublishing({
               modelZUID: item.meta.contentModelZUID,
               itemZUID: item.meta.ZUID,
-              publishingZUID: item.scheduling.ZUID,
+              body: {
+                version: item.meta.version,
+                publishAt: "now",
+                unpublishAt: "never",
+              },
             })
           ),
-      ].filter((item) => !!item);
-
-      await Promise.all(deleteScheduledPromises);
-
-      // Proceed with publishing
-      await Promise.allSettled([
-        createPublishing({
-          modelZUID,
-          itemZUID,
-          body: {
-            version: item?.meta.version,
-            publishAt: "now",
-            unpublishAt: "never",
-          },
-        }),
-        ...relatedItemsToPublish.map((item) =>
-          createPublishing({
-            modelZUID: item.meta.contentModelZUID,
-            itemZUID: item.meta.ZUID,
-            body: {
-              version: item.meta.version,
-              publishAt: "now",
-              unpublishAt: "never",
-            },
-          })
-        ),
-      ]);
-
-      // Retain non rtk-query fetch of item publishing for legacy code
-      dispatch(fetchItemPublishings());
-    } finally {
-      setIsPublishing(false);
-      setIsConfirmPublishModalOpen(false);
+        ]);
+
+        // Retain non rtk-query fetch of item publishing for legacy code
+        dispatch(fetchItemPublishings());
+      } finally {
+        setIsPublishing(false);
+        setIsConfirmPublishModalOpen(false);
+      }
+    } else {
+      dispatch(
+        notify({
+          message: `Cannot Publish: "${item.web.metaTitle}". Does not have a status that allows publishing`,
+          kind: "error",
+        })
+      );
     }
   };
 
@@ -611,7 +650,18 @@ export const ItemEditHeaderActions = ({
         setPublishAfterSave={setPublishAfterSave}
         setScheduleAfterSave={setScheduleAfterSave}
         setUnpublishDialogOpen={setUnpublishDialogOpen}
-        setScheduledPublishDialogOpen={setScheduledPublishDialogOpen}
+        setScheduledPublishDialogOpen={(open) => {
+          if (!allowPublish) {
+            dispatch(
+              notify({
+                message: `Cannot Publish: "${item.web.metaTitle}". Does not have a status that allows publishing`,
+                kind: "error",
+              })
+            );
+          } else {
+            setScheduledPublishDialogOpen(open);
+          }
+        }}
         setPublishAfterUnschedule={() => {
           setScheduledPublishDialogOpen(true);
           setPublishAfterUnschedule(true);
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector.tsx
deleted file mode 100644
index 80a4c93da8..0000000000
--- a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Button, Menu, MenuItem, Box, Tooltip } from "@mui/material";
-import {
-  useGetContentItemVersionsQuery,
-  useGetItemPublishingsQuery,
-} from "../../../../../../../../shell/services/instance";
-import { useLocation, useParams } from "react-router";
-import { KeyboardArrowDownRounded } from "@mui/icons-material";
-import { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { ContentItem } from "../../../../../../../../shell/services/types";
-import { AppState } from "../../../../../../../../shell/store/types";
-import { formatDate } from "../../../../../../../../utility/formatDate";
-
-export const VersionSelector = () => {
-  const dispatch = useDispatch();
-  const { modelZUID, itemZUID } = useParams<{
-    modelZUID: string;
-    itemZUID: string;
-  }>();
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const { data: versions } = useGetContentItemVersionsQuery({
-    modelZUID,
-    itemZUID,
-  });
-  const { data: itemPublishings } = useGetItemPublishingsQuery({
-    modelZUID,
-    itemZUID,
-  });
-
-  const item = useSelector(
-    (state: AppState) => state.content[itemZUID] as ContentItem
-  );
-
-  const onSelect = (version: ContentItem) => {
-    dispatch({
-      type: "LOAD_ITEM_VERSION",
-      itemZUID: itemZUID,
-      data: version,
-    });
-  };
-
-  useEffect(() => {
-    const versionParam = queryParams.get("version");
-    const version = versions?.find((v) => v.meta.version === +versionParam);
-    if (version) {
-      onSelect(version);
-    }
-  }, [queryParams.get("version"), versions]);
-
-  return (
-    <>
-      <Tooltip
-        title="View Versions"
-        enterDelay={1000}
-        enterNextDelay={1000}
-        placement="top-start"
-      >
-        <Button
-          sx={{
-            color: "text.disabled",
-            height: "24px",
-            minWidth: "unset",
-            padding: "2px",
-            " .MuiButton-endIcon": {
-              marginLeft: "4px",
-            },
-          }}
-          color="inherit"
-          endIcon={<KeyboardArrowDownRounded color="action" />}
-          onClick={(e) => setAnchorEl(e.currentTarget)}
-        >
-          v{item?.meta?.version}
-        </Button>
-      </Tooltip>
-      <Menu
-        onClose={() => setAnchorEl(null)}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "right",
-        }}
-        transformOrigin={{
-          vertical: -10,
-          horizontal: "right",
-        }}
-        anchorEl={anchorEl}
-        open={!!anchorEl}
-        PaperProps={{
-          style: {
-            maxHeight: "496px",
-            overflow: "auto",
-            width: "320px",
-          },
-        }}
-      >
-        {versions?.map((version) => (
-          <MenuItem
-            key={version.meta.version}
-            onClick={() => {
-              setAnchorEl(null);
-              onSelect(version);
-            }}
-          >
-            <Box display="flex" justifyContent="space-between" width="100%">
-              <Box>
-                {`v${version.meta.version}${
-                  itemPublishings?.find(
-                    (itemPublishing) => itemPublishing._active
-                  )?.version === version.meta.version
-                    ? " - Live"
-                    : ""
-                }`}
-              </Box>
-              <Box>{formatDate(version.web.createdAt)}</Box>
-            </Box>
-          </MenuItem>
-        ))}
-      </Menu>
-    </>
-  );
-};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/NoResults.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/NoResults.tsx
new file mode 100644
index 0000000000..b3bce959cf
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/NoResults.tsx
@@ -0,0 +1,37 @@
+import { Button, Box, Stack, Typography } from "@mui/material";
+import { Search } from "@mui/icons-material";
+
+import noResults from "../../../../../../../../../../public/images/noSearchResults.jpg";
+
+type NoResultsProps = {
+  query: string;
+  onSearchAgain: () => void;
+};
+export const NoResults = ({ query, onSearchAgain }: NoResultsProps) => {
+  return (
+    <Stack gap={2.5} alignItems="center" p={2.5}>
+      <img
+        src={noResults}
+        alt="No Search Results"
+        loading="lazy"
+        height={120}
+      />
+      <Box width={339} sx={{ whiteSpace: "break-spaces", textAlign: "center" }}>
+        <Typography variant="h5" fontWeight={600}>
+          Your search <strong>"{query}"</strong> could not find any results
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Try adjusting your search. We suggest check all words are spelled
+          correctly or try using different keywords.
+        </Typography>
+      </Box>
+      <Button
+        variant="contained"
+        startIcon={<Search />}
+        onClick={onSearchAgain}
+      >
+        Search Again
+      </Button>
+    </Stack>
+  );
+};
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/Row.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/Row.tsx
new file mode 100644
index 0000000000..6557202c09
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/Row.tsx
@@ -0,0 +1,67 @@
+import { useEffect, CSSProperties, useRef, memo } from "react";
+import { MenuItem } from "@mui/material";
+import { areEqual } from "react-window";
+
+import { Version, VersionItem } from "./VersionItem";
+import { useResizeObserver } from "../../../../../../../../../shell/hooks/useResizeObserver";
+
+type RowProps = {
+  index: number;
+  style: CSSProperties;
+  data: {
+    versions: Version[];
+    activeVersion: number;
+    handleLoadVersion: (version: number) => void;
+    setRowHeight: (index: number, size: number) => void;
+  };
+};
+export const Row = memo(({ index, style, data }: RowProps) => {
+  const rowRef = useRef(null);
+  const version = data?.versions[index];
+  const dimensions = useResizeObserver(rowRef);
+
+  useEffect(() => {
+    if (!!dimensions) {
+      data?.setRowHeight(index, dimensions?.height);
+    }
+  }, [dimensions]);
+
+  return (
+    <MenuItem
+      key={version?.itemVersionZUID}
+      disableRipple
+      sx={{
+        borderColor: "border",
+        p: 0,
+        flexDirection: "column",
+
+        "&.Mui-selected": {
+          bgcolor: "background.paper",
+
+          "&.Mui-focusVisible": {
+            bgcolor: "background.paper",
+          },
+
+          "&:hover": {
+            bgcolor: "background.paper",
+          },
+        },
+        ...style,
+      }}
+      divider={index + 1 < data?.versions?.length}
+      selected={data?.activeVersion === version?.itemVersion}
+      onClick={() => {
+        data?.handleLoadVersion(version?.itemVersion);
+      }}
+    >
+      <VersionItem
+        ref={rowRef}
+        key={version?.itemVersionZUID}
+        data={version}
+        isActive={data?.activeVersion === version?.itemVersion}
+      />
+    </MenuItem>
+  );
+}, areEqual);
+
+Row.displayName = "VersionRow";
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/VersionItem.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/VersionItem.tsx
new file mode 100644
index 0000000000..a946c3a3de
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/VersionItem.tsx
@@ -0,0 +1,395 @@
+import {
+  memo,
+  useState,
+  forwardRef,
+  useRef,
+  ForwardedRef,
+  useMemo,
+} from "react";
+import {
+  Box,
+  MenuItem,
+  Stack,
+  Typography,
+  Chip,
+  TextField,
+  InputAdornment,
+  ListItemIcon,
+  ListItemText,
+  Tooltip,
+} from "@mui/material";
+import {
+  ScheduleRounded,
+  LanguageRounded,
+  AddRounded,
+  SearchRounded,
+  EditRounded,
+  Check,
+} from "@mui/icons-material";
+import { useSelector } from "react-redux";
+import { useDebounce, useUnmount } from "react-use";
+import { useHistory, useParams } from "react-router";
+import { areEqual } from "react-window";
+
+import {
+  useGetWorkflowStatusLabelsQuery,
+  useUpdateItemWorkflowStatusMutation,
+} from "../../../../../../../../../shell/services/instance";
+import {
+  User,
+  WorkflowStatusLabel,
+} from "../../../../../../../../../shell/services/types";
+import { AppState } from "../../../../../../../../../shell/store/types";
+import { useGetUsersRolesQuery } from "../../../../../../../../../shell/services/accounts";
+import { NoResults } from "./NoResults";
+
+export const BG_COLOR_MAPPING: Record<string, string> = {
+  "#0ba5ec": "blue.100",
+  "#12b76a": "green.100",
+  "#f79009": "yellow.100",
+  "#4e5ba6": "deepPurple.100",
+  "#7a5af8": "purple.100",
+  "#ee46bc": "pink.100",
+  "#ff5c08": "deepOrange.100",
+  "#f04438": "red.100",
+  "#f63d68": "#ffe4e8",
+  "#667085": "grey.100",
+} as const;
+export type Version = {
+  itemZUID: string;
+  modelZUID: string;
+  itemVersionZUID: string;
+  itemVersion: number;
+  itemWorkflowZUID: string;
+  labels: WorkflowStatusLabel[];
+  createdAt: string;
+  isPublished: boolean;
+  isScheduled: boolean;
+};
+type VersionItemProps = {
+  data: Version;
+  isActive: boolean;
+};
+export const VersionItem = memo(
+  forwardRef(
+    (
+      { data, isActive }: VersionItemProps,
+      ref: ForwardedRef<HTMLDivElement>
+    ) => {
+      const history = useHistory();
+      const { modelZUID, itemZUID } = useParams<{
+        modelZUID: string;
+        itemZUID: string;
+      }>();
+      const user: User = useSelector((state: AppState) => state.user);
+      const addNewLabelRef = useRef<HTMLDivElement>(null);
+      const searchRef = useRef<HTMLDivElement>(null);
+      const { data: statusLabels } = useGetWorkflowStatusLabelsQuery();
+      const { data: usersRoles } = useGetUsersRolesQuery();
+      const [updateItemWorkflowStatus] = useUpdateItemWorkflowStatusMutation();
+      const [isAddNewLabelOpen, setIsAddNewLabelOpen] = useState(false);
+      const [filterKeyword, setFilterKeyword] = useState("");
+      const [debouncedFilterKeyword, setDebouncedFilterKeyword] = useState("");
+      const [activeLabels, setActiveLabels] = useState(
+        data?.labels?.map((label) => label?.ZUID)?.filter((label) => !!label)
+      );
+
+      const currentUserRoleZUID = usersRoles?.find(
+        (userWithRole) => userWithRole.ZUID === user.ZUID
+      )?.role?.ZUID;
+
+      useDebounce(() => setDebouncedFilterKeyword(filterKeyword), 200, [
+        filterKeyword,
+      ]);
+
+      useUnmount(() => saveLabelChanges());
+
+      const filteredStatusLabels = useMemo(() => {
+        const sortedStatusLabels = [...statusLabels]?.sort(
+          (a, b) => a.sort - b.sort
+        );
+
+        if (!debouncedFilterKeyword) return sortedStatusLabels;
+
+        return sortedStatusLabels
+          ?.filter((label) =>
+            label.name
+              ?.toLowerCase()
+              .includes(debouncedFilterKeyword?.toLowerCase()?.trim())
+          )
+          .sort((a, b) => a.sort - b.sort);
+      }, [statusLabels, debouncedFilterKeyword]);
+
+      const handleOpenAddNewLabel = (evt: any) => {
+        evt.stopPropagation();
+
+        if (isActive) {
+          setIsAddNewLabelOpen((prev) => !prev);
+
+          setTimeout(() => {
+            searchRef.current?.querySelector("input").focus();
+          });
+        }
+      };
+
+      const handleToggleLabel = (ZUID: string) => {
+        if (activeLabels?.includes(ZUID)) {
+          setActiveLabels(activeLabels.filter((label) => label !== ZUID));
+        } else {
+          setActiveLabels([...activeLabels, ZUID]);
+        }
+      };
+
+      const saveLabelChanges = () => {
+        if (activeLabels.length !== data?.labels?.length) {
+          updateItemWorkflowStatus({
+            modelZUID,
+            itemZUID,
+            itemWorkflowZUID: data?.itemWorkflowZUID,
+            labelZUIDs: activeLabels,
+          });
+        }
+      };
+
+      return (
+        <Stack ref={ref} width="100%" data-cy="VersionItem">
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            width="100%"
+            pt={2}
+            px={2}
+          >
+            <Stack direction="row" gap={1}>
+              <Typography variant="body1" color="text.primary" fontWeight={700}>
+                v{data?.itemVersion}
+              </Typography>
+              {data?.isPublished && (
+                <Stack direction="row" gap={0.25} alignItems="center">
+                  <LanguageRounded color="success" fontSize="small" />
+                  <Typography
+                    variant="body2"
+                    color="success.dark"
+                    fontWeight={600}
+                  >
+                    Published
+                  </Typography>
+                </Stack>
+              )}
+              {data?.isScheduled && (
+                <Stack direction="row" gap={0.25} alignItems="center">
+                  <ScheduleRounded
+                    color="warning"
+                    fontSize="small"
+                    sx={{ mr: 0.25 }}
+                  />
+                  <Typography
+                    variant="body2"
+                    color="warning.main"
+                    fontWeight={600}
+                  >
+                    Scheduled
+                  </Typography>
+                </Stack>
+              )}
+            </Stack>
+            <Typography variant="body1" color="text.secondary">
+              {data?.createdAt}
+            </Typography>
+          </Stack>
+          <Stack
+            direction="row"
+            gap={1}
+            width="100%"
+            flexWrap="wrap"
+            px={2}
+            pt={1.25}
+            pb={2}
+          >
+            {activeLabels?.map((labelZUID) => {
+              const labelData = statusLabels?.find(
+                (status) => status.ZUID === labelZUID
+              );
+
+              return (
+                <Chip
+                  data-cy="ActiveWorkflowStatusLabel"
+                  key={labelData.ZUID}
+                  clickable
+                  onClick={handleOpenAddNewLabel}
+                  label={labelData.name}
+                  size="small"
+                  sx={{
+                    color: labelData.color,
+                    bgcolor: BG_COLOR_MAPPING[labelData.color.toLowerCase()],
+
+                    "&:hover": {
+                      bgcolor: BG_COLOR_MAPPING[labelData.color.toLowerCase()],
+                    },
+                    "&:focus": {
+                      bgcolor: BG_COLOR_MAPPING[labelData.color.toLowerCase()],
+                    },
+                  }}
+                />
+              );
+            })}
+            {isActive && (
+              <Chip
+                data-cy="AddWorkflowStatusLabel"
+                clickable
+                label="Add Status"
+                color="default"
+                size="small"
+                onClick={handleOpenAddNewLabel}
+                // Note: onDelete needs to be here for the custom deleteIcon to be visible
+                onDelete={() => {}}
+                deleteIcon={<AddRounded />}
+              />
+            )}
+          </Stack>
+          {isAddNewLabelOpen && (
+            <Box
+              ref={addNewLabelRef}
+              onClick={(evt) => evt.stopPropagation()}
+              borderTop={1}
+              borderColor="border"
+              width="100%"
+              overflow="hidden"
+            >
+              <TextField
+                ref={searchRef}
+                value={filterKeyword}
+                onChange={(evt) => setFilterKeyword(evt.currentTarget.value)}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchRounded />
+                    </InputAdornment>
+                  ),
+                }}
+                placeholder="Search status"
+                size="small"
+                fullWidth
+                sx={{
+                  my: 1.5,
+                  px: 1,
+                }}
+              />
+              {!filteredStatusLabels?.length && filterKeyword && (
+                <NoResults
+                  query={filterKeyword}
+                  onSearchAgain={() => {
+                    setFilterKeyword("");
+                    searchRef.current?.querySelector("input").focus();
+                  }}
+                />
+              )}
+              {filteredStatusLabels?.map((label, index) => {
+                let title = "";
+                const canRemove =
+                  label.removePermissionRoles?.includes(currentUserRoleZUID);
+                const canAdd =
+                  label.addPermissionRoles?.includes(currentUserRoleZUID);
+
+                if (!canAdd && !activeLabels.includes(label.ZUID)) {
+                  title = "Do not have permission to add this status";
+                }
+
+                if (!canRemove && activeLabels.includes(label.ZUID)) {
+                  title = "Do not have permission to remove this status";
+                }
+
+                return (
+                  <Tooltip followCursor title={title}>
+                    <MenuItem
+                      data-cy="WorkflowStatusLabelOption"
+                      key={label.ZUID}
+                      sx={{
+                        flexDirection: "column",
+                        alignItems: "flex-start",
+                        px: 1,
+                        py: 1.5,
+                        borderBottom: index + 1 < statusLabels?.length ? 1 : 0,
+                        borderColor: "border",
+                      }}
+                      onClick={() => {
+                        if (
+                          (activeLabels.includes(label.ZUID) && canRemove) ||
+                          (!activeLabels.includes(label.ZUID) && canAdd)
+                        ) {
+                          handleToggleLabel(label.ZUID);
+                        }
+                      }}
+                    >
+                      <Stack direction="row" gap={1}>
+                        <Check
+                          fontSize="small"
+                          color="action"
+                          sx={{
+                            visibility: activeLabels?.includes(label.ZUID)
+                              ? "visible"
+                              : "hidden",
+                          }}
+                        />
+                        <Stack gap={0.5} direction="row" alignItems="baseline">
+                          <Box
+                            width={12}
+                            height={12}
+                            borderRadius="50%"
+                            bgcolor={label.color}
+                            flexShrink={0}
+                          ></Box>
+                          <Typography
+                            variant="body2"
+                            fontWeight={700}
+                            sx={{
+                              wordBreak: "break-word",
+                              whiteSpace: "wrap",
+                            }}
+                          >
+                            {label.name}
+                          </Typography>
+                        </Stack>
+                      </Stack>
+                      <Typography
+                        variant="body3"
+                        fontWeight={600}
+                        color="text.secondary"
+                        sx={{
+                          pt: 0.25,
+                          pl: 3.5,
+                          wordBreak: "break-word",
+                          whiteSpace: "wrap",
+                        }}
+                      >
+                        {label.description}
+                      </Typography>
+                    </MenuItem>
+                  </Tooltip>
+                );
+              })}
+              <MenuItem
+                sx={{
+                  pr: 1,
+                  pl: 4,
+                  borderTop: 1,
+                  borderColor: "border",
+                  height: 44,
+                }}
+                onClick={() => history.push("/settings/user/workflows")}
+              >
+                <ListItemIcon>
+                  <EditRounded />
+                </ListItemIcon>
+                <ListItemText>Edit Statuses</ListItemText>
+              </MenuItem>
+            </Box>
+          )}
+        </Stack>
+      );
+    }
+  ),
+  areEqual
+);
+
+VersionItem.displayName = "VersionItem";
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/index.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/index.tsx
new file mode 100644
index 0000000000..ac26b5394c
--- /dev/null
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/VersionSelector/index.tsx
@@ -0,0 +1,298 @@
+import { useState, memo, useMemo, useRef, useEffect } from "react";
+import { Button, Tooltip, Chip, MenuList, Popover } from "@mui/material";
+import { KeyboardArrowDownRounded } from "@mui/icons-material";
+import { useParams } from "react-router";
+import moment from "moment";
+import { useDispatch } from "react-redux";
+import { VariableSizeList } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
+
+import { Row } from "./Row";
+import { BG_COLOR_MAPPING } from "./VersionItem";
+
+const formatDateTime = (dateTimeString: string) => {
+  if (!dateTimeString) return "";
+
+  const momentDate = moment(dateTimeString);
+  const now = moment();
+
+  if (momentDate.isSame(now, "day")) {
+    return `Today ${momentDate.format("h:mm A")}`;
+  } else if (momentDate.isSame(now.clone().subtract(1, "day"), "day")) {
+    return `Yesterday ${momentDate.format("h:mm A")}`;
+  } else if (momentDate.isSame(now.clone().add(1, "day"), "day")) {
+    return `Tomorrow ${momentDate.format("h:mm A")}`;
+  } else {
+    return momentDate.format("MMM D h:mm A");
+  }
+};
+
+import {
+  useGetContentItemVersionsQuery,
+  useGetItemPublishingsQuery,
+  useGetItemWorkflowStatusQuery,
+  useGetWorkflowStatusLabelsQuery,
+} from "../../../../../../../../../shell/services/instance";
+import { Version } from "./VersionItem";
+import { WorkflowStatusLabel } from "../../../../../../../../../shell/services/types";
+
+export let ROW_HEIGHTS: Record<number, number> = {};
+export const DEFAULT_ROW_HEIGHT = 66;
+const DEFAULT_LIST_HEIGHT = 540;
+
+type VersionSelectorProps = {
+  activeVersion: number;
+};
+export const VersionSelector = memo(
+  ({ activeVersion }: VersionSelectorProps) => {
+    const dispatch = useDispatch();
+    const listRef = useRef(null);
+    const rowHeights = useRef(null);
+    const [anchorEl, setAnchorEl] = useState<HTMLElement>(null);
+    const [listHeight, setListHeight] = useState(DEFAULT_LIST_HEIGHT);
+    const { modelZUID, itemZUID } = useParams<{
+      modelZUID: string;
+      itemZUID: string;
+    }>();
+    const { data: statusLabels, isLoading: isLoadingStatusLabels } =
+      useGetWorkflowStatusLabelsQuery();
+    const { data: itemWorkflowStatus, isLoading: isLoadingItemWorkflowStatus } =
+      useGetItemWorkflowStatusQuery(
+        { itemZUID, modelZUID },
+        { skip: !itemZUID || !modelZUID }
+      );
+    const { data: itemPublishings, isLoading: isLoadingItemPublishings } =
+      useGetItemPublishingsQuery(
+        {
+          modelZUID,
+          itemZUID,
+        },
+        { skip: !modelZUID || !itemZUID }
+      );
+    const { data: versions, isLoading: isLoadingVersions } =
+      useGetContentItemVersionsQuery(
+        {
+          modelZUID,
+          itemZUID,
+        },
+        { skip: !modelZUID || !itemZUID }
+      );
+
+    const mappedVersions: Version[] = useMemo(() => {
+      if (!versions?.length) return [];
+
+      const activeVersion = itemPublishings?.find(
+        (itemPublishing) => itemPublishing._active
+      );
+      const scheduledVersion = itemPublishings?.find(
+        (item) =>
+          !item._active &&
+          moment.utc(item.publishAt).isAfter(moment.utc()) &&
+          !item.unpublishAt
+      );
+
+      return versions.map((v) => {
+        let labels: WorkflowStatusLabel[] = [];
+        let itemWorkflowZUID = "";
+
+        if (statusLabels?.length && itemWorkflowStatus?.length) {
+          const workflowStatusData = itemWorkflowStatus.find(
+            (status) => status.itemVersion === v.meta?.version
+          );
+          const labelZUIDs = workflowStatusData?.labelZUIDs;
+          itemWorkflowZUID = workflowStatusData?.ZUID;
+
+          labels = labelZUIDs?.map((labelZUID) =>
+            statusLabels.find((statusLabel) => statusLabel.ZUID === labelZUID)
+          );
+        }
+
+        return {
+          itemZUID: v.meta?.ZUID,
+          modelZUID: v.meta?.contentModelZUID,
+          itemVersionZUID: v.web?.versionZUID,
+          itemVersion: v.meta?.version,
+          itemWorkflowZUID,
+          labels,
+          createdAt: formatDateTime(v.web?.createdAt),
+          isPublished: activeVersion?.version === v.meta?.version,
+          isScheduled: scheduledVersion?.version === v.meta?.version,
+        };
+      });
+    }, [versions, itemPublishings, itemWorkflowStatus, statusLabels]);
+
+    const activeVersionLabels = useMemo(() => {
+      return mappedVersions
+        ?.find((version) => version.itemVersion === activeVersion)
+        ?.labels?.filter((label) => !!label);
+    }, [mappedVersions, activeVersion]);
+
+    useEffect(() => {
+      ROW_HEIGHTS = {};
+    }, []);
+
+    const handleLoadVersion = (version: number) => {
+      const versionToLoad = versions?.find((v) => v?.meta?.version === version);
+
+      if (!!versionToLoad) {
+        dispatch({
+          type: "LOAD_ITEM_VERSION",
+          itemZUID,
+          data: versionToLoad,
+        });
+        setAnchorEl(null);
+      }
+    };
+
+    const setRowHeight = (index: number, size: number) => {
+      if (ROW_HEIGHTS[index] !== size) {
+        ROW_HEIGHTS = { ...ROW_HEIGHTS, [index]: size };
+        listRef.current?.resetAfterIndex(index);
+      }
+    };
+
+    const getRowHeight = (index: number) => {
+      setTimeout(() => {
+        const totalHeight = +Object.values(ROW_HEIGHTS).reduce(
+          (acc: number, curr: number) => acc + curr,
+          0
+        );
+
+        setListHeight(totalHeight < 540 ? totalHeight : 540);
+      });
+
+      return ROW_HEIGHTS[index] || DEFAULT_ROW_HEIGHT;
+    };
+
+    return (
+      <>
+        <Tooltip
+          title="View Versions"
+          enterDelay={1000}
+          enterNextDelay={1000}
+          placement="top-start"
+        >
+          <Button
+            data-cy="VersionSelector"
+            sx={{
+              color: "text.disabled",
+              fontWeight: 600,
+              height: 28,
+              minWidth: "unset",
+              padding: 0.25,
+              " .MuiButton-endIcon": {
+                marginLeft: 0.5,
+              },
+            }}
+            color="inherit"
+            endIcon={<KeyboardArrowDownRounded color="action" />}
+            onClick={(e) => setAnchorEl(e.currentTarget)}
+            disabled={
+              isLoadingVersions ||
+              isLoadingStatusLabels ||
+              isLoadingItemPublishings ||
+              isLoadingItemWorkflowStatus
+            }
+          >
+            v{activeVersion}
+            {!!activeVersionLabels?.length && (
+              <>
+                <Chip
+                  label={activeVersionLabels.slice(-1)?.[0]?.name}
+                  size="small"
+                  sx={{
+                    ml: 0.5,
+                    color: activeVersionLabels.slice(-1)?.[0]?.color,
+                    maxWidth: 144,
+                    bgcolor:
+                      BG_COLOR_MAPPING[
+                        activeVersionLabels.slice(-1)?.[0]?.color?.toLowerCase()
+                      ],
+
+                    "&:hover": {
+                      bgcolor:
+                        BG_COLOR_MAPPING[
+                          activeVersionLabels
+                            .slice(-1)?.[0]
+                            ?.color?.toLowerCase()
+                        ],
+                    },
+                    "&:focus": {
+                      bgcolor:
+                        BG_COLOR_MAPPING[
+                          activeVersionLabels
+                            .slice(-1)?.[0]
+                            ?.color?.toLowerCase()
+                        ],
+                    },
+                  }}
+                />
+                {activeVersionLabels?.length > 1 && (
+                  <Chip
+                    size="small"
+                    label={`+${activeVersionLabels.length - 1}`}
+                    sx={{ ml: 0.5 }}
+                  />
+                )}
+              </>
+            )}
+          </Button>
+        </Tooltip>
+        <Popover
+          onClose={() => setAnchorEl(null)}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "right",
+          }}
+          transformOrigin={{
+            vertical: -8,
+            horizontal: "right",
+          }}
+          anchorEl={anchorEl}
+          open={!!anchorEl}
+          slotProps={{
+            paper: {
+              sx: {
+                height: listHeight,
+                overflow: "auto",
+                width: 379,
+                bgcolor: "grey.50",
+              },
+            },
+          }}
+          sx={{
+            "& .MuiList-root": {
+              py: 0,
+            },
+          }}
+        >
+          <AutoSizer>
+            {({ height, width }) => {
+              return (
+                <VariableSizeList
+                  ref={listRef}
+                  height={height}
+                  width={width}
+                  itemCount={mappedVersions?.length}
+                  itemData={
+                    {
+                      versions: mappedVersions,
+                      activeVersion,
+                      handleLoadVersion,
+                      setRowHeight,
+                    } as any
+                  }
+                  itemSize={getRowHeight}
+                  innerElementType={MenuList}
+                >
+                  {Row}
+                </VariableSizeList>
+              );
+            }}
+          </AutoSizer>
+        </Popover>
+      </>
+    );
+  }
+);
+VersionSelector.displayName = "VersionSelector";
diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/index.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/index.tsx
index 84addffbb7..cfa2ba606a 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/index.tsx
+++ b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/index.tsx
@@ -178,7 +178,7 @@ export const ItemEditHeader = ({ saving, onSave, hasError }: HeaderProps) => {
                 {type === "block" && (
                   <>
                     <LanguageSelector />
-                    <VersionSelector />
+                    <VersionSelector activeVersion={item?.meta?.version} />
                   </>
                 )}
                 <ItemEditHeaderActions
@@ -238,7 +238,7 @@ export const ItemEditHeader = ({ saving, onSave, hasError }: HeaderProps) => {
               <Box display="flex" gap={2} alignItems="center">
                 <DuoModeSwitch />
                 <LanguageSelector />
-                <VersionSelector />
+                <VersionSelector activeVersion={item?.meta?.version} />
               </Box>
             </Box>
           )}
diff --git a/src/apps/schema/src/app/components/NoResults.tsx b/src/apps/schema/src/app/components/NoResults.tsx
index f7f2f55dfb..1fe04e1dca 100644
--- a/src/apps/schema/src/app/components/NoResults.tsx
+++ b/src/apps/schema/src/app/components/NoResults.tsx
@@ -38,7 +38,13 @@ export const NoResults = ({ type, searchTerm, onButtonClick, sx }: Props) => {
       }}
     >
       <img src={noSearchResults} alt="No search results" />
-      <Typography pt={1.5} pb={1} variant="h4" fontWeight={600}>
+      <Typography
+        pt={1.5}
+        pb={1}
+        variant="h4"
+        fontWeight={600}
+        color="text.primary"
+      >
         {TEXT_CONFIG[type].header.replace("{searchTerm}", searchTerm)}
       </Typography>
       <Typography variant="body2" pb={3} color="text.secondary">
diff --git a/src/apps/settings/src/app/App.js b/src/apps/settings/src/app/App.js
index a678fdac2f..cd41902d58 100644
--- a/src/apps/settings/src/app/App.js
+++ b/src/apps/settings/src/app/App.js
@@ -24,7 +24,7 @@ import {
   fetchFontsInstalled,
 } from "shell/store/settings";
 import { ResizableContainer } from "../../../../shell/components/ResizeableContainer";
-
+import Workflows from "./views/User/Workflows";
 // Makes sure that other apps using legacy theme does not get affected with the palette
 const customTheme = createTheme(legacyTheme, {
   palette: {
@@ -138,7 +138,10 @@ export default connect((state) => ({
               <Box
                 component="main"
                 className={
-                  location.pathname === "/settings/instance/bynder"
+                  [
+                    "/settings/instance/bynder",
+                    "/settings/user/workflows",
+                  ]?.includes(location.pathname)
                     ? ""
                     : styles.Content
                 }
@@ -182,6 +185,10 @@ export default connect((state) => ({
                       </div>
                     )}
                   />
+                  <Route
+                    path="/settings/user/workflows"
+                    component={Workflows}
+                  />
 
                   <Redirect from="/settings" to="/settings/instance/general" />
                   <Redirect
diff --git a/src/apps/settings/src/app/components/Nav/SettingsNav.tsx b/src/apps/settings/src/app/components/Nav/SettingsNav.tsx
index f6effee4ae..b34ce32588 100644
--- a/src/apps/settings/src/app/components/Nav/SettingsNav.tsx
+++ b/src/apps/settings/src/app/components/Nav/SettingsNav.tsx
@@ -43,6 +43,14 @@ const GLOBAL_META_CAT: TreeItem[] = [
     children: [],
   },
 ];
+const USER_SETTINGS_CAT: TreeItem[] = [
+  {
+    label: "Workflows",
+    path: "/settings/user/workflows",
+    icon: LanguageRoundedIcon,
+    children: [],
+  },
+];
 
 export const SettingsNav = () => {
   const location = useLocation();
@@ -110,6 +118,9 @@ export const SettingsNav = () => {
         instance: instanceSettings?.filter((setting) =>
           setting.label.toLowerCase().includes(keyword)
         ),
+        user: USER_SETTINGS_CAT?.filter((setting) =>
+          setting.label.toLowerCase().includes(keyword)
+        ),
         meta: GLOBAL_META_CAT?.filter((setting) =>
           setting.label.toLowerCase().includes(keyword)
         ),
@@ -124,6 +135,7 @@ export const SettingsNav = () => {
 
     return {
       instance: instanceSettings,
+      user: USER_SETTINGS_CAT,
       meta: GLOBAL_META_CAT,
       styles: styleSettings,
       fonts: FONTS_CAT,
@@ -141,6 +153,7 @@ export const SettingsNav = () => {
     >
       {keyword &&
       !navItems.fonts?.length &&
+      !navItems.user?.length &&
       !navItems.instance?.length &&
       !navItems.meta?.length &&
       !navItems.styles?.length ? (
@@ -164,6 +177,14 @@ export const SettingsNav = () => {
             tree={navItems.instance}
             selected={location.pathname}
           />
+          <Box pt={1.5}>
+            <NavTree
+              id="UserTree"
+              HeaderComponent={<HeaderComponent title="User Settings" />}
+              tree={navItems.user}
+              selected={location.pathname}
+            />
+          </Box>
           <Box pt={1.5}>
             <NavTree
               id="MetaTree"
diff --git a/src/apps/settings/src/app/views/User/Workflows/RestrictedPage.tsx b/src/apps/settings/src/app/views/User/Workflows/RestrictedPage.tsx
new file mode 100644
index 0000000000..36dc57673b
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/RestrictedPage.tsx
@@ -0,0 +1,174 @@
+import { FC } from "react";
+import { Box, Typography, Avatar } from "@mui/material";
+import { useGetUsersRolesQuery } from "../../../../../../../shell/services/accounts";
+import restrictedImage from "../../../../../../../../public/images/restricted-image.svg";
+import { AUTHORIZED_ROLES } from "./constants";
+
+const ROLE_ORDER_MAPPING = { Owner: 1, Admin: 2 };
+
+type ProfileInfoProps = {
+  name: string;
+  role: string;
+  email: string;
+  imageUrl?: string;
+};
+
+const ProfileInfo: FC<ProfileInfoProps> = ({
+  name,
+  role,
+  email,
+  imageUrl = "",
+}) => (
+  <Box
+    data-cy="user-profile"
+    display="flex"
+    alignItems="center"
+    py={1}
+    borderBottom="1px solid"
+    borderColor={(theme) => theme.palette.border}
+  >
+    <Avatar alt={name} src={imageUrl} />
+    <Box ml={2}>
+      <Typography variant="body2" color="text.primary" fontWeight={600}>
+        {name}
+      </Typography>
+      <Typography
+        variant="body2"
+        color="text.secondary"
+      >{`${role} • ${email}`}</Typography>
+    </Box>
+  </Box>
+);
+
+const RestrictedPage = () => {
+  const { isLoading, isError, data } = useGetUsersRolesQuery();
+
+  const profileList = data
+    ?.filter((profile) =>
+      AUTHORIZED_ROLES.includes(profile?.role?.systemRoleZUID)
+    )
+    .map((item, index) => ({
+      id: item?.ZUID,
+      name: `${item?.firstName} ${item?.lastName}`,
+      role: item?.role?.name,
+      email: item?.email,
+      imageUrl: "",
+      sort:
+        (item?.role?.name &&
+          ROLE_ORDER_MAPPING[
+            item?.role?.name as keyof typeof ROLE_ORDER_MAPPING
+          ]) ||
+        index + 2,
+    }))
+    .sort((a, b) => a.sort - b.sort);
+
+  return (
+    <Box
+      width="100%"
+      height="100%"
+      bgcolor="grey.50"
+      display="flex"
+      flexDirection="column"
+      data-cy="workflows-restricted-page"
+    >
+      <Box
+        px={4}
+        pt={4}
+        pb={1.5}
+        bgcolor="background.paper"
+        borderBottom="2px solid"
+        borderColor="border"
+        display="flex"
+        justifyContent="space-between"
+        alignItems="baseline"
+      >
+        <Typography variant="h3" fontWeight={700} color="text.primary">
+          Workflows
+        </Typography>
+      </Box>
+
+      <Box
+        px={4}
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        flexGrow={1}
+      >
+        <Box
+          display="flex"
+          flexDirection="row"
+          justifyContent="space-between"
+          width="100%"
+          columnGap={2}
+        >
+          <Box
+            display="flex"
+            flexDirection="column"
+            width="60%"
+            py={4}
+            minWidth="350px"
+            flexShrink={0}
+            maxWidth="sm"
+          >
+            <Typography
+              variant="h3"
+              fontWeight={700}
+              color="text.primary"
+              mb={2}
+            >
+              You need permission to view and edit workflows
+            </Typography>
+            <Typography variant="body2" color="text.secondary" mb={4}>
+              Contact the instance owner or administrators listed below to
+              upgrade your role to Admin or Owner.
+            </Typography>
+
+            <Box
+              data-cy="user-profile-container"
+              display="flex"
+              flexDirection="column"
+              justifyContent="flex-start"
+              alignItems="stretch"
+              width="100%"
+              maxHeight="400px"
+              sx={{
+                overflowY: "auto",
+              }}
+            >
+              {!isLoading &&
+                !isError &&
+                profileList.length > 0 &&
+                profileList.map((profile) => (
+                  <ProfileInfo
+                    key={profile.id}
+                    name={profile.name}
+                    email={profile.email}
+                    role={profile.role}
+                    imageUrl={profile.imageUrl}
+                  />
+                ))}
+            </Box>
+          </Box>
+          <Box
+            boxSizing="border-box"
+            width="320px"
+            height="100%"
+            display="flex"
+            flexDirection="row"
+            justifyContent="flex-end"
+          >
+            <img
+              data-cy="restricted-image"
+              src={restrictedImage}
+              loading="lazy"
+              style={{ width: "100%" }}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default RestrictedPage;
diff --git a/src/apps/settings/src/app/views/User/Workflows/authorized/ActiveStatus.tsx b/src/apps/settings/src/app/views/User/Workflows/authorized/ActiveStatus.tsx
new file mode 100644
index 0000000000..a3ef253e84
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/authorized/ActiveStatus.tsx
@@ -0,0 +1,89 @@
+import { FC, useCallback, useEffect, useState } from "react";
+import { Box } from "@mui/material";
+import { useUpdateWorkflowStatusLabelOrderMutation } from "../../../../../../../../shell/services/instance";
+import { useFormDialogContext } from "./forms-dialogs";
+import { StatusLabelSorting } from ".";
+import { StatusLabel, StatusLabelLoader } from "./StatusLabel";
+import { UpdateSortingOrder } from "../../../../../../../../shell/services/types";
+
+type ActiveStatusProps = {
+  labels: StatusLabelSorting[];
+  isLoading: boolean;
+};
+
+const ActiveStatus: FC<ActiveStatusProps> = ({ labels, isLoading = false }) => {
+  const { focusedLabel } = useFormDialogContext();
+  const [statusLabels, setStatusLabels] =
+    useState<StatusLabelSorting[]>(labels);
+  const [updateWorkflowStatusLabelOrder] =
+    useUpdateWorkflowStatusLabelOrderMutation();
+
+  const findCard = useCallback(
+    (id: string) => {
+      const label = statusLabels.find((c) => c.id === id);
+      return { label, index: statusLabels.indexOf(label) };
+    },
+    [statusLabels]
+  );
+
+  const moveCard = useCallback(
+    (id: string, atIndex: number) => {
+      const { label, index } = findCard(id);
+
+      if (label) {
+        const updatedLabels = [...statusLabels];
+        updatedLabels.splice(index, 1);
+        updatedLabels.splice(atIndex, 0, label);
+
+        setStatusLabels(updatedLabels);
+      }
+    },
+    [findCard, statusLabels]
+  );
+
+  const onReorder = useCallback(async () => {
+    const requestPayload: UpdateSortingOrder[] = statusLabels.map(
+      (item, index) => ({
+        ZUID: item.id,
+        sort: index + 1,
+      })
+    );
+
+    try {
+      await updateWorkflowStatusLabelOrder(requestPayload);
+    } catch (error) {
+      console.error("Error during reorder:", error);
+    }
+  }, [statusLabels, updateWorkflowStatusLabelOrder]);
+
+  useEffect(() => {
+    if (!isLoading) {
+      setStatusLabels(labels);
+    }
+  }, [labels, isLoading]);
+
+  return (
+    <>
+      {isLoading ? (
+        <StatusLabelLoader />
+      ) : (
+        <Box minHeight="80px" data-cy="active-labels-container">
+          {statusLabels.map((label, index) => (
+            <StatusLabel
+              key={label.id}
+              id={label.id}
+              isFiltered={label.isFiltered}
+              moveCard={moveCard}
+              findCard={findCard}
+              onReorder={onReorder}
+              isFocused={focusedLabel === label.id}
+              data={label.data}
+            />
+          ))}
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default ActiveStatus;
diff --git a/src/apps/settings/src/app/views/User/Workflows/authorized/DeactivatedStatus.tsx b/src/apps/settings/src/app/views/User/Workflows/authorized/DeactivatedStatus.tsx
new file mode 100644
index 0000000000..318652aa99
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/authorized/DeactivatedStatus.tsx
@@ -0,0 +1,37 @@
+import { FC, useEffect, useState } from "react";
+import { Box, Collapse } from "@mui/material";
+import { StatusLabelSorting } from ".";
+import { StatusLabel, StatusLabelLoader } from "./StatusLabel";
+
+type DeactivatedStatusProps = {
+  labels: StatusLabelSorting[];
+  isLoading: boolean;
+};
+
+const DeactivatedStatus: FC<DeactivatedStatusProps> = ({
+  labels,
+  isLoading,
+}) => {
+  return (
+    <Box minHeight="80px" data-cy="deactivated-labels-container">
+      {isLoading ? (
+        <StatusLabelLoader />
+      ) : (
+        <>
+          {labels.map((label: StatusLabelSorting, index: number) => (
+            <Collapse key={`${label.id}-${index}`} in={!label?.isFiltered}>
+              <StatusLabel
+                id={label.id}
+                isFiltered={label?.isFiltered}
+                data={label?.data}
+                isDeactivated
+              />
+            </Collapse>
+          ))}
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default DeactivatedStatus;
diff --git a/src/apps/settings/src/app/views/User/Workflows/authorized/StatusLabel.tsx b/src/apps/settings/src/app/views/User/Workflows/authorized/StatusLabel.tsx
new file mode 100644
index 0000000000..f7de5ee324
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/authorized/StatusLabel.tsx
@@ -0,0 +1,328 @@
+import { MouseEvent, FC, ReactElement, useState, useCallback } from "react";
+import { useDrag, useDrop } from "react-dnd";
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  Fade,
+  Box,
+  Paper,
+  Collapse,
+  Typography,
+  Card,
+  CardActions,
+  CardContent,
+  ListItemIcon,
+  Skeleton,
+  alpha,
+} from "@mui/material";
+import Brightness1Icon from "@mui/icons-material/Brightness1";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
+import PauseCircleOutlineRoundedIcon from "@mui/icons-material/PauseCircleOutlineRounded";
+import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
+import { ClickAwayListener } from "@mui/base/ClickAwayListener";
+import { useFormDialogContext } from "./forms-dialogs";
+import { StatusLabel as StatusLabelTypes } from "../../../../../../../../shell/services/types";
+
+export type StatusLabelProps = {
+  id: string;
+  isFiltered: boolean;
+  moveCard?: (id: string, to: number) => void;
+  findCard?: (id: string) => { index: number };
+  isDeactivated?: boolean;
+  onReorder?: () => void;
+  isFocused?: boolean;
+  data: StatusLabelTypes;
+};
+
+export const StatusLabel: FC<StatusLabelProps> = ({
+  id,
+  isFiltered,
+  moveCard,
+  findCard,
+  isDeactivated,
+  onReorder,
+  isFocused,
+  data,
+}: StatusLabelProps) => {
+  const { setFocusedLabel, openStatusLabelForm } = useFormDialogContext();
+
+  const originalIndex = isDeactivated ? 0 : findCard?.(id)?.index;
+
+  const [{ isDragging }, drag, preview] = useDrag(
+    () => ({
+      type: "draggable",
+      item: { id, originalIndex },
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
+      options: {
+        dropEffect: "copy",
+      },
+      end: (item, monitor) => {
+        const { id: droppedId, originalIndex } = item;
+        const didDrop = monitor.didDrop();
+        if (!didDrop) {
+          moveCard?.(droppedId, originalIndex);
+        }
+      },
+    }),
+    [id, originalIndex, moveCard]
+  );
+
+  const [, drop] = useDrop(
+    () => ({
+      accept: "draggable",
+      hover({ id: draggedId }: { id: string; originalIndex: number }) {
+        if (draggedId !== id) {
+          const { index: overIndex } = findCard?.(id);
+          moveCard?.(draggedId, overIndex);
+        }
+      },
+      drop: () => {
+        onReorder?.();
+      },
+    }),
+    [findCard, moveCard, onReorder]
+  );
+
+  const withClickAwayListener = useCallback(
+    (component: ReactElement) => {
+      if (isFocused) {
+        return (
+          <ClickAwayListener onClickAway={() => setFocusedLabel("")}>
+            {component}
+          </ClickAwayListener>
+        );
+      }
+      return component;
+    },
+    [isFocused, setFocusedLabel]
+  );
+
+  return (
+    <Collapse in={!isFiltered}>
+      {withClickAwayListener(
+        <Card
+          data-cy="status-label"
+          elevation={0}
+          variant="outlined"
+          ref={
+            isDeactivated ? null : (node) => drop(preview(node as HTMLElement))
+          }
+          sx={{
+            mx: 4,
+            my: 1,
+            height: "76px",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            pt: 2,
+            pr: 2,
+            pb: 2,
+            pl: 1,
+            columnGap: 1.5,
+            borderRadius: 2,
+            opacity: isDragging ? 0 : isDeactivated ? 0.7 : 1,
+            border: "1px solid",
+            borderColor: (theme) => theme.palette.border,
+            backgroundColor: isFocused
+              ? (theme) => alpha(theme.palette.primary.light, 0.1)
+              : "background.paper",
+          }}
+        >
+          <Box
+            data-cy="status-label-drag-handle"
+            component="div"
+            ref={isDeactivated ? null : (node) => drag(node as HTMLElement)}
+            sx={{
+              cursor: isDeactivated ? "default" : "grab",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              flexGrow: 0,
+            }}
+          >
+            <DragIndicatorRoundedIcon color="action" fontSize="small" />
+          </Box>
+
+          <Brightness1Icon sx={{ color: data?.color }} fontSize="medium" />
+
+          <CardContent
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              padding: 0,
+              flexGrow: 1,
+            }}
+          >
+            <Typography
+              variant="h6"
+              color="text.primary"
+              fontWeight={700}
+              lineHeight="22px"
+              data-cy="status-label-name"
+            >
+              {data?.name}
+            </Typography>
+            <Typography
+              variant="subtitle2"
+              color="text.secondary"
+              lineHeight="20px"
+              textOverflow="ellipsis"
+              whiteSpace="nowrap"
+              fontWeight={400}
+            >
+              {data?.description}
+            </Typography>
+          </CardContent>
+
+          <CardActions sx={{ flexGrow: 0, padding: 0 }}>
+            <MoreActionsMenu data={data} isDeactivated={isDeactivated} />
+          </CardActions>
+        </Card>
+      )}
+    </Collapse>
+  );
+};
+
+const MoreActionsMenu = ({
+  data,
+  isDeactivated,
+}: {
+  data: StatusLabelTypes;
+  isDeactivated?: boolean;
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const { openStatusLabelForm, openDeactivationDialog } =
+    useFormDialogContext();
+
+  const handleOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const openEditForm = () => {
+    openStatusLabelForm({ values: data, isDeactivated: isDeactivated });
+    setAnchorEl(null);
+  };
+
+  const openDeleteDialog = () => {
+    openDeactivationDialog({ ZUID: data?.ZUID, name: data?.name });
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton
+        size="small"
+        onClick={handleOpen}
+        sx={{ borderRadius: "50%" }}
+        data-cy="status-label-more-actions"
+      >
+        <MoreHorizIcon fontSize="small" color="action" />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        TransitionComponent={Fade}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "right" }}
+      >
+        <MenuItem onClick={openEditForm} data-cy="menu-item-edit">
+          <ListItemIcon color="action.active">
+            <DriveFileRenameOutlineIcon />
+          </ListItemIcon>
+          <Typography variant="body1" color="text.primary">
+            Edit Status
+          </Typography>
+        </MenuItem>
+
+        {!isDeactivated && (
+          <MenuItem onClick={openDeleteDialog} data-cy="menu-item-deactivate">
+            <ListItemIcon color="action.active">
+              <PauseCircleOutlineRoundedIcon />
+            </ListItemIcon>
+            <Typography variant="body1" color="text.primary">
+              Deactivate Status
+            </Typography>
+          </MenuItem>
+        )}
+      </Menu>
+    </>
+  );
+};
+
+export const StatusLabelSkeleton = ({ width = 1 }: { width: number }) => {
+  return (
+    <Box width="100%" px={4} display="flex" flexDirection="column" rowGap={1}>
+      <Paper
+        elevation={0}
+        sx={{
+          height: "76%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          py: 1,
+          px: 2,
+          columnGap: 1,
+          borderRadius: "8px",
+        }}
+      >
+        <DragIndicatorRoundedIcon
+          sx={{
+            width: "22px",
+            height: "22px",
+            color: "grey.400",
+            opacity: 0.45,
+          }}
+        />
+        <Skeleton
+          variant="circular"
+          width={22}
+          height={22}
+          sx={{ bgcolor: "action.disabled" }}
+        />
+        <Box flexGrow={1} ml={1}>
+          <Skeleton
+            variant="text"
+            height={32}
+            sx={{ width: `calc(10% * ${width})`, bgcolor: "action.disabled" }}
+          />
+          <Skeleton
+            variant="text"
+            height={20}
+            sx={{ width: `calc(30% * ${width})`, bgcolor: "action.focus" }}
+          />
+        </Box>
+        <MoreHorizIcon
+          sx={{
+            width: "26px",
+            height: "26px",
+            color: "grey.400",
+            opacity: 0.45,
+          }}
+        />
+      </Paper>
+    </Box>
+  );
+};
+
+export const StatusLabelLoader = () => (
+  <Box display="flex" flexDirection="column" rowGap={2}>
+    <StatusLabelSkeleton width={1.5} />
+    <StatusLabelSkeleton width={2.7} />
+    <StatusLabelSkeleton width={1.85} />
+  </Box>
+);
diff --git a/src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/DeactivationDialog.tsx b/src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/DeactivationDialog.tsx
new file mode 100644
index 0000000000..9a9da157f3
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/DeactivationDialog.tsx
@@ -0,0 +1,121 @@
+import { FC } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import PauseCircleOutlineRoundedIcon from "@mui/icons-material/PauseCircleOutlineRounded";
+import Typography from "@mui/material/Typography";
+import { useDispatch } from "react-redux";
+import { notify } from "../../../../../../../../../shell/store/notifications";
+import { LoadingButton } from "@mui/lab";
+import { useDeactivateWorkflowStatusLabelMutation } from "../../../../../../../../../shell/services/instance";
+
+type DeactivationDialogProps = {
+  open: boolean;
+  onClose: () => void;
+  name: string;
+  ZUID: string;
+  callBack?: () => void;
+};
+
+const DeactivationDialog: FC<DeactivationDialogProps> = ({
+  open,
+  onClose,
+  name,
+  ZUID,
+  callBack,
+}) => {
+  const dispatch = useDispatch();
+  const [deactivateWorkflowStatusLabel, { isLoading }] =
+    useDeactivateWorkflowStatusLabelMutation();
+
+  const handleConfirm = async () => {
+    try {
+      await deactivateWorkflowStatusLabel({ ZUID });
+
+      onClose();
+      callBack?.();
+
+      dispatch(
+        notify({
+          kind: "error",
+          message: `Status De-activated: ${name}`,
+        })
+      );
+    } catch (error) {
+      console.error("Status Label Deactivation Error: ", error);
+      dispatch(
+        notify({
+          kind: "error",
+          message: `Failed to deactivate status: ${name}. Please try again.`,
+        })
+      );
+    }
+  };
+
+  return (
+    <Dialog
+      data-cy="deactivation-dialog"
+      fullWidth
+      maxWidth="xs"
+      open={open}
+      onClose={onClose}
+    >
+      <DialogContent sx={{ paddingTop: 2 }}>
+        <Box
+          component="span"
+          borderRadius="50%"
+          p={1}
+          bgcolor="red.100"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          width="fit-content"
+          sx={{ aspectRatio: 1 }}
+        >
+          <PauseCircleOutlineRoundedIcon fontSize="medium" color="error" />
+        </Box>
+
+        <Box display="flex" flexDirection="row" alignItems="center" my={1}>
+          <Typography
+            variant="h5"
+            fontWeight="bold"
+            color="text.primary"
+            mr={1}
+          >
+            Deactivate Status:
+          </Typography>
+          <Typography variant="h5" fontWeight="normal" color="text.secondary">
+            {name}
+          </Typography>
+        </Box>
+
+        <Typography variant="body2" color="text.secondary">
+          Deactivating this status will remove it from all content items that
+          currently have it. You can always reactivate this status in the
+          future.
+        </Typography>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} variant="text" color="inherit">
+          Cancel
+        </Button>
+
+        <LoadingButton
+          onClick={handleConfirm}
+          variant="contained"
+          color="error"
+          loading={isLoading}
+          loadingPosition="center"
+          data-cy="deactivation-dialog-confirm-button"
+        >
+          Deactivate Status
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeactivationDialog;
diff --git a/src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/StatusLabelForm.tsx b/src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/StatusLabelForm.tsx
new file mode 100644
index 0000000000..d051b0547b
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/StatusLabelForm.tsx
@@ -0,0 +1,529 @@
+import { FC, FormEvent, ReactNode, useEffect, useState } from "react";
+import {
+  Box,
+  Button,
+  TextField,
+  IconButton,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+  OutlinedInput,
+  FormControlLabel,
+  Checkbox,
+  Autocomplete,
+} from "@mui/material";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import Brightness1Icon from "@mui/icons-material/Brightness1";
+import InfoRoundedIcon from "@mui/icons-material/InfoRounded";
+import CheckIcon from "@mui/icons-material/Check";
+import SaveIcon from "@mui/icons-material/Save";
+import PauseCircleOutlineRoundedIcon from "@mui/icons-material/PauseCircleOutlineRounded";
+import { LoadingButton } from "@mui/lab";
+import {
+  useCreateWorkflowStatusLabelMutation,
+  useUpdateWorkflowStatusLabelMutation,
+} from "../../../../../../../../../shell/services/instance";
+import { useFormDialogContext } from ".";
+import { useDispatch } from "react-redux";
+import { notify } from "../../../../../../../../../shell/store/notifications";
+import { useGetUsersRolesQuery } from "../../../../../../../../../shell/services/accounts";
+import {
+  CreateStatusLabel,
+  StatusLabel,
+} from "../../../../../../../../../shell/services/types";
+import { ColorMenu, colorMenu, RoleMenu } from "../../constants";
+
+interface FormInputFieldWrapperProps {
+  label: string;
+  required?: boolean;
+  description?: string;
+  error?: string;
+  children: ReactNode;
+}
+
+export type StatusLabelFormProps = {
+  open: boolean;
+  onClose: () => void;
+  labels?: StatusLabel[];
+  values?: StatusLabel | undefined;
+  isDeactivated?: boolean;
+};
+
+const FormInputFieldWrapper: FC<FormInputFieldWrapperProps> = ({
+  label,
+  required = false,
+  description,
+  error,
+  children,
+}) => (
+  <Box
+    display="flex"
+    flexDirection="column"
+    pb={0.25}
+    position="relative"
+    data-cy="status-label-field-wrapper"
+  >
+    <Typography variant="body2" fontWeight={600}>
+      {label}
+      {required && (
+        <InfoRoundedIcon
+          color="action"
+          sx={{ height: "12px", aspectRatio: 1, mt: 0.15 }}
+        />
+      )}
+    </Typography>
+    {description && (
+      <Typography variant="body2" color="text.secondary">
+        {description}
+      </Typography>
+    )}
+    <Box
+      pt={0.25}
+      display="flex"
+      flexDirection="column"
+      justifyContent="flex-start"
+      alignItems="stretch"
+    >
+      {children}
+    </Box>
+    {!!error && (
+      <Typography
+        data-cy="status-label-field-error"
+        variant="caption"
+        color="error"
+        sx={{
+          position: "absolute",
+          bottom: 0,
+          transform: "translateY(calc(100% - 4px))",
+        }}
+      >
+        {error}
+      </Typography>
+    )}
+  </Box>
+);
+
+const ColorSelectInput = ({
+  name,
+  defaultValue = "",
+  usedColors = [],
+}: {
+  name: string;
+  defaultValue?: string | "";
+  usedColors: string[];
+}) => {
+  const availableColors = colorMenu
+    .sort((a, b) => a.label.localeCompare(b.label))
+    .filter((item) => !usedColors.includes(item.value));
+
+  const defaultColor =
+    colorMenu?.find(
+      (item) =>
+        item?.value?.trim()?.toUpperCase() ===
+        defaultValue?.trim()?.toUpperCase()
+    ) ||
+    availableColors?.[0] ||
+    colorMenu?.[0];
+
+  const [selectedColor, setSelectedColor] = useState<ColorMenu>(defaultColor);
+
+  return (
+    <>
+      <Autocomplete
+        disableClearable
+        autoHighlight
+        fullWidth
+        options={colorMenu}
+        size="small"
+        onChange={(event, newValue) => setSelectedColor(newValue)}
+        value={selectedColor}
+        renderOption={(props, option) => (
+          <li {...props}>
+            <Box display="flex" alignItems="center" gap={1}>
+              <Brightness1Icon
+                sx={{
+                  color: option.value,
+                  width: "1.25rem",
+                  height: "1.25rem",
+                }}
+              />
+              <Typography variant="body2" color="text.primary">
+                {option.label}
+              </Typography>
+            </Box>
+          </li>
+        )}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              startAdornment: (
+                <Brightness1Icon
+                  sx={{
+                    ml: ".25rem",
+                    color: selectedColor.value,
+                    width: "1.15rem",
+                    height: "1.15rem",
+                  }}
+                />
+              ),
+            }}
+          />
+        )}
+      />
+      <input
+        type="hidden"
+        name={name}
+        value={selectedColor.value?.trim()?.toUpperCase()}
+      />
+    </>
+  );
+};
+
+const RolesSelectInput = ({
+  name,
+  listData,
+  defaultValue = "",
+}: {
+  name: string;
+  listData: RoleMenu[];
+  defaultValue?: string;
+}) => {
+  const [value, setSelectedColor] = useState(defaultValue || "");
+  const sortedListData = [...listData].sort((a, b) =>
+    a.label.localeCompare(b.label)
+  );
+  const getRoleInfo = (zuids: string) =>
+    zuids
+      ? sortedListData.filter((item) =>
+          zuids.split(",").includes(item.value.trim())
+        )
+      : [];
+  const handleChange = (_: unknown, newValue: RoleMenu[]) =>
+    setSelectedColor(newValue.map((item) => item.value).join(","));
+
+  return (
+    <>
+      <Autocomplete
+        multiple
+        fullWidth
+        options={sortedListData}
+        disableCloseOnSelect
+        value={getRoleInfo(value)}
+        onChange={handleChange}
+        size="small"
+        getOptionLabel={(option) => option.label}
+        renderOption={(props, option, { selected }) => (
+          <li {...props}>
+            <Checkbox
+              size="small"
+              disableRipple
+              icon={<CheckIcon fontSize="medium" sx={{ opacity: 0 }} />}
+              checkedIcon={<CheckIcon fontSize="medium" />}
+              checked={selected}
+              value={option.value}
+              sx={{
+                marginRight: "5px",
+                position: "absolute",
+                left: 0,
+              }}
+            />
+            <Typography variant="body2" sx={{ pl: 4 }}>
+              {option.label}
+            </Typography>
+          </li>
+        )}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            variant="outlined"
+            placeholder={value ? "" : "None"}
+          />
+        )}
+        ChipProps={{
+          sx: {
+            height: "1.25rem",
+            backgroundColor: "transparent",
+            outline: "1px solid",
+            outlineColor: (theme) => theme.palette.border,
+          },
+        }}
+      />
+      <input type="hidden" name={name} value={value?.trim()} />
+    </>
+  );
+};
+
+const validateFormData = (formData: CreateStatusLabel) => {
+  const errors: Record<string, string> = {};
+  if (!formData.name) errors.name = "Name is required";
+  // if (!formData.description) errors.description = "Description is required";
+  if (!formData.color) errors.color = "Color is required";
+  return errors;
+};
+
+const StatusLabelForm: FC<StatusLabelFormProps> = ({
+  open,
+  onClose,
+  labels = [],
+  values,
+  isDeactivated = false,
+}) => {
+  const ZUID = values?.ZUID || undefined;
+  const [rolesMenuItems, setRolesMenuItems] = useState<RoleMenu[]>([]);
+  const {
+    isLoading: rolesLoading,
+    isFetching,
+    data: rolesMenuData,
+  } = useGetUsersRolesQuery();
+
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const dispatch = useDispatch();
+  const [createWorkflowStatusLabel, { isLoading: createLabelIsLoading }] =
+    useCreateWorkflowStatusLabelMutation();
+  const [updateWorkflowStatusLabel, { isLoading: editLabelIsLoading }] =
+    useUpdateWorkflowStatusLabelMutation();
+  const { openDeactivationDialog, setFocusedLabel } = useFormDialogContext();
+
+  const usedColors = labels.map((label) => label.color);
+
+  const transformRoleValues = (value: string): string[] =>
+    value ? value.split(",") : [];
+
+  const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = Object.fromEntries(new FormData(e.currentTarget));
+
+    const newStatusLabel: CreateStatusLabel = {
+      name: formData.name as string,
+      description: (formData.description as string) || "",
+      color: formData.color as string,
+      allowPublish: formData.allowPublish === "true",
+      addPermissionRoles: transformRoleValues(
+        formData.addPermissionRoles as string
+      ),
+      removePermissionRoles: transformRoleValues(
+        formData.removePermissionRoles as string
+      ),
+    };
+
+    const errors = validateFormData(newStatusLabel);
+    if (Object.keys(errors).length > 0) {
+      setFormErrors(errors);
+      return;
+    } else {
+      setFormErrors({});
+    }
+
+    try {
+      const response: any = ZUID
+        ? await updateWorkflowStatusLabel({ ZUID, payload: newStatusLabel })
+        : await createWorkflowStatusLabel(newStatusLabel);
+
+      if (response?.error) {
+        throw new Error(response.error.data?.error || "An error occurred.");
+      }
+
+      setFocusedLabel(response?.data?.ZUID);
+    } catch (error) {
+      dispatch(
+        notify({
+          kind: "error",
+          message: `Error: ${
+            error instanceof Error
+              ? error.message
+              : "An unexpected error occurred."
+          }`,
+        })
+      );
+    } finally {
+      onClose();
+    }
+  };
+  const handleDeactivation = () =>
+    openDeactivationDialog({
+      ZUID,
+      name: values?.name,
+      callBack: onClose,
+    });
+
+  useEffect(() => {
+    if (!open) {
+      setFormErrors({});
+    }
+
+    if (rolesLoading || isFetching) return;
+    const roles =
+      rolesMenuData?.map((item) => ({
+        label: item?.role?.name as string,
+        value: item?.role?.ZUID,
+      })) || [];
+
+    const uniqueRoles = Array.from(
+      new Map(roles.map((role) => [role.value, role])).values()
+    );
+    setRolesMenuItems(uniqueRoles);
+  }, [rolesLoading, isFetching, rolesMenuData, open]);
+
+  return (
+    <Dialog
+      open={open}
+      fullWidth
+      maxWidth="sm"
+      PaperProps={{
+        component: "form",
+        onSubmit: handleFormSubmit,
+        sx: { borderRadius: 1 },
+      }}
+    >
+      <DialogTitle>
+        <Box display="flex" alignItems="center" gap={1}>
+          {!!ZUID && (
+            <Brightness1Icon
+              sx={{ color: values?.color, width: "1.25rem", height: "1.25rem" }}
+            />
+          )}
+          <Typography variant="h5" fontWeight={700} flexGrow={1}>
+            {values?.name ? `Edit ${values.name}` : "Create Status"}
+          </Typography>
+          <IconButton size="small" onClick={onClose}>
+            <CloseRoundedIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      </DialogTitle>
+      <DialogContent
+        sx={{ p: 0, backgroundColor: "grey.50" }}
+        data-cy="status-label-form"
+      >
+        <Box display="flex" flexDirection="column" gap={3} p={2.5}>
+          <FormInputFieldWrapper label="Name" error={formErrors?.name} required>
+            <OutlinedInput
+              name="name"
+              defaultValue={values?.name || ""}
+              placeholder="e.g. Needs Content Review"
+              size="small"
+            />
+          </FormInputFieldWrapper>
+          <FormInputFieldWrapper
+            label="Description (optional)"
+            description="Describe what this status means in the context of your workflows"
+            required
+          >
+            <OutlinedInput
+              name="description"
+              defaultValue={values?.description || ""}
+              multiline
+              minRows={2}
+              maxRows={2}
+              placeholder="Ready for legal team to review for publishing"
+              size="small"
+            />
+          </FormInputFieldWrapper>
+          <FormInputFieldWrapper label="Color" error={formErrors?.color}>
+            <ColorSelectInput
+              name="color"
+              defaultValue={values?.color}
+              usedColors={usedColors}
+            />
+          </FormInputFieldWrapper>
+          <FormInputFieldWrapper
+            label="Which roles can add this status?"
+            description="Users who can add this status will be notified."
+          >
+            <RolesSelectInput
+              name="addPermissionRoles"
+              listData={rolesMenuItems}
+              defaultValue={values?.addPermissionRoles?.join(",")}
+            />
+          </FormInputFieldWrapper>
+          <FormInputFieldWrapper
+            label="Which roles can remove this status?"
+            description="Users who can remove this status will be notified."
+          >
+            <RolesSelectInput
+              name="removePermissionRoles"
+              listData={rolesMenuItems}
+              defaultValue={values?.removePermissionRoles?.join(",")}
+            />
+          </FormInputFieldWrapper>
+          <FormControlLabel
+            sx={{ display: "flex", alignItems: "start" }}
+            control={
+              <Checkbox
+                name="allowPublish"
+                defaultChecked={values?.allowPublish}
+                disableRipple
+                color="default"
+                onChange={(
+                  e: React.ChangeEvent<HTMLInputElement>,
+                  checked: boolean
+                ) => {
+                  e.target.value = checked.toString();
+                }}
+                sx={{
+                  p: 0,
+                  ml: 1,
+                  color: "action.active",
+                  "&.Mui-checked": {
+                    color: "primary.main",
+                  },
+                }}
+              />
+            }
+            label={
+              <Box pl={1}>
+                <Typography
+                  variant="body2"
+                  color="text.primary"
+                  fontWeight={600}
+                >
+                  Allow publish with this status
+                </Typography>
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  fontWeight={400}
+                >
+                  This means a content item with this status can be published
+                </Typography>
+              </Box>
+            }
+          />
+          {!!ZUID && !isDeactivated && (
+            <Box>
+              <Button
+                variant="outlined"
+                color="inherit"
+                onClick={handleDeactivation}
+                startIcon={<PauseCircleOutlineRoundedIcon />}
+                data-cy="form-deactivate-status-button"
+              >
+                Deactivate Status
+              </Button>
+            </Box>
+          )}
+        </Box>
+      </DialogContent>
+      <DialogActions sx={{ pt: 2 }}>
+        <Button onClick={onClose} variant="outlined" color="inherit">
+          Cancel
+        </Button>
+        <LoadingButton
+          data-cy="status-label-submit-button"
+          type="submit"
+          variant="contained"
+          color="primary"
+          loading={createLabelIsLoading || editLabelIsLoading}
+          startIcon={<SaveIcon />}
+        >
+          {ZUID ? "Save" : "Create Status"}
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default StatusLabelForm;
diff --git a/src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/index.tsx b/src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/index.tsx
new file mode 100644
index 0000000000..a918d905a2
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/authorized/forms-dialogs/index.tsx
@@ -0,0 +1,130 @@
+import { createContext, useContext, useState, useCallback } from "react";
+import {
+  StatusLabel,
+  StatusLabelQuery,
+} from "../../../../../../../../../shell/services/types";
+
+import DeactivationDialog from "./DeactivationDialog";
+import StatusLabelForm from "./StatusLabelForm";
+
+// Types for StatusLabelForm and DeactivationDialog
+export type OpenStatusLabelFormTypes = {
+  labels?: StatusLabelQuery[] | [];
+  values?: StatusLabel;
+  isDeactivated?: boolean;
+};
+
+export type OpenDeactivationDialogTypes = {
+  ZUID: string;
+  name: string;
+  callBack?: () => void;
+};
+
+// FormDialogContext Types
+export type FormDialogContextTypes = {
+  openStatusLabelForm: ({
+    values,
+    labels,
+    isDeactivated,
+  }: OpenStatusLabelFormTypes) => void;
+  closeStatusLabelForm: () => void;
+  openDeactivationDialog: ({
+    ZUID,
+    name,
+    callBack,
+  }: OpenDeactivationDialogTypes) => void;
+  closeDeactivationDialog: () => void;
+  focusedLabel: string | undefined;
+  setFocusedLabel: (id: string | undefined) => void;
+};
+
+const FormDialogContext = createContext<FormDialogContextTypes | null>(null);
+
+const FormDialogContextProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [focusedLabel, setFocusedLabel] = useState<string | undefined>(
+    undefined
+  );
+
+  // Form dialog states
+  const [formIsOpen, setFormIsOpen] = useState<boolean>(false);
+  const [formValues, setFormValues] = useState<
+    OpenStatusLabelFormTypes | undefined
+  >(undefined);
+
+  // Deactivation dialog states
+  const [dialogIsOpen, setDialogIsOpen] = useState<boolean>(false);
+  const [dialogProps, setDialogProps] = useState<
+    OpenDeactivationDialogTypes | undefined
+  >(undefined);
+
+  // Handlers for status label form dialog
+  const openStatusLabelForm = useCallback(
+    ({ values, labels, isDeactivated }: OpenStatusLabelFormTypes) => {
+      setFormValues({ values, labels, isDeactivated });
+      setFormIsOpen(true);
+    },
+    []
+  );
+
+  const closeStatusLabelForm = useCallback(() => {
+    setFormValues(undefined);
+    setFormIsOpen(false);
+  }, []);
+
+  // Handlers for deactivation dialog
+  const openDeactivationDialog = useCallback(
+    ({ ZUID, name, callBack }: OpenDeactivationDialogTypes) => {
+      setDialogProps({ ZUID, name, callBack });
+      setDialogIsOpen(true);
+    },
+    []
+  );
+
+  const closeDeactivationDialog = useCallback(() => {
+    setDialogProps(undefined);
+    setDialogIsOpen(false);
+  }, []);
+
+  return (
+    <FormDialogContext.Provider
+      value={{
+        openStatusLabelForm,
+        closeStatusLabelForm,
+        openDeactivationDialog,
+        closeDeactivationDialog,
+        focusedLabel,
+        setFocusedLabel,
+      }}
+    >
+      {children}
+      <StatusLabelForm
+        open={formIsOpen}
+        onClose={closeStatusLabelForm}
+        labels={formValues?.labels}
+        values={formValues?.values}
+        isDeactivated={formValues?.isDeactivated}
+      />
+      <DeactivationDialog
+        open={dialogIsOpen}
+        onClose={closeDeactivationDialog}
+        {...dialogProps}
+      />
+    </FormDialogContext.Provider>
+  );
+};
+
+export const useFormDialogContext = () => {
+  const context = useContext(FormDialogContext);
+  if (context === null) {
+    throw new Error(
+      "useFormDialogContext must be used within a FormDialogContextProvider"
+    );
+  }
+  return context;
+};
+
+export default FormDialogContextProvider;
diff --git a/src/apps/settings/src/app/views/User/Workflows/authorized/index.tsx b/src/apps/settings/src/app/views/User/Workflows/authorized/index.tsx
new file mode 100644
index 0000000000..920a8d9474
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/authorized/index.tsx
@@ -0,0 +1,260 @@
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import {
+  Box,
+  Typography,
+  Button,
+  TextField,
+  InputAdornment,
+  FormGroup,
+  FormControlLabel,
+  Switch,
+  Collapse,
+} from "@mui/material";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import AddIcon from "@mui/icons-material/Add";
+import { Search } from "@mui/icons-material";
+import ActiveStatus from "./ActiveStatus";
+import DeactivatedStatus from "./DeactivatedStatus";
+import { useGetWorkflowStatusLabelsQuery } from "../../../../../../../../shell/services/instance";
+import { useFormDialogContext } from "./forms-dialogs";
+import { NoResults } from "../../../../../../../schema/src/app/components/NoResults";
+import { StatusLabelQuery } from "../../../../../../../../shell/services/types";
+
+export type StatusLabelSorting = {
+  id: string;
+  index?: number;
+  data: StatusLabelQuery;
+  isFiltered: boolean;
+  isDeactivated: boolean;
+};
+
+const LabelHeader = ({
+  title,
+  subtitle,
+}: {
+  title: string;
+  subtitle: string;
+}) => (
+  <Box
+    display="flex"
+    flexDirection="column"
+    justifyContent="flex-start"
+    alignItems="stretch"
+    px={4}
+    pb={0.75}
+  >
+    <Typography variant="h5" fontWeight={700} color="text.primary">
+      {title}
+    </Typography>
+    <Typography variant="body2" fontWeight={400} color="text.secondary">
+      {subtitle}
+    </Typography>
+  </Box>
+);
+
+export const AuthorizedUserPage = () => {
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const [showDeactivated, setShowDeactivated] = useState<boolean>(false);
+  const [searchValue, setSearchValue] = useState<string>("");
+  const { openStatusLabelForm } = useFormDialogContext();
+  const {
+    isLoading,
+    isFetching,
+    data: labels,
+  } = useGetWorkflowStatusLabelsQuery({ showDeleted: true });
+
+  const { activeLabels, deactivatedLabels, emptySearchResult } = useMemo(() => {
+    if (isLoading || !labels)
+      return {
+        activeLabels: [],
+        deactivatedLabels: [],
+        emptySearchResult: false,
+      };
+
+    const parsedLabels = labels
+      .map((label) => {
+        const searchString = `${label.name?.toLowerCase()}_${label.description?.toLowerCase()}`;
+        return {
+          id: label.ZUID,
+          data: label,
+          isFiltered: !searchString.includes(searchValue.toLowerCase().trim()),
+          isDeactivated: !!label.deletedAt,
+        };
+      })
+      .sort((a, b) => a?.data?.sort - b?.data?.sort);
+
+    const activeDeactivated = parsedLabels.reduce(
+      (acc, curr) => {
+        if (curr.isDeactivated) {
+          acc.deactivated.push({ ...curr, index: acc.deactivated.length });
+        } else {
+          acc.active.push({ ...curr, index: acc.active.length });
+        }
+        return acc;
+      },
+      { active: [], deactivated: [] }
+    );
+
+    const activeCount = activeDeactivated.active.filter(
+      (label) => !label.isFiltered
+    ).length;
+    const deactivatedCount = activeDeactivated.deactivated.filter(
+      (label) => !label.isFiltered
+    ).length;
+
+    const searchResultsCount = showDeactivated
+      ? activeCount + deactivatedCount
+      : activeCount;
+
+    return {
+      activeLabels: activeDeactivated.active,
+      deactivatedLabels: activeDeactivated.deactivated,
+      emptySearchResult: searchResultsCount < 1,
+    };
+  }, [labels, isLoading, searchValue, showDeactivated]);
+
+  const handleSearchRetry = () => {
+    setSearchValue("");
+    searchInputRef.current?.focus();
+  };
+
+  const handleOpenStatusLabelForm = () => {
+    const labelList = [
+      ...activeLabels.map((item) => item.data),
+      ...deactivatedLabels.map((item) => item.data),
+    ];
+    openStatusLabelForm({ labels: labelList });
+  };
+
+  return (
+    <>
+      <Box
+        px={4}
+        pt={4}
+        pb={1.5}
+        bgcolor="background.paper"
+        borderBottom="2px solid"
+        borderColor="border"
+        display="flex"
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="baseline"
+        flexGrow={0}
+        data-cy="workflows-authorized-page"
+      >
+        <Typography variant="h3" fontWeight={700} color="text.primary">
+          Workflows
+        </Typography>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleOpenStatusLabelForm}
+          sx={{ mr: 1 }}
+          size="small"
+          startIcon={<AddIcon />}
+        >
+          Create Status
+        </Button>
+      </Box>
+
+      <Box
+        px={4}
+        py={2}
+        display="flex"
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        flexGrow={0}
+      >
+        <TextField
+          data-cy="status-label-search-box"
+          placeholder="Search Statuses"
+          variant="outlined"
+          size="small"
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          InputProps={{
+            inputRef: searchInputRef,
+            startAdornment: (
+              <InputAdornment position="start">
+                <Search fontSize="small" />
+              </InputAdornment>
+            ),
+            sx: {
+              backgroundColor: "background.paper",
+              minWidth: "320px",
+            },
+          }}
+        />
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                size="small"
+                value="deactivated"
+                onChange={(e) => setShowDeactivated(e.target.checked)}
+              />
+            }
+            label={
+              <Typography variant="subtitle2">Show Deactivated</Typography>
+            }
+          />
+        </FormGroup>
+      </Box>
+
+      <Box
+        px={0}
+        pt={0}
+        pb={1}
+        width="100%"
+        position="relative"
+        boxSizing="border-box"
+        flexGrow={1}
+        overflow="auto"
+      >
+        {emptySearchResult ? (
+          <Box
+            data-cy="no-results-page"
+            width="100%"
+            height="100%"
+            sx={{ display: "grid", placeContent: "center" }}
+          >
+            <NoResults
+              type="search"
+              onButtonClick={handleSearchRetry}
+              searchTerm={searchValue}
+            />
+          </Box>
+        ) : (
+          <DndProvider backend={HTML5Backend}>
+            <Box>
+              <Collapse in={showDeactivated}>
+                <LabelHeader
+                  title="Active Statuses"
+                  subtitle="Active statuses are available to be added and removed from content items."
+                />
+              </Collapse>
+              <ActiveStatus labels={activeLabels} isLoading={isLoading} />
+            </Box>
+
+            <Box pt={2}>
+              <Collapse in={showDeactivated}>
+                <LabelHeader
+                  title="Deactivated Statuses"
+                  subtitle="These statuses can be re-activated at any time if you would like to add or remove them from content items."
+                />
+                {showDeactivated && (
+                  <DeactivatedStatus
+                    labels={deactivatedLabels}
+                    isLoading={isLoading}
+                  />
+                )}
+              </Collapse>
+            </Box>
+          </DndProvider>
+        )}
+      </Box>
+    </>
+  );
+};
diff --git a/src/apps/settings/src/app/views/User/Workflows/constants.tsx b/src/apps/settings/src/app/views/User/Workflows/constants.tsx
new file mode 100644
index 0000000000..40b29fb925
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/constants.tsx
@@ -0,0 +1,29 @@
+export type ColorMenu = {
+  label: string;
+  value: string;
+};
+
+export type RoleMenu = {
+  label: string;
+  value: string;
+};
+
+export const colorMenu: ColorMenu[] = [
+  { label: "Blue", value: "#0BA5EC" },
+  { label: "Deep Purple", value: "#4E5BA6" },
+  { label: "Green", value: "#12b76a" },
+  { label: "Orange", value: "#FF5C08" },
+  { label: "Pink", value: "#EE46BC" },
+  { label: "Purple", value: "#7A5AF8" },
+  { label: "Red", value: "#F04438" },
+  { label: "Rose", value: "#F63D68" },
+  { label: "Yellow", value: "#F79009" },
+  { label: "Grey", value: "#667085" },
+];
+
+const ADMIN_ZUID = "31-71cfc74-4dm13";
+const OWNER_ZUID = "31-71cfc74-0wn3r";
+
+export const AUTHORIZED_ROLES: string[] = [ADMIN_ZUID, OWNER_ZUID];
+
+export type AuthorizedRole = typeof AUTHORIZED_ROLES[number];
diff --git a/src/apps/settings/src/app/views/User/Workflows/index.tsx b/src/apps/settings/src/app/views/User/Workflows/index.tsx
new file mode 100644
index 0000000000..dbc7d79180
--- /dev/null
+++ b/src/apps/settings/src/app/views/User/Workflows/index.tsx
@@ -0,0 +1,44 @@
+import { ThemeProvider, Box } from "@mui/material";
+import { theme } from "@zesty-io/material";
+import RestrictedPage from "./RestrictedPage";
+import { useSelector } from "react-redux";
+import { AppState } from "../../../../../../../shell/store/types";
+import { AuthorizedUserPage } from "./authorized";
+import FormDialogContextProvider from "./authorized/forms-dialogs";
+import { AUTHORIZED_ROLES } from "./constants";
+
+type UserType = {
+  systemRoleZUID: string;
+  staff: boolean;
+};
+
+const Workflows = () => {
+  const { systemRoleZUID, staff }: UserType = useSelector(
+    (state: AppState) => ({
+      systemRoleZUID: state?.userRole?.systemRoleZUID,
+      staff: state.user?.staff,
+    })
+  );
+
+  const isAuthorized = AUTHORIZED_ROLES.includes(systemRoleZUID) || staff;
+
+  return (
+    <ThemeProvider theme={theme}>
+      <FormDialogContextProvider>
+        <Box
+          width="100%"
+          height="100%"
+          bgcolor="grey.50"
+          display="flex"
+          flexDirection="column"
+          justifyContent="flex-start"
+          alignItems="stretch"
+        >
+          {isAuthorized ? <AuthorizedUserPage /> : <RestrictedPage />}
+        </Box>
+      </FormDialogContextProvider>
+    </ThemeProvider>
+  );
+};
+
+export default Workflows;
diff --git a/src/shell/hooks/useResizeObserver.ts b/src/shell/hooks/useResizeObserver.ts
new file mode 100644
index 0000000000..8d4ba5125e
--- /dev/null
+++ b/src/shell/hooks/useResizeObserver.ts
@@ -0,0 +1,35 @@
+import {
+  useEffect,
+  useCallback,
+  useState,
+  RefObject,
+  ForwardedRef,
+} from "react";
+
+export const useResizeObserver = (
+  ref: RefObject<Element> | ForwardedRef<Element>
+) => {
+  const [dimensions, setDimensions] = useState<DOMRectReadOnly | null>(null);
+
+  const callback = useCallback((entries: ResizeObserverEntry[]) => {
+    const entry = entries[0];
+
+    setDimensions(entry.contentRect);
+  }, []);
+
+  useEffect(() => {
+    const observer = new ResizeObserver(callback);
+
+    if (ref && "current" in ref && ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref && "current" in ref && ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [ref, callback]);
+
+  return dimensions;
+};
diff --git a/src/shell/services/instance.ts b/src/shell/services/instance.ts
index 71379e29d8..83893f4b96 100644
--- a/src/shell/services/instance.ts
+++ b/src/shell/services/instance.ts
@@ -22,10 +22,16 @@ import {
   Language,
   Data,
   StyleCategory,
-  GroupItem,
+  WorkflowStatusLabel,
+  ItemWorkflowStatus,
+  WorkflowStatusLabelQueryParams,
+  CreateStatusLabel,
+  UpdateSortingOrder,
 } from "./types";
 import { batchApiRequests } from "../../utility/batchApiRequests";
 
+// import {UpdateSortingOrderProps} from "../../apps/settings/src/app/views/User/Workflows/types";
+
 // Define a service using a base URL and expected endpoints
 export const instanceApi = createApi({
   reducerPath: "instanceApi",
@@ -52,6 +58,8 @@ export const instanceApi = createApi({
     "HeadTags",
     "ContentItems",
     "ItemPublishings",
+    "ItemWorkflowStatus",
+    "WorkflowStatusLabels",
     "Groups",
   ],
   endpoints: (builder) => ({
@@ -607,6 +615,69 @@ export const instanceApi = createApi({
       query: () => `/web/stylesheets/variables/categories`,
       transformResponse: getResponseData,
     }),
+    getItemWorkflowStatus: builder.query<
+      ItemWorkflowStatus[],
+      { modelZUID: string; itemZUID: string }
+    >({
+      query: ({ modelZUID, itemZUID }) =>
+        `/content/models/${modelZUID}/items/${itemZUID}/labels`,
+      transformResponse: getResponseData,
+      providesTags: (_, __, { itemZUID }) => [
+        { type: "ItemWorkflowStatus", id: itemZUID },
+      ],
+    }),
+    createItemWorkflowStatus: builder.mutation<
+      any,
+      {
+        modelZUID: string;
+        itemZUID: string;
+        itemVersionZUID: string;
+        itemVersion: number;
+        label_zuids: string[];
+      }
+    >({
+      query: (payload) => ({
+        url: `/content/models/${payload.modelZUID}/items/${payload.itemZUID}/labels`,
+        method: "POST",
+        body: {
+          itemVersionZUID: payload.itemVersionZUID,
+          itemVersion: payload.itemVersion,
+          label_zuids: payload.label_zuids,
+        },
+      }),
+      invalidatesTags: (_, __, { itemZUID }) => [
+        { type: "ItemWorkflowStatus", id: itemZUID },
+      ],
+    }),
+    updateItemWorkflowStatus: builder.mutation<
+      any,
+      {
+        modelZUID: string;
+        itemZUID: string;
+        itemWorkflowZUID: string;
+        labelZUIDs: string[];
+      }
+    >({
+      query: ({ modelZUID, itemZUID, itemWorkflowZUID, labelZUIDs }) => ({
+        url: `/content/models/${modelZUID}/items/${itemZUID}/labels/${itemWorkflowZUID}`,
+        method: "PUT",
+        body: {
+          labelZUIDs,
+        },
+      }),
+      invalidatesTags: (_, __, { itemZUID }) => [
+        { type: "ItemWorkflowStatus", id: itemZUID },
+      ],
+    }),
+    getWorkflowStatusLabels: builder.query<
+      WorkflowStatusLabel[],
+      WorkflowStatusLabelQueryParams | void
+    >({
+      query: ({ showDeleted = false }: WorkflowStatusLabelQueryParams = {}) =>
+        `/env/labels?showDeleted=${showDeleted}`,
+      transformResponse: getResponseData,
+      providesTags: ["WorkflowStatusLabels"],
+    }),
     getGroups: builder.query<any, Record<string, string> | void>({
       query: (params) => {
         if (!!params && Object.keys(params)?.length) {
@@ -636,6 +707,52 @@ export const instanceApi = createApi({
       }),
       invalidatesTags: ["Groups"],
     }),
+
+    createWorkflowStatusLabel: builder.mutation<any, CreateStatusLabel>({
+      query: (payload) => {
+        return {
+          url: `/env/labels`,
+          method: "POST",
+          body: payload,
+        };
+      },
+      transformResponse: getResponseData,
+      invalidatesTags: ["WorkflowStatusLabels"],
+    }),
+
+    //Update workflow status label
+    updateWorkflowStatusLabel: builder.mutation<
+      any,
+      { ZUID: string; payload: CreateStatusLabel }
+    >({
+      query: ({ ZUID, payload }) => ({
+        url: `/env/labels/${ZUID}`,
+        method: "PUT",
+        body: payload,
+      }),
+      transformResponse: getResponseData,
+      invalidatesTags: ["WorkflowStatusLabels"],
+    }),
+    //Update workflow status order
+    updateWorkflowStatusLabelOrder: builder.mutation<
+      any[],
+      UpdateSortingOrder[]
+    >({
+      query: (payload) => ({
+        url: `/env/labels`,
+        method: "PUT",
+        body: { data: payload },
+      }),
+      invalidatesTags: ["WorkflowStatusLabels"],
+    }),
+    //Deactivate workflow status label
+    deactivateWorkflowStatusLabel: builder.mutation<any, { ZUID: string }>({
+      query: ({ ZUID }) => ({
+        url: `/env/labels/${ZUID}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["WorkflowStatusLabels"],
+    }),
   }),
 });
 
@@ -686,7 +803,15 @@ export const {
   useUpdateContentItemsMutation,
   useCreateItemsPublishingMutation,
   useDeleteContentItemsMutation,
+  useGetItemWorkflowStatusQuery,
+  useCreateItemWorkflowStatusMutation,
+  useUpdateItemWorkflowStatusMutation,
+  useGetWorkflowStatusLabelsQuery,
   useGetGroupsQuery,
   useGetGroupByZUIDQuery,
   useCreateGroupMutation,
+  useCreateWorkflowStatusLabelMutation,
+  useUpdateWorkflowStatusLabelMutation,
+  useUpdateWorkflowStatusLabelOrderMutation,
+  useDeactivateWorkflowStatusLabelMutation,
 } = instanceApi;
diff --git a/src/shell/services/types.ts b/src/shell/services/types.ts
index 1d04fca105..5995070af2 100644
--- a/src/shell/services/types.ts
+++ b/src/shell/services/types.ts
@@ -579,6 +579,35 @@ export type CommentReply = {
   updatedAt: string;
 };
 
+export type WorkflowStatusLabel = {
+  ZUID: string;
+  name: string;
+  description: string;
+  color: string;
+  allowPublish: boolean;
+  sort: number;
+  addPermissionRoles: string[];
+  removePermissionRoles: string[];
+  createdByUserZUID: string;
+  updatedByUserZUID: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt?: string;
+};
+
+export type ItemWorkflowStatus = {
+  ZUID: string;
+  itemZUID: string;
+  setZUID: string;
+  itemVersionZUID: string;
+  itemVersion: number;
+  labelZUIDs: string[];
+  createdByUserZUID: string;
+  updatedByUserZUID: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
 export type GroupItem = {
   zuid: string;
   type?: string;
@@ -589,3 +618,45 @@ export type GroupItem = {
   createdAt: string;
   updatedAt: string;
 };
+
+export type WorkflowStatusLabelQueryParams = {
+  showDeleted?: boolean;
+};
+
+export type StatusLabelQuery = {
+  ZUID: string;
+  name: string;
+  description: string;
+  color: string;
+  allowPublish: boolean;
+  sort: number;
+  addPermissionRoles: string[];
+  removePermissionRoles: string[];
+  createdByUserZUID: string;
+  updatedByUserZUID: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt?: string | undefined;
+};
+
+export type StatusLabel = Omit<
+  WorkflowStatusLabel,
+  | "createdByUserZUID"
+  | "updatedByUserZUID"
+  | "createdAt"
+  | "updatedAt"
+  | "deletedAt"
+>;
+
+export type UpdateStatusLabel = Omit<
+  WorkflowStatusLabel,
+  | "createdByUserZUID"
+  | "updatedByUserZUID"
+  | "createdAt"
+  | "updatedAt"
+  | "deletedAt"
+>;
+
+export type CreateStatusLabel = Partial<Omit<StatusLabel, "ZUID" | "sort">>;
+
+export type UpdateSortingOrder = Pick<StatusLabelQuery, "ZUID" | "sort">;
diff --git a/src/shell/store/content.js b/src/shell/store/content.js
index acff43c44d..1e7ca8e58d 100644
--- a/src/shell/store/content.js
+++ b/src/shell/store/content.js
@@ -544,7 +544,9 @@ export function saveItem({
       }
     )
       .then(async (res) => {
-        dispatch(instanceApi.util.invalidateTags(["ContentNav"]));
+        dispatch(
+          instanceApi.util.invalidateTags(["ContentNav", "ItemWorkflowStatus"])
+        );
         dispatch(
           instanceApi.util.invalidateTags([{ type: "ItemVersions", itemZUID }])
         );
@@ -565,7 +567,12 @@ export function saveItem({
                 `${CONFIG.URL_PREVIEW_PROTOCOL}${itemBlockPreviewUrl}`
               )
             ).then(() =>
-              dispatch(instanceApi.util.invalidateTags(["ContentItems"]))
+              dispatch(
+                instanceApi.util.invalidateTags([
+                  "ContentItems",
+                  "ItemWorkflowStatus",
+                ])
+              )
             );
           }
         }