diff --git a/src/presentation/components/Code/TheCodeArea.vue b/src/presentation/components/Code/TheCodeArea.vue
index 93edd884..43943f6a 100644
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/src/presentation/components/Code/TheCodeArea.vue
@@ -159,8 +159,33 @@ function initializeEditor(
   editor.setTheme(`ace/theme/${theme}`);
   editor.setReadOnly(true);
   editor.setAutoScrollEditorIntoView(true);
-  editor.setShowPrintMargin(false); // hides vertical line
-  editor.getSession().setUseWrapMode(true); // So code is readable on mobile
+  editor.setShowPrintMargin(false); // Hide the vertical line
+  editor.getSession().setUseWrapMode(true); // Make code readable on mobile
+  hideActiveLineAndCursorUntilInteraction(editor);
+  return editor;
+}
+
+function hideActiveLineAndCursorUntilInteraction(editor: ace.Ace.Editor) {
+  hideActiveLineAndCursor(editor);
+  editor.session.on('change', () => {
+    editor.session.selection.clearSelection();
+    hideActiveLineAndCursor(editor);
+  });
+  editor.session.selection.on('changeSelection', () => {
+    showActiveLineAndCursor(editor);
+  });
+}
+
+function hideActiveLineAndCursor(editor: ace.Ace.Editor) {
+  editor.setHighlightGutterLine(false); // Remove highlighting on line number column
+  editor.setHighlightActiveLine(false); // Remove highlighting throughout the line
+  editor.renderer.$cursorLayer.element.style.display = 'none'; // hide cursor
+}
+
+function showActiveLineAndCursor(editor: ace.Ace.Editor) {
+  editor.setHighlightGutterLine(true); // Show highlighting on line number column
+  editor.setHighlightActiveLine(true); // Show highlighting throughout the line
+  editor.renderer.$cursorLayer.element.style.display = ''; // Show cursor
   return editor;
 }