diff --git a/website/src/components/guides/axes/AxesLegend.tsx b/website/src/components/guides/axes/AxesLegend.tsx
index efcc104766..b68d75d8ed 100644
--- a/website/src/components/guides/axes/AxesLegend.tsx
+++ b/website/src/components/guides/axes/AxesLegend.tsx
@@ -11,7 +11,7 @@ import { useAxisTheme } from './theme'
 
 const axisPositions = ['start', 'middle', 'end'] as const
 
-const AxesLegend = () => {
+export const AxesLegend = () => {
     const theme = useAxisTheme()
 
     return (
@@ -76,5 +76,3 @@ const AxesLegend = () => {
         </>
     )
 }
-
-export default AxesLegend
diff --git a/website/src/components/guides/axes/AxesPosition.tsx b/website/src/components/guides/axes/AxesPosition.tsx
index 7db8106610..18f43d9ddc 100644
--- a/website/src/components/guides/axes/AxesPosition.tsx
+++ b/website/src/components/guides/axes/AxesPosition.tsx
@@ -9,7 +9,7 @@ import { linearXScale, linearYScale } from './scales'
 import { FullWidthBanner, DescriptionBlock } from '../../styled'
 import { useAxisTheme } from './theme'
 
-const AxesPosition = () => {
+export const AxesPosition = () => {
     const theme = useAxisTheme()
 
     return (
@@ -62,5 +62,3 @@ const AxesPosition = () => {
         </>
     )
 }
-
-export default AxesPosition
diff --git a/website/src/components/guides/axes/AxesTicks.tsx b/website/src/components/guides/axes/AxesTicks.tsx
index 6ca9f4099c..0a3d21f4c0 100644
--- a/website/src/components/guides/axes/AxesTicks.tsx
+++ b/website/src/components/guides/axes/AxesTicks.tsx
@@ -9,7 +9,7 @@ import { linearXScale, pointXScale, timeXScale, timeXScaleHours } from './scales
 import { FullWidthBanner, DescriptionBlock } from '../../styled'
 import { useAxisTheme } from './theme'
 
-const AxesTicks = () => {
+export const AxesTicks = () => {
     const theme = useAxisTheme()
 
     return (
@@ -153,5 +153,3 @@ const AxesTicks = () => {
         </>
     )
 }
-
-export default AxesTicks
diff --git a/website/src/components/guides/axes/index.ts b/website/src/components/guides/axes/index.ts
new file mode 100644
index 0000000000..79200acef6
--- /dev/null
+++ b/website/src/components/guides/axes/index.ts
@@ -0,0 +1,3 @@
+export * from './AxesLegend'
+export * from './AxesPosition'
+export * from './AxesTicks'
diff --git a/website/src/components/guides/legends/LegendDirection.js b/website/src/components/guides/legends/LegendDirection.tsx
similarity index 96%
rename from website/src/components/guides/legends/LegendDirection.js
rename to website/src/components/guides/legends/LegendDirection.tsx
index 771f9133f2..3dd1956130 100644
--- a/website/src/components/guides/legends/LegendDirection.js
+++ b/website/src/components/guides/legends/LegendDirection.tsx
@@ -9,7 +9,7 @@ const legendProps = {
     itemHeight: 24,
 }
 
-const LegendDirection = () => {
+export const LegendDirection = () => {
     const theme = useTheme()
 
     return (
@@ -47,5 +47,3 @@ const LegendDirection = () => {
         </div>
     )
 }
-
-export default LegendDirection
diff --git a/website/src/components/guides/legends/LegendItemDirection.js b/website/src/components/guides/legends/LegendItemDirection.tsx
similarity index 97%
rename from website/src/components/guides/legends/LegendItemDirection.js
rename to website/src/components/guides/legends/LegendItemDirection.tsx
index 987655b723..fe9ad0bdcf 100644
--- a/website/src/components/guides/legends/LegendItemDirection.js
+++ b/website/src/components/guides/legends/LegendItemDirection.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { LegendSvgItem } from '@nivo/legends'
 import { useTheme } from '../../../theming/context'
 
-const itemDirections = ['left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top']
+const itemDirections = ['left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top'] as const
 
-const LegendItemDirection = () => {
+export const LegendItemDirection = () => {
     const theme = useTheme()
 
     const itemsProps = {
@@ -96,5 +96,3 @@ const LegendItemDirection = () => {
         </div>
     )
 }
-
-export default LegendItemDirection
diff --git a/website/src/components/guides/legends/LegendPosition.js b/website/src/components/guides/legends/LegendPosition.tsx
similarity index 98%
rename from website/src/components/guides/legends/LegendPosition.js
rename to website/src/components/guides/legends/LegendPosition.tsx
index 098509ef8d..0ca946f257 100644
--- a/website/src/components/guides/legends/LegendPosition.js
+++ b/website/src/components/guides/legends/LegendPosition.tsx
@@ -13,7 +13,7 @@ const anchors = [
     'bottom-left',
     'left',
     'center',
-]
+] as const
 
 const translateExamples = [
     {
@@ -48,7 +48,7 @@ const legendProps = {
     direction: 'column',
 }
 
-const LegendPosition = () => {
+export const LegendPosition = () => {
     const theme = useTheme()
 
     return (
@@ -177,5 +177,3 @@ const LegendPosition = () => {
         </div>
     )
 }
-
-export default LegendPosition
diff --git a/website/src/components/guides/legends/SymbolShape.js b/website/src/components/guides/legends/SymbolShape.tsx
similarity index 95%
rename from website/src/components/guides/legends/SymbolShape.js
rename to website/src/components/guides/legends/SymbolShape.tsx
index 2389c9aabd..4646a3b57e 100644
--- a/website/src/components/guides/legends/SymbolShape.js
+++ b/website/src/components/guides/legends/SymbolShape.tsx
@@ -3,7 +3,7 @@ import { LegendSvgItem } from '@nivo/legends'
 import { Highlight } from '../../Highlight'
 import { useTheme } from '../../../theming/context'
 
-const shapes = ['square', 'circle', 'triangle', 'diamond']
+const shapes = ['square', 'circle', 'triangle', 'diamond'] as const
 
 const code = `
 const CustomSymbolShape = ({
@@ -23,7 +23,7 @@ const CustomSymbolShape = ({
 )
 `.trim()
 
-const SymbolShape = () => {
+export const SymbolShape = () => {
     const theme = useTheme()
 
     const itemsProps = {
@@ -82,5 +82,3 @@ const SymbolShape = () => {
         </div>
     )
 }
-
-export default SymbolShape
diff --git a/website/src/components/guides/legends/index.ts b/website/src/components/guides/legends/index.ts
new file mode 100644
index 0000000000..7f961a1f55
--- /dev/null
+++ b/website/src/components/guides/legends/index.ts
@@ -0,0 +1,4 @@
+export * from './LegendDirection'
+export * from './LegendItemDirection'
+export * from './LegendPosition'
+export * from './SymbolShape'
diff --git a/website/src/pages/guides/axes.tsx b/website/src/pages/guides/axes.tsx
index d6149d7b4a..2f376a9318 100644
--- a/website/src/pages/guides/axes.tsx
+++ b/website/src/pages/guides/axes.tsx
@@ -3,15 +3,13 @@ import { Link } from 'gatsby'
 import Layout from '../../components/Layout'
 import { Seo } from '../../components/Seo'
 import PageContent from '../../components/PageContent'
-import AxesPosition from '../../components/guides/axes/AxesPosition'
-import AxesTicks from '../../components/guides/axes/AxesTicks'
-import AxesLegend from '../../components/guides/axes/AxesLegend'
+import { AxesPosition, AxesTicks, AxesLegend } from '../../components/guides/axes'
 import { DescriptionBlock } from '../../components/styled'
 
 const AxesGuide = () => {
     return (
         <Layout>
-            <Seo title="Axes Guide" />
+            <Seo title="Axes Guide" description="Using chart axes in nivo components." />
             <PageContent>
                 <div className="guide__header">
                     <h1>Axes</h1>
diff --git a/website/src/pages/guides/legends.tsx b/website/src/pages/guides/legends.tsx
index 560d71d958..94ba606f96 100644
--- a/website/src/pages/guides/legends.tsx
+++ b/website/src/pages/guides/legends.tsx
@@ -1,13 +1,16 @@
 import React from 'react'
+// @ts-ignore
 import { themeContext } from '@nivo/core'
 import { useTheme } from '../../theming/context'
 import Layout from '../../components/Layout'
 import { Seo } from '../../components/Seo'
 import PageContent from '../../components/PageContent'
-import LegendPosition from '../../components/guides/legends/LegendPosition'
-import LegendDirection from '../../components/guides/legends/LegendDirection'
-import LegendItemDirection from '../../components/guides/legends/LegendItemDirection'
-import SymbolShape from '../../components/guides/legends/SymbolShape'
+import {
+    LegendPosition,
+    LegendDirection,
+    LegendItemDirection,
+    SymbolShape,
+} from '../../components/guides/legends'
 import { DescriptionBlock } from '../../components/styled'
 
 const Legends = () => {
@@ -16,7 +19,7 @@ const Legends = () => {
     return (
         <Layout>
             <themeContext.Provider value={theme.nivo}>
-                <Seo title="Legends Guide" />
+                <Seo title="Legends Guide" description="How to add legends to your nivo charts?" />
                 <PageContent>
                     <div className="guide__header">
                         <h1>Legends</h1>