diff --git a/ui/components/ui/mascot/mascot.stories.js b/ui/components/ui/mascot/mascot.stories.js
index 020e858b41..5fa96b869e 100644
--- a/ui/components/ui/mascot/mascot.stories.js
+++ b/ui/components/ui/mascot/mascot.stories.js
@@ -1,10 +1,10 @@
-import EventEmitter from 'events';
+// import EventEmitter from 'events';
 import React, { useState } from 'react';
 import Button from '../button';
 import ButtonGroup from '../button-group';
-import Mascot from './mascot.component';
+// import Mascot from './mascot.component';
 
-const animationEventEmitter = new EventEmitter();
+// const animationEventEmitter = new EventEmitter();
 
 const containerStyle = {
   height: '600px',
@@ -50,14 +50,14 @@ export const DefaultStory = () => {
         }
       }}
     >
-      <Mascot
+      {/* <Mascot
         animationEventEmitter={animationEventEmitter}
         width="120"
         height="120"
         followMouse={followMouseMode}
         lookAtTarget={clickedTarget}
         lookAtDirection={lookAtDirection}
-      />
+      /> */}
       <div style={buttonStyle}>
         <ButtonGroup
           style={{ width: '300px', flexFlow: 'column' }}
diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js
index 3943575c35..6ea6567c01 100644
--- a/ui/pages/onboarding-flow/welcome/welcome.js
+++ b/ui/pages/onboarding-flow/welcome/welcome.js
@@ -1,9 +1,9 @@
-import EventEmitter from 'events';
-import React, { useState } from 'react';
+// import EventEmitter from 'events';
+import React /*, { useState } */ from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { Carousel } from 'react-responsive-carousel';
-import Mascot from '../../../components/ui/mascot';
+// import Mascot from '../../../components/ui/mascot';
 import Button from '../../../components/ui/button';
 import Typography from '../../../components/ui/typography/typography';
 import {
@@ -19,7 +19,7 @@ export default function OnboardingWelcome() {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const history = useHistory();
-  const [eventEmitter] = useState(new EventEmitter());
+  // const [eventEmitter] = useState(new EventEmitter());
 
   const onCreateClick = () => {
     dispatch(setFirstTimeFlowType('create'));
@@ -46,11 +46,11 @@ export default function OnboardingWelcome() {
             {t('welcomeToMetaMaskIntro')}
           </Typography>
           <div className="onboarding-welcome__mascot">
-            <Mascot
+            {/* <Mascot
               animationEventEmitter={eventEmitter}
               width="250"
               height="250"
-            />
+            /> */}
           </div>
         </div>
         <div>
diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
index c7fff3358e..fd099fd35e 100644
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
@@ -1,4 +1,4 @@
-import EventEmitter from 'events';
+// import EventEmitter from 'events';
 import React, { useContext, useRef, useState, useEffect } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -35,7 +35,7 @@ import {
   getMaxSlippage,
   setSwapsFromToken,
 } from '../../../ducks/swaps/swaps';
-import Mascot from '../../../components/ui/mascot';
+// import Mascot from '../../../components/ui/mascot';
 import Box from '../../../components/ui/box';
 import {
   QUOTES_EXPIRED_ERROR,
@@ -71,7 +71,7 @@ export default function AwaitingSwap({
   const metaMetricsEvent = useContext(MetaMetricsContext);
   const history = useHistory();
   const dispatch = useDispatch();
-  const animationEventEmitter = useRef(new EventEmitter());
+  // const animationEventEmitter = useRef(new EventEmitter());
 
   const fetchParams = useSelector(getFetchParams, isEqual);
   const { destinationTokenInfo, sourceTokenInfo } = fetchParams?.metaData || {};
@@ -276,13 +276,13 @@ export default function AwaitingSwap({
   return (
     <div className="awaiting-swap">
       <div className="awaiting-swap__content">
-        {!(swapComplete || errorKey) && (
+        {/* {!(swapComplete || errorKey) && (
           <Mascot
             animationEventEmitter={animationEventEmitter.current}
             width="90"
             height="90"
           />
-        )}
+        )} */}
         <div className="awaiting-swap__status-image">{statusImage}</div>
         <div className="awaiting-swap__header">{headerText}</div>
         <div className="awaiting-swap__main-description">{descriptionText}</div>
diff --git a/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js b/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js
index 32394b934b..4288ae4bae 100644
--- a/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js
+++ b/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.js
@@ -1,5 +1,5 @@
-import EventEmitter from 'events';
-import React, { useState, useEffect, useRef, useContext } from 'react';
+// import EventEmitter from 'events';
+import React, { useState, useEffect, /* useRef, */ useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { shuffle } from 'lodash';
@@ -18,7 +18,7 @@ import {
 } from '../../../selectors/selectors';
 import { I18nContext } from '../../../contexts/i18n';
 import { MetaMetricsContext } from '../../../contexts/metametrics.new';
-import Mascot from '../../../components/ui/mascot';
+// import Mascot from '../../../components/ui/mascot';
 import SwapsFooter from '../swaps-footer';
 import BackgroundAnimation from './background-animation';
 
@@ -31,7 +31,7 @@ export default function LoadingSwapsQuotes({
   const metaMetricsEvent = useContext(MetaMetricsContext);
   const dispatch = useDispatch();
   const history = useHistory();
-  const animationEventEmitter = useRef(new EventEmitter());
+  // const animationEventEmitter = useRef(new EventEmitter());
 
   const fetchParams = useSelector(getFetchParams, isEqual);
   const quotesFetchStartTime = useSelector(getQuotesFetchStartTime);
@@ -63,11 +63,11 @@ export default function LoadingSwapsQuotes({
     shuffle(Object.keys(aggregatorMetadata)),
   );
   const numberOfQuotes = aggregatorNames.length;
-  const mascotContainer = useRef();
-  const currentMascotContainer = mascotContainer.current;
+  // const mascotContainer = useRef();
+  // const currentMascotContainer = mascotContainer.current;
 
   const [quoteCount, updateQuoteCount] = useState(0);
-  const [midPointTarget, setMidpointTarget] = useState(null);
+  // const [midPointTarget, setMidpointTarget] = useState(null);
 
   useEffect(() => {
     let timeoutLength;
@@ -97,6 +97,7 @@ export default function LoadingSwapsQuotes({
     };
   }, [quoteCount, loadingComplete, onDone, numberOfQuotes]);
 
+  /* 
   useEffect(() => {
     if (currentMascotContainer) {
       const {
@@ -106,9 +107,10 @@ export default function LoadingSwapsQuotes({
         height,
       } = currentMascotContainer.getBoundingClientRect();
       const center = { x: left + width / 2, y: top + height / 2 };
-      setMidpointTarget(center);
+      // setMidpointTarget(center);
     }
   }, [currentMascotContainer]);
+   */
 
   return (
     <div className="loading-swaps-quotes">
@@ -136,7 +138,7 @@ export default function LoadingSwapsQuotes({
         </>
         <div className="loading-swaps-quotes__animation">
           <BackgroundAnimation />
-          <div
+          {/* <div
             className="loading-swaps-quotes__mascot-container"
             ref={mascotContainer}
           >
@@ -147,7 +149,7 @@ export default function LoadingSwapsQuotes({
               followMouse={false}
               lookAtTarget={midPointTarget}
             />
-          </div>
+          </div> */}
         </div>
       </div>
       <SwapsFooter