diff --git a/front_end/Images/src/triangle-expanded.svg b/front_end/Images/src/triangle-expanded.svg
index 65050fcbf8..22e0193902 100644
--- a/front_end/Images/src/triangle-expanded.svg
+++ b/front_end/Images/src/triangle-expanded.svg
@@ -1 +1 @@
-<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M 10 10 h 28 l -14 20 L 10 10" /></svg>
\ No newline at end of file
+<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M 10 15 h 28 l -14 20 L 10 15" /></svg>
diff --git a/front_end/ui/components/text_editor/config.ts b/front_end/ui/components/text_editor/config.ts
index 59b672847e..100ce474f9 100644
--- a/front_end/ui/components/text_editor/config.ts
+++ b/front_end/ui/components/text_editor/config.ts
@@ -88,6 +88,7 @@ export const codeFolding = DynamicSetting.bool('textEditorCodeFolding', [
     markerDOM(open: boolean): HTMLElement {
       const iconName = open ? 'triangle-expanded' : 'triangle-collapsed';
       const icon = new Icon.Icon.Icon();
+      icon.setAttribute('class', open ? 'cm-foldGutterElement' : 'cm-foldGutterElement cm-foldGutterElement-folded');
       icon.data = {
         iconName,
         color: 'var(--color-text-secondary)',
diff --git a/front_end/ui/components/text_editor/theme.ts b/front_end/ui/components/text_editor/theme.ts
index d42053fd5e..2c3535f5ed 100644
--- a/front_end/ui/components/text_editor/theme.ts
+++ b/front_end/ui/components/text_editor/theme.ts
@@ -53,6 +53,16 @@ export const editorTheme = CM.EditorView.theme({
     backgroundColor: 'var(--color-background)',
   },
 
+  '.cm-gutters .cm-foldGutterElement': {
+    cursor: 'pointer',
+    opacity: '0%',
+    transition: 'opacity 0.2s',
+  },
+
+  '.cm-gutters .cm-foldGutterElement-folded, .cm-gutters:hover .cm-foldGutterElement': {
+    opacity: '100%',
+  },
+
   '.cm-lineNumbers': {
     overflow: 'visible',
     minWidth: '40px',