@David-DB88 Implementation is invalid.
#3117 clearly states that the value should be fetched from API (the second screenshot is of deprecated fields in API response).

```
const keyFormat = searchParams.get('keySerde') || '';
  const valueFormat = searchParams.get('valueSerde') || '';
```
This will display the currently selected serdes no matter which serde is used for the message itself.
 Got it. Thank you for pointing out.
shouldn't we test it by setting search params in the testing to these values ? then render the component for testing. that way we can test `messageContentFormat` @Mgo i wrote above that i will change test cases if the solution is normal, i know about linter error i commented  some code in test cases 
[FE] Update display of key/value format
![image](https://user-images.githubusercontent.com/1494347/209088893-23812066-914d-47b8-9059-b0bad9be8c3b.png)
key/value types are not displayed, they're currently being fetched from `keyFormat` and `valueFormat` fields, but:
![image](https://user-images.githubusercontent.com/1494347/209088998-3d1dd995-34fc-4c5f-a4c1-48d7a69b6e44.png)

kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
index cb2dbbb3c0c..47b6e49a41e 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx
@@ -42,8 +42,6 @@ const Message: React.FC<Props> = ({
     key,
     partition,
     content,
-    valueFormat,
-    keyFormat,
     headers,
   },
   keyFilters,
@@ -140,9 +138,7 @@ const Message: React.FC<Props> = ({
       {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/Messages/MessageContent/MessageContent.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
index 6edfdde54c1..fe472ad3b12 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
@@ -3,6 +3,7 @@ import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { SchemaType, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
+import { useSearchParams } from 'react-router-dom';
 
 import * as S from './MessageContent.styled';
 
@@ -10,9 +11,7 @@ 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;
@@ -20,14 +19,15 @@ export interface MessageContentProps {
 
 const MessageContent: React.FC<MessageContentProps> = ({
   messageKey,
-  messageKeyFormat,
   messageContent,
-  messageContentFormat,
   headers,
   timestamp,
   timestampType,
 }) => {
   const [activeTab, setActiveTab] = React.useState<Tab>('content');
+  const [searchParams] = useSearchParams();
+  const keyFormat = searchParams.get('keySerde') || '';
+  const valueFormat = searchParams.get('valueSerde') || '';
 
   const activeTabContent = () => {
     switch (activeTab) {
@@ -54,7 +54,6 @@ const MessageContent: React.FC<MessageContentProps> = ({
     e.preventDefault();
     setActiveTab('headers');
   };
-
   const keySize = new TextEncoder().encode(messageKey).length;
   const contentSize = new TextEncoder().encode(messageContent).length;
   const contentType =
@@ -106,21 +105,21 @@ const MessageContent: React.FC<MessageContentProps> = ({
             </S.Metadata>
 
             <S.Metadata>
-              <S.MetadataLabel>Value</S.MetadataLabel>
+              <S.MetadataLabel>Key Serde</S.MetadataLabel>
               <span>
-                <S.MetadataValue>{messageContentFormat}</S.MetadataValue>
+                <S.MetadataValue>{keyFormat}</S.MetadataValue>
                 <S.MetadataMeta>
-                  Size: <BytesFormatted value={contentSize} />
+                  Size: <BytesFormatted value={keySize} />
                 </S.MetadataMeta>
               </span>
             </S.Metadata>
 
             <S.Metadata>
-              <S.MetadataLabel>Key</S.MetadataLabel>
+              <S.MetadataLabel>Value Serde</S.MetadataLabel>
               <span>
-                <S.MetadataValue>{messageKeyFormat}</S.MetadataValue>
+                <S.MetadataValue>{valueFormat}</S.MetadataValue>
                 <S.MetadataMeta>
-                  Size: <BytesFormatted value={keySize} />
+                  Size: <BytesFormatted value={contentSize} />
                 </S.MetadataMeta>
               </span>
             </S.Metadata>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
index 23af3d45cf4..91310a30e41 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx
@@ -16,9 +16,7 @@ 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}
@@ -34,14 +32,33 @@ const proto =
 
 global.TextEncoder = TextEncoder;
 
+const searchParamsContentAVRO = new URLSearchParams({
+  keySerde: 'SchemaRegistry',
+  valueSerde: 'AVRO',
+  limit: '100',
+});
+
+const searchParamsContentJSON = new URLSearchParams({
+  keySerde: 'SchemaRegistry',
+  valueSerde: 'JSON',
+  limit: '100',
+});
+
+const searchParamsContentPROTOBUF = new URLSearchParams({
+  keySerde: 'SchemaRegistry',
+  valueSerde: 'PROTOBUF',
+  limit: '100',
+});
 describe('MessageContent screen', () => {
   beforeEach(() => {
-    render(setupWrapper());
+    render(setupWrapper(), {
+      initialEntries: [`/messages?${searchParamsContentAVRO}`],
+    });
   });
 
   describe('renders', () => {
     it('key format in document', () => {
-      expect(screen.getByText('JSON')).toBeInTheDocument();
+      expect(screen.getByText('SchemaRegistry')).toBeInTheDocument();
     });
 
     it('content format in document', () => {
@@ -86,36 +103,36 @@ describe('checking content type depend on message type', () => {
   it('renders component with message having JSON type', () => {
     render(
       setupWrapper({
-        messageContentFormat: 'JSON',
         messageContent: '{"data": "test"}',
-      })
+      }),
+      { initialEntries: [`/messages?${searchParamsContentJSON}`] }
     );
-    expect(screen.getAllByText('JSON')[1]).toBeInTheDocument();
+    expect(screen.getByText('JSON')).toBeInTheDocument();
   });
   it('renders component with message having AVRO type', () => {
     render(
       setupWrapper({
-        messageContentFormat: 'AVRO',
         messageContent: '{"data": "test"}',
-      })
+      }),
+      { initialEntries: [`/messages?${searchParamsContentAVRO}`] }
     );
     expect(screen.getByText('AVRO')).toBeInTheDocument();
   });
   it('renders component with message having PROTOBUF type', () => {
     render(
       setupWrapper({
-        messageContentFormat: 'PROTOBUF',
         messageContent: proto,
-      })
+      }),
+      { initialEntries: [`/messages?${searchParamsContentPROTOBUF}`] }
     );
     expect(screen.getByText('PROTOBUF')).toBeInTheDocument();
   });
   it('renders component with message having no type which is equal to having PROTOBUF type', () => {
     render(
       setupWrapper({
-        messageContentFormat: 'PROTOBUF',
         messageContent: '',
-      })
+      }),
+      { initialEntries: [`/messages?${searchParamsContentPROTOBUF}`] }
     );
     expect(screen.getByText('PROTOBUF')).toBeInTheDocument();
   });
