diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue
index 67774cbb39..8f9324096a 100644
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -1,7 +1,7 @@
 <template>
 <button
 	class="hkzvhatu _button"
-	:class="{ reacted: note.myReaction == reaction }"
+	:class="{ reacted: note.myReaction == reaction, canToggle }"
 	@click="toggleReaction(reaction)"
 	v-if="count > 0"
 	@mouseover="onMouseover"
@@ -40,11 +40,6 @@ export default Vue.extend({
 			type: Object,
 			required: true,
 		},
-		canToggle: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
 	},
 	data() {
 		return {
@@ -57,6 +52,9 @@ export default Vue.extend({
 		isMe(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.id === this.note.userId;
 		},
+		canToggle(): boolean {
+			return !this.reaction.match(/@\w/);
+		},
 	},
 	mounted() {
 		if (!this.isInitial) this.anime();
@@ -144,6 +142,18 @@ export default Vue.extend({
 	padding: 0 6px;
 	border-radius: 4px;
 
+	&.canToggle {
+		background: rgba(0, 0, 0, 0.05);
+
+		&:hover {
+			background: rgba(0, 0, 0, 0.1);
+		}
+	}
+
+	&:not(.canToggle) {
+		cursor: default;
+	}
+
 	&.reacted {
 		background: var(--accent);
 
@@ -152,14 +162,6 @@ export default Vue.extend({
 		}
 	}
 
-	&:not(.reacted) {
-		background: rgba(0, 0, 0, 0.05);
-
-		&:hover {
-			background: rgba(0, 0, 0, 0.1);
-		}
-	}
-
 	> span {
 		font-size: 0.9em;
 		line-height: 32px;
diff --git a/src/misc/reaction-lib.ts b/src/misc/reaction-lib.ts
index d59fb67a6b..e9a9d4f7c9 100644
--- a/src/misc/reaction-lib.ts
+++ b/src/misc/reaction-lib.ts
@@ -70,7 +70,7 @@ export async function toDbReaction(reaction?: string | null, reacterHost?: strin
 		return unicode.match('\u200d') ? unicode : unicode.replace(/\ufe0f/g, '');
 	}
 
-	const custom = reaction.match(/^:([\w+-]+):$/);
+	const custom = reaction.match(/^:([\w+-]+)(?:@\.)?:$/);
 	if (custom) {
 		const name = custom[1];
 		const emoji = await Emojis.findOne({
diff --git a/src/services/note/reaction/create.ts b/src/services/note/reaction/create.ts
index 70cb1adf4b..c650b2e103 100644
--- a/src/services/note/reaction/create.ts
+++ b/src/services/note/reaction/create.ts
@@ -72,13 +72,13 @@ export default async (user: User, note: Note, reaction?: string) => {
 
 	if (emoji) {
 		emoji = {
-			name: emoji.host ? `${emoji.name}@${emoji.host}` : `${emoji.name}`,
+			name: emoji.host ? `${emoji.name}@${emoji.host}` : `${emoji.name}@.`,
 			url: emoji.url
 		} as any;
 	}
 
 	publishNoteStream(note.id, 'reacted', {
-		reaction: reaction,
+		reaction: decodedReaction.reaction,
 		emoji: emoji,
 		userId: user.id
 	});
diff --git a/src/services/note/reaction/delete.ts b/src/services/note/reaction/delete.ts
index fd6628c71f..3f7dda7bc3 100644
--- a/src/services/note/reaction/delete.ts
+++ b/src/services/note/reaction/delete.ts
@@ -7,6 +7,7 @@ import { IdentifiableError } from '../../../misc/identifiable-error';
 import { User, IRemoteUser } from '../../../models/entities/user';
 import { Note } from '../../../models/entities/note';
 import { NoteReactions, Users, Notes } from '../../../models';
+import { decodeReaction } from '../../../misc/reaction-lib';
 
 export default async (user: User, note: Note) => {
 	// if already unreacted
@@ -38,7 +39,7 @@ export default async (user: User, note: Note) => {
 	Notes.decrement({ id: note.id }, 'score', 1);
 
 	publishNoteStream(note.id, 'unreacted', {
-		reaction: exist.reaction,
+		reaction: decodeReaction(exist.reaction).reaction,
 		userId: user.id
 	});