diff --git a/frontend/common/utils/utils.tsx b/frontend/common/utils/utils.tsx
index 88389946f1a4..c077cb1ef62d 100644
--- a/frontend/common/utils/utils.tsx
+++ b/frontend/common/utils/utils.tsx
@@ -19,7 +19,7 @@ import {
 import flagsmith from '@flagsmith/flagsmith'
 import { ReactNode } from 'react'
 import _ from 'lodash'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import WarningMessage from 'components/WarningMessage'
 import Constants from 'common/constants'
 import { defaultFlags } from 'common/stores/default-flags'
diff --git a/frontend/web/components/EditIdentity.tsx b/frontend/web/components/EditIdentity.tsx
index e614fc12e615..0444fa23254b 100644
--- a/frontend/web/components/EditIdentity.tsx
+++ b/frontend/web/components/EditIdentity.tsx
@@ -2,7 +2,7 @@ import React, { FC, useEffect, useRef, useState } from 'react'
 import { Identity } from 'common/types/responses'
 import { useUpdateIdentityMutation } from 'common/services/useIdentity'
 import Button from './base/forms/Button'
-import ErrorMessage from './ErrorMessage'
+import ErrorMessage from './messages/ErrorMessage'
 import GhostInput from './base/forms/GhostInput'
 
 type EditIdentityType = {
diff --git a/frontend/web/components/ErrorMessage.js b/frontend/web/components/ErrorMessage.js
deleted file mode 100644
index 90e43f94a5bf..000000000000
--- a/frontend/web/components/ErrorMessage.js
+++ /dev/null
@@ -1,65 +0,0 @@
-// import propTypes from 'prop-types';
-import React, { PureComponent } from 'react'
-import Icon from './Icon'
-import Button from './base/forms/Button'
-import Format from 'common/utils/format'
-import Constants from 'common/constants'
-
-export default class ErrorMessage extends PureComponent {
-  static displayName = 'ErrorMessage'
-
-  render() {
-    const errorMessageClassName = `alert alert-danger ${
-      this.props.errorMessageClass || 'flex-1 align-items-center'
-    }`
-    const error =
-      this.props.error?.data?.metadata?.find((item) =>
-        // eslint-disable-next-line no-prototype-builtins
-        item.hasOwnProperty('non_field_errors'),
-      )?.non_field_errors[0] ||
-      this.props.error?.data ||
-      this.props.error?.message ||
-      this.props.error
-    return this.props.error ? (
-      <div
-        className={errorMessageClassName}
-        style={{
-          display: this.props.errorMessageClass ? 'initial' : '',
-          ...this.props.errorStyles,
-        }}
-      >
-        <span className='icon-alert'>
-          <Icon name='close-circle' />
-        </span>
-        {error instanceof Error ? (
-          error.message
-        ) : typeof error === 'object' ? (
-          <div
-            dangerouslySetInnerHTML={{
-              __html: Object.keys(error)
-                .map(
-                  (v) =>
-                    `${Format.camelCase(Format.enumeration.get(v))}: ${
-                      error[v]
-                    }`,
-                )
-                .join('<br/>'),
-            }}
-          />
-        ) : (
-          error
-        )}
-        {this.props.enabledButton && (
-          <Button
-            className='btn ml-3'
-            onClick={() => {
-              document.location.replace(Constants.getUpgradeUrl())
-            }}
-          >
-            Upgrade plan
-          </Button>
-        )}
-      </div>
-    ) : null
-  }
-}
diff --git a/frontend/web/components/NewVersionWarning.tsx b/frontend/web/components/NewVersionWarning.tsx
index 8fc1d7d0cc12..3c16540ceeae 100644
--- a/frontend/web/components/NewVersionWarning.tsx
+++ b/frontend/web/components/NewVersionWarning.tsx
@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react'
 import { useGetFeatureVersionsQuery } from 'common/services/useFeatureVersion'
 import moment from 'moment'
-import ErrorMessage from './ErrorMessage'
+import ErrorMessage from './messages/ErrorMessage'
 
 type NewVersionWarningType = {
   date: string
diff --git a/frontend/web/components/SamlForm.js b/frontend/web/components/SamlForm.js
index b4eddef2d304..ef9ef008c346 100644
--- a/frontend/web/components/SamlForm.js
+++ b/frontend/web/components/SamlForm.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import data from 'common/data/base/_data'
-import ErrorMessage from './ErrorMessage'
+import ErrorMessage from './messages/ErrorMessage'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Icon from './Icon'
 import ModalHR from './modals/ModalHR'
diff --git a/frontend/web/components/SimpleTwoFactor/index.js b/frontend/web/components/SimpleTwoFactor/index.js
index 2527f1bd8f3a..923d2729755e 100644
--- a/frontend/web/components/SimpleTwoFactor/index.js
+++ b/frontend/web/components/SimpleTwoFactor/index.js
@@ -1,7 +1,7 @@
 import propTypes from 'prop-types'
 import React, { Component } from 'react'
 import QRCode from 'qrcode.react'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 
 export default class TheComponent extends Component {
   static displayName = 'TheComponent'
diff --git a/frontend/web/components/SimpleTwoFactor/prompt.js b/frontend/web/components/SimpleTwoFactor/prompt.js
index 1b5a0c42b9b1..4d18ef31e298 100644
--- a/frontend/web/components/SimpleTwoFactor/prompt.js
+++ b/frontend/web/components/SimpleTwoFactor/prompt.js
@@ -1,6 +1,6 @@
 import propTypes from 'prop-types'
 import React, { PureComponent } from 'react'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 
 export default class TheComponent extends PureComponent {
   static displayName = 'TheComponent'
diff --git a/frontend/web/components/UsersGroups.tsx b/frontend/web/components/UsersGroups.tsx
index d37f81c5087e..153bb36f1b1d 100644
--- a/frontend/web/components/UsersGroups.tsx
+++ b/frontend/web/components/UsersGroups.tsx
@@ -7,7 +7,7 @@ import { sortBy } from 'lodash'
 import { GroupUser, UserGroupSummary } from 'common/types/responses'
 import Switch from './Switch'
 import PanelSearch from './PanelSearch'
-import ErrorMessage from './ErrorMessage'
+import ErrorMessage from './messages/ErrorMessage'
 
 type UsersGroupsType = {
   user: GroupUser
diff --git a/frontend/web/components/import-export/FeatureImport.tsx b/frontend/web/components/import-export/FeatureImport.tsx
index bb50bc0bf530..0b22ed73cb11 100644
--- a/frontend/web/components/import-export/FeatureImport.tsx
+++ b/frontend/web/components/import-export/FeatureImport.tsx
@@ -19,7 +19,7 @@ import {
 import FeatureRow from 'components/feature-summary/FeatureRow'
 import Button from 'components/base/forms/Button'
 import { useCreateFlagsmithProjectImportMutation } from 'common/services/useFlagsmithProjectImport'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import InfoMessage from 'components/InfoMessage'
 import WarningMessage from 'components/WarningMessage'
 import FeatureListStore from 'common/stores/feature-list-store'
diff --git a/frontend/web/components/modals/ChangeEmailAddress.tsx b/frontend/web/components/modals/ChangeEmailAddress.tsx
index a2454556da66..18c2c8d8cfea 100644
--- a/frontend/web/components/modals/ChangeEmailAddress.tsx
+++ b/frontend/web/components/modals/ChangeEmailAddress.tsx
@@ -6,7 +6,7 @@ import Utils from 'common/utils/utils'
 import InputGroup from 'components/base/forms/InputGroup'
 import Button from 'components/base/forms/Button'
 import ModalHR from './ModalHR'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 
 type ChangeEmailAddressType = {
   onComplete?: () => void
diff --git a/frontend/web/components/modals/ConfirmDeleteAccount.tsx b/frontend/web/components/modals/ConfirmDeleteAccount.tsx
index 18c36d7ddbe9..c8c35aac487b 100644
--- a/frontend/web/components/modals/ConfirmDeleteAccount.tsx
+++ b/frontend/web/components/modals/ConfirmDeleteAccount.tsx
@@ -6,7 +6,7 @@ import { useDeleteAccountMutation } from 'common/services/useAccount'
 import InputGroup from 'components/base/forms/InputGroup'
 import ModalHR from './ModalHR'
 import AppActions from 'common/dispatcher/app-actions'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 
 type ConfirmDeleteAccountType = {
   lastUserOrganisations: Organisation[]
diff --git a/frontend/web/components/modals/ConfirmDeleteRole.tsx b/frontend/web/components/modals/ConfirmDeleteRole.tsx
index fb294fb91c45..513184c9d6ae 100644
--- a/frontend/web/components/modals/ConfirmDeleteRole.tsx
+++ b/frontend/web/components/modals/ConfirmDeleteRole.tsx
@@ -3,7 +3,7 @@ import Button from 'components/base/forms/Button'
 import Utils from 'common/utils/utils'
 import { useDeleteRoleMutation } from 'common/services/useRole'
 import ModalHR from './ModalHR'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import { Role } from 'common/types/responses'
 
 type ConfirmDeleteRoleType = {
diff --git a/frontend/web/components/modals/CreateAuditLogWebhook.tsx b/frontend/web/components/modals/CreateAuditLogWebhook.tsx
index 74a3a38b2bd4..207eadb76676 100644
--- a/frontend/web/components/modals/CreateAuditLogWebhook.tsx
+++ b/frontend/web/components/modals/CreateAuditLogWebhook.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef, FormEvent, ChangeEvent } from 'react'
 import Constants from 'common/constants'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Highlight from 'components/Highlight'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import TestWebhook from 'components/TestWebhook'
 import ViewDocs from 'components/ViewDocs'
 import Button from 'components/base/forms/Button'
diff --git a/frontend/web/components/modals/CreateEditIntegrationModal.tsx b/frontend/web/components/modals/CreateEditIntegrationModal.tsx
index 5fa4ac7e0f75..a6c1af9020a4 100644
--- a/frontend/web/components/modals/CreateEditIntegrationModal.tsx
+++ b/frontend/web/components/modals/CreateEditIntegrationModal.tsx
@@ -2,7 +2,7 @@ import React, { FC, FormEvent, useEffect, useState } from 'react'
 import EnvironmentSelect from 'components/EnvironmentSelect'
 import MyGitHubRepositoriesComponent from 'components/MyGitHubRepositoriesComponent'
 import _data from 'common/data/base/_data'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Button from 'components/base/forms/Button'
 import classNames from 'classnames'
 import { getStore } from 'common/store'
diff --git a/frontend/web/components/modals/CreateMetadataField.tsx b/frontend/web/components/modals/CreateMetadataField.tsx
index 44c24fd6ea43..ab2f0219be75 100644
--- a/frontend/web/components/modals/CreateMetadataField.tsx
+++ b/frontend/web/components/modals/CreateMetadataField.tsx
@@ -26,7 +26,7 @@ import {
   MetadataFieldModelField,
   isRequiredFor,
 } from 'common/types/responses'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 
 type CreateMetadataFieldType = {
   id?: string
diff --git a/frontend/web/components/modals/CreateProject.js b/frontend/web/components/modals/CreateProject.js
index 3da96e7b80bf..2758263be68c 100644
--- a/frontend/web/components/modals/CreateProject.js
+++ b/frontend/web/components/modals/CreateProject.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Button from 'components/base/forms/Button'
 import { setInterceptClose } from './base/ModalDefault'
 import PlanBasedAccess from 'components/PlanBasedAccess'
diff --git a/frontend/web/components/modals/CreateSAML.tsx b/frontend/web/components/modals/CreateSAML.tsx
index 2b399607146e..ae0d2b837482 100644
--- a/frontend/web/components/modals/CreateSAML.tsx
+++ b/frontend/web/components/modals/CreateSAML.tsx
@@ -12,7 +12,7 @@ import {
 import { useCreateSamlAttributeMappingMutation } from 'common/services/useSamlAttributeMapping'
 import Button from 'components/base/forms/Button'
 import { Req } from 'common/types/requests'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import { getStore } from 'common/store'
 import XMLUpload from 'components/XMLUpload'
 import { IonIcon } from '@ionic/react'
diff --git a/frontend/web/components/modals/CreateTrait.tsx b/frontend/web/components/modals/CreateTrait.tsx
index d17216024cd1..582c3ff1b516 100644
--- a/frontend/web/components/modals/CreateTrait.tsx
+++ b/frontend/web/components/modals/CreateTrait.tsx
@@ -9,7 +9,7 @@ import React, {
 import Highlight from 'components/Highlight'
 import Constants from 'common/constants'
 import Format from 'common/utils/format'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import ModalHR from './ModalHR'
 import IdentityProvider from 'common/providers/IdentityProvider'
 import _ from 'lodash'
diff --git a/frontend/web/components/modals/CreateUser.tsx b/frontend/web/components/modals/CreateUser.tsx
index 8f1e684425a9..9664a3a80b57 100644
--- a/frontend/web/components/modals/CreateUser.tsx
+++ b/frontend/web/components/modals/CreateUser.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useState } from 'react'
 import ChipInput from 'components/ChipInput'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Button from 'components/base/forms/Button'
 import { useCreateIdentitiesMutation } from 'common/services/useIdentity'
 import Utils from 'common/utils/utils'
diff --git a/frontend/web/components/modals/CreateWebhook.js b/frontend/web/components/modals/CreateWebhook.js
index 73c79e9087dd..06ec1fa47d40 100644
--- a/frontend/web/components/modals/CreateWebhook.js
+++ b/frontend/web/components/modals/CreateWebhook.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import Constants from 'common/constants'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Highlight from 'components/Highlight'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import TestWebhook from 'components/TestWebhook'
 import ViewDocs from 'components/ViewDocs'
 
diff --git a/frontend/web/components/modals/CreateWebhook.tsx b/frontend/web/components/modals/CreateWebhook.tsx
index 18ff3364a433..3d9f892235b4 100644
--- a/frontend/web/components/modals/CreateWebhook.tsx
+++ b/frontend/web/components/modals/CreateWebhook.tsx
@@ -2,7 +2,7 @@ import Constants from 'common/constants'
 import { useGetEnvironmentQuery } from 'common/services/useEnvironment'
 import { Webhook } from 'common/types/responses'
 import Utils from 'common/utils/utils'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Highlight from 'components/Highlight'
 import TestWebhook from 'components/TestWebhook'
 import ViewDocs from 'components/ViewDocs'
diff --git a/frontend/web/components/modals/ForgotPasswordModal.tsx b/frontend/web/components/modals/ForgotPasswordModal.tsx
index 9678304381ec..e0b0e28fd0ec 100644
--- a/frontend/web/components/modals/ForgotPasswordModal.tsx
+++ b/frontend/web/components/modals/ForgotPasswordModal.tsx
@@ -3,7 +3,7 @@ import { FC, FormEvent, useState } from 'react'
 import InputGroup from 'components/base/forms/InputGroup'
 import Utils from 'common/utils/utils'
 import Project from 'common/project'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Button from 'components/base/forms/Button'
 import ModalHR from './ModalHR'
 
diff --git a/frontend/web/components/modals/InviteUsers.tsx b/frontend/web/components/modals/InviteUsers.tsx
index 41d0a07b1df6..3e890682af61 100644
--- a/frontend/web/components/modals/InviteUsers.tsx
+++ b/frontend/web/components/modals/InviteUsers.tsx
@@ -10,7 +10,7 @@ import InputGroup from 'components/base/forms/InputGroup'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
 import Utils from 'common/utils/utils'
 import _ from 'lodash'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import AccountStore from 'common/stores/account-store'
 import { close as closeIcon } from 'ionicons/icons'
 import { MultiValueProps } from 'react-select/lib/components/MultiValue'
diff --git a/frontend/web/components/modals/create-feature/index.js b/frontend/web/components/modals/create-feature/index.js
index efdc235dda61..ff7e3e8a53c5 100644
--- a/frontend/web/components/modals/create-feature/index.js
+++ b/frontend/web/components/modals/create-feature/index.js
@@ -14,7 +14,7 @@ import ChangeRequestModal from 'components/modals/ChangeRequestModal'
 import classNames from 'classnames'
 import InfoMessage from 'components/InfoMessage'
 import JSONReference from 'components/JSONReference'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Permission from 'common/providers/Permission'
 import IdentitySelect from 'components/IdentitySelect'
 import {
diff --git a/frontend/web/components/modals/create-feature/tabs/CreateFeature.tsx b/frontend/web/components/modals/create-feature/tabs/CreateFeature.tsx
index bb5f0c312c05..313222a78bc5 100644
--- a/frontend/web/components/modals/create-feature/tabs/CreateFeature.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/CreateFeature.tsx
@@ -2,7 +2,7 @@ import React, { FC, useCallback, useEffect, useState } from 'react'
 import { FeatureState, ProjectFlag } from 'common/types/responses'
 import FeatureValue from './FeatureValue'
 import FeatureSettings from './FeatureSettings'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import WarningMessage from 'components/WarningMessage'
 import { useHasPermission } from 'common/providers/Permission'
 import { ProjectPermission } from 'common/types/permissions.types'
diff --git a/frontend/web/components/modals/create-feature/tabs/FeatureValue.tsx b/frontend/web/components/modals/create-feature/tabs/FeatureValue.tsx
index 850325ff7823..da3f6719bb29 100644
--- a/frontend/web/components/modals/create-feature/tabs/FeatureValue.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/FeatureValue.tsx
@@ -4,7 +4,7 @@ import ValueEditor from 'components/ValueEditor'
 import Constants from 'common/constants'
 import { VariationOptions } from 'components/mv/VariationOptions'
 import { AddVariationButton } from 'components/mv/AddVariationButton'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import WarningMessage from 'components/WarningMessage'
 import Tooltip from 'components/Tooltip'
 import Icon from 'components/Icon'
diff --git a/frontend/web/components/mv/VariationOptions.tsx b/frontend/web/components/mv/VariationOptions.tsx
index 400625347a1c..6233733e2398 100644
--- a/frontend/web/components/mv/VariationOptions.tsx
+++ b/frontend/web/components/mv/VariationOptions.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ValueEditor from 'components/ValueEditor'
 import InfoMessage from 'components/InfoMessage'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import { VariationValueInput } from './VariationValueInput'
 import Utils from 'common/utils/utils'
 import { FlagsmithValue, MultivariateOption } from 'common/types/responses'
diff --git a/frontend/web/components/pages/AccountSettingsPage.js b/frontend/web/components/pages/AccountSettingsPage.js
index 2a8fbc04e690..af790cba2588 100644
--- a/frontend/web/components/pages/AccountSettingsPage.js
+++ b/frontend/web/components/pages/AccountSettingsPage.js
@@ -1,7 +1,7 @@
 // import propTypes from 'prop-types';
 import React, { Component, ReactNode } from 'react'
 import Button from 'components/base/forms/Button'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import _data from 'common/data/base/_data'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import TwoFactor from 'components/TwoFactor'
diff --git a/frontend/web/components/pages/AuditLogItemPage.tsx b/frontend/web/components/pages/AuditLogItemPage.tsx
index 68f0daa49a21..b713406d371a 100644
--- a/frontend/web/components/pages/AuditLogItemPage.tsx
+++ b/frontend/web/components/pages/AuditLogItemPage.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { useGetAuditLogItemQuery } from 'common/services/useAuditLogItem'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Breadcrumb from 'components/Breadcrumb'
 import PageTitle from 'components/PageTitle'
 import Panel from 'components/base/grid/Panel'
diff --git a/frontend/web/components/pages/BrokenPage.tsx b/frontend/web/components/pages/BrokenPage.tsx
index 31be79aac6f5..9cba1908efb7 100644
--- a/frontend/web/components/pages/BrokenPage.tsx
+++ b/frontend/web/components/pages/BrokenPage.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect } from 'react'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 
 type BrokenPageType = {}
 
diff --git a/frontend/web/components/pages/ChangeRequestDetailPage.tsx b/frontend/web/components/pages/ChangeRequestDetailPage.tsx
index 5751dacb63dc..ed3e14ded59f 100644
--- a/frontend/web/components/pages/ChangeRequestDetailPage.tsx
+++ b/frontend/web/components/pages/ChangeRequestDetailPage.tsx
@@ -40,7 +40,7 @@ import MyGroupsSelect from 'components/MyGroupsSelect'
 import Panel from 'components/base/grid/Panel'
 import DiffChangeRequest from 'components/diff/DiffChangeRequest'
 import JSONReference from 'components/JSONReference'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import { useHistory } from 'react-router-dom'
 import { openPublishChangeRequestConfirm } from 'components/PublishChangeRequestModal'
diff --git a/frontend/web/components/pages/CreateEnvironmentPage.tsx b/frontend/web/components/pages/CreateEnvironmentPage.tsx
index 619966d8d837..24e687734cf5 100644
--- a/frontend/web/components/pages/CreateEnvironmentPage.tsx
+++ b/frontend/web/components/pages/CreateEnvironmentPage.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Permission from 'common/providers/Permission'
 import Constants from 'common/constants'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import PageTitle from 'components/PageTitle'
 import CondensedRow from 'components/CondensedRow'
 import AddMetadataToEntity from 'components/metadata/AddMetadataToEntity'
diff --git a/frontend/web/components/pages/FeatureHistoryDetailPage.tsx b/frontend/web/components/pages/FeatureHistoryDetailPage.tsx
index be2c374c26e0..45e891b85356 100644
--- a/frontend/web/components/pages/FeatureHistoryDetailPage.tsx
+++ b/frontend/web/components/pages/FeatureHistoryDetailPage.tsx
@@ -12,7 +12,7 @@ import { Environment } from 'common/types/responses'
 import PageTitle from 'components/PageTitle'
 import FeatureVersion from 'components/FeatureVersion'
 import moment from 'moment'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Tabs from 'components/navigation/TabMenu/Tabs'
 import TabItem from 'components/navigation/TabMenu/TabItem'
 import Breadcrumb from 'components/Breadcrumb'
diff --git a/frontend/web/components/pages/HomePage.tsx b/frontend/web/components/pages/HomePage.tsx
index 2a6535f638df..7d6c79f6d424 100644
--- a/frontend/web/components/pages/HomePage.tsx
+++ b/frontend/web/components/pages/HomePage.tsx
@@ -6,7 +6,7 @@ import Card from 'components/Card'
 import NavIconSmall from 'components/svg/NavIconSmall'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Constants from 'common/constants'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Button from 'components/base/forms/Button'
 import PasswordRequirements from 'components/PasswordRequirements'
 import { informationCircleOutline } from 'ionicons/icons'
diff --git a/frontend/web/components/pages/PasswordResetPage.js b/frontend/web/components/pages/PasswordResetPage.js
index 09f8e390b7ed..e66299fce953 100644
--- a/frontend/web/components/pages/PasswordResetPage.js
+++ b/frontend/web/components/pages/PasswordResetPage.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import Constants from 'common/constants'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import { withRouter } from 'react-router-dom'
 const PasswordResetPage = class extends Component {
   static displayName = 'PasswordResetPage'
diff --git a/frontend/web/components/pages/UsersAndPermissionsPage.tsx b/frontend/web/components/pages/UsersAndPermissionsPage.tsx
index f5b46206edbb..d7c581cca283 100644
--- a/frontend/web/components/pages/UsersAndPermissionsPage.tsx
+++ b/frontend/web/components/pages/UsersAndPermissionsPage.tsx
@@ -26,7 +26,7 @@ import { useGetRolesQuery } from 'common/services/useRole'
 import AppActions from 'common/dispatcher/app-actions'
 import { RouterChildContext, useHistory } from 'react-router-dom'
 import Input from 'components/base/forms/Input'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import PanelSearch from 'components/PanelSearch'
 import moment from 'moment'
 import sortBy from 'lodash/sortBy'
diff --git a/frontend/web/components/pages/admin-dashboard/AdminDashboardPage.tsx b/frontend/web/components/pages/admin-dashboard/AdminDashboardPage.tsx
index e58767571fdd..60da548be498 100644
--- a/frontend/web/components/pages/admin-dashboard/AdminDashboardPage.tsx
+++ b/frontend/web/components/pages/admin-dashboard/AdminDashboardPage.tsx
@@ -11,7 +11,7 @@ import { useGetAdminDashboardMetricsQuery } from 'common/services/useAdminDashbo
 import Button from 'components/base/forms/Button'
 import Tabs from 'components/navigation/TabMenu/Tabs'
 import TabItem from 'components/navigation/TabMenu/TabItem'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 
 const AdminDashboardPage: FC = () => {
   const [days, setDays] = useState<30 | 60 | 90>(30)
diff --git a/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx b/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx
index 58e6dad83cb2..8dbf6a860a17 100644
--- a/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx
+++ b/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx
@@ -8,7 +8,7 @@ import {
 } from 'common/types/responses'
 import find from 'lodash/find'
 import Button from 'components/base/forms/Button'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import RuleConditionPropertySelect from './RuleConditionPropertySelect'
 import RuleConditionValueInput from './RuleConditionValueInput'
 import { useRuleOperator, useRuleContext } from 'components/segments/Rule/hooks'
diff --git a/frontend/web/components/tags/CreateEditTag.tsx b/frontend/web/components/tags/CreateEditTag.tsx
index 460c9263f475..45e71518c544 100644
--- a/frontend/web/components/tags/CreateEditTag.tsx
+++ b/frontend/web/components/tags/CreateEditTag.tsx
@@ -13,7 +13,7 @@ import InputGroup from 'components/base/forms/InputGroup'
 import Button from 'components/base/forms/Button'
 import Tag from './Tag'
 import InlineModal from 'components/InlineModal'
-import ErrorMessage from 'components/ErrorMessage'
+import ErrorMessage from 'components/messages/ErrorMessage'
 import Switch from 'components/Switch'
 import Icon from 'components/Icon'
 import { ProjectPermission } from 'common/types/permissions.types'