diff --git a/client/CoverCard.jsx b/client/CoverCard.jsx
new file mode 100644
index 0000000..725178c
--- /dev/null
+++ b/client/CoverCard.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import CoverLoader from './CoverLoader';
+import slug from './helpers/slug';
+
+const CoverCard = ({ pattern }) => {
+    return (
+        <div className="pa1 w-20">
+            <Link
+                to={`/${slug(pattern)}`}
+                className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"
+            >
+                <CoverLoader pattern={pattern} />
+                <h4 className="f5 mv0 pt3">{pattern}</h4>
+            </Link>
+        </div>
+    );
+};
+
+export default CoverCard;
diff --git a/client/CoverLoader.jsx b/client/CoverLoader.jsx
index fcac7b6..c57b9a9 100644
--- a/client/CoverLoader.jsx
+++ b/client/CoverLoader.jsx
@@ -1,6 +1,7 @@
 import loadable from '@loadable/component';
 
-import slug from './helpers/slug';
+//import slug from './helpers/slug';
+const slug = item => item.toLowerCase().split(' ').join('-');
 
 const CoverLoader = loadable(props => import(`./layouts/${slug(props.pattern)}/Cover`));
 
diff --git a/client/Home.jsx b/client/Home.jsx
index da9e34f..0666c36 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -1,41 +1,8 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 
-//import CoverLoader from './CoverLoader';
-import BadgeCover from './layouts/badge/Cover';
-import BreadcrumbCover from './layouts/breadcrumb/Cover';
-import ButtonWithIconCover from './layouts/button-with-icon/Cover';
-import CardCover from './layouts/card/Cover';
-import CenterCover from './layouts/centering/Cover';
-import DotNavigationCover from './layouts/dot-navigation/Cover';
-import FeatureListCover from './layouts/feature-list/Cover';
-import FixedAtCornerCover from './layouts/fixed-at-corner/Cover';
-import HolyGrailCover from './layouts/holy-grail/Cover';
-import InputAddonCover from './layouts/input-add-on/Cover';
-import MediaObjectCover from './layouts/media-object/Cover';
-import MenuCover from './layouts/menu/Cover';
-import ModalCover from './layouts/modal/Cover';
-import NotificationCover from './layouts/notification/Cover';
-import PaginationCover from './layouts/pagination/Cover';
-import PreviousNextButtonCover from './layouts/previous-next-buttons/Cover';
-import PricingTableCover from './layouts/pricing-table/Cover';
-import ProgressBarCover from './layouts/progress-bar/Cover';
-import SameHeightColumnsCover from './layouts/same-height-columns/Cover';
-import SearchBoxCover from './layouts/search-box/Cover';
-import SeparatorCover from './layouts/separator/Cover';
-import SidebarCover from './layouts/sidebar/Cover';
-import SimpleGridCover from './layouts/simple-grid/Cover';
-import SliderCover from './layouts/slider/Cover';
-import SplitNavigationCover from './layouts/split-navigation/Cover';
-import SplitScreenCover from './layouts/split-screen/Cover';
-import StepperInputCover from './layouts/stepper-input/Cover';
-import StickyFooterCover from './layouts/sticky-footer/Cover';
-import StickyHeaderCover from './layouts/sticky-header/Cover';
-import SwitchCover from './layouts/switch/Cover';
-import TabCover from './layouts/tab/Cover';
-import WizardCover from './layouts/wizard/Cover';
-import Layout from './Layout';
+import CoverCard from './CoverCard';
 import useDocumentTitle from './hooks/useDocumentTitle';
+import Layout from './Layout';
 
 const Home = () => {
     useDocumentTitle('CSS Layout');
@@ -78,36 +45,11 @@ const Home = () => {
                     <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
 
                     <div className="flex flex-wrap items-start pa4">
-                        <div className="pa1 w-20">
-                            <Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <HolyGrailCover />
-                                <h4 className="f5 mv0 pt3">Holy grail</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <SidebarCover />
-                                <h4 className="f5 mv0 pt3">Sidebar</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/split-screen" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <SplitScreenCover />
-                                <h4 className="f5 mv0 pt3">Split screen</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <StickyFooterCover />
-                                <h4 className="f5 mv0 pt3">Sticky footer</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                        <Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                            <StickyHeaderCover />
-                            <h4 className="f5 mv0 pt3">Sticky header</h4>
-                        </Link>
-                        </div>
+                        <CoverCard pattern="Holy grail" />
+                        <CoverCard pattern="Sidebar" />
+                        <CoverCard pattern="Split screen" />
+                        <CoverCard pattern="Sticky footer" />
+                        <CoverCard pattern="Sticky header" />
                     </div>
                 </div>
 
@@ -115,168 +57,33 @@ const Home = () => {
                     <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
 
                     <div className="flex flex-wrap items-start pa4">
-                        <div className="pa1 w-20">
-                            <Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <BadgeCover pattern="Badge" />
-                                <h4 className="f5 mv0 pt3">Badge</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/breadcrumb" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <BreadcrumbCover />
-                                <h4 className="f5 mv0 pt3">Breadcrumb</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <ButtonWithIconCover />
-                                <h4 className="f5 mv0 pt3">Button with icon</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/card" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <CardCover />
-                                <h4 className="f5 mv0 pt3">Card</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <CenterCover />
-                                <h4 className="f5 mv0 pt3">Centering</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/dot-navigation" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <DotNavigationCover />
-                                <h4 className="f5 mv0 pt3">Dot navigation</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/feature-list" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <FeatureListCover />
-                                <h4 className="f5 mv0 pt3">Feature list</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/fixed-at-corner" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <FixedAtCornerCover />
-                                <h4 className="f5 mv0 pt3">Fixed at corner</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <InputAddonCover />
-                                <h4 className="f5 mv0 pt3">Input addon</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <MediaObjectCover />
-                                <h4 className="f5 mv0 pt3">Media object</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/menu" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <MenuCover />
-                                <h4 className="f5 mv0 pt3">Menu</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/modal" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <ModalCover />
-                                <h4 className="f5 mv0 pt3">Modal</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/notification" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <NotificationCover />
-                                <h4 className="f5 mv0 pt3">Notification</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/pagination" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <PaginationCover />
-                                <h4 className="f5 mv0 pt3">Pagination</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/previous-next-buttons" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <PreviousNextButtonCover />
-                                <h4 className="f5 mv0 pt3">Previous next buttons</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/pricing-table" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <PricingTableCover />
-                                <h4 className="f5 mv0 pt3">Pricing table</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/progress-bar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <ProgressBarCover />
-                                <h4 className="f5 mv0 pt3">Progress bar</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/same-height-columns" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <SameHeightColumnsCover />
-                                <h4 className="f5 mv0 pt3">Same height columns</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/search-box" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <SearchBoxCover />
-                                <h4 className="f5 mv0 pt3">Search box</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/separator" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <SeparatorCover />
-                                <h4 className="f5 mv0 pt3">Separator</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/simple-grid" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <SimpleGridCover />
-                                <h4 className="f5 mv0 pt3">Simple grid</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/slider" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <SliderCover />
-                                <h4 className="f5 mv0 pt3">Slider</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/split-navigation" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <SplitNavigationCover />
-                                <h4 className="f5 mv0 pt3">Split navigation</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <StepperInputCover />
-                                <h4 className="f5 mv0 pt3">Stepper input</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/switch" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <SwitchCover />
-                                <h4 className="f5 mv0 pt3">Switch</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/tab" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <TabCover />
-                                <h4 className="f5 mv0 pt3">Tab</h4>
-                            </Link>
-                        </div>
-                        <div className="pa1 w-20">
-                            <Link to="/wizard" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
-                                <WizardCover />
-                                <h4 className="f5 mv0 pt3">Wizard</h4>
-                            </Link>
-                        </div>
+                        <CoverCard pattern="Badge" />
+                        <CoverCard pattern="Breadcrumb" />
+                        <CoverCard pattern="Button with icon" />
+                        <CoverCard pattern="Card" />
+                        <CoverCard pattern="Centering" />
+                        <CoverCard pattern="Dot navigation" />
+                        <CoverCard pattern="Feature list" />
+                        <CoverCard pattern="Fixed at corner" />
+                        <CoverCard pattern="Input add-on" />
+                        <CoverCard pattern="Media object" />
+                        <CoverCard pattern="Menu" />
+                        <CoverCard pattern="Modal" />
+                        <CoverCard pattern="Notification" />
+                        <CoverCard pattern="Pagination" />
+                        <CoverCard pattern="Previous next buttons" />
+                        <CoverCard pattern="Pricing table" />
+                        <CoverCard pattern="Progress bar" />
+                        <CoverCard pattern="Same height columns" />
+                        <CoverCard pattern="Search box" />
+                        <CoverCard pattern="Separator" />
+                        <CoverCard pattern="Simple grid" />
+                        <CoverCard pattern="Slider" />
+                        <CoverCard pattern="Split navigation" />
+                        <CoverCard pattern="Stepper input" />
+                        <CoverCard pattern="Switch" />
+                        <CoverCard pattern="Tab" />
+                        <CoverCard pattern="Wizard" />
                     </div>
                 </div>
             </div>