diff --git a/package-lock.json b/package-lock.json
index 680a1b79eb..0b1f4f72c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27202,7 +27202,8 @@
     },
     "node_modules/localforage": {
       "version": "1.10.0",
-      "license": "Apache-2.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
       "dependencies": {
         "lie": "3.1.1"
       }
@@ -41629,6 +41630,7 @@
         "gatsby-plugin-segment-js": "^3.7.1",
         "gatsby-source-filesystem": "^4.17.0",
         "gatsby-transformer-react-docgen": "^7.17.0",
+        "localforage": "^1.10.0",
         "lodash.debounce": "^4.0.8",
         "prism-react-renderer": "^1.3.3",
         "prop-types": "^15.8.1",
diff --git a/www/package.json b/www/package.json
index aa6b60ac10..c0ab038aaa 100644
--- a/www/package.json
+++ b/www/package.json
@@ -22,6 +22,7 @@
     "gatsby-plugin-segment-js": "^3.7.1",
     "gatsby-source-filesystem": "^4.17.0",
     "gatsby-transformer-react-docgen": "^7.17.0",
+    "localforage": "^1.10.0",
     "lodash.debounce": "^4.0.8",
     "prism-react-renderer": "^1.3.3",
     "prop-types": "^15.8.1",
diff --git a/www/playroom.config.js b/www/playroom.config.js
index f1b489e7f4..ac0be66992 100644
--- a/www/playroom.config.js
+++ b/www/playroom.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const { storageKey } = require('./playroom/constants');
 
 module.exports = {
   baseUrl: '/playroom/',
@@ -57,4 +58,5 @@ module.exports = {
     },
   }),
   iframeSandbox: 'allow-scripts allow-same-origin',
+  storageKey,
 };
diff --git a/www/playroom/constants.js b/www/playroom/constants.js
new file mode 100644
index 0000000000..b8cf0a535f
--- /dev/null
+++ b/www/playroom/constants.js
@@ -0,0 +1,3 @@
+module.exports = {
+  storageKey: 'playroom__paragon',
+};
diff --git a/www/src/components/header/Header.scss b/www/src/components/header/Header.scss
index 1c1d440e81..a9615b2ce6 100644
--- a/www/src/components/header/Header.scss
+++ b/www/src/components/header/Header.scss
@@ -1,6 +1,12 @@
 .pgn-doc__header {
   z-index: $zindex-header;
 
+  .pgn-doc__playground-title {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+
   .pgn-doc__header-title {
     display: flex;
     align-items: center;
diff --git a/www/src/components/header/SiteTitle.tsx b/www/src/components/header/SiteTitle.tsx
index 9735d6fadc..136ddc34e0 100644
--- a/www/src/components/header/SiteTitle.tsx
+++ b/www/src/components/header/SiteTitle.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { Link } from 'gatsby';
 // @ts-ignore
 import Logo from '../../images/diamond.svg';
@@ -7,14 +8,14 @@ import Logo from '../../images/diamond.svg';
 interface SiteTitleProps {
   title: string,
   isFullVersion: boolean,
+  className?: string,
 }
 
-export default function SiteTitle({ title, isFullVersion } : SiteTitleProps) {
+export default function SiteTitle({ title, isFullVersion, className } : SiteTitleProps) {
   return (
     <Link
       to="/"
-      style={{ textDecoration: 'none' }}
-      className="d-block"
+      className={classNames('d-block text-decoration-none', className)}
     >
       <div className="pgn-doc__header-title">
         <span
@@ -40,4 +41,9 @@ export default function SiteTitle({ title, isFullVersion } : SiteTitleProps) {
 SiteTitle.propTypes = {
   title: PropTypes.string.isRequired,
   isFullVersion: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+};
+
+SiteTitle.defaultProps = {
+  className: undefined,
 };
diff --git a/www/src/pages/playground.tsx b/www/src/pages/playground.tsx
index 76e0ef1706..7496b4a719 100644
--- a/www/src/pages/playground.tsx
+++ b/www/src/pages/playground.tsx
@@ -1,17 +1,30 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Hyperlink } from '~paragon-react';
+import {
+  Hyperlink,
+  StatefulButton,
+  Button,
+  Icon,
+  Stack,
+} from '~paragon-react';
+import { ContentCopy, Check } from '~paragon-icons';
 import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
+import localforage from 'localforage';
 
 import SEO from '../components/SEO';
 import { SiteTitle } from '../components/header';
+import { storageKey } from '../../playroom/constants';
 
 const FEEDBACK_URL = 'https://github.com/openedx/paragon/issues/new?assignees=&labels=playground&template=feedback_template.md&title=[Playground]';
 
+const playroomStorage = localforage.createInstance({ name: storageKey });
+const EMPTY_PLAYROOM_URL_QUERY = '?code=N4XyA';
+
 export default function Playground({ location }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [initialSearchParams, setInitialSearchParams] = useState('');
   const searchValue = useRef(location.search || '');
+  const [copyUrlState, setCopyUrlState] = useState('default');
 
   useEffect(() => {
     setInitialSearchParams(location.search);
@@ -35,21 +48,55 @@ export default function Playground({ location }) {
     return () => clearInterval(iframeUrlPoll);
   }, []);
 
+  useEffect(() => {
+    setCopyUrlState('default');
+  }, [location.href]);
+
   return (
     <div className="d-flex flex-column w-100 vh-100 m-0 p-0">
       <SEO title="Playground" />
       <div className="pgn-doc__header py-3 bg-dark text-white sticky-top">
-        <div className="d-flex align-items-center justify-content-center">
+        <Stack direction="horizontal" className="d-flex align-items-center justify-content-end px-4" gap={4}>
+          <Button
+            variant="inverse-tertiary"
+            onClick={() => {
+              playroomStorage.clear().then(() => {
+                iframeRef!.current!.contentWindow!.location.search = EMPTY_PLAYROOM_URL_QUERY;
+              });
+            }}
+          >
+            Reset
+          </Button>
+          <StatefulButton
+            variant="inverse-tertiary"
+            state={copyUrlState}
+            onClick={() => {
+              setCopyUrlState('copied');
+              navigator.clipboard.writeText(location.href);
+              global.analytics.track('openedx.paragon.docs.playground.url-copied');
+            }}
+            labels={{
+              default: 'Copy URL',
+              copied: 'Copied',
+            }}
+            icons={{
+              default: <Icon src={ContentCopy} />,
+              copied: <Icon src={Check} />,
+            }}
+          />
           <Hyperlink
             destination={FEEDBACK_URL}
             target="_blank"
-            className="text-white position-absolute"
-            style={{ left: '16px' }}
+            className="text-white"
           >
             Leave feedback
           </Hyperlink>
-          <SiteTitle title="Paragon Design System" isFullVersion />
-        </div>
+          <SiteTitle
+            title="Paragon Design System"
+            isFullVersion
+            className="pgn-doc__playground-title"
+          />
+        </Stack>
       </div>
       <iframe
         title="Paragon Playground"
@@ -71,5 +118,6 @@ export default function Playground({ location }) {
 Playground.propTypes = {
   location: PropTypes.shape({
     search: PropTypes.string,
+    href: PropTypes.string,
   }).isRequired,
 };