diff --git a/frontend/app/scripts/controllers/case/CaseProceduresCtrl.js b/frontend/app/scripts/controllers/case/CaseProceduresCtrl.js
index eb8882dc05..1624b4aaac 100644
--- a/frontend/app/scripts/controllers/case/CaseProceduresCtrl.js
+++ b/frontend/app/scripts/controllers/case/CaseProceduresCtrl.js
@@ -34,7 +34,7 @@
                 });
         };
 
-        this.showProcedure = function(procedure) {
+        this.addProcedure = function(procedure) {
             var modalInstance = $uibModal.open({
                 animation: true,
                 templateUrl: 'views/partials/case/procedures/add-procedure.modal.html',
@@ -91,7 +91,7 @@
                     {'_name': 'getCase', "idOrName": self.caseId},
                     {'_name': 'procedures'}
                 ],
-                extraData: ['pattern']
+                extraData: ['pattern', 'patternParent']
             });
         };
 
diff --git a/frontend/app/scripts/controllers/case/procedure/AddProcedureModalCtrl.js b/frontend/app/scripts/controllers/case/procedure/AddProcedureModalCtrl.js
index a4a90a56ba..a0eb17c6a4 100644
--- a/frontend/app/scripts/controllers/case/procedure/AddProcedureModalCtrl.js
+++ b/frontend/app/scripts/controllers/case/procedure/AddProcedureModalCtrl.js
@@ -14,7 +14,9 @@
             };
 
             this.cancel = function() {
-                $rootScope.markdownEditorObjects.procedure.hidePreview();
+                if($rootScope.markdownEditorObjects.procedure) {
+                    $rootScope.markdownEditorObjects.procedure.hidePreview();                    
+                }
 
                 $uibModalInstance.dismiss();
             };
diff --git a/frontend/app/scripts/services/api/AttackPatternSrv.js b/frontend/app/scripts/services/api/AttackPatternSrv.js
index 53fc54ccd3..bf1188e902 100644
--- a/frontend/app/scripts/services/api/AttackPatternSrv.js
+++ b/frontend/app/scripts/services/api/AttackPatternSrv.js
@@ -107,11 +107,6 @@
                                 {
                                     _field: 'revoked',
                                     _value: false
-                                },
-                                {
-                                    _not: {
-                                        _contains: 'parent'
-                                    }
                                 }
                             ]
                         },
@@ -119,9 +114,14 @@
                         page: {
                             from: 0,
                             to: 100,
-                            extraData: ['children']
+                            extraData: ['parent']
                         }
                     }).then(function(techniques) {
+
+                        _.each(techniques, function(technique) {
+                            technique.isSubTechnique = !!technique.extraData.parent;
+                        });                        
+
                         self.tacticsCache[tactic] = techniques;
 
                         defer.resolve(techniques);
diff --git a/frontend/app/styles/case.css b/frontend/app/styles/case.css
index e552d0d14f..839531f7eb 100644
--- a/frontend/app/styles/case.css
+++ b/frontend/app/styles/case.css
@@ -95,12 +95,3 @@ pre.error-trace {
     white-space: pre-wrap;
     background-color: #f9f1f1;
 }
-
-.procedure-techniques-list {
-    height: 200px;
-    overflow-y: scroll;
-    border-radius: 0;
-    box-shadow: none;
-    border: 1px solid #d2d6de;
-
-}
diff --git a/frontend/app/styles/procedure.css b/frontend/app/styles/procedure.css
index 0830b99657..e74f2059cd 100644
--- a/frontend/app/styles/procedure.css
+++ b/frontend/app/styles/procedure.css
@@ -4,7 +4,7 @@
 }
 
 .ttp-tactic {
-    width: 200px;
+    width: 250px;
     vertical-align: middle;
 }
 .ttp-name {
@@ -78,3 +78,47 @@
     font-weight: bold;
     padding: 10px;
 }
+
+.procedure-techniques-list {
+    /* height: 400px;
+    overflow-y: scroll; */
+    border-radius: 0;
+    box-shadow: none;
+    border: 1px solid #d2d6de;
+}
+
+.procedure-techniques-list .tooltip {
+    width: 600px;
+    text-align: left;
+}
+.procedure-techniques-list .tooltip-inner {
+    max-width: 100%;
+    text-align: left;
+}
+
+.procedure-techniques-list .procedure-techniques-item {
+    display: block;
+    padding: 2px 5px;
+}
+
+.procedure-techniques-list .procedure-techniques-item:hover {
+    background-color: #f5f5f5;
+}
+
+.procedure-techniques-list .procedure-techniques-item.active,
+.procedure-techniques-list .procedure-techniques-item.active:hover {
+    background-color: #3c8dbc;
+    color: #fff;
+}
+
+.procedure-techniques-list .procedure-techniques-item.active a{
+    color: #fff;
+}
+
+.procedure-technique {
+    display: block;
+}
+
+.procedure-technique.sub-technique {
+    margin-left: 30px;
+}
diff --git a/frontend/app/views/partials/case/case.procedures.html b/frontend/app/views/partials/case/case.procedures.html
index 9546bee7b9..a89cf3a6db 100644
--- a/frontend/app/views/partials/case/case.procedures.html
+++ b/frontend/app/views/partials/case/case.procedures.html
@@ -66,14 +66,14 @@ <h4>
                         <a href class="pull-right" ng-click="$vm.addFilterValue('tactic', proc.tactic)"><i class="fa fa-filter"></i></a>
                     </div>
                 </div>
-                <div class="ttp-name" ng-if="proc.extraData.pattern.parent">
+                <div class="ttp-name" ng-if="proc.extraData.patternParent">
                     <div>
-                        <a href ng-click="$vm.showPattern(proc.patternId)">{{proc.patternId}}</a> - {{proc.extraData.parent}}:{{proc.extraData.pattern.name}}
+                        <a href ng-click="$vm.showPattern(proc.patternId)">{{proc.patternId}}</a> - {{proc.extraData.patternParent.name}}:{{proc.extraData.pattern.name}}
 
                         <a href class="pull-right" ng-click="$vm.addFilterValue('patternId', proc.patternId)"><i class="fa fa-filter"></i></a>
                     </div>
                 </div>
-                <div class="ttp-name" ng-if="!proc.extraData.pattern.parent">
+                <div class="ttp-name" ng-if="!proc.extraData.patternParent">
                     <div>
                         <a href ng-click="$vm.showPattern(proc.patternId)">{{proc.patternId}}</a> - {{proc.extraData.pattern.name}}
 
diff --git a/frontend/app/views/partials/case/procedures/add-procedure.modal.html b/frontend/app/views/partials/case/procedures/add-procedure.modal.html
index 0921114a21..8aef297d59 100644
--- a/frontend/app/views/partials/case/procedures/add-procedure.modal.html
+++ b/frontend/app/views/partials/case/procedures/add-procedure.modal.html
@@ -4,47 +4,85 @@ <h3 class="modal-title">Add Tactic, Technique and Procedure</h3>
     </div>
     <div class="modal-body">
 
-        <div class="form-group" ng-class="{ 'has-error' : procedureForm.tactic.$invalid && !procedureForm.tactic.$pristine }">
-            <label>
-                Tactic
-                <i class="fa fa-asterisk text-danger"></i>
-            </label>
-            <select class="form-control" name="tactic" ng-model="$modal.procedure.tactic" autofocus="beforeProcedureModalShow"
-                ng-options="tactic as $modal.tactics.values[tactic].label for tactic in $modal.tactics.keys" required ng-change="$modal.showTechniques()">
-            </select>
-            <p class="help-block" ng-show="procedureForm.tactic.$invalid && !procedureForm.tactic.$pristine">This field is required.</p>
+        <div class="row">
+            <div class="col-sm-6">
+                <div class="form-group" ng-class="{ 'has-error' : procedureForm.tactic.$invalid && !procedureForm.tactic.$pristine }">
+                    <label>
+                        Tactic
+                        <i class="fa fa-asterisk text-danger"></i>
+                    </label>
+                    <select class="form-control" name="tactic" ng-model="$modal.procedure.tactic" autofocus="beforeProcedureModalShow"
+                        ng-options="tactic as $modal.tactics.values[tactic].label for tactic in $modal.tactics.keys" required ng-change="$modal.showTechniques()">
+                    </select>
+                    <p class="help-block" ng-show="procedureForm.tactic.$invalid && !procedureForm.tactic.$pristine">This field is required.</p>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <div class="form-group" ng-class="{ 'has-error' : procedureForm.occureDate.$invalid && !procedureForm.occureDate.$pristine }">
+                    <label>
+                        Occur Date
+                        <i class="fa fa-asterisk text-danger"></i>
+                    </label>
+                    <div>
+                        <date-time-picker date="$modal.procedure.occurDate" name="occurDate"></date-time-picker>
+                        <p class="help-block" ng-show="procedureForm.occureDate.$invalid && !procedureForm.occureDate.$pristine">The field is required.</p>
+                    </div>
+                </div>
+            </div>
         </div>
 
-        <div ng-show="$modal.procedure.tactic" class="form-group" ng-class="{ 'has-error' : procedureForm.pattern.$invalid && !procedureForm.pattern.$pristine }">
+
+        <div class="form-group" ng-class="{ 'has-error' : procedureForm.pattern.$invalid && !procedureForm.pattern.$pristine }">
             <label>
                 Technique
                 <i class="fa fa-asterisk text-danger"></i>
             </label>
-            <input type="text" class="form-control mv-xxxs" placeholder="Filter techniques" ng-model="$modal.state.search.name">
-            <input type="hidden"ng-model="$modal.procedure.patternId" required>
-            <div class="procedure-techniques-list p-xxs">
-
-                <div ng-repeat="technique in $modal.state.techniques | filter:$modal.state.search">
-                    <div class="radio">
-                        <label>
-                            <input type="radio" name="pattern" ng-value="technique.patternId" ng-model="$modal.procedure.patternId">
-                            {{technique.patternId}} - {{technique.name}}
-                        </label>
-                    </div>
-                    <div ng-repeat="subTechnique in technique.extraData.children | filter:$modal.state.search" class="ml-m" ng-if="!subTechnique.revoked">
-                        <div class="radio">
-                            <label>
-                                <input type="radio" name="pattern" ng-value="subTechnique.patternId" ng-model="$modal.procedure.patternId">
-                                {{subTechnique.patternId}} - {{subTechnique.name}}
-                            </label>
+
+            <div ng-show="!$modal.procedure.tactic" class="text-muted">
+                Please select a tactic above.
+            </div>
+
+            <div ng-show="$modal.procedure.tactic">
+                <input type="text" class="form-control mv-xxxs" placeholder="Filter techniques" ng-model="$modal.state.search">
+                <input type="hidden"ng-model="$modal.procedure.patternId" required>
+                <div class="procedure-techniques-list p-xxs">
+
+                    <div ng-repeat="technique in $modal.state.techniques | filter:$modal.state.search">
+                        <div class="procedure-techniques-item" ng-class="{'active': $modal.procedure.patternId === technique.patternId}"
+                            ng-click="$modal.procedure.patternId = technique.patternId">
+                            <div class="radio">
+                                <label class="procedure-technique" ng-class="{'sub-technique': technique.isSubTechnique}">
+                                    <input type="radio" name="pattern" ng-value="technique.patternId" ng-model="$modal.procedure.patternId">
+
+                                    <span ng-if="!!!technique.isSubTechnique">{{technique.patternId}} - {{technique.name}}</span>
+                                    <span ng-if="!!technique.isSubTechnique">{{technique.patternId}} - {{technique.extraData.parent.name}}:{{technique.name}}</span>
+
+                                    <span class="pull-right ml-xxs">
+                                        <a href="{{technique.url}}" target="_blank">
+                                            <i class="fa fa-external-link"></i>
+                                        </a>
+                                    </span>
+                                    <span class="pull-right">
+                                        <i class="fa fa-question-circle" uib-tooltip="{{technique.description}}" tooltip-placement="left-center"></i>
+                                    </span>
+
+                                </label>
+                            </div>
                         </div>
                     </div>
                 </div>
+                <p class="help-block" ng-show="procedureForm.pattern.$invalid && !procedureForm.pattern.$pristine">This field is required.</p>
             </div>
-            <p class="help-block" ng-show="procedureForm.pattern.$invalid && !procedureForm.pattern.$pristine">This field is required.</p>
+
+
+
+        </div>
+
+        <div class="mv-xxs" ng-if="!$modal.showProcedure">
+            <a href ng-click="$modal.showProcedure = true"><i class="fa fa-plus"></i> Add Procedure</a>
         </div>
 
-        <div class="form-group" ng-class="{ 'has-error' : procedureForm.description.$invalid && !procedureForm.description.$pristine }">
+        <div class="form-group" ng-if="$modal.showProcedure" ng-class="{ 'has-error' : procedureForm.description.$invalid && !procedureForm.description.$pristine }">
             <label>Procedure</label>
             <div>
                 <div class="clearfix">
@@ -59,18 +97,6 @@ <h3 class="modal-title">Add Tactic, Technique and Procedure</h3>
                 <p class="help-block" ng-show="procedureForm.description.$invalid && !procedureForm.description.$pristine">This field is required.</p>
             </div>
         </div>
-
-        <div class="form-group" ng-class="{ 'has-error' : procedureForm.occureDate.$invalid && !procedureForm.occureDate.$pristine }">
-            <label>
-                Occur Date
-                <i class="fa fa-asterisk text-danger"></i>
-            </label>
-            <div>
-                <date-time-picker date="$modal.procedure.occurDate" name="occurDate"></date-time-picker>
-                <p class="help-block" ng-show="procedureForm.occureDate.$invalid && !procedureForm.occureDate.$pristine">The field is required.</p>
-            </div>
-        </div>
-
     </div>
     <div class="modal-footer text-left">
         <button class="btn btn-default" ng-click="$modal.cancel()" type="button">Cancel</button>