diff --git a/app/components/account/details/account-details.html b/app/components/account/details/account-details.html
index 922c2fb640..d096d018be 100644
--- a/app/components/account/details/account-details.html
+++ b/app/components/account/details/account-details.html
@@ -1,16 +1,14 @@
 <bl-loading [status]="data.status">
     <div *ngIf="account">
         <md-card class="overview">
-            <div class="main">
-                <md-card-title-group style="margin: 0px;">
-                    <div style="align-items:center;">
-                        <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
-                    </div>
-                    <div style="margin-left:12px; margin-right:auto;">
-                        <md-card-title>{{account.name}}</md-card-title>
-                        <md-card-subtitle>{{account.properties.accountEndpoint}}</md-card-subtitle>
-                    </div>
-                </md-card-title-group>
+            <div class="actions">
+                <bl-action-btn-group>
+                    <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
+                </bl-action-btn-group>
+            </div>
+            <div class="content">
+                <md-card-title>{{account.name}}</md-card-title>
+                <md-card-subtitle>{{account.properties.accountEndpoint}}</md-card-subtitle>
             </div>
             <div class="storage-account">
                 <bl-storage-account-card [account]="account">
diff --git a/app/components/base/buttons/action-button.component.ts b/app/components/base/buttons/action-button.component.ts
new file mode 100644
index 0000000000..95f37d5c9d
--- /dev/null
+++ b/app/components/base/buttons/action-button.component.ts
@@ -0,0 +1,75 @@
+import { Component, EventEmitter, HostBinding, HostListener, Input, OnChanges, Output } from "@angular/core";
+
+import "./action-buttons.scss";
+
+type ButtonType = "normal" | "round";
+type ButtonColor = "primary" | "danger" | "warn";
+
+@Component({
+    selector: "bl-action-btn",
+    template: `
+        <span class="action-btn" [mdTooltip]="title" mdTooltipPosition="right">
+            <i [class]="icon"></i>
+            <ng-content></ng-content>
+        </span>
+    `,
+})
+export class ActionButtonComponent implements OnChanges {
+    @Output()
+    public action = new EventEmitter();
+
+    @HostBinding("tabindex")
+    public tabindex = "0";
+
+    @Input()
+    public icon: string;
+
+    @Input()
+    public title: string;
+
+    @Input()
+    @HostBinding("class.disabled")
+    public disabled = false;
+
+    @Input()
+    @HostBinding("attr.type")
+    public type: ButtonType = "normal";
+
+    @Input()
+    @HostBinding("attr.color")
+    public color: ButtonColor = "primary";
+
+    @Input()
+    public routerLink: string;
+
+    @HostListener("click")
+    public handleAction() {
+        if (this.disabled) {
+            return;
+        }
+        this.action.emit();
+    }
+
+    @HostListener("keydown", ["$event"])
+    public onkeydown(event: KeyboardEvent) {
+        if (event.code === "Space" || event.code === "Enter") {
+            this.handleAction();
+            event.preventDefault();
+        }
+    }
+
+    public ngOnChanges(changes) {
+        if ("disabled" in changes) {
+            this.tabindex = this.disabled ? "-1" : "0";
+        }
+    }
+}
+
+@Component({
+    selector: "bl-action-btn-group",
+    template: `
+        <ng-content></ng-content>
+    `,
+})
+export class ActionButtonGroupComponent {
+}
diff --git a/app/components/base/buttons/action-buttons.scss b/app/components/base/buttons/action-buttons.scss
new file mode 100644
index 0000000000..87bfba5a5c
--- /dev/null
+++ b/app/components/base/buttons/action-buttons.scss
@@ -0,0 +1,74 @@
+@import "app/styles/variables";
+
+bl-action-btn-group {
+    text-align: center;
+    border-right: 1px solid #d5d5d5;
+    display: block;
+
+    bl-action-btn {
+        border-bottom: 1px solid #d5d5d5;
+    }
+}
+
+bl-action-btn {
+    display: inline-block;
+    width: $action-btn-size;
+    height: $action-btn-size;
+    outline: none;
+    cursor: pointer;
+    font-size: 20px;
+    text-align: center;
+    vertical-align: middle;
+    line-height: $action-btn-size;
+
+    &.disabled[color] {
+        cursor: not-allowed;
+        color: #d5d5d5;
+        background: #f5f5f5;
+
+        &:hover {
+            color: #d5d5d5;
+            background: #f5f5f5;
+        }
+    }
+
+    &[type="normal"] {
+        // Nothing
+    }
+
+    &[type="round"] {
+        border-radius: 99%;
+    }
+
+    &[color="primary"] {
+        background: white;
+        color: map-get($md-prussian-blue, 500);
+
+        &:hover, &:focus {
+            background: $alto;
+            color: map-get($md-prussian-blue, 200);
+        }
+
+        &[type="round"] {
+            border: 1px solid #d5d5d5;
+        }
+    }
+
+    &[color="danger"] {
+        background: $red;
+        color: $whitesmoke;
+
+        &:hover, &:focus {
+            background: $red-dark;
+        }
+    }
+
+    &[color="warn"] {
+        background: $yellow;
+        color: $whitesmoke;
+
+        &:hover, &:focus {
+            background: $yellow-dark;
+        }
+    }
+}
diff --git a/app/components/base/buttons/buttons.component.ts b/app/components/base/buttons/buttons.component.ts
index 4f7e089d01..495ba1a8b4 100644
--- a/app/components/base/buttons/buttons.component.ts
+++ b/app/components/base/buttons/buttons.component.ts
@@ -1,30 +1,40 @@
-import { Component, Input } from "@angular/core";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 
 import { Job, JobState } from "app/models";
 
+export class BaseButton {
+    @Output()
+    public action = new EventEmitter();
+}
+
 @Component({
     selector: "bl-loading-button",
-    template: `<button md-raised-button color="primary">
-        <ng-content *ngIf="!loading"></ng-content>
-        <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
-    </button>`,
+    template: `
+        <bl-action-btn color="primary" (action)="action.emit()">
+            <ng-content *ngIf="!loading"></ng-content>
+            <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
+        </bl-action-btn>
+    `,
 })
-export class LoadingButtonComponent {
+export class LoadingButtonComponent extends BaseButton {
     @Input()
     public loading: boolean = false;
 }
 
 @Component({
     selector: "bl-clear-list-selection",
-    template: `<button md-mini-fab color="accent" (click)="onClick()" md-tooltip="Clear selection">
-        <i class="fa fa-check-square-o"></i>
-    </button>`,
+    template: `
+        <bl-action-btn color="accent" (action)="onClick()" md-tooltip="Clear selection">
+            <i class="fa fa-check-square-o"></i>
+        </bl-action-btn>
+    `,
 })
-export class ClearListSelectionButtonComponent {
+export class ClearListSelectionButtonComponent extends BaseButton {
     @Input()
     public list: any;
 
     public onClick() {
+        this.action.emit();
         this.list.clearSelection();
     }
 }
@@ -35,9 +45,9 @@ export class ClearListSelectionButtonComponent {
  */
 @Component({
     selector: "bl-add-button",
-    template: `<button md-button><i class="fa fa-plus"></i> {{title}}</button>`,
+    template: `<bl-action-btn icon="fa fa-plus" [title]="title" (action)="action.emit()"></bl-action-btn>`,
 })
-export class AddButtonComponent {
+export class AddButtonComponent extends BaseButton {
     @Input()
     public set title(value: string) {
         this._title = value;
@@ -51,9 +61,12 @@ export class AddButtonComponent {
 
 @Component({
     selector: "bl-add-task-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-plus"></i> {{title}}</button>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" [disabled]="!enabled" [title]="title" icon="fa fa-plus">
+        </bl-action-btn>
+    `,
 })
-export class AddTaskButtonComponent {
+export class AddTaskButtonComponent extends BaseButton {
     @Input()
     public job: Job;
 
@@ -79,9 +92,12 @@ export class AddTaskButtonComponent {
 
 @Component({
     selector: "bl-terminate-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-times"></i> Terminate</button>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" [disabled]="!enabled" icon="fa fa-stop" title="Terminate">
+        </bl-action-btn>
+    `,
 })
-export class TerminateButtonComponent {
+export class TerminateButtonComponent extends BaseButton {
     @Input()
     public entity: any;
 
@@ -95,9 +111,12 @@ export class TerminateButtonComponent {
 
 @Component({
     selector: "bl-delete-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-trash-o"></i> Delete</button>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" [disabled]="!enabled" title="Delete" icon="fa fa-trash-o">
+        </bl-action-btn>
+    `,
 })
-export class DeleteButtonComponent {
+export class DeleteButtonComponent extends BaseButton {
     @Input()
     public entity: any;
 
@@ -114,9 +133,13 @@ export class DeleteButtonComponent {
 
 @Component({
     selector: "bl-disable-button",
-    template: `<button md-button *ngIf="visible" [disabled]="!enabled"><i class="fa fa-pause"></i> Disable</button>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" *ngIf="visible" icon="fa fa-pause"
+            [disabled]="!enabled" title="Disable">
+        </bl-action-btn>
+    `,
 })
-export class DisableButtonComponent {
+export class DisableButtonComponent extends BaseButton {
     @Input()
     public job: Job;
 
@@ -134,9 +157,12 @@ export class DisableButtonComponent {
 
 @Component({
     selector: "bl-enable-button",
-    template: `<button md-button *ngIf="visible" [disabled]="!enabled"><i class="fa fa-play"></i> Enable</button>`,
+    template: `
+        <bl-action-btn *ngIf="visible" (action)="action.emit()" [disabled]="!enabled" title="Enable" icon="fa fa-play">
+        </bl-action-btn>
+    `,
 })
-export class EnableButtonComponent {
+export class EnableButtonComponent extends BaseButton {
     @Input()
     public job: Job;
 
@@ -151,9 +177,9 @@ export class EnableButtonComponent {
 
 @Component({
     selector: "bl-clone-button",
-    template: `<button md-button><i class="fa fa-clone"></i> {{title}}</button>`,
+    template: `<bl-action-btn (action)="action.emit()" [title]="title" icon="fa fa-clone"></bl-action-btn>`,
 })
-export class CloneButtonComponent {
+export class CloneButtonComponent extends BaseButton {
     @Input()
     public set title(value: string) {
         this._title = value;
@@ -167,9 +193,12 @@ export class CloneButtonComponent {
 
 @Component({
     selector: "bl-download-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-download"></i> Download</button>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" [disabled]="!enabled" title="Download" icon="fa fa-download">
+        </bl-action-btn>
+    `,
 })
-export class DownloadButtonComponent {
+export class DownloadButtonComponent extends BaseButton {
     @Input()
     public set enabled(value: boolean) {
         this._enabled = value;
@@ -183,14 +212,14 @@ export class DownloadButtonComponent {
 
 @Component({
     selector: "bl-resize-button",
-    template: `<button md-button><i class="fa fa-arrows-v"></i> Resize</button>`,
+    template: `<bl-action-btn (action)="action.emit()" title="Resize" icon="fa fa-arrows-v"></bl-action-btn>`,
 })
-export class ResizeButtonComponent {
+export class ResizeButtonComponent extends BaseButton {
 }
 
 @Component({
     selector: "bl-edit-button",
-    template: `<button md-button><i class="fa fa-pencil-square-o"></i> Edit</button>`,
+    template: `<bl-action-btn (action)="action.emit()" title="Edit" icon="fa fa-pencil-square-o"></bl-action-btn>`,
 })
-export class EditButtonComponent {
+export class EditButtonComponent extends BaseButton {
 }
diff --git a/app/components/base/buttons/buttons.module.ts b/app/components/base/buttons/buttons.module.ts
index 7fe1516e6f..5f99180764 100644
--- a/app/components/base/buttons/buttons.module.ts
+++ b/app/components/base/buttons/buttons.module.ts
@@ -5,6 +5,7 @@ import { RouterModule } from "@angular/router";
 
 import { SubmitButtonComponent } from "./submit-btn.component";
 
+import { ActionButtonComponent, ActionButtonGroupComponent } from "./action-button.component";
 import {
     AddButtonComponent,
     AddTaskButtonComponent,
@@ -21,6 +22,8 @@ import {
 } from "./buttons.component";
 
 const components = [
+    ActionButtonComponent,
+    ActionButtonGroupComponent,
     AddButtonComponent,
     AddTaskButtonComponent,
     ClearListSelectionButtonComponent,
diff --git a/app/components/base/list-and-show-layout/entity-details-list.html b/app/components/base/list-and-show-layout/entity-details-list.html
index c8dfac724f..d07a257848 100644
--- a/app/components/base/list-and-show-layout/entity-details-list.html
+++ b/app/components/base/list-and-show-layout/entity-details-list.html
@@ -7,13 +7,10 @@
 </div>
 <hr />
 <div class="context-button-bar">
-    <button *ngIf="showExpandButton" md-mini-fab color="primary" [routerLink]="baseLink" title="{{expandButtonHoverText}}">
-        <i class="fa fa-expand spin-hover"></i>
-    </button>
-    <bl-refresh-btn *ngIf="showRefreshButton" [refresh]="refresh" title="{{refreshButtonHoverText}}"></bl-refresh-btn>
-    <button *ngIf="showAddButton" (click)="onAdd($event)" md-mini-fab color="primary" title="{{addButtonHoverText}}">
-        <i class="fa fa-plus spin-hover"></i>
-    </button>
+    <bl-action-btn type="round" icon="fa fa-expand spin-hover" *ngIf="showExpandButton" color="primary" [routerLink]="baseLink"
+        title="{{expandButtonHoverText}}">
+    </bl-action-btn>
+    <bl-refresh-btn *ngIf="showRefreshButton" type="round" [refresh]="refresh" title="{{refreshButtonHoverText}}"></bl-refresh-btn>
     <ng-content select="[bl-list-buttons]"></ng-content>
 </div>
 <ng-content></ng-content>
diff --git a/app/components/base/list-and-show-layout/list-and-show-layout.html b/app/components/base/list-and-show-layout/list-and-show-layout.html
index 2027817682..c2b2d0bbda 100644
--- a/app/components/base/list-and-show-layout/list-and-show-layout.html
+++ b/app/components/base/list-and-show-layout/list-and-show-layout.html
@@ -16,12 +16,11 @@
                 </div>
                 <hr />
                 <div class="context-button-bar left">
-                    <button md-mini-fab color="warn" *ngIf="deleteSelectedIsEnabled && selectedItems.length > 0" (click)="deleteSelectedItems()">
-                        <i class="fa fa-trash"></i>
-                    </button>
+                    <bl-action-btn type="round" icon="fa fa-trash" color="danger" *ngIf="deleteSelectedIsEnabled && selectedItems.length > 0" (action)="deleteSelectedItems()">
+                    </bl-action-btn>
                 </div>
                 <div class="context-button-bar right">
-                    <bl-refresh-btn [refresh]="refresh" *ngIf="refresh"></bl-refresh-btn>
+                    <bl-refresh-btn [refresh]="refresh" *ngIf="refresh" type="round"></bl-refresh-btn>
                     <ng-content select="[bl-list-buttons]"></ng-content>
                 </div>
             </div>
diff --git a/app/components/base/refresh-btn/refresh-btn.component.ts b/app/components/base/refresh-btn/refresh-btn.component.ts
index 5ac18a689a..f1ea3ea8c0 100644
--- a/app/components/base/refresh-btn/refresh-btn.component.ts
+++ b/app/components/base/refresh-btn/refresh-btn.component.ts
@@ -26,6 +26,9 @@ export class RefreshButtonComponent {
     @Input()
     public refresh: () => Observable<any>;
 
+    @Input()
+    public type: string = "normal";
+
     public status = RefreshStatus.Idle;
 
     public onClick() {
diff --git a/app/components/base/refresh-btn/refresh-btn.html b/app/components/base/refresh-btn/refresh-btn.html
index d9d8aefe32..a9d3ca7e34 100644
--- a/app/components/base/refresh-btn/refresh-btn.html
+++ b/app/components/base/refresh-btn/refresh-btn.html
@@ -1,4 +1,4 @@
-<button md-mini-fab color="secondary" title="Refresh" (click)="onClick()" [disabled]="status !== statuses.Idle">
+<bl-action-btn type="round" [type]="type" title="Refresh" (action)="onClick()" [disabled]="status !== statuses.Idle">
     <span class="icon-container" [ngSwitch]="status">
         <i class="fa fa-refresh shake-hover"    *ngSwitchCase="statuses.Idle"></i>
         <i class="fa fa-refresh fa-spin"        *ngSwitchCase="statuses.Refreshing"></i>
@@ -7,4 +7,4 @@
         </span>
         <i class="fa fa-warning"                *ngSwitchCase="statuses.Failed"></i>
     </span>
-</button>
+</bl-action-btn>
diff --git a/app/components/job/details/job-details.html b/app/components/job/details/job-details.html
index ff4d685f58..a1c2d63cd8 100644
--- a/app/components/job/details/job-details.html
+++ b/app/components/job/details/job-details.html
@@ -1,34 +1,28 @@
 <bl-loading [status]="data.newDataStatus | async">
     <div *ngIf="job">
         <md-card class="overview">
-            <div class="main-content">
+            <div class="actions">
+                <bl-action-btn-group>
+                    <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
+                    <bl-add-task-button title="Add task" [job]="job" (action)="addTask()"></bl-add-task-button>
+                    <bl-terminate-button [entity]="job" (action)="terminateJob()"></bl-terminate-button>
+                    <bl-delete-button [entity]="job" (action)="deleteJob()"></bl-delete-button>
+                    <bl-disable-button [job]="job" (action)="disableJob()"></bl-disable-button>
+                    <bl-enable-button [job]="job" (action)="enableJob()"></bl-enable-button>
+                    <bl-clone-button (action)="cloneJob()"></bl-clone-button>
+                </bl-action-btn-group>
+            </div>
+            <div class="content">
                 <div class="info">
-                    <md-card-title-group style="margin: 0px;">
-                        <div style="align-items:center;">
-                            <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
-                        </div>
-                        <div style="margin-left:12px; margin-right:auto;">
-                            <md-card-title>{{decorator.id}}</md-card-title>
-                            <md-card-subtitle><i class="fa" [ngClass]="decorator.stateIcon"></i> {{decorator.state}}</md-card-subtitle>
-                        </div>
-                    </md-card-title-group>
-                    <div class="additional-info">
-                        Pool: <a [routerLink]="['/pools', job.poolId]">{{job.poolId}}</a>
-                        <bl-tags [tags]="job.tags" [editable]="true" [save]="updateTags" noTagsMessage="No tags."></bl-tags>
-                    </div>
+                    <md-card-title>{{decorator.id}}</md-card-title>
+                    <md-card-subtitle><i class="fa" [ngClass]="decorator.stateIcon"></i> {{decorator.state}}</md-card-subtitle>
+                    Pool: <a [routerLink]="['/pools', job.poolId]">{{job.poolId}}</a>
+                    <bl-tags [tags]="job.tags" [editable]="true" [save]="updateTags" noTagsMessage="No tags."></bl-tags>
                 </div>
-                <md-card-content>
-                    <bl-job-progress-status [job]="job" [poolId]="job.poolId"></bl-job-progress-status>
-                </md-card-content>
             </div>
-            <md-card-actions layout="row" layout-align="end center">
-                <bl-add-task-button title="Add task" [job]="job" (click)="addTask()"></bl-add-task-button>
-                <bl-terminate-button [entity]="job" (click)="terminateJob()"></bl-terminate-button>
-                <bl-delete-button [entity]="job" (click)="deleteJob()"></bl-delete-button>
-                <bl-disable-button [job]="job" (click)="disableJob()"></bl-disable-button>
-                <bl-enable-button [job]="job" (click)="enableJob()"></bl-enable-button>
-                <bl-clone-button (click)="cloneJob()"></bl-clone-button>
-            </md-card-actions>
+            <div class="tile">
+                <bl-job-progress-status [job]="job" [poolId]="job.poolId"></bl-job-progress-status>
+            </div>
         </md-card>
         <bl-job-error-display [job]="job"></bl-job-error-display>
         <md-card class="details">
diff --git a/app/components/job/home/job-home.html b/app/components/job/home/job-home.html
index 57b6aeaef3..13dda39be1 100644
--- a/app/components/job/home/job-home.html
+++ b/app/components/job/home/job-home.html
@@ -1,8 +1,7 @@
 <bl-list-and-show-layout #layout (listScrolledToBottom)="jobList.onScrollToBottom()" [list]="jobList">
     <div bl-list-buttons>
-        <button md-mini-fab color="primary" title="Add a job" (click)="addJob()">
-            <i class="fa fa-plus spin-hover"></i>
-        </button>
+        <bl-action-btn color="primary" type="round" icon="fa fa-plus spin-hover" title="Add a job" (action)="addJob()">
+        </bl-action-btn>
     </div>
     <div bl-list-content>
         <bl-focus-section>
diff --git a/app/components/node/details/node-details.html b/app/components/node/details/node-details.html
index db3add65d4..44dc876c77 100644
--- a/app/components/node/details/node-details.html
+++ b/app/components/node/details/node-details.html
@@ -1,23 +1,17 @@
 <bl-loading [status]="data.newDataStatus | async">
     <div *ngIf="pool && node">
         <md-card class="overview">
-            <md-card-title-group style="margin: 0px;">
-                <div style="align-items:center;">
+            <div class="actions">
+                <bl-action-btn-group>
                     <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
-                </div>
-                <div style="margin-left:12px; margin-right:auto;">
-                    <md-card-title>{{node.id}}</md-card-title>
-                    <md-card-subtitle> {{node.state}}</md-card-subtitle>
-                </div>
-            </md-card-title-group>
-            <md-card-content>
+                    <bl-action-btn (action)="connect()" icon="fa fa-plug"></bl-action-btn>
+                </bl-action-btn-group>
+            </div>
+            <div class="content">
+                <md-card-title>{{node.id}}</md-card-title>
+                <md-card-subtitle> {{node.state}}</md-card-subtitle>
                 <p>Pool: {{poolId}}</p>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center">
-                <button md-button (click)="connect()">
-                    <i class="fa fa-plug"></i> Connect
-                </button>
-            </md-card-actions>
+            </div>
         </md-card>
         <md-card class="details">
             <bl-tab-group>
diff --git a/app/components/pool/details/pool-details.html b/app/components/pool/details/pool-details.html
index f801a98d83..4ae8e67a41 100644
--- a/app/components/pool/details/pool-details.html
+++ b/app/components/pool/details/pool-details.html
@@ -1,29 +1,25 @@
 <bl-loading [status]="data.newDataStatus | async">
     <div *ngIf="pool && poolDecorator">
         <md-card class="overview">
-            <md-card-title-group style="margin: 0px;">
-                <div style="align-items:center;">
+            <div class="actions">
+                <bl-action-btn-group>
                     <bl-refresh-btn [refresh]="refreshPool"></bl-refresh-btn>
-                </div>
-                <div style="margin-left:12px; margin-right:auto;">
-                    <md-card-title>{{pool.id}}</md-card-title>
-                    <md-card-subtitle>{{pool.vmSize}}, {{pool.allocationState}}</md-card-subtitle>
-                </div>
-                <div>
-                    <bl-pool-nodes-preview [pool]="pool" size="large"></bl-pool-nodes-preview>
-                </div>
-            </md-card-title-group>
-            <md-card-content>
+                    <bl-add-button title="Add job" (action)="addJob()"></bl-add-button>
+                    <bl-resize-button (action)="resizePool()"></bl-resize-button>
+                    <bl-clone-button (action)="clonePool()"></bl-clone-button>
+                    <bl-delete-button [entity]="pool" (action)="deletePool()"></bl-delete-button>
+                </bl-action-btn-group>
+            </div>
+            <div class="content">
+                <md-card-title>{{pool.id}}</md-card-title>
+                <md-card-subtitle>{{pool.vmSize}}, {{pool.allocationState}}</md-card-subtitle>
                 <p>Last resized {{poolDecorator.lastResized}}</p>
                 <p><i class="fa fa-{{poolDecorator.poolOsIcon}}" aria-hidden="true"></i> {{poolDecorator.poolOs}}</p>
                 <bl-tags [tags]="pool.tags" [editable]="true" [save]="updateTags" noTagsMessage="No tags."></bl-tags>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center">
-                <bl-add-button title="Add job" (click)="addJob()"></bl-add-button>
-                <bl-resize-button (click)="resizePool()"></bl-resize-button>
-                <bl-clone-button (click)="clonePool()"></bl-clone-button>
-                <bl-delete-button [entity]="pool" (click)="deletePool()"></bl-delete-button>
-            </md-card-actions>
+            </div>
+            <div style="padding: 10px">
+                <bl-pool-nodes-preview [pool]="pool" size="large"></bl-pool-nodes-preview>
+            </div>
         </md-card>
         <bl-pool-error-display [pool]="pool"></bl-pool-error-display>
         <md-card class="details">
diff --git a/app/components/pool/home/pool-home.html b/app/components/pool/home/pool-home.html
index 98dee76a51..bd0fea300c 100644
--- a/app/components/pool/home/pool-home.html
+++ b/app/components/pool/home/pool-home.html
@@ -1,8 +1,7 @@
 <bl-list-and-show-layout #layout (listScrolledToBottom)="poolList.onScrollToBottom()" [list]="poolList">
     <div bl-list-buttons>
-        <button md-mini-fab color="primary" title="Add a pool" (click)="addPool()">
-            <i class="fa fa-plus spin-hover"></i>
-        </button>
+        <bl-action-btn color="primary" type="round" icon="fa fa-plus spin-hover" title="Add a pool" (action)="addPool()">
+        </bl-action-btn>
     </div>
     <div bl-list-content>
         <bl-focus-section>
diff --git a/app/components/task/action/add/task-create-basic-dialog.component.ts b/app/components/task/action/add/task-create-basic-dialog.component.ts
index c719e5a4ef..518cfabb1f 100644
--- a/app/components/task/action/add/task-create-basic-dialog.component.ts
+++ b/app/components/task/action/add/task-create-basic-dialog.component.ts
@@ -29,7 +29,7 @@ export class TaskCreateBasicDialogComponent extends DynamicForm<Task, TaskCreate
 
     constructor(
         private formBuilder: FormBuilder,
-        sidebarRef: SidebarRef<TaskCreateBasicDialogComponent>,
+        public sidebarRef: SidebarRef<TaskCreateBasicDialogComponent>,
         protected taskService: TaskService,
         private notificationService: NotificationService) {
         super(TaskCreateDto);
diff --git a/app/components/task/details/task-details.html b/app/components/task/details/task-details.html
index bdb2a971f1..28b9f922d3 100644
--- a/app/components/task/details/task-details.html
+++ b/app/components/task/details/task-details.html
@@ -4,29 +4,22 @@
     </md-card>
     <div *ngIf="task && job">
         <md-card class="overview">
-            <div class="summary">
-                <div class="main-info">
-                    <md-card-title-group style="margin: 0px;">
-                        <div style="align-items:center;">
-                            <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
-                        </div>
-                        <div style="margin-left:12px; margin-right:auto;">
-                            <md-card-title>{{task.id}} <span *ngIf="!!task.displayName"> - {{task.displayName}}</span> </md-card-title>
-                            <md-card-subtitle><i class="fa" [ngClass]="decorator.stateIcon"></i> {{task.state}}</md-card-subtitle>
-                        </div>
-                    </md-card-title-group>
-                    <md-card-content>
-                        <p>Job: {{jobId}}</p>
-                    </md-card-content>
-                </div>
+            <div class="actions">
+                <bl-action-btn-group>
+                    <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
+                    <bl-terminate-button [entity]="task" (action)="terminateTask()"></bl-terminate-button>
+                    <bl-delete-button [entity]="task" (action)="deleteTask()"></bl-delete-button>
+                    <bl-clone-button (action)="cloneTask()"></bl-clone-button>
+                </bl-action-btn-group>
+            </div>
+            <div class="content">
+                <md-card-title>{{task.id}} <span *ngIf="!!task.displayName"> - {{task.displayName}}</span> </md-card-title>
+                <md-card-subtitle><i class="fa" [ngClass]="decorator.stateIcon"></i> {{task.state}}</md-card-subtitle>
+                <p>Job: {{jobId}}</p>
+            </div>
+            <div style="padding: 10px">
                 <bl-task-timeline [job]="job" [task]="task"></bl-task-timeline>
             </div>
-            <md-card-actions layout="row" layout-align="end center">
-                <bl-add-button (click)="addTask()"></bl-add-button>
-                <bl-terminate-button [entity]="task" (click)="terminateTask()"></bl-terminate-button>
-                <bl-delete-button [entity]="task" (click)="deleteTask()"></bl-delete-button>
-                <bl-clone-button (click)="cloneTask()"></bl-clone-button>
-            </md-card-actions>
         </md-card>
         <bl-task-error-display [jobId]="jobId" [task]="task"></bl-task-error-display>
         <md-card class="details">
diff --git a/app/components/task/home/task-home.html b/app/components/task/home/task-home.html
index 1cea5f363c..d1ef08bc89 100644
--- a/app/components/task/home/task-home.html
+++ b/app/components/task/home/task-home.html
@@ -1,8 +1,7 @@
 <bl-list-and-show-layout #layout (listScrolledToBottom)="taskList.loadMore()" [list]="taskList">
     <div bl-list-buttons>
-        <button md-mini-fab color="primary" title="Add a task" (click)="addTask()">
-            <i class="fa fa-plus spin-hover"></i>
-        </button>
+        <bl-action-btn color="primary" type="round" icon="fa fa-plus spin-hover" title="Add a task" (action)="addTask()">
+        </bl-action-btn>
     </div>
     <div bl-list-content>
         <bl-focus-section>
diff --git a/app/styles/base/layout.scss b/app/styles/base/layout.scss
index de6acf1da2..c7fa123774 100644
--- a/app/styles/base/layout.scss
+++ b/app/styles/base/layout.scss
@@ -219,8 +219,7 @@ footer {
 
 .context-button-bar {
     position: relative !important;
-    margin-top: -34px !important;
-    margin-right: 10px !important;
+    margin: -34px 10px 0 !important;
     float: right;
 
     button {
diff --git a/app/styles/job/details.scss b/app/styles/job/details.scss
index 3ebd6cc37e..913e51f8b2 100644
--- a/app/styles/job/details.scss
+++ b/app/styles/job/details.scss
@@ -1,12 +1,19 @@
-bl-job-details {
-    .overview > .main-content {
-        display: flex;
+md-card.overview {
+    padding: 0 !important;
+    display: flex;
 
-        > .info {
-            flex: 1;
-        }
+    > .actions {
+        width: $action-btn-size + 1;
     }
 
+    > .content {
+        padding: 18px;
+        flex: 1;
+    }
+
+    > .tile {
+        border-left: 1px solid #d5d5d5;
+    }
 }
 
 bl-job-progress-status {
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index bbdc52c100..6ad570ab37 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -134,3 +134,7 @@ $listview-header-height              : 90px;
 $footer-height                       : 0;
 $content-top-position                : $header-height;
 $contentview-height                  : calc(100vh - #{$header-height});
+
+
+// Base component dimensions
+$action-btn-size: 32px;
diff --git a/app/styles/vendor/material-theme.scss b/app/styles/vendor/material-theme.scss
index 5d92612c93..8441e06c68 100644
--- a/app/styles/vendor/material-theme.scss
+++ b/app/styles/vendor/material-theme.scss
@@ -99,21 +99,6 @@ md-card {
         }
     }
 
-    &.overview {
-        padding: 18px !important;
-
-        md-card-actions {
-            margin-left: -10px !important;
-            margin-right: -10px !important;
-            padding-top: 4px !important;
-        }
-
-        md-card-actions:last-child {
-            margin-bottom: -10px !important;
-            padding-bottom: 0 !important;
-        }
-    }
-
     &.details {
         margin-top:8px !important;
         padding:0 !important;
diff --git a/test/app/components/application/errors/application-error-display.component.spec.ts b/test/app/components/application/errors/application-error-display.component.spec.ts
index 6f55549a5d..d3bb300b45 100644
--- a/test/app/components/application/errors/application-error-display.component.spec.ts
+++ b/test/app/components/application/errors/application-error-display.component.spec.ts
@@ -4,11 +4,11 @@ import { By } from "@angular/platform-browser";
 import { BehaviorSubject } from "rxjs";
 
 import { ApplicationErrorDisplayComponent } from "app/components/application/errors";
+import { SidebarManager } from "app/components/base/sidebar";
 import { AccountResource, Application } from "app/models";
 import { AccountService } from "app/services";
 import * as Fixtures from "test/fixture";
 import { BannerMockComponent } from "test/utils/mocks/components";
-import { SidebarManager } from "app/components/base/sidebar";
 
 @Component({
     template: `<bl-application-error-display [application]="application"></bl-application-error-display>`,
diff --git a/test/app/components/base/buttons/action-button.component.spec.ts b/test/app/components/base/buttons/action-button.component.spec.ts
new file mode 100644
index 0000000000..e8715fe7f8
--- /dev/null
+++ b/test/app/components/base/buttons/action-button.component.spec.ts
@@ -0,0 +1,98 @@
+import { Component, DebugElement, NO_ERRORS_SCHEMA } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { MaterialModule, MdTooltip } from "@angular/material";
+import { ActionButtonComponent } from "app/components/base/buttons/action-button.component";
+import { click } from "test/utils/helpers";
+
+@Component({
+    template: `
+        <bl-action-btn [disabled]="disabled" icon="fa fa-stop" (action)="onAction()" title="Stop" [color]="color">
+        </bl-action-btn>
+    `,
+})
+class TestComponent {
+    public disabled: boolean = false;
+
+    public onAction: jasmine.Spy;
+
+    public color = "primary";
+    constructor() {
+        this.onAction = jasmine.createSpy("onAction");
+    }
+}
+
+describe("ActionButton", () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let testComponent: TestComponent;
+    let component: ActionButtonComponent;
+    let de: DebugElement;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [MaterialModule],
+            declarations: [ActionButtonComponent, TestComponent],
+            schemas: [NO_ERRORS_SCHEMA],
+        });
+        fixture = TestBed.createComponent(TestComponent);
+        testComponent = fixture.componentInstance;
+        de = fixture.debugElement.query(By.css("bl-action-btn"));
+        component = de.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should have the icon specified", () => {
+        const icon = de.query(By.css("i.fa.fa-stop"));
+        expect(icon).not.toBeFalsy();
+    });
+
+    it("Should have the tooltip specified with title", () => {
+        const el = de.query(By.css(".action-btn"));
+        const tooltip = el.injector.get(MdTooltip);
+        expect(tooltip.message).toBe("Stop");
+    });
+
+    it("should change color", () => {
+        expect(de.attributes["color"]).toBe("primary");
+
+        testComponent.color = "warn";
+        fixture.detectChanges();
+        expect(de.attributes["color"]).toBe("warn");
+
+    });
+
+    describe("when disabled", () => {
+        beforeEach(() => {
+            testComponent.disabled = true;
+            fixture.detectChanges();
+        });
+
+        it("should have the disabled class", () => {
+            expect(de.classes["disabled"]).toBe(true);
+        });
+
+        it("should not trigger the event on click", () => {
+            click(de);
+            fixture.detectChanges();
+            expect(testComponent.onAction).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("when enabled", () => {
+        beforeEach(() => {
+            testComponent.disabled = false;
+            fixture.detectChanges();
+        });
+
+        it("should have NOT the disabled class", () => {
+            expect(de.classes["disabled"]).toBe(false);
+        });
+
+        it("should trigger the event on click", () => {
+            click(de);
+            fixture.detectChanges();
+            expect(testComponent.onAction).toHaveBeenCalledOnce();
+        });
+    });
+});
diff --git a/test/app/memory-leak/mem-leak.spec.ts b/test/app/memory-leak/mem-leak.spec.ts
index 684a0b335a..fad8c731c4 100644
--- a/test/app/memory-leak/mem-leak.spec.ts
+++ b/test/app/memory-leak/mem-leak.spec.ts
@@ -5,6 +5,7 @@ import { TestBed, async } from "@angular/core/testing";
 import { TaskDetailsModule } from "app/components/task/details";
 
 export function main() {
+    // tslint:disable-next-line:ban
     fdescribe("Memory leak Testing", () => {
         for (let i = 0; i < 100000; i++) {
             describe(`${i}`, () => {