diff --git a/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx b/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
index d1237ba0d..d8b2da5e6 100644
--- a/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
 import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
+import ClipboardIcon from 'components/common/Icons/ClipboardIcon';
+import { Button } from 'components/common/Button/Button';
+import Flexbox from 'components/common/FlexBox/FlexBox';
 import { SchemaType, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
+import useDataSaver from 'lib/hooks/useDataSaver';
 
 import * as S from './MessageContent.styled';
 
@@ -43,6 +47,10 @@ const MessageContent: React.FC<MessageContentProps> = ({
     }
   };
 
+  const tabContent = activeTabContent() || '';
+
+  const { copyToClipboard } = useDataSaver('topic-message', tabContent);
+
   const handleKeyTabClick = (e: React.MouseEvent) => {
     e.preventDefault();
     setActiveTab('key');
@@ -69,30 +77,44 @@ const MessageContent: React.FC<MessageContentProps> = ({
         <S.Section>
           <S.ContentBox>
             <S.Tabs>
-              <S.Tab
-                type="button"
-                $active={activeTab === 'key'}
-                onClick={handleKeyTabClick}
-              >
-                Key
-              </S.Tab>
-              <S.Tab
-                $active={activeTab === 'content'}
-                type="button"
-                onClick={handleContentTabClick}
-              >
-                Value
-              </S.Tab>
-              <S.Tab
-                $active={activeTab === 'headers'}
-                type="button"
-                onClick={handleHeadersTabClick}
-              >
-                Headers
-              </S.Tab>
+              <Flexbox justifyContent="space-between">
+                <Flexbox>
+                  <S.Tab
+                    type="button"
+                    $active={activeTab === 'key'}
+                    onClick={handleKeyTabClick}
+                  >
+                    Key
+                  </S.Tab>
+                  <S.Tab
+                    $active={activeTab === 'content'}
+                    type="button"
+                    onClick={handleContentTabClick}
+                  >
+                    Value
+                  </S.Tab>
+                  <S.Tab
+                    $active={activeTab === 'headers'}
+                    type="button"
+                    onClick={handleHeadersTabClick}
+                  >
+                    Headers
+                  </S.Tab>
+                </Flexbox>
+                <Flexbox>
+                  <Button
+                    type="button"
+                    buttonSize="M"
+                    buttonType="text"
+                    onClick={copyToClipboard}
+                  >
+                    <ClipboardIcon />
+                  </Button>
+                </Flexbox>
+              </Flexbox>
             </S.Tabs>
             <EditorViewer
-              data={activeTabContent() || ''}
+              data={tabContent}
               maxLines={28}
               schemaType={contentType}
             />
diff --git a/frontend/src/components/common/Icons/ClipboardIcon.tsx b/frontend/src/components/common/Icons/ClipboardIcon.tsx
new file mode 100644
index 000000000..ad6f40622
--- /dev/null
+++ b/frontend/src/components/common/Icons/ClipboardIcon.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ClipboardIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    width="24"
+    height="24"
+    className={className}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4l1-1h5.414L14 6.586V14l-1 1H5l-1-1V4zm9 3l-3-3H5v10h8V7z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 1L2 2v10l1 1V2h6.414l-1-1H3z"
+    />
+  </svg>
+);
+
+export default styled(ClipboardIcon)``;
diff --git a/frontend/src/lib/hooks/__tests__/useDataSaver.spec.tsx b/frontend/src/lib/hooks/__tests__/useDataSaver.spec.tsx
index 9b125575d..ea180962d 100644
--- a/frontend/src/lib/hooks/__tests__/useDataSaver.spec.tsx
+++ b/frontend/src/lib/hooks/__tests__/useDataSaver.spec.tsx
@@ -59,7 +59,7 @@ describe('useDataSaver hook', () => {
       };
       render(<HookWrapper />);
       expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-        JSON.stringify(content)
+        JSON.stringify(content, null, '\t')
       );
     });
 
diff --git a/frontend/src/lib/hooks/useDataSaver.ts b/frontend/src/lib/hooks/useDataSaver.ts
index 9bcc10367..82798d158 100644
--- a/frontend/src/lib/hooks/useDataSaver.ts
+++ b/frontend/src/lib/hooks/useDataSaver.ts
@@ -7,7 +7,9 @@ const useDataSaver = (
   const copyToClipboard = () => {
     if (navigator.clipboard) {
       const str =
-        typeof data === 'string' ? String(data) : JSON.stringify(data);
+        typeof data === 'string'
+          ? String(data)
+          : JSON.stringify(data, null, '\t');
       navigator.clipboard.writeText(str);
       showSuccessAlert({
         id: subject,