diff --git a/client/package-lock.json b/client/package-lock.json
index 659891b..37d4256 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -16,6 +16,7 @@
         "babel-plugin-prismjs": "^2.1.0",
         "chart.js": "^3.0.0",
         "classnames": "^2.3.1",
+        "prism-react-renderer": "^1.3.1",
         "prismjs": "^1.27.0",
         "react": "^18.0.0",
         "react-chartjs-2": "^4.1.0",
@@ -12780,6 +12781,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/prism-react-renderer": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.1.tgz",
+      "integrity": "sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==",
+      "peerDependencies": {
+        "react": ">=0.14.9"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.27.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
@@ -24912,7 +24921,8 @@
     "prism-react-renderer": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.1.tgz",
-      "integrity": "sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ=="
+      "integrity": "sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==",
+      "requires": {}
     },
     "prismjs": {
       "version": "1.27.0",
diff --git a/client/src/components/Multiplayer/Multiplayer.jsx b/client/src/components/Multiplayer/Multiplayer.jsx
index 5d7e061..4a3b368 100644
--- a/client/src/components/Multiplayer/Multiplayer.jsx
+++ b/client/src/components/Multiplayer/Multiplayer.jsx
@@ -1,16 +1,45 @@
 import React from 'react';
 import './Multiplayer.scss'
-import useSocket from '../../hooks/useSocket';
-import MultiDisplay from './MultiDisplay';
-import { useEffect, useState } from "react";
+import Prompt from './Prompt';
+import VSDisplay from './VSDisplay';
+import { useEffect, useState, useRef } from "react";
+
+// Websocket functions
+const { io } = require("socket.io-client");
+const {sendMessage, updateProgress} = require('./api')
 
 export default function Multiplayer() {
 
-  useSocket();
+  const NEW_SERVER_MESSAGE_EVENT = "newServerMessage";
+  const socketRef = useRef();
+
+  useEffect(() => {
+    socketRef.current = io();
+
+    socketRef.current.on(NEW_SERVER_MESSAGE_EVENT, (message) => {
+      console.log(message);
+    });
+
+  });
+
+  // TEST VARIABLES
+  const player1 = {
+    connected: true,
+    progress: 50,
+  }
+
+  const player2 = {
+    connected: true,
+    progress: 50,
+  }
 
   return (
     <div>
-      <MultiDisplay />
+      <VSDisplay player1={player1} player2={player2} />
+      <Prompt
+        onComplete={() => sendMessage(socketRef.current, 'Prompt Complete')}
+        onProgress={(counter) => updateProgress(socketRef.current, counter)}
+        />
     </div>
   )
 
diff --git a/client/src/components/Multiplayer/MultiDisplay.jsx b/client/src/components/Multiplayer/Prompt.jsx
similarity index 81%
rename from client/src/components/Multiplayer/MultiDisplay.jsx
rename to client/src/components/Multiplayer/Prompt.jsx
index fdfd128..89d0645 100644
--- a/client/src/components/Multiplayer/MultiDisplay.jsx
+++ b/client/src/components/Multiplayer/Prompt.jsx
@@ -4,7 +4,9 @@ import useTimer from "../../hooks/useTimer";
 import "../Main/Display.scss";
 import Lines from "../Main/Lines";
 
-export default function MultiDisplay() {
+export default function Prompt(props) {
+
+  const { onComplete, onProgress } = props;
 
   const { prompt, input, lengths, fetchPrompt, resetInput, handleKeypress, setFocus, endInput } = useKeyPress();
   const { time, running, toggleTimer, resetTimer } = useTimer();
@@ -34,7 +36,7 @@ export default function MultiDisplay() {
     setFocus(true);
   }, []);
 
-  // Set / Stop Timer
+  // On click
   useEffect(() => {
     if (!input.end) {
       if (!running && (input.keys[0].length > 0 || input.queue !== null)) {
@@ -48,9 +50,10 @@ export default function MultiDisplay() {
     }
   }, [input]);
 
-  // THIS USE EFFECT SHOULD SEND TO THE WEBSOCKET THAT USER FINISHED PROMPT
+  // On prompt complete
   useEffect(() => {
     if (input.end) {
+      onComplete(); // send complete message to websocket
       alert('PROMPT COMPLETE!!!') // This is where websocket should send
     }
   }, [input.end]);
@@ -63,6 +66,13 @@ export default function MultiDisplay() {
     };
   }, [handleKeypress]);
 
+  useEffect(() => {
+    if (counter !== 0) {
+      onProgress(counter);
+      // Can send a websocket message here to update % progress
+    }
+  }, [counter])
+
   return (
     <div className="display">
       <p>Time: {time}</p>
@@ -77,8 +87,11 @@ export default function MultiDisplay() {
             lengths={lengths}
             indexes={wrongIndexes}
             counter={counter}
+            line={input.line}
           />
         </div>
+        <p>Counter: {counter}</p>
+        <p>Errors: {wrongIndexes.length}</p>
       </div>
     </div>
   );
diff --git a/client/src/components/Multiplayer/VSDisplay.jsx b/client/src/components/Multiplayer/VSDisplay.jsx
new file mode 100644
index 0000000..10a7881
--- /dev/null
+++ b/client/src/components/Multiplayer/VSDisplay.jsx
@@ -0,0 +1,14 @@
+
+
+export default function VSDisplay(props) {
+
+  const {player1, player2} = props;
+
+  return (
+    <div>
+      <p>Player 1: {player1.connected}, Progress: {player1.progress}</p>
+      <p>Player 2: {player2.connected}, Progress: {player2.progress}</p>
+    </div>
+  )
+
+}
\ No newline at end of file
diff --git a/client/src/components/Multiplayer/api.js b/client/src/components/Multiplayer/api.js
new file mode 100644
index 0000000..16e184f
--- /dev/null
+++ b/client/src/components/Multiplayer/api.js
@@ -0,0 +1,9 @@
+const sendMessage = (socket, message) => {
+  socket.emit('newClientMessage', message);
+};
+
+const updateProgress = (socket, percentComplete) => {
+  socket.emit('progressUpdate', percentComplete);
+}
+
+module.exports = {sendMessage, updateProgress}
\ No newline at end of file
diff --git a/client/src/hooks/useSocket.js b/client/src/hooks/useSocket.js
deleted file mode 100644
index 3a5385b..0000000
--- a/client/src/hooks/useSocket.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect, useRef } from "react";
-const { io } = require("socket.io-client");
-
-const NEW_SERVER_MESSAGE_EVENT = "newServerMessage";
-
-export default function useSocket(gameID) {
-  const socketRef = useRef();
-
-  useEffect(() => {
-    socketRef.current = io();
-
-    socketRef.current.on(NEW_SERVER_MESSAGE_EVENT, (message) => {
-      console.log(message);
-    });
-
-    socketRef.current.emit('newClientMessage', 'hello');
-
-  });
-
-  return socketRef.current;
-};
diff --git a/server/server.js b/server/server.js
index d21afbc..6a8676e 100644
--- a/server/server.js
+++ b/server/server.js
@@ -42,6 +42,10 @@ io.on("connection", (socket) => {
   socket.on("newClientMessage", (arg) => {
     console.log(`user ${socket.id} replied with ${arg}`);
   });
+
+  socket.on('progressUpdate', (arg) => {
+    console.log(`user ${socket.id} progressed and ${arg}`)
+  });
 });
 
 // Initialize Routes