diff --git a/backend/src/index.ts b/backend/src/index.ts
index acd6fa3..05a54e2 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -4,13 +4,14 @@ import { Server } from 'socket.io';
 import config from './config';
 import { handleAuthenticate } from './websocket/auth/authenticate';
 import { handleLogout } from './websocket/auth/logout';
-import { handleAddReaction, handleRemoveReaction } from './websocket/reactionHandler';
 import { SocketHandler, SocketResponse } from './backendTypes';
 import { handleGetGraphs } from './websocket/graph/getGraphs';
 import { handleCreateGraph } from './websocket/graph/createGraph';
 import { handleJoinGraph } from './websocket/graph/joinGraph';
 import { handleLeaveGraph } from './websocket/graph/leaveGraph';
 import { handleAddArgument } from './websocket/argument/addArgument';
+import { handleAddReaction } from './websocket/reaction/addReaction';
+import { handleRemoveReaction } from './websocket/reaction/removeReaction';
 
 const app = express();
 const server = http.createServer(app);
@@ -62,9 +63,9 @@ io.on('connection', (socket) => {
   socket.on('join graph', wrapHandler(handleJoinGraph));
   socket.on('leave graph', wrapHandler(handleLeaveGraph));
   socket.on('add argument', wrapHandler(handleAddArgument));
+  socket.on('add reaction', wrapHandler(handleAddReaction));
+  socket.on('remove reaction', wrapHandler(handleRemoveReaction));
   // TODO Finish transition
-  socket.on('add reaction', (args, callback) => handleAddReaction(socket, io, args, callback));
-  socket.on('remove reaction', (args, callback) => handleRemoveReaction(socket, io, args, callback));
   socket.on('disconnect', () => console.log(`User disconnected: ${socket.id}`));
   socket.on('reconnect', () => console.log(`User reconnected: ${socket.id}`));
 });
diff --git a/backend/src/websocket/reaction/addReaction.ts b/backend/src/websocket/reaction/addReaction.ts
new file mode 100644
index 0000000..4407e05
--- /dev/null
+++ b/backend/src/websocket/reaction/addReaction.ts
@@ -0,0 +1,20 @@
+import { SocketHandler } from "../../backendTypes";
+import { query } from "../../db/db";
+import { addReaction } from "../../db/operations/reactionOperations";
+import { sendReactionUpdate } from "../updateHandler";
+
+interface AddReactionData {
+  argumentId: string;
+  type: 'agree' | 'disagree' | 'unclear';
+}
+
+export const handleAddReaction: SocketHandler<AddReactionData, {}> = async (socket, io, { argumentId, type }) => {
+  if (!socket.data.user) {
+    return { success: false, error: 'Authentication required' };
+  }
+
+  await addReaction(socket.data.user.id, argumentId, type);
+  const graphId = (await query('SELECT graph_id FROM arguments WHERE id = $1', [argumentId])).rows[0].graph_id;
+  sendReactionUpdate(socket, io, graphId, argumentId);
+  return { success: true };
+}
\ No newline at end of file
diff --git a/backend/src/websocket/reaction/removeReaction.ts b/backend/src/websocket/reaction/removeReaction.ts
new file mode 100644
index 0000000..70eeff0
--- /dev/null
+++ b/backend/src/websocket/reaction/removeReaction.ts
@@ -0,0 +1,20 @@
+import { SocketHandler } from "../../backendTypes";
+import { query } from "../../db/db";
+import { removeReaction } from "../../db/operations/reactionOperations";
+import { sendReactionUpdate } from "../updateHandler";
+
+interface RemoveReactionData {
+  argumentId: string;
+  type: 'agree' | 'disagree' | 'unclear';
+}
+
+export const handleRemoveReaction: SocketHandler<RemoveReactionData, {}> = async (socket, io, { argumentId, type }) => {
+  if (!socket.data.user) {
+    return { success: false, error: 'Authentication required' };
+  }
+
+  await removeReaction(socket.data.user.id, argumentId, type);
+  const graphId = (await query('SELECT graph_id FROM arguments WHERE id = $1', [argumentId])).rows[0].graph_id;
+  sendReactionUpdate(socket, io, graphId, argumentId);
+  return { success: true };
+}
diff --git a/backend/src/websocket/reactionHandler.ts b/backend/src/websocket/reactionHandler.ts
deleted file mode 100644
index bb14254..0000000
--- a/backend/src/websocket/reactionHandler.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Socket } from 'socket.io';
-import { addReaction, removeReaction } from '../db/operations/reactionOperations';
-import { getGraphData, getGraphDataWithUserReactions } from '../db/operations/graphOperations';
-import { query } from '../db/db';
-import { sendReactionUpdate } from './updateHandler';
-
-
-export const handleAddReaction = async (
-  socket: Socket,
-  io: any,
-  { argumentId, type }: { argumentId: string; type: 'agree' | 'disagree' | 'unclear' },
-  callback?: Function
-) => {
-  if (!socket.data.user) {
-    console.error(`Failed to add reaction: No user data on socket. Argument ID: ${argumentId}, Type: ${type}, Socket ID: ${socket.id}`);
-    callback?.({ success: false, error: 'Authentication required' });
-    return;
-  }
-
-  try {
-    const id = await addReaction(socket.data.user.id, argumentId, type);
-    const graphId = (await query('SELECT graph_id FROM arguments WHERE id = $1', [argumentId])).rows[0].graph_id;
-    sendReactionUpdate(socket, io, graphId, argumentId);
-    callback?.({ success: true, id });
-  } catch (error) {
-    console.error('Error adding reaction:', error);
-    callback?.({ success: false, error: 'Failed to add reaction' });
-  }
-};
-
-export const handleRemoveReaction = async (
-  socket: Socket,
-  io: any,
-  { argumentId, type }: { argumentId: string; type: 'agree' | 'disagree' | 'unclear' },
-  callback?: Function
-) => {
-  if (!socket.data.user) {
-    console.error(`Failed to remove reaction: No user data on socket. Argument ID: ${argumentId}, Type: ${type}, Socket ID: ${socket.id}`);
-    callback?.({ success: false, error: 'Authentication required' });
-    return;
-  }
-
-  try {
-    await removeReaction(socket.data.user.id, argumentId, type);
-    const graphId = (await query('SELECT graph_id FROM arguments WHERE id = $1', [argumentId])).rows[0].graph_id;
-    sendReactionUpdate(socket, io, graphId, argumentId);
-    callback?.({ success: true });
-  } catch (error) {
-    console.error('Error removing reaction:', error);
-    callback?.({ success: false, error: 'Failed to remove reaction' });
-  }
-};
\ No newline at end of file
diff --git a/frontend/src/components/ArgumentInfoBox/ArgumentInfoBox.tsx b/frontend/src/components/ArgumentInfoBox/ArgumentInfoBox.tsx
index 595b0c6..14e4a63 100644
--- a/frontend/src/components/ArgumentInfoBox/ArgumentInfoBox.tsx
+++ b/frontend/src/components/ArgumentInfoBox/ArgumentInfoBox.tsx
@@ -55,11 +55,19 @@ const ArgumentInfoBox: React.FC<ArgumentInfoBoxProps> = ({
       socket.emit('add reaction', {
         argumentId: argument.id,
         type
+      }, (response: any) => {
+        if (!response.success) {
+          console.error('Failed to add reaction:', response.error);
+        }
       });
     } else {
       socket.emit('remove reaction', {
         argumentId: argument.id,
         type
+      }, (response: any) => {
+        if (!response.success) {
+          console.error('Failed to remove reaction:', response.error);
+        }
       });
     }
   };