a.diff

diff --git a/src/components/Editor/Editor.css b/src/components/Editor/Editor.css
index 12f2ed8..ef80614 100644
--- a/src/components/Editor/Editor.css
+++ b/src/components/Editor/Editor.css
@@ -55,17 +55,17 @@ html[dir="rtl"] .editor-mount {
   width: 60px !important;
   height: 13px;
   left: -57px !important;
-  background-color: var(--theme-highlight-blue) !important;
+  background-color: #e6e9eb !important;
   mask: url(/images/breakpoint.svg) no-repeat;
   mask-size: 100%;
   mask-position: 0 1px;
-  opacity: 0.8;
+  /* opacity: 0.8; */
 }
 
 :not(.empty-line):not(.new-breakpoint)
   > .CodeMirror-gutter-wrapper:hover
   > .CodeMirror-linenumber {
-  color: white;
+  /* color: white !important; */
   left: auto !important;
   right: 4px;
 }

b.diff

diff --git a/src/components/Editor/Editor.css b/src/components/Editor/Editor.css
index 12f2ed8..b607da7 100644
--- a/src/components/Editor/Editor.css
+++ b/src/components/Editor/Editor.css
@@ -52,22 +52,22 @@ html[dir="rtl"] .editor-mount {
 }
 
 :not(.empty-line):not(.new-breakpoint) > .CodeMirror-gutter-wrapper:hover {
-  width: 60px !important;
+  width: 29px !important;
   height: 13px;
-  left: -57px !important;
-  background-color: var(--theme-highlight-blue) !important;
-  mask: url(/images/breakpoint.svg) no-repeat;
-  mask-size: 100%;
-  mask-position: 0 1px;
-  opacity: 0.8;
+  /* left: -57px !important; */
+  background-color: #e6e9eb !important;
+  /* mask: url(/images/breakpoint.svg) no-repeat; */
+  /* mask-size: 100%; */
+  /* mask-position: 0 1px; */
+  /* opacity: 0.8; */
 }
 
 :not(.empty-line):not(.new-breakpoint)
   > .CodeMirror-gutter-wrapper:hover
   > .CodeMirror-linenumber {
-  color: white;
-  left: auto !important;
-  right: 4px;
+  /* color: white !important; */
+  /* left: auto !important; */
+  /* right: 4px; */
 }
 
 .editor-wrapper .breakpoints {

c.diff

diff --git a/src/components/Editor/Editor.css b/src/components/Editor/Editor.css
index 12f2ed8..c702663 100644
--- a/src/components/Editor/Editor.css
+++ b/src/components/Editor/Editor.css
@@ -54,12 +54,11 @@ html[dir="rtl"] .editor-mount {
 :not(.empty-line):not(.new-breakpoint) > .CodeMirror-gutter-wrapper:hover {
   width: 60px !important;
   height: 13px;
-  left: -57px !important;
-  background-color: var(--theme-highlight-blue) !important;
+  left: -55px !important;
+  background-color: #328fec !important;
   mask: url(/images/breakpoint.svg) no-repeat;
   mask-size: 100%;
   mask-position: 0 1px;
-  opacity: 0.8;
 }
 
 :not(.empty-line):not(.new-breakpoint)
@@ -67,7 +66,7 @@ html[dir="rtl"] .editor-mount {
   > .CodeMirror-linenumber {
   color: white;
   left: auto !important;
-  right: 4px;
+  right: 6px;
 }
 
 .editor-wrapper .breakpoints {
@@ -117,6 +116,11 @@ html[dir="rtl"] .editor-mount {
   border: 1px solid #00b6ff;
 }
 
+.breakpoint {
+  position: absolute;
+  right: -2px;
+}
+
 .editor.new-breakpoint.folding-enabled svg {
   right: -16px;
 }