diff --git a/app/src/Router.tsx b/app/src/Router.tsx
index efc450ad..c734b3b2 100644
--- a/app/src/Router.tsx
+++ b/app/src/Router.tsx
@@ -9,6 +9,7 @@ import { SimulationCreationFlow } from './flows/simulationCreationFlow';
 import DashboardPage from './pages/Dashboard.page';
 import DonatePage from './pages/Donate.page';
 import HomePage from './pages/Home.page';
+import AIMLPage from './pages/ML.page';
 import PoliciesPage from './pages/Policies.page';
 import PopulationsPage from './pages/Populations.page';
 import PrivacyPage from './pages/Privacy.page';
@@ -142,6 +143,10 @@ const router = createBrowserRouter(
               path: 'terms',
               element: <TermsPage />,
             },
+            {
+              path: 'ai-ml',
+              element: <AIMLPage />,
+            },
             {
               path: 'methodology',
               element: <div>Methodology page</div>,
diff --git a/app/src/assets/ai-analysis.png b/app/src/assets/ai-analysis.png
new file mode 100644
index 00000000..2a14b886
Binary files /dev/null and b/app/src/assets/ai-analysis.png differ
diff --git a/app/src/assets/us-household-ai.png b/app/src/assets/us-household-ai.png
new file mode 100644
index 00000000..cfcea4f1
Binary files /dev/null and b/app/src/assets/us-household-ai.png differ
diff --git a/app/src/components/TwoColumnView.tsx b/app/src/components/TwoColumnView.tsx
index e57af7e6..ed15089e 100644
--- a/app/src/components/TwoColumnView.tsx
+++ b/app/src/components/TwoColumnView.tsx
@@ -1,4 +1,4 @@
-import { Grid, Paper, Title } from '@mantine/core';
+import { Box, Grid, Paper, Title } from '@mantine/core';
 import { colors, spacing, typography } from '@/designTokens';
 
 interface TwoColumnViewProps {
@@ -20,29 +20,31 @@ const TwoColumnView = ({ title, leftColumn, rightColumn, backgroundColor }: TwoC
   };
 
   return (
-    <Paper
-      bg={getBackgroundColor()}
-      p={spacing.container.lg}
-      radius={spacing.radius.lg}
-      style={{ minHeight: '400px' }}
+    <Box
+      style={{
+        maxWidth: 1300,
+        margin: '0 auto',
+      }}
     >
-      <Title
-        order={2}
-        variant="colored"
-        ff={typography.fontFamily.primary}
-        size={typography.fontSize['3xl']}
-        fw={typography.fontWeight.bold}
-        c={colors.text.title}
-        mb={spacing['3xl']}
-        ta="left"
-      >
-        {title}
-      </Title>
-      <Grid gutter={spacing['3xl']} align="center">
-        <Grid.Col span={{ base: 12, sm: 6 }}>{leftColumn}</Grid.Col>
-        <Grid.Col span={{ base: 12, sm: 6 }}>{rightColumn}</Grid.Col>
-      </Grid>
-    </Paper>
+      <Paper bg={getBackgroundColor()} radius={spacing.radius.lg} style={{ minHeight: '400px' }}>
+        <Title
+          order={2}
+          variant="colored"
+          ff={typography.fontFamily.primary}
+          size={typography.fontSize['3xl']}
+          fw={typography.fontWeight.bold}
+          c={colors.text.title}
+          mb={spacing['3xl']}
+          ta="left"
+        >
+          {title}
+        </Title>
+        <Grid gutter={spacing['3xl']} align="center">
+          <Grid.Col span={{ base: 12, sm: 6 }}>{leftColumn}</Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 6 }}>{rightColumn}</Grid.Col>
+        </Grid>
+      </Paper>
+    </Box>
   );
 };
 
diff --git a/app/src/components/shared/static/CardsWithHeader.tsx b/app/src/components/shared/static/CardsWithHeader.tsx
index 3e7af154..33128113 100644
--- a/app/src/components/shared/static/CardsWithHeader.tsx
+++ b/app/src/components/shared/static/CardsWithHeader.tsx
@@ -11,8 +11,6 @@ export function CardsWithHeader({ containerTitle, cards }: CardsContainerProps)
   return (
     <Box
       style={{
-        paddingLeft: spacing.container.xl,
-        paddingRight: spacing.container.xl,
         paddingTop: spacing['2xl'],
         paddingBottom: spacing['2xl'],
       }}
diff --git a/app/src/components/shared/static/PageHeader.tsx b/app/src/components/shared/static/PageHeader.tsx
index ff391bae..b5168b4d 100644
--- a/app/src/components/shared/static/PageHeader.tsx
+++ b/app/src/components/shared/static/PageHeader.tsx
@@ -16,42 +16,50 @@ export default function PageHeader({ title, description }: PageHeaderProps) {
         borderBottom: `1px solid ${colors.border.dark}`,
       }}
     >
-      <Flex
-        direction={{ base: 'column', md: 'row' }}
-        align={{ base: 'stretch', md: 'center' }}
-        gap={{ base: 'md', md: 'xl' }}
+      <Box
+        px={spacing.xl}
+        style={{
+          maxWidth: 1300,
+          margin: '0 auto',
+        }}
       >
-        <Box w={{ base: '100%', md: 300 }}>
-          <Title
-            variant="colored"
-            style={{
-              fontSize: typography.fontSize['4xl'],
-              fontWeight: typography.fontWeight.semibold,
-              fontFamily: typography.fontFamily.primary,
-            }}
-          >
-            {title}
-          </Title>
-        </Box>
+        <Flex
+          direction={{ base: 'column', md: 'row' }}
+          align={{ base: 'stretch', md: 'center' }}
+          gap={{ base: 'md', md: 'xl' }}
+        >
+          <Box w={{ base: '100%', md: 300 }}>
+            <Title
+              variant="colored"
+              style={{
+                fontSize: typography.fontSize['4xl'],
+                fontWeight: typography.fontWeight.semibold,
+                fontFamily: typography.fontFamily.primary,
+              }}
+            >
+              {title}
+            </Title>
+          </Box>
 
-        <Divider orientation="horizontal" size="xs" color={colors.border.light} hiddenFrom="md" />
+          <Divider orientation="horizontal" size="xs" color={colors.border.light} hiddenFrom="md" />
 
-        <Divider orientation="vertical" size="xs" color={colors.border.light} visibleFrom="md" />
+          <Divider orientation="vertical" size="xs" color={colors.border.light} visibleFrom="md" />
 
-        <Box w={{ base: '100%', md: 'auto' }}>
-          <Text
-            style={{
-              color: colors.text.primary,
-              fontSize: typography.fontSize.lg,
-              lineHeight: typography.lineHeight.relaxed,
-              fontFamily: typography.fontFamily.body,
-            }}
-            ta={{ base: 'left', md: 'center' }}
-          >
-            {description}
-          </Text>
-        </Box>
-      </Flex>
+          <Box w={{ base: '100%', md: 'auto' }}>
+            <Text
+              style={{
+                color: colors.text.primary,
+                fontSize: typography.fontSize.lg,
+                lineHeight: typography.lineHeight.relaxed,
+                fontFamily: typography.fontFamily.body,
+              }}
+              ta={{ base: 'left', md: 'center' }}
+            >
+              {description}
+            </Text>
+          </Box>
+        </Flex>
+      </Box>
     </Box>
   );
 }
diff --git a/app/src/components/shared/static/TextCardWithHeader.tsx b/app/src/components/shared/static/TextCardWithHeader.tsx
index 6bfd5649..8a320d6f 100644
--- a/app/src/components/shared/static/TextCardWithHeader.tsx
+++ b/app/src/components/shared/static/TextCardWithHeader.tsx
@@ -29,7 +29,7 @@ export const TitleCardWithHeader: React.FC<TitleCardWithHeaderProps> = ({
       textColor = colors.text.inverse;
       break;
     case 'gray':
-      resolvedBackgroundColor = colors.gray[200];
+      resolvedBackgroundColor = colors.gray[100];
       textColor = colors.text.primary;
       break;
     case 'white':
@@ -47,7 +47,7 @@ export const TitleCardWithHeader: React.FC<TitleCardWithHeaderProps> = ({
       </Title>
 
       {/* Card with content */}
-      <Card radius="lg" p="xl" bg={resolvedBackgroundColor}>
+      <Card radius="lg" p="xl" mt="md" bg={resolvedBackgroundColor}>
         <Stack gap="md">
           {sections.map((section, idx) => (
             <>
diff --git a/app/src/pages/ML.page.tsx b/app/src/pages/ML.page.tsx
new file mode 100644
index 00000000..00696d68
--- /dev/null
+++ b/app/src/pages/ML.page.tsx
@@ -0,0 +1,137 @@
+import { Box } from '@mantine/core';
+import aiAnalysisImg from '@/assets/ai-analysis.png';
+import usHouseholdAiImg from '@/assets/us-household-ai.png';
+import CalloutWithImage from '@/components/shared/static/CalloutWithImage';
+import { CardsWithHeader } from '@/components/shared/static/CardsWithHeader';
+import PageHeader from '@/components/shared/static/PageHeader';
+import { TitleCardWithHeader } from '@/components/shared/static/TextCardWithHeader';
+import TwoColumnView from '@/components/TwoColumnView';
+import { spacing } from '@/designTokens';
+
+export default function AIMLPage() {
+  const leftColumnContent = (
+    <>
+      PolicyEngine integrates large language models with our computational tax-benefit engine to
+      transform complex calculations into clear explanations.
+      <br />
+      <br />
+      For household calculations, we process thousands of intermediate values across tax and benefit
+      programs, then use Anthropic's Claude API to generate plain-language explanations of
+      eligibility, amounts, and potential changes.
+      <br />
+      <br />
+      For policy analysis, we leverage GPT-4 to weave narratives from our computational results,
+      explaining reforms in terms anyone can understand - from simplified `ELI5` explanations to
+      detailed technical analyses for policy experts.
+    </>
+  );
+
+  const rightColumnContent = (
+    <img
+      src={aiAnalysisImg}
+      alt="Diagram illustrating AI analysis"
+      style={{ maxWidth: '100%', height: 'auto' }}
+    />
+  );
+
+  return (
+    <Box>
+      <PageHeader
+        title="AI & Machine Learning"
+        description="PolicyEngine uses artificial intelligence and machine learning to make policy analysis more accurate and accessible."
+      />
+      <Box
+        px={spacing.xl}
+        py={spacing['3xl']}
+        style={{
+          maxWidth: 1300,
+          margin: '0 auto',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: spacing['3xl'],
+        }}
+      >
+        <CalloutWithImage
+          title="Making Policy Accessible With AI"
+          description="PolicyEngine combines tax-benefit microsimulation with cutting-edge AI to democratize policy understanding"
+          buttonLabel="Learn about our AI explanations tool"
+          // TODO: update button click event once page link is available
+          // onButtonClick={() => console.log('clicked')}
+          imageSrc={usHouseholdAiImg}
+          imageAlt="AI Explanations Tool Preview"
+        />
+        <CardsWithHeader
+          containerTitle="AI/ML Resources"
+          cards={[
+            {
+              title: 'Instant analysis',
+              description:
+                'Generate comprehensive policy analysis with natural language, tailored to different knowledge levels',
+              icon: '✨',
+              background: 'gray',
+            },
+            {
+              title: 'Plain language explanations',
+              description:
+                "Understand complex tax and benefit calculations through clear, accessible explanations of your household's finances",
+              icon: '🧠',
+              background: 'gray',
+            },
+            {
+              title: 'Data-driven insights',
+              description:
+                'Combine computational precision with narrative insights to tell the complete story of policy impacts',
+              icon: '📊',
+              background: 'gray',
+            },
+          ]}
+        />
+
+        <TitleCardWithHeader
+          title="Our AI Journey"
+          sections={[
+            {
+              heading: 'Machine learning foundations: 2021-2022',
+              body: 'PolicyEngine has leveraged artificial intelligence since our inception. In 2021, we pioneered the use of machine learning to enhance our microsimulation models, applying gradient descent to optimized survey weights and match administrative totals with unprecedented accuracy.',
+            },
+            {
+              body: 'By 2022, our UK model had achieved up to 80% lower aggregate errors compared to other microsimulation models. This foundation of AI-enhanced accuracy has been central to our mission of providing reliable policy analysis.',
+            },
+            {
+              heading: 'Data science innovation: 2023',
+              body: 'We expanded our AI capabilities in 2023 with our Enhanced Current Population Survey (ECPS) for the US model, using quantile regression forests to integrate tax record information with survey data, creating the first open alternative to restricted tax microdata for policy microsimulation.',
+            },
+            {
+              heading: 'AI-Powered Analysis: 2023-Present',
+              body: 'When OpenAI released GPT-4 in March 2023, we immediately recognized its potential to democratize policy understanding. Within just one month, we launched our AI-powered Analysis tool that translates complex computational results into accessible narratives.',
+            },
+            {
+              body: "In 2024, we extended this capability to household-level calculations with Anthropic's Claude API, enabling users to understand exactly how their taxes and benefits are calculated through plain-language explanations.",
+            },
+          ]}
+          backgroundColor="gray"
+        />
+
+        <TwoColumnView
+          title="How it works"
+          leftColumn={leftColumnContent}
+          rightColumn={rightColumnContent}
+        />
+
+        <Box>
+          <h1>Watch our AI Demo</h1>
+          <iframe
+            width="900"
+            height="550"
+            src="https://www.youtube.com/embed/fnuDyLKpt90?si=kIOaT5HbJzRRV0Fj"
+            title="YouTube video player"
+            style={{ border: 'none' }}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerPolicy="strict-origin-when-cross-origin"
+            allowFullScreen
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/app/src/styles/stylesheets/RichTextBlock.css b/app/src/styles/stylesheets/RichTextBlock.css
index 6b8516c2..dec83673 100644
--- a/app/src/styles/stylesheets/RichTextBlock.css
+++ b/app/src/styles/stylesheets/RichTextBlock.css
@@ -2,7 +2,7 @@
    provides no way to provide styling to child components natively */
 
 .rich-text-block p {
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 1.625;
   margin-bottom: 16px;