diff --git a/projects/common/components/marking-bar/marking-button.component.ts b/projects/common/components/marking-bar/marking-button.component.ts
index ef6be9fd54be87a3509ceae17e70f4a1261bb668..d09610b30d009fd31e9d7c87893d4e22c6e29652 100644
--- a/projects/common/components/marking-bar/marking-button.component.ts
+++ b/projects/common/components/marking-bar/marking-button.component.ts
@@ -7,17 +7,23 @@ import {
   template: `
     <button type="button"
             class="marking-button"
-            [class.selected]=selected
+            [style.border-color]="selected ? 'black' : color"
             mat-mini-fab
             [style.background-color]="color"
             (mousedown)="$event.stopPropagation();"
             (click)="selected = !selected; selectedChanged.emit({ selected, mode, color })">
-      <mat-icon *ngIf="mode === 'mark'">border_color</mat-icon>
-      <mat-icon *ngIf="mode === 'delete'" svgIcon="rubber-black"></mat-icon>
+      <mat-icon *ngIf="mode === 'mark'"
+                class="marking-icon">border_color
+      </mat-icon>
+      <mat-icon *ngIf="mode === 'delete'"
+                class="marking-icon"
+                svgIcon="rubber-black">
+      </mat-icon>
     </button>`,
   styles: [
-    '.marking-button {color: #333; margin-left: 5px; margin-top: 2px}',
-    '.selected {outline: 2px solid black}']
+    '.marking-button {color: #333; margin-left: 5px; margin-top: 2px; border: 2px solid;}',
+    '.marking-icon {margin-top: -4px}'
+  ]
 })
 export class MarkingButtonComponent {
   @Input() selected!: boolean;