diff --git a/src/templates/fragments/reminder-notification-fragment.html b/src/templates/fragments/reminder-notification-fragment.html
index 16fbc1cc7b..855c158b2b 100644
--- a/src/templates/fragments/reminder-notification-fragment.html
+++ b/src/templates/fragments/reminder-notification-fragment.html
@@ -67,20 +67,28 @@ <h2 ng-if="inputType === 'value'" style="white-space: normal; line-height: norma
     </div>
 </div>
 <div class="primary-outcome-variable-reporting" ng-if="trackingReminderNotification.inputType === 'oneToFiveNumbers'">
-    <div class="primary-outcome-variable-rating-buttons"><img ng-repeat="option in numericRatingOptions"
-                                                              ng-click="track(trackingReminderNotification, option.numericValue, $event)"
-                                                              ng-src="{{option.img}}"></div>
+    <div class="primary-outcome-variable-rating-buttons">
+        <button ng-repeat="option in numericRatingOptions" ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}">
+        </button>
+    </div>
     <br>
 </div>
 <div class="primary-outcome-variable-reporting" ng-if="trackingReminderNotification.inputType === 'happiestFaceIsFive'">
-    <div class="primary-outcome-variable-rating-buttons"><img ng-repeat="option in positiveRatingOptions"
-                                                              ng-click="track(trackingReminderNotification, option.numericValue, $event)"
-                                                              ng-src="{{option.img}}"> <br></div>
+    <div class="primary-outcome-variable-rating-buttons">
+        <button ng-repeat="option in positiveRatingOptions" ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}">
+        </button>
+        <br>
+    </div>
     <br>
 </div>
 <div class="primary-outcome-variable-reporting" ng-if="trackingReminderNotification.inputType === 'saddestFaceIsFive'">
-    <div class="primary-outcome-variable-rating-buttons"><img ng-repeat="option in negativeRatingOptions"
-                                                              ng-click="track(trackingReminderNotification, option.numericValue, $event)"
-                                                              ng-src="{{option.img}}"> <br></div>
+    <div class="primary-outcome-variable-rating-buttons">
+        <button ng-repeat="option in negativeRatingOptions" ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}">
+        </button>
+        <br>
+    </div>
     <br>
 </div>
\ No newline at end of file
diff --git a/src/templates/items/notification-item.html b/src/templates/items/notification-item.html
index dfb973dc56..41ce06b03b 100644
--- a/src/templates/items/notification-item.html
+++ b/src/templates/items/notification-item.html
@@ -95,25 +95,38 @@ <h2 style="white-space: normal; line-height: normal; ">{{trackingReminderNotific
 <div id="numericRatingOptions" class="primary-outcome-variable-reporting"
      ng-if="trackingReminderNotification.inputType === 'oneToFiveNumbers'">
     <div class="primary-outcome-variable-rating-buttons">
-        <img id="{{'numericRatingOptions' + option.numericValue}}" ng-repeat="option in numericRatingOptions"
+        <button id="{{'numericRatingOptions' + option.numericValue}}" ng-repeat="option in numericRatingOptions"
+                style="width: 18%; background: none; border: none;"
              on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
-             ng-click="track(trackingReminderNotification, option.numericValue, $event)" ng-src="{{option.img}}">
+                ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}"
+                 style="width: 100%;">
+        </button>
     </div>
 </div>
 <div id="happiestFaceIsFive" class="primary-outcome-variable-reporting"
      ng-if="trackingReminderNotification.inputType === 'happiestFaceIsFive'">
     <div class="primary-outcome-variable-rating-buttons">
-        <img id="{{'positiveRatingOptions' + option.numericValue}}" ng-repeat="option in positiveRatingOptions"
-             on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
-             ng-click="track(trackingReminderNotification, option.numericValue, $event)" ng-src="{{option.img}}">
+        <button id="{{'positiveRatingOptions' + option.numericValue}}" ng-repeat="option in positiveRatingOptions"
+                style="width: 18%; background: none; border: none;"
+                 on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
+                 ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}"
+                 style="width: 100%;">
+        </button>
     </div>
 </div>
 <div id="saddestFaceIsFive" class="primary-outcome-variable-reporting"
      ng-if="trackingReminderNotification.inputType === 'saddestFaceIsFive'">
     <div class="primary-outcome-variable-rating-buttons">
-        <img id="{{'negativeRatingOptions' + option.numericValue}}" ng-repeat="option in negativeRatingOptions"
-             on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
-             ng-click="track(trackingReminderNotification, option.numericValue, $event)" ng-src="{{option.img}}">
+        <button id="{{'negativeRatingOptions' + option.numericValue}}"
+                style="width: 18%; background: none; border: none;"
+                ng-repeat="option in negativeRatingOptions"
+                on-hold="trackAllWithConfirmation(trackingReminderNotification, option.numericValue, $event)"
+                ng-click="track(trackingReminderNotification, option.numericValue, $event)">
+            <img ng-src="{{option.img}}"
+                 style="width: 100%;">
+        </button>
     </div>
 </div>
 <div class="row" ng-if="trackingReminderNotification.unitAbbreviatedName.indexOf('yes/no') !== -1 ">
diff --git a/src/templates/reminders-inbox-compact.html b/src/templates/reminders-inbox-compact.html
index 7225da650e..f52645e328 100644
--- a/src/templates/reminders-inbox-compact.html
+++ b/src/templates/reminders-inbox-compact.html
@@ -73,28 +73,31 @@ <h2 style="white-space: normal; line-height: normal; ">{{trackingReminderNotific
         <div class="primary-outcome-variable-reporting"
              ng-if="trackingReminderNotifications[0].inputType === 'oneToFiveNumbers'">
             <div class="primary-outcome-variable-rating-buttons">
-                <img id="{{'numericRatingOptions' + option.numericValue}}" ng-repeat="option in numericRatingOptions"
+                <button id="{{'numericRatingOptions' + option.numericValue}}" ng-repeat="option in numericRatingOptions"
                      on-hold="trackAllWithConfirmation(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-src="{{option.img}}">
+                     ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)">
+                    <img ng-src="{{option.img}}">
+                </button>
             </div>
         </div>
         <div class="primary-outcome-variable-reporting"
              ng-if="trackingReminderNotifications[0].inputType === 'happiestFaceIsFive'">
             <div class="primary-outcome-variable-rating-buttons">
-                <img id="{{'positiveRatingOptions' + option.numericValue}}" ng-repeat="option in positiveRatingOptions"
+                <button id="{{'positiveRatingOptions' + option.numericValue}}" ng-repeat="option in positiveRatingOptions"
                      on-hold="trackAllWithConfirmation(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-src="{{option.img}}">
+                    ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)">
+                    <img ng-src="{{option.img}}">
+                </button>
             </div>
         </div>
         <div class="primary-outcome-variable-reporting"
              ng-if="trackingReminderNotifications[0].inputType === 'saddestFaceIsFive'">
             <div class="primary-outcome-variable-rating-buttons">
-                <img id="{{'negativeRatingOptions' + option.numericValue}}" ng-repeat="option in negativeRatingOptions"
+                <button id="{{'negativeRatingOptions' + option.numericValue}}" ng-repeat="option in negativeRatingOptions"
                      on-hold="trackAllWithConfirmation(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)"
-                     ng-src="{{option.img}}">
+                    ng-click="track(trackingReminderNotifications[0], option.numericValue, $event)">
+                    <img ng-src="{{option.img}}">
+                </button>
             </div>
         </div>
         <div class="row" ng-if="trackingReminderNotifications[0].unitAbbreviatedName.indexOf('yes/no') !== -1 ">