diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor.js b/services/web/frontend/js/ide/editor/directives/aceEditor.js
index d3468f9a5f..8144f8f08d 100644
--- a/services/web/frontend/js/ide/editor/directives/aceEditor.js
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor.js
@@ -142,6 +142,12 @@ App.directive(
           }
         })
 
+        ide.$scope.$on('symbol-palette-toggled', (event, isToggled) => {
+          if (!isToggled) {
+            editor.focus()
+          }
+        })
+
         scope.$watch('autoPairDelimiters', autoPairDelimiters => {
           if (autoPairDelimiters) {
             return editor.setOption('behavioursEnabled', true)
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index 03ea5e3529..7733273633 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/services/web/frontend/stylesheets/app/editor/toolbar.less
@@ -304,6 +304,12 @@
     color: @formatting-btn-color;
   }
 
+  &.active {
+    color: @toolbar-btn-active-color;
+    background-color: @toolbar-btn-active-bg-color;
+    box-shadow: @toolbar-btn-active-shadow;
+  }
+
   &:focus {
     color: @formatting-btn-color;
   }