diff --git a/packages/decap-cms-core/src/components/Editor/EditorInterface.js b/packages/decap-cms-core/src/components/Editor/EditorInterface.js
index e54101b9441a..7fb49ae0efac 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorInterface.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorInterface.js
@@ -47,24 +47,29 @@ function ReactSplitPaneGlobalStyles() {
     <Global
       styles={css`
         .Resizer.vertical {
-          width: 21px;
+          width: 2px;
           cursor: col-resize;
           position: relative;
-          transition: background-color ${transitions.main};
+          background: none;
 
           &:before {
             content: '';
             width: 2px;
             height: 100%;
             position: relative;
-            left: 10px;
             background-color: ${colors.textFieldBorder};
             display: block;
+            z-index: 10;
+            transition: background-color ${transitions.main};
           }
 
           &:hover,
           &:active {
-            background-color: ${colorsRaw.GrayLight};
+            &:before {
+              width: 4px;
+              left: -1px;
+              background-color: ${colorsRaw.blue};
+            }
           }
         }
       `}