diff --git a/src/components/popover/tab/macro-item.component.scss b/src/components/popover/tab/macro-item.component.scss
new file mode 100644
index 00000000..c8dde5ff
--- /dev/null
+++ b/src/components/popover/tab/macro-item.component.scss
@@ -0,0 +1,14 @@
+:host {
+    display: flex;
+    flex-shrink: 0;
+    
+    icon {
+        margin: 0 5px;
+    }
+    
+    div {
+        display: flex;
+        flex: 1;
+    }
+    
+}
\ No newline at end of file
diff --git a/src/components/popover/tab/macro-item.component.ts b/src/components/popover/tab/macro-item.component.ts
new file mode 100644
index 00000000..cdc75fc0
--- /dev/null
+++ b/src/components/popover/tab/macro-item.component.ts
@@ -0,0 +1,136 @@
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { NgSwitch, NgSwitchWhen} from '@angular/common';
+
+import {MacroAction} from '../../../../config-serializer/config-items/MacroAction';
+import {DelayMacroAction} from '../../../../config-serializer/config-items/DelayMacroAction';
+import {HoldKeyMacroAction} from '../../../../config-serializer/config-items/HoldKeyMacroAction';
+import {HoldModifiersMacroAction} from '../../../../config-serializer/config-items/HoldModifiersMacroAction';
+import {HoldMouseButtonsMacroAction} from '../../../../config-serializer/config-items/HoldMouseButtonsMacroAction';
+import {MoveMouseMacroAction} from '../../../../config-serializer/config-items/MoveMouseMacroAction';
+import {PressKeyMacroAction} from '../../../../config-serializer/config-items/PressKeyMacroAction';
+import {PressModifiersMacroAction} from '../../../../config-serializer/config-items/PressModifiersMacroAction';
+import {PressMouseButtonsMacroAction} from '../../../../config-serializer/config-items/PressMouseButtonsMacroAction';
+import {ReleaseKeyMacroAction} from '../../../../config-serializer/config-items/ReleaseKeyMacroAction';
+import {ReleaseModifiersMacroAction} from '../../../../config-serializer/config-items/ReleaseModifiersMacroAction';
+import {ReleaseMouseButtonsMacroAction} from '../../../../config-serializer/config-items/ReleaseMouseButtonsMacroAction';
+import {ScrollMouseMacroAction} from '../../../../config-serializer/config-items/ScrollMouseMacroAction';
+import {TextMacroAction} from '../../../../config-serializer/config-items/TextMacroAction';
+
+import {IconComponent} from '../widgets/icon.component';
+
+import {KeyModifiers}  from '../../../../config-serializer/config-items/KeystrokeModifiersAction';
+
+@Component({
+    moduleId: module.id,
+    selector: 'macro-item',
+    template:
+    `
+         <icon *ngIf="moveable" name="option-vertical"></icon>
+         <icon [name]="iconName"></icon>
+         <div> {{ title }} </div>
+         <icon *ngIf="deletable" name="trash"></icon>
+         <icon *ngIf="editable" name="pencil"></icon>
+    `,
+    styles: [require('./macro-item.component.scss')],
+    directives: [NgSwitch, NgSwitchWhen, IconComponent]
+})
+export class MacroItemComponent implements OnInit, OnChanges {
+
+    @Input() macroAction: MacroAction;
+    @Input() editable: boolean;
+    @Input() deletable: boolean;
+    @Input() moveable: boolean;
+
+    private iconName: string;
+    private title: string;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.updateView();
+    }
+
+    ngOnChanges() {
+        // TODO: check if macroAction changed
+        this.updateView();
+    }
+
+    private updateView(): void {
+
+        this.title = this.macroAction.constructor.name;
+        if (this.macroAction instanceof MoveMouseMacroAction) {
+            this.iconName = 'mouse-pointer';
+            this.title = 'Move pointer';
+
+            let action: MoveMouseMacroAction = this.macroAction as MoveMouseMacroAction;
+            let needAnd: boolean;
+            if (Math.abs(action.x) > 0) {
+                this.title += ` by ${Math.abs(action.x)}px ${action.x > 0 ? 'left' : 'right'}ward`;
+                needAnd = true;
+            }
+            if (Math.abs(action.y) > 0) {
+                this.title += ` ${needAnd ? 'and' : 'by'} ${Math.abs(action.y)}px ${action.y > 0 ? 'down' : 'up'}ward`;
+            }
+        } else if (this.macroAction instanceof DelayMacroAction) {
+            this.iconName = 'clock';
+            let action: DelayMacroAction = this.macroAction as DelayMacroAction;
+            this.title = `Delay of ${action.delay}ms`;
+        } else if (this.macroAction instanceof TextMacroAction) {
+            let action: TextMacroAction = this.macroAction as TextMacroAction;
+            this.title = `Write text: ${action.text}`;
+        } else if (this.macroAction instanceof ScrollMouseMacroAction) {
+            this.iconName = 'mouse-pointer';
+            this.title = 'Scroll';
+            let action: ScrollMouseMacroAction = this.macroAction as ScrollMouseMacroAction;
+            let needAnd: boolean;
+            if (Math.abs(action.x) > 0) {
+                this.title += ` by ${Math.abs(action.x)}px ${action.x > 0 ? 'left' : 'right'}ward`;
+                needAnd = true;
+            }
+            if (Math.abs(action.y) > 0) {
+                this.title += ` ${needAnd ? 'and' : 'by'} ${Math.abs(action.y)}px ${action.y > 0 ? 'down' : 'up'}ward`;
+            }
+        } else if (this.macroAction instanceof PressModifiersMacroAction) {
+            this.iconName = 'square';
+            let action: PressModifiersMacroAction = this.macroAction as PressModifiersMacroAction;
+            if (action.modifierMask === 0) {
+                this.title = 'Invalid PressModifiersMacroAction!';
+                return;
+            }
+            this.title = 'Press: ';
+            for (let i = KeyModifiers.leftCtrl; i !== KeyModifiers.rightCtrl; i <<= 1) {
+                if (action.isModifierActive(i)) {
+                    this.title += ' ' + KeyModifiers[i];
+                }
+            }
+        } else if (this.macroAction instanceof HoldModifiersMacroAction) {
+            this.iconName = 'square';
+            let action: HoldModifiersMacroAction = this.macroAction as HoldModifiersMacroAction;
+            if (action.modifierMask === 0) {
+                this.title = 'Invalid HoldModifiersMacroAction!';
+                return;
+            }
+            this.title = 'Hold: ';
+            for (let i = KeyModifiers.leftCtrl; i !== KeyModifiers.rightCtrl; i <<= 1) {
+                if (action.isModifierActive(i)) {
+                    this.title += ' ' + KeyModifiers[i];
+                }
+            }
+        } else if (this.macroAction instanceof ReleaseModifiersMacroAction) {
+            this.iconName = 'square';
+            let action: ReleaseModifiersMacroAction = this.macroAction as ReleaseModifiersMacroAction;
+            if (action.modifierMask === 0) {
+                this.title = 'Invalid ReleaseModifiersMacroAction!';
+                return;
+            }
+            this.title = 'Release: ';
+            for (let i = KeyModifiers.leftCtrl; i !== KeyModifiers.rightCtrl; i <<= 1) {
+                if (action.isModifierActive(i)) {
+                    this.title += ' ' + KeyModifiers[i];
+                }
+            }
+        }
+        // TODO: finish for all MacroAction
+    }
+
+}
diff --git a/src/components/popover/tab/macro-tab.component.scss b/src/components/popover/tab/macro-tab.component.scss
new file mode 100644
index 00000000..e9315cac
--- /dev/null
+++ b/src/components/popover/tab/macro-tab.component.scss
@@ -0,0 +1,43 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    .macro-selector {
+        display: flex;
+        margin-top: 2px;
+        
+        b {
+            margin-right: 7px;
+        }
+        
+        select {
+            flex: 1;
+        }
+    }
+    
+    .macro-action-container {
+        display: flex;
+        flex-direction: column;
+        min-height: 200px;
+        max-height: 300px;
+        margin: 20px 0px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        
+        macro-item {
+            border: 1px solid #ddd;
+            padding: 10px;
+            margin-bottom: -1px;
+        }
+
+        macro-item:first-child {
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+        }
+
+        macro-item:last-child {
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+            margin-bottom: 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/popover/tab/macro-tab.component.ts b/src/components/popover/tab/macro-tab.component.ts
index 5ddab7bb..a82c0552 100644
--- a/src/components/popover/tab/macro-tab.component.ts
+++ b/src/components/popover/tab/macro-tab.component.ts
@@ -1,27 +1,60 @@
 import { Component, OnInit } from '@angular/core';
 
+import { UhkConfigurationService } from '../../../services/uhk-configuration.service';
+import { Macro } from '../../../../config-serializer/config-items/Macro';
+import { PlayMacroAction } from '../../../../config-serializer/config-items/PlayMacroAction';
+
 import { KeyActionSaver } from '../key-action-saver';
-import { KeyAction } from '../../../../config-serializer/config-items/KeyAction';
+import { MacroItemComponent } from './macro-item.component';
 
 @Component({
     moduleId: module.id,
     selector: 'macro-tab',
     template:
     `
-        Macro
-    `
+        <div class="macro-selector">
+            <b> Play macro: </b>
+            <select [(ngModel)]="selectedMacroIndex">
+                <option [ngValue]="-1"> Select macro </option>
+                <option *ngFor="let macro of macros; let index=index" [ngValue]="index"> {{ macro.name }} </option>
+            </select>
+        </div>
+        <div class="macro-action-container">
+            <template [ngIf]="selectedMacroIndex >= 0">
+                <macro-item *ngFor="let macroAction of macros[selectedMacroIndex].macroActions.elements"
+                            [macroAction]="macroAction">
+                </macro-item>
+            </template>
+        </div>
+    `,
+    styles: [require('./macro-tab.component.scss')],
+    directives: [MacroItemComponent]
 })
 export class MacroTabComponent implements OnInit, KeyActionSaver {
-    constructor() { }
 
-    ngOnInit() { }
+    private macros: Macro[];
+    private selectedMacroIndex: number;
 
-    keyActionValid(): boolean {
-        return false;
+    constructor(private uhkConfigurationService: UhkConfigurationService) {
+        this.macros = [];
+        this.selectedMacroIndex = -1;
     }
 
-    toKeyAction(): KeyAction {
-        return undefined;
+    ngOnInit() {
+        this.macros = this.uhkConfigurationService.getUhkConfiguration().macros.elements;
+    }
+
+    keyActionValid(): boolean {
+        return this.selectedMacroIndex !== -1;
+    }
+
+    toKeyAction(): PlayMacroAction {
+        if (!this.keyActionValid()) {
+            throw new Error('KeyAction is not valid. No selected macro!');
+        }
+        let keymapAction = new PlayMacroAction();
+        keymapAction.macroId = this.macros[this.selectedMacroIndex].id;
+        return keymapAction;
     }
 
 }