diff --git a/frontend/app/scripts/directives/flow/flow-item.js b/frontend/app/scripts/directives/flow/flow-item.js
index 13cda323c9..a013a2209a 100644
--- a/frontend/app/scripts/directives/flow/flow-item.js
+++ b/frontend/app/scripts/directives/flow/flow-item.js
@@ -2,7 +2,7 @@
     'use strict';
 
     angular.module('theHiveDirectives')
-        .directive('flowItem', function($uibModal, $state, $window, HtmlSanitizer, UserSrv) {
+        .directive('flowItem', function($uibModal, $state, $window, HtmlSanitizer, UserSrv, AttackPatternSrv) {
             return {
                 restrict: 'E',
                 replace: true,
@@ -58,6 +58,8 @@
                         return false;
                     };
 
+                    scope.tactics = AttackPatternSrv.tactics.values;
+
                     scope.bulk = scope.isBulkOperation();
                 },
                 templateUrl: 'views/directives/flow/flow-item.html'
diff --git a/frontend/app/views/directives/flow/flow.html b/frontend/app/views/directives/flow/flow.html
index 03a9bab26b..8ace7d2eba 100644
--- a/frontend/app/views/directives/flow/flow.html
+++ b/frontend/app/views/directives/flow/flow.html
@@ -11,5 +11,6 @@
         <flow-item target="targetWindow" type="caseTemplate" data="value" ng-switch-when="casetemplate"></flow-item>
         <flow-item target="targetWindow" type="organisation" data="value" ng-switch-when="organisation"></flow-item>
         <flow-item target="targetWindow" type="dashboard" data="value" ng-switch-when="dashboard"></flow-item>
+        <flow-item target="targetWindow" type="procedure" data="value" ng-switch-when="procedure"></flow-item>
 	</div>
 </div>
diff --git a/frontend/app/views/directives/flow/procedure.html b/frontend/app/views/directives/flow/procedure.html
new file mode 100644
index 0000000000..8bd0958490
--- /dev/null
+++ b/frontend/app/views/directives/flow/procedure.html
@@ -0,0 +1,26 @@
+<div class="flow-task" ng-switch="base.operation">
+    <!-- <pre>{{base | json}}</pre> -->
+    <div class="flow-item-title">
+        <i class="glyphicon glyphicon-knight"></i>{{tactics[base.details.tactic].label}} - {{base.details.patternId}}
+    </div>
+    <div class="flow-item-updates" ng-switch-when="Creation">
+        <div>
+            occureDate: <span><em>{{base.details.occurDate | showDate}}</em></span>
+        </div>
+        <div>
+            description: <span><em>{{(base.details.procedure || '-')| limitTo: 250}}</em></span>
+        </div>
+    </div>
+    <div class="flow-item-updates" ng-switch-default>
+        <span ng-repeat="(k, v) in base.details" ng-switch="k">
+            <div ng-switch-when="occurDate">
+                {{k}}:
+                <em>{{v | showDate}}</em>
+            </div>
+            <div ng-switch-default>
+                {{k}}:
+                <em>{{v | limitTo: 250}}</em>
+            </div>
+        </span>
+    </div>
+</div>