diff --git a/src/components/TypographyDemo.tsx b/src/components/TypographyDemo.tsx
index d851f3b..f1532af 100644
--- a/src/components/TypographyDemo.tsx
+++ b/src/components/TypographyDemo.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@iconify/react';
-import { Blockquote, Code, Highlight, Stack } from '@mantine/core';
+import { Blockquote, Code, Highlight, Stack, Title } from '@mantine/core';
 import { memo } from 'react';
 import { Feature } from '@/components/ui/Feature';
 import { type ControlledDemoProps } from '@/pages';
@@ -47,6 +47,19 @@ const TypographyDemo = memo(function TypographyDemo({
           Highlight This, definitely THIS and also this!
         </Highlight>
       </Feature>
+
+      <Feature
+        className="col-span-1 md:col-span-2"
+        group="Typography"
+        title="Title"
+      >
+        <Title order={1}>{label}</Title>
+        <Title order={2}>{label}</Title>
+        <Title order={3}>{label}</Title>
+        <Title order={4}>{label}</Title>
+        <Title order={5}>{label}</Title>
+        <Title order={6}>{label}</Title>
+      </Feature>
     </>
   );
 });
diff --git a/src/context/MantineProvider.tsx b/src/context/MantineProvider.tsx
index 708982b..2c2ed69 100644
--- a/src/context/MantineProvider.tsx
+++ b/src/context/MantineProvider.tsx
@@ -1,7 +1,9 @@
 import {
   MantineProvider as BaseMantineProvider,
   type MantineBreakpointsValues,
+  type MantineShadowsValues,
   createTheme,
+  rem,
 } from '@mantine/core';
 import twDefaultColors from 'tailwindcss/colors';
 
@@ -29,14 +31,6 @@ const convertColor = (twColors) => {
 };
 
 const theme = createTheme({
-  breakpoints: {
-    xs: '30em',
-    sm: '40em',
-    md: '48em',
-    lg: '64em',
-    xl: '80em',
-    '2xl': '96em',
-  } as MantineBreakpointsValues,
   colors: {
     ...convertColor(twDefaultColors),
     dark: [
@@ -66,6 +60,66 @@ const theme = createTheme({
       '#4a044e',
     ],
   },
+  primaryColor: 'slate',
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Cantarell, Ubuntu, Roboto, Noto, Arial, sans-serif',
+  fontFamilyMonospace:
+    'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace',
+  defaultRadius: 'lg',
+
+  headings: {
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Cantarell, Ubuntu, Roboto, Noto, Arial, sans-serif',
+    fontWeight: '700',
+    sizes: {
+      h1: { fontSize: rem(36), lineHeight: '2.5rem' },
+      h2: { fontSize: rem(30), lineHeight: '2.25rem' },
+      h3: { fontSize: rem(24), lineHeight: '2rem' },
+      h4: { fontSize: rem(20), lineHeight: '1.75rem' },
+      h5: { fontSize: rem(18), lineHeight: '1.75rem' },
+      h6: { fontSize: rem(16), lineHeight: '1.5rem' },
+    },
+  },
+
+  lineHeights: {
+    xs: '1.25',
+    sm: '1.375',
+    md: '1.5',
+    lg: '1.625',
+    xl: '2',
+  },
+
+  radius: {
+    xs: rem(2),
+    sm: rem(4),
+    md: rem(6),
+    lg: rem(8),
+    xl: rem(12),
+  },
+
+  breakpoints: {
+    xs: '30em',
+    sm: '40em',
+    md: '48em',
+    lg: '64em',
+    xl: '80em',
+    '2xl': '96em',
+  } as MantineBreakpointsValues,
+
+  shadows: {
+    xs: `0 ${rem(1)} ${rem(2)} 0 rgb(0 0 0 / 0.05)`,
+    // prettier-ignore
+    sm: `0 ${rem(1)} ${rem(3)} 0 rgb(0 0 0 / 0.1), 0 ${rem(1)} ${rem(2)} ${rem(-1)} rgb(0 0 0 / 0.1)`,
+    // prettier-ignore
+    md: `0 ${rem(4)} ${rem(6)} ${rem(-1)} rgb(0 0 0 / 0.1), 0 ${rem(2)} ${rem(4)} ${rem(-2)} rgb(0 0 0 / 0.1)`,
+    // prettier-ignore
+    lg: `0 ${rem(10)} ${rem(15)} ${rem(-3)} rgb(0 0 0 / 0.1), 0 ${rem(4)} ${rem(6)} ${rem(-4)} rgb(0 0 0 / 0.1)`,
+    // prettier-ignore
+    xl: `0 ${rem(20)} ${rem(25)} ${rem(-5)} rgb(0 0 0 / 0.1), 0 ${rem(8)} ${rem(10)} ${rem(-6)} rgb(0 0 0 / 0.1)`,
+    // NOTE: Extend keys rather than breakpoints MUST NOT start with number
+    xl2: `0 ${rem(25)} ${rem(50)} ${rem(-12)} rgb(0 0 0 / 0.25)`,
+    inner: `inset 0 ${rem(2)} ${rem(4)} 0 rgb(0 0 0 / 0.05)`,
+  } as MantineShadowsValues,
 });
 
 const MantineProvider = ({ children }: { children?: React.ReactNode }) => {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0afdfc0..57852c4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,72 +1,5 @@
 @import '@mantine/core/styles.css';
 
-:root {
-  --mantine-line-height: 1.5;
-  /* Ref: https://systemfontstack.com/ */
-  --mantine-font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
-    Segoe UI, Helvetica Neue, Helvetica, Cantarell, Ubuntu, Roboto, Noto, Arial,
-    sans-serif;
-  --mantine-font-family-monospace: Menlo, Consolas, Monaco, Liberation Mono,
-    Lucida Console, monospace;
-  --mantine-font-family-heading: Iowan Old Style, Apple Garamond, Baskerville,
-    Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
-    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --mantine-line-height-xs: 1.25;
-  --mantine-line-height-sm: 1.375;
-  --mantine-line-height-md: 1.5;
-  --mantine-line-height-lg: 1.625;
-  --mantine-line-height-xl: 1.2;
-  --mantine-shadow-xs: 0 calc(0.0625rem * var(--mantine-scale))
-    calc(0.125rem * var(--mantine-scale)) 0 rgba(0, 0, 0, 0.05);
-  --mantine-shadow-sm: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) 0 rgba(0, 0, 0, 0.1),
-    0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.125rem * var(--mantine-scale))
-      calc(-0.0625rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
-  --mantine-shadow-md: 0 calc(0.25rem * var(--mantine-scale))
-      calc(0.375rem * var(--mantine-scale))
-      calc(-0.0625rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1),
-    0 calc(0.125rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale))
-      calc(-0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
-  --mantine-shadow-lg: 0 calc(0.625rem * var(--mantine-scale))
-      calc(0.9375rem * var(--mantine-scale))
-      calc(-0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1),
-    0 calc(0.25rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale))
-      calc(-0.25rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
-  --mantine-shadow-xl: 0 calc(1.25rem * var(--mantine-scale))
-      calc(1.5625rem * var(--mantine-scale))
-      calc(-0.3125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1),
-    0 calc(0.5rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale))
-      calc(-0.375rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
-  /* NOTE: Theme keys MUST NOT start with number */
-  --mantine-shadow-xl2: 0 calc(1.5625rem * var(--mantine-scale))
-    calc(3.125rem * var(--mantine-scale)) calc(-0.75rem * var(--mantine-scale))
-    rgba(0, 0, 0, 0.25);
-  --mantine-radius-xs: calc(0.125rem * var(--mantine-scale));
-  --mantine-radius-sm: calc(0.25rem * var(--mantine-scale));
-  --mantine-radius-md: calc(0.375rem * var(--mantine-scale));
-  --mantine-radius-lg: calc(0.5rem * var(--mantine-scale));
-  --mantine-radius-xl: calc(0.75rem * var(--mantine-scale));
-  --mantine-h1-font-size: calc(2.25rem * var(--mantine-scale));
-  --mantine-h1-line-height: 2.5rem;
-  --mantine-h1-font-weight: 700;
-  --mantine-h2-font-size: calc(1.875rem * var(--mantine-scale));
-  --mantine-h2-line-height: 2.25rem;
-  --mantine-h2-font-weight: 700;
-  --mantine-h3-font-size: calc(1.5rem * var(--mantine-scale));
-  --mantine-h3-line-height: 2rem;
-  --mantine-h3-font-weight: 700;
-  --mantine-h4-font-size: calc(1.25rem * var(--mantine-scale));
-  --mantine-h4-line-height: 1.75rem;
-  --mantine-h4-font-weight: 700;
-  --mantine-h5-font-size: calc(1.125rem * var(--mantine-scale));
-  --mantine-h5-line-height: 1.75rem;
-  --mantine-h5-font-weight: 700;
-  --mantine-h6-font-size: calc(1rem * var(--mantine-scale));
-  --mantine-h6-line-height: 1.5rem;
-  --mantine-h6-font-weight: 700;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;