diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index b1313d99e..6d8e27608 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -141,7 +141,7 @@
   --reaction-bg: transparent;
 
   border: none;
-  padding: 0;
+  padding: var(--su-1);
   background: transparent;
   display: inline-flex;
   flex-direction: row;
@@ -168,7 +168,6 @@
   }
 
   &__icon {
-    padding: var(--su-2);
     box-shadow: var(--reaction-border);
     background: var(--reaction-bg);
     color: var(--reaction-color);
@@ -211,6 +210,10 @@
     .crayons-reaction__icon--active {
       display: block;
     }
+
+    .crayons-reaction__count {
+      color: var(--reaction-color);
+    }
   }
 
   &--like {
@@ -248,12 +251,13 @@
 
 // This overrides some of the styles for the temporarily feature-flaged
 .reaction-drawer .crayons-reaction {
-  border: 1px solid var(--card-bg);
+  border: 0px solid var(--card-bg);
   flex-direction: column;
+  padding: 8px 8px 4px 8px;
 
   &.user-activated {
     background-color: var(--body-bg);
-    border: 1px solid #d4d4d4;
+    border: 0px solid #d4d4d4;
     border-radius: 20px;
 
     .crayons-reaction__icon--active {
@@ -415,19 +419,18 @@
   display: none; // Initially hidden
 
   // Copying from Dropdown for now
-  padding: var(--su-2);
+  padding: var(--su-3);
   min-width: 250px;
   margin-top: var(--su-1);
   z-index: var(--z-dropdown);
   background: var(--card-bg);
   color: var(--card-color);
   box-shadow: var(--shadow-1);
-  border-radius: var(--radius);
 
   flex-direction: column;
 
   @media (min-width: $breakpoint-m) {
-    max-width: 360px;
+    max-width: 450px;
     width: max-content;
     top: -5px;
     left: 55px;
@@ -437,9 +440,14 @@
     min-width: auto;
     margin-left: 0;
     display: block;
+    font-size: 14px;
   }
 }
 
+.crayons-reaction_total_count {
+  color: var(--btn-color); // Mobile safari button text blue bug
+}
+
 .reaction-drawer__outer:hover .reaction-drawer {
   @media (min-width: $breakpoint-m) {
     display: block;
@@ -477,11 +485,11 @@
     height: 28px;
   }
 
-  img {
+  svg {
     margin: 3px 3px;
   }
 
   .aggregate_reactions_counter {
     margin-left: 1em;
   }
-}
+}
\ No newline at end of file
diff --git a/app/views/articles/_multireaction_button.html.erb b/app/views/articles/_multireaction_button.html.erb
index 21435ee58..eb3efeb3c 100644
--- a/app/views/articles/_multireaction_button.html.erb
+++ b/app/views/articles/_multireaction_button.html.erb
@@ -5,12 +5,12 @@
   class="crayons-reaction crayons-tooltip__activator relative"
   data-category="<%= category %>">
     <span class="crayons-reaction__icon crayons-reaction__icon--inactive">
-      <%= image_tag image_path, aria_hidden: true, height: 24, width: 24 %>
+      <%= image_tag image_path, aria_hidden: true, height: 32, width: 32 %>
     </span>
     <%# TODO: This can be straightened out after feature-flag -- double icons are not required now %>
     <% if user_signed_in? # We cannot trigger the action state unless the user is signed in, so no need to render. %>
       <span class="crayons-reaction__icon crayons-reaction__icon--active">
-        <%= image_tag image_active_path, aria_hidden: true, height: 24, width: 24 %>
+        <%= image_tag image_active_path, aria_hidden: true, height: 32, width: 32 %>
       </span>
     <% end %>
     <span class="crayons-reaction__count" id="reaction-number-<%= category %>"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>