diff --git a/src/components/ContributorArea/ContentForContributor.js b/src/components/ContributorArea/ContentForContributor.js
index 01b72187..8c9eed2c 100644
--- a/src/components/ContributorArea/ContentForContributor.js
+++ b/src/components/ContributorArea/ContentForContributor.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 
 import { MdLock } from 'react-icons/md';
@@ -6,6 +6,8 @@ import { MdLock } from 'react-icons/md';
 import UserContext from '../../context/UserContext';
 import { Heading, Text } from './AreaTypography';
 
+import { Button } from '../shared/Buttons';
+
 import {
   colors,
   badgeThemes,
@@ -29,7 +31,6 @@ const CodeBadge = styled(`div`)`
   display: flex;
   flex-direction: column;
   font-family: ${fonts.heading};
-  overflow: hidden;
 `;
 
 const Name = styled(`span`)`
@@ -73,6 +74,10 @@ const Tip = styled(`p`)`
   padding-top: ${spacing.xs}px;
 `;
 
+const CopyButton = styled(Button)`
+  margin-top: 0.85rem;
+`;
+
 const ProgressBarContainer = `
   border: 0;
   width: 100%;
@@ -127,82 +132,114 @@ const LockIcon = styled(MdLock)`
   padding-top: 0.4rem;
 `;
 
-const ContentForContributor = () => (
-  <UserContext.Consumer>
-    {({ contributor }) => {
-      const {
-        shopify: { codes },
-        github: { contributionCount }
-      } = contributor;
-
-      const showLevelTwoIncentive =
-        contributionCount >= 1 && contributionCount < 5;
-      let contributionsToGo, percentToGo;
-      if (showLevelTwoIncentive) {
-        contributionsToGo = 5 - contributionCount;
-        percentToGo = ((5 - contributionsToGo) / 5) * 100;
-      }
-
-      const numberOfCodes = codes.filter(code => code.used === false).length;
-      let text;
-      if (numberOfCodes > 1) {
-        text = `Use these discount codes during checkout to claim some free swag!`;
-      } else if (numberOfCodes == 1) {
-        text = `Enter this discount code during checkout to claim your free swag!`;
-      } else {
-        text = `Looks like you've claimed your swag! Thanks again, and keep being awesome.`;
-      }
-
-      return (
-        <ContentForContributorRoot>
-          <Heading>Here you go!</Heading>
-          <Text>
-            Thanks for going the extra mile to help build Gatsby! 💪 You have
-            made <strong>{contributionCount}</strong>{' '}
-            {`contribution${contributionCount > 1 ? `s` : ``}`}!
-          </Text>
-          <Text>{text}</Text>
-          {codes.map(code => (
-            <CodeBadgeBox key={code.code}>
-              <CodeBadge>
-                <Name code={code.code}>
-                  {`Level ${badgeThemes[code.code].level} Swag Code`}
-                </Name>
-                {!code.used ? (
-                  <Code>{code.code}</Code>
-                ) : (
-                  <Used>Claimed! 🎉</Used>
-                )}
-              </CodeBadge>
-              {/* {!code.used && (
-                  <Tip>
-                    Click the badge to shop only items you can claim for free
-                    using this code.
-                  </Tip>
-                )} */}
-            </CodeBadgeBox>
-          ))}
-          {/* Show progress bar when Level 1 is earned, but Level 2 is not */}
-          {showLevelTwoIncentive && (
-            <>
-              <CodeBadgeBox key={`HOLYBUCKETS`}>
+const Copy = ({ code }) => {
+  const [copied, setCopied] = useState(false);
+
+  let copyClick = () => {
+    setCopied(true);
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  let input = document.createElement('input');
+  input.setAttribute('type', 'text');
+  input.value = code;
+  document.body.appendChild(input);
+  input.select();
+  document.execCommand('copy');
+  document.body.removeChild(input);
+  return (
+    <CopyButton inverse={!copied} onClick={() => copyClick()}>
+      {copied ? 'Copied! 🎉' : 'Copy'}
+    </CopyButton>
+  );
+};
+
+const ContentForContributor = () => {
+  return (
+    <UserContext.Consumer>
+      {({ contributor }) => {
+        const {
+          shopify: { codes },
+          github: { contributionCount }
+        } = contributor;
+
+        const showLevelTwoIncentive =
+          contributionCount >= 1 && contributionCount < 5;
+        let contributionsToGo, percentToGo;
+        if (showLevelTwoIncentive) {
+          contributionsToGo = 5 - contributionCount;
+          percentToGo = ((5 - contributionsToGo) / 5) * 100;
+        }
+
+        const numberOfCodes = codes.filter(code => code.used === false).length;
+        let text;
+        if (numberOfCodes > 1) {
+          text = `Use these discount codes during checkout to claim some free swag!`;
+        } else if (numberOfCodes == 1) {
+          text = `Enter this discount code during checkout to claim your free swag!`;
+        } else {
+          text = `Looks like you've claimed your swag! Thanks again, and keep being awesome.`;
+        }
+
+        return (
+          <ContentForContributorRoot>
+            <Heading>Here you go!</Heading>
+            <Text>
+              Thanks for going the extra mile to help build Gatsby! 💪 You have
+              made <strong>{contributionCount}</strong>{' '}
+              {`contribution${contributionCount > 1 ? `s` : ``}`}!
+            </Text>
+            <Text>{text}</Text>
+            {codes.map(code => (
+              <CodeBadgeBox key={code.code}>
                 <CodeBadge>
-                  <Name code={`HOLYBUCKETS`}>{`Level 2 Swag Code`}</Name>
-                  <Code>
-                    <LockIcon />
-                  </Code>
+                  <Name code={code.code}>
+                    {`Level ${badgeThemes[code.code].level} Swag Code`}
+                  </Name>
+                  {!code.used ? (
+                    <>
+                      <Code id={`level-${badgeThemes[code.code].level}`}>
+                        {code.code}
+                      </Code>
+                      <Copy code={code.code} />
+                    </>
+                  ) : (
+                    <Used>Claimed! 🎉</Used>
+                  )}
                 </CodeBadge>
+                {/* {!code.used && (
+                <Tip>
+                Click the badge to shop only items you can claim for free
+                using this code.
+                </Tip>
+              )} */}
               </CodeBadgeBox>
-              <ProgressBar value={percentToGo} max="100" />
-              <Text>{`Make ${contributionsToGo} more contribution${
-                contributionsToGo > 1 ? `s` : ``
-              } to earn level 2 swag!`}</Text>
-            </>
-          )}
-        </ContentForContributorRoot>
-      );
-    }}
-  </UserContext.Consumer>
-);
+            ))}
+            {/* Show progress bar when Level 1 is earned, but Level 2 is not */}
+            {showLevelTwoIncentive && (
+              <>
+                <CodeBadgeBox key={`HOLYBUCKETS`}>
+                  <CodeBadge>
+                    <Name code={`HOLYBUCKETS`}>{`Level 2 Swag Code`}</Name>
+                    <Code>
+                      <LockIcon />
+                    </Code>
+                  </CodeBadge>
+                </CodeBadgeBox>
+                <ProgressBar value={percentToGo} max="100" />
+                <Text>{`Make ${contributionsToGo} more contribution${
+                  contributionsToGo > 1 ? `s` : ``
+                } to earn level 2 swag!`}</Text>
+              </>
+            )}
+          </ContentForContributorRoot>
+        );
+      }}
+    </UserContext.Consumer>
+  );
+};
 
 export default ContentForContributor;