diff --git a/packages/scratch-gui/src/components/cards/card.css b/packages/scratch-gui/src/components/cards/card.css
index a9e33a1caef..c0ec3c764bc 100644
--- a/packages/scratch-gui/src/components/cards/card.css
+++ b/packages/scratch-gui/src/components/cards/card.css
@@ -64,6 +64,7 @@ body .card-container {
     height: 44px;
     width: 44px;
     border-radius: 100%;
+    border: none;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -112,6 +113,11 @@ body .card-container {
     font-weight: bold;
 }
 
+.header-buttons button {
+    background: none;
+    border: none;
+}
+
 .header-buttons-hidden {
     border-bottom: 0px;
 }
diff --git a/packages/scratch-gui/src/components/cards/cards.jsx b/packages/scratch-gui/src/components/cards/cards.jsx
index 4f99b406340..cb20e0c6912 100644
--- a/packages/scratch-gui/src/components/cards/cards.jsx
+++ b/packages/scratch-gui/src/components/cards/cards.jsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {Fragment} from 'react';
+import React, {Fragment, useEffect} from 'react';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 import Draggable from 'react-draggable';
@@ -18,9 +18,11 @@ import closeIcon from './icon--close.svg';
 import {translateVideo} from '../../lib/libraries/decks/translate-video.js';
 import {translateImage} from '../../lib/libraries/decks/translate-image.js';
 
+import {KEY} from '../../lib/navigation-keys.js';
+
 const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, step, expanded}) => (
     <div className={expanded ? styles.headerButtons : classNames(styles.headerButtons, styles.headerButtonsHidden)}>
-        <div
+        <button
             className={styles.allButton}
             onClick={onShowAll}
         >
@@ -33,7 +35,7 @@ const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, s
                 description="Title for button to return to tutorials library"
                 id="gui.cards.all-tutorials"
             />
-        </div>
+        </button>
         {totalSteps > 1 ? (
             <div className={styles.stepsList}>
                 {Array(totalSteps).fill(0)
@@ -46,7 +48,7 @@ const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, s
             </div>
         ) : null}
         <div className={styles.headerButtonsRight}>
-            <div
+            <button
                 className={styles.shrinkExpandButton}
                 onClick={onShrinkExpandCards}
             >
@@ -66,8 +68,8 @@ const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, s
                         id="gui.cards.expand"
                     />
                 }
-            </div>
-            <div
+            </button>
+            <button
                 className={styles.removeButton}
                 onClick={onCloseCards}
             >
@@ -80,7 +82,7 @@ const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, s
                     description="Title for button to close how-to card"
                     id="gui.cards.close"
                 />
-            </div>
+            </button>
         </div>
     </div>
 );
@@ -192,7 +194,7 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, expanded}) => (
         {onNextStep ? (
             <div>
                 <div className={expanded ? (isRtl ? styles.leftCard : styles.rightCard) : styles.hidden} />
-                <div
+                <button
                     className={expanded ? (isRtl ? styles.leftButton : styles.rightButton) : styles.hidden}
                     onClick={onNextStep}
                 >
@@ -200,13 +202,13 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, expanded}) => (
                         draggable={false}
                         src={isRtl ? leftArrow : rightArrow}
                     />
-                </div>
+                </button>
             </div>
         ) : null}
         {onPrevStep ? (
             <div>
                 <div className={expanded ? (isRtl ? styles.rightCard : styles.leftCard) : styles.hidden} />
-                <div
+                <button
                     className={expanded ? (isRtl ? styles.rightButton : styles.leftButton) : styles.hidden}
                     onClick={onPrevStep}
                 >
@@ -214,7 +216,7 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, expanded}) => (
                         draggable={false}
                         src={isRtl ? rightArrow : leftArrow}
                     />
-                </div>
+                </button>
             </div>
         ) : null}
     </Fragment>
@@ -370,6 +372,18 @@ const Cards = props => {
     } = props;
     let {x, y} = posProps;
 
+    useEffect(() => {
+        const handleKeyDown = e => {
+            if (e.key === KEY.ESCAPE) {
+                onCloseCards();
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [onCloseCards]);
+
     if (activeDeckId === null) return;
 
     // Tutorial cards need to calculate their own dragging bounds
diff --git a/packages/scratch-gui/test/unit/components/__snapshots__/cards.test.jsx.snap b/packages/scratch-gui/test/unit/components/__snapshots__/cards.test.jsx.snap
index 3c8fa96bd8d..f0bd00d34cf 100644
--- a/packages/scratch-gui/test/unit/components/__snapshots__/cards.test.jsx.snap
+++ b/packages/scratch-gui/test/unit/components/__snapshots__/cards.test.jsx.snap
@@ -10,26 +10,26 @@ exports[`Cards component showVideos=false shows the title image/name instead of
   >
     <div>
       <div>
-        <div>
+        <button>
           <img
             src="test-file-stub"
           />
           Tutorials
-        </div>
+        </button>
         <div>
-          <div>
+          <button>
             <img
               draggable="false"
               src="test-file-stub"
             />
             Shrink
-          </div>
-          <div>
+          </button>
+          <button>
             <img
               src="test-file-stub"
             />
             Close
-          </div>
+          </button>
         </div>
       </div>
       <div>
@@ -58,26 +58,26 @@ exports[`Cards component showVideos=true shows the video step 1`] = `
   >
     <div>
       <div>
-        <div>
+        <button>
           <img
             src="test-file-stub"
           />
           Tutorials
-        </div>
+        </button>
         <div>
-          <div>
+          <button>
             <img
               draggable="false"
               src="test-file-stub"
             />
             Shrink
-          </div>
-          <div>
+          </button>
+          <button>
             <img
               src="test-file-stub"
             />
             Close
-          </div>
+          </button>
         </div>
       </div>
       <div>