diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/components/MpMenuApp/MpMenuApp.tsx b/ext/cfx-ui/src/cfx/apps/mpMenu/components/MpMenuApp/MpMenuApp.tsx
index 415aaf4f39..85494df86d 100644
--- a/ext/cfx-ui/src/cfx/apps/mpMenu/components/MpMenuApp/MpMenuApp.tsx
+++ b/ext/cfx-ui/src/cfx/apps/mpMenu/components/MpMenuApp/MpMenuApp.tsx
@@ -1,3 +1,4 @@
+import { observer } from "mobx-react-lite";
 import { Outlet } from 'react-router-dom';
 import { NavBar } from 'cfx/apps/mpMenu/parts/NavBar/NavBar';
 import { AuthFlyout } from 'cfx/apps/mpMenu/parts/AuthFlyout/AuthFlyout';
@@ -7,13 +8,14 @@ import { LegacyConnectingModal } from 'cfx/apps/mpMenu/parts/LegacyConnectingMod
 import { LegacyUiMessageModal } from 'cfx/apps/mpMenu/parts/LegacyUiMessageModal/LegacyUiMessageModal';
 import { ServerBoostModal } from 'cfx/apps/mpMenu/parts/ServerBoostModal/ServerBoostModal';
 import { AcitivityItemMediaViewerProvider } from '../AcitivityItemMediaViewer/AcitivityItemMediaViewer.context';
+import { LegalAccepter } from "cfx/apps/mpMenu/parts/LegalAccepter/LegalAccepter";
+import { useLegalService } from "cfx/apps/mpMenu/services/legal/legal.service";
 import { NavigationTracker } from './PageViewTracker';
 import s from './MpMenuApp.module.scss';
 
-export function MpMenuApp() {
+function MpMenuUI() {
   return (
-    <AcitivityItemMediaViewerProvider>
-      <ThemeManager />
+    <>
       <NavigationTracker />
 
       <AuthFlyout />
@@ -31,6 +33,22 @@ export function MpMenuApp() {
           <Outlet />
         </div>
       </div>
-    </AcitivityItemMediaViewerProvider>
+    </>
   );
 }
+
+export const MpMenuApp = observer(function MpMenuApp() {
+  const legalService = useLegalService();
+
+  const mainUI = legalService.hasUserAccepted
+    ? <MpMenuUI />
+    : <LegalAccepter />;
+
+  return (
+    <AcitivityItemMediaViewerProvider>
+      <ThemeManager />
+
+      {mainUI}
+    </AcitivityItemMediaViewerProvider>
+  );
+});
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/index.tsx b/ext/cfx-ui/src/cfx/apps/mpMenu/index.tsx
index f998107c63..fad284fc84 100644
--- a/ext/cfx-ui/src/cfx/apps/mpMenu/index.tsx
+++ b/ext/cfx-ui/src/cfx/apps/mpMenu/index.tsx
@@ -40,8 +40,10 @@ import { IServersConnectService } from 'cfx/common/services/servers/serversConne
 import { Handle404 } from './pages/404';
 import { registerHomeScreenServerList } from './services/servers/list/HomeScreenServerList.service';
 import { registerSentryService } from './services/sentry/sentry.service';
+import { registerLegalService } from "./services/legal/legal.service";
 import { SentryLogProvider } from './services/sentry/sentryLogProvider';
-import { animationFrame, idleCallback, timeout } from 'cfx/utils/async';
+import { timeout } from 'cfx/utils/async';
+import { shutdownLoadingSplash } from "./utils/loadingSplash";
 
 startBrowserApp({
   defineServices(container) {
@@ -56,6 +58,8 @@ startBrowserApp({
       MatomoAnalyticsProvider,
     ]);
 
+    registerLegalService(container);
+
     registerSettingsService(container, {
       settings: GAME_SETTINGS,
       defaultSettingsCategoryId: DEFAULT_GAME_SETTINGS_CATEGORY_ID,
@@ -142,29 +146,9 @@ startBrowserApp({
       mpMenu.invokeNative('executeCommand', 'nui_devtools mpMenu');
     }
 
-    mpMenu.invokeNative('getMinModeInfo');
+    mpMenu.showGameWindow();
 
     // Not using await here so app won't wait for this to end
-    timeout(1000).then(animationFrame).then(() => {
-      const $loader = document.getElementById('loader');
-      if (!$loader) {
-        console.error('No #loader found, did it get deleted from index.html?');
-        return;
-      }
-
-      $loader.classList.add('hide');
-
-      const $loaderMask = $loader.querySelector('#loader-mask');
-      if (!$loaderMask) {
-        console.error('No #loader-mask found, did it get deleted from index.html?');
-        return;
-      }
-
-      $loaderMask.addEventListener('animationend', async () => {
-        await idleCallback(1000);
-
-        $loader.parentNode?.removeChild($loader);
-      });
-    });
+    timeout(1000).then(shutdownLoadingSplash);
   },
 });
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/mpMenu.ts b/ext/cfx-ui/src/cfx/apps/mpMenu/mpMenu.ts
index 4e0b81a8ee..424492c562 100644
--- a/ext/cfx-ui/src/cfx/apps/mpMenu/mpMenu.ts
+++ b/ext/cfx-ui/src/cfx/apps/mpMenu/mpMenu.ts
@@ -60,7 +60,9 @@ class NicknameStore {
 
 export namespace mpMenu {
   export function invokeNative(native: string, arg = '') {
-    console.log('Invoking native', native, JSON.stringify(arg));
+    if (__CFXUI_DEV__) {
+      console.log('Invoking native', native, JSON.stringify(arg));
+    }
 
     nuiWindow.invokeNative(native, arg);
   }
@@ -79,6 +81,21 @@ export namespace mpMenu {
     invokeNative('openUrl', url);
   }
 
+  let showGameWindowRequested = false;
+  export function showGameWindow() {
+    if (showGameWindowRequested) {
+      return;
+    }
+
+    showGameWindowRequested = true;
+
+    invokeNative('getMinModeInfo');
+  }
+
+  export function exit() {
+    invokeNative('exit');
+  }
+
   export const systemLanguages = [...new Set(nuiWindow.nuiSystemLanguages || ['en-us'])];
 
   export const computerName = new AwaitableValue('');
@@ -152,7 +169,9 @@ export namespace mpMenu {
 
 
 window.addEventListener('message', (event: MessageEvent) => {
-  console.log('[WNDMSG]', event.data);
+  if (__CFXUI_DEV__) {
+    console.log('[WNDMSG]', event.data);
+  }
 
   const { data } = event;
 
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegalAccepter/LegalAccepter.module.scss b/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegalAccepter/LegalAccepter.module.scss
new file mode 100644
index 0000000000..b207162a35
--- /dev/null
+++ b/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegalAccepter/LegalAccepter.module.scss
@@ -0,0 +1,15 @@
+.root {
+  width: min(max(calc(#{ui.viewport-width()} * .5), 500px), #{ui.viewport-width()});
+  height: ui.viewport-height();
+
+  box-shadow: 0 0 0 2px ui.color-token('island-border') inset;
+
+  @include ui.border-radius();
+  background-color: ui.color-token('flyout-backdrop-background');
+
+  .iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegalAccepter/LegalAccepter.tsx b/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegalAccepter/LegalAccepter.tsx
new file mode 100644
index 0000000000..345efb2bde
--- /dev/null
+++ b/ext/cfx-ui/src/cfx/apps/mpMenu/parts/LegalAccepter/LegalAccepter.tsx
@@ -0,0 +1,71 @@
+import { observer } from "mobx-react-lite";
+import { mpMenu } from "../../mpMenu";
+import { Pad } from "cfx/ui/Layout/Pad/Pad";
+import { Flex } from "cfx/ui/Layout/Flex/Flex";
+import { TextBlock } from "cfx/ui/Text/Text";
+import { FlexRestricter } from "cfx/ui/Layout/Flex/FlexRestricter";
+import { Button } from "cfx/ui/Button/Button";
+import { Icons } from "cfx/ui/Icons";
+import { Title } from "cfx/ui/Title/Title";
+import { Icon } from "cfx/ui/Icon/Icon";
+import { CurrentGameBrand } from "cfx/base/gameRuntime";
+import { useLegalService } from "cfx/apps/mpMenu/services/legal/legal.service";
+import s from './LegalAccepter.module.scss';
+
+export const LegalAccepter = observer(function TOSAccepter() {
+  const legalService = useLegalService();
+
+  return (
+    <div className={s.root}>
+      {/* The reason for the reverse order here is so that the "I Accept" button captures focus first when/if user press Tab key */}
+      <Flex vertical fullHeight fullWidth reverseOrder gap="none">
+        <Pad size="large">
+          <Flex repell centered reverseOrder>
+            <Button
+              tabIndex={0}
+              theme="primary"
+              size="large"
+              text="I Accept"
+              onClick={legalService.accept}
+            />
+
+            <Title delay={1000} title={`Exit ${CurrentGameBrand}`}>
+              <Button
+                tabIndex={1}
+                text="Cancel"
+                onClick={mpMenu.exit}
+              />
+            </Title>
+          </Flex>
+        </Pad>
+
+        <FlexRestricter vertical>
+          <iframe
+            src={`${legalService.TOS_URL}#toolbar=0&view=FitH`}
+            className={s.iframe}
+          ></iframe>
+        </FlexRestricter>
+
+        <Pad size="large">
+          <Flex vertical gap="large">
+            <TextBlock family="secondary" weight="bolder" size="xxlarge">
+              Terms of Service
+            </TextBlock>
+
+            <Flex vertical gap="small">
+              <TextBlock opacity="75">
+                Last modified: {legalService.CURRENT_TOS_VERSION}
+              </TextBlock>
+
+              <TextBlock typographic opacity="75">
+                <Title title={legalService.TOS_URL}>
+                  <a href={legalService.TOS_URL}>Open the Terms of Service in your browser <Icon size="small">{Icons.externalLink}</Icon></a>
+                </Title>
+              </TextBlock>
+            </Flex>
+          </Flex>
+        </Pad>
+      </Flex>
+    </div>
+  );
+});
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/parts/NavBar/Exitter/Exitter.tsx b/ext/cfx-ui/src/cfx/apps/mpMenu/parts/NavBar/Exitter/Exitter.tsx
index a467763217..ba32152f27 100644
--- a/ext/cfx-ui/src/cfx/apps/mpMenu/parts/NavBar/Exitter/Exitter.tsx
+++ b/ext/cfx-ui/src/cfx/apps/mpMenu/parts/NavBar/Exitter/Exitter.tsx
@@ -44,7 +44,7 @@ export function Exitter() {
                       theme="default-blurred"
                       size="large"
                       text={$L('#ExitToDesktop')}
-                      onClick={() => mpMenu.invokeNative('exit')}
+                      onClick={mpMenu.exit}
                     />
                     <Button
                       theme="primary"
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/services/legal/legal.service.ts b/ext/cfx-ui/src/cfx/apps/mpMenu/services/legal/legal.service.ts
new file mode 100644
index 0000000000..41805d7a44
--- /dev/null
+++ b/ext/cfx-ui/src/cfx/apps/mpMenu/services/legal/legal.service.ts
@@ -0,0 +1,65 @@
+import { ServicesContainer, defineService, useService } from "cfx/base/servicesContainer";
+import { ASID } from "cfx/utils/asid";
+import { joaat } from "cfx/utils/hash";
+import { injectable } from "inversify";
+import { makeAutoObservable } from "mobx";
+
+export const ILegalService = defineService<LegalService>('legalService');
+
+export function registerLegalService(container: ServicesContainer) {
+  container.registerImpl(ILegalService, LegalService);
+}
+
+export function useLegalService() {
+  return useService(ILegalService);
+}
+
+const LS_KEY = 'legalAcceptanceData';
+
+type TOSVersionHash = number;
+type AcceptanceTimestamp = number;
+
+type LegalAcceptanceData = [AcceptanceTimestamp, TOSVersionHash];
+
+@injectable()
+export class LegalService {
+  readonly CURRENT_TOS_VERSION = '2020-09-06';
+  readonly TOS_URL = 'https://runtime.fivem.net/fivem-service-agreement-4.pdf';
+
+  private readonly currentTOSVersionHash = joaat(`${ASID}.${this.CURRENT_TOS_VERSION}`);
+
+  private _hasUserAccepted: boolean;
+  public get hasUserAccepted(): boolean { return this._hasUserAccepted }
+  private set hasUserAccepted(hasUserAccepted: boolean) { this._hasUserAccepted = hasUserAccepted }
+
+  constructor() {
+    this._hasUserAccepted = this.reviveHasUserAccepted();
+
+    makeAutoObservable(this);
+  }
+
+  public readonly accept = () => {
+    try {
+      const data: LegalAcceptanceData = [
+        Date.now(),
+        this.currentTOSVersionHash,
+      ];
+
+      window.localStorage.setItem(LS_KEY, JSON.stringify(data));
+
+      this.hasUserAccepted = true;
+    } catch (e) {
+      // no-op
+    }
+  };
+
+  private reviveHasUserAccepted(): boolean {
+    try {
+      const [_timestamp, acceptedTOSVersionHash] = JSON.parse(window.localStorage.getItem(LS_KEY) || '[]') as LegalAcceptanceData;
+
+      return acceptedTOSVersionHash === this.currentTOSVersionHash;
+    } catch (e) {
+      return false;
+    }
+  }
+}
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/services/sentry/sentry.service.ts b/ext/cfx-ui/src/cfx/apps/mpMenu/services/sentry/sentry.service.ts
index bc2502ae18..837346f447 100644
--- a/ext/cfx-ui/src/cfx/apps/mpMenu/services/sentry/sentry.service.ts
+++ b/ext/cfx-ui/src/cfx/apps/mpMenu/services/sentry/sentry.service.ts
@@ -6,10 +6,10 @@ import { IAccountService } from 'cfx/common/services/account/account.service';
 import { IAccount } from 'cfx/common/services/account/types';
 import { AppContribution, registerAppContribution } from 'cfx/common/services/app/app.extensions';
 import { fetcher } from 'cfx/utils/fetcher';
-import { fastRandomId } from 'cfx/utils/random';
 import { inject, injectable } from 'inversify';
 import { mpMenu } from '../../mpMenu';
 import { IConvarService } from '../convars/convars.service';
+import { ASID } from "cfx/utils/asid";
 
 const ENABLE_SENTRY = !__CFXUI_DEV__ && process.env.CI_PIPELINE_ID;
 
@@ -58,22 +58,12 @@ if (ENABLE_SENTRY) {
     },
   });
 
+  const id = ASID;
 
-  // Set stable user id early
-  try {
-    if (!window.localStorage['sentryUserId']) {
-      window.localStorage['sentryUserId'] = `${fastRandomId()}-${fastRandomId()}`;
-    }
-
-    const id = window.localStorage['sentryUserId'];
-
-    Sentry.setUser({
-      id,
-      username: id,
-    });
-  } catch (e) {
-    // no-op
-  }
+  Sentry.setUser({
+    id,
+    username: id,
+  });
 }
 
 export function registerSentryService(container: ServicesContainer) {
@@ -123,7 +113,7 @@ class SentryService implements AppContribution {
 
     Sentry.setContext('convars', Object.fromEntries(
       Object.entries(this.convarService.getAll()).filter(([key, value]) => {
-        if (key.startsWith('cl_'))  {
+        if (key.startsWith('cl_')) {
           return false;
         }
         if (key.startsWith('cam_')) {
diff --git a/ext/cfx-ui/src/cfx/apps/mpMenu/utils/loadingSplash.ts b/ext/cfx-ui/src/cfx/apps/mpMenu/utils/loadingSplash.ts
new file mode 100644
index 0000000000..213348a998
--- /dev/null
+++ b/ext/cfx-ui/src/cfx/apps/mpMenu/utils/loadingSplash.ts
@@ -0,0 +1,41 @@
+import { Deferred, idleCallback } from "cfx/utils/async";
+
+let loadingSplashShutdownRequested = true;
+
+export const loadingSplashInactiveDeferred = new Deferred<void>();
+
+export function shutdownLoadingSplash() {
+  if (!loadingSplashShutdownRequested) {
+    return;
+  }
+
+  loadingSplashShutdownRequested = false;
+
+  try {
+    const $loader = document.getElementById('loader');
+    if (!$loader) {
+      throw new Error('No #loader found, did it get deleted from index.html?');
+    }
+
+    const $loaderMask = $loader.querySelector('#loader-mask');
+    if (!$loaderMask) {
+      throw new Error('No #loader-mask found, did it get deleted from index.html?');
+    }
+
+    requestAnimationFrame(() => {
+      $loader.classList.add('hide');
+
+      $loaderMask.addEventListener('animationend', async () => {
+        await idleCallback(1000);
+
+        $loader.parentNode?.removeChild($loader);
+      });
+
+      loadingSplashInactiveDeferred.resolve();
+    });
+  } catch (e) {
+    loadingSplashInactiveDeferred.resolve();
+
+    console.error(e);
+  }
+}
diff --git a/ext/cfx-ui/src/cfx/base/createApp.tsx b/ext/cfx-ui/src/cfx/base/createApp.tsx
index 0a49d3f91a..9f9189533a 100644
--- a/ext/cfx-ui/src/cfx/base/createApp.tsx
+++ b/ext/cfx-ui/src/cfx/base/createApp.tsx
@@ -32,7 +32,7 @@ export async function startBrowserApp(definition: AppDefinition) {
     document.body.style.backgroundColor = 'black';
     document.body.style.color = 'red';
 
-    document.body.innerHTML = '<h1>Invalid HTML template, no #cfxui-root node available, CFXUI app will not be rendered</h1>';
+    document.body.innerHTML = `<h1>Invalid HTML template, no ${appNodeSelector} node available, CFXUI app will not be rendered</h1>`;
 
     return;
   }
diff --git a/ext/cfx-ui/src/cfx/ui/Layout/Flex/Flex.module.scss b/ext/cfx-ui/src/cfx/ui/Layout/Flex/Flex.module.scss
index 8fc929118f..b1675c737f 100644
--- a/ext/cfx-ui/src/cfx/ui/Layout/Flex/Flex.module.scss
+++ b/ext/cfx-ui/src/cfx/ui/Layout/Flex/Flex.module.scss
@@ -1,5 +1,6 @@
 .root {
   display: flex;
+  flex-direction: row;
 
   &.full-width {
     width: 100%;
@@ -25,8 +26,16 @@
     justify-content: baseline;
   }
 
+  &.reverse-order {
+    flex-direction: row-reverse;
+  }
+
   &.vertical {
     flex-direction: column;
+
+    &.reverse-order {
+      flex-direction: column-reverse;
+    }
   }
 
   &.repell {
diff --git a/ext/cfx-ui/src/cfx/ui/Layout/Flex/Flex.tsx b/ext/cfx-ui/src/cfx/ui/Layout/Flex/Flex.tsx
index 37bcb2c5c3..3cc2c1eea2 100644
--- a/ext/cfx-ui/src/cfx/ui/Layout/Flex/Flex.tsx
+++ b/ext/cfx-ui/src/cfx/ui/Layout/Flex/Flex.tsx
@@ -9,6 +9,7 @@ export interface FlexProps {
 
   centered?: boolean | 'axis' | 'cross-axis' | 'baseline-axis' | 'baseline-cross-axis',
   vertical?: boolean,
+  reverseOrder?: boolean,
   repell?: boolean,
   stretch?: boolean,
   wrap?: boolean,
@@ -34,6 +35,7 @@ function FlexComponent(props: FlexProps, ref: React.Ref<HTMLDivElement>) {
     alignToEnd = false,
     alignToEndAxis = false,
     spaceBetween = false,
+    reverseOrder = false,
     gap = 'normal',
     children,
     className,
@@ -55,6 +57,7 @@ function FlexComponent(props: FlexProps, ref: React.Ref<HTMLDivElement>) {
     [s['align-to-end']]: alignToEnd,
     [s['align-to-end-axis']]: alignToEndAxis,
     [s['space-between']]: spaceBetween,
+    [s['reverse-order']]: reverseOrder,
   });
 
   return (
diff --git a/ext/cfx-ui/src/cfx/utils/asid.ts b/ext/cfx-ui/src/cfx/utils/asid.ts
new file mode 100644
index 0000000000..04d453dec7
--- /dev/null
+++ b/ext/cfx-ui/src/cfx/utils/asid.ts
@@ -0,0 +1,48 @@
+import { fastRandomId } from "./random";
+
+module LS_KEY {
+  export const ASID = 'anonymousStableIdentifier';
+  export const SentryUserId = 'sentryUserId';
+}
+
+/**
+ * ASID stands for Anonymous Stable Identifier
+ *
+ * It holds no connection to user accounts by itself and only needed for grouping telemetry for one particular user
+ */
+export const ASID = (() => {
+  try {
+    const existingASID = window.localStorage.getItem(LS_KEY.ASID);
+    if (existingASID) {
+      // Clean up the sentry user id if it still exists
+      window.localStorage.removeItem(LS_KEY.SentryUserId);
+
+      return existingASID;
+    }
+
+    // May be migrate from sentry user id as it is literally the same as ASID
+    const sentryUserId = window.localStorage.getItem(LS_KEY.SentryUserId);
+    if (sentryUserId) {
+      window.localStorage.setItem(LS_KEY.ASID, sentryUserId);
+      window.localStorage.removeItem(LS_KEY.SentryUserId);
+
+      return sentryUserId;
+    }
+
+    const newASID = generateNewASID();
+
+    window.localStorage.setItem(LS_KEY.ASID, newASID);
+
+    return newASID;
+  } catch (e) {
+    if (__CFXUI_DEV__) {
+      console.error(e);
+    }
+
+    return generateNewASID();
+  }
+})();
+
+function generateNewASID() {
+  return `${fastRandomId()}-${fastRandomId()}`;
+}
diff --git a/ext/cfx-ui/src/cfx/utils/hash.ts b/ext/cfx-ui/src/cfx/utils/hash.ts
new file mode 100644
index 0000000000..88b8cdac12
--- /dev/null
+++ b/ext/cfx-ui/src/cfx/utils/hash.ts
@@ -0,0 +1,19 @@
+const joaatU32Array = new Uint32Array(1);
+
+export function joaat(key: string): number {
+  const skey: any = key.toLowerCase();
+
+  joaatU32Array[0] = 0;
+
+  for (const i in skey) {
+      joaatU32Array[0] += skey.charCodeAt(i as any);
+      joaatU32Array[0] += joaatU32Array[0] << 10;
+      joaatU32Array[0] ^= joaatU32Array[0] >>> 6;
+  }
+
+  joaatU32Array[0] += joaatU32Array[0] << 3;
+  joaatU32Array[0] ^= joaatU32Array[0] >>> 11;
+  joaatU32Array[0] += joaatU32Array[0] << 15;
+
+  return joaatU32Array[0];
+}