diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx
index 0f0d905..0bac0de 100644
--- a/components/Dashboard/TeamVoiceLine.tsx
+++ b/components/Dashboard/TeamVoiceLine.tsx
@@ -170,7 +170,7 @@ export default function TeamVoiceLine() {
           key={i}
           className={`rounded flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 hover:cursor-pointer ${
             tmember.id == audioContext.selectedTeammate
-              ? "bg-white scale-150 z-20"
+              ? "bg-white scale-150 z-20 translate-x-2/4"
               : ""
           }`}
         >
@@ -245,6 +245,14 @@ export default function TeamVoiceLine() {
                 )}
               </Tooltip>
 
+              <Tooltip title="press space to play last convo">
+                <button className="ml-2 h-10 border-green-400 border-2 bg-opacity-80 p-2 rounded hover:bg-opacity-100">
+                  <span className="text-sm text-green-500 font-bold">
+                    SPACE
+                  </span>
+                </button>
+              </Tooltip>
+
               <BsThreeDots className="text-black ml-2 hover:cursor-pointer" />
             </>
           ) : (
diff --git a/contexts/audioContext.tsx b/contexts/audioContext.tsx
index b23b660..5c24b52 100644
--- a/contexts/audioContext.tsx
+++ b/contexts/audioContext.tsx
@@ -3,6 +3,8 @@ import toast from "react-hot-toast";
 import { KeyCode } from "../globals/keycode";
 import MicRecorder from "mic-recorder-to-mp3";
 
+import AudioPlayer from "react-h5-audio-player";
+
 interface AudioContextInterface {
   selectedTeammate: string; // can only have one selected
   selectTeamMember: Function;
@@ -227,6 +229,9 @@ export default function AudioContextProvider({ children }) {
     [isRecording, selectedTeammate]
   );
 
+  const testAudioClip =
+    "https://firebasestorage.googleapis.com/v0/b/nirvana-ccf04.appspot.com/o/messages%2F0E248EA9-AABC-4921-A06B-F1330DFBEE4A.m4a?alt=media&token=9cc81944-96a8-449f-a08f-50925d776565";
+
   const handleKeyboardShortcut = useCallback(
     (event) => {
       if (event.repeat) {
@@ -261,6 +266,8 @@ export default function AudioContextProvider({ children }) {
         toast("Invalid keyboard shortcut.");
       }
 
+      // todo play message if pressing space
+
       // todo if we press the same shortcut twice, deactive selected user
     },
     [
@@ -292,8 +299,33 @@ export default function AudioContextProvider({ children }) {
     setSelectedTeamMember(userId);
   }
 
+  const [startPlaying, setStartPlaying] = useState<Boolean>(false);
+
+  useEffect(() => {
+    setTimeout(
+      function () {
+        //Start the timer
+        setStartPlaying(true);
+      }.bind(this),
+      2000
+    );
+  });
+
   return (
-    <AudioContext.Provider value={value}>{children}</AudioContext.Provider>
+    <AudioContext.Provider value={value}>
+      {children}
+      {/* player for audio messages */}
+
+      {startPlaying ? (
+        <AudioPlayer
+          autoPlay
+          src={testAudioClip}
+          onPlay={(e) => console.log("onPlay")}
+        />
+      ) : (
+        <></>
+      )}
+    </AudioContext.Provider>
   );
 }
 
diff --git a/package-lock.json b/package-lock.json
index 63309ae..5eb861d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "next": "12.0.7",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "react-h5-audio-player": "^3.8.1",
         "react-hot-toast": "^2.2.0",
         "react-icons": "^4.3.1",
         "react-moment": "^1.1.1"
@@ -1777,6 +1778,16 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@iconify/icons-mdi": {
+      "version": "1.1.42",
+      "resolved": "https://registry.npmjs.org/@iconify/icons-mdi/-/icons-mdi-1.1.42.tgz",
+      "integrity": "sha512-YHX2Z0s+5Y5EQlBbQ2xQV9pI+RmTr4EwRaqtTEPjfP5g8cekQzR7A8aSohLtgq6m+nziDagIROFFZIFzkS+LJw=="
+    },
+    "node_modules/@iconify/react": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-1.1.4.tgz",
+      "integrity": "sha512-oxq8IMOq8q3nKGiDHbQPC8FcFuBsKve68JWBo140d5LRnj0bv5TB/FE/y01ZSvEZ7PlI2HIrnb2qivPN8kTDgw=="
+    },
     "node_modules/@napi-rs/triples": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz",
@@ -7778,6 +7789,20 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-h5-audio-player": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/react-h5-audio-player/-/react-h5-audio-player-3.8.1.tgz",
+      "integrity": "sha512-dMW/eAsOxnJtKthiMqE5Qo87QxOlqlbTu3NYqR63CxLvIntUpWRJhPsmsVa4+I5jj0ZSwpPRxvfZyhhJmBemMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.2",
+        "@iconify/icons-mdi": "^1.0.46",
+        "@iconify/react": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-hot-toast": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
@@ -10680,6 +10705,16 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@iconify/icons-mdi": {
+      "version": "1.1.42",
+      "resolved": "https://registry.npmjs.org/@iconify/icons-mdi/-/icons-mdi-1.1.42.tgz",
+      "integrity": "sha512-YHX2Z0s+5Y5EQlBbQ2xQV9pI+RmTr4EwRaqtTEPjfP5g8cekQzR7A8aSohLtgq6m+nziDagIROFFZIFzkS+LJw=="
+    },
+    "@iconify/react": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-1.1.4.tgz",
+      "integrity": "sha512-oxq8IMOq8q3nKGiDHbQPC8FcFuBsKve68JWBo140d5LRnj0bv5TB/FE/y01ZSvEZ7PlI2HIrnb2qivPN8kTDgw=="
+    },
     "@napi-rs/triples": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz",
@@ -15213,6 +15248,16 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-h5-audio-player": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/react-h5-audio-player/-/react-h5-audio-player-3.8.1.tgz",
+      "integrity": "sha512-dMW/eAsOxnJtKthiMqE5Qo87QxOlqlbTu3NYqR63CxLvIntUpWRJhPsmsVa4+I5jj0ZSwpPRxvfZyhhJmBemMA==",
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "@iconify/icons-mdi": "^1.0.46",
+        "@iconify/react": "^1.1.3"
+      }
+    },
     "react-hot-toast": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
diff --git a/package.json b/package.json
index bb28255..91413ab 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-h5-audio-player": "^3.8.1",
     "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1",
     "react-moment": "^1.1.1"