diff --git a/components/Modals/ShortcutHelpModal.tsx b/components/Modals/ShortcutHelpModal.tsx
index b1eac54..2d92bef 100644
--- a/components/Modals/ShortcutHelpModal.tsx
+++ b/components/Modals/ShortcutHelpModal.tsx
@@ -1,6 +1,6 @@
 import { Carousel, Divider, Drawer, Modal } from "antd";
 import { CarouselRef } from "antd/lib/carousel";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { BsThreeDots } from "react-icons/bs";
 import {
@@ -15,6 +15,8 @@ import { FcGoogle } from "react-icons/fc";
 import { useKeyboardContext } from "../../contexts/keyboardContext";
 import Rooms from "../demo/Rooms";
 import Image from "next/image";
+import Cookies from "js-cookie";
+import { CookieType } from "../../helpers/cookies";
 
 export default function ShortcutHelpModal() {
   const [visible, setVisible] = useState<boolean>(false);
@@ -22,6 +24,15 @@ export default function ShortcutHelpModal() {
 
   const { isRecording } = useKeyboardContext();
 
+  useEffect(() => {
+    // if have the specific cookie, then don't show the modal, otherwise show the modal
+    const cookie = Cookies.get(CookieType.TEAM_SHORTCUTS_ONBOARDING);
+    if (!cookie) {
+      setVisible(true);
+      Cookies.set(CookieType.TEAM_SHORTCUTS_ONBOARDING, "true");
+    }
+  }, []);
+
   function handleShowModal() {
     setVisible(true);
   }
@@ -75,147 +86,6 @@ export default function ShortcutHelpModal() {
         width={750}
       >
         <Carousel ref={carouselRef} dotPosition="top" className="pt-5">
-          <div>
-            <span className="flex flex-col px-10">
-              <span className="flex flex-row justify-between items-start mb-10">
-                <FaArrowLeft
-                  onClick={() => carouselRef.current.prev()}
-                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
-                />
-
-                <span className="text-xl">Audio Messages</span>
-
-                <FaArrowRight
-                  onClick={() => carouselRef.current.next()}
-                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
-                />
-              </span>
-
-              <span className="flex flex-row justify-between items-center">
-                <span className="flex flex-col ml-2 items-center">
-                  <span className="text-lg text-gray-500">
-                    Select a Teammate
-                  </span>
-                  <span className="text-md text-gray-300 text-center">
-                    Type numbers on your keyboard.
-                  </span>
-
-                  <span className="flex flex-row space-x-2">
-                    <button
-                      className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                    >
-                      1
-                    </button>
-                    <button
-                      className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                    >
-                      2
-                    </button>
-                    <button
-                      className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                    >
-                      3
-                    </button>
-                    <span className="text-gray-300">...</span>
-                  </span>
-                </span>
-
-                <img
-                  src="/screenshots/teamvoiceline.png"
-                  className="h-[10rem] w-[22rem]"
-                />
-              </span>
-
-              <Divider />
-
-              <span className="flex flex-row justify-between items-center">
-                <img
-                  src="/illustrations/undraw_conference_speaker_re_1rna.svg"
-                  className="h-[10rem]"
-                />
-
-                <span className="flex flex-col ml-2 items-center">
-                  <span className="text-lg text-gray-500">
-                    Send an Audio Message
-                  </span>
-                  <span className={`text-md text-gray-300 text-center`}>
-                    Press and hold R.{" "}
-                    <span className="text-teal-600">
-                      Your teammate will <br></br> hear you instantly
-                    </span>{" "}
-                    if they are online.
-                  </span>
-                  <span className={`text-md text-gray-300 text-center`}>
-                    As if they were across the table.
-                  </span>
-
-                  <button
-                    className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold 
-                            ${isRecording ? "bg-orange-500 text-white" : ""}`}
-                  >
-                    R
-                  </button>
-                </span>
-              </span>
-
-              <Divider />
-
-              <span className="flex flex-row justify-between items-center">
-                <span className="flex flex-col ml-2 items-center">
-                  <span className="text-lg text-gray-500">
-                    Play Incoming Message
-                  </span>
-                  <span className={`text-md text-gray-300 text-center`}>
-                    Select teammate and then press SPACE <br></br> to listen to
-                    the last conversation.
-                  </span>
-                  {/* <span className={`text-md text-gray-300 text-center`}>
-                    Deselect teammate by pressing <br></br> ESC.
-                  </span> */}
-
-                  <button
-                    className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                  >
-                    SPACE
-                  </button>
-                </span>
-
-                <img
-                  src="/illustrations/undraw_tutorial_video_vtd1.svg"
-                  className="h-[10rem]"
-                />
-              </span>
-
-              <Divider />
-
-              <span className="flex flex-row justify-between items-center">
-                <img
-                  src="/illustrations/undraw_back_home_nl-5-c.svg"
-                  className="h-[10rem]"
-                />
-
-                <span className="flex flex-col ml-2 items-center">
-                  <span className="text-lg text-gray-500">Clear Your View</span>
-                  <span className={`text-md text-gray-300 text-center`}>
-                    Deselect teammate and <br></br> stop playing audio by
-                    pressing ESC.
-                  </span>
-
-                  <button
-                    className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-gray-300 text-sm font-bold`}
-                  >
-                    ESC
-                  </button>
-                </span>
-              </span>
-            </span>
-          </div>
           <div>
             <span className="flex flex-col px-10">
               <span className="flex flex-row justify-between items-start mb-10">
@@ -395,11 +265,11 @@ export default function ShortcutHelpModal() {
                     {"Cross Collaborate"}
                   </span>
                   <span className={`text-md text-gray-300 text-left`}>
-                    Walk into the office with clarity of team<br></br>
+                    Walk into the office with clarity of what <br></br>
                     <span className="text-teal-600">
-                      conversations are going on{" "}
+                      team conversations{" "}
                     </span>{" "}
-                    across the hall.
+                    are going on across the hall.
                   </span>
                 </span>
 
@@ -410,6 +280,147 @@ export default function ShortcutHelpModal() {
               </span>
             </span>
           </div>
+          <div>
+            <span className="flex flex-col px-10">
+              <span className="flex flex-row justify-between items-start mb-10">
+                <FaArrowLeft
+                  onClick={() => carouselRef.current.prev()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
+                />
+
+                <span className="text-xl">Audio Messages</span>
+
+                <FaArrowRight
+                  onClick={() => carouselRef.current.next()}
+                  className="hover:cursor-pointer bg-teal-600 text-white p-1 rounded-full text-xl"
+                />
+              </span>
+
+              <span className="flex flex-row justify-between items-center">
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">
+                    Select a Teammate
+                  </span>
+                  <span className="text-md text-gray-300 text-center">
+                    Type numbers on your keyboard.
+                  </span>
+
+                  <span className="flex flex-row space-x-2">
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      1
+                    </button>
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      2
+                    </button>
+                    <button
+                      className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                    >
+                      3
+                    </button>
+                    <span className="text-gray-300">...</span>
+                  </span>
+                </span>
+
+                <img
+                  src="/screenshots/teamvoiceline.png"
+                  className="h-[10rem] w-[22rem]"
+                />
+              </span>
+
+              <Divider />
+
+              <span className="flex flex-row justify-between items-center">
+                <img
+                  src="/illustrations/undraw_conference_speaker_re_1rna.svg"
+                  className="h-[10rem]"
+                />
+
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">
+                    Send an Audio Message
+                  </span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    Press and hold R.{" "}
+                    <span className="text-teal-600">
+                      Your teammate will <br></br> hear you instantly
+                    </span>{" "}
+                    if they are online.
+                  </span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    As if they were across the table.
+                  </span>
+
+                  <button
+                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold 
+                            ${isRecording ? "bg-orange-500 text-white" : ""}`}
+                  >
+                    R
+                  </button>
+                </span>
+              </span>
+
+              <Divider />
+
+              <span className="flex flex-row justify-between items-center">
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">
+                    Play Incoming Message
+                  </span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    Select teammate and then press SPACE <br></br> to listen to
+                    the last conversation.
+                  </span>
+                  {/* <span className={`text-md text-gray-300 text-center`}>
+                    Deselect teammate by pressing <br></br> ESC.
+                  </span> */}
+
+                  <button
+                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                  >
+                    SPACE
+                  </button>
+                </span>
+
+                <img
+                  src="/illustrations/undraw_tutorial_video_vtd1.svg"
+                  className="h-[10rem]"
+                />
+              </span>
+
+              <Divider />
+
+              <span className="flex flex-row justify-between items-center">
+                <img
+                  src="/illustrations/undraw_back_home_nl-5-c.svg"
+                  className="h-[10rem]"
+                />
+
+                <span className="flex flex-col ml-2 items-center">
+                  <span className="text-lg text-gray-500">Clear Your View</span>
+                  <span className={`text-md text-gray-300 text-center`}>
+                    Deselect teammate and <br></br> stop playing audio by
+                    pressing ESC.
+                  </span>
+
+                  <button
+                    className={`right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-gray-300 text-sm font-bold`}
+                  >
+                    ESC
+                  </button>
+                </span>
+              </span>
+            </span>
+          </div>
           <div>
             <span className="flex flex-col px-10">
               <span className="flex flex-row justify-between items-start mb-10">
diff --git a/helpers/cookies.ts b/helpers/cookies.ts
new file mode 100644
index 0000000..10cbd41
--- /dev/null
+++ b/helpers/cookies.ts
@@ -0,0 +1,3 @@
+export enum CookieType {
+  TEAM_SHORTCUTS_ONBOARDING = "TEAM_SHORTCUTS_ONBOARDING",
+}