diff --git a/packages/scratch-gui/src/components/cards/card.css b/packages/scratch-gui/src/components/cards/card.css
index c0ec3c764bc..ee36153505f 100644
--- a/packages/scratch-gui/src/components/cards/card.css
+++ b/packages/scratch-gui/src/components/cards/card.css
@@ -111,6 +111,9 @@ body .card-container {
     border-bottom: 1px solid $extensions-tertiary;
     font-size: 0.625rem;
     font-weight: bold;
+    /* Ensure there is enough padding for the focus outline to become visible on Safari */
+    box-sizing: border-box;
+    padding: 0 0.77rem;
 }
 
 .header-buttons button {
@@ -155,6 +158,12 @@ body .card-container {
     padding: 0.75rem;
 }
 
+.remove-button:focus-visible,
+.shrink-expand-button:focus-visible,
+.all-button:focus-visible {
+    outline-offset: -4px;
+}
+
 .remove-button:hover, .all-button:hover {
     background-color: $ui-black-transparent;
 }
diff --git a/packages/scratch-gui/src/components/debug-modal/debug-modal.css b/packages/scratch-gui/src/components/debug-modal/debug-modal.css
index 750b80935ef..4b90568bd14 100644
--- a/packages/scratch-gui/src/components/debug-modal/debug-modal.css
+++ b/packages/scratch-gui/src/components/debug-modal/debug-modal.css
@@ -62,6 +62,8 @@
         cursor: pointer;
         width: 32px;
         height: 32px;
+        padding-left: 0;
+        padding-right: 0;
     }
 
     .modal-content {
diff --git a/packages/scratch-gui/src/components/menu-bar/preference-menu.jsx b/packages/scratch-gui/src/components/menu-bar/preference-menu.jsx
index 1a291125326..36462a46f8d 100644
--- a/packages/scratch-gui/src/components/menu-bar/preference-menu.jsx
+++ b/packages/scratch-gui/src/components/menu-bar/preference-menu.jsx
@@ -100,7 +100,11 @@ const PreferenceMenu = ({
                     src={dropdownCaret}
                 />
             </button>
-            <Submenu place={isRtl ? 'left' : 'right'}>
+            <Submenu
+                place={isRtl ? 'left' : 'right'}
+                className={styles.preferenceSubmenu}
+                menuClassName={styles.menu}
+            >
                 {itemKeys.map(itemKey => (
                     <PreferenceItem
                         onParentKeyDown={handleKeyDownOpenMenu}
diff --git a/packages/scratch-gui/src/components/menu-bar/settings-menu.css b/packages/scratch-gui/src/components/menu-bar/settings-menu.css
index 701b54d5d04..fcadec109ee 100644
--- a/packages/scratch-gui/src/components/menu-bar/settings-menu.css
+++ b/packages/scratch-gui/src/components/menu-bar/settings-menu.css
@@ -2,6 +2,22 @@
     width: 1.5rem;
 }
 
+/*
+    Safari removes focus outline on elements inside overflow:hidden.
+    Since the preference submenu is inside a menu with overflow:hidden,
+    we need to override that here so that the focus outline is visible.
+    The preference submenus include a short list of options,
+    so the overflow:hidden is not necessary for them (as opposed to the Language menu)
+*/
+.preference-submenu {
+    overflow: visible;
+}
+
+.preference-submenu .menu {
+    overflow: visible;
+    box-shadow: none;
+}
+
 /* Unused? */
 .color-mode-label {
     flex: 1;
diff --git a/packages/scratch-gui/src/components/menu/menu.jsx b/packages/scratch-gui/src/components/menu/menu.jsx
index e21018e7436..c8b35d0a6e7 100644
--- a/packages/scratch-gui/src/components/menu/menu.jsx
+++ b/packages/scratch-gui/src/components/menu/menu.jsx
@@ -32,7 +32,7 @@ MenuComponent.propTypes = {
     place: PropTypes.oneOf(['left', 'right'])
 };
 
-const Submenu = ({children, className, place, ...props}) => (
+const Submenu = ({children, className, menuClassName, place, ...props}) => (
     <ul
         className={classNames(
             styles.submenu,
@@ -45,6 +45,7 @@ const Submenu = ({children, className, place, ...props}) => (
     >
         <MenuComponent
             place={place}
+            className={menuClassName}
             {...props}
         >
             {children}
@@ -55,6 +56,7 @@ const Submenu = ({children, className, place, ...props}) => (
 Submenu.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    menuClassName: PropTypes.string,
     place: PropTypes.oneOf(['left', 'right'])
 };