diff --git a/frontend/app/index.html b/frontend/app/index.html
index ec9828b2ee..38cfce297a 100644
--- a/frontend/app/index.html
+++ b/frontend/app/index.html
@@ -129,6 +129,7 @@
     <!-- injector:js -->
     <script src="scripts/app.js"></script>
     <script src="scripts/components/app-container.component.js"></script>
+    <script src="scripts/components/common/custom-field-input.component.js"></script>
     <script src="scripts/components/control-sidebar.component.js"></script>
     <script src="scripts/components/header.component.js"></script>
     <script src="scripts/components/main-sidebar.component.js"></script>
diff --git a/frontend/app/scripts/components/common/custom-field-input.component.js b/frontend/app/scripts/components/common/custom-field-input.component.js
new file mode 100644
index 0000000000..159fcfdfca
--- /dev/null
+++ b/frontend/app/scripts/components/common/custom-field-input.component.js
@@ -0,0 +1,23 @@
+(function() {
+    'use strict';
+
+    angular.module('theHiveComponents')
+        .component('customFieldInput', {
+            controller: function() {
+                this.updateField = function(newValue) {
+                    this.onUpdate({
+                        fieldName: ['customFields', this.field.reference, this.field.type].join('.'),
+                        value: newValue
+                    });
+                };
+            },
+            controllerAs: '$ctrl',
+            templateUrl: 'views/components/common/custom-field-input.component.html',
+            bindings: {
+                field: '<',
+                value: '=',
+                onUpdate: '&',
+                editable: '<'
+            }
+        });
+})();
diff --git a/frontend/app/views/components/common/custom-field-input.component.html b/frontend/app/views/components/common/custom-field-input.component.html
new file mode 100644
index 0000000000..cde52043e6
--- /dev/null
+++ b/frontend/app/views/components/common/custom-field-input.component.html
@@ -0,0 +1,39 @@
+<dl class="dl-horizontal">
+    <dt class="pull-left" uib-tooltip="{{$ctrl.field.description}}">{{$ctrl.field.name}}</dt>
+    <dd ng-if="$ctrl.editable && $ctrl.field.options.length > 0">
+        <updatable-select
+            options="$ctrl.field.options"
+            on-update="$ctrl.updateField(newValue)"
+            value="$ctrl.value"></updatable-select>
+    </dd>
+    <dd ng-if="$ctrl.editable && $ctrl.field.options.length === 0" ng-switch="$ctrl.field.type">
+        <updatable-simple-text ng-switch-when="string"
+            input-type="text" on-update="$ctrl.updateField(newValue)" value="$ctrl.value"></updatable-simple-text>
+
+        <updatable-date ng-switch-when="date" on-update="$ctrl.updateField(newValue)" value="$ctrl.value"></updatable-date>
+
+        <updatable-simple-text ng-switch-when="integer"
+            input-type="integer"
+            on-update="$ctrl.updateField(newValue)"
+            value="$ctrl.value"></updatable-simple-text>
+
+        <updatable-simple-text ng-switch-when="float"
+           input-type="float"
+           on-update="$ctrl.updateField(newValue)"
+           value="$ctrl.value"></updatable-simple-text>
+
+        <updatable-boolean ng-switch-when="boolean"
+            input-type="number"
+            on-update="$ctrl.updateField(newValue)"
+            value="$ctrl.value"></updatable-boolean>
+
+        <span ng-switch-default>Not Editable</span>
+    </dd>
+    <dd ng-if="!$ctrl.editable" ng-switch="$ctrl.field.type">
+        <span ng-switch-when="date">{{$ctrl.value | shortDate}}</span>
+        <span ng-switch-default>
+            {{$ctrl.value}}
+            <em class="text-warning" ng-if="!$ctrl.value">Not Specified</em>
+        </span>
+    </dd>
+</dl>
diff --git a/frontend/app/views/partials/alert/custom.fields.html b/frontend/app/views/partials/alert/custom.fields.html
index 0b314ad0b3..8b775c9375 100644
--- a/frontend/app/views/partials/alert/custom.fields.html
+++ b/frontend/app/views/partials/alert/custom.fields.html
@@ -3,68 +3,16 @@
         <em>No aditional information have been specified</em>
     </div>
 
-    <div ng-if="dialog.canEdit">
+    <div class="row">
         <div ng-repeat="k in dialog.orderedFields track by $index" ng-init="fieldDef = dialog.customFieldsCache.getCache(k);">
             <div class="clearfix" ng-if="$index % 2 == 0"></div>
             <div class="col-xs-6">
-                <dl class="dl-horizontal clear">
-                    <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
-                    <dd ng-if="fieldDef.options.length > 0">
-                        <updatable-select
-                            options="fieldDef.options"
-                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-select>
-                    </dd>
-
-                    <dd ng-if="fieldDef.options.length === 0" ng-switch="fieldDef.type">
-                        <updatable-simple-text ng-switch-when="string"
-                            input-type="text"
-                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
-
-                        <updatable-date ng-switch-when="date"
-                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-date>
-
-                        <updatable-simple-text ng-switch-when="integer"
-                            input-type="integer"
-                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
-
-                        <updatable-simple-text ng-switch-when="float"
-                           input-type="float"
-                           on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                           value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
-
-                        <updatable-boolean ng-switch-when="boolean"
-                            input-type="number"
-                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-boolean>
-
-                        <span ng-switch-default>Not Editable</span>
-                    </dd>
-                </dl>
+                <custom-field-input
+                    editable="dialog.canEdit"
+                    field="fieldDef"
+                    on-update="dialog.updateField(fieldName, value)"
+                    value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></custom-field-input>
             </div>
         </div>
     </div>
-
-    <div ng-if="!dialog.canEdit">
-        <div ng-repeat="k in dialog.orderedFields track by $index" ng-init="fieldDef = dialog.customFieldsCache.getCache(k);">
-            <div class="clearfix" ng-if="$index % 2 == 0"></div>
-            <div class="col-xs-6">
-                <dl class="dl-horizontal clear">
-                    <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
-                    <dd ng-switch="fieldDef.type">
-                        <span ng-switch-when="date">{{dialog.event.customFields[fieldDef.reference][fieldDef.type] | shortDate}}</span>
-                        <span ng-switch-default>
-                            {{dialog.event.customFields[fieldDef.reference][fieldDef.type]}}
-                            <em class="text-warning" ng-if="!dialog.event.customFields[fieldDef.reference][fieldDef.type]">Not Specified</em>
-                        </span>
-                    </dd>
-                </dl>
-            </div>
-        </div>
-    </div>
-
-
 </div>
diff --git a/frontend/app/views/partials/case/details/custom.fields.html b/frontend/app/views/partials/case/details/custom.fields.html
index 1791150b0e..f199cd54f3 100644
--- a/frontend/app/views/partials/case/details/custom.fields.html
+++ b/frontend/app/views/partials/case/details/custom.fields.html
@@ -17,62 +17,14 @@ <h4 class="vpad10 text-primary">
         <em>No additional information have been specified</em>
     </div>
 
-    <div ng-if="canEdit" class="row">
-        <div ng-repeat="k in orderedFields track by $index" ng-init="fieldDef = customFieldsCache[k];">
+    <div class="row">
+        <div ng-repeat="k in orderedFields track by $index">
             <div class="clearfix" ng-if="$index % 3 == 0"></div>
             <div class="col-xs-4">
-                <dl class="dl-horizontal">
-                    <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
-                    <dd ng-if="fieldDef.options.length > 0">
-                        <updatable-select
-                            options="fieldDef.options"
-                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-select>
-                    </dd>
-                    <dd ng-if="fieldDef.options.length === 0" ng-switch="fieldDef.type">
-                        <updatable-simple-text ng-switch-when="string"
-                            input-type="text"
-                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
-                        <updatable-date ng-switch-when="date"
-                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-date>
-                        <updatable-simple-text ng-switch-when="integer"
-                            input-type="integer"
-                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
-                        <updatable-simple-text ng-switch-when="float"
-                           input-type="float"
-                           on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                           value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
-                        <updatable-boolean ng-switch-when="boolean"
-                            input-type="number"
-                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-boolean>
-                        <span ng-switch-default>Not Editable</span>
-                    </dd>
-                </dl>
+                <custom-field-input
+                    field="customFieldsCache[k]" on-update="updateField(fieldName, value)" editable="canEdit"
+                    value="caze.customFields[customFieldsCache[k].reference][customFieldsCache[k].type]"></custom-field-input>
             </div>
         </div>
     </div>
-
-    <div ng-if="!canEdit">
-        <div ng-repeat="k in orderedFields track by $index" ng-init="fieldDef = customFieldsCache[k];">
-            <div class="clearfix" ng-if="$index % 3 == 0"></div>
-            <div class="col-xs-4">
-                <dl class="dl-horizontal clear">
-                    <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
-                    <dd ng-switch="fieldDef.type">
-                        <span ng-switch-when="date">{{caze.customFields[fieldDef.reference][fieldDef.type] | shortDate}}</span>
-                        <span ng-switch-default>
-                            {{caze.customFields[fieldDef.reference][fieldDef.type]}}
-                            <em class="text-warning" ng-if="!caze.customFields[fieldDef.reference][fieldDef.type]">Not Specified</em>
-                        </span>
-                    </dd>
-                </dl>
-            </div>
-        </div>
-
-    </div>
-
 </div>