diff --git a/.eslintrc b/.eslintrc
index f5b072b..98cbdca 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -15,7 +15,7 @@
         "node": true,
         "es6": true
     },
-    "ignorePatterns": ["dist", "setupTests.ts", "babel.config.js"],
+    "ignorePatterns": ["dist", "setupTests.ts", "babel.config.js", "www"],
     "rules": {
         "comma-dangle": "off",
         "class-methods-use-this": "off",
diff --git a/src/components/Navigation/Horizontal/Divider.tsx b/src/components/Navigation/Horizontal/Divider.tsx
new file mode 100644
index 0000000..e24d4ad
--- /dev/null
+++ b/src/components/Navigation/Horizontal/Divider.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+type NavigationDividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationDivider = React.forwardRef<HTMLDivElement, NavigationDividerProps>((
+    _,
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className="vertical-navigation-divider"
+    />
+));
+
+NavigationDivider.displayName = 'NavigationDivider';
+
+export default NavigationDivider;
diff --git a/src/components/Navigation/Horizontal/List.tsx b/src/components/Navigation/Horizontal/List.tsx
new file mode 100644
index 0000000..01ed89c
--- /dev/null
+++ b/src/components/Navigation/Horizontal/List.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationListProps = React.HTMLAttributes<HTMLElement>;
+
+const NavigationList = React.forwardRef<HTMLElement, NavigationListProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <nav
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list',
+            className
+        )}
+    >
+        {children}
+    </nav>
+));
+
+NavigationList.displayName = 'NavigationList';
+NavigationList.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default NavigationList;
diff --git a/src/components/Navigation/Horizontal/ListItem.tsx b/src/components/Navigation/Horizontal/ListItem.tsx
new file mode 100644
index 0000000..d40b592
--- /dev/null
+++ b/src/components/Navigation/Horizontal/ListItem.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    icon?: React.ReactElement;
+}
+
+const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemProps>((
+    {
+        active,
+        children,
+        className,
+        icon
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list-item',
+            active && 'active',
+            className
+        )}
+    >
+        {icon && (
+            <div className="vertical-navigation-list-item-icon">
+                {icon}
+            </div>
+        )}
+        {children}
+    </div>
+));
+
+NavigationListItem.displayName = 'NavigationListItem';
+NavigationListItem.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    icon: PropTypes.element
+};
+
+export default NavigationListItem;
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
new file mode 100644
index 0000000..ae26fdd
--- /dev/null
+++ b/src/components/Navigation/Navigation.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Panel } from '@/components';
+import clsx from 'clsx';
+
+interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
+    sticky?: boolean;
+}
+
+const Navigation = React.forwardRef<HTMLElement, NavigationProps>((
+    {
+        children,
+        className,
+        sticky
+    },
+    ref
+): React.ReactElement => (
+    <nav
+        ref={ref}
+        className={clsx(
+            'navigation-list',
+            sticky && 'navigation-sticky',
+            className
+        )}
+    >
+        {children}
+    </nav>
+));
+
+Navigation.displayName = 'PageNavigation';
+Navigation.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    sticky: PropTypes.bool
+}
+
+export default Navigation;
diff --git a/src/components/Navigation/Vertical/Divider.tsx b/src/components/Navigation/Vertical/Divider.tsx
new file mode 100644
index 0000000..e24d4ad
--- /dev/null
+++ b/src/components/Navigation/Vertical/Divider.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+type NavigationDividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationDivider = React.forwardRef<HTMLDivElement, NavigationDividerProps>((
+    _,
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className="vertical-navigation-divider"
+    />
+));
+
+NavigationDivider.displayName = 'NavigationDivider';
+
+export default NavigationDivider;
diff --git a/src/components/Navigation/Vertical/List.tsx b/src/components/Navigation/Vertical/List.tsx
new file mode 100644
index 0000000..01ed89c
--- /dev/null
+++ b/src/components/Navigation/Vertical/List.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationListProps = React.HTMLAttributes<HTMLElement>;
+
+const NavigationList = React.forwardRef<HTMLElement, NavigationListProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <nav
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list',
+            className
+        )}
+    >
+        {children}
+    </nav>
+));
+
+NavigationList.displayName = 'NavigationList';
+NavigationList.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default NavigationList;
diff --git a/src/components/Navigation/Vertical/ListItem.tsx b/src/components/Navigation/Vertical/ListItem.tsx
new file mode 100644
index 0000000..04d82f4
--- /dev/null
+++ b/src/components/Navigation/Vertical/ListItem.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { NavigationContext } from './NavigationContext';
+
+interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    content?: React.ReactNode;
+    icon?: React.ReactElement;
+}
+
+const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemProps>((
+    {
+        active,
+        children,
+        className,
+        icon
+    },
+    ref
+): React.ReactElement => {
+    return (
+        <NavigationContext.Consumer>
+            {() => (
+                <div
+                    ref={ref}
+                    className={clsx(
+                        'vertical-navigation-list-item',
+                        active && 'active',
+                        className
+                    )}
+                >
+                    {icon && (
+                        <div className="vertical-navigation-list-item-icon">
+                            {icon}
+                        </div>
+                    )}
+                    <span className="vertical-navigation-list-item-text">
+                        {children}
+                    </span>
+                </div>
+            )}
+        </NavigationContext.Consumer>
+    )
+});
+
+NavigationListItem.displayName = 'NavigationListItem';
+NavigationListItem.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    icon: PropTypes.element
+};
+
+export default NavigationListItem;
diff --git a/src/components/Navigation/Vertical/NavigationContext.ts b/src/components/Navigation/Vertical/NavigationContext.ts
new file mode 100644
index 0000000..2c8c86e
--- /dev/null
+++ b/src/components/Navigation/Vertical/NavigationContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+export interface NavigationContextProps {
+    tooltipsWhenCollapsed: boolean;
+    collapsed: boolean;
+}
+
+export const NavigationContext = createContext<NavigationContextProps>({
+    tooltipsWhenCollapsed: true,
+    collapsed: false
+});
diff --git a/src/components/Navigation/Vertical/Top.tsx b/src/components/Navigation/Vertical/Top.tsx
new file mode 100644
index 0000000..df547c1
--- /dev/null
+++ b/src/components/Navigation/Vertical/Top.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationTopProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationTop = React.forwardRef<HTMLDivElement, NavigationTopProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-top',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+NavigationTop.displayName = 'NavigationTop';
+NavigationTop.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
+
+export default NavigationTop;
diff --git a/src/components/Navigation/Vertical/VerticalNavigationScope.ts b/src/components/Navigation/Vertical/VerticalNavigationScope.ts
new file mode 100644
index 0000000..0cacd31
--- /dev/null
+++ b/src/components/Navigation/Vertical/VerticalNavigationScope.ts
@@ -0,0 +1,4 @@
+export interface VerticalNavigationScope {
+    collapsed: boolean;
+    collapse: () => void;
+}
diff --git a/src/components/Navigation/VerticalNavigation.tsx b/src/components/Navigation/VerticalNavigation.tsx
new file mode 100644
index 0000000..9b40ec9
--- /dev/null
+++ b/src/components/Navigation/VerticalNavigation.tsx
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { ForwardComponentWithStatics } from '@/components/utils/ForwardComponentWithStatics';
+import { Variant } from '@/components';
+import NavigationTop from '@/components/Navigation/Vertical/Top';
+import NavigationList from '@/components/Navigation/Vertical/List';
+import NavigationListItem from '@/components/Navigation/Vertical/ListItem';
+import NavigationDivider from '@/components/Navigation/Vertical/Divider';
+import { useEffect, useState } from 'react';
+import { VerticalNavigationScope } from '@/components/Navigation/Vertical/VerticalNavigationScope';
+import { NavigationContext } from './Vertical/NavigationContext';
+
+export interface VerticalNavigationStatics {
+    Top: typeof NavigationTop;
+    List: typeof NavigationList;
+    Item: typeof NavigationListItem;
+    Divider: typeof NavigationDivider;
+}
+
+export interface VerticalNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Variant of the menu. With this prop, the color of the menu can be set.
+     */
+    variant?: Variant | string;
+    /**
+     * Indicates whether the menu collapse is controllable.
+     */
+    collapsable?: boolean;
+    /**
+     * Indicating whether the menu is collapsed. Can be used to make the navigation a controllable component
+     */
+    collapsed?: boolean;
+    /**
+     * Indicates whether a tooltip with the menu text must be shown when menu is collapsed. Default: true
+     */
+    tooltipsWhenCollapsed?: boolean;
+    /**
+     * Children of the menu. This can be either a React ChildNode or callback function to access various actions
+     */
+    children: React.ReactNode | ((scope: VerticalNavigationScope) => React.ReactNode);
+}
+
+// @ts-ignore
+const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, VerticalNavigationProps, VerticalNavigationStatics> =
+    React.forwardRef((
+        {
+            children,
+            className,
+            variant,
+            collapsed,
+            tooltipsWhenCollapsed = true
+        },
+        ref
+    ): React.ReactElement => {
+        const [isCollapsed, setCollapsed] = useState<boolean>(false);
+
+        useEffect(() => {
+            if (collapsed) {
+                setCollapsed(collapsed);
+            }
+        }, [collapsed])
+
+        const makeScope = (): VerticalNavigationScope => ({
+            collapsed: isCollapsed,
+            collapse: () => setCollapsed(!collapsed)
+        });
+
+        children = typeof children === 'function'
+            ? (children as (scope: VerticalNavigationScope) => React.ReactNode)(makeScope())
+            : children;
+
+        return (
+            <NavigationContext.Provider
+                value={{
+                    tooltipsWhenCollapsed: tooltipsWhenCollapsed,
+                    collapsed: isCollapsed
+                }}
+            >
+                <div
+                    ref={ref}
+                    className={clsx(
+                        'vertical-navigation-container',
+                        isCollapsed && 'is-collapsed',
+                        variant && `navigation-${variant}`,
+                        className
+                    )}
+                >
+                    {children}
+                </div>
+            </NavigationContext.Provider>
+        )
+    });
+
+VerticalNavigation.displayName = 'VerticalNavigation';
+VerticalNavigation.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    variant: PropTypes.string,
+    collapsed: PropTypes.bool,
+    tooltipsWhenCollapsed: PropTypes.bool
+}
+
+VerticalNavigation.Top = NavigationTop;
+VerticalNavigation.List = NavigationList;
+VerticalNavigation.Item = NavigationListItem;
+VerticalNavigation.Divider = NavigationDivider;
+
+
+export default VerticalNavigation;
diff --git a/src/components/Navigation/index.ts b/src/components/Navigation/index.ts
new file mode 100644
index 0000000..76443bd
--- /dev/null
+++ b/src/components/Navigation/index.ts
@@ -0,0 +1 @@
+export { default as Navigation } from './Navigation';
diff --git a/src/components/Overlay/OverlayTrigger.tsx b/src/components/Overlay/OverlayTrigger.tsx
index a6b7630..125eefe 100644
--- a/src/components/Overlay/OverlayTrigger.tsx
+++ b/src/components/Overlay/OverlayTrigger.tsx
@@ -5,6 +5,7 @@ import Overlay from '@/components/Overlay/index';
 import { Placement, PositioningStrategy } from '@popperjs/core';
 import { Trigger, triggerPropTypes } from '@/components/Overlay/Trigger';
 import { AnimatePresence } from 'framer-motion';
+import { Modifier } from '@popperjs/core/lib/types';
 
 interface OverlayTriggerProps {
     arrow?: boolean;
@@ -15,6 +16,7 @@ interface OverlayTriggerProps {
     className?: string;
     trigger?: Trigger | string;
     motion?: string;
+    config?: Array<Partial<Modifier<any, any>>>;
 }
 
 const OverlayTrigger = ({
@@ -25,7 +27,8 @@ const OverlayTrigger = ({
     placement,
     positionStrategy,
     trigger = 'hover',
-    motion
+    motion,
+    config
 }: OverlayTriggerProps): React.ReactElement => {
     const [shown, setShown] = useState<boolean>(false);
     const triggerRef = useRef<HTMLElement>();
@@ -71,6 +74,7 @@ const OverlayTrigger = ({
             placement={placement}
             positionStrategy={positionStrategy}
             className={className}
+            config={config}
         >
             {overlay}
         </Overlay>
diff --git a/src/components/Overlay/index.tsx b/src/components/Overlay/index.tsx
index 14f4840..3a3cb88 100644
--- a/src/components/Overlay/index.tsx
+++ b/src/components/Overlay/index.tsx
@@ -20,6 +20,7 @@ interface OverlayProps {
     arrow?: boolean;
     positionStrategy?: PositioningStrategy;
     motion?: string;
+    config?: Array<Partial<Modifier<any, any>>>;
 }
 
 const Overlay = ({
@@ -29,7 +30,8 @@ const Overlay = ({
     placement = 'top',
     arrow = true,
     positionStrategy = 'absolute',
-    motion: triggerMotion
+    motion: triggerMotion,
+    config
 }: React.PropsWithChildren<OverlayProps>): React.ReactElement => {
     const ref = useRef<HTMLDivElement | null>(null);
     const popper = useRef<PopperInstance>();
@@ -40,7 +42,8 @@ const Overlay = ({
             options: {
                 element: '.arrow'
             }
-        }] : [])
+        }] : []),
+        ...(config || [])
     ]);
 
     const createPopperOptions = (): PopperOptions => ({
diff --git a/src/components/Page/Main.tsx b/src/components/Page/Main.tsx
new file mode 100644
index 0000000..ddb57d4
--- /dev/null
+++ b/src/components/Page/Main.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type PageMainProps = React.HTMLAttributes<HTMLDivElement>;
+
+const PageMain = React.forwardRef<HTMLDivElement, PageMainProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'page-main',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+PageMain.displayName = 'PageMain';
+PageMain.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
+
+export default PageMain;
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 48344b2..19f9bb9 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -1,14 +1,36 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
 import PageHeader from '@/components/Page/Header';
 import PageContent from '@/components/Page/Content';
+import PageMain from '@/components/Page/Main';
+import Side from '@/components/Page/Side';
+import PageRight from '@/components/Page/PageRight';
+import PageLeft from '@/components/Page/PageLeft';
+import { ForwardComponentWithStatics } from '@/components/utils/ForwardComponentWithStatics';
+import PageSide from '@/components/Page/Side';
 
-export type PageProps = React.HTMLAttributes<HTMLDivElement> ;
+export interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
+    sticky?: boolean;
+}
 
-const Page = ({
+export interface PageStatics {
+    Right: typeof PageRight;
+    Left: typeof PageLeft;
+    Header: typeof PageHeader;
+    Content: typeof PageContent;
+    Side: typeof PageSide;
+    Main: typeof PageMain;
+}
+
+// Static properties are not given yet, when declaring the card const. Therefore, the error saying
+// that Card is missing above CardStatics  properties. These will defined after the card component
+// is defined.
+// @ts-ignore
+const Page: ForwardComponentWithStatics<HTMLDivElement, PageProps, PageStatics> = React.forwardRef(({
     children,
     className,
-}: React.PropsWithChildren<PageProps>): React.ReactElement => (
+}): React.ReactElement => (
     <div
         className={clsx(
             'page',
@@ -17,9 +39,18 @@ const Page = ({
     >
         {children}
     </div>
-);
-
+));
+Page.displayName = 'Page';
+Page.Right = PageRight;
+Page.Left = PageLeft;
 Page.Header = PageHeader;
 Page.Content = PageContent;
+Page.Side = Side;
+Page.Main = PageMain;
+
+Page.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
 
 export default Page;
diff --git a/src/components/Page/PageContext.ts b/src/components/Page/PageContext.ts
new file mode 100644
index 0000000..6a0245b
--- /dev/null
+++ b/src/components/Page/PageContext.ts
@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export interface PageContextProps {
+
+}
+
+export const PageContext = createContext<PageContextProps>({})
diff --git a/src/components/Page/PageLeft.tsx b/src/components/Page/PageLeft.tsx
new file mode 100644
index 0000000..865d6c7
--- /dev/null
+++ b/src/components/Page/PageLeft.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+import PageSide, { Position } from '@/components/Page/Side';
+
+export interface PageLeftProps extends React.HTMLAttributes<HTMLDivElement> {
+    fixed?: boolean;
+    variant?: Variant | string;
+}
+
+const PageLeft = React.forwardRef<HTMLDivElement, PageLeftProps>((
+    {
+        children,
+        className,
+        fixed,
+    },
+    ref
+): React.ReactElement => (
+    <PageSide
+        ref={ref}
+        position={Position.LEFT}
+        className={className}
+        fixed={fixed}
+    >
+        {children}
+    </PageSide>
+));
+
+PageLeft.displayName = 'PageLeft';
+PageLeft.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    fixed: PropTypes.bool,
+    variant: PropTypes.string
+}
+
+export default PageLeft;
diff --git a/src/components/Page/PageRight.tsx b/src/components/Page/PageRight.tsx
new file mode 100644
index 0000000..ea8fe3c
--- /dev/null
+++ b/src/components/Page/PageRight.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+import PageSide, { Position } from '@/components/Page/Side';
+
+export interface PageRightProps extends React.HTMLAttributes<HTMLDivElement> {
+    spaced?: boolean;
+    fixed?: boolean;
+    variant?: Variant | string;
+}
+
+const PageRight = React.forwardRef<HTMLDivElement, PageRightProps>((
+    {
+        children,
+        className,
+        fixed,
+    },
+    ref
+): React.ReactElement => (
+    <PageSide
+        ref={ref}
+        position={Position.RIGHT}
+        className={className}
+        fixed={fixed}
+    >
+        {children}
+    </PageSide>
+));
+
+PageRight.displayName = 'PageRight';
+PageRight.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    fixed: PropTypes.bool,
+
+}
+
+export default PageRight;
diff --git a/src/components/Page/Side.tsx b/src/components/Page/Side.tsx
new file mode 100644
index 0000000..614cfd5
--- /dev/null
+++ b/src/components/Page/Side.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Variant } from '@/components';
+
+export enum Position {
+    LEFT = 'left',
+    RIGHT = 'right'
+}
+
+export interface PageSideProps extends React.HTMLAttributes<HTMLDivElement> {
+    position?: Position | string;
+    fixed?: boolean;
+    variant?: Variant | string;
+}
+
+const PageSide = React.forwardRef<HTMLDivElement, PageSideProps>((
+    {
+        children,
+        className,
+        position,
+        fixed,
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'page-side',
+            position && `page-side-${position}`,
+            fixed && 'page-side-fixed',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+PageSide.displayName = 'Side';
+PageSide.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    position: PropTypes.string,
+    fixed: PropTypes.bool,
+    variant: PropTypes.string
+}
+
+export default PageSide;
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index cf4c28a..a52cc41 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -1,24 +1,37 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
 
 interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
     spaced?: boolean;
+    variant?: Variant| string;
 }
 
-const Panel = ({
+const Panel = React.forwardRef<HTMLDivElement, PanelProps>(({
     children,
     className,
-    spaced
-}: React.PropsWithChildren<PanelProps>): React.ReactElement => (
+    spaced,
+    variant
+}): React.ReactElement => (
     <div
         className={clsx(
             'panel',
             spaced && 'panel-spaced',
+            variant && `panel-${variant}`,
             className
         )}
     >
         {children}
     </div>
-);
+));
+
+Panel.displayName = 'Panel';
+Panel.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    spaced: PropTypes.bool,
+    variant: PropTypes.string
+}
 
 export default Panel;
diff --git a/src/images/coderan/logo.svg b/src/images/coderan/logo.svg
new file mode 100644
index 0000000..9a4efe7
--- /dev/null
+++ b/src/images/coderan/logo.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 713 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g id="Coderan" transform="matrix(1.22507,0,0,1.22507,-183.008,-304.272)">
+        <g transform="matrix(134.398,0,0,134.398,266.351,376.222)">
+            <path d="M0.317,-0.545C0.367,-0.545 0.414,-0.532 0.458,-0.507C0.502,-0.482 0.537,-0.448 0.562,-0.405C0.586,-0.362 0.599,-0.316 0.599,-0.266C0.599,-0.216 0.586,-0.169 0.561,-0.125C0.536,-0.082 0.502,-0.048 0.459,-0.023C0.417,0.001 0.369,0.014 0.317,0.014C0.241,0.014 0.176,-0.013 0.122,-0.068C0.068,-0.122 0.042,-0.188 0.042,-0.265C0.042,-0.348 0.072,-0.417 0.133,-0.473C0.186,-0.521 0.248,-0.545 0.317,-0.545ZM0.319,-0.419C0.278,-0.419 0.243,-0.405 0.216,-0.376C0.188,-0.347 0.174,-0.311 0.174,-0.266C0.174,-0.219 0.188,-0.182 0.215,-0.153C0.242,-0.125 0.277,-0.11 0.319,-0.11C0.36,-0.11 0.395,-0.125 0.423,-0.154C0.45,-0.183 0.464,-0.22 0.464,-0.266C0.464,-0.311 0.451,-0.348 0.424,-0.377C0.396,-0.405 0.361,-0.419 0.319,-0.419Z" style="fill:rgb(37,43,57);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,352.384,376.222)">
+            <path d="M0.459,-0.736L0.593,-0.736L0.593,-0L0.459,-0L0.459,-0.056C0.433,-0.031 0.407,-0.014 0.381,-0.003C0.355,0.008 0.327,0.014 0.296,0.014C0.227,0.014 0.168,-0.013 0.118,-0.066C0.068,-0.119 0.043,-0.186 0.043,-0.265C0.043,-0.347 0.067,-0.414 0.116,-0.466C0.164,-0.519 0.223,-0.545 0.292,-0.545C0.324,-0.545 0.354,-0.539 0.382,-0.527C0.41,-0.515 0.436,-0.497 0.459,-0.473L0.459,-0.736ZM0.319,-0.422C0.278,-0.422 0.244,-0.407 0.217,-0.378C0.189,-0.349 0.176,-0.312 0.176,-0.266C0.176,-0.22 0.19,-0.182 0.217,-0.153C0.245,-0.123 0.279,-0.108 0.32,-0.108C0.362,-0.108 0.396,-0.123 0.424,-0.152C0.452,-0.181 0.465,-0.219 0.465,-0.267C0.465,-0.313 0.452,-0.35 0.424,-0.379C0.396,-0.408 0.362,-0.422 0.319,-0.422Z" style="fill:rgb(37,43,57);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,441.108,376.222)">
+            <path d="M0.6,-0.227L0.171,-0.227C0.178,-0.189 0.194,-0.159 0.221,-0.137C0.248,-0.115 0.282,-0.104 0.324,-0.104C0.374,-0.104 0.416,-0.121 0.452,-0.156L0.564,-0.103C0.536,-0.063 0.503,-0.034 0.464,-0.015C0.425,0.004 0.378,0.014 0.325,0.014C0.241,0.014 0.174,-0.013 0.121,-0.065C0.069,-0.118 0.042,-0.184 0.042,-0.263C0.042,-0.344 0.069,-0.411 0.121,-0.465C0.173,-0.518 0.239,-0.545 0.317,-0.545C0.401,-0.545 0.469,-0.518 0.521,-0.465C0.574,-0.411 0.6,-0.34 0.6,-0.252L0.6,-0.227ZM0.466,-0.332C0.458,-0.362 0.44,-0.386 0.414,-0.404C0.388,-0.423 0.358,-0.432 0.324,-0.432C0.287,-0.432 0.254,-0.422 0.226,-0.401C0.209,-0.388 0.192,-0.365 0.177,-0.332L0.466,-0.332Z" style="fill:rgb(37,43,57);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(0.816282,0,0,0.816282,14.9692,68.0394)">
+            <path d="M583.105,359.56C588.084,358.291 592.547,355.737 596.493,351.898L614.984,360.581C610.375,367.12 604.854,371.957 598.423,375.092C595.631,376.453 592.612,377.519 589.365,378.289L583.105,359.56ZM559.829,289.928C564.307,288.526 569.132,287.824 574.305,287.824C588.079,287.824 599.28,292.233 607.909,301.049C616.538,309.866 620.853,321.509 620.853,335.98L620.772,340.161L576.62,340.161L570.843,322.876L598.825,322.876C597.375,317.999 594.516,314.033 590.248,310.978C585.98,307.923 581.028,306.395 575.39,306.395C571.982,306.395 568.808,306.927 565.867,307.991L559.829,289.928Z" style="fill:rgb(80,79,84);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,527.141,376.222)">
+            <path d="M0.036,-0.531L0.15,-0.531L0.15,-0.464C0.163,-0.491 0.179,-0.511 0.2,-0.524C0.22,-0.538 0.243,-0.545 0.267,-0.545C0.284,-0.545 0.302,-0.54 0.321,-0.531L0.28,-0.417C0.264,-0.424 0.251,-0.428 0.241,-0.428C0.221,-0.428 0.203,-0.416 0.189,-0.39C0.175,-0.365 0.168,-0.315 0.168,-0.241L0.168,-0.215L0.168,-0L0.036,-0L0.036,-0.531Z" style="fill:rgb(80,79,84);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,570.125,376.222)">
+            <path d="M0.459,-0.531L0.593,-0.531L0.593,-0L0.459,-0L0.459,-0.056C0.433,-0.031 0.407,-0.014 0.381,-0.003C0.355,0.008 0.327,0.014 0.296,0.014C0.227,0.014 0.168,-0.013 0.118,-0.066C0.068,-0.119 0.043,-0.186 0.043,-0.265C0.043,-0.347 0.067,-0.414 0.116,-0.466C0.164,-0.519 0.223,-0.545 0.292,-0.545C0.324,-0.545 0.354,-0.539 0.382,-0.527C0.41,-0.515 0.436,-0.497 0.459,-0.473L0.459,-0.531ZM0.319,-0.422C0.278,-0.422 0.244,-0.407 0.217,-0.378C0.189,-0.349 0.176,-0.312 0.176,-0.266C0.176,-0.22 0.19,-0.182 0.217,-0.153C0.245,-0.123 0.279,-0.108 0.32,-0.108C0.362,-0.108 0.396,-0.123 0.424,-0.152C0.452,-0.181 0.465,-0.219 0.465,-0.267C0.465,-0.313 0.452,-0.35 0.424,-0.379C0.396,-0.408 0.362,-0.422 0.319,-0.422Z" style="fill:rgb(80,79,84);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,658.849,376.222)">
+            <path d="M0.067,-0.531L0.201,-0.531L0.201,-0.477C0.231,-0.502 0.258,-0.52 0.283,-0.53C0.307,-0.54 0.332,-0.545 0.358,-0.545C0.411,-0.545 0.456,-0.527 0.492,-0.49C0.523,-0.458 0.539,-0.412 0.539,-0.351L0.539,-0L0.407,-0L0.407,-0.233C0.407,-0.296 0.404,-0.338 0.398,-0.359C0.393,-0.38 0.383,-0.396 0.368,-0.407C0.354,-0.417 0.337,-0.423 0.316,-0.423C0.289,-0.423 0.266,-0.414 0.247,-0.396C0.227,-0.378 0.214,-0.353 0.207,-0.321C0.203,-0.304 0.201,-0.268 0.201,-0.213L0.201,-0L0.067,-0L0.067,-0.531Z" style="fill:rgb(80,79,84);fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <g id="Coderan-in-C---Code-Rood-1" serif:id="Coderan in C - Code Rood 1" transform="matrix(0.176222,0,0,0.682896,-3.78855,-104.49)">
+        <path d="M460,212.5C460,211.12 455.659,210 450.312,210L319.688,210C314.341,210 310,211.12 310,212.5L310,217.5C310,218.88 314.341,220 319.688,220L450.312,220C455.659,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(255,9,0);"/>
+    </g>
+    <g transform="matrix(0.909632,0,0,0.909632,-152.218,-193.094)">
+        <path d="M314.392,298.775C314.4,299.182 314.405,299.59 314.405,300C314.405,302.12 314.293,304.214 314.076,306.282L296.958,306.282C295.922,306.282 295.081,305.441 295.081,304.405L295.081,300.651C295.081,299.616 295.922,298.775 296.958,298.775L314.392,298.775Z" style="fill:rgb(255,9,0);"/>
+    </g>
+    <g id="Coderan-in-C---Code-Grijs-1" serif:id="Coderan in C - Code Grijs 1" transform="matrix(0.45516,0,0,0.682896,-97.2743,-64.7277)">
+        <path d="M460,212.5C460,211.12 458.319,210 456.249,210L313.751,210C311.681,210 310,211.12 310,212.5L310,217.5C310,218.88 311.681,220 313.751,220L456.249,220C458.319,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(80,79,84);"/>
+    </g>
+    <g transform="matrix(0.909632,0,0,0.909632,-143.2,-192.689)">
+        <path d="M295.221,268.841C296.72,271.233 298.052,273.741 299.2,276.349L274.601,276.349C273.565,276.349 272.724,275.508 272.724,274.472L272.724,270.718C272.724,269.682 273.565,268.841 274.601,268.841L295.221,268.841Z" style="fill:rgb(1,0,208);stroke:rgb(1,0,208);stroke-width:1.1px;"/>
+    </g>
+    <g id="Coderan-in-C---Code-Blauw-1" serif:id="Coderan in C - Code Blauw 1" transform="matrix(0.370216,0,0,0.682896,-70.9415,-51.4002)">
+        <path d="M460,212.5C460,211.12 457.934,210 455.389,210L314.611,210C312.066,210 310,211.12 310,212.5L310,217.5C310,218.88 312.066,220 314.611,220L455.389,220C457.934,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(1,0,208);"/>
+    </g>
+    <g id="Coderan-in-C---Code-Groen-3" serif:id="Coderan in C - Code Groen 3" transform="matrix(0.369733,0,0,0.682896,-70.7917,-91.2725)">
+        <path d="M460,212.5C460,211.12 457.931,210 455.383,210L314.617,210C312.069,210 310,211.12 310,212.5L310,217.5C310,218.88 312.069,220 314.617,220L455.383,220C457.931,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(12,195,5);"/>
+    </g>
+    <g id="Coderan-in-C---Code-Groen-1" serif:id="Coderan in C - Code Groen 1" transform="matrix(0.252434,0,0,0.682896,-27.8039,-38.1829)">
+        <path d="M460,212.5C460,211.12 456.97,210 453.237,210L316.763,210C313.03,210 310,211.12 310,212.5L310,217.5C310,218.88 313.03,220 316.763,220L453.237,220C456.97,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(12,195,5);"/>
+    </g>
+    <g id="Coderan-in-C---Code-Oranje-2" serif:id="Coderan in C - Code Oranje 2" transform="matrix(0.425426,0,0,0.682896,-88.0567,-117.487)">
+        <path d="M460,212.5C460,211.12 458.202,210 455.987,210L314.013,210C311.798,210 310,211.12 310,212.5L310,217.5C310,218.88 311.798,220 314.013,220L455.987,220C458.202,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(255,174,0);stroke:rgb(255,174,0);stroke-width:1.76px;stroke-linecap:butt;"/>
+    </g>
+    <g transform="matrix(0.909632,0,0,0.909632,-143.2,-192.689)">
+        <path d="M297.457,327.269C296.079,329.894 294.508,332.402 292.762,334.776L262.462,334.776C261.426,334.776 260.585,333.935 260.585,332.9L260.585,329.146C260.585,328.11 261.426,327.269 262.462,327.269L297.457,327.269Z" style="fill:rgb(255,174,0);stroke:rgb(255,174,0);stroke-width:1.1px;"/>
+    </g>
+    <g transform="matrix(0.909632,0,0,0.909632,-143.2,-192.689)">
+        <path d="M282.728,254.617C285.48,256.885 288.021,259.398 290.32,262.124L250.323,262.124C249.287,262.124 248.446,261.283 248.446,260.248L248.446,256.494C248.446,255.458 249.287,254.617 250.323,254.617L282.728,254.617Z" style="fill:rgb(158,23,138);stroke:rgb(158,23,138);stroke-width:1.1px;"/>
+    </g>
+    <g id="Coderan-in-C---Code-Paars-1" serif:id="Coderan in C - Code Paars 1" transform="matrix(0.48585,0,0,0.682896,-106.788,-24.9655)">
+        <path d="M460,212.5C460,211.12 458.425,210 456.486,210L313.514,210C311.575,210 310,211.12 310,212.5L310,217.5C310,218.88 311.575,220 313.514,220L456.486,220C458.425,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(158,23,138);"/>
+    </g>
+    <g id="Coderan-in-C---2" serif:id="Coderan in C - 2" transform="matrix(0.0441682,0,0,0.682896,16.8828,-104.49)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---3" serif:id="Coderan in C - 3" transform="matrix(0.0441682,0,0,0.682896,16.8828,-91.2725)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---4" serif:id="Coderan in C - 4" transform="matrix(0.0441682,0,0,0.682896,16.8828,-78.0552)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---5" serif:id="Coderan in C - 5" transform="matrix(0.0441682,0,0,0.682896,16.8828,-64.8378)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---6" serif:id="Coderan in C - 6" transform="matrix(0.0441682,0,0,0.682896,16.8828,-51.6205)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---7" serif:id="Coderan in C - 7" transform="matrix(0.0441682,0,0,0.682896,16.8828,-38.4032)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---8" serif:id="Coderan in C - 8" transform="matrix(0.0441682,0,0,0.682896,16.8828,-24.9655)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---1" serif:id="Coderan in C - 1" transform="matrix(0.276051,0,0,0.275361,-0.470089,13.3066)">
+        <path d="M135.872,48.512C136.262,49.266 136.461,50.123 136.461,51.026L136.461,63.796C136.461,67.116 133.773,69.811 130.461,69.811L118.461,69.811C115.675,69.811 113.329,67.903 112.763,65.292L113.694,64.517C117.406,61.708 121.119,58.898 124.831,56.089L135.872,48.512Z" style="fill:rgb(47,54,72);fill-opacity:0.1;"/>
+    </g>
+    <g transform="matrix(0.40134,0,0,0.40134,-80.7674,-40.607)">
+        <path d="M540.56,440.56C504.572,476.549 454.866,498.822 400,498.822C290.267,498.822 201.178,409.733 201.178,300C201.178,190.267 290.267,101.178 400,101.178C454.866,101.178 504.572,123.451 540.56,159.44L494.393,205.607C470.225,181.439 436.845,166.482 400,166.482C326.309,166.482 266.482,226.309 266.482,300C266.482,373.691 326.309,433.518 400,433.518C436.845,433.518 470.225,418.561 494.393,394.393L540.56,440.56Z" style="fill:rgb(37,43,57);stroke:rgb(37,43,57);stroke-width:2.49px;"/>
+    </g>
+</svg>
diff --git a/src/style/base/_typography.scss b/src/style/base/_typography.scss
index 77e6cf6..9cd673c 100644
--- a/src/style/base/_typography.scss
+++ b/src/style/base/_typography.scss
@@ -142,3 +142,7 @@ h6 {
 .text-secondary {
     color: variables.color('gray', 'default');
 }
+
+.text-center {
+    text-align: center;
+}
diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss
index 5da7188..9d4beff 100644
--- a/src/style/base/_variables.scss
+++ b/src/style/base/_variables.scss
@@ -222,9 +222,15 @@ $panel-gutter: 2rem;
  * 4. Page
  */
 $page-gutter: 2rem;
+$page-side-background-color: #fff;
+$page-side-border-color: hsl(0, 0%, 88%);
+$page-side-gutter: 1rem;
 
 :root {
     --page-gutter: #{$page-gutter};
+    --page-side-background-color: #{$page-side-background-color};
+    --page-side-border-color: #{$page-side-border-color};
+    --page-side-gutter: #{$page-side-gutter};
 }
 
 /**
@@ -568,3 +574,16 @@ $form-field-font-size: 1rem;
     --form-field-font-weight: #{$form-field-font-weight};
     --form-field-font-size: #{$form-field-font-size};
 }
+
+/**
+ * 9. Navigation
+ */
+$vertical-navigation-border-color: hsl(0, 0%, 88%);
+$vertical-navigation-hover-item-background-color: rgba(0, 0, 0, .05);
+$vertical-navigation-active-item-background-color: rgba(0, 0, 0, .1);
+
+:root {
+    --vertical-navigation-border-color: #{$vertical-navigation-border-color};
+    --vertical-navigation-hover-item-background-color: #{$vertical-navigation-hover-item-background-color};
+    --vertical-navigation-active-item-background-color: #{$vertical-navigation-active-item-background-color};
+}
diff --git a/src/style/components/_logos.scss b/src/style/components/_logos.scss
new file mode 100644
index 0000000..e75bbb4
--- /dev/null
+++ b/src/style/components/_logos.scss
@@ -0,0 +1,10 @@
+.coderan {
+    background: url("../images/coderan/logo.svg");
+    width: 100px;
+}
+
+.coderan-light {
+    background: url("../images/coderan/logo-white.svg");
+    width: 240px;
+    height: auto;
+}
diff --git a/src/style/components/_navigation.scss b/src/style/components/_navigation.scss
new file mode 100644
index 0000000..047b9d2
--- /dev/null
+++ b/src/style/components/_navigation.scss
@@ -0,0 +1,97 @@
+@use "../base/variables";
+
+.vertical-navigation-container {
+    width: 100%;
+    min-width: 240px;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    position: relative;
+
+    .vertical-navigation-top {
+        padding: var(--base-gutter);
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .vertical-navigation-divider {
+        height: 1px;
+        background: var(--vertical-navigation-border-color);
+        width: 100%;
+    }
+
+    .vertical-navigation-list {
+        padding: var(--base-gutter);
+        overflow-y: scroll;
+
+        .vertical-navigation-list-item {
+            align-items: center;
+            cursor: pointer;
+            color: currentColor;
+            display: flex;
+            padding: var(--base-gutter);
+            position: relative;
+            font: {
+                weight: 500;
+            }
+
+            &:hover {
+                background: var(--vertical-navigation-hover-item-background-color);
+            }
+
+            &:active {
+                background: var(--vertical-navigation-active-item-background-color);
+            }
+
+            .vertical-navigation-list-item-icon {
+                margin-right: var(--base-gutter);
+                font: {
+                    size: 1.1rem;
+                }
+            }
+
+            &.active {
+                color: #fff;
+                background: var(--primary-color);
+                border-radius: var(--base-border-radius);
+            }
+
+            &:not(:last-child) {
+                margin-bottom: var(--base-gutter);
+            }
+        }
+    }
+
+    &.is-collapsed {
+        min-width: auto;
+
+        .vertical-navigation-list-item {
+            position: relative;
+            .vertical-navigation-list-item-icon {
+                margin-right: 0;
+            }
+
+            .vertical-navigation-list-item-text {
+                display: none;
+            }
+        }
+    }
+}
+
+.navigation-primary {
+    color: variables.color('deep-purple', 'background');
+
+    .vertical-navigation-list-item {
+        color: #fff;
+    }
+
+    .vertical-navigation-divider {
+        background: var(--primary-color-light-background);
+    }
+}
+
+.vertical-navigation-tooltip {
+    margin-left: 0.5rem;
+    background: #000;
+}
diff --git a/src/style/components/_page.scss b/src/style/components/_page.scss
index 1e3207a..c29b3c6 100644
--- a/src/style/components/_page.scss
+++ b/src/style/components/_page.scss
@@ -1,7 +1,14 @@
 @use "../base/variables";
 
 .page {
-    background: var(--page-background-color);
+    display: flex;
+    flex-flow: row wrap;
+
+    .page-main {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1;
+    }
 
     .page-header {
         border-bottom: solid 1px var(--base-border-color);
@@ -25,4 +32,35 @@
     .page-content {
         padding: var(--page-gutter);
     }
+
+    .page-side {
+        flex: 0 0 auto;
+        background: var(--page-side-background-color);
+
+        &.page-side-right {
+            border-left: solid 1px var(--page-side-border-color);
+        }
+
+        &.page-side-left {
+            border-right: solid 1px var(--page-side-border-color);
+        }
+
+        &.page-side-fixed {
+            align-self: flex-start;
+            position: sticky;
+            top: 0;
+        }
+    }
+
+    .page-top {
+        width: 100%;
+        flex: 0 0 100%;
+        align-self: flex-start;
+        z-index: 9999;
+
+        &.page-top-sticky {
+            position: sticky;
+            top: 0;
+        }
+    }
 }
diff --git a/src/style/components/_panel.scss b/src/style/components/_panel.scss
index e46dc3a..ce1bd5f 100644
--- a/src/style/components/_panel.scss
+++ b/src/style/components/_panel.scss
@@ -2,6 +2,10 @@
     background: var(--panel-background);
 
     &.panel-spaced {
-        padding: var(--panel-gutter);
+        padding: var(--base-gutter);
+    }
+
+    &.panel-primary {
+        background: var(--primary-color);
     }
 }
diff --git a/src/style/index.scss b/src/style/index.scss
index 251cabe..a276f5d 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -17,6 +17,8 @@
 @use "components/tags";
 @use "components/overlay";
 @use "components/tooltips";
+@use "components/navigation";
+@use "components/logos";
 
 /**
  * 3. Layout
diff --git a/www/src/index.tsx b/www/src/index.tsx
index a276c94..79b4808 100644
--- a/www/src/index.tsx
+++ b/www/src/index.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { useState } from 'react';
 import * as ReactDom from 'react-dom';
-
 import '../../src/style/index.scss';
 import { Button, Card, Col, Grid, Icon, Page, Row, SelectField, Tag, TextField, Variant } from '../../src';
+import logoFull from '@/images/coderan/logo.svg';
+import logoLetter from '@/images/coderan/logo-letter.svg';
 import Container from '../../src/components/Container/Container';
 import FormGroup from '../../src/components/Form/Group';
 import FormLabel from '../../src/components/Form/Label';
 import FormMessage from '../../src/components/Form/Message';
 import Tooltip from '../../src/components/Tooltip';
+import VerticalNavigation from '../../src/components/Navigation/VerticalNavigation';
 
 const TestControllable = () => {
     const [value, setValue] = useState('');
@@ -34,159 +36,139 @@ const TestControllable = () => {
 
 ReactDom.render(
     <Page>
-        <Page.Header title="Coderan UI"/>
-        <Page.Content>
-            <Container>
-                <Row>
-                    <Card className="mb-8">
-                        <Card.Header title="Buttons"/>
-                        <Card.Content>
-                            <Grid columns={7} gap={4} className="mb-8">
-                                <div>
-                                    <Button variant={Variant.PRIMARY}>Primary</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.SECONDARY}>Secondary</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.DANGER}>Danger</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PRIMARY_GHOST}>Primary ghost</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.DANGER_GHOST}>Danger ghost</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PRIMARY} iconLeft={<Icon icon="home"/>}>Icon left</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PRIMARY} iconRight={<Icon icon="user"/>}>Icon
-                                        right</Button>
-                                </div>
-                            </Grid>
-                            <h4>Button colors</h4>
-                            <Grid columns={7} gap={4} className="mb-8">
-                                <div>
-                                    <Button variant={Variant.RED} block>Rood</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PINK} block>Roze</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PURPLE} block>Paars</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.DEEP_PURPLE} block>Diep-paars</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.INDIGO} block>Indigo</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.BLUE} block>Blauw</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.LIGHT_BLUE} block>Lichtblauw</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.TEAL} block>Teal</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.GREEN} block>Groen</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.LIGHT_GREEN} block>Lichtgroen</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.LIME} block>Limoen</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.YELLOW} block>Geel</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.AMBER} block>Amber</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.ORANGE} block>Oranje</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.BROWN} block>Bruin</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.GRAY} block>Grijs</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.BLUE_GRAY} block>Blauwgrijs</Button>
-                                </div>
-                                <div>
-                                    <Tooltip
-                                        content="Megalange tekst"
-                                        placement="top"
-                                        trigger="click"
-                                        motion="fade"
-                                    >
-                                        <Button
-                                            variant={Variant.ORANGE}
-                                        >
-                                            top
-                                        </Button>
-                                    </Tooltip>
-                                    <Tooltip
-                                        content="Megalange tekst"
-                                        placement="right"
-                                        trigger="click"
-                                        motion="fade"
-                                    >
-                                        <Button
-                                            variant={Variant.ORANGE}
-                                        >
-                                            right
-                                        </Button>
-                                    </Tooltip>
-                                    <Tooltip
-                                        content="Megalange tekst"
-                                        placement="bottom"
-                                    >
-                                        <Button
-                                            variant={Variant.ORANGE}
-                                        >
-                                            bottom
-                                        </Button>
-                                    </Tooltip>
-                                    <Tooltip
-                                        content="Megalange tekst"
-                                        placement="left"
-                                        trigger="click"
-                                    >
-                                        <Button
-                                            variant={Variant.ORANGE}
-                                        >
-                                            left
-                                        </Button>
-                                    </Tooltip>
-                                </div>
-                            </Grid>
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row>
-                    <Card className="mb-8">
-                        <Card.Header title="Grid"/>
-                        <Card.Content>
-                            <Container fluid>
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/1</Col>
-                                </Row>
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/2</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/2</Col>
-                                </Row>
+        <Page.Left fixed>
+            <VerticalNavigation collapsed>
+                {({ collapse, collapsed }) => (
+                    <>
+                        <VerticalNavigation.Top className="justify-content-center mb-4">
+                            {collapsed ? (
+                                <img src={logoLetter} height={36} />
+                            ) : (
+                                <img src={logoFull} height={36} />
+                            )}
+                        </VerticalNavigation.Top>
+                        <VerticalNavigation.Divider />
+                        <VerticalNavigation.List>
+                            <VerticalNavigation.Item
+                                active
+                                icon={<Icon icon="home" />}
+                                content="Home"
+                            />
+                            <VerticalNavigation.Item
+                                icon={<Icon icon="user" />}
+                                content="Tooltips"
+                            />
+                        </VerticalNavigation.List>
+                    </>
+                )}
+            </VerticalNavigation>
+        </Page.Left>
+        <Page.Main>
+            <Page.Header title="Demo"/>
+            <Page.Content>
+                <Container>
+                    <Row>
+                        <Card className="mb-8">
+                            <Card.Header title="Buttons"/>
+                            <Card.Content>
+                                <Grid columns={7} gap={4} className="mb-8">
+                                    <div>
+                                        <Button variant={Variant.PRIMARY}>Primary</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.SECONDARY}>Secondary</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.DANGER}>Danger</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PRIMARY_GHOST}>Primary ghost</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.DANGER_GHOST}>Danger ghost</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PRIMARY} iconLeft={<Icon icon="home"/>}>Icon left</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PRIMARY} iconRight={<Icon icon="user"/>}>Icon right</Button>
+                                    </div>
+                                </Grid>
+                                <h4>Button colors</h4>
+                                <Grid columns={7} gap={4} className="mb-8">
+                                    <div>
+                                        <Button variant={Variant.RED} block>Rood</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PINK} block>Roze</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PURPLE} block>Paars</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.DEEP_PURPLE} block>Diep-paars</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.INDIGO} block>Indigo</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.BLUE} block>Blauw</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.LIGHT_BLUE} block>Lichtblauw</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.TEAL} block>Teal</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.GREEN} block>Groen</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.LIGHT_GREEN} block>Lichtgroen</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.LIME} block>Limoen</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.YELLOW} block>Geel</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.AMBER} block>Amber</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.ORANGE} block>Oranje</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.BROWN} block>Bruin</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.GRAY} block>Grijs</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.BLUE_GRAY} block>Blauwgrijs</Button>
+                                    </div>
+                                </Grid>
+                            </Card.Content>
+                        </Card>
+                    </Row>
+                    <Row>
+                        <Card className="mb-8">
+                            <Card.Header title="Grid"/>
+                            <Card.Content>
+                                <Container fluid>
+                                    <Row className="mb-8">
+                                        <Col className="py-4 background-primary-light">Col 1/1</Col>
+                                    </Row>
+                                    <Row className="mb-8">
+                                        <Col className="py-4 background-primary-light">Col 1/2</Col>
+                                        <Col className="py-4 background-primary-light">Col 2/2</Col>
+                                    </Row>
 
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 3/4</Col>
-                                </Row>
+                                    <Row className="mb-8">
+                                        <Col className="py-4 background-primary-light">Col 1/3</Col>
+                                        <Col className="py-4 background-primary-light">Col 2/3</Col>
+                                        <Col className="py-4 background-primary-light">Col 3/4</Col>
+                                    </Row>
 
                                 <Row className="mb-8">
                                     <Col className="py-4 background-primary-light">Col 1/3</Col>
@@ -194,1828 +176,1830 @@ ReactDom.render(
                                     <Col className="py-4 background-primary-light">Col 3/4</Col>
                                 </Row>
 
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/4</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/4</Col>
-                                    <Col className="py-4 background-primary-light">Col 3/4</Col>
-                                    <Col className="py-4 background-primary-light">Col 4/4</Col>
-                                </Row>
-                            </Container>
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row className="mb-8">
-                    <Card>
-                        <Card.Header title="Inputs"/>
-                        <Card.Content>
-                            <FormGroup>
-                                <h5 className="text-primary">Standard input</h5>
-                                <FormLabel htmlFor="a">Username</FormLabel>
-                                <TextField id="a"/>
-                            </FormGroup>
+                                    <Row className="mb-8">
+                                        <Col className="py-4 background-primary-light">Col 1/4</Col>
+                                        <Col className="py-4 background-primary-light">Col 2/4</Col>
+                                        <Col className="py-4 background-primary-light">Col 3/4</Col>
+                                        <Col className="py-4 background-primary-light">Col 4/4</Col>
+                                    </Row>
+                                </Container>
+                            </Card.Content>
+                        </Card>
+                    </Row>
+                    <Row className="mb-8">
+                        <Card>
+                            <Card.Header title="Inputs"/>
+                            <Card.Content>
+                                <FormGroup>
+                                    <h5 className="text-primary">Standard input</h5>
+                                    <FormLabel htmlFor="a">Username</FormLabel>
+                                    <TextField id="a"/>
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Input with floating label</h5>
-                                <TextField label="Username"/>
-                            </FormGroup>
+                                <FormGroup>
+                                    <h5>Input with floating label</h5>
+                                    <TextField label="Username"/>
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Input with default value</h5>
-                                <TextField
-                                    label="With default value"
-                                    value="Hello world"
-                                />
-                            </FormGroup>
+                                <FormGroup>
+                                    <h5>Input with default value</h5>
+                                    <TextField
+                                        label="With default value"
+                                        value="Hello world"
+                                    />
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Input with actions</h5>
-                                <TextField
-                                    label="Username"
-                                    type="password"
-                                    onChange={() => {
+                                <FormGroup>
+                                    <h5>Input with actions</h5>
+                                    <TextField
+                                        label="Username"
+                                        type="password"
+                                        onChange={() => {
 
-                                    }}
-                                    actions={[
-                                        <Button small variant={Variant.PRIMARY}><Icon icon="eye"/></Button>
-                                    ]}
-                                    valid={true}
-                                />
-                            </FormGroup>
+                                        }}
+                                        actions={[
+                                            <Button small variant={Variant.PRIMARY}><Icon icon="eye"/></Button>
+                                        ]}
+                                        valid={true}
+                                    />
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Invalid input</h5>
-                                <TextField
-                                    label="Invalid input"
-                                    valid={false}
-                                />
-                                <FormMessage valid={false}>
-                                    Input is invalid
-                                </FormMessage>
-                            </FormGroup>
+                                <FormGroup>
+                                    <h5>Invalid input</h5>
+                                    <TextField
+                                        label="Invalid input"
+                                        valid={false}
+                                    />
+                                    <FormMessage valid={false}>
+                                        Input is invalid
+                                    </FormMessage>
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Valid input</h5>
-                                <TextField
-                                    label="Valid input"
-                                    valid
-                                />
-                            </FormGroup>
-                            <FormGroup>
-                                <h5>Valid input</h5>
-                                <SelectField
-                                    label="Valid input"
-                                    valid
-                                >
-                                    <option value="b">A</option>
-                                    <option value="d">B</option>
-                                    <option value="e">C</option>
-                                    <option value="f">D</option>
-                                    <option value="g">E</option>
-                                </SelectField>
-                            </FormGroup>
-                            <TestControllable/>
-                        </Card.Content>
-                    </Card>
-                    <Card>
-                        <Card.Header title="Tags"/>
-                        <Card.Content>
-                            test text
-                            <Tag variant={Variant.PRIMARY}>Primary</Tag>
-                            <Tag variant={Variant.DANGER}>Danger</Tag>
-                            <Tag variant={Variant.RED}>Rood</Tag>
-                            <Tag variant={Variant.PINK}>Roze</Tag>
-                            <Tag variant={Variant.PURPLE}>Paars</Tag>
-                            <Tag variant={Variant.DEEP_PURPLE}>Diep-paars</Tag>
-                            <Tag variant={Variant.INDIGO}>Indigo</Tag>
-                            <Tag variant={Variant.BLUE}>Blauw</Tag>
-                            <Tag variant={Variant.LIGHT_BLUE}>Lichtblauw</Tag>
-                            <Tag variant={Variant.TEAL}>Teal</Tag>
-                            <Tag variant={Variant.GREEN}>Groen</Tag>
-                            <Tag variant={Variant.LIGHT_GREEN}>Lichtgroen</Tag>
-                            <Tag variant={Variant.LIME}>Limoen</Tag>
-                            <Tag variant={Variant.YELLOW}>Geel</Tag>
-                            <Tag variant={Variant.AMBER}>Amber</Tag>
-                            <Tag variant={Variant.ORANGE}>Oranje</Tag>
-                            <Tag variant={Variant.BROWN}>Bruin</Tag>
-                            <Tag variant={Variant.GRAY}>Grijs</Tag>
-                            <Tag variant={Variant.BLUE_GRAY}>Blauwgrijs</Tag>
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row>
-                    <Grid columns={10} gap={4}>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Activity</div>
-                                <Icon icon="activity" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Alert circle</div>
-                                <Icon icon="alert-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Alert triangle</div>
-                                <Icon icon="alert-triangle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Archive</div>
-                                <Icon icon="archive" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow left</div>
-                                <Icon icon="arrow-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle down</div>
-                                <Icon icon="arrow-circle-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle left</div>
-                                <Icon icon="arrow-circle-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle right</div>
-                                <Icon icon="arrow-circle-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle up</div>
-                                <Icon icon="arrow-circle-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort down</div>
-                                <Icon icon="sort-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort down</div>
-                                <Icon icon="arrow-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow right</div>
-                                <Icon icon="arrow-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt left</div>
-                                <Icon icon="arrow-alt-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt down</div>
-                                <Icon icon="arrow-alt-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt right</div>
-                                <Icon icon="arrow-alt-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt up</div>
-                                <Icon icon="arrow-alt-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort left</div>
-                                <Icon icon="sort-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort right</div>
-                                <Icon icon="sort-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort up</div>
-                                <Icon icon="sort-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow up</div>
-                                <Icon icon="arrow-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double down</div>
-                                <Icon icon="chevron-double-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double left</div>
-                                <Icon icon="chevron-double-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double right</div>
-                                <Icon icon="chevron-double-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double up</div>
-                                <Icon icon="chevron-double-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">At</div>
-                                <Icon icon="at" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Attach 2</div>
-                                <Icon icon="attach-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Attach</div>
-                                <Icon icon="attach" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Award</div>
-                                <Icon icon="award" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Backspace</div>
-                                <Icon icon="backspace" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bar chart 2</div>
-                                <Icon icon="bar-chart-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bar chart</div>
-                                <Icon icon="bar-chart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Battery</div>
-                                <Icon icon="battery" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Behance</div>
-                                <Icon icon="behance" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bell off</div>
-                                <Icon icon="bell-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bell</div>
-                                <Icon icon="bell" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bluetooth</div>
-                                <Icon icon="bluetooth" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Book open</div>
-                                <Icon icon="book-open" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Book</div>
-                                <Icon icon="book" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bookmark</div>
-                                <Icon icon="bookmark" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Briefcase</div>
-                                <Icon icon="briefcase" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Browser</div>
-                                <Icon icon="browser" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Brush</div>
-                                <Icon icon="brush" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bulb</div>
-                                <Icon icon="bulb" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Calendar</div>
-                                <Icon icon="calendar" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Camera</div>
-                                <Icon icon="camera" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Car</div>
-                                <Icon icon="car" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cast</div>
-                                <Icon icon="cast" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Charging</div>
-                                <Icon icon="charging" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark circle 2</div>
-                                <Icon icon="checkmark-circle-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark circle</div>
-                                <Icon icon="checkmark-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark</div>
-                                <Icon icon="checkmark" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark square 2</div>
-                                <Icon icon="checkmark-square-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark square</div>
-                                <Icon icon="checkmark-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron down</div>
-                                <Icon icon="chevron-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron left</div>
-                                <Icon icon="chevron-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron right</div>
-                                <Icon icon="chevron-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron up</div>
-                                <Icon icon="chevron-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Clipboard</div>
-                                <Icon icon="clipboard" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Clock</div>
-                                <Icon icon="clock" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Close circle</div>
-                                <Icon icon="close-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Close</div>
-                                <Icon icon="close" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Close square</div>
-                                <Icon icon="close-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cloud download</div>
-                                <Icon icon="cloud-download" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cloud upload</div>
-                                <Icon icon="cloud-upload" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Code download</div>
-                                <Icon icon="code-download" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Code</div>
-                                <Icon icon="code" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Collapse</div>
-                                <Icon icon="collapse" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Color palette</div>
-                                <Icon icon="color-palette" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Color picker</div>
-                                <Icon icon="color-picker" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Compass</div>
-                                <Icon icon="compass" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Copy</div>
-                                <Icon icon="copy" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner down left</div>
-                                <Icon icon="corner-down-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner down right</div>
-                                <Icon icon="corner-down-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner left down</div>
-                                <Icon icon="corner-left-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner left up</div>
-                                <Icon icon="corner-left-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner right down</div>
-                                <Icon icon="corner-right-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner right up</div>
-                                <Icon icon="corner-right-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner up left</div>
-                                <Icon icon="corner-up-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner up right</div>
-                                <Icon icon="corner-up-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Credit card</div>
-                                <Icon icon="credit-card" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Crop</div>
-                                <Icon icon="crop" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cube</div>
-                                <Icon icon="cube" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow left down</div>
-                                <Icon icon="diagonal-arrow-left-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow left up</div>
-                                <Icon icon="diagonal-arrow-left-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow right down</div>
-                                <Icon icon="diagonal-arrow-right-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow right up</div>
-                                <Icon icon="diagonal-arrow-right-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Done all</div>
-                                <Icon icon="done-all" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Download</div>
-                                <Icon icon="download" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Droplet off</div>
-                                <Icon icon="droplet-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Droplet</div>
-                                <Icon icon="droplet" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Edit 2</div>
-                                <Icon icon="edit-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Edit</div>
-                                <Icon icon="edit" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Email</div>
-                                <Icon icon="email" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Expand</div>
-                                <Icon icon="expand" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">External link</div>
-                                <Icon icon="external-link" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Eye off 2</div>
-                                <Icon icon="eye-off-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Eye off</div>
-                                <Icon icon="eye-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Eye</div>
-                                <Icon icon="eye" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Facebook</div>
-                                <Icon icon="facebook" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File add</div>
-                                <Icon icon="file-add" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File</div>
-                                <Icon icon="file" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File remove</div>
-                                <Icon icon="file-remove" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File text</div>
-                                <Icon icon="file-text" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Film</div>
-                                <Icon icon="film" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flag</div>
-                                <Icon icon="flag" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flash off</div>
-                                <Icon icon="flash-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flash</div>
-                                <Icon icon="flash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flip 2</div>
-                                <Icon icon="flip-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flip</div>
-                                <Icon icon="flip" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Folder add</div>
-                                <Icon icon="folder-add" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Folder</div>
-                                <Icon icon="folder" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Folder remove</div>
-                                <Icon icon="folder-remove" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Funnel</div>
-                                <Icon icon="funnel" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Gift</div>
-                                <Icon icon="gift" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Github</div>
-                                <Icon icon="github" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Globe 2</div>
-                                <Icon icon="globe-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Globe</div>
-                                <Icon icon="globe" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Google</div>
-                                <Icon icon="google" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Grid</div>
-                                <Icon icon="grid" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Hard drive</div>
-                                <Icon icon="hard-drive" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Hash</div>
-                                <Icon icon="hash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Headphones</div>
-                                <Icon icon="headphones" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Heart</div>
-                                <Icon icon="heart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Home</div>
-                                <Icon icon="home" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Image</div>
-                                <Icon icon="image" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Inbox</div>
-                                <Icon icon="inbox" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Info</div>
-                                <Icon icon="info" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Keypad</div>
-                                <Icon icon="keypad" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Layers</div>
-                                <Icon icon="layers" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Layout</div>
-                                <Icon icon="layout" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Link 2</div>
-                                <Icon icon="link-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Link</div>
-                                <Icon icon="link" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Linkedin</div>
-                                <Icon icon="linkedin" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">List</div>
-                                <Icon icon="list" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Loader</div>
-                                <Icon icon="loader" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Lock</div>
-                                <Icon icon="lock" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Log in</div>
-                                <Icon icon="log-in" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Log out</div>
-                                <Icon icon="log-out" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Map</div>
-                                <Icon icon="map" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Maximize</div>
-                                <Icon icon="maximize" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Menu 2</div>
-                                <Icon icon="menu-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Menu arrow</div>
-                                <Icon icon="menu-arrow" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Menu</div>
-                                <Icon icon="menu" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Message circle</div>
-                                <Icon icon="message-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Message square</div>
-                                <Icon icon="message-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Mic off</div>
-                                <Icon icon="mic-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Mic</div>
-                                <Icon icon="mic" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minimize</div>
-                                <Icon icon="minimize" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minus circle</div>
-                                <Icon icon="minus-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minus</div>
-                                <Icon icon="minus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minus square</div>
-                                <Icon icon="minus-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Monitor</div>
-                                <Icon icon="monitor" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Moon</div>
-                                <Icon icon="moon" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">More horizontal</div>
-                                <Icon icon="more-horizontal" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">More vertical</div>
-                                <Icon icon="more-vertical" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Move</div>
-                                <Icon icon="move" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Music</div>
-                                <Icon icon="music" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Navigation 2</div>
-                                <Icon icon="navigation-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Navigation</div>
-                                <Icon icon="navigation" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Npm</div>
-                                <Icon icon="npm" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Options 2</div>
-                                <Icon icon="options-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Options</div>
-                                <Icon icon="options" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pantone</div>
-                                <Icon icon="pantone" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Paper plane</div>
-                                <Icon icon="paper-plane" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pause circle</div>
-                                <Icon icon="pause-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">People</div>
-                                <Icon icon="people" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Percent</div>
-                                <Icon icon="percent" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user add</div>
-                                <Icon icon="user-add" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user delete</div>
-                                <Icon icon="user-delete" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user done</div>
-                                <Icon icon="user-done" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user</div>
-                                <Icon icon="user" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user remove</div>
-                                <Icon icon="user-remove" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone call</div>
-                                <Icon icon="phone-call" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone missed</div>
-                                <Icon icon="phone-missed" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone off</div>
-                                <Icon icon="phone-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone</div>
-                                <Icon icon="phone" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pie chart</div>
-                                <Icon icon="pie-chart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pin</div>
-                                <Icon icon="pin" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Play circle</div>
-                                <Icon icon="play-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Plus circle</div>
-                                <Icon icon="plus-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Plus</div>
-                                <Icon icon="plus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Plus square</div>
-                                <Icon icon="plus-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Power</div>
-                                <Icon icon="power" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pricetags</div>
-                                <Icon icon="pricetags" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Printer</div>
-                                <Icon icon="printer" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Question mark circle</div>
-                                <Icon icon="question-mark-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Question mark</div>
-                                <Icon icon="question-mark" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Radio button off</div>
-                                <Icon icon="radio-button-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Radio button on</div>
-                                <Icon icon="radio-button-on" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Radio</div>
-                                <Icon icon="radio" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Recording</div>
-                                <Icon icon="recording" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Refresh</div>
-                                <Icon icon="refresh" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Repeat</div>
-                                <Icon icon="repeat" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Rewind left</div>
-                                <Icon icon="rewind-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Rewind right</div>
-                                <Icon icon="rewind-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Save</div>
-                                <Icon icon="save" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Scissors</div>
-                                <Icon icon="scissors" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Search</div>
-                                <Icon icon="search" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Settings 2</div>
-                                <Icon icon="settings-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Settings</div>
-                                <Icon icon="settings" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shake</div>
-                                <Icon icon="shake" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Share</div>
-                                <Icon icon="share" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shield off</div>
-                                <Icon icon="shield-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shield</div>
-                                <Icon icon="shield" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shopping bag</div>
-                                <Icon icon="shopping-bag" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shopping cart</div>
-                                <Icon icon="shopping-cart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shuffle 2</div>
-                                <Icon icon="shuffle-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shuffle</div>
-                                <Icon icon="shuffle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Step backwards</div>
-                                <Icon icon="step-backward" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Step forward</div>
-                                <Icon icon="step-forward" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Slash</div>
-                                <Icon icon="slash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Smartphone</div>
-                                <Icon icon="smartphone" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Smiling face</div>
-                                <Icon icon="smiling-face" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Speaker</div>
-                                <Icon icon="speaker" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Square</div>
-                                <Icon icon="square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Star</div>
-                                <Icon icon="star" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Stop circle</div>
-                                <Icon icon="stop-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sun</div>
-                                <Icon icon="sun" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Swap</div>
-                                <Icon icon="swap" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sync</div>
-                                <Icon icon="sync" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Text</div>
-                                <Icon icon="text" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Thermometer minus</div>
-                                <Icon icon="thermometer-minus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Thermometer</div>
-                                <Icon icon="thermometer" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Thermometer plus</div>
-                                <Icon icon="thermometer-plus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Toggle left</div>
-                                <Icon icon="toggle-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Toggle right</div>
-                                <Icon icon="toggle-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trash 2</div>
-                                <Icon icon="trash-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trash</div>
-                                <Icon icon="trash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trending down</div>
-                                <Icon icon="trending-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trending up</div>
-                                <Icon icon="trending-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Tv</div>
-                                <Icon icon="tv" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Twitter</div>
-                                <Icon icon="twitter" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Umbrella</div>
-                                <Icon icon="umbrella" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Undo</div>
-                                <Icon icon="undo" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Unlock</div>
-                                <Icon icon="unlock" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Upload</div>
-                                <Icon icon="upload" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Video off</div>
-                                <Icon icon="video-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Video</div>
-                                <Icon icon="video" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume down</div>
-                                <Icon icon="volume-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume mute</div>
-                                <Icon icon="volume-mute" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume off</div>
-                                <Icon icon="volume-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume up</div>
-                                <Icon icon="volume-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Wifi off</div>
-                                <Icon icon="wifi-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Wifi</div>
-                                <Icon icon="wifi" size={12}/>
-                            </Card.Content>
-                        </Card>
-                    </Grid>
-                </Row>
-            </Container>
-        </Page.Content>
+                                <FormGroup>
+                                    <h5>Valid input</h5>
+                                    <TextField
+                                        label="Valid input"
+                                        valid
+                                    />
+                                </FormGroup>
+                                <FormGroup>
+                                    <h5>Valid input</h5>
+                                    <SelectField
+                                        label="Valid input"
+                                        valid
+                                    >
+                                        <option value="b">A</option>
+                                        <option value="d">B</option>
+                                        <option value="e">C</option>
+                                        <option value="f">D</option>
+                                        <option value="g">E</option>
+                                    </SelectField>
+                                </FormGroup>
+                                <TestControllable/>
+                            </Card.Content>
+                        </Card>
+                    </Row>
+                    <Row className="mb-8">
+                        <Card>
+                            <Card.Header title="Tags"/>
+                            <Card.Content>
+                                <Tag className="mb-4" variant={Variant.PRIMARY}>Primary</Tag>
+                                <Tag variant={Variant.DANGER}>Danger</Tag>
+                                <Tag variant={Variant.RED}>Rood</Tag>
+                                <Tag variant={Variant.PINK}>Roze</Tag>
+                                <Tag variant={Variant.PURPLE}>Paars</Tag>
+                                <Tag variant={Variant.DEEP_PURPLE}>Diep-paars</Tag>
+                                <Tag variant={Variant.INDIGO}>Indigo</Tag>
+                                <Tag variant={Variant.BLUE}>Blauw</Tag>
+                                <Tag variant={Variant.LIGHT_BLUE}>Lichtblauw</Tag>
+                                <Tag variant={Variant.TEAL}>Teal</Tag>
+                                <Tag variant={Variant.GREEN}>Groen</Tag>
+                                <Tag variant={Variant.LIGHT_GREEN}>Lichtgroen</Tag>
+                                <Tag variant={Variant.LIME}>Limoen</Tag>
+                                <Tag variant={Variant.YELLOW}>Geel</Tag>
+                                <Tag variant={Variant.AMBER}>Amber</Tag>
+                                <Tag variant={Variant.ORANGE}>Oranje</Tag>
+                                <Tag variant={Variant.BROWN}>Bruin</Tag>
+                                <Tag variant={Variant.GRAY}>Grijs</Tag>
+                                <Tag variant={Variant.BLUE_GRAY}>Blauwgrijs</Tag>
+                            </Card.Content>
+                        </Card>
+                    </Row>
+                    <Row>
+                        <Grid columns={10} gap={4}>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Activity</div>
+                                    <Icon icon="activity" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Alert circle</div>
+                                    <Icon icon="alert-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Alert triangle</div>
+                                    <Icon icon="alert-triangle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Archive</div>
+                                    <Icon icon="archive" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow left</div>
+                                    <Icon icon="arrow-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow circle down</div>
+                                    <Icon icon="arrow-circle-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow circle left</div>
+                                    <Icon icon="arrow-circle-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow circle right</div>
+                                    <Icon icon="arrow-circle-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow circle up</div>
+                                    <Icon icon="arrow-circle-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort down</div>
+                                    <Icon icon="sort-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort down</div>
+                                    <Icon icon="arrow-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow right</div>
+                                    <Icon icon="arrow-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow alt left</div>
+                                    <Icon icon="arrow-alt-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow alt down</div>
+                                    <Icon icon="arrow-alt-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow alt right</div>
+                                    <Icon icon="arrow-alt-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow alt up</div>
+                                    <Icon icon="arrow-alt-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort left</div>
+                                    <Icon icon="sort-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort right</div>
+                                    <Icon icon="sort-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort up</div>
+                                    <Icon icon="sort-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow up</div>
+                                    <Icon icon="arrow-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">chevron-double down</div>
+                                    <Icon icon="chevron-double-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">chevron-double left</div>
+                                    <Icon icon="chevron-double-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">chevron-double right</div>
+                                    <Icon icon="chevron-double-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">chevron-double up</div>
+                                    <Icon icon="chevron-double-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">At</div>
+                                    <Icon icon="at" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Attach 2</div>
+                                    <Icon icon="attach-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Attach</div>
+                                    <Icon icon="attach" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Award</div>
+                                    <Icon icon="award" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Backspace</div>
+                                    <Icon icon="backspace" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bar chart 2</div>
+                                    <Icon icon="bar-chart-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bar chart</div>
+                                    <Icon icon="bar-chart" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Battery</div>
+                                    <Icon icon="battery" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Behance</div>
+                                    <Icon icon="behance" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bell off</div>
+                                    <Icon icon="bell-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bell</div>
+                                    <Icon icon="bell" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bluetooth</div>
+                                    <Icon icon="bluetooth" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Book open</div>
+                                    <Icon icon="book-open" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Book</div>
+                                    <Icon icon="book" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bookmark</div>
+                                    <Icon icon="bookmark" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Briefcase</div>
+                                    <Icon icon="briefcase" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Browser</div>
+                                    <Icon icon="browser" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Brush</div>
+                                    <Icon icon="brush" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bulb</div>
+                                    <Icon icon="bulb" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Calendar</div>
+                                    <Icon icon="calendar" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Camera</div>
+                                    <Icon icon="camera" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Car</div>
+                                    <Icon icon="car" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Cast</div>
+                                    <Icon icon="cast" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Charging</div>
+                                    <Icon icon="charging" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark circle 2</div>
+                                    <Icon icon="checkmark-circle-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark circle</div>
+                                    <Icon icon="checkmark-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark</div>
+                                    <Icon icon="checkmark" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark square 2</div>
+                                    <Icon icon="checkmark-square-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark square</div>
+                                    <Icon icon="checkmark-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Chevron down</div>
+                                    <Icon icon="chevron-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Chevron left</div>
+                                    <Icon icon="chevron-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Chevron right</div>
+                                    <Icon icon="chevron-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Chevron up</div>
+                                    <Icon icon="chevron-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Clipboard</div>
+                                    <Icon icon="clipboard" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Clock</div>
+                                    <Icon icon="clock" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Close circle</div>
+                                    <Icon icon="close-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Close</div>
+                                    <Icon icon="close" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Close square</div>
+                                    <Icon icon="close-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Cloud download</div>
+                                    <Icon icon="cloud-download" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Cloud upload</div>
+                                    <Icon icon="cloud-upload" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Code download</div>
+                                    <Icon icon="code-download" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Code</div>
+                                    <Icon icon="code" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Collapse</div>
+                                    <Icon icon="collapse" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Color palette</div>
+                                    <Icon icon="color-palette" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Color picker</div>
+                                    <Icon icon="color-picker" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Compass</div>
+                                    <Icon icon="compass" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Copy</div>
+                                    <Icon icon="copy" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner down left</div>
+                                    <Icon icon="corner-down-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner down right</div>
+                                    <Icon icon="corner-down-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner left down</div>
+                                    <Icon icon="corner-left-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner left up</div>
+                                    <Icon icon="corner-left-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner right down</div>
+                                    <Icon icon="corner-right-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner right up</div>
+                                    <Icon icon="corner-right-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner up left</div>
+                                    <Icon icon="corner-up-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner up right</div>
+                                    <Icon icon="corner-up-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Credit card</div>
+                                    <Icon icon="credit-card" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Crop</div>
+                                    <Icon icon="crop" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Cube</div>
+                                    <Icon icon="cube" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Diagonal arrow left down</div>
+                                    <Icon icon="diagonal-arrow-left-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Diagonal arrow left up</div>
+                                    <Icon icon="diagonal-arrow-left-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Diagonal arrow right down</div>
+                                    <Icon icon="diagonal-arrow-right-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Diagonal arrow right up</div>
+                                    <Icon icon="diagonal-arrow-right-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Done all</div>
+                                    <Icon icon="done-all" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Download</div>
+                                    <Icon icon="download" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Droplet off</div>
+                                    <Icon icon="droplet-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Droplet</div>
+                                    <Icon icon="droplet" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Edit 2</div>
+                                    <Icon icon="edit-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Edit</div>
+                                    <Icon icon="edit" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Email</div>
+                                    <Icon icon="email" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Expand</div>
+                                    <Icon icon="expand" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">External link</div>
+                                    <Icon icon="external-link" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Eye off 2</div>
+                                    <Icon icon="eye-off-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Eye off</div>
+                                    <Icon icon="eye-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Eye</div>
+                                    <Icon icon="eye" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Facebook</div>
+                                    <Icon icon="facebook" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">File add</div>
+                                    <Icon icon="file-add" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">File</div>
+                                    <Icon icon="file" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">File remove</div>
+                                    <Icon icon="file-remove" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">File text</div>
+                                    <Icon icon="file-text" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Film</div>
+                                    <Icon icon="film" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flag</div>
+                                    <Icon icon="flag" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flash off</div>
+                                    <Icon icon="flash-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flash</div>
+                                    <Icon icon="flash" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flip 2</div>
+                                    <Icon icon="flip-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flip</div>
+                                    <Icon icon="flip" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Folder add</div>
+                                    <Icon icon="folder-add" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Folder</div>
+                                    <Icon icon="folder" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Folder remove</div>
+                                    <Icon icon="folder-remove" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Funnel</div>
+                                    <Icon icon="funnel" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Gift</div>
+                                    <Icon icon="gift" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Github</div>
+                                    <Icon icon="github" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Globe 2</div>
+                                    <Icon icon="globe-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Globe</div>
+                                    <Icon icon="globe" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Google</div>
+                                    <Icon icon="google" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Grid</div>
+                                    <Icon icon="grid" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Hard drive</div>
+                                    <Icon icon="hard-drive" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Hash</div>
+                                    <Icon icon="hash" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Headphones</div>
+                                    <Icon icon="headphones" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Heart</div>
+                                    <Icon icon="heart" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Home</div>
+                                    <Icon icon="home" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Image</div>
+                                    <Icon icon="image" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Inbox</div>
+                                    <Icon icon="inbox" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Info</div>
+                                    <Icon icon="info" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Keypad</div>
+                                    <Icon icon="keypad" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Layers</div>
+                                    <Icon icon="layers" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Layout</div>
+                                    <Icon icon="layout" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Link 2</div>
+                                    <Icon icon="link-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Link</div>
+                                    <Icon icon="link" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Linkedin</div>
+                                    <Icon icon="linkedin" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">List</div>
+                                    <Icon icon="list" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Loader</div>
+                                    <Icon icon="loader" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Lock</div>
+                                    <Icon icon="lock" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Log in</div>
+                                    <Icon icon="log-in" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Log out</div>
+                                    <Icon icon="log-out" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Map</div>
+                                    <Icon icon="map" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Maximize</div>
+                                    <Icon icon="maximize" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Menu 2</div>
+                                    <Icon icon="menu-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Menu arrow</div>
+                                    <Icon icon="menu-arrow" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Menu</div>
+                                    <Icon icon="menu" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Message circle</div>
+                                    <Icon icon="message-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Message square</div>
+                                    <Icon icon="message-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Mic off</div>
+                                    <Icon icon="mic-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Mic</div>
+                                    <Icon icon="mic" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Minimize</div>
+                                    <Icon icon="minimize" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Minus circle</div>
+                                    <Icon icon="minus-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Minus</div>
+                                    <Icon icon="minus" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Minus square</div>
+                                    <Icon icon="minus-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Monitor</div>
+                                    <Icon icon="monitor" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Moon</div>
+                                    <Icon icon="moon" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">More horizontal</div>
+                                    <Icon icon="more-horizontal" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">More vertical</div>
+                                    <Icon icon="more-vertical" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Move</div>
+                                    <Icon icon="move" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Music</div>
+                                    <Icon icon="music" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Navigation 2</div>
+                                    <Icon icon="navigation-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Navigation</div>
+                                    <Icon icon="navigation" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Npm</div>
+                                    <Icon icon="npm" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Options 2</div>
+                                    <Icon icon="options-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Options</div>
+                                    <Icon icon="options" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pantone</div>
+                                    <Icon icon="pantone" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Paper plane</div>
+                                    <Icon icon="paper-plane" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pause circle</div>
+                                    <Icon icon="pause-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">People</div>
+                                    <Icon icon="people" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Percent</div>
+                                    <Icon icon="percent" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user add</div>
+                                    <Icon icon="user-add" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user delete</div>
+                                    <Icon icon="user-delete" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user done</div>
+                                    <Icon icon="user-done" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user</div>
+                                    <Icon icon="user" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user remove</div>
+                                    <Icon icon="user-remove" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Phone call</div>
+                                    <Icon icon="phone-call" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Phone missed</div>
+                                    <Icon icon="phone-missed" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Phone off</div>
+                                    <Icon icon="phone-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Phone</div>
+                                    <Icon icon="phone" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pie chart</div>
+                                    <Icon icon="pie-chart" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pin</div>
+                                    <Icon icon="pin" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Play circle</div>
+                                    <Icon icon="play-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Plus circle</div>
+                                    <Icon icon="plus-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Plus</div>
+                                    <Icon icon="plus" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Plus square</div>
+                                    <Icon icon="plus-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Power</div>
+                                    <Icon icon="power" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pricetags</div>
+                                    <Icon icon="pricetags" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Printer</div>
+                                    <Icon icon="printer" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Question mark circle</div>
+                                    <Icon icon="question-mark-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Question mark</div>
+                                    <Icon icon="question-mark" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Radio button off</div>
+                                    <Icon icon="radio-button-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Radio button on</div>
+                                    <Icon icon="radio-button-on" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Radio</div>
+                                    <Icon icon="radio" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Recording</div>
+                                    <Icon icon="recording" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Refresh</div>
+                                    <Icon icon="refresh" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Repeat</div>
+                                    <Icon icon="repeat" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Rewind left</div>
+                                    <Icon icon="rewind-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Rewind right</div>
+                                    <Icon icon="rewind-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Save</div>
+                                    <Icon icon="save" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Scissors</div>
+                                    <Icon icon="scissors" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Search</div>
+                                    <Icon icon="search" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Settings 2</div>
+                                    <Icon icon="settings-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Settings</div>
+                                    <Icon icon="settings" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shake</div>
+                                    <Icon icon="shake" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Share</div>
+                                    <Icon icon="share" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shield off</div>
+                                    <Icon icon="shield-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shield</div>
+                                    <Icon icon="shield" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shopping bag</div>
+                                    <Icon icon="shopping-bag" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shopping cart</div>
+                                    <Icon icon="shopping-cart" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shuffle 2</div>
+                                    <Icon icon="shuffle-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shuffle</div>
+                                    <Icon icon="shuffle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Step backwards</div>
+                                    <Icon icon="step-backward" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Step forward</div>
+                                    <Icon icon="step-forward" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Slash</div>
+                                    <Icon icon="slash" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Smartphone</div>
+                                    <Icon icon="smartphone" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Smiling face</div>
+                                    <Icon icon="smiling-face" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Speaker</div>
+                                    <Icon icon="speaker" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Square</div>
+                                    <Icon icon="square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Star</div>
+                                    <Icon icon="star" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Stop circle</div>
+                                    <Icon icon="stop-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sun</div>
+                                    <Icon icon="sun" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Swap</div>
+                                    <Icon icon="swap" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sync</div>
+                                    <Icon icon="sync" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Text</div>
+                                    <Icon icon="text" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Thermometer minus</div>
+                                    <Icon icon="thermometer-minus" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Thermometer</div>
+                                    <Icon icon="thermometer" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Thermometer plus</div>
+                                    <Icon icon="thermometer-plus" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Toggle left</div>
+                                    <Icon icon="toggle-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Toggle right</div>
+                                    <Icon icon="toggle-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Trash 2</div>
+                                    <Icon icon="trash-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Trash</div>
+                                    <Icon icon="trash" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Trending down</div>
+                                    <Icon icon="trending-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Trending up</div>
+                                    <Icon icon="trending-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Tv</div>
+                                    <Icon icon="tv" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Twitter</div>
+                                    <Icon icon="twitter" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Umbrella</div>
+                                    <Icon icon="umbrella" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Undo</div>
+                                    <Icon icon="undo" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Unlock</div>
+                                    <Icon icon="unlock" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Upload</div>
+                                    <Icon icon="upload" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Video off</div>
+                                    <Icon icon="video-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Video</div>
+                                    <Icon icon="video" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Volume down</div>
+                                    <Icon icon="volume-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Volume mute</div>
+                                    <Icon icon="volume-mute" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Volume off</div>
+                                    <Icon icon="volume-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Volume up</div>
+                                    <Icon icon="volume-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Wifi off</div>
+                                    <Icon icon="wifi-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Wifi</div>
+                                    <Icon icon="wifi" size={12}/>
+                                </Card.Content>
+                            </Card>
+                        </Grid>
+                    </Row>
+                </Container>
+            </Page.Content>
+        </Page.Main>
     </Page>,
     document.getElementById('root')
 );
diff --git a/www/webpack.config.js b/www/webpack.config.js
index fc6ec09..a84f9dd 100644
--- a/www/webpack.config.js
+++ b/www/webpack.config.js
@@ -71,7 +71,7 @@ module.exports = {
     mode: 'development',
     devServer: {
         host: 'localhost',
-        port: 3000,
+        port: 3333,
         open: true,
         historyApiFallback: true,
         publicPath: '/',