diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index b49c5d17d..62e09e088 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2436,7 +2436,7 @@ table {
     font-weight: normal;
   }
 
-  span {
+  span:not(.icon-flag) {
     color: #4f4f4f;
     font-size: rem-calc(12);
     text-transform: uppercase;
@@ -2452,4 +2452,4 @@ table {
 
 .images .button {
   margin-top: $line-height / 2;
-}
\ No newline at end of file
+}
diff --git a/app/views/relationable/_flag_actions.html.erb b/app/views/relationable/_flag_actions.html.erb
new file mode 100644
index 000000000..d501b098d
--- /dev/null
+++ b/app/views/relationable/_flag_actions.html.erb
@@ -0,0 +1,19 @@
+<span class="flag-content">
+  <% if show_flag_action? related %>
+    <a id="flag-expand-related-<%= related.id %>" data-toggle="flag-drop-related-<%= related.id %>" title="<%= t('shared.flag') %>" class="float-right flag">
+      <span class="icon-flag flag-disable"></span>
+    </a>
+    <span class="dropdown-pane" id="flag-drop-related-<%= related.id %>" data-dropdown data-auto-focus="true">
+      <%= link_to t('shared.flag'), flag_related_content_path(related), method: :put, remote: true, id: "flag-related-#{ related.id }" %>
+    </span>
+  <% end %>
+
+  <% if show_unflag_action? related %>
+    <a id="unflag-expand-related-<%= related.id %>" data-toggle="unflag-drop-related-<%= related.id %>" title="<%= t('shared.unflag') %>" class="float-right flag">
+      <span class="icon-flag flag-active"></span>
+    </a>
+    <span class="dropdown-pane" id="unflag-drop-related-<%= related.id %>" data-dropdown data-auto-focus="true">
+      <%= link_to t('shared.unflag'), unflag_related_content_path(related), method: :put, remote: true, id: "unflag-related-#{ related.id }" %>
+    </span>
+  <% end %>
+</span>
diff --git a/app/views/relationable/_refresh_flag_actions.js.erb b/app/views/relationable/_refresh_flag_actions.js.erb
new file mode 100644
index 000000000..d3755c4b1
--- /dev/null
+++ b/app/views/relationable/_refresh_flag_actions.js.erb
@@ -0,0 +1 @@
+$("#<%= dom_id(@related) %>.js-flag-actions").html('<%= j render("relationable/flag_actions", related: @related) %>');
diff --git a/app/views/relationable/_related_list.html.erb b/app/views/relationable/_related_list.html.erb
index 08fc931df..f1d86b748 100644
--- a/app/views/relationable/_related_list.html.erb
+++ b/app/views/relationable/_related_list.html.erb
@@ -1,9 +1,9 @@
 <ul class="related-content-list" id="related-content-list">
   <% @related_contents.each do |related| %>
     <li>
-      <a href="#" class="float-right flag">
-        <span class="icon-flag"></span> <!-- This should be similar to comments/flag_actions -->
-      </a>
+      <span id="<%= dom_id(related.relate_content(relationable)) %>" class="js-flag-actions">
+        <%= render 'relationable/flag_actions', related: related.relate_content(relationable) %>
+      </span>
 
       <span><%= t("related_content.content_title.#{related.class.name.downcase}") %></span><br>
       <h3 class="inline-block">