diff --git a/dist/index.css b/dist/index.css
index b9c5b62d..27a29b06 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -747,7 +747,7 @@ body[showing-chat] #chat-page-wrapper {
   display: none;
 }
 .message-reaction-row {
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
 }
 
 /* src/View/ChatPages/taskPage.css */
diff --git a/dist/index.js b/dist/index.js
index 12cd7ebe..9d665043 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1495,7 +1495,7 @@
         const fileContent = FileModel2.createFileContent(v4_default(), "reaction");
         const reaction = {
           ...fileContent,
-          fileId: sender,
+          fileId: _ChatModel.createMessageReactionId(messageId, content, sender),
           messageId,
           sender,
           content,
@@ -1504,7 +1504,25 @@
         return reaction;
       };
     }
+    static {
+      this.createMessageReactionId = (messageId, content, sender) => {
+        console.log(reactionStringMap, content, reactionStringMap[content]);
+        return messageId + sender + reactionStringMap[content];
+      };
+    }
   };
+  var ReactionSymbols = /* @__PURE__ */ ((ReactionSymbols2) => {
+    ReactionSymbols2["ThumbsUp"] = "\u{1F44D}";
+    ReactionSymbols2["Check"] = "\u2705";
+    ReactionSymbols2["Attention"] = "\u2757\uFE0F";
+    ReactionSymbols2["DoubleAttention"] = "\u203C\uFE0F";
+    ReactionSymbols2["Question"] = "\u2753";
+    return ReactionSymbols2;
+  })(ReactionSymbols || {});
+  var reactionStringMap = {};
+  Object.entries(ReactionSymbols).forEach((value) => {
+    reactionStringMap[value[1]] = value[0];
+  });
   var ChatInfoReference = {
     dataVersion: DATA_VERSION,
     primaryChannel: "",
diff --git a/src/Model/Chat/chatModel.ts b/src/Model/Chat/chatModel.ts
index 08bd7ef7..1e9e8388 100644
--- a/src/Model/Chat/chatModel.ts
+++ b/src/Model/Chat/chatModel.ts
@@ -417,7 +417,7 @@ export default class ChatModel {
         const fileContent = FileModel.createFileContent(v4(), "reaction");
         const reaction: ChatMessageReaction = {
             ...fileContent,
-            fileId: sender,
+            fileId: ChatModel.createMessageReactionId(messageId, content, sender),
 
             messageId,
             sender,
@@ -426,6 +426,10 @@ export default class ChatModel {
         };
         return reaction;
     };
+
+    static createMessageReactionId = (messageId: string, content: ReactionSymbols, sender: string): string => {
+        return messageId + sender + reactionStringMap[content];
+    }
 }
 
 // types
@@ -437,6 +441,11 @@ export enum ReactionSymbols {
     Question = "❓",
 }
 
+const reactionStringMap: {[key: ReactionSymbols|string]: string} = {}
+Object.entries(ReactionSymbols).forEach(value => {
+    reactionStringMap[value[1]] = value[0];
+});
+
 export interface ChatInfo extends ValidObject {
     primaryChannel: string;
     secondaryChannels: string[];