diff --git a/repl/package-lock.json b/repl/package-lock.json
index 890831da..5f440701 100644
--- a/repl/package-lock.json
+++ b/repl/package-lock.json
@@ -30,6 +30,7 @@
         "@snowpack/plugin-typescript": "^1.2.1",
         "@snowpack/web-test-runner-plugin": "^0.2.2",
         "@tailwindcss/forms": "^0.4.0",
+        "@tailwindcss/typography": "^0.5.2",
         "@testing-library/react": "^11.2.6",
         "@types/chai": "^4.2.17",
         "@types/mocha": "^8.2.2",
@@ -2703,6 +2704,20 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz",
+      "integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "7.31.2",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
@@ -7558,12 +7573,30 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+      "dev": true
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -14162,6 +14195,17 @@
         "mini-svg-data-uri": "^1.2.3"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz",
+      "integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==",
+      "dev": true,
+      "requires": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2"
+      }
+    },
     "@testing-library/dom": {
       "version": "7.31.2",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
@@ -17996,12 +18040,30 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
+      "dev": true
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+      "dev": true
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
diff --git a/repl/package.json b/repl/package.json
index bb328f50..4ed756c6 100644
--- a/repl/package.json
+++ b/repl/package.json
@@ -36,6 +36,7 @@
     "@snowpack/plugin-typescript": "^1.2.1",
     "@snowpack/web-test-runner-plugin": "^0.2.2",
     "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.2",
     "@testing-library/react": "^11.2.6",
     "@types/chai": "^4.2.17",
     "@types/mocha": "^8.2.2",
diff --git a/repl/src/tutorial/MiniRepl.tsx b/repl/src/tutorial/MiniRepl.tsx
index 4baff26c..85bfc68f 100644
--- a/repl/src/tutorial/MiniRepl.tsx
+++ b/repl/src/tutorial/MiniRepl.tsx
@@ -18,12 +18,7 @@ function MiniRepl({ tune }) {
   return (
     <>
       <textarea value={code} onChange={(e) => setCode(e.target.value)} />
-      <button
-        className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
-        onClick={() => togglePlay()}
-      >
-        {cycle.started ? 'pause' : 'play'}
-      </button>
+      <button onClick={() => togglePlay()}>{cycle.started ? 'pause' : 'play'}</button>
     </>
   );
 }
diff --git a/repl/src/tutorial/Tutorial.js b/repl/src/tutorial/Tutorial.js
new file mode 100644
index 00000000..4d618e5d
--- /dev/null
+++ b/repl/src/tutorial/Tutorial.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tutorial from './tutorial.mdx';
+import logo from '../logo.svg';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <div className="min-h-screen flex flex-col">
+      <header className="flex-none w-full h-16 px-2 flex items-center border-b border-gray-200 bg-white justify-between">
+        <div className="flex items-center space-x-2">
+          <img src={logo} className="Tidal-logo w-16 h-16" alt="logo" />
+          <h1 className="text-2xl">Strudel Tutorial</h1>
+        </div>
+        {!window.location.href.includes('localhost') && (
+          <div className="flex space-x-4">
+            <a href="../">go to REPL</a>
+          </div>
+        )}
+      </header>
+      <section className="prose p-4">
+        <Tutorial />
+      </section>
+    </div>
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/repl/src/tutorial/index.html b/repl/src/tutorial/index.html
index e0d56a15..921cddc7 100644
--- a/repl/src/tutorial/index.html
+++ b/repl/src/tutorial/index.html
@@ -1,14 +1,16 @@
-<div id="root"></div>
-<script type="module">
-  import React from 'react';
-  import ReactDOM from 'react-dom';
-  import * as React from 'react';
-  import Tutorial from './tutorial.mdx';
-
-  ReactDOM.render(
-    <React.StrictMode>
-      <Tutorial />
-    </React.StrictMode>,
-    document.getElementById('root')
-  );
-</script>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="../../public/favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Strudel REPL" />
+    <title>Strudel Tutorial</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="Tutorial.js"></script>
+  </body>
+</html>
diff --git a/repl/src/tutorial/style.css b/repl/src/tutorial/style.css
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/repl/src/tutorial/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/repl/src/tutorial/tutorial.mdx b/repl/src/tutorial/tutorial.mdx
index 782595aa..29363c87 100644
--- a/repl/src/tutorial/tutorial.mdx
+++ b/repl/src/tutorial/tutorial.mdx
@@ -1,7 +1,11 @@
 import MiniRepl from './MiniRepl';
 
-# Strudel Tutorial
+# About Strudel
 
 hello!!!!
 
+# Mini Notation
+
+blablalba
+
 <MiniRepl tune="C3.m" />
diff --git a/repl/tailwind.config.js b/repl/tailwind.config.js
index 7e406859..4b665a93 100644
--- a/repl/tailwind.config.js
+++ b/repl/tailwind.config.js
@@ -4,5 +4,5 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [require('@tailwindcss/forms')],
+  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
 };
diff --git a/repl/tsconfig.json b/repl/tsconfig.json
index d1e7c67a..1ea10b13 100644
--- a/repl/tsconfig.json
+++ b/repl/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["src", "types", "public/hot.js"],
+  "include": ["src", "types", "public/hot.js", "tutorial"],
   "compilerOptions": {
     "allowJs": true,
     "module": "esnext",