diff --git a/packages/react-components/src/icons/desktop.tsx b/packages/react-components/src/icons/desktop.tsx
new file mode 100644
index 0000000000..963e1c20c9
--- /dev/null
+++ b/packages/react-components/src/icons/desktop.tsx
@@ -0,0 +1,20 @@
+/* istanbul ignore file */
+
+const desktop = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={40}
+    height={37}
+    viewBox="0 0 40 37"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.5 2C0.5 1.17157 1.17157 0.5 2 0.5H38C38.8284 0.5 39.5 1.17157 39.5 2V27.5C39.5 28.3284 38.8284 29 38 29H21.5V33.5H28C28.8284 33.5 29.5 34.1716 29.5 35C29.5 35.8284 28.8284 36.5 28 36.5H12C11.1716 36.5 10.5 35.8284 10.5 35C10.5 34.1716 11.1716 33.5 12 33.5H18.5V29H2C1.17157 29 0.5 28.3284 0.5 27.5V2ZM3.5 3.5V26H36.5V3.5H3.5Z"
+      fill="#00202C"
+    />
+  </svg>
+);
+
+export default desktop;
diff --git a/packages/react-components/src/icons/index.ts b/packages/react-components/src/icons/index.ts
index e66cc29735..e5502a3019 100644
--- a/packages/react-components/src/icons/index.ts
+++ b/packages/react-components/src/icons/index.ts
@@ -25,6 +25,7 @@ export { default as crossInCircleIcon } from './cross-in-circle';
 export { default as crossSmallIcon } from './cross-small';
 export { default as dashboardIcon } from './dashboard';
 export { default as dataset } from './dataset';
+export { default as deskTopIcon } from './desktop';
 export { default as discoverIcon } from './discover';
 export { default as docsIcon } from './docs';
 export { default as dropdownChevronIcon } from './dropdown-chevron';
diff --git a/packages/react-components/src/templates/AnalyticsMobilePage.tsx b/packages/react-components/src/templates/AnalyticsMobilePage.tsx
new file mode 100644
index 0000000000..24ff4a9bb8
--- /dev/null
+++ b/packages/react-components/src/templates/AnalyticsMobilePage.tsx
@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+
+import { Paragraph } from '../atoms';
+import { rem } from '../pixels';
+import { deskTopIcon } from '../icons';
+
+const containerStyles = css({
+  padding: `30vh ${rem(24)} 0`,
+  textAlign: 'center',
+});
+
+const headlineStyles = css({
+  fontSize: '26px',
+  margin: '16px 0',
+});
+const AnalyticsMobilePage: React.FC = () => (
+  <header css={containerStyles}>
+    <div>{deskTopIcon}</div>
+    <h3 css={headlineStyles}>
+      Analytics are only available on the desktop version.
+    </h3>
+    <Paragraph accent="lead">
+      To access all analytics features, please use the desktop version. We
+      apologize for any inconvenience this may cause.
+    </Paragraph>
+  </header>
+);
+
+export default AnalyticsMobilePage;
diff --git a/packages/react-components/src/templates/AnalyticsPage.tsx b/packages/react-components/src/templates/AnalyticsPage.tsx
index 90eb5e566c..fe7ff0580a 100644
--- a/packages/react-components/src/templates/AnalyticsPage.tsx
+++ b/packages/react-components/src/templates/AnalyticsPage.tsx
@@ -2,18 +2,36 @@ import { ComponentProps } from 'react';
 import { css } from '@emotion/react';
 
 import AnalyticsPageHeader from './AnalyticsPageHeader';
+import AnalyticsMobilePage from './AnalyticsMobilePage';
 import { defaultPageLayoutPaddingStyle } from '../layout';
+import { mobileScreen } from '../pixels';
 
 const mainStyles = css({
   padding: defaultPageLayoutPaddingStyle,
 });
 
+const pageMobileStyles = css({
+  [`@media (min-width: ${mobileScreen.max}px)`]: {
+    display: 'none',
+  },
+});
+const pageDesktopStyles = css({
+  [`@media (max-width: ${mobileScreen.max}px)`]: {
+    display: 'none',
+  },
+});
+
 type AnalyticsPageProps = ComponentProps<typeof AnalyticsPageHeader>;
 
 const AnalyticsPage: React.FC<AnalyticsPageProps> = ({ children }) => (
   <article>
-    <AnalyticsPageHeader />
-    <main css={mainStyles}>{children}</main>
+    <div css={pageDesktopStyles}>
+      <AnalyticsPageHeader />
+      <main css={mainStyles}>{children}</main>
+    </div>
+    <div css={pageMobileStyles}>
+      <AnalyticsMobilePage />
+    </div>
   </article>
 );
 
diff --git a/packages/react-components/src/templates/__tests__/AnalyticsMobilePage.test.tsx b/packages/react-components/src/templates/__tests__/AnalyticsMobilePage.test.tsx
new file mode 100644
index 0000000000..ab8dfde81b
--- /dev/null
+++ b/packages/react-components/src/templates/__tests__/AnalyticsMobilePage.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+
+import AnalyticsMobilePage from '../AnalyticsMobilePage';
+
+it('renders the page', () => {
+  render(<AnalyticsMobilePage />);
+  expect(
+    screen.getByText(/Analytics are only available/, { selector: 'h3' }),
+  ).toBeVisible();
+});