diff --git a/package.json b/package.json
index 92273fc5d..02aaf4509 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "wazuh",
   "version": "2.1.0",
-  "revision": "0337",
+  "revision": "0341",
   "kibana": {
-    "version" : "5.5.0"
+    "version": "5.5.1"
   },
   "description": "Wazuh App",
   "main": "index.js",
@@ -29,7 +29,9 @@
     "angular-material": "1.1.1",
     "angular-md5": "^0.1.10",
     "bootstrap": "3.3.6",
+    "install": "^0.10.1",
     "needle": "^1.0.0",
-    "node-cron": "^1.1.2"
+    "node-cron": "^1.1.2",
+    "npm": "^5.3.0"
   }
 }
diff --git a/public/controllers/agentsPreview.js b/public/controllers/agentsPreview.js
index 3f03fd374..23f7bc16c 100644
--- a/public/controllers/agentsPreview.js
+++ b/public/controllers/agentsPreview.js
@@ -29,7 +29,7 @@ app.factory('Agents', function($http, DataFactory) {
   return Agents;
 });
 
-app.controller('agentsPreviewController', function ($scope, DataFactory, Notifier, errlog, genericReq, Agents, apiReq) {
+app.controller('agentsPreviewController', function ($scope, $mdDialog, DataFactory, Notifier, errlog, genericReq, Agents, apiReq) {
     $scope.load = true;
     $scope.agents = [];
     $scope._status = 'all';
@@ -42,7 +42,7 @@ app.controller('agentsPreviewController', function ($scope, DataFactory, Notifie
 	$scope.newAgent = {
 		'name': '', 'ip': ''
 	};
-
+	$scope.newAgentKey = '';
 	
 	const notify = new Notifier({location: 'Agents - Preview'});
 	
@@ -126,32 +126,43 @@ app.controller('agentsPreviewController', function ($scope, DataFactory, Notifie
 	
 	$scope.saveNewAgent = function (){
 		if($scope.newAgent.name != '') {
-			if(confirm("Do you want to add the agent?")){
-				var requestData = {
-					'name': $scope.newAgent.name,
-					'ip': $scope.newAgent.ip == '' ? 'any' : $scope.newAgent.ip
-				}
-				apiReq.request('POST', '/agents', requestData)
-					.then(function (data) {
-						if(data.error=='0'){
-							notify.info('The agent was added successfully.');
-							apiReq.request('GET', '/agents/' + data.data + '/key', {})
-								.then(function(data) {
-									prompt('',data.data);
-									load();
-								});
-						}
-						else{
-							notify.error('There was an error adding the new agent.');
-						}
-					}, printError);
+			var requestData = {
+				'name': $scope.newAgent.name,
+				'ip': $scope.newAgent.ip == '' ? 'any' : $scope.newAgent.ip
 			}
+			apiReq.request('POST', '/agents', requestData)
+				.then(function (data) {
+					if(data.error=='0'){
+						notify.info('The agent was added successfully.');
+						apiReq.request('GET', '/agents/' + data.data + '/key', {})
+							.then(function(data) {
+								$scope.newAgentKey = data.data;
+								load();
+							});
+					}
+					else{
+						notify.error('There was an error adding the new agent.');
+					}
+				}, printError);
 		}
 		else{
 			notify.error('The agent name is mandatory.');
 		}
 	}
 	
+	$scope.showPrerenderedDialog = function(ev) {
+		$mdDialog.show({
+			contentElement: '#newAgentDialog',
+			parent: angular.element(document.body),
+			targetEvent: ev,
+			clickOutsideToClose: true
+		});
+	};
+	
+	$scope.hidePrerenderedDialog = function(ev) {
+		$scope.newAgentKey = '';
+		$mdDialog.hide();
+	};
 	
     var load = function () {
 		$scope.isAddingAgent = false;
diff --git a/public/less/main.less b/public/less/main.less
index 45e08e603..4859aa851 100644
--- a/public/less/main.less
+++ b/public/less/main.less
@@ -3,6 +3,23 @@ body{
    width:100%;
 }
 
+.md-button.md-fab {
+	line-height: 5.6rem;
+	min-width: 0;
+	width: 5.6rem;
+	height: 5.6rem;
+	border-radius: 50%;
+	margin: 30px;
+	bottom: 0;
+	right: 0;
+	position: fixed;
+	color: white;
+}
+
+.new-agent-key{
+	max-width: 100% !important;
+}
+
 .top-bulk-action {
 	margin-bottom:17px
 }
diff --git a/public/templates/agents-preview.html b/public/templates/agents-preview.html
index f9b27cee1..82c0b9890 100644
--- a/public/templates/agents-preview.html
+++ b/public/templates/agents-preview.html
@@ -1,4 +1,5 @@
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
 <div ng-if="submenuNavItem == 'preview'">
 	<md-content flex class="agentsPreview" ng-controller="agentsPreviewController" layout="column" style="height: 100%;" class="md-padding" layout-align="start space-around">
 			<div infinite-scroll-module='agents.nextPage()' infinite-scroll-disabled='agents.busy' infinite-scroll-distance='0' style="padding: 0">
@@ -86,18 +87,7 @@
 								</md-input-container>
 							</div>
 						</div>
-						<div layout="row" layout-align="start stretch">
-							<div layout="row" class="top-bulk-action" layout-align="center center">
-									<md-card ng-click="addNewAgent()" class="md-input-margin new-agent-button" layout="column">
-										<div ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}" ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isAddingAgent]"><md-icon md-font-library="material-icons">add</md-icon></div>
-									</md-card>
-							</div>
-							<div ng-show="isAddingAgent" layout="row" class="top-bulk-action" layout-align="center center">
-								<md-card ng-click="saveNewAgent()" class="md-input-margin new-agent-button" layout="column">
-									<md-icon class="done-icon" md-font-library="material-icons">done</md-icon>
-								</md-card>
-							</div>
-						</div>
+						
 						<div>
 							<md-toolbar layout="row">
 								<div class="md-toolbar-tools">
@@ -117,17 +107,6 @@
 							</md-toolbar>
 						</div>
 					</div>
-					<md-list ng-show="isAddingAgent" ng-animate="{enter: 'show-new-agent', leave: 'hide-new-agent'}" ng-class="{true: 'show-new-agent', false: 'hide-new-agent'}[isAddingAgent]" class="agents-preview-table">
-						<md-list-item>
-							<span flex="10"></span>
-							<span flex="25"><input ng-model="newAgent.name" class="new-agent-data"></input></span>
-							<span flex="20"><input ng-model="newAgent.ip" class="new-agent-data"></input></span>
-							<span flex="10"></span>
-							<span flex="10"></span>
-							<span flex="15"></span>
-							<span flex="10"></span>
-						</md-list-item>
-					</md-list>
 					<md-list ng-repeat='agent in agents.items' class="agents-preview-table" ng-click="applyAgent(agent)">
 						<md-list-item>
 							<span flex="10">{{agent.id}}</span>
@@ -140,20 +119,43 @@
 						</md-list-item>
 					</md-list>
 					<md-divider></md-divider>
-					<div flex layout="column" layout-align="space-between stretch">
-						<div layout="row" layout-align="start stretch">
-								<div layout="row" class="sideNavBox" layout-align="center center">
-									<md-card ng-click="addNewAgent()" class="md-input-margin new-agent-button" layout="column">
-										<div ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}" ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isAddingAgent]"><md-icon md-font-library="material-icons">add</md-icon></div>
-									</md-card>
-								</div>
-								<div ng-show="isAddingAgent" layout="row" class="sideNavBox" layout-align="center center">
-									<md-card ng-click="saveNewAgent()" class="md-input-margin new-agent-button" layout="column">
-										<md-icon class="done-icon" md-font-library="material-icons">done</md-icon>
-									</md-card>
-								</div>
-						</div>
+			</div>
+			<md-button class="md-fab" ng-click="showPrerenderedDialog($event)"  >
+				<md-icon md-font-library="material-icons">add</md-icon>
+			</md-button>
+			
+			<div style="visibility: hidden">
+				<div class="md-dialog-container" id="newAgentDialog">
+					<div ng-show="newAgentKey != ''">
+						<md-dialog class="new-agent-key" layout-padding>
+							<h3 class="agent-key">Agent key</h3>
+								<p class="agent-key">{{newAgentKey}}</p>
+								<md-button ng-click="hidePrerenderedDialog()">Close</md-button>
+						</md-dialog>
 					</div>
+					<div ng-show="newAgentKey == ''">
+						<md-dialog layout-padding>
+							<h3>New agent</h3>
+							<form name="newAgentForm">
+								  <div layout="row">
+								<md-input-container class="md-block" flex-gt-sm>
+									<label>Name</label>
+									<input required name="name" ng-model="newAgent.name" />
+								</md-input-container>
+								<md-input-container class="md-block" flex-gt-sm>
+									<label>IP</label>
+									<input required name="ip" ng-model="newAgent.ip" />
+								</md-input-container>
+								</div>
+								<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+									<md-button ng-click="saveNewAgent()">Add</md-button>
+									<md-button ng-click="hidePrerenderedDialog()">Close</md-button>
+								</section>
+							</form>
+						</md-dialog>
+					</div>
+					
+				</div>
 			</div>
 			<md-content><md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="agents.busy"></md-progress-linear></md-content>
 	</md-content>