diff --git a/website/src/pages/embed.astro b/website/src/pages/embed.astro
new file mode 100644
index 00000000..de8d2c2d
--- /dev/null
+++ b/website/src/pages/embed.astro
@@ -0,0 +1,14 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import { Repl } from '../repl/Repl.jsx';
+---
+
+<html>
+  <head>
+    <HeadCommon />
+    <title>Strudel REPL</title>
+  </head>
+  <body>
+    <Repl client:only="react" embedded />
+  </body>
+</html>
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index c9de3b75..1ea539fc 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -1,5 +1,5 @@
 import AcademicCapIcon from '@heroicons/react/20/solid/AcademicCapIcon';
-import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
+import ArrowPathIcon from '@heroicons/react/20/solid/ArrowPathIcon';
 import LinkIcon from '@heroicons/react/20/solid/LinkIcon';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
@@ -9,10 +9,9 @@ import React, { useContext } from 'react';
 // import { ReplContext } from './Repl';
 import './Repl.css';
 
-const isEmbedded = window.location !== window.parent.location;
-
 export function Header({ context }) {
   const {
+    embedded,
     started,
     pending,
     isDirty,
@@ -25,32 +24,37 @@ export function Header({ context }) {
     isZen,
     setIsZen,
   } = context;
+  const isEmbedded = embedded || window.location !== window.parent.location;
   // useContext(ReplContext)
 
   return (
     <header
       id="header"
       className={cx(
-        'py-1 flex-none w-full md:flex text-black justify-between z-[100] text-lg  select-none sticky top-0',
-        !isZen && 'bg-header',
+        'py-1 flex-none w-full text-black justify-between z-[100] text-lg  select-none sticky top-0',
+        !isZen && !isEmbedded && 'bg-header',
+        isEmbedded ? 'flex' : 'md:flex',
       )}
     >
-      <div className="px-4 flex space-x-2 pt-2 md:pt-0 select-none">
+      <div className="px-4 flex space-x-2 md:pt-0 select-none">
         {/*             <img
     src={logo}
     className={cx('Tidal-logo', isEmbedded ? 'w-8 h-8' : 'w-10 h-10', started && 'animate-pulse')} // 'bg-[#ffffff80] rounded-full'
     alt="logo"
   /> */}
         <h1
+          onClick={() => {
+            if (isEmbedded) window.open(window.location.href.replace('embed', ''));
+          }}
           className={cx(
-            isEmbedded ? 'text-l' : 'text-xl',
+            isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
             // 'bg-clip-text bg-gradient-to-r from-primary to-secondary  text-transparent font-bold',
             'text-white font-bold flex space-x-2 items-center',
           )}
         >
           <div
             className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer')}
-            onClick={() => setIsZen((z) => !z)}
+            onClick={() => !isEmbedded && setIsZen((z) => !z)}
           >
             🌀
           </div>
@@ -65,12 +69,13 @@ export function Header({ context }) {
         <div className="flex max-w-full overflow-auto text-white ">
           <button
             onClick={handleTogglePlay}
+            title={started ? 'stop' : 'play'}
             className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:text-tertiary', !started && 'animate-pulse')}
           >
             {!pending ? (
-              <span className={cx('flex items-center space-x-1', isEmbedded ? 'w-16' : 'w-16')}>
-                {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />}
-                <span>{started ? 'stop' : 'play'}</span>
+              <span className={cx('flex items-center space-x-1', isEmbedded ? '' : 'w-16')}>
+                {started ? <StopCircleIcon className="w-6 h-6" /> : <PlayCircleIcon className="w-6 h-6" />}
+                {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
               </span>
             ) : (
               <>loading...</>
@@ -78,46 +83,54 @@ export function Header({ context }) {
           </button>
           <button
             onClick={handleUpdate}
+            title="update"
             className={cx(
               'flex items-center space-x-1',
               !isEmbedded ? 'p-2' : 'px-2',
               !isDirty || !activeCode ? 'opacity-50' : 'hover:text-tertiary',
             )}
           >
-            <CommandLineIcon className="w-5 h-5" />
-            <span>update</span>
+            {/*             <CommandLineIcon className="w-6 h-6" /> */}
+            <ArrowPathIcon className="w-6 h-6" />
+            {!isEmbedded && <span>update</span>}
           </button>
           {!isEmbedded && (
-            <button className="hover:text-tertiary p-2 flex items-center space-x-1" onClick={handleShuffle}>
-              <SparklesIcon className="w-5 h-5" />
+            <button
+              title="shuffle"
+              className="hover:text-tertiary p-2 flex items-center space-x-1"
+              onClick={handleShuffle}
+            >
+              <SparklesIcon className="w-6 h-6" />
               <span> shuffle</span>
             </button>
           )}
           {!isEmbedded && (
             <button
+              title="share"
               className={cx(
                 'cursor-pointer hover:text-tertiary flex items-center space-x-1',
                 !isEmbedded ? 'p-2' : 'px-2',
               )}
               onClick={handleShare}
             >
-              <LinkIcon className="w-5 h-5" />
+              <LinkIcon className="w-6 h-6" />
               <span>share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}</span>
             </button>
           )}
           {!isEmbedded && (
             <a
+              title="learn"
               href="./learn/getting-started"
               className={cx('hover:text-tertiary flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
             >
-              <AcademicCapIcon className="w-5 h-5" />
+              <AcademicCapIcon className="w-6 h-6" />
               <span>learn</span>
             </a>
           )}
-          {isEmbedded && (
+          {/* {isEmbedded && (
             <button className={cx('hover:text-tertiary px-2')}>
               <a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
-                🚀 open
+                🚀
               </a>
             </button>
           )}
@@ -130,10 +143,10 @@ export function Header({ context }) {
                 }}
                 title="Reset"
               >
-                💔 reset
+                💔
               </a>
             </button>
-          )}
+          )} */}
         </div>
       )}
     </header>
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index ff6be87b..53c744d8 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -22,6 +22,7 @@ import { Footer } from './Footer';
 import { Header } from './Header';
 import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
+import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 
 initAudioOnFirstClick();
 
@@ -101,7 +102,8 @@ const { code: randomTune, name } = getRandomTune();
 
 export const ReplContext = createContext(null);
 
-export function Repl() {
+export function Repl({ embedded = false }) {
+  const isEmbedded = embedded || window.location !== window.parent.location;
   const [view, setView] = useState(); // codemirror view
   const [lastShared, setLastShared] = useState();
   const [activeFooter, setActiveFooter] = useState('');
@@ -232,6 +234,7 @@ export function Repl() {
     }
   };
   const context = {
+    embedded,
     started,
     pending,
     isDirty,
@@ -269,7 +272,16 @@ export function Repl() {
         {error && (
           <div className="text-red-500 p-4 bg-lineblack animate-pulse">{error.message || 'Unknown Error :-/'}</div>
         )}
-        <Footer context={context} />
+        {isEmbedded && !started && (
+          <button
+            onClick={() => handleTogglePlay()}
+            className="text-white text-2xl fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[1000] m-auto p-4 bg-black rounded-md flex items-center space-x-2"
+          >
+            <PlayCircleIcon className="w-6 h-6" />
+            <span>play</span>
+          </button>
+        )}
+        {!isEmbedded && <Footer context={context} />}
       </div>
     </ReplContext.Provider>
   );
