diff --git a/docs/src/components/DocumentationPage/DocumentationPage.js b/docs/src/components/DocumentationPage/DocumentationPage.js
index 370c0c091e..ce35b7bd95 100644
--- a/docs/src/components/DocumentationPage/DocumentationPage.js
+++ b/docs/src/components/DocumentationPage/DocumentationPage.js
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { withRouteData, withSiteData } from 'react-static'
-import { Container, Divider } from 'semantic-ui-react'
+import { Container, Divider, Header } from 'semantic-ui-react'
 
 import DocsLayout from 'docs/src/components/DocsLayout'
 import * as components from './components'
+import DocumentationPageFooter from './DocumentationPageFooter'
 
 const DocumentationPage = ({ pageName, ...rest }) => {
   const { default: MarkdownComponent, meta } = require(`docs/src/pages/${pageName}`)
@@ -13,7 +14,9 @@ const DocumentationPage = ({ pageName, ...rest }) => {
     <DocsLayout additionalTitle={meta.title}>
       <Container text>
         <Divider hidden />
+        <Header as='h1' content={meta.title} textAlign='center' />
         <MarkdownComponent {...rest} components={components} />
+        <DocumentationPageFooter prevPage={meta.prevPage} nextPage={meta.nextPage} />
         <Divider hidden section />
       </Container>
     </DocsLayout>
diff --git a/docs/src/components/DocumentationPage/DocumentationPageFooter.js b/docs/src/components/DocumentationPage/DocumentationPageFooter.js
new file mode 100644
index 0000000000..1305c96b5e
--- /dev/null
+++ b/docs/src/components/DocumentationPage/DocumentationPageFooter.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React, { Fragment } from 'react'
+import { Link } from 'react-static'
+import { Divider, Grid, Header } from 'semantic-ui-react'
+
+const DocumentationPageFooter = ({ nextPage, prevPage }) =>
+  nextPage || prevPage ? (
+    <Fragment>
+      <Divider />
+
+      <Grid columns={2}>
+        <Grid.Column>
+          {prevPage && (
+            <Header
+              as={Link}
+              content={prevPage.title}
+              subheader='Previous page'
+              to={prevPage.href}
+            />
+          )}
+        </Grid.Column>
+        <Grid.Column textAlign='right'>
+          {nextPage && (
+            <Header as={Link} content={nextPage.title} subheader='Next page' to={nextPage.href} />
+          )}
+        </Grid.Column>
+      </Grid>
+    </Fragment>
+  ) : null
+
+DocumentationPageFooter.propTypes = {
+  nextPage: PropTypes.shape({ title: PropTypes.string, href: PropTypes.string }),
+  prevPage: PropTypes.shape({ title: PropTypes.string, href: PropTypes.string }),
+}
+
+export default DocumentationPageFooter
diff --git a/docs/src/pages/Augmentation.mdx b/docs/src/pages/Augmentation.mdx
index eaf9d88f96..3dae225869 100644
--- a/docs/src/pages/Augmentation.mdx
+++ b/docs/src/pages/Augmentation.mdx
@@ -1,11 +1,11 @@
-import { Header, Message } from 'semantic-ui-react'
+import { Message } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Augmentation',
+  prevPage: { title: 'Get Started', href: '/usage' },
+  nextPage: { title: 'Shorthand Props', href: '/shorthand-props' },
 }
 
-<Header as='h1' content='Augmentation' textAlign='center' />
-
 React components are inherently composable. Semantic UI React makes them even more so with the `as` prop feature: you can control the rendered HTML tag, or render one component as another component.
 
 ```jsx
@@ -25,7 +25,6 @@ Augmentation is powerful. You can compose component features and props without a
 
 ```jsx
 import { Link } from 'react-router-dom'
-
 ;<Menu>
   // 💡 `to` does not belong to `Menu.Item` props and will be passed to `Link`
   <Menu.Item as={Link} to='/home'>
diff --git a/docs/src/pages/Layouts.mdx b/docs/src/pages/Layouts.mdx
index 6d9a2d09da..e37317e70c 100644
--- a/docs/src/pages/Layouts.mdx
+++ b/docs/src/pages/Layouts.mdx
@@ -3,10 +3,10 @@ import { Card, Header } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Layout examples',
+  prevPage: { title: 'Theming', href: '/theming' },
+  nextPage: { title: 'Prototypes', href: '/prototypes' },
 }
 
-<Header as='h1' content='Layout examples' textAlign='center' />
-
 <Header as='h2' content='Starter' subheader='Examples to introduce components and their function' />
 
 <Card.Group stackable itemsPerRow='2'>
diff --git a/docs/src/pages/Prototypes.mdx b/docs/src/pages/Prototypes.mdx
index 440c569235..8c9f610a20 100644
--- a/docs/src/pages/Prototypes.mdx
+++ b/docs/src/pages/Prototypes.mdx
@@ -2,10 +2,9 @@ import { Button, Card, Header, Image } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Prototypes',
+  prevPage: { title: 'Layout examples', href: '/layouts' },
 }
 
-<Header as='h1' content='Prototypes' textAlign='center' />
-
 <Header as='h2' content='Integrations' subheader='Examples of integrations with other libraries' />
 
 <Card.Group stackable itemsPerRow='2'>
diff --git a/docs/src/pages/ShorthandProps.mdx b/docs/src/pages/ShorthandProps.mdx
index ba29ca7a11..1c9b347141 100644
--- a/docs/src/pages/ShorthandProps.mdx
+++ b/docs/src/pages/ShorthandProps.mdx
@@ -1,11 +1,11 @@
-import { Header, Icon, Message } from 'semantic-ui-react'
+import { Icon, Message } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Shorthand Props',
+  prevPage: { title: 'Augmentation', href: '/augmentation' },
+  nextPage: { title: 'Theming', href: '/theming' },
 }
 
-<Header as='h1' content='Shorthand Props' textAlign='center' />
-
 It is quite common for Semantic UI React component to have "shorthands" which accept shorthand values. For example, `Button` component has an `icon` shorthand which value defines the icon that will be rendered.
 
 ```jsx
diff --git a/docs/src/pages/Theming.mdx b/docs/src/pages/Theming.mdx
index b8b133dcd1..0e42051502 100644
--- a/docs/src/pages/Theming.mdx
+++ b/docs/src/pages/Theming.mdx
@@ -1,17 +1,17 @@
-import { Button, Header, Message } from 'semantic-ui-react'
+import { Button, Message } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Theming',
+  prevPage: { title: 'Shorthand Props', href: '/shorthand-props' },
+  nextPage: { title: 'Layout examples', href: '/layouts' },
 }
 
-<Header as='h1' content='Theming' textAlign='center' />
-
 ## Preface
 
 Semantic UI React does not have own styling system and fully relies on the theming of
 Semantic UI. It's really powerful, you don't need to know LESS or CSS you can simply
 update values of variables or use styles from predefined themes.
-  
+
 In fact, all you know about theming and styling of Semantic UI is fully applicable to Semantic UI React.
 
 <Button
@@ -32,7 +32,7 @@ In fact, all you know about theming and styling of Semantic UI is fully applicab
 ## Quick start
 
 Semantic UI offers its own build system that uses Gulp and produces prepared CSS files.
-  
+
 In all cases we recommend to use the LESS package and tune it into your build system with Webpack. The LESS package also does not depend on Gulp and other cruft things.
 However, this package is not friendly for Webpack and requires additional configuration.
 
diff --git a/docs/src/pages/Usage.mdx b/docs/src/pages/Usage.mdx
index 8bbd87f55c..bf8a4b9e18 100644
--- a/docs/src/pages/Usage.mdx
+++ b/docs/src/pages/Usage.mdx
@@ -6,10 +6,9 @@ import { semanticUIDocsURL, semanticUIRepoURL, semanticUICSSRepoURL } from 'docs
 
 export const meta = {
   title: 'Get Started',
+  nextPage: { title: 'Augmentation', href: '/augmentation' },
 }
 
-# Get Started
-
 ## Install
 
 Semantic UI React provides React components while Semantic UI provides themes as CSS stylesheets.
diff --git a/static.webpack.js b/static.webpack.js
index 5483746510..462efa8cb5 100644
--- a/static.webpack.js
+++ b/static.webpack.js
@@ -9,22 +9,22 @@ export default (webpackConfig, { stage }) => ({
   entry:
     stage === 'prod'
       ? {
-        main: [config.paths.docsSrc('index.js'), config.paths.src('index.js')],
-      }
+          main: [config.paths.docsSrc('index.js'), config.paths.src('index.js')],
+        }
       : webpackConfig.entry,
   externals:
     stage === 'node'
       ? webpackConfig.externals
       : {
-        'anchor-js': 'AnchorJS',
-        '@babel/standalone': 'Babel',
-        faker: 'faker',
-        'prettier/standalone': 'prettier',
-        'prop-types': 'PropTypes',
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        'react-dom/server': 'ReactDOMServer',
-      },
+          'anchor-js': 'AnchorJS',
+          '@babel/standalone': 'Babel',
+          faker: 'faker',
+          'prettier/standalone': 'prettier',
+          'prop-types': 'PropTypes',
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react-dom/server': 'ReactDOMServer',
+        },
   module: {
     ...webpackConfig.module,
     rules: [