diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx
index 3915410560..9112b5e1df 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx
@@ -27,6 +27,8 @@ const Message: React.FC<{ message: TopicMessage }> = ({
     key,
     partition,
     content,
+    valueFormat,
+    keyFormat,
     headers,
   },
 }) => {
@@ -72,7 +74,9 @@ const Message: React.FC<{ message: TopicMessage }> = ({
       {isOpen && (
         <MessageContent
           messageKey={key}
+          messageKeyFormat={keyFormat}
           messageContent={content}
+          messageContentFormat={valueFormat}
           headers={headers}
           timestamp={timestamp}
           timestampType={timestampType}
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts
index b4d74a12d1..e09c10728a 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Colors } from 'theme/theme';
 
-export const MessageContentWrapper = styled.tr`
+export const Wrapper = styled.tr`
   background-color: ${Colors.neutral[5]};
   & > td {
     padding: 16px;
@@ -14,7 +14,7 @@ export const MessageContentWrapper = styled.tr`
   }
 `;
 
-export const StyledSection = styled.div`
+export const Section = styled.div`
   padding: 0 16px;
   display: flex;
   gap: 1px;
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx
index 207d4dba72..8ccb493787 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx
@@ -2,25 +2,17 @@ import { TopicMessageTimestampTypeEnum } from 'generated-sources';
 import React from 'react';
 import JSONViewer from 'components/common/JSONViewer/JSONViewer';
 import { SecondaryTabs } from 'components/common/Tabs/SecondaryTabs.styled';
-import { isObject } from 'lodash';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 
-import {
-  ContentBox,
-  StyledSection,
-  MessageContentWrapper,
-  Metadata,
-  MetadataLabel,
-  MetadataMeta,
-  MetadataValue,
-  MetadataWrapper,
-} from './MessageContent.styled';
+import * as S from './MessageContent.styled';
 
 type Tab = 'key' | 'content' | 'headers';
 
 export interface MessageContentProps {
   messageKey?: string;
+  messageKeyFormat?: string;
   messageContent?: string;
+  messageContentFormat?: string;
   headers?: { [key: string]: string | undefined };
   timestamp?: Date;
   timestampType?: TopicMessageTimestampTypeEnum;
@@ -28,7 +20,9 @@ export interface MessageContentProps {
 
 const MessageContent: React.FC<MessageContentProps> = ({
   messageKey,
+  messageKeyFormat,
   messageContent,
+  messageContentFormat,
   headers,
   timestamp,
   timestampType,
@@ -58,25 +52,12 @@ const MessageContent: React.FC<MessageContentProps> = ({
   };
   const keySize = new TextEncoder().encode(messageKey).length;
   const contentSize = new TextEncoder().encode(messageContent).length;
-  const isContentJson = () => {
-    try {
-      return isObject(messageContent && JSON.parse(messageContent));
-    } catch {
-      return false;
-    }
-  };
-  const isKeyJson = () => {
-    try {
-      return isObject(messageKey && JSON.parse(messageKey));
-    } catch {
-      return false;
-    }
-  };
+
   return (
-    <MessageContentWrapper>
+    <S.Wrapper>
       <td colSpan={10}>
-        <StyledSection>
-          <ContentBox>
+        <S.Section>
+          <S.ContentBox>
             <SecondaryTabs>
               <button
                 type="button"
@@ -101,41 +82,39 @@ const MessageContent: React.FC<MessageContentProps> = ({
               </button>
             </SecondaryTabs>
             <JSONViewer data={activeTabContent() || ''} />
-          </ContentBox>
-          <MetadataWrapper>
-            <Metadata>
-              <MetadataLabel>Timestamp</MetadataLabel>
+          </S.ContentBox>
+          <S.MetadataWrapper>
+            <S.Metadata>
+              <S.MetadataLabel>Timestamp</S.MetadataLabel>
               <span>
-                <MetadataValue>{timestamp?.toLocaleString()}</MetadataValue>
-                <MetadataMeta>Timestamp type: {timestampType}</MetadataMeta>
+                <S.MetadataValue>{timestamp?.toLocaleString()}</S.MetadataValue>
+                <S.MetadataMeta>Timestamp type: {timestampType}</S.MetadataMeta>
               </span>
-            </Metadata>
+            </S.Metadata>
 
-            <Metadata>
-              <MetadataLabel>Content</MetadataLabel>
+            <S.Metadata>
+              <S.MetadataLabel>Content</S.MetadataLabel>
               <span>
-                <MetadataValue>
-                  {isContentJson() ? 'JSON' : 'Text'}
-                </MetadataValue>
-                <MetadataMeta>
+                <S.MetadataValue>{messageContentFormat}</S.MetadataValue>
+                <S.MetadataMeta>
                   Size: <BytesFormatted value={contentSize} />
-                </MetadataMeta>
+                </S.MetadataMeta>
               </span>
-            </Metadata>
+            </S.Metadata>
 
-            <Metadata>
-              <MetadataLabel>Key</MetadataLabel>
+            <S.Metadata>
+              <S.MetadataLabel>Key</S.MetadataLabel>
               <span>
-                <MetadataValue>{isKeyJson() ? 'JSON' : 'Text'}</MetadataValue>
-                <MetadataMeta>
+                <S.MetadataValue>{messageKeyFormat}</S.MetadataValue>
+                <S.MetadataMeta>
                   Size: <BytesFormatted value={keySize} />
-                </MetadataMeta>
+                </S.MetadataMeta>
               </span>
-            </Metadata>
-          </MetadataWrapper>
-        </StyledSection>
+            </S.Metadata>
+          </S.MetadataWrapper>
+        </S.Section>
       </td>
-    </MessageContentWrapper>
+    </S.Wrapper>
   );
 };
 
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx
index ad0f65380b..2a085d97ce 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx
@@ -15,7 +15,9 @@ const setupWrapper = (props?: Partial<MessageContentProps>) => {
       <tbody>
         <MessageContent
           messageKey='"test-key"'
+          messageKeyFormat="JSON"
           messageContent='{"data": "test"}'
+          messageContentFormat="AVRO"
           headers={{ header: 'test' }}
           timestamp={new Date(0)}
           timestampType={TopicMessageTimestampTypeEnum.CREATE_TIME}
@@ -32,6 +34,17 @@ describe('MessageContent screen', () => {
   beforeEach(() => {
     render(setupWrapper());
   });
+
+  describe('renders', () => {
+    it('key format in document', () => {
+      expect(screen.getByText('JSON')).toBeInTheDocument();
+    });
+
+    it('content format in document', () => {
+      expect(screen.getByText('AVRO')).toBeInTheDocument();
+    });
+  });
+
   describe('when switched to display the key', () => {
     it('has a tab with is-active classname', () => {
       const keyTab = screen.getAllByText('Key');