diff --git a/src/features/forms/components/inputs/HtmlInput.vue b/src/features/forms/components/inputs/HtmlInput.vue
index 373582f5762770efb24f69d2f8203f22579b7d8d..96f6283c120b572ef5df5efec5631cdeef06ec36 100644
--- a/src/features/forms/components/inputs/HtmlInput.vue
+++ b/src/features/forms/components/inputs/HtmlInput.vue
@@ -83,12 +83,18 @@ let savedState = '';
 let startValue = '';
 
 function onFocus() {
-    startValue = content.value; 
+    startValue = content.value;
     savedState = getCurrentState(true);
+
+    const htmlInput = document.querySelector('.tox-tinymce') as HTMLElement;
+    htmlInput.classList.add('focus');
 }
 
 function onBlur() {
     if(startValue !== content.value) emit('saveGivenState', savedState);
+
+    const htmlInput = document.querySelector('.tox-tinymce') as HTMLElement;
+    htmlInput.classList.remove('focus');
 }
 
 //? Didn't find a way to link the label to the editor because it uses a contenteditable p
diff --git a/src/global.scss b/src/global.scss
index 3d62f2c01c6ac72fb16ae031f8f9a41ce2db1e4b..f0e5067088592e4b1f1801637f7741dac8f1183c 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -493,6 +493,12 @@ g.selected {
 // TinyMCE Editor
 .tox-tinymce {
   margin-bottom: 1.5rem;
+  border: 1px solid var(--border) !important;
+
+  &.focus {
+    border: 1px solid var(--editor-blue) !important;
+    box-shadow: 0 1px 8px 0 var(--editor-blue-shadow);
+  }
 }
 
 .tox-statusbar {
@@ -509,10 +515,11 @@ g.selected {
 
 [id^="tiny-vue_"] {
   height: 340px;
-  border: 2px solid var(--border);
+  border: 1px solid var(--border);
   border-radius: 8px;
   resize: none;
   margin-bottom: 1.5rem;
+  padding: 4rem 1rem 1rem 1rem;
 }
 
 .badge-notification {