diff --git a/client/App.jsx b/client/App.jsx
index 9d47369..709fd87 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import Home from './Home';
 import Centering from './layouts/Centering';
+import Sidebar from './layouts/Sidebar';
 import StickyFooter from './layouts/StickyFooter';
 import StickyHeader from './layouts/StickyHeader';
 
@@ -12,6 +13,7 @@ const App = () => {
             <Switch>
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
+                <Route exact={true} path='/sidebar'><Sidebar /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
                 <Route exact={true} path='/sticky-header'><StickyHeader /></Route>
             </Switch>
diff --git a/client/DetailsLayout.jsx b/client/DetailsLayout.jsx
index 2c34b60..f59d31a 100644
--- a/client/DetailsLayout.jsx
+++ b/client/DetailsLayout.jsx
@@ -3,14 +3,13 @@ import { Link } from 'react-router-dom';
 
 import Layout from './Layout';
 
-const DetailsLayout = ({ name, children }) => {
+const DetailsLayout = ({ children }) => {
     return (
         <Layout>
             <div className="mw8 center">
                 <div className="mv4">
                     <Link to="/" className="link black pa1 ba b--black-60">CSS Layout</Link>
                 </div>
-                <h1 className="f1 tc">{name}</h1>
                 <div className="mb5">
                     {children}
                 </div>
diff --git a/client/Home.jsx b/client/Home.jsx
index 1c4b21c..9deaeea 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import CenterCover from './covers/CenterCover';
+import SidebarCover from './covers/SidebarCover';
 import StickyFooterCover from './covers/StickyFooterCover';
 import StickyHeaderCover from './covers/StickyHeaderCover';
 import Layout from './Layout';
@@ -30,6 +31,12 @@ const Home = () => {
                 <h2 className="f2 lh-copy">Layouts</h2>
 
                 <div className="flex flex-wrap">
+                    <div className="pa2 w-20">
+                        <Link to="/sidebar" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                            <SidebarCover />
+                            <h4 className="f4 mv0 pt3">Sidebar</h4>
+                        </Link>
+                    </div>
                     <div className="pa2 w-20">
                         <Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
                             <StickyFooterCover />
diff --git a/client/Layout.jsx b/client/Layout.jsx
index 67c38b0..c7714f8 100644
--- a/client/Layout.jsx
+++ b/client/Layout.jsx
@@ -11,22 +11,20 @@ const Layout = ({ children }) => {
                 {children}
             </div>
             <div className="w-100 bt b--black-30">
-                <div className="mw8 center pv4 flex justify-between">
+                <div className="mw8 center pv5 flex justify-between">
                     <div>
                         <div className="f4 fw6 mb2">Other cool things</div>
-                        <ul className="flex items-center list ma0 pa0 lh-copy fw5">
+                        <ul className="list ma0 pa0 lh-copy fw5">
                             <li className="pr2">
                                 <a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript">
                                     FormValidation
                                 </a>
                             </li>
-                            <li className="pr2">∙</li>
                             <li className="pr2">
                                 <a className="link" href="https://blur.page" title="BlurPage ~ a browser extension to hide sensitive element on page" target="_blank">
                                     BlurPage
                                 </a>
                             </li>
-                            <li className="pr2">∙</li>
                             <li className="pr2">
                                 <a className="link" href="https://react-pdf-viewer.dev" title="React PDF Viewer ~ a PDF viewer made for React" target="_blank">
                                     React PDF Viewer
diff --git a/client/covers/SidebarCover.jsx b/client/covers/SidebarCover.jsx
new file mode 100644
index 0000000..8137601
--- /dev/null
+++ b/client/covers/SidebarCover.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+import Line from '../placeholders/Line';
+
+const SidebarCover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex">
+                <div className="b--black-30 br flex flex-column justify-end pa1 w-30">
+                    <div className="mb1"><Line /></div>
+                    <div className="w-80"><Line /></div>
+                </div>
+                <div className="flex-grow-1 pa2 b--black-30 br bw2">
+                    <div className="mb2"><Line /></div>
+                    <div className="mb2"><Line /></div>
+                    <div className="mb2"><Line /></div>
+                    <div className="w-80"><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default SidebarCover;
diff --git a/client/covers/StickyFooterCover.jsx b/client/covers/StickyFooterCover.jsx
index abed0cb..26aeccc 100644
--- a/client/covers/StickyFooterCover.jsx
+++ b/client/covers/StickyFooterCover.jsx
@@ -5,7 +5,7 @@ import Line from '../placeholders/Line';
 
 const StickyFooterCover = () => {
     return (
-        <Frame size="medium">
+        <Frame>
             <div className="h-100 flex flex-column">
                 <div className="flex-shrink-0 b--black-30 br bw2">
                     <div className="w-100 flex items-center pa2">
@@ -13,7 +13,7 @@ const StickyFooterCover = () => {
                         <div className="w1 ml-auto"><Line /></div>
                         <div className="w1 ml1"><Line /></div>
                     </div>
-                    <Line size="medium" />
+                    <Line />
                 </div>
                 <div className="flex-grow-1 b--black-30 br bw2">
                     <div className="pa2">
@@ -23,7 +23,7 @@ const StickyFooterCover = () => {
                     </div>
                 </div>
                 <div className="flex-shrink-0">
-                    <Line size="medium" />
+                    <Line />
                     <div className="w-100 flex items-center pa2">
                         <div className="w1"><Line /></div>
                         <div className="w1 ml1"><Line /></div>
diff --git a/client/covers/StickyHeaderCover.jsx b/client/covers/StickyHeaderCover.jsx
index 7979dc3..2b05304 100644
--- a/client/covers/StickyHeaderCover.jsx
+++ b/client/covers/StickyHeaderCover.jsx
@@ -5,7 +5,7 @@ import Line from '../placeholders/Line';
 
 const StickyHeaderCover = () => {
     return (
-        <Frame size="medium">
+        <Frame>
             <div className="h-100 flex flex-column">
                 <div className="flex-shrink-0">
                     <div className="w-100 flex items-center pa2">
@@ -13,7 +13,7 @@ const StickyHeaderCover = () => {
                         <div className="w1 ml-auto"><Line /></div>
                         <div className="w1 ml1"><Line /></div>
                     </div>
-                    <Line size="medium" />
+                    <Line />
                 </div>
                 <div className="flex-grow-1 b--black-30 br bw2">
                     <div className="pa2">
diff --git a/client/helpers/random.js b/client/helpers/random.js
new file mode 100644
index 0000000..72658a7
--- /dev/null
+++ b/client/helpers/random.js
@@ -0,0 +1,2 @@
+const random = (min, max) => min + Math.round(Math.random() * (max - min));
+export default random;
diff --git a/client/helpers/randomFromArray.js b/client/helpers/randomFromArray.js
new file mode 100644
index 0000000..1ba00fd
--- /dev/null
+++ b/client/helpers/randomFromArray.js
@@ -0,0 +1,2 @@
+const randomFromArray = (array) => array[Math.floor(Math.random() * array.length)];
+export default randomFromArray;
diff --git a/client/helpers/shuffe.js b/client/helpers/shuffe.js
new file mode 100644
index 0000000..4572f5d
--- /dev/null
+++ b/client/helpers/shuffe.js
@@ -0,0 +1,6 @@
+const shuffe = (array) => {
+    array.sort(() => Math.random() - 0.5);
+    return array;
+};
+
+export default shuffe;
diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx
index 1714990..ec08944 100644
--- a/client/layouts/Centering.jsx
+++ b/client/layouts/Centering.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import Dot from '../placeholders/Dot';
+import Rectangle from '../placeholders/Rectangle';
 import SampleCode from '../SampleCode';
 import useDocumentTitle from '../useDocumentTitle';
 
@@ -9,11 +11,15 @@ const Centering = () => {
     useDocumentTitle('CSS Layout ∙ Centering');
 
     return (
-        <DetailsLayout name="Centering">
+        <DetailsLayout>
+            <h1 className="f1 tc">Centering</h1>
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">
-                        <div className="f1 b">CENTER</div>
+                        <Dot size={64} />
+                        <div className="w-40 mt3"><Rectangle /></div>
+                        <div className="w-30 mt2"><Rectangle /></div>
+                        <div className="w-20 mt2"><Rectangle /></div>
                     </div>
                 }
                 source={
@@ -23,10 +29,9 @@ code={`
 <div style="
     align-items: center;
     display: flex;
-    flex-direction: column;
     justify-content: center;
 ">
-    CENTER
+    ...
 </div>
 `}
 />
diff --git a/client/layouts/Sidebar.jsx b/client/layouts/Sidebar.jsx
new file mode 100644
index 0000000..7958381
--- /dev/null
+++ b/client/layouts/Sidebar.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+import Block from '../placeholders/Block';
+import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
+
+const Sidebar = () => {
+    useDocumentTitle('CSS Layout ∙ Sidebar');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Sidebar</h1>
+            <div className="lh-copy mb3">Try to scroll the main content!</div>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex">
+                        <div className="b--black-30 br flex flex-column justify-end pa3 w-30">
+                            <div className="mb3"><Block numberOfBlocks={5} /></div>
+                            <div className="w-80"><Block numberOfBlocks={4} /></div>
+                        </div>
+                        <div className="flex-grow-1 pa3 overflow-scroll">
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="w-80"><Block numberOfBlocks={10} /></div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="display: flex;">
+    <!-- Sidebar -->
+    <aside style="width: 30%;">
+        ...
+    </aside>
+
+    <!-- Main -->
+    <main style="
+        flex-grow: 1;
+        overflow: scroll;
+    ">
+        ...
+    </main>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Sidebar;
diff --git a/client/layouts/StickyFooter.jsx b/client/layouts/StickyFooter.jsx
index 2ea0791..fcd2014 100644
--- a/client/layouts/StickyFooter.jsx
+++ b/client/layouts/StickyFooter.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
+import Block from '../placeholders/Block';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import Rectangle from '../placeholders/Rectangle';
 import SampleCode from '../SampleCode';
 import useDocumentTitle from '../useDocumentTitle';
 
@@ -9,21 +11,22 @@ const StickyFooter = () => {
     useDocumentTitle('CSS Layout ∙ Sticky footer');
 
     return (
-        <DetailsLayout name="Sticky footer">
+        <DetailsLayout>
+            <h1 className="f1 tc">Sticky footer</h1>
             <div className="lh-copy mb3">
                 The footer always sticks to the bottom if the main content is short.
             </div>
             <BrowserFrame
                 content={
-                    <div className="h-100 flex flex-column ba b--black-30 bw1">
-                        <div className="flex-shrink-0 bb b--black-30 bw1 pa3">
-                            Header
+                    <div className="h-100 flex flex-column">
+                        <div className="flex-shrink-0 bb b--black-30 pa3">
+                            <div className="w-50"><Rectangle /></div>
                         </div>
                         <div className="flex-grow-1 pa3">
-                            Content
+                            <Block numberOfBlocks={20} />
                         </div>
-                        <div className="flex-shrink-0 bt b--black-30 bw1 pa3">
-                            Footer
+                        <div className="flex-shrink-0 bt b--black-30 pa3">
+                        <div className="w-40"><Rectangle /></div>
                         </div>
                     </div>
                 }
diff --git a/client/layouts/StickyHeader.jsx b/client/layouts/StickyHeader.jsx
index 36f5ad5..c951a3b 100644
--- a/client/layouts/StickyHeader.jsx
+++ b/client/layouts/StickyHeader.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
+import Block from '../placeholders/Block';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import Rectangle from '../placeholders/Rectangle';
 import SampleCode from '../SampleCode';
 import useDocumentTitle from '../useDocumentTitle';
 
@@ -9,18 +11,19 @@ const StickyHeader = () => {
     useDocumentTitle('CSS Layout ∙ Sticky header');
 
     return (
-        <DetailsLayout name="Sticky header">
+        <DetailsLayout>
+            <h1 className="f1 tc">Sticky header</h1>
+            <div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
             <BrowserFrame
                 content={
                     <div>
-                        <div className="top-0 bg-white bb b--black-30 bw1 pa3" style={{ position: 'sticky' }}>
-                            Header
+                        <div className="top-0 bg-white bb b--black-30 pa3" style={{ position: 'sticky' }}>
+                            <div className="w-50"><Rectangle /></div>
                         </div>
                         <div className="pa3">
-                            <div className="lh-copy mb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
-                            <div className="lh-copy mb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
-                            <div className="lh-copy mb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
-                            <div className="lh-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="mb4"><Block numberOfBlocks={40} /></div>
+                            <div><Block numberOfBlocks={30} /></div>
                         </div>
                     </div>
                 }
diff --git a/client/placeholders/Block.jsx b/client/placeholders/Block.jsx
new file mode 100644
index 0000000..f5e5b52
--- /dev/null
+++ b/client/placeholders/Block.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import random from '../helpers/random';
+import Rectangle from './Rectangle';
+
+const Block = ({ numberOfBlocks }) => {
+    return (
+        <div className="flex flex-wrap w-100">
+            {
+                Array(numberOfBlocks).fill(0).map((_, i) => {
+                    const s = random(1, 5);
+                    return (
+                        <div key={i} className={`mr2 mb2 w-${s * 10}`}>
+                            <Rectangle height={8} />
+                        </div>
+                    );
+                })
+            }
+        </div>
+    );
+};
+
+export default Block;
diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx
index afd086b..6114202 100644
--- a/client/placeholders/BrowserFrame.jsx
+++ b/client/placeholders/BrowserFrame.jsx
@@ -6,7 +6,7 @@ const BrowserFrame = ({ content, source }) => {
 
     return (
         <div className="br2 ba b--black-20">
-            <div className="flex pa3 bb b--black-20 items-center bg-black-05">
+            <div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
                 <div className="br-100 mr1 w1 h1 bg-red" />
                 <div className="br-100 mr1 w1 h1 bg-gold" />
                 <div className="br-100 mr1 w1 h1 bg-red" />
diff --git a/client/placeholders/Dot.jsx b/client/placeholders/Dot.jsx
index abfb753..7267be8 100644
--- a/client/placeholders/Dot.jsx
+++ b/client/placeholders/Dot.jsx
@@ -1,8 +1,14 @@
 import React from 'react';
 
-const Dot = () => {
+const Dot = ({ size = 16 }) => {
     return (
-        <div className="bg-black-30 br-pill w1 h1" />
+        <div
+            className="bg-black-30 br-pill"
+            style={{
+                height: `${size}px`,
+                width: `${size}px`,
+            }}
+        />
     );
 };
 
diff --git a/client/placeholders/Frame.jsx b/client/placeholders/Frame.jsx
index 545fbb5..fb1d17b 100644
--- a/client/placeholders/Frame.jsx
+++ b/client/placeholders/Frame.jsx
@@ -1,13 +1,10 @@
 import React from 'react';
 
-const Frame = ({ children, size }) => {
-    const bw = (size === 'medium' ? '2px' : '1px');
-
+const Frame = ({ children }) => {
     return (
         <div
             className="ba b--black-30 br2"
             style={{
-                borderWidth: bw,
                 height: '100px',
                 width: '100px',
             }}
diff --git a/client/placeholders/Line.jsx b/client/placeholders/Line.jsx
index 1386d8d..7d41c57 100644
--- a/client/placeholders/Line.jsx
+++ b/client/placeholders/Line.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 
-const Line = ({ size }) => {
-    const h = (size === 'medium' ? '2px' : '1px');
-
+const Line = () => {
     return (
         <div
             className="w-100 bg-black-30"
-            style={{ height: h }}
+            style={{ height: '1px' }}
         />
     );
 };
diff --git a/client/placeholders/Rectangle.jsx b/client/placeholders/Rectangle.jsx
new file mode 100644
index 0000000..933cd6e
--- /dev/null
+++ b/client/placeholders/Rectangle.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Rectangle = ({ height = 8 }) => {
+    return (
+        <div
+            className="w-100 bg-black-30 br-pill"
+            style={{ height: `${height}px` }}
+        />
+    );
+};
+
+export default Rectangle;