diff --git a/packages/eds-core-react/src/components/Dialog/DialogHeader.tsx b/packages/eds-core-react/src/components/Dialog/DialogHeader.tsx
index 07a3e4853f..1dcbade27d 100644
--- a/packages/eds-core-react/src/components/Dialog/DialogHeader.tsx
+++ b/packages/eds-core-react/src/components/Dialog/DialogHeader.tsx
@@ -8,7 +8,7 @@ const StyledDialogHeader = styled.div(({ theme }) => {
   return css`
     display: flex;
     justify-content: space-betweene;
-    algin-items: center;
+    align-items: center;
     padding: ${theme.entities.children.spacings.top}
       ${theme.entities.children.spacings.right} 0
       ${theme.entities.children.spacings.left};
diff --git a/packages/eds-core-react/src/components/Typography/Typography.docs.mdx b/packages/eds-core-react/src/components/Typography/Typography.docs.mdx
index e6aae4100b..4dd21a74e9 100644
--- a/packages/eds-core-react/src/components/Typography/Typography.docs.mdx
+++ b/packages/eds-core-react/src/components/Typography/Typography.docs.mdx
@@ -1,4 +1,4 @@
-import { Links, PropsTable, Story } from './../../../.storybook/components'
+import { Links, PropsTable, Story, Stack, TypographyGroups } from './../../../.storybook/components'
 import { Typography } from '.'
 
 # Typography
@@ -39,12 +39,22 @@ Please do not use <code>light</code> in digital interfaces except in special cas
   <li>To ensure readability, line length should be 55-80 characters.</li>
 </ul>
 
+
 ```tsx
 import { Typography } from '@equinor/eds-core-react'
 
 <Typography>Sample text</Typography>
 ```
 
+## Overview
+
+Typography groups with included varints:  
+
+Example: `<Typography group="input" variant="label"></Typography>`. <br />
+Variants under `heading` and `paragraph` don’t require the group parameter.
+
+<Story id="typography-typography--groups-overview" />
+
 ## Examples
 
 ### Colors
diff --git a/packages/eds-core-react/src/components/Typography/Typography.stories.tsx b/packages/eds-core-react/src/components/Typography/Typography.stories.tsx
index 3a930de9f2..f0dfa5f485 100644
--- a/packages/eds-core-react/src/components/Typography/Typography.stories.tsx
+++ b/packages/eds-core-react/src/components/Typography/Typography.stories.tsx
@@ -1,17 +1,23 @@
-import { Typography, TypographyProps, List } from '../..'
+import { Card, Divider, Typography, TypographyProps } from '../..'
 import styled from 'styled-components'
 import { Story, ComponentMeta } from '@storybook/react'
 import { Stack } from './../../../.storybook/components'
 import page from './Typography.docs.mdx'
+import { tokens, Typography as TypographyType } from '@equinor/eds-tokens'
 
-const Wrapper = styled.div`
-  margin: 32px;
-`
+const {
+  colors: {
+    infographic: {
+      primary__moss_green_100: { rgba: mossgreen100 },
+    },
+  },
+  typography,
+} = tokens
 
-const Grid = styled(Wrapper)`
-  display: grid;
-  grid-gap: 32px;
-  justify-items: start;
+const SBCard = styled(Card)`
+  border: 1px solid ${mossgreen100};
+  max-width: 290px;
+  display: table-cell;
 `
 
 export default {
@@ -36,207 +42,38 @@ export default {
   ],
 } as ComponentMeta<typeof Typography>
 
-export const Introduction: Story<TypographyProps> = (args) => {
-  return <Typography {...args}>Sample text</Typography>
+export const GroupsOverview = () => {
+  return Object.entries(typography).map(([key, group]) => (
+    <SBCard key={key}>
+      <Card.Header>
+        <Card.HeaderTitle>
+          <Typography variant="h5">{key}</Typography>
+        </Card.HeaderTitle>
+      </Card.Header>
+      <Divider />
+      {Object.entries(group).map(([key, token]) => (
+        <Card.Content key={key}>
+          <Typography token={token as TypographyType}>{key}</Typography>
+        </Card.Content>
+      ))}
+    </SBCard>
+  ))
 }
-
-export const Headings: Story<TypographyProps> = () => (
-  <Grid>
-    <Typography variant="h1" bold>
-      Heading 1 bold
-    </Typography>
-    <Typography variant="h1">Heading 1</Typography>
-    <Typography variant="h2">Heading 2</Typography>
-    <Typography variant="h3">Heading 3</Typography>
-    <Typography variant="h4">Heading 4</Typography>
-    <Typography variant="h5">Heading 5</Typography>
-    <Typography variant="h6">Heading 6</Typography>
-  </Grid>
-)
-
-export const Paragraphs = (): JSX.Element => (
-  <Grid>
-    <Typography variant="body_short" link href="#">
-      Body short link
-    </Typography>
-    <Typography variant="body_short">Body short</Typography>
-    <Typography variant="body_short" italic>
-      Body short italic
-    </Typography>
-    <Typography variant="body_short" bold>
-      Body short bold
-    </Typography>
-    <Typography variant="body_short" bold italic>
-      Body short bold italic
-    </Typography>
-    <Typography variant="body_long" link href="#">
-      Body long link
-    </Typography>
-    <Typography variant="body_long">Body long</Typography>
-    <Typography variant="body_long" italic>
-      Body long italic
-    </Typography>
-    <Typography variant="body_long" bold>
-      Body long bold
-    </Typography>
-
-    <Typography variant="body_long" bold italic>
-      Body long bold italic
-    </Typography>
-    <Typography variant="overline">Overline</Typography>
-    <Typography variant="ingress">Ingress</Typography>
-    <Typography variant="caption">Caption</Typography>
-    <Typography variant="meta">Meta</Typography>
-  </Grid>
-)
-
-export const GroupsOverview = (): JSX.Element => (
-  <List>
-    <List.Item>
-      input
-      <List>
-        <List.Item>
-          <Typography group="input" variant="label">
-            label
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="input" variant="text">
-            text
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="input" variant="text_monospaced">
-            text_monospaced
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="input" variant="helper">
-            helper
-          </Typography>
-        </List.Item>
-      </List>
-    </List.Item>
-    <List.Item>
-      navigation
-      <List>
-        <List.Item>
-          <Typography group="navigation" variant="menu_title">
-            menu_title
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="navigation" variant="menu_title_hover">
-            menu_title_hover
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="navigation" variant="menu_tabs">
-            menu_tabs
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="navigation" variant="label">
-            label
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="navigation" variant="drawer_active">
-            drawer_active
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="navigation" variant="drawer_inactive">
-            drawer_inactive
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="navigation" variant="button">
-            button
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="navigation" variant="breadcrumb">
-            breadcrumb
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="navigation" variant="breadcrumb_hover">
-            breadcrumb_hover
-          </Typography>
-        </List.Item>
-      </List>
-    </List.Item>
-    <List.Item>
-      table
-      <List>
-        <List.Item>
-          <Typography group="table" variant="cell_header">
-            cell_header
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="table" variant="cell_text">
-            cell_text
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="table" variant="cell_text_bold">
-            cell_text_bold
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="table" variant="cell_text_link">
-            cell_text_link
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="table" variant="cell_numeric_monospaced">
-            cell_numeric_monospaced
-          </Typography>
-        </List.Item>
-      </List>
-    </List.Item>
-    <List.Item>
-      ui
-      <List>
-        <List.Item>
-          <Typography group="ui" variant="tooltip">
-            tooltip
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="ui" variant="snackbar">
-            snackbar
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="ui" variant="accordion_header">
-            accordion_header
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="ui" variant="chip__badge">
-            chip__badge
-          </Typography>
-        </List.Item>
-        <List.Item>
-          <Typography group="ui" variant="chart">
-            chart
-          </Typography>
-        </List.Item>
-      </List>
-    </List.Item>
-  </List>
-)
-GroupsOverview.parameters = {
-  docs: {
-    storyDescription:
-      'Variants ordered by their required group parameter. Example `<Typography group="input" variant="label"></Typography>`. Variants under `heading` and `paragraph` don’t require the group parameter and are therefore not included here.',
+GroupsOverview.decorators = [
+  (Story) => {
+    return (
+      <Stack align="start" style={{ justifyContent: 'flex-start' }}>
+        <Story />
+      </Stack>
+    )
   },
+]
+
+export const Introduction: Story<TypographyProps> = (args) => {
+  return <Typography {...args}>Sample text</Typography>
 }
 
-export const Colors = (): JSX.Element => (
+export const Colors: Story<TypographyProps> = () => (
   <>
     <Typography color="primary"> Primary</Typography>
     <Typography color="secondary">Secondary</Typography>
@@ -249,7 +86,7 @@ export const Colors = (): JSX.Element => (
   </>
 )
 
-export const Custom = (): JSX.Element => (
+export const Custom: Story<TypographyProps> = () => (
   <>
     <div>
       <Typography group="navigation" variant="label">
@@ -300,7 +137,7 @@ export const Custom = (): JSX.Element => (
   </>
 )
 
-export const Lines = (): JSX.Element => (
+export const Lines: Story<TypographyProps> = () => (
   <>
     <Typography variant="body_long" lines={2}>
       Cupcake ipsum dolor sit amet caramels powder. Chocolate powder donut