diff --git a/omod/src/main/compass/sass/allergy.scss b/omod/src/main/compass/sass/allergy.scss
index 35859d3..4cdb48f 100644
--- a/omod/src/main/compass/sass/allergy.scss
+++ b/omod/src/main/compass/sass/allergy.scss
@@ -17,6 +17,10 @@ label {
     display: inline;
 }
 
+#types {
+  margin: 10px 0px;
+}
+
 #allergy > form {
     width: 100%;
 }
@@ -32,7 +36,7 @@ label {
 }
 
 #allergens {
-  width: 55%;
+  width: 50%;
 }
 
 #reactions {
diff --git a/omod/src/main/webapp/pages/allergy.gsp b/omod/src/main/webapp/pages/allergy.gsp
index 01457ac..f11b186 100644
--- a/omod/src/main/webapp/pages/allergy.gsp
+++ b/omod/src/main/webapp/pages/allergy.gsp
@@ -75,10 +75,22 @@ ${ ui.includeFragment("allergyui", "removeAllergyDialog") }
                         <% allergens.each { allergen -> %>
                         <li>
                             <% if (allergen.id == otherNonCodedConcept.id) { %>
-                                <input id="allergen-${ typeName }" type="radio" name="codedAllergen" value="${allergen.id}" class="coded_allergens" ng-model="allergen"
+                                <input id="allergen-${ typeName }"
+                                    type="radio"
+                                    name="codedAllergen"
+                                    value="${allergen.id}"
+                                    ng-click="selectOtherAllergenRadioInput()"
+                                    class="coded_allergens"
+                                    ng-model="allergen"
                                     ${(allergy.allergen != null && allergen == allergy.allergen.codedAllergen) ? "checked=checked" : ""}/>
                             <% } else { %>
-                                <input id="allergen-${allergen.id}" type="radio" name="codedAllergen" value="${allergen.id}" class="coded_allergens" ng-model="allergen"
+                                <input id="allergen-${allergen.id}"
+                                    type="radio"
+                                    name="codedAllergen"
+                                    value="${allergen.id}"
+                                    ng-click="controlOtherAllergenInputVisibility()"
+                                    class="coded_allergens"
+                                    ng-model="allergen"
                                     ${(allergy.allergen != null && allergen == allergy.allergen.codedAllergen) ? "checked=checked" : ""}/>
                             <% } %>
                             <label for="allergen-${allergen.id}" id="allergen-${allergen.id}-label" class="coded_allergens_label" ng-click="otherFieldFocus()">${ui.format(allergen)}</label>
@@ -86,7 +98,12 @@ ${ ui.includeFragment("allergyui", "removeAllergyDialog") }
                             <% if (allergen.id == otherNonCodedConcept.id) { %>
                                 <% if(typeName == 'DRUG') { %>
                                     <input type="hidden" name="otherCodedAllergen" ng-value="otherCodedAllergen.concept ? 'CONCEPT:'+otherCodedAllergen.concept.uuid : 'NON_CODED:'+otherCodedAllergen.word">
-                                    <coded-or-free-text-answer id="${typeName}otherCodedAllergen" concept-classes="8d490dfc-c2cc-11de-8d13-0010c6dffd0f,b4535251-9183-4175-959e-9ee67dc71e78" ng-model="otherCodedAllergen" ng-click="otherFieldFocus()" />
+                                    <coded-or-free-text-answer
+                                        id="${typeName}otherCodedAllergen"
+                                        concept-classes="8d490dfc-c2cc-11de-8d13-0010c6dffd0f,b4535251-9183-4175-959e-9ee67dc71e78"
+                                        ng-model="otherCodedAllergen"
+                                        ng-click="otherFieldFocus()"
+                                        ng-init="controlOtherAllergenInputVisibility()"/>
                                 <% } else {%>
                             	    <input type="text" maxlength="255" id="${typeName}nonCodedAllergen" name="nonCodedAllergen" ng-model="nonCodedAllergen" ng-focus="otherFieldFocus()"/>
                                 <% } %>
@@ -103,10 +120,33 @@ ${ ui.includeFragment("allergyui", "removeAllergyDialog") }
             <ul>
             <% reactionConcepts.each { reaction -> %>
                 <li>
-                    <input ng-model="reaction${reaction.id}" type="checkbox" id="reaction-${reaction.id}" class="allergy-reaction" name="allergyReactionConcepts" value="${reaction.id}" ng-init="reaction${reaction.id} = ${ allergyReactionConcepts.contains(reaction) }" />
-                    <label for="reaction-${reaction.id}">${ui.format(reaction)}</label>
                     <% if (reaction.id == otherNonCodedConcept.id) { %>
-                    	<input type="text" maxlength="255" name="reactionNonCoded" ng-focus="otherReactionFocus(${reaction.id})" <% if (allergy.reactionNonCoded) { %> value="${allergy.reactionNonCoded}" <% } %>/>
+                        <input
+                            ng-model="reaction${reaction.id}"
+                            type="checkbox"
+                            id="reaction-${reaction.id}"
+                            class="allergy-reaction"
+                            name="allergyReactionConcepts"
+                            value="${reaction.id}"
+                            ng-click="controlOtherReactionInputVisibility(${reaction.id})"
+                            ng-init="reaction${reaction.id} = ${allergyReactionConcepts.contains(reaction)}"/>
+                        <label for="reaction-${reaction.id}"
+                            ng-click="controlOtherReactionInputVisibility(${reaction.id})">${ui.format(reaction)}</label>
+                        <input type="text"
+                            maxlength="255"
+                            name="reactionNonCoded"
+                            ng-init="initOtherReactionInputVisibility(reaction${reaction.id})"
+                            ng-focus="otherReactionFocus(${reaction.id})"
+                            <% if (allergy.reactionNonCoded) { %> value="${allergy.reactionNonCoded}" <% } %>/>
+                    <% } else { %>
+                        <input ng-model="reaction${reaction.id}"
+                            type="checkbox"
+                            id="reaction-${reaction.id}"
+                            class="allergy-reaction"
+                            name="allergyReactionConcepts"
+                            value="${reaction.id}"
+                            ng-init="reaction${reaction.id} = ${allergyReactionConcepts.contains(reaction)}"/>
+                        <label for="reaction-${reaction.id}">${ui.format(reaction)}</label>
                     <% } %>
                 </li>
             <% } %>
diff --git a/omod/src/main/webapp/resources/scripts/allergy.js b/omod/src/main/webapp/resources/scripts/allergy.js
index f7b8ac7..a52f2d3 100644
--- a/omod/src/main/webapp/resources/scripts/allergy.js
+++ b/omod/src/main/webapp/resources/scripts/allergy.js
@@ -1,5 +1,5 @@
 var app = angular.module("allergyApp", ['uicommons.widget.coded-or-free-text-answer']);
-	
+
 app.controller("allergyController", [ '$scope', function($scope) {
 
     $scope.allergen = null;
@@ -27,26 +27,64 @@ app.controller("allergyController", [ '$scope', function($scope) {
         $scope.allergen = null;
         $scope.nonCodedAllergen = null;
         $scope.otherCodedAllergen = null;
-        $('.coded_allergens').attr('checked', false);
+        $('.coded_allergens').prop('checked', false);
+        $('[ng-model=otherCodedAllergen]').hide();
+        $('[ng-model=nonCodedAllergen]').hide();
     });
 
     $scope.$watch('allergen', function(newValue, oldValue) {
         // if you had already specified allergen, then change it, clear other fields
         if (oldValue) {
-            $('input.allergy-reaction').attr('checked', false);
-            $('input.allergy-severity').attr('checked', false);
+            $('input.allergy-reaction').prop('checked', false);
+            $('input.allergy-severity').prop('checked', false);
             $('#allergy-comment').val('');
+            $('[ng-model=otherCodedAllergen]').hide();
+            $('[name=reactionNonCoded]').hide();
 
             $scope.nonCodedAllergen = null;
             $scope.otherCodedAllergen = null;
         }
     });
 
+    $scope.controlOtherAllergenInputVisibility = function() {
+        if ($('#allergen-' + $scope.allergenType).prop('checked')) {
+            $('[ng-model=otherCodedAllergen]').show();
+            $('[ng-model=nonCodedAllergen]').show();
+        } else {
+            $('[ng-model=otherCodedAllergen]').hide();
+            $('[ng-model=nonCodedAllergen]').hide();
+        }
+    }
+
+    $scope.controlOtherReactionInputVisibility = function(reactionId) {
+        if ($('#reaction-' + reactionId).prop('checked')) {
+            $('[name=reactionNonCoded]').show();
+        } else {
+            $('[name=reactionNonCoded]').hide();
+        }
+    }
+
+    $scope.initOtherReactionInputVisibility = function(isOtherReactionEnabled) {
+       if (isOtherReactionEnabled) {
+           $('[name=reactionNonCoded]').show();
+       } else {
+           $('[name=reactionNonCoded]').hide();
+       }
+    }
+
     $scope.otherFieldFocus = function() {
-        $('#allergen-' + $scope.allergenType).attr('checked', true);
+        $('#allergen-' + $scope.allergenType).prop('checked', true);
+        $scope.controlOtherAllergenInputVisibility();
     };
 
+
     $scope.otherReactionFocus = function(reactionId) {
-        $('#reaction-' + reactionId).attr('checked', true);
+        $('#reaction-' + reactionId).prop('checked', true);
+        $scope.controlOtherReactionInputVisibility(reactionId);
     };
+
+    $scope.selectOtherAllergenRadioInput = function() {
+        $('#allergen-' + $scope.allergenType).prop('checked', true);
+        $scope.controlOtherAllergenInputVisibility();
+    }
 }]);
\ No newline at end of file