diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76f99e9a22..4fec99b9a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,7 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 - Use regular components instead of `Label` in `RadioGroupItem` @layershifter ([#1070](https://github.com/stardust-ui/react/pull/1070))
 - Remove `Flex.Gap` component, and convert the `gap` styles to `margins` on the child elements of the `Flex` component @mnajdova ([#1074](https://github.com/stardust-ui/react/pull/1074))
-- Dropdown: control highlightedIndex from Dropdown @silviuavram ([#966](https://github.com/stardust-ui/react/pull/966))
+- `Dropdown`: control highlightedIndex from `Dropdown` @silviuavram ([#966](https://github.com/stardust-ui/react/pull/966))
 
 ### Fixes
 - Add aria posinset and setsize, hide menu indicator from narration @jurokapsiar ([#1066](https://github.com/stardust-ui/react/pull/1066))
@@ -36,6 +36,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `placeholderColor` variable for `Input` component in Teams theme @layershifter ([#1092](https://github.com/stardust-ui/react/pull/1092))
 - Add and export files icons in Teams theme @codepretty ([#1094](https://github.com/stardust-ui/react/pull/1094))
 
+### Documentation
+- Add layout guide @kuzhelov ([#1091](https://github.com/stardust-ui/react/pull/1091))
+
 <!--------------------------------[ v0.23.1 ]------------------------------- -->
 ## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.23.0...v0.23.1)
diff --git a/docs/src/components/GuidesNavigationFooter.tsx b/docs/src/components/GuidesNavigationFooter.tsx
new file mode 100644
index 0000000000..7892ef23ae
--- /dev/null
+++ b/docs/src/components/GuidesNavigationFooter.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Link } from 'react-router-dom'
+import { Button, Flex, Divider } from '@stardust-ui/react'
+
+type PageDescriptor = {
+  name: string
+  url: string
+}
+
+type GuidesNavigationFooterProps = {
+  previous?: PageDescriptor
+  next?: PageDescriptor
+}
+
+const GuidesNavigationFooter: React.FC<GuidesNavigationFooterProps> = ({ previous, next }) => (
+  <>
+    <br />
+    <Divider size={1} />
+    <br />
+    <Flex gap="gap.small">
+      {previous && (
+        <Button
+          as={Link}
+          content={previous.name}
+          icon="arrow left"
+          iconPosition="before"
+          primary
+          to={previous.url}
+        />
+      )}
+      {next && (
+        <Button
+          as={Link}
+          content={next.name}
+          icon="arrow right"
+          iconPosition="after"
+          primary
+          to={next.url}
+        />
+      )}
+    </Flex>
+  </>
+)
+
+export default GuidesNavigationFooter
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index 1e77ee80c2..5ca2a476e1 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -316,6 +316,13 @@ class Sidebar extends React.Component<any, any> {
         to: '/theming-examples',
         styles: menuItemStyles,
       },
+      {
+        key: 'layout',
+        content: 'Layout',
+        as: NavLink,
+        to: '/layout',
+        styles: menuItemStyles,
+      },
       {
         key: 'integrate-custom',
         content: 'Integrate Custom Components',
diff --git a/docs/src/examples/components/Box/index.tsx b/docs/src/examples/components/Box/index.tsx
index 616148e204..f06def363d 100644
--- a/docs/src/examples/components/Box/index.tsx
+++ b/docs/src/examples/components/Box/index.tsx
@@ -1,6 +1,6 @@
-import { Alert } from '@stardust-ui/react'
 import * as React from 'react'
 import { Link } from 'react-router-dom'
+import { Alert } from '@stardust-ui/react'
 
 import Types from './Types'
 
@@ -10,18 +10,26 @@ const HeaderExamples = () => (
       <p>
         <code>Box</code> component should be used carefully, in almost all cases you don't need it.
       </p>
+      <ul>
+        <li>
+          For layouts and positioning refer to <Link to="/components/flex">Flex</Link> and{' '}
+          <Link to="/components/grid">Grid</Link> components (and general{' '}
+          <Link to="/layout">Layout guide</Link>).
+        </li>
+        <li>
+          Consider to use <Link to="/components/text">Text</Link> component to wrap text.
+        </li>
+        <li>In other cases consider to style existing components via theming features.</li>
+        <li>
+          You also can{' '}
+          <Link to="/integrate-custom-components">create your own custom component</Link> for custom
+          behaviors.
+        </li>
+      </ul>
       <p>
-        For layouts and positioning please prefer <Link to="/components/flex">Flex</Link> and{' '}
-        <Link to="/components/grid">Grid</Link> components, we also have{' '}
-        <Link to="/components/text">Text</Link> component to wrap text. In other cases please try to
-        use existing components and apply styles via theming features. You also can{' '}
-        <Link to="/integrate-custom-components">create your own custom component</Link> for custom
-        behaviors.
-      </p>
-      <p>
-        Remember that <code>styles</code> that applied directly to any component are not friendly
-        for theme switching, prefer to use <code>variables</code> instead of <code>styles</code> for
-        overrides.
+        Remember that <code>styles</code> prop applied directly to an element most probably will
+        break theme switching scenarios - thus, prefer to use <code>variables</code> instead of{' '}
+        <code>styles</code> for overrides.
       </p>
     </Alert>
 
diff --git a/docs/src/examples/components/Flex/index.tsx b/docs/src/examples/components/Flex/index.tsx
index 71570ae462..4478667e77 100644
--- a/docs/src/examples/components/Flex/index.tsx
+++ b/docs/src/examples/components/Flex/index.tsx
@@ -1,10 +1,19 @@
 import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+import { Link } from 'react-router-dom'
 
 import Rtl from './Rtl'
 import Types from './Types'
 
 const FlexExamples = () => (
   <>
+    <Alert styles={{ display: 'block' }}>
+      <p>
+        Get more information on Stardust's approach to layout from{' '}
+        <Link to="/layout">Layout guide</Link>.
+      </p>
+    </Alert>
+
     <Types />
     <Rtl />
   </>
diff --git a/docs/src/examples/components/Grid/index.tsx b/docs/src/examples/components/Grid/index.tsx
index 19ffbeb5e4..ffb33f0460 100644
--- a/docs/src/examples/components/Grid/index.tsx
+++ b/docs/src/examples/components/Grid/index.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+import { Link } from 'react-router-dom'
 
 import Rtl from './Rtl'
 import Types from './Types'
@@ -6,6 +8,13 @@ import Variations from './Variations'
 
 const GridExamples = () => (
   <>
+    <Alert styles={{ display: 'block' }}>
+      <p>
+        Get more information on Stardust's approach to layout from{' '}
+        <Link to="/layout">Layout guide</Link>.
+      </p>
+    </Alert>
+
     <Types />
     <Variations />
     <Rtl />
diff --git a/docs/src/examples/components/Segment/index.tsx b/docs/src/examples/components/Segment/index.tsx
index 96171f8e58..8d0acfd5df 100644
--- a/docs/src/examples/components/Segment/index.tsx
+++ b/docs/src/examples/components/Segment/index.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+import { Link } from 'react-router-dom'
 
 import Rtl from './Rtl'
 import Types from './Types'
@@ -6,6 +8,15 @@ import Variations from './Variations'
 
 const SegmentExamples = () => (
   <>
+    <Alert styles={{ display: 'block' }} warning>
+      <p>
+        <code>Segment</code> component shouldn't be used to handle layout aspects. To address
+        layouts and positioning aspects refer to <Link to="/components/flex">Flex</Link> and{' '}
+        <Link to="/components/grid">Grid</Link> components (and general{' '}
+        <Link to="/layout">Layout guide</Link>).
+      </p>
+    </Alert>
+
     <Types />
     <Variations />
     <Rtl />
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index e13673459a..aef4b6565a 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -13,6 +13,7 @@ import PageNotFound from './views/PageNotFound'
 import QuickStart from './views/QuickStart'
 import Theming from './views/Theming'
 import ThemingExamples from './views/ThemingExamples'
+import LayoutGuide from './views/Layout'
 import IntegrateCustomComponents from './views/IntegrateCustomComponents'
 
 const Router = () => (
@@ -95,6 +96,7 @@ const Router = () => (
         <DocsLayout exact path="/accessibility" component={Accessibility} />
         <DocsLayout exact path="/theming" component={Theming} />
         <DocsLayout exact path="/theming-examples" component={ThemingExamples} />
+        <DocsLayout exact path="/layout" component={LayoutGuide} />
         <DocsLayout exact path="/shorthand-props" component={ShorthandProps} />
         <DocsLayout
           exact
diff --git a/docs/src/views/Accessibility.tsx b/docs/src/views/Accessibility.tsx
index 64c8b6a0e8..300df9f6f5 100644
--- a/docs/src/views/Accessibility.tsx
+++ b/docs/src/views/Accessibility.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { NavLink } from 'react-router-dom'
 import DocPage from '../components/DocPage/DocPage'
 import CodeSnippet from '../components/CodeSnippet'
+import GuidesNavigationFooter from '../components/GuidesNavigationFooter'
 
-import { Header, Divider, Segment, Button } from '@stardust-ui/react'
+import { Header, Segment } from '@stardust-ui/react'
 
 const code = (content: string): React.ReactNode => <code>{content}</code>
 
@@ -522,23 +522,9 @@ export default () => (
       'https://github.com/stardust-ui/accessibility/blob/master/CONTRIBUTING.md',
     )}
 
-    <Divider />
-    <br />
-    <Button
-      as={NavLink}
-      content="Quick Start"
-      icon="arrow left"
-      iconPosition="before"
-      primary
-      to="quick-start"
-    />
-    <Button
-      as={NavLink}
-      content="Theming"
-      icon="arrow right"
-      iconPosition="after"
-      primary
-      to="theming"
+    <GuidesNavigationFooter
+      previous={{ name: 'Quick Start', url: 'quick-start' }}
+      next={{ name: 'Theming', url: 'theming' }}
     />
   </DocPage>
 )
diff --git a/docs/src/views/IntegrateCustomComponents.tsx b/docs/src/views/IntegrateCustomComponents.tsx
index b68e2d549d..654e8a3173 100644
--- a/docs/src/views/IntegrateCustomComponents.tsx
+++ b/docs/src/views/IntegrateCustomComponents.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
 import {
-  Button,
-  Divider,
   Header,
   Provider,
   createComponent,
@@ -13,6 +11,7 @@ import {
 import DocPage from '../components/DocPage/DocPage'
 import ExampleSnippet from '../components/ExampleSnippet/ExampleSnippet'
 import { ReactChildren } from 'src/types'
+import GuidesNavigationFooter from '../components/GuidesNavigationFooter'
 
 interface StyledButtonProps {
   className?: string
@@ -276,16 +275,6 @@ export default () => (
       <NavLink to="accessibility">Accessibility guide</NavLink> section.
     </p>
 
-    <br />
-    <Divider size={1} />
-    <br />
-    <Button
-      as={NavLink}
-      content="Theming Examples"
-      icon="arrow left"
-      iconPosition="before"
-      primary
-      to="/theming-examples"
-    />
+    <GuidesNavigationFooter previous={{ name: 'Layout', url: 'layout' }} />
   </DocPage>
 )
diff --git a/docs/src/views/Layout.tsx b/docs/src/views/Layout.tsx
new file mode 100644
index 0000000000..eb2af336f8
--- /dev/null
+++ b/docs/src/views/Layout.tsx
@@ -0,0 +1,222 @@
+import * as React from 'react'
+import { Button, Box, Flex, Header, Icon, Segment, Divider } from '@stardust-ui/react'
+
+import CodeSnippet from '../components/CodeSnippet'
+import ExampleSnippet from '../components/ExampleSnippet'
+import DocPage from '../components/DocPage'
+import GuidesNavigationFooter from '../components/GuidesNavigationFooter'
+
+const code = value => <code>{value}</code>
+
+const link = (content, href, isExternal = false) => (
+  <a href={href} {...isExternal && { target: 'blank' }}>
+    {content} {isExternal ? <Icon name="external" size="small" link fitted /> : ''}
+  </a>
+)
+
+const links = {
+  flex: link('Flex', '/components/flex'),
+  flexItem: link('Flex.Item', '/components/flex'),
+  grid: link('Grid', '/components/grid'),
+  segment: link('Segment', '/components/segment'),
+  box: link('Box', '/components/segment'),
+}
+
+export default () => (
+  <DocPage title="Layout Components">
+    <Header as="h2">Overview</Header>
+    <p>The following components are introduced by Stardust to handle layout aspects:</p>
+    <ul>
+      <li>{links.flex} - designed for layout in one dimension, either a row or a column.</li>
+      <li>
+        {links.grid} - designed for two-dimensional layout, rows and columns at the same time.
+      </li>
+    </ul>
+    <Header as="h3">Flex vs Grid</Header>
+    <p>
+      Sometimes it might not be evident if some particular case is a case of 1D (i.e. {code('Flex')}
+      ) or 2D (i.e. {code('Grid')}) layout. As a result, quite often {code('Grid')} component is
+      used at places where it is sufficient to use {code('Flex')}.
+    </p>
+    <p>Here is the question you might ask yourself to decide on that:</p>
+    <ul>
+      <li>
+        do I only need to control the layout by row <strong>or</strong> column? – if yes, use{' '}
+        {code('Flex')}.
+      </li>
+      <li>
+        do I need to control the layout by row <strong>and</strong> column? – if yes, use{' '}
+        {code('Grid')}.
+      </li>
+    </ul>
+    <Header as="h3">Note on Segment and Box components</Header>
+    <p>
+      {links.segment} and {links.box} components may be abused for layout purposes, like in the
+      following examples:
+    </p>
+    <Header as="h4">Segment's misuse: handle opaque background cases</Header>
+    <CodeSnippet
+      label="OpaqueBackground.jsx"
+      value={`
+        import { Segment } from '@stardust-ui/react'
+
+        const OpaqueBackground = ({ children, color }) =>
+          <Segment styles={{ backgroundColor: color }} content={{ children }} />
+      `}
+    />
+    <ExampleSnippet
+      render={() => {
+        const OpaqueBackground = ({ children, color }) => (
+          <Segment styles={{ backgroundColor: color }} content={{ children }} />
+        )
+
+        return (
+          <OpaqueBackground color="lightyellow">
+            This is a bad approach to opaque background :(
+          </OpaqueBackground>
+        )
+      }}
+    />
+    <Header as="h4">Box's misuse: handle relative positioning cases</Header>
+    <CodeSnippet
+      label="RelativePositioned.jsx"
+      value={`
+        import { Box } from '@stardust-ui/react'
+
+        const RelativePositioned = ({ children, top, right, bottom, left }) =>
+          <Box styles={{ position: 'relative', top, right, bottom, left }} content={children} />
+      `}
+    />
+    <ExampleSnippet
+      render={() => {
+        const RelativePositioned = ({ children, left }) => (
+          <Box styles={{ position: 'relative', left }} content={children} />
+        )
+
+        return (
+          <RelativePositioned left={'30px'}>
+            This is a bad way to support relative-positioning :(
+          </RelativePositioned>
+        )
+      }}
+    />
+    <p>
+      While it might seem that the intent is addressed with the approach taken, however, this is
+      wrong for the following reason:
+    </p>
+    <blockquote>
+      Stardust makes it very important to{' '}
+      <strong>follow component's semantics at the first place</strong>, and only then consider the
+      visual aspects.
+    </blockquote>
+    <p>If we'd refer to the semantics provided in the description for {links.segment} component:</p>
+    <blockquote>A segment is used to create a grouping of related content.</blockquote>
+    <p>
+      This description suggests that purpose of {code('Segment')} is not a layout. Thus, this
+      component shouldn't be used for layout purposes, as this will break component's semantics -
+      and, as a consequence, it might break accessibility and theming, as those both adhere to
+      component's semantics at the first place.
+    </p>
+    <p>Same conclusions applies to the {links.box} component.</p>
+    <Divider />
+    <Header as="h2">Flex recipies</Header>
+    There are several advices that might help when using {code('Flex')} component.
+    <Header as="h3">{code('Flex.Item')} should be used sparingly</Header>
+    <blockquote>
+      Use {code('Flex.Item')} component to wrap child elements only in case if their flex styles
+      should be overriden.
+    </blockquote>
+    <p>
+      There is no strict need to use {code('Flex.Item')} component as a direct child of{' '}
+      {code('Flex')} - one may use {code('Flex.Item')} component only when it is necessary to tweak
+      flex styles of individual child item.
+    </p>
+    <ExampleSnippet
+      render={() => (
+        <Flex gap="gap.small">
+          <Button content="Accept" />
+          <Button content="Deny" />
+        </Flex>
+      )}
+    />
+    <p>As a consequence of this:</p>
+    <blockquote>
+      Each {code('Flex.Item')} element being introduced without any props specified should be
+      considered for removal.
+    </blockquote>
+    <ExampleSnippet
+      render={() => (
+        <Flex gap="gap.small">
+          <Button content="Accept" />
+          <Flex.Item>
+            <Button content="Deny" />
+          </Flex.Item>
+        </Flex>
+      )}
+    />
+    <Header as="h3">Optimize amount of DOM elements rendered</Header>
+    <p>
+      Flex component was designed being able to address all flexbox layout scenarios with minimal
+      amount of DOM elements rendered. In addition, there are props to address most common{' '}
+      {link(
+        'flexbox usage scenarios',
+        'https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox',
+        true,
+      )}{' '}
+      (e.g. {code('push')} prop) - the value of these props is that they introduce the least amount
+      of DOM elements necessary to accomplish corresponding use-case.
+    </p>
+    <p>
+      Let's consider one of the most representative examples - a navigation menu. Suppose that we
+      want a menu bar with logo on the left side and set of nav links on the right.
+    </p>
+    <p>
+      Quite often this is achieved by introducing a top-level flex container with two children:
+      first is a logo, and the second one is another container ({code('Flex')}, renders to{' '}
+      {code('<div />')}) with a group of buttons:
+    </p>
+    <ExampleSnippet
+      render={() => (
+        <Flex space="between">
+          <Button content="Logo" icon="chess rook" />
+
+          <Flex gap="gap.small">
+            <Button content="Page 1" />
+            <Button content="Page 2" />
+            <Button content="Page 3" />
+          </Flex>
+        </Flex>
+      )}
+    />
+    <p>
+      It turns out that this approach introduces unnecessary nesting level - it is possible to
+      achieve the same goal by using just top-level container, with no buttons container:
+    </p>
+    <ExampleSnippet
+      render={() => (
+        <Flex gap="gap.small">
+          <Button content="Logo" icon="chess rook" />
+          <Flex.Item push>
+            <Button content="Page 1" />
+          </Flex.Item>
+          <Button content="Page 2" />
+          <Button content="Page 3" />
+        </Flex>
+      )}
+    />
+    <p>
+      Note that{' '}
+      <strong>{code('Flex.Item')} doesn't result in any additional DOM element rendered</strong> -
+      its sole purpose is just to pass style props to its child.
+    </p>
+    <blockquote>
+      Consider to review set of examples on the {links.flex} page - as there might be an example
+      that suits your needs.{' '}
+      <strong>Each of these examples is optimized in terms of DOM elements rendered</strong>.
+    </blockquote>
+    <GuidesNavigationFooter
+      previous={{ name: 'Theming Examples', url: 'theming-examples' }}
+      next={{ name: 'Integrate Custom Components', url: 'integrate-custom-components' }}
+    />
+  </DocPage>
+)
diff --git a/docs/src/views/QuickStart.tsx b/docs/src/views/QuickStart.tsx
index b79aab6b20..1e1b2fff46 100644
--- a/docs/src/views/QuickStart.tsx
+++ b/docs/src/views/QuickStart.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { NavLink } from 'react-router-dom'
-import { Button, Header, Icon, Divider } from '@stardust-ui/react'
+import { Header, Icon } from '@stardust-ui/react'
 
 import CodeSnippet from '../components/CodeSnippet'
 import DocPage from '../components/DocPage'
+import GuidesNavigationFooter from '../components/GuidesNavigationFooter'
 
 export default () => (
   <DocPage title="Quick Start">
@@ -53,15 +53,6 @@ export default () => (
       `}
     />
 
-    <Divider />
-    <br />
-    <Button
-      as={NavLink}
-      content="Accessibility"
-      icon="arrow right"
-      iconPosition="after"
-      primary
-      to="accessibility"
-    />
+    <GuidesNavigationFooter next={{ name: 'Accessibility', url: 'accessibility' }} />
   </DocPage>
 )
diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx
index cb9d62a111..1f5ab50246 100644
--- a/docs/src/views/Theming.tsx
+++ b/docs/src/views/Theming.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
-import { Button, Divider, Icon, Provider, Text, Animation, Header } from '@stardust-ui/react'
+import { Button, Icon, Provider, Text, Animation, Header } from '@stardust-ui/react'
 
 import DocPage from '../components/DocPage/DocPage'
 import ExampleSnippet from '../components/ExampleSnippet/ExampleSnippet'
+import GuidesNavigationFooter from '../components/GuidesNavigationFooter'
 
 export default () => (
   <DocPage title="Theming">
@@ -26,7 +27,7 @@ export default () => (
 
     <p>Variables are defined at two levels, the site level and the component level.</p>
 
-    <Header a="h3" content="Site variables" />
+    <Header as="h3" content="Site variables" />
     <p>
       Site variables define your site, app, or business. These are global values, like brand colors
       and typography, that are shared across many components.
@@ -75,7 +76,7 @@ export default () => (
       )}
     />
 
-    <Header a="h3" content="Component variables" />
+    <Header as="h3" content="Component variables" />
     <p>
       Component variables define theme values for a specific component. This includes information
       such as colors, borders, or box model values.
@@ -299,24 +300,9 @@ export default () => (
       structure of the <code>animation</code> property in any of the Stardust components.
     </p>
 
-    <br />
-    <Divider size={1} />
-    <br />
-    <Button
-      as={NavLink}
-      content="Accessibility"
-      icon="arrow left"
-      iconPosition="before"
-      primary
-      to="/accessibility"
-    />
-    <Button
-      as={NavLink}
-      content="Theming Examples"
-      icon="arrow right"
-      iconPosition="after"
-      primary
-      to="theming-examples"
+    <GuidesNavigationFooter
+      previous={{ name: 'Accessibility', url: 'accessibility' }}
+      next={{ name: 'Theming Examples', url: 'theming-examples' }}
     />
   </DocPage>
 )
diff --git a/docs/src/views/ThemingExamples.tsx b/docs/src/views/ThemingExamples.tsx
index ea425024b5..381748bb49 100644
--- a/docs/src/views/ThemingExamples.tsx
+++ b/docs/src/views/ThemingExamples.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
-import { Button, Divider, Icon, Label, Provider, Header } from '@stardust-ui/react'
+import { Button, Icon, Label, Provider, Header } from '@stardust-ui/react'
 
 import DocPage from '../components/DocPage/DocPage'
 import ExampleSnippet from '../components/ExampleSnippet/ExampleSnippet'
-import { pxToRem } from 'src/lib'
+
+import GuidesNavigationFooter from '../components/GuidesNavigationFooter'
 
 export default () => (
   <DocPage title="Theming Examples">
@@ -368,24 +369,9 @@ export default () => (
       )}
     />
 
-    <Divider size={1} />
-    <br />
-    <Button
-      as={NavLink}
-      content="Theming"
-      icon="arrow left"
-      iconPosition="before"
-      primary
-      to="theming"
-    />
-    <Button
-      as={NavLink}
-      content="Integrate Custom Components"
-      icon="arrow right"
-      iconPosition="after"
-      primary
-      to="integrate-custom-components"
-      variables={{ maxWidth: pxToRem(300) }}
+    <GuidesNavigationFooter
+      previous={{ name: 'Theming', url: 'theming' }}
+      next={{ name: 'Layout', url: 'layout' }}
     />
   </DocPage>
 )
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index a41f7dc7ed..fc3199aad5 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -17,7 +17,7 @@ export interface BoxProps
     ChildrenComponentProps {}
 
 /**
- * A Box is an abstract layout component, is frequently used for slots in other Stardust components.
+ * A Box is an abstract component, is frequently used for slots in other Stardust components.
  * By default it renders a `div` without any styles.
  */
 const Box: CreateComponentReturnType<ReactProps<BoxProps>> = createComponent<BoxProps>({