diff --git a/components/demo/Announcements.tsx b/components/demo/Announcements.tsx
index deb6715..930bea2 100644
--- a/components/demo/Announcements.tsx
+++ b/components/demo/Announcements.tsx
@@ -4,16 +4,41 @@ import { UserStatus } from "../../models/user";
 import Image from "next/image";
 import { Tooltip } from "antd";
 import { DemoStep, IVoiceDemoProps } from "./VoiceLineConceptDemo";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
 
 export default function Announcements(props: IVoiceDemoProps) {
   const isAnnouncementsTurn =
     props.demoStep == DemoStep.playAnnouncement ||
-    props.demoStep == DemoStep.resolveAnnouncement;
+    props.demoStep == DemoStep.doneDemo;
+
+  const [showAnnouncement, setShowAnnouncement] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (props.demoStep == DemoStep.playAnnouncement) {
+      setTimeout(function () {
+        setShowAnnouncement(true);
+
+        var audio = new Audio(
+          "https://firebasestorage.googleapis.com/v0/b/nirvana-for-business.appspot.com/o/messages%2Fbb649032-64cc-46f7-b0b1-bcb57704a0a7.mp3?alt=media&token=919c596b-c829-4c70-85ce-134d5c348730"
+        );
+        audio.play();
+
+        toast.success("Live Announcement from Arjun");
+      }, 2000);
+
+      setTimeout(function () {
+        props.handleChangeDemoStep(DemoStep.doneDemo);
+
+        toast.success("done with the demo!");
+      }, 9000);
+    }
+  }, [props.demoStep]);
 
   return (
     <section
       className={`p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md -translate-x-20 backdrop-blur-xl ${
-        !isAnnouncementsTurn ? "blur-sm" : ""
+        isAnnouncementsTurn ? " z-20 " : "blur-sm"
       }`}
     >
       <span className="flex flex-row justify-start items-center pb-5">
@@ -54,6 +79,40 @@ export default function Announcements(props: IVoiceDemoProps) {
       </span>
 
       <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
+        {/* arjun's announcement */}
+        <span
+          className={`flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center transition-all duration-300 ${
+            showAnnouncement ? "animate-pulse bg-orange-500" : "hidden "
+          }`}
+        >
+          <span className="relative mr-2 grid items-center justify-items-center">
+            <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
+
+            <Image
+              src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"}
+              alt="profile"
+              width={50}
+              height={50}
+            />
+          </span>
+
+          <span className="flex flex-col items-baseline mr-5">
+            <span className="text-md font-semibold text-gray-600">Arjun</span>
+            <span className="text-xs text-gray-400">2 seconds ago</span>
+            <span className="text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center">
+              <span>engineering</span>
+            </span>
+          </span>
+
+          <Tooltip
+            title={"Announcements should be resolved to keep the team focused."}
+          >
+            <button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+              <FaCheck className="text-lg text-gray-500" />
+            </button>
+          </Tooltip>
+        </span>
+
         {/* adriana's announcement */}
         <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
           <span className="relative mr-2 grid items-center justify-items-center">
@@ -69,45 +128,17 @@ export default function Announcements(props: IVoiceDemoProps) {
 
           <span className="flex flex-col items-baseline">
             <span className="text-md font-semibold text-gray-600">Adriana</span>
-            <span className="text-xs text-gray-400">5 minutes ago</span>
+            <span className="text-xs text-gray-400">30 minutes ago</span>
             <span className="text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center">
               <span>blockers</span>
             </span>
           </span>
-        </span>
-
-        {/* arjun's announcement */}
-        <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
-          <span className="relative mr-2 grid items-center justify-items-center">
-            <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
-
-            <Image
-              src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"}
-              alt="profile"
-              width={50}
-              height={50}
-            />
-          </span>
-
-          <span className="flex flex-col items-baseline mr-5">
-            <span className="text-md font-semibold text-gray-600">Arjun</span>
-            <span className="text-xs text-gray-400">30 minutes ago</span>
-            <span className="text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center">
-              <span>engineering</span>
-            </span>
-          </span>
 
           <Tooltip title={"Resolve"}>
             <button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
               <FaCheck className="text-lg text-gray-500" />
             </button>
           </Tooltip>
-
-          <Tooltip title={"Play"}>
-            <button className="bg-gray-400 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
-              <FaPlay className="text-lg text-gray-500" />
-            </button>
-          </Tooltip>
         </span>
       </div>
     </section>
diff --git a/components/demo/TeamVoiceLine.tsx b/components/demo/TeamVoiceLine.tsx
index 890cf73..9bc9425 100644
--- a/components/demo/TeamVoiceLine.tsx
+++ b/components/demo/TeamVoiceLine.tsx
@@ -84,7 +84,8 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
   const isVoiceLineTurn =
     props.demoStep == DemoStep.playIncomingMessage ||
     props.demoStep == DemoStep.hearReply ||
-    props.demoStep == DemoStep.sendReply;
+    props.demoStep == DemoStep.sendReply ||
+    props.demoStep == DemoStep.doneDemo;
 
   useEffect(() => {
     if (props.demoStep == DemoStep.playIncomingMessage) {
@@ -100,7 +101,14 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
       }, 10000);
     } else if (props.demoStep == DemoStep.sendReply) {
     } else if (props.demoStep == DemoStep.hearReply) {
-      toast.success("Paul heard it live!");
+      var audio = new Audio(
+        "https://firebasestorage.googleapis.com/v0/b/nirvana-for-business.appspot.com/o/deep%20fakes%2Fvocodes_728915c1-eb1f-4f16-8f70-c7b0c2235b3e.wav?alt=media&token=76afd74c-7499-4bd8-9c10-dd6ff4f81c48"
+      );
+      audio.play();
+
+      setTimeout(function () {
+        props.handleChangeDemoStep(DemoStep.playAnnouncement);
+      }, 6000);
     }
   }, [props.demoStep]);
 
@@ -116,6 +124,12 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
     toast.success("Paul heard it live!");
 
     setIsRecording(false);
+
+    setTimeout(function () {
+      toast.success("Mark is talking...");
+
+      props.handleChangeDemoStep(DemoStep.hearReply);
+    }, 3000);
   }
 
   const keyMap: KeyMap = {
@@ -132,7 +146,7 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
     <section
       className={`p-5 flex w-80 flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl translate-x-32 translate-y-20 z-10 backdrop-blur-xl transition-all duration-300 ${
         !isVoiceLineTurn ? "blur-sm" : ""
-      }`}
+      } ${props.demoStep == DemoStep.doneDemo ? "z-30" : ""}`}
     >
       {/* keyboard shortcut handler */}
       <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
@@ -157,13 +171,18 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
           <span
             key={i}
             className={`flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 rounded-lg ${
-              friend.name == "Paul" ? "bg-orange-500 bg-opacity-20" : ""
+              (friend.name == "Paul" &&
+                props.demoStep == DemoStep.playIncomingMessage) ||
+              (friend.name == "Mark" && props.demoStep == DemoStep.hearReply)
+                ? "bg-orange-500 bg-opacity-20"
+                : ""
             }`}
           >
             <span
               className={`relative flex mr-2 shrink-0 ${
-                friend.name == "Paul" &&
-                props.demoStep == DemoStep.playIncomingMessage
+                (friend.name == "Paul" &&
+                  props.demoStep == DemoStep.playIncomingMessage) ||
+                (friend.name == "Mark" && props.demoStep == DemoStep.hearReply)
                   ? "animate-pulse"
                   : ""
               }`}
@@ -190,8 +209,10 @@ function TeamVoiceLine(props: IVoiceDemoProps) {
                   {friend.name}{" "}
                 </span>
 
-                {friend.name == "Paul" &&
-                props.demoStep == DemoStep.playIncomingMessage ? (
+                {(friend.name == "Paul" &&
+                  props.demoStep == DemoStep.playIncomingMessage) ||
+                (friend.name == "Mark" &&
+                  props.demoStep == DemoStep.hearReply) ? (
                   <FaArrowCircleDown className="text-orange-500 text-xl animate-bounce" />
                 ) : (
                   <></>
diff --git a/components/demo/VoiceLineConceptDemo.tsx b/components/demo/VoiceLineConceptDemo.tsx
index 5c557f2..8f6ce0a 100644
--- a/components/demo/VoiceLineConceptDemo.tsx
+++ b/components/demo/VoiceLineConceptDemo.tsx
@@ -10,7 +10,7 @@ export enum DemoStep {
   sendReply = "send reply",
   hearReply = "hear reply",
   playAnnouncement = "play announcement",
-  resolveAnnouncement = "resolve announcement",
+  doneDemo = "done with demo",
 }
 
 export interface IVoiceDemoProps {