diff --git a/resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx b/resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx
index 35bb1302..86e6669a 100644
--- a/resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx
@@ -1,11 +1,12 @@
-import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
-import { Context } from '@/components/admin/nodes/NodeEditContainer';
-import { ApplicationStore } from '@/state';
-import { Actions, useStoreActions } from 'easy-peasy';
 import React, { useEffect, useState } from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
 import { faCode, faDragon } from '@fortawesome/free-solid-svg-icons';
+import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
+import { Context } from '@/components/admin/nodes/NodeEditContainer';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
 
 export default () => {
     const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@@ -32,9 +33,18 @@ export default () => {
     return (
         <div>
             <AdminBox title={'Configuration'} icon={faCode} css={tw`mb-4`}>
-                <pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md p-4 overflow-x-auto`}>
-                    {configuration}
-                </pre>
+                <div css={tw`relative`}>
+                    <div css={tw`absolute top-0 right-0`}>
+                        <CopyOnClick text={configuration} hideTextInToast={true}>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`h-5 w-5 text-neutral-500 hover:text-neutral-400 cursor-pointer mt-1 mr-1`}>
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                            </svg>
+                        </CopyOnClick>
+                    </div>
+                    <pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md p-4 overflow-x-auto`}>
+                        {configuration}
+                    </pre>
+                </div>
             </AdminBox>
 
             <AdminBox title={'Auto Deploy'} icon={faDragon}>
diff --git a/resources/scripts/components/elements/CopyOnClick.tsx b/resources/scripts/components/elements/CopyOnClick.tsx
index 3d71b0f8..1597881c 100644
--- a/resources/scripts/components/elements/CopyOnClick.tsx
+++ b/resources/scripts/components/elements/CopyOnClick.tsx
@@ -19,7 +19,7 @@ const Toast = styled.div`
     }
 `;
 
-const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
+const CopyOnClick: React.FC<{ text: any, hideTextInToast?: boolean }> = ({ text, hideTextInToast, children }) => {
     const [ copied, setCopied ] = useState(false);
 
     useEffect(() => {
@@ -45,7 +45,11 @@ const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
                     {copied ?
                         <Toast>
                             <div>
-                                <p>Copied &quot;{text}&quot; to clipboard.</p>
+                                {hideTextInToast ?
+                                    <p>Copied text to clipboard.</p>
+                                    :
+                                    <p>Copied &quot;{text}&quot; to clipboard.</p>
+                                }
                             </div>
                         </Toast>
                         :