diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/DefaultMessageFields.tsx b/graylog2-web-interface/src/components/common/message/details/DefaultMessageFields.tsx
similarity index 87%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/DefaultMessageFields.tsx
rename to graylog2-web-interface/src/components/common/message/details/DefaultMessageFields.tsx
index a7db33e410..2495ad30a1 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/DefaultMessageFields.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/DefaultMessageFields.tsx
@@ -19,8 +19,9 @@ import * as React from 'react';
 import MessageField from 'views/components/messagelist/MessageField';
 import FieldType from 'views/logic/fieldtypes/FieldType';
 import FieldTypeMapping from 'views/logic/fieldtypes/FieldTypeMapping';
-import type { MessageFieldsComponentProps } from 'views/components/messagelist/MessageFields/types';
-import { MessageDetailsDL } from 'views/components/messagelist/MessageFields/MessageFieldsViewModeList';
+
+import type { MessageFieldsComponentProps } from './fields/types';
+import { MessageDetailsDL } from './fields/MessageFieldsViewModeList';
 
 export const DefaultMessageFields = ({ message, fields }: MessageFieldsComponentProps) => {
   const formattedFields = message.formatted_fields;
diff --git a/graylog2-web-interface/src/views/components/messagelist/FormatAssetList.tsx b/graylog2-web-interface/src/components/common/message/details/FormatAssetList.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/FormatAssetList.tsx
rename to graylog2-web-interface/src/components/common/message/details/FormatAssetList.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/FormatReceivedBy.test.tsx b/graylog2-web-interface/src/components/common/message/details/FormatReceivedBy.test.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/FormatReceivedBy.test.tsx
rename to graylog2-web-interface/src/components/common/message/details/FormatReceivedBy.test.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/FormatReceivedBy.tsx b/graylog2-web-interface/src/components/common/message/details/FormatReceivedBy.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/FormatReceivedBy.tsx
rename to graylog2-web-interface/src/components/common/message/details/FormatReceivedBy.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageActions.test.tsx b/graylog2-web-interface/src/components/common/message/details/MessageActions.test.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageActions.test.tsx
rename to graylog2-web-interface/src/components/common/message/details/MessageActions.test.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageActions.tsx b/graylog2-web-interface/src/components/common/message/details/MessageActions.tsx
similarity index 97%
rename from graylog2-web-interface/src/views/components/messagelist/MessageActions.tsx
rename to graylog2-web-interface/src/components/common/message/details/MessageActions.tsx
index e1a0a6ac5b..03b6346479 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageActions.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/MessageActions.tsx
@@ -26,9 +26,10 @@ import usePluginEntities from 'hooks/usePluginEntities';
 import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
 import MessagePermalinkButton from 'views/components/common/MessagePermalinkButton';
-import MessageEditFieldConfigurationAction from 'views/components/messagelist/MessageFields/MessageEditFieldConfigurationAction';
 import useFeature from 'hooks/useFeature';
 
+import MessageEditFieldConfigurationAction from './fields/MessageEditFieldConfigurationAction';
+
 const TestAgainstStreamButton = ({
   streams,
   index,
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageAugmentations.test.tsx b/graylog2-web-interface/src/components/common/message/details/MessageAugmentations.test.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageAugmentations.test.tsx
rename to graylog2-web-interface/src/components/common/message/details/MessageAugmentations.test.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageAugmentations.tsx b/graylog2-web-interface/src/components/common/message/details/MessageAugmentations.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageAugmentations.tsx
rename to graylog2-web-interface/src/components/common/message/details/MessageAugmentations.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageDetail.tsx b/graylog2-web-interface/src/components/common/message/details/MessageDetail.tsx
similarity index 91%
rename from graylog2-web-interface/src/views/components/messagelist/MessageDetail.tsx
rename to graylog2-web-interface/src/components/common/message/details/MessageDetail.tsx
index 85f97cc14c..7ecfc513d2 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageDetail.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/MessageDetail.tsx
@@ -19,25 +19,28 @@ import { useState, useContext, useCallback } from 'react';
 import Immutable from 'immutable';
 import styled from 'styled-components';
 
-import { Link, Icon, Spinner, Timestamp } from 'components/common';
+import Link from 'components/common/Link';
+import Icon from 'components/common/Icon';
+import Spinner from 'components/common/Spinner';
+import Timestamp from 'components/common/Timestamp';
 import { Col, Label, Row } from 'components/bootstrap';
-import { MessageFields } from 'views/components/messagelist';
 import MessageDetailsTitle from 'components/search/MessageDetailsTitle';
 import Routes from 'routing/Routes';
 import type { Message } from 'views/components/messagelist/Types';
 import type { Input } from 'components/messageloaders/Types';
 import type { Stream } from 'views/stores/StreamsStore';
 import type { FieldTypeMappingsList } from 'views/logic/fieldtypes/types';
-import FormatReceivedBy from 'views/components/messagelist/FormatReceivedBy';
-import FormatAssetList from 'views/components/messagelist/FormatAssetList';
 import useIsLocalNode from 'views/hooks/useIsLocalNode';
 import FieldTypesContext from 'views/components/contexts/FieldTypesContext';
 import useSearchConfiguration from 'hooks/useSearchConfiguration';
-import MessageFavoriteFieldsProvider from 'views/components/contexts/MessageFavoriteFieldsProvider';
-import MessageDetailAdditionalContextProvider from 'views/components/contexts/MessageDetailAdditionalContextProvider';
 import useFeature from 'hooks/useFeature';
-import DefaultMessageFields from 'views/components/messagelist/MessageFields/DefaultMessageFields';
 
+import MessageFavoriteFieldsProvider from './context/MessageFavoriteFieldsProvider';
+import MessageDetailAdditionalContextProvider from './context/MessageDetailAdditionalContextProvider';
+import MessageFields from './fields/MessageFields';
+import DefaultMessageFields from './DefaultMessageFields';
+import FormatReceivedBy from './FormatReceivedBy';
+import FormatAssetList from './FormatAssetList';
 import MessageDetailProviders from './MessageDetailProviders';
 import MessageActions from './MessageActions';
 import MessageAugmentations from './MessageAugmentations';
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageDetailProviders.test.tsx b/graylog2-web-interface/src/components/common/message/details/MessageDetailProviders.test.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageDetailProviders.test.tsx
rename to graylog2-web-interface/src/components/common/message/details/MessageDetailProviders.test.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageDetailProviders.tsx b/graylog2-web-interface/src/components/common/message/details/MessageDetailProviders.tsx
similarity index 95%
rename from graylog2-web-interface/src/views/components/messagelist/MessageDetailProviders.tsx
rename to graylog2-web-interface/src/components/common/message/details/MessageDetailProviders.tsx
index 6c5135b29b..d208603944 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageDetailProviders.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/MessageDetailProviders.tsx
@@ -18,8 +18,7 @@ import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import usePluginEntities from 'hooks/usePluginEntities';
-
-import type { Message } from './Types';
+import type { Message } from 'views/components/messagelist/Types';
 
 type Props = {
   children: React.ReactElement;
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageMetadata.tsx b/graylog2-web-interface/src/components/common/message/details/MessageMetadata.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageMetadata.tsx
rename to graylog2-web-interface/src/components/common/message/details/MessageMetadata.tsx
diff --git a/graylog2-web-interface/src/views/components/contexts/MessageDetailAdditionalContextProvider.tsx b/graylog2-web-interface/src/components/common/message/details/context/MessageDetailAdditionalContextProvider.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/contexts/MessageDetailAdditionalContextProvider.tsx
rename to graylog2-web-interface/src/components/common/message/details/context/MessageDetailAdditionalContextProvider.tsx
diff --git a/graylog2-web-interface/src/views/components/contexts/MessageFavoriteFieldsProvider.test.tsx b/graylog2-web-interface/src/components/common/message/details/context/MessageFavoriteFieldsProvider.test.tsx
similarity index 90%
rename from graylog2-web-interface/src/views/components/contexts/MessageFavoriteFieldsProvider.test.tsx
rename to graylog2-web-interface/src/components/common/message/details/context/MessageFavoriteFieldsProvider.test.tsx
index 284c040739..eaef813366 100644
--- a/graylog2-web-interface/src/views/components/contexts/MessageFavoriteFieldsProvider.test.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/context/MessageFavoriteFieldsProvider.test.tsx
@@ -21,9 +21,7 @@ import userEvent from '@testing-library/user-event';
 import Immutable from 'immutable';
 
 import { asMock, StoreMock as MockStore } from 'helpers/mocking';
-import MessageFavoriteFieldsProvider from 'views/components/contexts/MessageFavoriteFieldsProvider';
 import MessageFavoriteFieldsContext from 'views/components/contexts/MessageFavoriteFieldsContext';
-import useMessageFavoriteFieldsMutation from 'views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsMutation';
 import { Button } from 'components/bootstrap';
 import FieldTypeMapping from 'views/logic/fieldtypes/FieldTypeMapping';
 import { FieldTypes } from 'views/logic/fieldtypes/FieldType';
@@ -31,15 +29,16 @@ import { StreamsActions } from 'views/stores/StreamsStore';
 import mockAction from 'helpers/mocking/MockAction';
 import type { Stream } from 'logic/streams/types';
 
+import MessageFavoriteFieldsProvider from './MessageFavoriteFieldsProvider';
+
+import useMessageFavoriteFieldsMutation from '../fields/hooks/useMessageFavoriteFieldsMutation';
+
 const mockSaveFields = jest.fn();
 const mockToggleField = jest.fn();
 
 jest.mock('views/stores/StreamsStore');
 
-jest.mock('views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsMutation', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
+jest.mock('../fields/hooks/useMessageFavoriteFieldsMutation');
 
 jest.mock('views/stores/StreamsStore', () => ({
   StreamsActions: { refresh: jest.fn() },
diff --git a/graylog2-web-interface/src/views/components/contexts/MessageFavoriteFieldsProvider.tsx b/graylog2-web-interface/src/components/common/message/details/context/MessageFavoriteFieldsProvider.tsx
similarity index 93%
rename from graylog2-web-interface/src/views/components/contexts/MessageFavoriteFieldsProvider.tsx
rename to graylog2-web-interface/src/components/common/message/details/context/MessageFavoriteFieldsProvider.tsx
index e99742d884..4af4c96443 100644
--- a/graylog2-web-interface/src/views/components/contexts/MessageFavoriteFieldsProvider.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/context/MessageFavoriteFieldsProvider.tsx
@@ -23,14 +23,15 @@ import flattenDeep from 'lodash/flattenDeep';
 import type { Message } from 'views/components/messagelist/Types';
 import MessageFavoriteFieldsContext from 'views/components/contexts/MessageFavoriteFieldsContext';
 import type { FieldTypeMappingsList } from 'views/logic/fieldtypes/types';
-import useMessageFavoriteFieldsMutation from 'views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsMutation';
 import { useStore } from 'stores/connect';
 import { StreamsStore } from 'views/stores/StreamsStore';
 import type { Stream } from 'logic/streams/types';
-import { DEFAULT_FIELDS } from 'views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing';
 import { isPermitted } from 'util/PermissionsMixin';
 import useCurrentUser from 'hooks/useCurrentUser';
 
+import { DEFAULT_FIELDS } from '../fields/hooks/useMessageFavoriteFieldsForEditing';
+import useMessageFavoriteFieldsMutation from '../fields/hooks/useMessageFavoriteFieldsMutation';
+
 type OriginalProps = React.PropsWithChildren<{
   message: Message;
   messageFields: FieldTypeMappingsList;
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageEditFieldConfigurationAction.tsx b/graylog2-web-interface/src/components/common/message/details/fields/MessageEditFieldConfigurationAction.tsx
similarity index 86%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageEditFieldConfigurationAction.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/MessageEditFieldConfigurationAction.tsx
index f602400be8..467307bf76 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageEditFieldConfigurationAction.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/fields/MessageEditFieldConfigurationAction.tsx
@@ -18,8 +18,9 @@
 import React, { useState, useCallback } from 'react';
 
 import { Button } from 'components/bootstrap';
-import MessageFieldsEditModal from 'views/components/messagelist/MessageFields/MessageFieldsEditModal';
-import useSendFavoriteFieldTelemetry from 'views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry';
+
+import MessageFieldsEditModal from './MessageFieldsEditModal';
+import useSendFavoriteFieldTelemetry from './hooks/useSendFavoriteFieldTelemetry';
 
 const MessageEditFieldConfigurationAction = () => {
   const [showModal, setShowModal] = useState(false);
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldEditModeListItem.tsx b/graylog2-web-interface/src/components/common/message/details/fields/MessageFieldEditModeListItem.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldEditModeListItem.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/MessageFieldEditModeListItem.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFields.tsx b/graylog2-web-interface/src/components/common/message/details/fields/MessageFields.tsx
similarity index 91%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFields.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/MessageFields.tsx
index eb1808c95c..3898686b69 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFields.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/fields/MessageFields.tsx
@@ -18,13 +18,14 @@
 import React, { useContext, useState, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
-import MessageFieldsViewModeList from 'views/components/messagelist/MessageFields/MessageFieldsViewModeList';
-import useFormattedFields from 'views/components/messagelist/MessageFields/hooks/useFormattedFields';
 import MessageFavoriteFieldsContext from 'views/components/contexts/MessageFavoriteFieldsContext';
 import { Icon } from 'components/common';
 import Store from 'logic/local-storage/Store';
 import StringUtils from 'util/StringUtils';
-import useSendFavoriteFieldTelemetry from 'views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry';
+
+import useFormattedFields from './hooks/useFormattedFields';
+import MessageFieldsViewModeList from './MessageFieldsViewModeList';
+import useSendFavoriteFieldTelemetry from './hooks/useSendFavoriteFieldTelemetry';
 
 const Line = styled.div(
   ({ theme }) => css`
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsEditModal.test.tsx b/graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsEditModal.test.tsx
similarity index 91%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsEditModal.test.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsEditModal.test.tsx
index e4b60ee805..d588c69594 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsEditModal.test.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsEditModal.test.tsx
@@ -28,9 +28,9 @@ import Search from 'views/logic/search/Search';
 import View from 'views/logic/views/View';
 import useViewsPlugin from 'views/test/testViewsPlugin';
 import suppressConsole from 'helpers/suppressConsole';
-import useFormattedFields from 'views/components/messagelist/MessageFields/hooks/useFormattedFields';
-import useMessageFavoriteFieldsForEditing from 'views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing';
 
+import useFormattedFields from './hooks/useFormattedFields';
+import useMessageFavoriteFieldsForEditing from './hooks/useMessageFavoriteFieldsForEditing';
 import MessageFieldsEditModal from './MessageFieldsEditModal';
 
 const reorderFavoriteFields = jest.fn();
@@ -44,9 +44,9 @@ jest.mock('views/stores/StreamsStore', () => ({
   StreamsStore: MockStore(['getInitialState', () => ({ streams: [{ id: 'streamId', title: 'Stream' }] })]),
 }));
 
-jest.mock('views/components/messagelist/MessageFields/hooks/useFormattedFields');
-jest.mock('views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing');
-jest.mock('views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry', () => jest.fn);
+jest.mock('./hooks/useFormattedFields');
+jest.mock('./hooks/useMessageFavoriteFieldsForEditing');
+jest.mock('./hooks/useSendFavoriteFieldTelemetry', () => jest.fn);
 
 const formattedFavorites = [
   {
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsEditModal.tsx b/graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsEditModal.tsx
similarity index 91%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsEditModal.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsEditModal.tsx
index ec12e88e1a..8bf5aa57f9 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsEditModal.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsEditModal.tsx
@@ -24,12 +24,11 @@ import { useStore } from 'stores/connect';
 import { StreamsStore } from 'views/stores/StreamsStore';
 import MessageFavoriteFieldsContext from 'views/components/contexts/MessageFavoriteFieldsContext';
 import StringUtils from 'util/StringUtils';
-import useMessageFavoriteFieldsForEditing, {
-  DEFAULT_FIELDS,
-} from 'views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing';
 import { ModalSubmit } from 'components/common';
-import MessageFieldsEditModeLists from 'views/components/messagelist/MessageFields/MessageFieldsEditModeLists';
-import useSendFavoriteFieldTelemetry from 'views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry';
+
+import useMessageFavoriteFieldsForEditing, { DEFAULT_FIELDS } from './hooks/useMessageFavoriteFieldsForEditing';
+import MessageFieldsEditModeLists from './MessageFieldsEditModeLists';
+import useSendFavoriteFieldTelemetry from './hooks/useSendFavoriteFieldTelemetry';
 
 const FieldsContainer = styled.div(
   ({ theme }) => css`
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsEditModeLists.tsx b/graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsEditModeLists.tsx
similarity index 91%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsEditModeLists.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsEditModeLists.tsx
index b749102ee1..c9b194ed42 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsEditModeLists.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsEditModeLists.tsx
@@ -18,10 +18,11 @@
 import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
-import MessageFieldEditModeListItem from 'views/components/messagelist/MessageFields/MessageFieldEditModeListItem';
-import type { MessageFieldsListProps, FormattedField } from 'views/components/messagelist/MessageFields/types';
 import { SortableList } from 'components/common';
-import useFormattedFields from 'views/components/messagelist/MessageFields/hooks/useFormattedFields';
+
+import MessageFieldEditModeListItem from './MessageFieldEditModeListItem';
+import type { MessageFieldsListProps, FormattedField } from './types';
+import useFormattedFields from './hooks/useFormattedFields';
 
 const Container = styled.div(
   ({ theme }) => css`
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsViewModeList.tsx b/graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsViewModeList.tsx
similarity index 95%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsViewModeList.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsViewModeList.tsx
index 099ddaef29..e1523db201 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/MessageFieldsViewModeList.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/fields/MessageFieldsViewModeList.tsx
@@ -18,11 +18,12 @@
 import React, { useContext } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { MessageFieldsListProps } from 'views/components/messagelist/MessageFields/types';
 import MessageField from 'views/components/messagelist/MessageField';
 import { MessageDetailsDefinitionList } from 'components/common';
 import MessageFavoriteFieldsContext from 'views/components/contexts/MessageFavoriteFieldsContext';
 
+import type { MessageFieldsListProps } from './types';
+
 export const MessageDetailsDL = styled(MessageDetailsDefinitionList)(
   ({ theme }) => css`
     color: ${theme.colors.text.primary};
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useFormattedFields.ts b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useFormattedFields.ts
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useFormattedFields.ts
rename to graylog2-web-interface/src/components/common/message/details/fields/hooks/useFormattedFields.ts
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing.test.tsx b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsForEditing.test.tsx
similarity index 93%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing.test.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsForEditing.test.tsx
index 166cb46799..542f883e87 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing.test.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsForEditing.test.tsx
@@ -18,14 +18,17 @@ import React from 'react';
 import { renderHook, act } from 'wrappedTestingLibrary';
 import Immutable from 'immutable';
 
-import useMessageFavoriteFieldsForEditing from 'views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing';
 import MessageFavoriteFieldsContext from 'views/components/contexts/MessageFavoriteFieldsContext';
-import type { FormattedField } from 'views/components/messagelist/MessageFields/types';
 import FieldType from 'views/logic/fieldtypes/FieldType';
 
+import useMessageFavoriteFieldsForEditing from './useMessageFavoriteFieldsForEditing';
+
+import type { FormattedField } from '../types';
+
+
 const DEFAULT_FIELDS = ['source', 'destination_ip', 'usernames'];
 
-jest.mock('views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry', () => jest.fn);
+jest.mock('./useSendFavoriteFieldTelemetry', () => jest.fn);
 
 type ProviderProps = {
   initialFavorites?: Array<string>;
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing.ts b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsForEditing.ts
similarity index 91%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing.ts
rename to graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsForEditing.ts
index d34882f330..3062e7209b 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsForEditing.ts
+++ b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsForEditing.ts
@@ -18,8 +18,10 @@ import { useState, useCallback, useContext } from 'react';
 import uniq from 'lodash/uniq';
 
 import MessageFavoriteFieldsContext from 'views/components/contexts/MessageFavoriteFieldsContext';
-import type { FormattedField } from 'views/components/messagelist/MessageFields/types';
-import useSendFavoriteFieldTelemetry from 'views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry';
+
+import useSendFavoriteFieldTelemetry from './useSendFavoriteFieldTelemetry';
+
+import type { FormattedField } from '../types';
 
 export const DEFAULT_FIELDS = ['source', 'destination_ip', 'usernames'];
 
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsMutation.test.tsx b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsMutation.test.tsx
similarity index 98%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsMutation.test.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsMutation.test.tsx
index c2394b2374..34b39e5f2a 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsMutation.test.tsx
+++ b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsMutation.test.tsx
@@ -48,7 +48,7 @@ jest.mock('util/UserNotification', () => ({
   error: jest.fn(),
 }));
 
-jest.mock('views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry', () => jest.fn);
+jest.mock('./useSendFavoriteFieldTelemetry', () => jest.fn);
 
 jest.mock('hooks/useCurrentUser');
 
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsMutation.ts b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsMutation.ts
similarity index 97%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsMutation.ts
rename to graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsMutation.ts
index ac2a25b396..d7e87c91e9 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useMessageFavoriteFieldsMutation.ts
+++ b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useMessageFavoriteFieldsMutation.ts
@@ -22,7 +22,8 @@ import { FavoriteFields } from '@graylog/server-api';
 import { StreamsActions } from 'views/stores/StreamsStore';
 import UserNotification from 'util/UserNotification';
 import type { Stream } from 'logic/streams/types';
-import useSendFavoriteFieldTelemetry from 'views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry';
+
+import useSendFavoriteFieldTelemetry from './useSendFavoriteFieldTelemetry';
 
 interface FavoriteFieldRequest {
   readonly field: string;
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry.test.tsx b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useSendFavoriteFieldTelemetry.test.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry.test.tsx
rename to graylog2-web-interface/src/components/common/message/details/fields/hooks/useSendFavoriteFieldTelemetry.test.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry.ts b/graylog2-web-interface/src/components/common/message/details/fields/hooks/useSendFavoriteFieldTelemetry.ts
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/hooks/useSendFavoriteFieldTelemetry.ts
rename to graylog2-web-interface/src/components/common/message/details/fields/hooks/useSendFavoriteFieldTelemetry.ts
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields/types.ts b/graylog2-web-interface/src/components/common/message/details/fields/types.ts
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFields/types.ts
rename to graylog2-web-interface/src/components/common/message/details/fields/types.ts
diff --git a/graylog2-web-interface/src/components/common/message/details/index.ts b/graylog2-web-interface/src/components/common/message/details/index.ts
new file mode 100644
index 0000000000..87a2f6b389
--- /dev/null
+++ b/graylog2-web-interface/src/components/common/message/details/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+export { default as MessageDetail } from './MessageDetail';
+export { default as MessageFavoriteFieldsProvider } from './context/MessageFavoriteFieldsProvider';
+export { default as MessageFieldsEditModal } from './fields/MessageFieldsEditModal';
+export { default as useFormattedFields } from './fields/hooks/useFormattedFields';
+export { default as useSendFavoriteFieldTelemetry } from './fields/hooks/useSendFavoriteFieldTelemetry';
diff --git a/graylog2-web-interface/src/views/components/widgets/FieldSortIcon.test.tsx b/graylog2-web-interface/src/components/common/message/messagetable/FieldSortIcon.test.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/widgets/FieldSortIcon.test.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/FieldSortIcon.test.tsx
diff --git a/graylog2-web-interface/src/views/components/widgets/FieldSortIcon.tsx b/graylog2-web-interface/src/components/common/message/messagetable/FieldSortIcon.tsx
similarity index 98%
rename from graylog2-web-interface/src/views/components/widgets/FieldSortIcon.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/FieldSortIcon.tsx
index df132339a3..ab073ae468 100644
--- a/graylog2-web-interface/src/views/components/widgets/FieldSortIcon.tsx
+++ b/graylog2-web-interface/src/components/common/message/messagetable/FieldSortIcon.tsx
@@ -20,7 +20,7 @@ import type MessagesWidgetConfig from 'views/logic/widgets/MessagesWidgetConfig'
 import { defaultSortDirection } from 'views/logic/widgets/MessagesWidgetConfig';
 import Direction from 'views/logic/aggregationbuilder/Direction';
 import SortConfig from 'views/logic/aggregationbuilder/SortConfig';
-import { SortIcon } from 'components/common';
+import SortIcon from 'components/common/SortIcon';
 
 type Props = {
   config: MessagesWidgetConfig;
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFieldRow.tsx b/graylog2-web-interface/src/components/common/message/messagetable/MessageFieldRow.tsx
similarity index 86%
rename from graylog2-web-interface/src/views/components/messagelist/MessageFieldRow.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/MessageFieldRow.tsx
index a63384667b..9602a502be 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageFieldRow.tsx
+++ b/graylog2-web-interface/src/components/common/message/messagetable/MessageFieldRow.tsx
@@ -20,11 +20,9 @@ import styled from 'styled-components';
 import type { Message } from 'views/components/messagelist/Types';
 import { MESSAGE_FIELD } from 'views/Constants';
 import type FieldType from 'views/logic/fieldtypes/FieldType';
-
-import DecoratedValue from './decoration/DecoratedValue';
-
-import CustomHighlighting from '../highlighting/CustomHighlighting';
-import TypeSpecificValue from '../TypeSpecificValue';
+import DecoratedValue from 'views/components/messagelist/decoration/DecoratedValue';
+import CustomHighlighting from 'views/components/highlighting/CustomHighlighting';
+import TypeSpecificValue from 'views/components/TypeSpecificValue';
 
 export const MessageWrapper = styled.div`
   white-space: pre-line;
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessagePreview.test.tsx b/graylog2-web-interface/src/components/common/message/messagetable/MessagePreview.test.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessagePreview.test.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/MessagePreview.test.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessagePreview.tsx b/graylog2-web-interface/src/components/common/message/messagetable/MessagePreview.tsx
similarity index 96%
rename from graylog2-web-interface/src/views/components/messagelist/MessagePreview.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/MessagePreview.tsx
index 73e1c5530a..e68c1da45a 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessagePreview.tsx
+++ b/graylog2-web-interface/src/components/common/message/messagetable/MessagePreview.tsx
@@ -21,7 +21,8 @@ import type MessagesWidgetConfig from 'views/logic/widgets/MessagesWidgetConfig'
 import type FieldType from 'views/logic/fieldtypes/FieldType';
 import type { Message } from 'views/components/messagelist/Types';
 import usePluginEntities from 'hooks/usePluginEntities';
-import MessageFieldRow from 'views/components/messagelist/MessageFieldRow';
+
+import MessageFieldRow from './MessageFieldRow';
 
 const TableRow = styled.tr(
   ({ theme }) => css`
diff --git a/graylog2-web-interface/src/views/components/widgets/MessageTable.tsx b/graylog2-web-interface/src/components/common/message/messagetable/MessageTable.tsx
similarity index 96%
rename from graylog2-web-interface/src/views/components/widgets/MessageTable.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/MessageTable.tsx
index e06277a84c..7bc9104d29 100644
--- a/graylog2-web-interface/src/views/components/widgets/MessageTable.tsx
+++ b/graylog2-web-interface/src/components/common/message/messagetable/MessageTable.tsx
@@ -24,15 +24,16 @@ import FieldType from 'views/logic/fieldtypes/FieldType';
 import type FieldTypeMapping from 'views/logic/fieldtypes/FieldTypeMapping';
 import type MessagesWidgetConfig from 'views/logic/widgets/MessagesWidgetConfig';
 import type SortConfig from 'views/logic/aggregationbuilder/SortConfig';
-import { MessageTableEntry } from 'views/components/messagelist';
 import type { BackendMessage, Message } from 'views/components/messagelist/Types';
-import FieldSortIcon from 'views/components/widgets/FieldSortIcon';
 import Field from 'views/components/Field';
-import MessageTableProviders from 'views/components/messagelist/MessageTableProviders';
 import useAutoRefresh from 'views/hooks/useAutoRefresh';
 import { TableHeaderCell, TableHead } from 'views/components/datatable';
 import InteractiveContext from 'views/components/contexts/InteractiveContext';
 
+import FieldSortIcon from './FieldSortIcon';
+import MessageTableEntry from './MessageTableEntry';
+import MessageTableProviders from './MessageTableProviders';
+
 const Table = styled.table(
   ({ theme }) => css`
     position: relative;
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageTableEntry.test.tsx b/graylog2-web-interface/src/components/common/message/messagetable/MessageTableEntry.test.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageTableEntry.test.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/MessageTableEntry.test.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageTableEntry.tsx b/graylog2-web-interface/src/components/common/message/messagetable/MessageTableEntry.tsx
similarity index 93%
rename from graylog2-web-interface/src/views/components/messagelist/MessageTableEntry.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/MessageTableEntry.tsx
index 948e0a260f..ffee0a063e 100644
--- a/graylog2-web-interface/src/views/components/messagelist/MessageTableEntry.tsx
+++ b/graylog2-web-interface/src/components/common/message/messagetable/MessageTableEntry.tsx
@@ -32,15 +32,14 @@ import { InputsStore } from 'stores/inputs/InputsStore';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
 import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 import { TableDataCell } from 'views/components/datatable';
+import MessageDetail from 'components/common/message/details/MessageDetail';
+import DecoratedValue from 'views/components/messagelist/decoration/DecoratedValue';
+import type { Message } from 'views/components/messagelist/Types';
+import CustomHighlighting from 'views/components/highlighting/CustomHighlighting';
+import TypeSpecificValue from 'views/components/TypeSpecificValue';
+import HighlightMessageContext from 'views/components/contexts/HighlightMessageContext';
 
-import MessageDetail from './MessageDetail';
-import DecoratedValue from './decoration/DecoratedValue';
 import MessagePreview from './MessagePreview';
-import type { Message } from './Types';
-
-import CustomHighlighting from '../highlighting/CustomHighlighting';
-import TypeSpecificValue from '../TypeSpecificValue';
-import HighlightMessageContext from '../contexts/HighlightMessageContext';
 
 export const TableBody = styled.tbody<{ $expanded?: boolean; $highlighted?: boolean }>(
   ({ $expanded, $highlighted, theme }) => `
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageTableProviders.test.tsx b/graylog2-web-interface/src/components/common/message/messagetable/MessageTableProviders.test.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageTableProviders.test.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/MessageTableProviders.test.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageTableProviders.tsx b/graylog2-web-interface/src/components/common/message/messagetable/MessageTableProviders.tsx
similarity index 100%
rename from graylog2-web-interface/src/views/components/messagelist/MessageTableProviders.tsx
rename to graylog2-web-interface/src/components/common/message/messagetable/MessageTableProviders.tsx
diff --git a/graylog2-web-interface/src/views/components/messagelist/index.ts b/graylog2-web-interface/src/components/common/message/messagetable/index.ts
similarity index 71%
rename from graylog2-web-interface/src/views/components/messagelist/index.ts
rename to graylog2-web-interface/src/components/common/message/messagetable/index.ts
index 855b37c481..3aa2bc74c8 100644
--- a/graylog2-web-interface/src/views/components/messagelist/index.ts
+++ b/graylog2-web-interface/src/components/common/message/messagetable/index.ts
@@ -14,7 +14,4 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-export { default as MessageDetail } from './MessageDetail';
-export { default as MessageField } from './MessageField';
-export { default as MessageFields } from './MessageFields/MessageFields';
-export { default as MessageTableEntry } from './MessageTableEntry';
+export { default as MessageTable } from './MessageTable';
diff --git a/graylog2-web-interface/src/pages/ShowMessagePage.test.tsx b/graylog2-web-interface/src/pages/ShowMessagePage.test.tsx
index 30415cf468..e7781dabb0 100644
--- a/graylog2-web-interface/src/pages/ShowMessagePage.test.tsx
+++ b/graylog2-web-interface/src/pages/ShowMessagePage.test.tsx
@@ -33,7 +33,9 @@ import { usePlugin } from 'views/test/testPlugins';
 import ShowMessagePage from './ShowMessagePage';
 import { message, event, input } from './ShowMessagePage.fixtures';
 
-jest.mock('views/components/messagelist/MessageDetail', () => (props) => <span>{JSON.stringify(props, null, 2)}</span>);
+jest.mock('components/common/message/details/MessageDetail', () => (props) => (
+  <span>{JSON.stringify(props, null, 2)}</span>
+));
 
 const mockGetInput = jest.fn();
 const mockListNodes = jest.fn();
diff --git a/graylog2-web-interface/src/pages/ShowMessagePage.tsx b/graylog2-web-interface/src/pages/ShowMessagePage.tsx
index 39f7e18c52..5141c1908e 100644
--- a/graylog2-web-interface/src/pages/ShowMessagePage.tsx
+++ b/graylog2-web-interface/src/pages/ShowMessagePage.tsx
@@ -19,11 +19,11 @@ import * as Immutable from 'immutable';
 import styled from 'styled-components';
 
 import useMessage from 'views/hooks/useMessage';
+import MessageDetail from 'components/common/message/details/MessageDetail';
 import DocumentTitle from 'components/common/DocumentTitle';
 import Spinner from 'components/common/Spinner';
 import { Col, Row } from 'components/bootstrap';
 import InteractiveContext from 'views/components/contexts/InteractiveContext';
-import MessageDetail from 'views/components/messagelist/MessageDetail';
 import withParams from 'routing/withParams';
 import type { Input } from 'components/messageloaders/Types';
 import WindowDimensionsContextProvider from 'contexts/WindowDimensionsContextProvider';
diff --git a/graylog2-web-interface/src/views/components/widgets/MessageList.tsx b/graylog2-web-interface/src/views/components/widgets/MessageList.tsx
index 2d8bdd0bf4..8aaf58d250 100644
--- a/graylog2-web-interface/src/views/components/widgets/MessageList.tsx
+++ b/graylog2-web-interface/src/views/components/widgets/MessageList.tsx
@@ -23,7 +23,7 @@ import { Messages } from 'views/Constants';
 import type MessagesWidgetConfig from 'views/logic/widgets/MessagesWidgetConfig';
 import type { SearchTypeOptions } from 'views/logic/search/GlobalOverride';
 import { PaginatedList } from 'components/common';
-import MessageTable from 'views/components/widgets/MessageTable';
+import MessageTable from 'components/common/message/messagetable/MessageTable';
 import ErrorWidget from 'views/components/widgets/ErrorWidget';
 import type SortConfig from 'views/logic/aggregationbuilder/SortConfig';
 import type { BackendMessage } from 'views/components/messagelist/Types';
diff --git a/graylog2-web-interface/src/views/components/widgets/MessageTable.test.tsx b/graylog2-web-interface/src/views/components/widgets/MessageTable.test.tsx
index d4dd1969c2..935f983d0f 100644
--- a/graylog2-web-interface/src/views/components/widgets/MessageTable.test.tsx
+++ b/graylog2-web-interface/src/views/components/widgets/MessageTable.test.tsx
@@ -24,8 +24,7 @@ import MockAction from 'helpers/mocking/MockAction';
 import FieldTypeMapping from 'views/logic/fieldtypes/FieldTypeMapping';
 import FieldType from 'views/logic/fieldtypes/FieldType';
 import MessagesWidgetConfig from 'views/logic/widgets/MessagesWidgetConfig';
-
-import MessageTable from './MessageTable';
+import MessageTable from 'components/common/message/messagetable/MessageTable';
 
 import InteractiveContext from '../contexts/InteractiveContext';
 import HighlightMessageContext from '../contexts/HighlightMessageContext';