diff --git a/frontend/app/components/Session_/WarnBadge.tsx b/frontend/app/components/Session_/WarnBadge.tsx
index db5d244c4..4f47f8767 100644
--- a/frontend/app/components/Session_/WarnBadge.tsx
+++ b/frontend/app/components/Session_/WarnBadge.tsx
@@ -40,6 +40,12 @@ interface WarnBadgeExtraProps {
   trackerWarnClassName?: string;
 }
 
+type Warns = [
+  localhostWarn: boolean,
+  trackerWarn: boolean,
+  virtualElsFailWarn: boolean,
+];
+
 const WarnBadge = React.memo(
   ({
     currentLocation,
@@ -66,31 +72,35 @@ const WarnBadge = React.memo(
       localStorage.getItem(localhostWarnSiteKey) !== '1';
     const localhostWarnActive = Boolean(
       currentLocation &&
-      defaultLocalhostWarn &&
-      /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation)
-    )
+        defaultLocalhostWarn &&
+        /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation),
+    );
     const trackerVersion = window.env.TRACKER_VERSION ?? undefined;
     const trackerVerDiff = compareVersions(version, trackerVersion);
     const trackerWarnActive = trackerVerDiff !== VersionComparison.Same;
 
-    const [warnings, setWarnings] = React.useState<[localhostWarn: boolean, trackerWarn: boolean, virtualElsFailWarn: boolean]>([localhostWarnActive, trackerWarnActive, virtualElsFailed])
+    const [warnings, setWarnings] = React.useState<Warns>([
+      localhostWarnActive,
+      trackerWarnActive,
+      virtualElsFailed,
+    ]);
 
     React.useEffect(() => {
-      setWarnings([localhostWarnActive, trackerWarnActive, virtualElsFailed])
-    }, [localhostWarnActive, trackerWarnActive, virtualElsFailed])
+      setWarnings([localhostWarnActive, trackerWarnActive, virtualElsFailed]);
+    }, [localhostWarnActive, trackerWarnActive, virtualElsFailed]);
 
     const closeWarning = (type: 0 | 1 | 2) => {
       if (type === 1) {
         localStorage.setItem(localhostWarnSiteKey, '1');
       }
-      setWarnings((prev) => {
+      setWarnings((prev: Warns) => {
         const newWarnings = [...prev];
         newWarnings[type] = false;
-        return newWarnings;
+        return newWarnings as Warns;
       });
     };
 
-    if (!warnings.some(el => el === true)) return null;
+    if (!warnings.some((el) => el === true)) return null;
 
     // Default container styles and classes
     const defaultContainerStyle: React.CSSProperties = {
@@ -101,11 +111,15 @@ const WarnBadge = React.memo(
       transform: 'translate(-50%, 80%)',
       fontWeight: 500,
     };
-    const defaultContainerClass = "flex flex-col gap-2";
-    const defaultWarnClass = "px-3 py-.5 border border-gray-lighter shadow-sm rounded bg-active-blue flex items-center justify-between";
+    const defaultContainerClass = 'flex flex-col gap-2';
+    const defaultWarnClass =
+      'px-3 py-.5 border border-gray-lighter shadow-sm rounded bg-active-blue flex items-center justify-between';
 
     // Merge defaults with any overrides
-    const mergedContainerStyle = { ...defaultContainerStyle, ...containerStyle };
+    const mergedContainerStyle = {
+      ...defaultContainerStyle,
+      ...containerStyle,
+    };
     const mergedContainerClassName = containerClassName
       ? defaultContainerClass + ' ' + containerClassName
       : defaultContainerClass;
@@ -117,12 +131,12 @@ const WarnBadge = React.memo(
       : defaultWarnClass;
 
     return (
-      <div
-        className={mergedContainerClassName}
-        style={mergedContainerStyle}
-      >
+      <div className={mergedContainerClassName} style={mergedContainerStyle}>
         {warnings[0] ? (
-          <div className={mergedLocalhostWarnClassName} style={localhostWarnStyle}>
+          <div
+            className={mergedLocalhostWarnClassName}
+            style={localhostWarnStyle}
+          >
             <div>
               <span>{t('Some assets may load incorrectly on localhost.')}</span>
               <a
@@ -145,16 +159,19 @@ const WarnBadge = React.memo(
         ) : null}
         {warnings[1] ? (
           <div className={mergedTrackerWarnClassName} style={trackerWarnStyle}>
-            <div className='flex gap-x-2 flex-wrap'>
-              <div className='font-normal'>
-                {t('Tracker version')} <span className='mx-1 font-semibold'>{version}</span>
+            <div className="flex gap-x-2 flex-wrap">
+              <div className="font-normal">
+                {t('Tracker version')}{' '}
+                <span className="mx-1 font-semibold">{version}</span>
                 {t('for this recording is')}{' '}
                 {trackerVerDiff === VersionComparison.Lower
                   ? 'lower '
                   : 'ahead of '}
-                {t('the current')}<span className='mx-1 font-semibold'>{trackerVersion}</span>{t('version')}.
+                {t('the current')}
+                <span className="mx-1 font-semibold">{trackerVersion}</span>
+                {t('version')}.
               </div>
-              <div className='flex gap-1 items-center font-normal'>
+              <div className="flex gap-1 items-center font-normal">
                 <span>{t('Some recording might display incorrectly.')}</span>
                 <a
                   href="https://docs.openreplay.com/en/deployment/upgrade/#tracker-compatibility"
@@ -178,30 +195,42 @@ const WarnBadge = React.memo(
         {warnings[2] ? (
           <div className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between">
             <div className="flex flex-col">
-              <div>{t('If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.')}</div>
-              <div className='link' onClick={onVMode}>{t('Enable')}</div>
+              <div>
+                {t(
+                  'If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.',
+                )}
+              </div>
+              <div className="link" onClick={onVMode}>
+                {t('Enable')}
+              </div>
             </div>
 
             <div
               className="py-1 ml-3 cursor-pointer"
               onClick={() => closeWarning(1)}
             >
-              <X size={18} strokeWidth={1.5}  />
+              <X size={18} strokeWidth={1.5} />
             </div>
           </div>
         ) : null}
         {warnings[2] ? (
           <div className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between">
             <div className="flex flex-col">
-              <div>{t('If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.')}</div>
-              <div className='link' onClick={onVMode}>{t('Enable')}</div>
+              <div>
+                {t(
+                  'If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.',
+                )}
+              </div>
+              <div className="link" onClick={onVMode}>
+                {t('Enable')}
+              </div>
             </div>
 
             <div
               className="py-1 ml-3 cursor-pointer"
               onClick={() => closeWarning(2)}
             >
-              <X size={18} strokeWidth={1.5}  />
+              <X size={18} strokeWidth={1.5} />
             </div>
           </div>
         ) : null}