diff --git a/bin/em/variabletime/web/css/demo.css b/bin/em/variabletime/web/css/demo.css
index fa9a791..a3c2336 100755
--- a/bin/em/variabletime/web/css/demo.css
+++ b/bin/em/variabletime/web/css/demo.css
@@ -266,6 +266,9 @@ body.debug div:not(.centerLine) {
 #notice_recording.visible {
     display: flex;
 }
+#notice_recording button {
+    pointer-events: all;
+}
 #notice_recording.impenetrable {
     pointer-events: all;
     background-color: rgba(0,0,0,0.5);
diff --git a/bin/em/variabletime/web/js/record.js b/bin/em/variabletime/web/js/record.js
index 924a538..951c095 100644
--- a/bin/em/variabletime/web/js/record.js
+++ b/bin/em/variabletime/web/js/record.js
@@ -469,9 +469,9 @@ const Record = function(tp) {
         document.querySelector('#notice_recording')
             .classList.add('visible');
         document.querySelector('#notice_recording')
-            .classList.remove('imprenetrable');
+            .classList.remove('impenetrable');
         document.querySelector('#notice_recording .what p').innerHTML = 'recording';
-        document.querySelector('#notice_recording .details p').innerHTML = '';
+        document.querySelector('#notice_recording .details p').innerHTML = '<button onclick="record.stopRecording()">stop recording</button>';
         if (!isInitialized) {
             init();
         }