diff --git a/packages/uhk-common/src/config-serializer/config-items/macro-action/mouse-button-macro-action.ts b/packages/uhk-common/src/config-serializer/config-items/macro-action/mouse-button-macro-action.ts
index 87ca695c..c3f47168 100644
--- a/packages/uhk-common/src/config-serializer/config-items/macro-action/mouse-button-macro-action.ts
+++ b/packages/uhk-common/src/config-serializer/config-items/macro-action/mouse-button-macro-action.ts
@@ -3,9 +3,9 @@ import { UhkBuffer } from '../../uhk-buffer';
 import { MacroAction, MacroActionId, MacroMouseSubAction, macroActionType } from './macro-action';
 
 export enum MouseButtons {
-    Left = 1 << 0,
-    Middle = 1 << 1,
-    Right = 1 << 2
+    Left = 0,
+    Right = 1,
+    Middle = 2
 }
 
 export interface JsObjectMouseButtonMacroAction {
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html
index 9e9dca6f..608393e1 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html
+++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html
@@ -93,10 +93,17 @@
             <h4 *ngIf="activeTab === TabName.Hold">Hold mouse button</h4>
             <h4 *ngIf="activeTab === TabName.Release">Release mouse button</h4>
             <div class="btn-group">
-                <button *ngFor="let buttonLabel of buttonLabels; let buttonIndex = index"
-                        class="btn btn-default"
-                        [class.btn-primary]="hasButton(buttonIndex)"
-                        (click)="setMouseClick(buttonIndex)">{{buttonLabel}}
+                <button class="btn btn-default"
+                        [class.btn-primary]="hasButton(MouseButtons.Left)"
+                        (click)="setMouseClick(MouseButtons.Left)">Left
+                </button>
+                <button class="btn btn-default"
+                        [class.btn-primary]="hasButton(MouseButtons.Middle)"
+                        (click)="setMouseClick(MouseButtons.Middle)">Middle
+                </button>
+                <button class="btn btn-default"
+                        [class.btn-primary]="hasButton(MouseButtons.Right)"
+                        (click)="setMouseClick(MouseButtons.Right)">Right
                 </button>
             </div>
         </div>
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
index fb8d4d40..58a96495 100644
--- a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
+++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
@@ -1,10 +1,11 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 
 import {
+    MacroMouseSubAction,
+    MouseButtons,
     MouseButtonMacroAction,
     MoveMouseMacroAction,
-    ScrollMouseMacroAction,
-    MacroMouseSubAction
+    ScrollMouseMacroAction
 } from 'uhk-common';
 import { Tab } from '../../../../popover/tab';
 import { MacroBaseComponent } from '../macro-base.component';
@@ -33,6 +34,7 @@ export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit
     @ViewChild('tab') selectedTab: Tab;
 
     /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
+    MouseButtons = MouseButtons;
     TabName = TabName;
     /* tslint:enable:variable-name */
     activeTab: TabName;
diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts b/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts
index 7323662f..6a7675c7 100644
--- a/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts
+++ b/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts
@@ -5,6 +5,7 @@ import {
     KeyMacroAction,
     KeyModifiers,
     MacroAction,
+    MouseButtons,
     MouseButtonMacroAction,
     MoveMouseMacroAction,
     ScrollMouseMacroAction,
@@ -197,12 +198,11 @@ export class MacroItemComponent implements OnInit, OnChanges {
             this.title = 'Release mouse button: ';
         }
 
-        const buttonLabels: string[] = ['Left', 'Middle', 'Right'];
         const selectedButtons: boolean[] = action.getMouseButtons();
         const selectedButtonLabels: string[] = [];
         selectedButtons.forEach((isSelected, idx) => {
-            if (isSelected && buttonLabels[idx]) {
-                selectedButtonLabels.push(buttonLabels[idx]);
+            if (isSelected && MouseButtons[idx]) {
+                selectedButtonLabels.push(MouseButtons[idx]);
             }
         });
         this.title += selectedButtonLabels.join(', ');