diff --git a/app/controllers/api/v1/statuses/reactions_controller.rb b/app/controllers/api/v1/statuses/reactions_controller.rb
index 2d7e4f59846220..c4b0fa307f419a 100644
--- a/app/controllers/api/v1/statuses/reactions_controller.rb
+++ b/app/controllers/api/v1/statuses/reactions_controller.rb
@@ -1,11 +1,8 @@
 # frozen_string_literal: true
 
-class Api::V1::Statuses::ReactionsController < Api::BaseController
-  include Authorization
-
+class Api::V1::Statuses::ReactionsController < Api::V1::Statuses::BaseController
   before_action -> { doorkeeper_authorize! :write, :'write:favourites' }
   before_action :require_user!
-  before_action :set_status
 
   def create
     ReactService.new.call(current_account, @status, params[:id])
@@ -19,13 +16,4 @@ def destroy
   rescue Mastodon::NotPermittedError
     not_found
   end
-
-  private
-
-  def set_status
-    @status = Status.find(params[:status_id])
-    authorize @status, :show?
-  rescue Mastodon::NotPermittedError
-    not_found
-  end
 end
diff --git a/app/javascript/flavours/glitch/components/status_action_bar.jsx b/app/javascript/flavours/glitch/components/status_action_bar.jsx
index dea7c47fd59f3d..c06333593f366a 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.jsx
+++ b/app/javascript/flavours/glitch/components/status_action_bar.jsx
@@ -338,7 +338,7 @@ class StatusActionBar extends ImmutablePureComponent {
         onClick={this.handleNoOp} // EmojiPickerDropdown handles that
         title={intl.formatMessage(messages.react)}
         disabled={!canReact}
-        icon='add-reaction'
+        icon='add_reaction'
         iconComponent={AddReactionIcon}
       />
     );
diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx
index 11835e8d14633f..7cb1599ac24b49 100644
--- a/app/javascript/flavours/glitch/components/status_prepend.jsx
+++ b/app/javascript/flavours/glitch/components/status_prepend.jsx
@@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
+import AddReactionIcon from '@/material-icons/400-24px/add_reaction.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
@@ -130,7 +131,8 @@ export default class StatusPrepend extends PureComponent {
       iconComponent = StarIcon;
       break;
     case 'reaction':
-      iconId = 'plus';
+      iconId = 'add_reaction';
+      iconComponent = AddReactionIcon;
       break;
     case 'featured':
       iconId = 'thumb-tack';
diff --git a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
index 564d16092a132e..13aba0d0efbc2a 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
@@ -3,6 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
+import AddReactionIcon from '@/material-icons/400-24px/add_reaction.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
 import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
@@ -88,7 +89,7 @@ class FilterBar extends PureComponent {
           onClick={this.onClick('reaction')}
           title={intl.formatMessage(tooltips.reactions)}
         >
-          <Icon id='plus' fixedWidth />
+          <Icon id='add_reaction' icon={AddReactionIcon} />
         </button>
         <button
           className={selectedFilter === 'reblog' ? 'active' : ''}
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
index 85acabc4ce0469..b057b7e3be2642 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
@@ -244,11 +244,11 @@ class ActionBar extends PureComponent {
     const canReact = signedIn && status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
     const reactButton = (
       <IconButton
-        className='plus-icon'
+        className='add-reaction-icon'
         onClick={this.handleNoOp} // EmojiPickerDropdown handles that
         title={intl.formatMessage(messages.react)}
         disabled={!canReact}
-        icon='add-reaction'
+        icon='add_reaction'
         iconComponent={AddReactionIcon}
       />
     );
diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js
index 340291594fa537..ff41a57dfe61ae 100644
--- a/app/javascript/flavours/glitch/reducers/statuses.js
+++ b/app/javascript/flavours/glitch/reducers/statuses.js
@@ -47,6 +47,43 @@ const deleteStatus = (state, id, references) => {
   return state.delete(id);
 };
 
+const updateReaction = (state, id, name, updater) => state.update(
+  id,
+  status => status.update(
+    'reactions',
+    reactions => {
+      const index = reactions.findIndex(reaction => reaction.get('name') === name);
+      if (index > -1) {
+        return reactions.update(index, reaction => updater(reaction));
+      } else {
+        return reactions.push(updater(fromJS({ name, count: 0 })));
+      }
+    },
+  ),
+);
+
+const updateReactionCount = (state, reaction) => updateReaction(state, reaction.status_id, reaction.name, x => x.set('count', reaction.count));
+
+// The url parameter is only used when adding a new custom emoji reaction
+// (one that wasn't in the reactions list before) because we don't have its
+// URL yet.  In all other cases, it's undefined.
+const addReaction = (state, id, name, url) => updateReaction(
+  state,
+  id,
+  name,
+  x => x.set('me', true)
+    .update('count', n => n + 1)
+    .update('url', old => old ? old : url)
+    .update('static_url', old => old ? old : url),
+);
+
+const removeReaction = (state, id, name) => updateReaction(
+  state,
+  id,
+  name,
+  x => x.set('me', false).update('count', n => n - 1),
+);
+
 const statusTranslateSuccess = (state, id, translation) => {
   return state.withMutations(map => {
     map.setIn([id, 'translation'], fromJS(normalizeStatusTranslation(translation, map.get(id))));
diff --git a/app/javascript/images/mailer-new/heading/reaction.png b/app/javascript/images/mailer-new/heading/reaction.png
new file mode 100644
index 00000000000000..2e2969953ea48c
Binary files /dev/null and b/app/javascript/images/mailer-new/heading/reaction.png differ
diff --git a/app/javascript/material-icons/400-24px/add_reaction-fill.svg b/app/javascript/material-icons/400-24px/add_reaction-fill.svg
new file mode 100644
index 00000000000000..3ea1c30a525580
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/add_reaction-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M800-680v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q43 0 83 8.5t77 24.5v167h80v80h142q9 29 13.5 58.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
\ No newline at end of file
diff --git a/app/javascript/material-icons/400-24px/add_reaction.svg b/app/javascript/material-icons/400-24px/add_reaction.svg
new file mode 100644
index 00000000000000..77aace24b0c684
--- /dev/null
+++ b/app/javascript/material-icons/400-24px/add_reaction.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-480Zm0 400q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q43 0 83 8.5t77 24.5v90q-35-20-75.5-31.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-32-6.5-62T776-600h86q9 29 13.5 58.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm320-600v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Z"/></svg>
\ No newline at end of file
diff --git a/app/lib/activitypub/activity/like.rb b/app/lib/activitypub/activity/like.rb
index f6c8769fee4cae..006382082549a4 100644
--- a/app/lib/activitypub/activity/like.rb
+++ b/app/lib/activitypub/activity/like.rb
@@ -5,7 +5,7 @@ def perform
     original_status = status_from_uri(object_uri)
     return if original_status.nil? || !original_status.account.local? || delete_arrived_first?(@json['id'])
 
-    return if maybe_process_misskey_reaction
+    return if maybe_process_embedded_reaction
 
     return if @account.favourited?(original_status)
 
@@ -15,10 +15,10 @@ def perform
     Trends.statuses.register(original_status)
   end
 
-  # Misskey delivers reactions as likes with the emoji in _misskey_reaction and content
-  # Versions of Misskey before 12.1.0 only specify emojis in _misskey_reaction, so we check both
+  # Some servers deliver reactions as likes with the emoji in content
+  # Versions of Misskey before 12.1.0 specify emojis in _misskey_reaction instead, so we check both
   # See https://misskey-hub.net/ns.html#misskey-reaction for details
-  def maybe_process_misskey_reaction
+  def maybe_process_embedded_reaction
     original_status = status_from_uri(object_uri)
     name = @json['content'] || @json['_misskey_reaction']
     return false if name.nil?
diff --git a/app/models/concerns/account/interactions.rb b/app/models/concerns/account/interactions.rb
index b061dfb7d2a218..997aefda7acb43 100644
--- a/app/models/concerns/account/interactions.rb
+++ b/app/models/concerns/account/interactions.rb
@@ -234,6 +234,10 @@ def reacted?(status, name, custom_emoji = nil)
     status.proper.status_reactions.where(account: self, name: name, custom_emoji: custom_emoji).exists?
   end
 
+  def reacted?(status, name, custom_emoji = nil)
+    status.proper.status_reactions.exists?(account: self, name: name, custom_emoji: custom_emoji)
+  end
+
   def bookmarked?(status)
     status.proper.bookmarks.exists?(account: self)
   end
diff --git a/app/models/status.rb b/app/models/status.rb
index 4d98be80448ddf..33998a2b877df1 100644
--- a/app/models/status.rb
+++ b/app/models/status.rb
@@ -284,20 +284,13 @@ def emojis
   end
 
   def reactions(account = nil)
-    records = begin
-      scope = status_reactions.group(:status_id, :name, :custom_emoji_id).order(Arel.sql('MIN(created_at) ASC'))
-
-      if account.nil?
-        scope.select('name, custom_emoji_id, count(*) as count, false as me')
-      else
-        # rubocop:disable Layout/LineLength
-        scope.select("name, custom_emoji_id, count(*) as count, exists(select 1 from status_reactions r where r.account_id = #{account.id} and r.status_id = status_reactions.status_id and r.name = status_reactions.name and (r.custom_emoji_id = status_reactions.custom_emoji_id or r.custom_emoji_id is null and status_reactions.custom_emoji_id is null)) as me")
-        # rubocop:enable Layout/LineLength
+    grouped_ordered_status_reactions.select(
+      [:name, :custom_emoji_id, 'COUNT(*) as count'].tap do |values|
+        values << value_for_reaction_me_column(account)
       end
+    ).to_a.tap do |records|
+      ActiveRecord::Associations::Preloader.new(records: records, associations: :custom_emoji).call
     end
-
-    ActiveRecord::Associations::Preloader.new(records: records, associations: :custom_emoji)
-    records
   end
 
   def ordered_media_attachments
@@ -487,6 +480,35 @@ def unlink_from_conversations!
 
   private
 
+  def grouped_ordered_status_reactions
+    status_reactions
+      .group(:status_id, :name, :custom_emoji_id)
+      .order(
+        Arel.sql('MIN(created_at)').asc
+      )
+  end
+
+  def value_for_reaction_me_column(account)
+    if account.nil?
+      'FALSE AS me'
+    else
+      <<~SQL.squish
+        EXISTS(
+          SELECT 1
+          FROM status_reactions inner_reactions
+          WHERE inner_reactions.account_id = #{account.id}
+            AND inner_reactions.status_id = status_reactions.status_id
+            AND inner_reactions.name = status_reactions.name
+            AND (
+              inner_reactions.custom_emoji_id = status_reactions.custom_emoji_id
+              OR inner_reactions.custom_emoji_id IS NULL
+                AND status_reactions.custom_emoji_id IS NULL
+            )
+        ) AS me
+      SQL
+    end
+  end
+
   def update_status_stat!(attrs)
     return if marked_for_destruction? || destroyed?
 
diff --git a/app/views/notification_mailer/reaction.html.haml b/app/views/notification_mailer/reaction.html.haml
index 83ae41927d3f99..32427d58e5177f 100644
--- a/app/views/notification_mailer/reaction.html.haml
+++ b/app/views/notification_mailer/reaction.html.haml
@@ -1,45 +1,13 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
-  %tbody
-    %tr
-      %td.email-body
-        .email-container
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
+= content_for :heading do
+  = render 'application/mailer/heading', heading_title: t('notification_mailer.reaction.title'), heading_subtitle: t('notification_mailer.reaction.body', name: @account.pretty_acct), heading_image_url: frontend_asset_url('images/mailer-new/heading/reaction.png')
+%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+  %tr
+    %td.email-body-padding-td
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+        %tr
+          %td.email-inner-card-td
+            = render 'status', status: @status, time_zone: @me.user_time_zone
+            %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
               %tr
-                %td.content-cell.hero
-                  .email-row
-                    .col-6
-                      %table.column{ cellspacing: 0, cellpadding: 0 }
-                        %tbody
-                          %tr
-                            %td.column-cell.text-center.padded
-                              %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 }
-                                %tbody
-                                  %tr
-                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_add.png'), alt: ''
-
-                              %h1= t 'notification_mailer.reaction.title'
-                              %p.lead= t('notification_mailer.reaction.body', name: @account.pretty_acct)
-
-= render 'status', status: @status, time_zone: @me.user_time_zone
-
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
-  %tbody
-    %tr
-      %td.email-body
-        .email-container
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
-              %tr
-                %td.content-cell.content-start.border-top
-                  %table.column{ cellspacing: 0, cellpadding: 0 }
-                    %tbody
-                      %tr
-                        %td.column-cell.button-cell
-                          %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 }
-                            %tbody
-                              %tr
-                                %td.button-primary
-                                  = link_to web_url("@#{@status.account.pretty_acct}/#{@status.id}") do
-                                    %span= t 'application_mailer.view_status'
+                %td.email-padding-top-24
+                  = render 'application/mailer/button', text: t('application_mailer.view_status'), url: web_url("@#{@status.account.pretty_acct}/#{@status.id}")