diff --git a/components/Copy.tsx b/components/Copy.tsx
index c0611d72..b04b4dc1 100644
--- a/components/Copy.tsx
+++ b/components/Copy.tsx
@@ -6,7 +6,7 @@ interface CopyButtonProps {
   children: React.ReactNode;
 }
 
-export default function CopyButton ({ text, children }: CopyButtonProps) {
+export default function CopyButton({ text, children }: CopyButtonProps) {
   const { copy, status } = useClipboard(text);
   let value = children;
 
@@ -25,4 +25,4 @@ export default function CopyButton ({ text, children }: CopyButtonProps) {
       {value}
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/components/mdx/Code.tsx b/components/mdx/Code.tsx
index 9abd0a8e..5c38e2ec 100644
--- a/components/mdx/Code.tsx
+++ b/components/mdx/Code.tsx
@@ -74,7 +74,7 @@ export default function Code({
     breakWords = true;
   }
 
-  const hasCopy = props.copy || language === "copy";
+  const hasCopy = /*props.copy || language === "copy"*/ true;
   const isTerminal = props.terminal || language === "terminal";
   const hasLines = file != null || props.lines;
 
@@ -83,7 +83,7 @@ export default function Code({
   );
 
   return (
-    <div className="code-block relative my-6 font-mono rounded-md">
+    <div className="code-block relative my-3 font-mono rounded-md">
       <InfoBar fileName={file} language={language} />
       <Highlight {...defaultProps} code={children} language={language}>
         {({
@@ -99,13 +99,6 @@ export default function Code({
               blockClassName
             )}
           >
-            {(props.copy || language === "copy") && (
-              <div className="copy-button">
-                <CopyButton text={children}>
-                  <CopyIcon />
-                </CopyButton>
-              </div>
-            )}
             <code className="p-4 rounded-md">
               {cleanTokens(tokens).map((line, i) => {
                 const lineClass = {};
@@ -187,6 +180,13 @@ export default function Code({
           </pre>
         )}
       </Highlight>
+      {hasCopy && (
+        <div className="copy-button absolute bottom-4 right-2 hidden p-3 transition md:block">
+          <CopyButton text={children}>
+            <CopyIcon className="w-5" />
+          </CopyButton>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index 2598d733..f3a2cd95 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -1,3 +1,11 @@
 abbr[title].no-underline {
   text-decoration: none;
 }
+
+.code-block .copy-button {
+  opacity: 0;
+}
+
+.code-block:hover .copy-button {
+  opacity: 100;
+}