diff --git a/client/src/pages/About/About.jsx b/client/src/pages/About/About.jsx
index 85bb87f3..8b7adec0 100644
--- a/client/src/pages/About/About.jsx
+++ b/client/src/pages/About/About.jsx
@@ -1,4 +1,4 @@
-import { React, useState } from 'react';
+import { React, useState, useRef } from 'react';
 import './About.scss';
 //import { Carousel } from 'react-responsive-carousel';
 //import "react-responsive-carousel/lib/styles/carousel.min.css";
@@ -28,6 +28,9 @@ import { instagramAccounts } from '../../util/instagramAccounts';
 // import PropTypes from 'prop-types';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 
+import placeholder from '../../assets/logo/main-logo-2T5.png';
+import { get } from 'lodash';
+
 const PageAbout = () => {
   return (
     <>
@@ -80,6 +83,7 @@ const AboutUsSection = () => {
             );
           })}
         </div>
+
       </div>
     </Header>
   );
@@ -128,10 +132,83 @@ const VCSection = () => {
 };
 
 const AboutUsExecTeam = () => {
+  const [displayGame, setDisplayGame] = useState(true);
+  const [execIndex, setExecIndex] = useState(0);
+
+  const getNextExec = () => {
+    // Consider implementing randomization
+    shake();
+    setTimeout(() => {
+      setExecIndex((execIndex + 1) % (execInfo.vcs.length + execInfo.ocs.length));
+    }, 2000);
+  };
+
+  const machineRef = useRef(null);
+  const shake = () => {
+    const el = machineRef.current;
+    if (!el) return;
+
+    el.classList.add('shake-animation');
+
+    el.addEventListener(
+      'animationend',
+      () => {
+        el.classList.remove('shake-animation');
+      },
+      { once: true },
+    );
+  };
+
   return (
     <>
-      <OCSection />
-      <VCSection />
+      <button onClick={() => setDisplayGame(!displayGame)} className="exec-display-toggle">
+        {displayGame ? 'Display in Regular View' : 'Display in Game View!'}
+      </button>
+      {displayGame ? (
+        <div className="exec-game-container">
+          <button onClick={getNextExec} ref={machineRef}>
+            <LazyLoadImage
+              src={placeholder}
+              alt="exec-game-machine"
+              className="exec-game-machine"
+            />
+          </button>
+          {execIndex < execInfo.ocs.length ? (
+            <div className="aboutus-oc-grid-container">
+              <ExecProfile
+                key={execInfo.ocs[execIndex].name}
+                className="oc-grid-item"
+                image={execInfo.ocs[execIndex].image}
+                name={execInfo.ocs[execIndex].name}
+                role={execInfo.ocs[execIndex].role}
+                discipline={execInfo.ocs[execIndex].discipline}
+                roleDescription={execInfo.ocs[execIndex].description}
+                exec={true}
+              />
+            </div>
+          ) : (
+            <div className="aboutus-vc-grid-container">
+              {execInfo.vcs[execIndex - execInfo.ocs.length] && (
+                <ExecProfile
+                  key={execInfo.vcs[execIndex - execInfo.ocs.length].name}
+                  className="vc-grid-item"
+                  image={execInfo.vcs[execIndex - execInfo.ocs.length].image}
+                  name={execInfo.vcs[execIndex - execInfo.ocs.length].name}
+                  role={execInfo.vcs[execIndex - execInfo.ocs.length].role}
+                  discipline={execInfo.vcs[execIndex - execInfo.ocs.length].discipline}
+                  roleDescription={execInfo.vcs[execIndex - execInfo.ocs.length].description}
+                  exec={true}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      ) : (
+        <>
+          <OCSection />
+          <VCSection />
+        </>
+      )}
     </>
   );
 };
diff --git a/client/src/pages/About/About.scss b/client/src/pages/About/About.scss
index f0d794a6..d33580f5 100644
--- a/client/src/pages/About/About.scss
+++ b/client/src/pages/About/About.scss
@@ -147,6 +147,7 @@
   align-items: center;
   padding: 25px 10px 10px 10px;
 }
+
 .exec-title {
   text-align: center;
   font-size: 48px;
@@ -171,6 +172,94 @@
   }
 }
 
+.exec-display-toggle {
+  display: block;
+  margin: 0 auto;
+  padding: 12px;
+  text-align: center;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: 'Staatliches', sans-serif;
+  border-radius: 100px;
+  width: 200px;
+  height: auto;
+  font-size: 20px;
+  cursor: url('../../assets/cursor/pointer.png'), auto !important;
+  margin-bottom: 20px;
+
+  @include devices(tablet) {
+    width: 150px;
+    height: 40px;
+    font-size: 18px;
+  }
+}
+
+.exec-game-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: auto;
+
+  @include devices(tablet) {
+    width: 85vw;
+    margin-bottom: 10px;
+  }
+}
+
+.exec-game-machine {
+  width: 30%;
+  height: auto;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  object-fit: contain;
+
+  @include devices(tablet) {
+    width: 30vw;
+    height: auto;
+    margin-bottom: 10px;
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translate(1px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -2px) rotate(-1deg);
+  }
+  20% {
+    transform: translate(-3px, 0px) rotate(1deg);
+  }
+  30% {
+    transform: translate(3px, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(3px, 1px) rotate(-1deg);
+  }
+  80% {
+    transform: translate(-1px, -1px) rotate(1deg);
+  }
+  90% {
+    transform: translate(1px, 2px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+.shake-animation {
+  animation: shake 2s;
+}
+
 // VC GRID
 .aboutus-oc-grid-container {
   display: grid;