diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 7edcaf1324..8fec583450 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -73,7 +73,13 @@
 				<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer :class="$style.footer">
-				<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<MkReactionsViewer ref="reactionsViewer" :note="appearNote" :max-number="16">
+					<template v-slot:extras>
+						<button v-if="Object.keys(appearNote.reactions).length > 0" class="_button" :class="$style.reactionDetailsButton" @click="showReactions">
+							<i class="ti ti-question-mark"></i>
+						</button>
+					</template>
+				</MkReactionsViewer>
 				<button :class="$style.footerButton" class="_button" @click="reply()">
 					<i class="ti ti-arrow-back-up"></i>
 					<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p>
@@ -116,7 +122,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, reactive, ref, shallowRef, Ref } from 'vue';
+import { computed, inject, onMounted, onUnmounted, reactive, ref, shallowRef, Ref, defineAsyncComponent } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -350,6 +356,12 @@ function readPromo() {
 	});
 	isDeleted.value = true;
 }
+
+function showReactions(): void {
+	os.popup(defineAsyncComponent(() => import('@/components/MkReactedUsersDialog.vue')), {
+		noteId: appearNote.id,
+	}, {}, 'closed');
+}
 </script>
 
 <style lang="scss" module>
@@ -652,4 +664,17 @@ function readPromo() {
 	text-align: center;
 	opacity: 0.7;
 }
+
+.reactionDetailsButton {
+	display: inline-block;
+	height: 32px;
+	margin: 2px;
+	padding: 0 6px;
+	border-radius: 4px;
+	background: rgba(0, 0, 0, 0.05);
+
+	&:hover {
+		background: rgba(0, 0, 0, 0.1);
+	}
+}
 </style>
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index 5981471c68..572b91cf2a 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -7,23 +7,27 @@
 	:move-class="$store.state.animation ? $style.transition_x_move : ''"
 	tag="div" :class="$style.root"
 >
-	<XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
+	<template v-for="([reaction, count], i) in reactions">
+		<XReaction v-if="!maxNumber || i < maxNumber" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
+	</template>
+	<slot name="extras" />
 </TransitionGroup>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import * as misskey from 'misskey-js';
-import { $i } from '@/account';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
+	maxNumber?: number;
 }>();
 
 const initialReactions = new Set(Object.keys(props.note.reactions));
 
-const isMe = computed(() => $i && $i.id === props.note.userId);
+const reactions = $computed(() => {
+	return Object.entries(props.note.reactions).sort(([, countA], [, countB]) => countB - countA);
+});
 </script>
 
 <style lang="scss" module>