diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 8e37441633..4277f1bd57 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
 import SplitPane from 'react-split-pane';
 import MediaQuery from 'react-responsive';
+import { BiCopy } from 'react-icons/bi';
 import IDEKeyHandlers from '../components/IDEKeyHandlers';
 import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
@@ -127,7 +128,15 @@ const IDEView = () => {
       }
     };
   }, [shouldAutosave, dispatch]);
-
+  const handleCopy = async () => {
+    const editor = cmRef.current;
+    try {
+      const content = editor;
+      await navigator.clipboard.writeText(content.getContent().content);
+    } catch (error) {
+      console.error('Failed to copy text to clipboard:', error);
+    }
+  };
   return (
     <RootPage>
       <Helmet>
@@ -142,7 +151,12 @@ const IDEView = () => {
       <MediaQuery minWidth={770}>
         {(matches) =>
           matches ? (
-            <main className="editor-preview-container">
+            <main
+              className="editor-preview-container"
+              style={{
+                color: 'red'
+              }}
+            >
               <SplitPane
                 split="vertical"
                 size={ide.sidebarIsExpanded ? sidebarSize : 20}
@@ -188,8 +202,27 @@ const IDEView = () => {
                   </SplitPane>
                   <section className="preview-frame-holder">
                     <header className="preview-frame__header">
-                      <h2 className="preview-frame__title">
+                      <h2
+                        className="preview-frame__title"
+                        style={{ position: 'absolute', display: 'block' }}
+                      >
                         {t('Toolbar.Preview')}
+                        <button
+                          style={{
+                            outline: '0',
+                            padding: '0',
+                            margin: '0',
+                            border: '0',
+                            position: 'relative',
+                            top: '130%',
+                            left: '-130%',
+                            fontSize: '17.5px',
+                            cursor: 'pointer'
+                          }}
+                          onClick={handleCopy}
+                        >
+                          <BiCopy />
+                        </button>
                       </h2>
                     </header>
                     <div className="preview-frame__content">
diff --git a/package-lock.json b/package-lock.json
index 7d314d654b..6e393d296f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,6 +83,8 @@
         "react-ga": "^3.3.0",
         "react-helmet": "^5.1.3",
         "react-i18next": "^11.11.3",
+        "react-icon": "^1.0.0",
+        "react-icons": "^4.11.0",
         "react-markdown": "^6.0.3",
         "react-redux": "^7.2.4",
         "react-refresh": "^0.14.0",
@@ -17908,6 +17910,22 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/babel-runtime": {
+      "version": "5.8.38",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-5.8.38.tgz",
+      "integrity": "sha512-KpgoA8VE/pMmNCrnEeeXqFG24TIH11Z3ZaimIhJWsin8EbfZy3WzFKUTIan10ZIDgRVvi9EkLbruJElJC9dRlg==",
+      "peer": true,
+      "dependencies": {
+        "core-js": "^1.0.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "peer": true
+    },
     "node_modules/bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@@ -38219,6 +38237,23 @@
         "react": ">= 16.8.0"
       }
     },
+    "node_modules/react-icon": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-icon/-/react-icon-1.0.0.tgz",
+      "integrity": "sha512-VzSlpBHnLanVw79mOxyq98hWDi6DlxK9qPiZ1bAK6bLurMBCaxO/jjyYUrRx9+JGLc/NbnwOmyE/W5Qglbb2QA==",
+      "peerDependencies": {
+        "babel-runtime": "^5.3.3",
+        "react": ">=0.12.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
@@ -55893,6 +55928,23 @@
         "babel-preset-current-node-syntax": "^1.0.0"
       }
     },
+    "babel-runtime": {
+      "version": "5.8.38",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-5.8.38.tgz",
+      "integrity": "sha512-KpgoA8VE/pMmNCrnEeeXqFG24TIH11Z3ZaimIhJWsin8EbfZy3WzFKUTIan10ZIDgRVvi9EkLbruJElJC9dRlg==",
+      "peer": true,
+      "requires": {
+        "core-js": "^1.0.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
+          "peer": true
+        }
+      }
+    },
     "bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@@ -71288,6 +71340,18 @@
         "html-parse-stringify": "^3.0.1"
       }
     },
+    "react-icon": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-icon/-/react-icon-1.0.0.tgz",
+      "integrity": "sha512-VzSlpBHnLanVw79mOxyq98hWDi6DlxK9qPiZ1bAK6bLurMBCaxO/jjyYUrRx9+JGLc/NbnwOmyE/W5Qglbb2QA==",
+      "requires": {}
+    },
+    "react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "requires": {}
+    },
     "react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
diff --git a/package.json b/package.json
index 569631aef2..1db7972268 100644
--- a/package.json
+++ b/package.json
@@ -228,6 +228,8 @@
     "react-ga": "^3.3.0",
     "react-helmet": "^5.1.3",
     "react-i18next": "^11.11.3",
+    "react-icon": "^1.0.0",
+    "react-icons": "^4.11.0",
     "react-markdown": "^6.0.3",
     "react-redux": "^7.2.4",
     "react-refresh": "^0.14.0",