diff --git a/client/components/Heading.tsx b/client/components/Heading.tsx
index 3dd9647..0c6de4a 100644
--- a/client/components/Heading.tsx
+++ b/client/components/Heading.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-const Heading = ({ title }) => {
+interface HeadingProps {
+    title: string;
+}
+
+const Heading: React.FC<HeadingProps> = ({ title }) => {
     return (
         <div className="bt b--black-20 relative">
             <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>{title}</h3>
diff --git a/client/components/RelatedPatterns.tsx b/client/components/RelatedPatterns.tsx
index 0db9682..28de192 100644
--- a/client/components/RelatedPatterns.tsx
+++ b/client/components/RelatedPatterns.tsx
@@ -3,7 +3,11 @@ import React, { useEffect } from 'react';
 import CoverCard from './CoverCard';
 import Heading from './Heading';
 
-const RelatedPatterns = ({ patterns }) => {
+interface RelatedPatternsProps {
+    patterns: string[];
+}
+
+const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
     return (
         <section>
             <Heading title="Related patterns" />
diff --git a/client/components/SampleCode.tsx b/client/components/SampleCode.tsx
index d3991f1..f082e93 100644
--- a/client/components/SampleCode.tsx
+++ b/client/components/SampleCode.tsx
@@ -2,7 +2,12 @@ import React from 'react';
 
 import highlight from '../helpers/highlight';
 
-const SampleCode = ({ code, lang }) => {
+interface SampleCodeProps {
+    code: string;
+    lang: string;
+}
+
+const SampleCode: React.FC<SampleCodeProps> = ({ code, lang }) => {
     return code === ''
             ? <></>
             : (
diff --git a/client/helpers/highlight.ts b/client/helpers/highlight.ts
index d80bf36..6c0732b 100755
--- a/client/helpers/highlight.ts
+++ b/client/helpers/highlight.ts
@@ -3,7 +3,7 @@ import html from 'highlight.js/lib/languages/xml';
 
 hljs.registerLanguage('html', html);
 
-const highlight = (input, language) => {
+const highlight = (input: string, language: string) => {
     const lang = language || 'html';
     const { value } = hljs.highlight(lang, input);
     const highlighted = value.replace('&amp;', '&').trim();
diff --git a/client/helpers/random.ts b/client/helpers/random.ts
index 72658a7..cec9113 100644
--- a/client/helpers/random.ts
+++ b/client/helpers/random.ts
@@ -1,2 +1,3 @@
-const random = (min, max) => min + Math.round(Math.random() * (max - min));
+const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
+
 export default random;
diff --git a/client/helpers/randomFromArray.ts b/client/helpers/randomFromArray.ts
index 1ba00fd..ca7ba73 100644
--- a/client/helpers/randomFromArray.ts
+++ b/client/helpers/randomFromArray.ts
@@ -1,2 +1,3 @@
-const randomFromArray = (array) => array[Math.floor(Math.random() * array.length)];
+const randomFromArray = (array: number[]) => array[Math.floor(Math.random() * array.length)];
+
 export default randomFromArray;
diff --git a/client/helpers/shuffe.ts b/client/helpers/shuffe.ts
index 4572f5d..d87417d 100644
--- a/client/helpers/shuffe.ts
+++ b/client/helpers/shuffe.ts
@@ -1,4 +1,4 @@
-const shuffe = (array) => {
+const shuffe = (array: number[]) => {
     array.sort(() => Math.random() - 0.5);
     return array;
 };
diff --git a/client/helpers/slug.ts b/client/helpers/slug.ts
index 9ca612b..bbbcfa3 100644
--- a/client/helpers/slug.ts
+++ b/client/helpers/slug.ts
@@ -1,2 +1,3 @@
-const slug = item => item.toLowerCase().split(' ').join('-');
+const slug = (item: string) => item.toLowerCase().split(' ').join('-');
+
 export default slug;
diff --git a/client/hooks/useDocumentTitle.ts b/client/hooks/useDocumentTitle.ts
index 17066ee..00f730a 100644
--- a/client/hooks/useDocumentTitle.ts
+++ b/client/hooks/useDocumentTitle.ts
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-const useDocumentTitle = (title) => {
+const useDocumentTitle = (title: string) => {
     useEffect(() => {
         document.title = title;
     }, [title]);
diff --git a/client/hooks/useInterval.ts b/client/hooks/useInterval.ts
index cb441ad..5c057cd 100644
--- a/client/hooks/useInterval.ts
+++ b/client/hooks/useInterval.ts
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-const useInterval = (callback, delay) => {
+const useInterval = (callback: () => void, delay?: number) => {
     useEffect(
         () => {
             const handler = () => callback();
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index aecedb6..bae7ebc 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -4,7 +4,11 @@ import { Link } from 'react-router-dom';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from './Layout';
 
-const DetailsLayout = ({ title, children }) => {
+interface DetailsLayoutProps {
+    title: string;
+}
+
+const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
     useDocumentTitle(`CSS Layout ∙ ${title}`);
 
     return (
diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx
index 3b900e4..c7bf7c8 100644
--- a/client/layouts/Footer.tsx
+++ b/client/layouts/Footer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import Heading from '../components/Heading';
 
-const Footer = () => {
+const Footer: React.FC<{}> = () => {
     return (
         <div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
             <div className="br b--black-20" style={{ flex: 1 }}>
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
index fe0274f..9d99df5 100644
--- a/client/layouts/Layout.tsx
+++ b/client/layouts/Layout.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 
 import Footer from './Footer';
 
-const Layout = ({ children }) => {
+const Layout: React.FC<{}> = ({ children }) => {
     useEffect(() => {
         window.scrollTo(0, 0);
     }, []);
diff --git a/client/loaders/DetailsLoader.tsx b/client/loaders/DetailsLoader.tsx
index 5bddd06..7400c24 100644
--- a/client/loaders/DetailsLoader.tsx
+++ b/client/loaders/DetailsLoader.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
-import loadable from '@loadable/component';
+import loadable, { LoadableComponent } from '@loadable/component';
 
 import './spinner.css';
 
-const slug = item => item.toLowerCase().split(' ').join('-');
+interface DetailsLoaderProps {
+    pattern: string;
+}
+
+const slug = (item: string) => item.toLowerCase().split(' ').join('-');
 
 // In order to create a link to another page that is dynamically loaded (via <Link to="...">),
 // the page chunks have to be loadable by @loadable.
@@ -12,9 +16,9 @@ const slug = item => item.toLowerCase().split(' ').join('-');
 //  {
 //      "plugins": ["@loadable/babel-plugin"],
 //  }
-const loadDetails = /* #__LOADABLE__ */ (props) => import(`../patterns/${slug(props.pattern)}/Details`)
+const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`../patterns/${slug(props.pattern)}/Details`)
 
-const DetailsLoader = loadable(loadDetails, {
+const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
     fallback: (
         <div className="w100 h-100 flex items-center justify-center">
             <svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">
diff --git a/client/patterns/badge/Cover.tsx b/client/patterns/badge/Cover.tsx
index 0e94fc0..5da6a43 100644
--- a/client/patterns/badge/Cover.tsx
+++ b/client/patterns/badge/Cover.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
index 730ffb4..42e60b3 100644
--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Badge">
             <div className="ph4 pv5">
diff --git a/client/patterns/breadcrumb/Cover.tsx b/client/patterns/breadcrumb/Cover.tsx
index f1b9a99..6fdc55e 100644
--- a/client/patterns/breadcrumb/Cover.tsx
+++ b/client/patterns/breadcrumb/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/breadcrumb/Details.tsx b/client/patterns/breadcrumb/Details.tsx
index 37a271f..243caf0 100644
--- a/client/patterns/breadcrumb/Details.tsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Breadcrumb">
             <div className="ph4 pv5">
diff --git a/client/patterns/button-with-icon/Cover.tsx b/client/patterns/button-with-icon/Cover.tsx
index fc921d3..d89e5c1 100644
--- a/client/patterns/button-with-icon/Cover.tsx
+++ b/client/patterns/button-with-icon/Cover.tsx
@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
index e4251a1..2a7afb5 100644
--- a/client/patterns/button-with-icon/Details.tsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Button with icon">
             <div className="ph4 pv5">
diff --git a/client/patterns/card/Cover.tsx b/client/patterns/card/Cover.tsx
index c85e38c..e639d59 100644
--- a/client/patterns/card/Cover.tsx
+++ b/client/patterns/card/Cover.tsx
@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex flex-column h-100 pa2">
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index 2d78d1b..6f3b6bc 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Card">
             <div className="ph4 pv5">
diff --git a/client/patterns/centering/Cover.tsx b/client/patterns/centering/Cover.tsx
index 528259b..8a21955 100644
--- a/client/patterns/centering/Cover.tsx
+++ b/client/patterns/centering/Cover.tsx
@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
index c255b36..4138491 100644
--- a/client/patterns/centering/Details.tsx
+++ b/client/patterns/centering/Details.tsx
@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Centering">
             <div className="ph4 pv5">
diff --git a/client/patterns/docked-at-corner/Cover.tsx b/client/patterns/docked-at-corner/Cover.tsx
index 201832f..a6853c6 100644
--- a/client/patterns/docked-at-corner/Cover.tsx
+++ b/client/patterns/docked-at-corner/Cover.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/docked-at-corner/Details.tsx b/client/patterns/docked-at-corner/Details.tsx
index 15d24cc..e5da3ac 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -5,7 +5,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Docked at corner">
             <div className="ph4 pv5">
diff --git a/client/patterns/dot-navigation/Cover.tsx b/client/patterns/dot-navigation/Cover.tsx
index a9ed22e..1f4a0b9 100644
--- a/client/patterns/dot-navigation/Cover.tsx
+++ b/client/patterns/dot-navigation/Cover.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/dot-navigation/Details.tsx b/client/patterns/dot-navigation/Details.tsx
index 6db5a37..e5d0c54 100644
--- a/client/patterns/dot-navigation/Details.tsx
+++ b/client/patterns/dot-navigation/Details.tsx
@@ -3,10 +3,14 @@ import React, { useState } from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+interface DotProps {
+    index: number;
+}
+
+const Details: React.FC<{}> = () => {
     const [activeItem, setActiveItem] = useState(0);
 
-    const Dot = ({ index }) => {
+    const Dot: React.FC<DotProps> = ({ index }) => {
         const isActive = index === activeItem;
         const click = () => setActiveItem(index);
         return (
diff --git a/client/patterns/feature-list/Cover.tsx b/client/patterns/feature-list/Cover.tsx
index 83b971f..9e3d30f 100644
--- a/client/patterns/feature-list/Cover.tsx
+++ b/client/patterns/feature-list/Cover.tsx
@@ -5,7 +5,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex flex-column justify-center h-100 pa2 w-100">
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
index ac39a27..741bb22 100644
--- a/client/patterns/feature-list/Details.tsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Feature list">
             <div className="ph4 pv5">
diff --git a/client/patterns/fixed-at-corner/Cover.tsx b/client/patterns/fixed-at-corner/Cover.tsx
index 0857f72..bac55d4 100644
--- a/client/patterns/fixed-at-corner/Cover.tsx
+++ b/client/patterns/fixed-at-corner/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Triangle from '../../placeholders/Triangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="relative">
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index add55f1..b5fc633 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Fixed at corner">
             <div className="ph4 pv5">
diff --git a/client/patterns/holy-grail/Cover.tsx b/client/patterns/holy-grail/Cover.tsx
index 1c4efe5..074b849 100644
--- a/client/patterns/holy-grail/Cover.tsx
+++ b/client/patterns/holy-grail/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column">
diff --git a/client/patterns/holy-grail/Details.tsx b/client/patterns/holy-grail/Details.tsx
index 9ee05fc..ce4dc54 100644
--- a/client/patterns/holy-grail/Details.tsx
+++ b/client/patterns/holy-grail/Details.tsx
@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Holy grail">
             <div className="ph4 pv5">
diff --git a/client/patterns/input-add-on/Cover.tsx b/client/patterns/input-add-on/Cover.tsx
index 1925a65..a0dd9ca 100644
--- a/client/patterns/input-add-on/Cover.tsx
+++ b/client/patterns/input-add-on/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex items-center justify-center pa2">
diff --git a/client/patterns/input-add-on/Details.tsx b/client/patterns/input-add-on/Details.tsx
index 2d26f7f..06d7261 100644
--- a/client/patterns/input-add-on/Details.tsx
+++ b/client/patterns/input-add-on/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Input add-on">
             <div className="ph4 pv5">
diff --git a/client/patterns/media-object/Cover.tsx b/client/patterns/media-object/Cover.tsx
index 44e203b..b54b867 100644
--- a/client/patterns/media-object/Cover.tsx
+++ b/client/patterns/media-object/Cover.tsx
@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Square from '../../placeholders/Square';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex h-100 items-start pa2 w-100">
diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx
index d431278..f23c220 100644
--- a/client/patterns/media-object/Details.tsx
+++ b/client/patterns/media-object/Details.tsx
@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import Square from '../../placeholders/Square';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Media object">
             <div className="ph4 pv5">
diff --git a/client/patterns/menu/Cover.tsx b/client/patterns/menu/Cover.tsx
index d585df9..841c9b4 100644
--- a/client/patterns/menu/Cover.tsx
+++ b/client/patterns/menu/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa3">
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
index bb5ad21..3583c44 100644
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Menu">
             <div className="ph4 pv5">
diff --git a/client/patterns/modal/Cover.tsx b/client/patterns/modal/Cover.tsx
index f4c4c5e..e2faccc 100644
--- a/client/patterns/modal/Cover.tsx
+++ b/client/patterns/modal/Cover.tsx
@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex flex-column h-100 items-center justify-center pa3">
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
index 3e4bf66..81c2032 100644
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Modal">
             <div className="ph4 pv5">
diff --git a/client/patterns/notification/Cover.tsx b/client/patterns/notification/Cover.tsx
index 9d5975a..48a12f1 100644
--- a/client/patterns/notification/Cover.tsx
+++ b/client/patterns/notification/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
index 8065ffc..a89f39c 100644
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Notification">
             <div className="ph4 pv5">
diff --git a/client/patterns/pagination/Cover.tsx b/client/patterns/pagination/Cover.tsx
index 522029d..18ef6df 100644
--- a/client/patterns/pagination/Cover.tsx
+++ b/client/patterns/pagination/Cover.tsx
@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
diff --git a/client/patterns/pagination/Details.tsx b/client/patterns/pagination/Details.tsx
index a1fade8..c457dfe 100644
--- a/client/patterns/pagination/Details.tsx
+++ b/client/patterns/pagination/Details.tsx
@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pagination">
             <div className="ph4 pv5">
diff --git a/client/patterns/previous-next-buttons/Cover.tsx b/client/patterns/previous-next-buttons/Cover.tsx
index 7f76b8b..ce863f2 100644
--- a/client/patterns/previous-next-buttons/Cover.tsx
+++ b/client/patterns/previous-next-buttons/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/previous-next-buttons/Details.tsx b/client/patterns/previous-next-buttons/Details.tsx
index 95323a3..fa57fc3 100644
--- a/client/patterns/previous-next-buttons/Details.tsx
+++ b/client/patterns/previous-next-buttons/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Previous and next buttons">
             <div className="ph4 pv5">
diff --git a/client/patterns/pricing-table/Cover.tsx b/client/patterns/pricing-table/Cover.tsx
index 1c25298..c065b09 100644
--- a/client/patterns/pricing-table/Cover.tsx
+++ b/client/patterns/pricing-table/Cover.tsx
@@ -5,7 +5,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex items-center justify-center ph2">
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index ed0e32f..b5c1c30 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -6,7 +6,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pricing table">
             <div className="ph4 pv5">
diff --git a/client/patterns/progress-bar/Cover.tsx b/client/patterns/progress-bar/Cover.tsx
index 4c47898..cb1ac32 100644
--- a/client/patterns/progress-bar/Cover.tsx
+++ b/client/patterns/progress-bar/Cover.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx
index fb13a36..92b2b83 100644
--- a/client/patterns/progress-bar/Details.tsx
+++ b/client/patterns/progress-bar/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import useInterval from '../../hooks/useInterval';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [progress, setProgress] = useState(0);
     useInterval(() => {
         setProgress(v => v === 100 ? 0 : v + 1);
diff --git a/client/patterns/questions-and-answers/Cover.tsx b/client/patterns/questions-and-answers/Cover.tsx
index de4f8ab..3b55282 100644
--- a/client/patterns/questions-and-answers/Cover.tsx
+++ b/client/patterns/questions-and-answers/Cover.tsx
@@ -5,7 +5,7 @@ import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 import Triangle from '../../placeholders/Triangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
index 3eb2998..938ad6f 100644
--- a/client/patterns/questions-and-answers/Details.tsx
+++ b/client/patterns/questions-and-answers/Details.tsx
@@ -6,10 +6,15 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 import Triangle from '../../placeholders/Triangle';
 
-const Details = () => {
+interface ItemProps {
+    index: number;
+    title: React.ReactNode;
+}
+
+const Details: React.FC<{}> = () => {
     const [activeItem, setActiveItem] = useState(-1);
 
-    const Item = ({ index, title, children }) => {
+    const Item: React.FC<ItemProps> = ({ index, title, children }) => {
         const isOpened = (index === activeItem);
         const click = () => setActiveItem(isOpened ? -1 : index);
         return (
diff --git a/client/patterns/radio-switch/Cover.tsx b/client/patterns/radio-switch/Cover.tsx
index f845219..f187bee 100644
--- a/client/patterns/radio-switch/Cover.tsx
+++ b/client/patterns/radio-switch/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index f587d88..3f1329d 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -5,7 +5,7 @@ import RelatedPatterns from '../../components/RelatedPatterns';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [isFirstChecked, setFirstChecked] = useState(false);
     const toggle = () => setFirstChecked(c => !c);
 
diff --git a/client/patterns/same-height-columns/Cover.tsx b/client/patterns/same-height-columns/Cover.tsx
index 2bd6b22..8dc38f1 100644
--- a/client/patterns/same-height-columns/Cover.tsx
+++ b/client/patterns/same-height-columns/Cover.tsx
@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Square from '../../placeholders/Square';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="flex h-100 pa2">
diff --git a/client/patterns/same-height-columns/Details.tsx b/client/patterns/same-height-columns/Details.tsx
index 147ca60..70bbb17 100644
--- a/client/patterns/same-height-columns/Details.tsx
+++ b/client/patterns/same-height-columns/Details.tsx
@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Same height columns">
             <div className="ph4 pv5">
diff --git a/client/patterns/search-box/Cover.tsx b/client/patterns/search-box/Cover.tsx
index 39e13e6..9b1e653 100644
--- a/client/patterns/search-box/Cover.tsx
+++ b/client/patterns/search-box/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
diff --git a/client/patterns/search-box/Details.tsx b/client/patterns/search-box/Details.tsx
index 3be9ded..6892dc2 100644
--- a/client/patterns/search-box/Details.tsx
+++ b/client/patterns/search-box/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Search box">
             <div className="ph4 pv5">
diff --git a/client/patterns/separator/Cover.tsx b/client/patterns/separator/Cover.tsx
index cb231aa..79de80b 100644
--- a/client/patterns/separator/Cover.tsx
+++ b/client/patterns/separator/Cover.tsx
@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/separator/Details.tsx b/client/patterns/separator/Details.tsx
index f919fe0..54a3e6c 100644
--- a/client/patterns/separator/Details.tsx
+++ b/client/patterns/separator/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Separator">
             <div className="ph4 pv5">
diff --git a/client/patterns/sidebar/Cover.tsx b/client/patterns/sidebar/Cover.tsx
index 994889c..5b6d141 100644
--- a/client/patterns/sidebar/Cover.tsx
+++ b/client/patterns/sidebar/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex">
diff --git a/client/patterns/sidebar/Details.tsx b/client/patterns/sidebar/Details.tsx
index 7598d6e..641e115 100644
--- a/client/patterns/sidebar/Details.tsx
+++ b/client/patterns/sidebar/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sidebar">
             <div className="ph4 pv5">
diff --git a/client/patterns/simple-grid/Cover.tsx b/client/patterns/simple-grid/Cover.tsx
index 3789dfe..42c98c4 100644
--- a/client/patterns/simple-grid/Cover.tsx
+++ b/client/patterns/simple-grid/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/simple-grid/Details.tsx b/client/patterns/simple-grid/Details.tsx
index a9c901b..1796bd7 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Simple grid">
             <div className="ph4 pv5">
diff --git a/client/patterns/slider/Cover.tsx b/client/patterns/slider/Cover.tsx
index e7bc561..8398737 100644
--- a/client/patterns/slider/Cover.tsx
+++ b/client/patterns/slider/Cover.tsx
@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/slider/Details.tsx b/client/patterns/slider/Details.tsx
index 749d00a..3f8317a 100644
--- a/client/patterns/slider/Details.tsx
+++ b/client/patterns/slider/Details.tsx
@@ -5,7 +5,7 @@ import Circle from '../../placeholders/Circle';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Slider">
             <div className="ph4 pv5">
diff --git a/client/patterns/split-navigation/Cover.tsx b/client/patterns/split-navigation/Cover.tsx
index c5fdf44..ce22cf3 100644
--- a/client/patterns/split-navigation/Cover.tsx
+++ b/client/patterns/split-navigation/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/split-navigation/Details.tsx b/client/patterns/split-navigation/Details.tsx
index 6eafa9d..20ed21d 100644
--- a/client/patterns/split-navigation/Details.tsx
+++ b/client/patterns/split-navigation/Details.tsx
@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Split navigation">
             <div className="ph4 pv5">
diff --git a/client/patterns/split-screen/Cover.tsx b/client/patterns/split-screen/Cover.tsx
index d31076e..38f1257 100644
--- a/client/patterns/split-screen/Cover.tsx
+++ b/client/patterns/split-screen/Cover.tsx
@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex">
diff --git a/client/patterns/split-screen/Details.tsx b/client/patterns/split-screen/Details.tsx
index f2d6d45..2f897fd 100644
--- a/client/patterns/split-screen/Details.tsx
+++ b/client/patterns/split-screen/Details.tsx
@@ -6,7 +6,7 @@ import Block from '../../placeholders/Block';
 import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Split screen">
             <div className="ph4 pv5">
diff --git a/client/patterns/stepper-input/Cover.tsx b/client/patterns/stepper-input/Cover.tsx
index 821ab96..8f289ee 100644
--- a/client/patterns/stepper-input/Cover.tsx
+++ b/client/patterns/stepper-input/Cover.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex items-center justify-center pa2">
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
index 466d18b..facb12e 100644
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -4,11 +4,11 @@ import { Link } from 'react-router-dom';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [value, setValue] = useState(0);
     const decrease = () => setValue(value - 1);
     const increase = () => setValue(value + 1);
-    const change = (e) => setValue(parseInt(e.target.value, 10));
+    const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
 
     return (
         <DetailsLayout title="Stepper input">
diff --git a/client/patterns/sticky-footer/Cover.tsx b/client/patterns/sticky-footer/Cover.tsx
index 88ddded..9c97e3c 100644
--- a/client/patterns/sticky-footer/Cover.tsx
+++ b/client/patterns/sticky-footer/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column">
diff --git a/client/patterns/sticky-footer/Details.tsx b/client/patterns/sticky-footer/Details.tsx
index 47fdd9e..f1a1e35 100644
--- a/client/patterns/sticky-footer/Details.tsx
+++ b/client/patterns/sticky-footer/Details.tsx
@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky footer">
             <div className="ph4 pv5">
diff --git a/client/patterns/sticky-header/Cover.tsx b/client/patterns/sticky-header/Cover.tsx
index 4a3341e..fee6f4b 100644
--- a/client/patterns/sticky-header/Cover.tsx
+++ b/client/patterns/sticky-header/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column">
diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx
index d629729..f2bb73b 100644
--- a/client/patterns/sticky-header/Details.tsx
+++ b/client/patterns/sticky-header/Details.tsx
@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky header">
             <div className="ph4 pv5">
diff --git a/client/patterns/switch/Cover.tsx b/client/patterns/switch/Cover.tsx
index 62c8203..008da00 100644
--- a/client/patterns/switch/Cover.tsx
+++ b/client/patterns/switch/Cover.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
index e71f239..b769cd7 100644
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -4,7 +4,7 @@ import RelatedPatterns from '../../components/RelatedPatterns';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [checked, setChecked] = useState(false);
     const toggle = () => setChecked(c => !c);
 
diff --git a/client/patterns/tab/Cover.tsx b/client/patterns/tab/Cover.tsx
index 3a9c7d8..4e7097b 100644
--- a/client/patterns/tab/Cover.tsx
+++ b/client/patterns/tab/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx
index 36713a0..449c8cc 100644
--- a/client/patterns/tab/Details.tsx
+++ b/client/patterns/tab/Details.tsx
@@ -4,10 +4,14 @@ import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+interface TabProps {
+    tabIndex: number;
+}
+
+const Details: React.FC<{}> = () => {
     const [activeTab, setActiveTab] = useState(0);
 
-    const Tab = ({ tabIndex, children }) => {
+    const Tab: React.FC<TabProps> = ({ tabIndex, children }) => {
         const isActive = tabIndex === activeTab;
         const click = () => setActiveTab(tabIndex);
         return (
diff --git a/client/patterns/toggle-password-visibility/Cover.tsx b/client/patterns/toggle-password-visibility/Cover.tsx
index 51fe665..7eee841 100644
--- a/client/patterns/toggle-password-visibility/Cover.tsx
+++ b/client/patterns/toggle-password-visibility/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
diff --git a/client/patterns/toggle-password-visibility/Details.tsx b/client/patterns/toggle-password-visibility/Details.tsx
index 299189b..1b5c821 100644
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     const [visible, setVisible] = useState(false);
     const toggle = () => setVisible(v => !v);
 
diff --git a/client/patterns/wizard/Cover.tsx b/client/patterns/wizard/Cover.tsx
index 4b18390..a399984 100644
--- a/client/patterns/wizard/Cover.tsx
+++ b/client/patterns/wizard/Cover.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
-const Cover = () => {
+const Cover: React.FC<{}> = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx
index b1e771c..e1f03f5 100644
--- a/client/patterns/wizard/Details.tsx
+++ b/client/patterns/wizard/Details.tsx
@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 import Circle from '../../placeholders/Circle';
 import Line from '../../placeholders/Line';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Wizard">
             <div className="ph4 pv5">
diff --git a/package-lock.json b/package-lock.json
index 1fd05e3..46f6e03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1977,6 +1977,21 @@
                 "@types/node": "*"
             }
         },
+        "@types/highlight.js": {
+            "version": "9.12.3",
+            "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-9.12.3.tgz",
+            "integrity": "sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ==",
+            "dev": true
+        },
+        "@types/highlightjs": {
+            "version": "9.12.0",
+            "resolved": "https://registry.npmjs.org/@types/highlightjs/-/highlightjs-9.12.0.tgz",
+            "integrity": "sha512-MmUcjkDtCBfx2BPeLLTtJ5mFmGgWk9nAgZmNesixaGHOr0tCecsTU2iUgYvhRsWJSts2WbcpAtVPuIzZ0ybJ1A==",
+            "dev": true,
+            "requires": {
+                "@types/highlight.js": "*"
+            }
+        },
         "@types/history": {
             "version": "4.7.3",
             "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.3.tgz",
diff --git a/package.json b/package.json
index a554f8a..eea9ac5 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
         "@babel/preset-env": "^7.7.4",
         "@babel/preset-react": "^7.7.4",
         "@loadable/babel-plugin": "^5.10.3",
+        "@types/highlightjs": "^9.12.0",
         "@types/loadable__component": "^5.10.0",
         "@types/react": "^16.9.13",
         "@types/react-dom": "^16.9.4",