diff --git a/.gitignore b/.gitignore
index 506e98f..f007ff9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .netlify
 dist
-node_modules
\ No newline at end of file
+node_modules
+tslint.log
\ No newline at end of file
diff --git a/client/App.jsx b/client/App.tsx
similarity index 95%
rename from client/App.jsx
rename to client/App.tsx
index 48af5e8..cc794b6 100644
--- a/client/App.jsx
+++ b/client/App.tsx
@@ -27,10 +27,14 @@ const App = () => {
                 <Route exact={true} path='/modal'><DetailsLoader pattern="Modal" /></Route>
                 <Route exact={true} path='/notification'><DetailsLoader pattern="Notification" /></Route>
                 <Route exact={true} path='/pagination'><DetailsLoader pattern="Pagination" /></Route>
-                <Route exact={true} path='/previous-next-buttons'><DetailsLoader pattern="Previous next buttons" /></Route>
+                <Route exact={true} path='/previous-next-buttons'>
+                    <DetailsLoader pattern="Previous next buttons" />
+                </Route>
                 <Route exact={true} path='/pricing-table'><DetailsLoader pattern="Pricing table" /></Route>
                 <Route exact={true} path='/progress-bar'><DetailsLoader pattern="Progress bar" /></Route>
-                <Route exact={true} path='/questions-and-answers'><DetailsLoader pattern="Questions and answers" /></Route>
+                <Route exact={true} path='/questions-and-answers'>
+                    <DetailsLoader pattern="Questions and answers" />
+                </Route>
                 <Route exact={true} path='/radio-switch'><DetailsLoader pattern="Radio switch" /></Route>
                 <Route exact={true} path='/same-height-columns'><DetailsLoader pattern="Same height columns" /></Route>
                 <Route exact={true} path='/search-box'><DetailsLoader pattern="Search box" /></Route>
diff --git a/client/Home.jsx b/client/Home.tsx
similarity index 90%
rename from client/Home.jsx
rename to client/Home.tsx
index e50ce88..06d6128 100644
--- a/client/Home.jsx
+++ b/client/Home.tsx
@@ -12,9 +12,16 @@ const Home = () => {
         <Layout>
             <div className="mt5 bl br bt b--black-20 br4 br--top">
                 <div className="relative">
-                    <h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>CSS Layout</h1>
+                    <h1
+                        className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue"
+                        style={{ left: '50%', transform: 'translate(-50%, -50%)' }}
+                    >
+                        CSS Layout
+                    </h1>
 
-                    <h2 className="fw3 f3 tc lh-copy ma0 pa4">a collection of popular layouts and patterns made with CSS</h2>
+                    <h2 className="fw3 f3 tc lh-copy ma0 pa4">
+                        a collection of popular layouts and patterns made with CSS
+                    </h2>
 
                     <div className="w-30 center mb4">
                         <ul className="ma0 pa0 list f4 lh-copy">
diff --git a/client/components/CoverCard.jsx b/client/components/CoverCard.tsx
similarity index 83%
rename from client/components/CoverCard.jsx
rename to client/components/CoverCard.tsx
index b84ef7c..651aabd 100644
--- a/client/components/CoverCard.jsx
+++ b/client/components/CoverCard.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import CoverLoader from '../loaders/CoverLoader';
 import slug from '../helpers/slug';
+import CoverLoader from '../loaders/CoverLoader';
 
-const CoverCard = ({ pattern }) => {
+interface CoverCardProps {
+    pattern: string;
+}
+
+const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
     return (
         <div className="pa1 w-20">
             <Link
diff --git a/client/components/Heading.jsx b/client/components/Heading.tsx
similarity index 72%
rename from client/components/Heading.jsx
rename to client/components/Heading.tsx
index 3dd9647..0c6de4a 100644
--- a/client/components/Heading.jsx
+++ 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.jsx b/client/components/RelatedPatterns.tsx
similarity index 61%
rename from client/components/RelatedPatterns.jsx
rename to client/components/RelatedPatterns.tsx
index 0db9682..06eb348 100644
--- a/client/components/RelatedPatterns.jsx
+++ b/client/components/RelatedPatterns.tsx
@@ -3,14 +3,18 @@ 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" />
 
             <div className="flex flex-wrap items-start pa4">
                 {
-                    patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
+                    patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
                 }
             </div>
         </section>
diff --git a/client/components/SampleCode.jsx b/client/components/SampleCode.tsx
similarity index 68%
rename from client/components/SampleCode.jsx
rename to client/components/SampleCode.tsx
index d3991f1..f082e93 100644
--- a/client/components/SampleCode.jsx
+++ 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.js b/client/helpers/highlight.ts
similarity index 58%
rename from client/helpers/highlight.js
rename to client/helpers/highlight.ts
index d80bf36..81a56a6 100755
--- a/client/helpers/highlight.js
+++ b/client/helpers/highlight.ts
@@ -1,9 +1,9 @@
-import hljs from 'highlight.js/lib/highlight';
-import html from 'highlight.js/lib/languages/xml';
+import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
+import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
 
 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.js b/client/helpers/random.js
deleted file mode 100644
index 72658a7..0000000
--- a/client/helpers/random.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const random = (min, max) => min + Math.round(Math.random() * (max - min));
-export default random;
diff --git a/client/helpers/random.ts b/client/helpers/random.ts
new file mode 100644
index 0000000..cec9113
--- /dev/null
+++ b/client/helpers/random.ts
@@ -0,0 +1,3 @@
+const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
+
+export default random;
diff --git a/client/helpers/randomFromArray.js b/client/helpers/randomFromArray.js
deleted file mode 100644
index 1ba00fd..0000000
--- a/client/helpers/randomFromArray.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const randomFromArray = (array) => array[Math.floor(Math.random() * array.length)];
-export default randomFromArray;
diff --git a/client/helpers/randomFromArray.ts b/client/helpers/randomFromArray.ts
new file mode 100644
index 0000000..ca7ba73
--- /dev/null
+++ b/client/helpers/randomFromArray.ts
@@ -0,0 +1,3 @@
+const randomFromArray = (array: number[]) => array[Math.floor(Math.random() * array.length)];
+
+export default randomFromArray;
diff --git a/client/helpers/shuffe.js b/client/helpers/shuffe.ts
similarity index 69%
rename from client/helpers/shuffe.js
rename to client/helpers/shuffe.ts
index 4572f5d..d87417d 100644
--- a/client/helpers/shuffe.js
+++ 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.js b/client/helpers/slug.js
deleted file mode 100644
index 9ca612b..0000000
--- a/client/helpers/slug.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const slug = item => item.toLowerCase().split(' ').join('-');
-export default slug;
diff --git a/client/helpers/slug.ts b/client/helpers/slug.ts
new file mode 100644
index 0000000..bbbcfa3
--- /dev/null
+++ b/client/helpers/slug.ts
@@ -0,0 +1,3 @@
+const slug = (item: string) => item.toLowerCase().split(' ').join('-');
+
+export default slug;
diff --git a/client/hooks/useDocumentTitle.js b/client/hooks/useDocumentTitle.ts
similarity index 75%
rename from client/hooks/useDocumentTitle.js
rename to client/hooks/useDocumentTitle.ts
index 17066ee..00f730a 100644
--- a/client/hooks/useDocumentTitle.js
+++ 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.js b/client/hooks/useInterval.ts
similarity index 79%
rename from client/hooks/useInterval.js
rename to client/hooks/useInterval.ts
index cb441ad..05a93dc 100644
--- a/client/hooks/useInterval.js
+++ 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();
@@ -9,7 +9,7 @@ const useInterval = (callback, delay) => {
                 return () => clearInterval(id);
             }
         },
-        [delay]
+        [delay],
     );
 };
 
diff --git a/client/index.jsx b/client/index.tsx
similarity index 100%
rename from client/index.jsx
rename to client/index.tsx
diff --git a/client/layouts/DetailsLayout.jsx b/client/layouts/DetailsLayout.tsx
similarity index 84%
rename from client/layouts/DetailsLayout.jsx
rename to client/layouts/DetailsLayout.tsx
index aecedb6..bae7ebc 100644
--- a/client/layouts/DetailsLayout.jsx
+++ 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.jsx b/client/layouts/Footer.tsx
similarity index 88%
rename from client/layouts/Footer.jsx
rename to client/layouts/Footer.tsx
index 3b900e4..bf9882a 100644
--- a/client/layouts/Footer.jsx
+++ 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 }}>
@@ -35,7 +35,10 @@ const Footer = () => {
                     <ul className="list ma0 pa0 lh-copy fw5">
                         <li className="mb1">
                             <a href="https://twitter.com/nghuuphuoc" className="link flex items-center">
-                                <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                <span
+                                    className="bg-black-40 br-pill flex items-center justify-center mr2"
+                                    style={{ height: '24px', width: '24px' }}
+                                >
                                     <svg
                                         viewBox="0 0 24 24"
                                         className="w-60 h-60"
@@ -55,7 +58,10 @@ const Footer = () => {
                         </li>
                         <li className="mb1">
                             <a href="mailto: me@phuoc.ng" className="link flex items-center">
-                                <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                <span
+                                    className="bg-black-40 br-pill flex items-center justify-center mr2"
+                                    style={{ height: '24px', width: '24px' }}
+                                >
                                     <svg
                                         viewBox="0 0 24 24"
                                         className="w-60 h-60"
@@ -75,7 +81,10 @@ const Footer = () => {
                         </li>
                         <li className="mb1">
                             <a href="https://github.com/phuoc-ng/csslayout" className="link flex items-center">
-                                <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                <span
+                                    className="bg-black-40 br-pill flex items-center justify-center mr2"
+                                    style={{ height: '24px', width: '24px' }}
+                                >
                                     <svg
                                         viewBox="0 0 24 24"
                                         className="w-60 h-60"
diff --git a/client/layouts/Layout.jsx b/client/layouts/Layout.tsx
similarity index 85%
rename from client/layouts/Layout.jsx
rename to client/layouts/Layout.tsx
index fe0274f..9d99df5 100644
--- a/client/layouts/Layout.jsx
+++ 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/CoverLoader.jsx b/client/loaders/CoverLoader.jsx
deleted file mode 100644
index 8bd2e43..0000000
--- a/client/loaders/CoverLoader.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import loadable from '@loadable/component';
-
-//import slug from './helpers/slug';
-const slug = item => item.toLowerCase().split(' ').join('-');
-
-const CoverLoader = loadable(props => import(`../patterns/${slug(props.pattern)}/Cover`));
-
-export default CoverLoader;
diff --git a/client/loaders/CoverLoader.tsx b/client/loaders/CoverLoader.tsx
new file mode 100644
index 0000000..0a5eac4
--- /dev/null
+++ b/client/loaders/CoverLoader.tsx
@@ -0,0 +1,11 @@
+import loadable, { LoadableComponent } from '@loadable/component';
+
+interface CoverLoaderProps {
+    pattern: string;
+}
+
+const slug = (item: string) => item.toLowerCase().split(' ').join('-');
+
+const CoverLoader: LoadableComponent<CoverLoaderProps> = loadable((props: CoverLoaderProps) => import(`../patterns/${slug(props.pattern)}/Cover`));
+
+export default CoverLoader;
diff --git a/client/loaders/DetailsLoader.jsx b/client/loaders/DetailsLoader.tsx
similarity index 70%
rename from client/loaders/DetailsLoader.jsx
rename to client/loaders/DetailsLoader.tsx
index 5bddd06..751fb90 100644
--- a/client/loaders/DetailsLoader.jsx
+++ b/client/loaders/DetailsLoader.tsx
@@ -1,9 +1,13 @@
+import loadable, { LoadableComponent } from '@loadable/component';
 import React from 'react';
-import loadable 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">
@@ -30,7 +34,7 @@ const DetailsLoader = loadable(loadDetails, {
                 />
             </svg>
         </div>
-    )
+    ),
 });
 
 export default DetailsLoader;
diff --git a/client/patterns/badge/Cover.jsx b/client/patterns/badge/Cover.tsx
similarity index 91%
rename from client/patterns/badge/Cover.jsx
rename to client/patterns/badge/Cover.tsx
index 0e94fc0..5da6a43 100644
--- a/client/patterns/badge/Cover.jsx
+++ 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.jsx b/client/patterns/badge/Details.tsx
similarity index 91%
rename from client/patterns/badge/Details.jsx
rename to client/patterns/badge/Details.tsx
index 730ffb4..06f7957 100644
--- a/client/patterns/badge/Details.jsx
+++ b/client/patterns/badge/Details.tsx
@@ -3,18 +3,18 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2 f4">
                                 1
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered */
diff --git a/client/patterns/breadcrumb/Cover.jsx b/client/patterns/breadcrumb/Cover.tsx
similarity index 95%
rename from client/patterns/breadcrumb/Cover.jsx
rename to client/patterns/breadcrumb/Cover.tsx
index f1b9a99..6fdc55e 100644
--- a/client/patterns/breadcrumb/Cover.jsx
+++ 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.jsx b/client/patterns/breadcrumb/Details.tsx
similarity index 94%
rename from client/patterns/breadcrumb/Details.jsx
rename to client/patterns/breadcrumb/Details.tsx
index 37a271f..d895088 100644
--- a/client/patterns/breadcrumb/Details.jsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -4,12 +4,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex items-center">
                                 <div className="w4"><Rectangle height={16} /></div>
@@ -21,7 +21,7 @@ const Details = () => {
                                 <div className="w2"><Rectangle height={16} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered vertically */
diff --git a/client/patterns/button-with-icon/Cover.jsx b/client/patterns/button-with-icon/Cover.tsx
similarity index 94%
rename from client/patterns/button-with-icon/Cover.jsx
rename to client/patterns/button-with-icon/Cover.tsx
index fc921d3..d89e5c1 100644
--- a/client/patterns/button-with-icon/Cover.jsx
+++ 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.jsx b/client/patterns/button-with-icon/Details.tsx
similarity index 92%
rename from client/patterns/button-with-icon/Details.jsx
rename to client/patterns/button-with-icon/Details.tsx
index e4251a1..217e4f9 100644
--- a/client/patterns/button-with-icon/Details.jsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -5,12 +5,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w5">
                                 <button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
@@ -19,7 +19,7 @@ const Details = () => {
                                 </button>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <button style="
     /* Content is centered */
diff --git a/client/patterns/card/Cover.jsx b/client/patterns/card/Cover.tsx
similarity index 96%
rename from client/patterns/card/Cover.jsx
rename to client/patterns/card/Cover.tsx
index c85e38c..e639d59 100644
--- a/client/patterns/card/Cover.jsx
+++ 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.jsx b/client/patterns/card/Details.tsx
similarity index 94%
rename from client/patterns/card/Details.jsx
rename to client/patterns/card/Details.tsx
index 2d78d1b..2b9e071 100644
--- a/client/patterns/card/Details.jsx
+++ b/client/patterns/card/Details.tsx
@@ -5,12 +5,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center pa3">
                             <div className="b--black-30 ba br2 flex flex-column w5">
                                 <Rectangle height={150} />
@@ -22,7 +22,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
diff --git a/client/patterns/centering/Cover.jsx b/client/patterns/centering/Cover.tsx
similarity index 93%
rename from client/patterns/centering/Cover.jsx
rename to client/patterns/centering/Cover.tsx
index 528259b..8a21955 100644
--- a/client/patterns/centering/Cover.jsx
+++ 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.jsx b/client/patterns/centering/Details.tsx
similarity index 91%
rename from client/patterns/centering/Details.jsx
rename to client/patterns/centering/Details.tsx
index c255b36..b27d72d 100644
--- a/client/patterns/centering/Details.jsx
+++ b/client/patterns/centering/Details.tsx
@@ -5,19 +5,19 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <Circle size={64} />
                             <div className="w-40 mt3"><Rectangle /></div>
                             <div className="w-30 mt2"><Rectangle /></div>
                             <div className="w-20 mt2"><Rectangle /></div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     align-items: center;
diff --git a/client/patterns/docked-at-corner/Cover.jsx b/client/patterns/docked-at-corner/Cover.tsx
similarity index 94%
rename from client/patterns/docked-at-corner/Cover.jsx
rename to client/patterns/docked-at-corner/Cover.tsx
index 201832f..a6853c6 100644
--- a/client/patterns/docked-at-corner/Cover.jsx
+++ 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.jsx b/client/patterns/docked-at-corner/Details.tsx
similarity index 96%
rename from client/patterns/docked-at-corner/Details.jsx
rename to client/patterns/docked-at-corner/Details.tsx
index 15d24cc..36d80bb 100644
--- a/client/patterns/docked-at-corner/Details.jsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -5,12 +5,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w4 pa3 relative ba b--black-30 br2">
                                 <Rectangle />
@@ -20,7 +20,7 @@ const Details = () => {
                                 />
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     position: relative;
diff --git a/client/patterns/dot-navigation/Cover.jsx b/client/patterns/dot-navigation/Cover.tsx
similarity index 95%
rename from client/patterns/dot-navigation/Cover.jsx
rename to client/patterns/dot-navigation/Cover.tsx
index a9ed22e..1f4a0b9 100644
--- a/client/patterns/dot-navigation/Cover.jsx
+++ 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.jsx b/client/patterns/dot-navigation/Details.tsx
similarity index 91%
rename from client/patterns/dot-navigation/Details.jsx
rename to client/patterns/dot-navigation/Details.tsx
index 6db5a37..d5ec9d3 100644
--- a/client/patterns/dot-navigation/Details.jsx
+++ 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 (
@@ -25,7 +29,7 @@ const Details = () => {
         <DetailsLayout title="Dot navigation">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <ul className="list ma0 pa0 flex items-center justify-center">
                                 <Dot index={0} />
@@ -34,7 +38,7 @@ const Details = () => {
                                 <Dot index={3} />
                             </ul>
                         </div>
-                    }
+                    )}
                     source={`
 <ul style="
     /* Content is centered */
diff --git a/client/patterns/feature-list/Cover.jsx b/client/patterns/feature-list/Cover.tsx
similarity index 97%
rename from client/patterns/feature-list/Cover.jsx
rename to client/patterns/feature-list/Cover.tsx
index 83b971f..9e3d30f 100644
--- a/client/patterns/feature-list/Cover.jsx
+++ 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.jsx b/client/patterns/feature-list/Details.tsx
similarity index 95%
rename from client/patterns/feature-list/Details.jsx
rename to client/patterns/feature-list/Details.tsx
index ac39a27..dc27439 100644
--- a/client/patterns/feature-list/Details.jsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -6,12 +6,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="flex h-100 items-center justify-center">
                             <div className="w-60">
                                 <div className="flex flex-row mb4">
@@ -30,7 +30,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Feature item -->
 <div style="
diff --git a/client/patterns/fixed-at-corner/Cover.jsx b/client/patterns/fixed-at-corner/Cover.tsx
similarity index 91%
rename from client/patterns/fixed-at-corner/Cover.jsx
rename to client/patterns/fixed-at-corner/Cover.tsx
index 0857f72..bac55d4 100644
--- a/client/patterns/fixed-at-corner/Cover.jsx
+++ 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.jsx b/client/patterns/fixed-at-corner/Details.tsx
similarity index 95%
rename from client/patterns/fixed-at-corner/Details.jsx
rename to client/patterns/fixed-at-corner/Details.tsx
index add55f1..9bf2193 100644
--- a/client/patterns/fixed-at-corner/Details.jsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -4,12 +4,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="relative h-100">
                             <div className="absolute top-0 left-0">
                                 <Triangle size={64} corner="tl" />
@@ -24,7 +24,7 @@ const Details = () => {
                                 <Triangle size={64} corner="bl" />
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     position: relative;
diff --git a/client/patterns/holy-grail/Cover.jsx b/client/patterns/holy-grail/Cover.tsx
similarity index 98%
rename from client/patterns/holy-grail/Cover.jsx
rename to client/patterns/holy-grail/Cover.tsx
index 1c4efe5..074b849 100644
--- a/client/patterns/holy-grail/Cover.jsx
+++ 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.jsx b/client/patterns/holy-grail/Details.tsx
similarity index 96%
rename from client/patterns/holy-grail/Details.jsx
rename to client/patterns/holy-grail/Details.tsx
index 9ee05fc..8c13e41 100644
--- a/client/patterns/holy-grail/Details.jsx
+++ b/client/patterns/holy-grail/Details.tsx
@@ -5,12 +5,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column">
                             <div className="flex-shrink-0 bb b--black-30 pa3">
                                 <div className="w-50"><Rectangle /></div>
@@ -30,7 +30,7 @@ const Details = () => {
                                 <div className="w-40"><Rectangle /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
@@ -42,7 +42,7 @@ const Details = () => {
     <main style="
         /* Take the remaining height */
         flex-grow: 1;
-        
+
         /* Layout the left sidebar, main content and right sidebar */
         display: flex;
         flex-direction: row;
diff --git a/client/patterns/input-add-on/Cover.jsx b/client/patterns/input-add-on/Cover.tsx
similarity index 72%
rename from client/patterns/input-add-on/Cover.jsx
rename to client/patterns/input-add-on/Cover.tsx
index 1925a65..64b7649 100644
--- a/client/patterns/input-add-on/Cover.jsx
+++ b/client/patterns/input-add-on/Cover.tsx
@@ -3,17 +3,15 @@ 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">
                 <div className="b--black-30 ba br2 flex w-100 h1">
                     <div className="b--black-30 br flex items-center justify-center w-30 ph2">
-                        <div className="w-100">
-                        <Line />
-                        </div>
+                        <div className="w-100"><Line /></div>
                     </div>
-                    <div className="flex-grow-1"></div>
+                    <div className="flex-grow-1" />
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/input-add-on/Details.jsx b/client/patterns/input-add-on/Details.tsx
similarity index 93%
rename from client/patterns/input-add-on/Details.jsx
rename to client/patterns/input-add-on/Details.tsx
index 2d26f7f..53a2b73 100644
--- a/client/patterns/input-add-on/Details.jsx
+++ b/client/patterns/input-add-on/Details.tsx
@@ -4,12 +4,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w5">
                                 <div className="b--black-30 ba br2 flex h2 w-100 mb3">
@@ -35,7 +35,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Add-on prepended -->
 <div style="
@@ -46,7 +46,7 @@ const Details = () => {
 ">
     <!-- Add-on -->
     <div style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -76,7 +76,7 @@ const Details = () => {
 
     <!-- Add-on -->
     <div style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -94,7 +94,7 @@ const Details = () => {
 ">
     <!-- Add-on -->
     <div style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
@@ -110,7 +110,7 @@ const Details = () => {
 
     <!-- Add-on -->
     <div style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
diff --git a/client/patterns/media-object/Cover.jsx b/client/patterns/media-object/Cover.tsx
similarity index 94%
rename from client/patterns/media-object/Cover.jsx
rename to client/patterns/media-object/Cover.tsx
index 44e203b..3694910 100644
--- a/client/patterns/media-object/Cover.jsx
+++ 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">
@@ -15,11 +15,11 @@ const Cover = () => {
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-80 mb3"><Line /></div>
-                    
+
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-80 mb3"><Line /></div>
-                    
+
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-100 mb1"><Line /></div>
                     <div className="w-80 mb1"><Line /></div>
diff --git a/client/patterns/media-object/Details.jsx b/client/patterns/media-object/Details.tsx
similarity index 94%
rename from client/patterns/media-object/Details.jsx
rename to client/patterns/media-object/Details.tsx
index d431278..2271a6e 100644
--- a/client/patterns/media-object/Details.jsx
+++ b/client/patterns/media-object/Details.tsx
@@ -6,12 +6,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex items-start pa3">
                             <div className="w4 h4 mr3">
                                 <Square />
@@ -24,7 +24,7 @@ const Details = () => {
                                 <div className="mb4"><Block numberOfBlocks={15} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Align sub-items to top */
diff --git a/client/patterns/menu/Cover.jsx b/client/patterns/menu/Cover.tsx
similarity index 96%
rename from client/patterns/menu/Cover.jsx
rename to client/patterns/menu/Cover.tsx
index d585df9..841c9b4 100644
--- a/client/patterns/menu/Cover.jsx
+++ 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.jsx b/client/patterns/menu/Details.tsx
similarity index 97%
rename from client/patterns/menu/Details.jsx
rename to client/patterns/menu/Details.tsx
index bb5ad21..b772189 100644
--- a/client/patterns/menu/Details.jsx
+++ b/client/patterns/menu/Details.tsx
@@ -5,12 +5,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="b--black-30 ba br2 flex flex-column w-40">
                                 <div className="flex items-center h2 ph2 hover-bg-black-10">
@@ -46,7 +46,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
diff --git a/client/patterns/modal/Cover.jsx b/client/patterns/modal/Cover.tsx
similarity index 97%
rename from client/patterns/modal/Cover.jsx
rename to client/patterns/modal/Cover.tsx
index f4c4c5e..e2faccc 100644
--- a/client/patterns/modal/Cover.jsx
+++ 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.jsx b/client/patterns/modal/Details.tsx
similarity index 96%
rename from client/patterns/modal/Details.jsx
rename to client/patterns/modal/Details.tsx
index 3e4bf66..1b487fd 100644
--- a/client/patterns/modal/Details.jsx
+++ b/client/patterns/modal/Details.tsx
@@ -6,12 +6,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="b--black-30 ba br2 w-50">
                                 <div className="flex items-center justify-between bb b--black-30 pa3">
@@ -30,7 +30,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Border */
diff --git a/client/patterns/notification/Cover.jsx b/client/patterns/notification/Cover.tsx
similarity index 93%
rename from client/patterns/notification/Cover.jsx
rename to client/patterns/notification/Cover.tsx
index 9d5975a..48a12f1 100644
--- a/client/patterns/notification/Cover.jsx
+++ 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.jsx b/client/patterns/notification/Details.tsx
similarity index 76%
rename from client/patterns/notification/Details.jsx
rename to client/patterns/notification/Details.tsx
index 8065ffc..1a4071b 100644
--- a/client/patterns/notification/Details.jsx
+++ b/client/patterns/notification/Details.tsx
@@ -5,21 +5,24 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="b--black-30 ba br2 flex justify-between w-60">
                                 <div className="pa3 w-80"><Block numberOfBlocks={5} /></div>
-                                <button className="black-30 bn f2 flex h2 items-center justify-center w2" style={{ marginRight: '1px' }}>
+                                <button
+                                    className="black-30 bn f2 flex h2 items-center justify-center w2"
+                                    style={{ marginRight: '1px' }}
+                                >
                                     <Circle />
                                 </button>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
diff --git a/client/patterns/pagination/Cover.jsx b/client/patterns/pagination/Cover.tsx
similarity index 91%
rename from client/patterns/pagination/Cover.jsx
rename to client/patterns/pagination/Cover.tsx
index 522029d..145437b 100644
--- a/client/patterns/pagination/Cover.jsx
+++ b/client/patterns/pagination/Cover.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import Frame from '../../placeholders/Frame';
 import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
+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/pagination/Details.jsx b/client/patterns/pagination/Details.tsx
similarity index 96%
rename from client/patterns/pagination/Details.jsx
rename to client/patterns/pagination/Details.tsx
index a1fade8..ff5e358 100644
--- a/client/patterns/pagination/Details.jsx
+++ b/client/patterns/pagination/Details.tsx
@@ -5,12 +5,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center pa3">
                             <div className="b--black-30 ba br2 flex">
                                 <div className="b--black-30 br flex items-center justify-center pa2 w4">
@@ -33,7 +33,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
diff --git a/client/patterns/previous-next-buttons/Cover.jsx b/client/patterns/previous-next-buttons/Cover.tsx
similarity index 95%
rename from client/patterns/previous-next-buttons/Cover.jsx
rename to client/patterns/previous-next-buttons/Cover.tsx
index 7f76b8b..ce863f2 100644
--- a/client/patterns/previous-next-buttons/Cover.jsx
+++ 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.jsx b/client/patterns/previous-next-buttons/Details.tsx
similarity index 94%
rename from client/patterns/previous-next-buttons/Details.jsx
rename to client/patterns/previous-next-buttons/Details.tsx
index 95323a3..6eabe76 100644
--- a/client/patterns/previous-next-buttons/Details.jsx
+++ b/client/patterns/previous-next-buttons/Details.tsx
@@ -4,12 +4,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w-50">
                                 <div className="flex items-center justify-between pa2 w-100 h2">
@@ -24,7 +24,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     align-items: center;
diff --git a/client/patterns/pricing-table/Cover.jsx b/client/patterns/pricing-table/Cover.tsx
similarity index 73%
rename from client/patterns/pricing-table/Cover.jsx
rename to client/patterns/pricing-table/Cover.tsx
index 1c25298..868c6e9 100644
--- a/client/patterns/pricing-table/Cover.jsx
+++ b/client/patterns/pricing-table/Cover.tsx
@@ -5,11 +5,14 @@ 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">
-                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{ flex: 1 }}>
+                <div
+                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1"
+                    style={{ flex: 1 }}
+                >
                     <div className="mb1"><Circle /></div>
                     <div className="mb1 w-100">
                         <div className="w-100 mb1"><Line /></div>
@@ -18,7 +21,10 @@ const Cover = () => {
                     </div>
                     <Rectangle />
                 </div>
-                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{ flex: 1 }}>
+                <div
+                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1"
+                    style={{ flex: 1 }}
+                >
                     <div className="mb1"><Circle /></div>
                     <div className="mb1 w-100">
                         <div className="w-100 mb1"><Line /></div>
@@ -29,7 +35,10 @@ const Cover = () => {
                     </div>
                     <Rectangle />
                 </div>
-                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1" style={{ flex: 1 }}>
+                <div
+                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa1"
+                    style={{ flex: 1 }}
+                >
                     <div className="mb1"><Circle /></div>
                     <div className="mb1 w-100">
                         <div className="w-100 mb1"><Line /></div>
diff --git a/client/patterns/pricing-table/Details.jsx b/client/patterns/pricing-table/Details.tsx
similarity index 61%
rename from client/patterns/pricing-table/Details.jsx
rename to client/patterns/pricing-table/Details.tsx
index ed0e32f..bf2cb52 100644
--- a/client/patterns/pricing-table/Details.jsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -1,46 +1,49 @@
 import React from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
-import Circle from '../../placeholders/Circle';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pricing table">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex items-center justify-center pa3">
                             <div className="w-60 flex items-center justify-center">
-                                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
+                                <div
+                                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
+                                    style={{ flex: 1 }}
+                                >
                                     <div className="mb3 w-60"><Rectangle /></div>
                                     <div className="mb3"><Circle size={64} /></div>
-                                    <div className="mb3 w-100">
-                                        <Block numberOfBlocks={10} />
-                                    </div>
+                                    <div className="mb3 w-100"><Block numberOfBlocks={10} /></div>
                                     <div className="w-40"><Rectangle height={32} /></div>
                                 </div>
-                                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
+                                <div
+                                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
+                                    style={{ flex: 1 }}
+                                >
                                     <div className="mb3 w-60"><Rectangle /></div>
                                     <div className="mb3"><Circle size={64} /></div>
-                                    <div className="mb3 w-100">
-                                        <Block numberOfBlocks={20} />
-                                    </div>
+                                    <div className="mb3 w-100"><Block numberOfBlocks={20} /></div>
                                     <div className="w-40"><Rectangle height={32} /></div>
                                 </div>
-                                <div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
-                                <div className="mb3 w-60"><Rectangle /></div>
-                                    <div className="mb3"><Circle size={64} /></div>
-                                    <div className="mb3 w-100">
-                                        <Block numberOfBlocks={10} />
-                                    </div>
-                                    <div className="w-40"><Rectangle height={32} /></div>
+                                <div
+                                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
+                                    style={{ flex: 1 }}
+                                >
+                                    <div className="mb3 w-60"><Rectangle /></div>
+                                        <div className="mb3"><Circle size={64} /></div>
+                                        <div className="mb3 w-100"><Block numberOfBlocks={10} /></div>
+                                        <div className="w-40"><Rectangle height={32} /></div>
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered horizontally */
diff --git a/client/patterns/progress-bar/Cover.jsx b/client/patterns/progress-bar/Cover.tsx
similarity index 92%
rename from client/patterns/progress-bar/Cover.jsx
rename to client/patterns/progress-bar/Cover.tsx
index 4c47898..cb1ac32 100644
--- a/client/patterns/progress-bar/Cover.jsx
+++ 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.jsx b/client/patterns/progress-bar/Details.tsx
similarity index 78%
rename from client/patterns/progress-bar/Details.jsx
rename to client/patterns/progress-bar/Details.tsx
index fb13a36..101bd87 100644
--- a/client/patterns/progress-bar/Details.jsx
+++ b/client/patterns/progress-bar/Details.tsx
@@ -1,28 +1,31 @@
 import React, { useState } from 'react';
 
+import useInterval from '../../hooks/useInterval';
 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);
+        setProgress((v) => v === 100 ? 0 : v + 1);
     }, 1 * 100);
 
     return (
         <DetailsLayout title="Progress bar">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="h1 w-50 br-pill bg-black-10">
-                                <div className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7" style={{ width: `${progress}%` }}>
+                                <div
+                                    className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7"
+                                    style={{ width: `${progress}%` }}
+                                >
                                     {progress}%
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Colors */
diff --git a/client/patterns/questions-and-answers/Cover.jsx b/client/patterns/questions-and-answers/Cover.tsx
similarity index 97%
rename from client/patterns/questions-and-answers/Cover.jsx
rename to client/patterns/questions-and-answers/Cover.tsx
index de4f8ab..3b55282 100644
--- a/client/patterns/questions-and-answers/Cover.jsx
+++ 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.jsx b/client/patterns/questions-and-answers/Details.tsx
similarity index 93%
rename from client/patterns/questions-and-answers/Details.jsx
rename to client/patterns/questions-and-answers/Details.tsx
index 3eb2998..4b92d3f 100644
--- a/client/patterns/questions-and-answers/Details.jsx
+++ 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 (
@@ -30,7 +35,7 @@ const Details = () => {
         <DetailsLayout title="Questions and answers">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w-60">
                                 <div className="mb3 bt bb b--black-30">
@@ -59,7 +64,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Each question and answer item -->
 <div style="
diff --git a/client/patterns/radio-switch/Cover.jsx b/client/patterns/radio-switch/Cover.tsx
similarity index 89%
rename from client/patterns/radio-switch/Cover.jsx
rename to client/patterns/radio-switch/Cover.tsx
index f845219..98b5f6a 100644
--- a/client/patterns/radio-switch/Cover.jsx
+++ 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">
@@ -11,8 +11,7 @@ const Cover = () => {
                     <div className="pa1" style={{ flex: 1 }}>
                         <Rectangle />
                     </div>
-                    <div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }}>
-                    </div>
+                    <div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }} />
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/radio-switch/Details.jsx b/client/patterns/radio-switch/Details.tsx
similarity index 80%
rename from client/patterns/radio-switch/Details.jsx
rename to client/patterns/radio-switch/Details.tsx
index f587d88..b7c7d43 100644
--- a/client/patterns/radio-switch/Details.jsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -5,28 +5,34 @@ 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);
+    const toggle = () => setFirstChecked((c) => !c);
 
     return (
         <DetailsLayout title="Radio switch">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="inline-flex br-pill bg-black-10 pa1">
                                 <label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? 'bg-blue white' : ''}`}>
                                     <input type="radio" className="dn" checked={isFirstChecked} onChange={toggle} />
-                                    <div className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`} style={{ height: '8px' }}  />
+                                    <div
+                                        className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`}
+                                        style={{ height: '8px' }}
+                                    />
                                 </label>
                                 <label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}>
                                     <input type="radio" className="dn" checked={!isFirstChecked} onChange={toggle} />
-                                    <div className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`} style={{ height: '8px' }}  />
+                                    <div
+                                        className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`}
+                                        style={{ height: '8px' }}
+                                    />
                                 </label>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Container -->
 <div style="
diff --git a/client/patterns/same-height-columns/Cover.jsx b/client/patterns/same-height-columns/Cover.tsx
similarity index 97%
rename from client/patterns/same-height-columns/Cover.jsx
rename to client/patterns/same-height-columns/Cover.tsx
index 2bd6b22..8dc38f1 100644
--- a/client/patterns/same-height-columns/Cover.jsx
+++ 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.jsx b/client/patterns/same-height-columns/Details.tsx
similarity index 97%
rename from client/patterns/same-height-columns/Details.jsx
rename to client/patterns/same-height-columns/Details.tsx
index 147ca60..1ee689b 100644
--- a/client/patterns/same-height-columns/Details.jsx
+++ b/client/patterns/same-height-columns/Details.tsx
@@ -5,12 +5,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center pa3">
                             <div className="flex h-100 w-100">
                                 <div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
@@ -44,7 +44,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="display: flex;">
     <!-- Column -->
diff --git a/client/patterns/search-box/Cover.jsx b/client/patterns/search-box/Cover.tsx
similarity index 92%
rename from client/patterns/search-box/Cover.jsx
rename to client/patterns/search-box/Cover.tsx
index 39e13e6..9b1e653 100644
--- a/client/patterns/search-box/Cover.jsx
+++ 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.jsx b/client/patterns/search-box/Details.tsx
similarity index 69%
rename from client/patterns/search-box/Details.jsx
rename to client/patterns/search-box/Details.tsx
index 3be9ded..b876fdd 100644
--- a/client/patterns/search-box/Details.jsx
+++ b/client/patterns/search-box/Details.tsx
@@ -4,30 +4,40 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w5">
                                 <div className="mb3 b--black-30 ba br1 flex">
-                                    <input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
+                                    <input
+                                        type="text"
+                                        placeholder="Search"
+                                        className="pa1 b--transparent"
+                                        style={{ flex: 1 }}
+                                    />
                                     <div className="pa2">
                                         <Circle />
                                     </div>
                                 </div>
 
                                 <div className="b--black-30 ba br1 flex flex-row-reverse">
-                                    <input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
+                                    <input
+                                        type="text"
+                                        placeholder="Search"
+                                        className="pa1 b--transparent"
+                                        style={{ flex: 1 }}
+                                    />
                                     <div className="pa2">
                                         <Circle />
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
diff --git a/client/patterns/separator/Cover.jsx b/client/patterns/separator/Cover.tsx
similarity index 94%
rename from client/patterns/separator/Cover.jsx
rename to client/patterns/separator/Cover.tsx
index cb231aa..79de80b 100644
--- a/client/patterns/separator/Cover.jsx
+++ 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.jsx b/client/patterns/separator/Details.tsx
similarity index 94%
rename from client/patterns/separator/Details.jsx
rename to client/patterns/separator/Details.tsx
index f919fe0..4c7f263 100644
--- a/client/patterns/separator/Details.jsx
+++ b/client/patterns/separator/Details.tsx
@@ -4,12 +4,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex items-center w-60 relative">
                                 <div className="absolute bg-white ph2" style={{ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
@@ -18,7 +18,7 @@ const Details = () => {
                                 <div className="bb b--black-30 w-100" style={{ height: '1px' }} />
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered horizontally */
@@ -32,7 +32,7 @@ const Details = () => {
     <div style="
         /* We won't see the separator line */
         background: #FFF;
-        
+
         /* Displayed at the center of container */
         left: 50%;
         position: absolute;
diff --git a/client/patterns/sidebar/Cover.jsx b/client/patterns/sidebar/Cover.tsx
similarity index 95%
rename from client/patterns/sidebar/Cover.jsx
rename to client/patterns/sidebar/Cover.tsx
index 994889c..5b6d141 100644
--- a/client/patterns/sidebar/Cover.jsx
+++ 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.jsx b/client/patterns/sidebar/Details.tsx
similarity index 94%
rename from client/patterns/sidebar/Details.jsx
rename to client/patterns/sidebar/Details.tsx
index 7598d6e..da09d3f 100644
--- a/client/patterns/sidebar/Details.jsx
+++ b/client/patterns/sidebar/Details.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sidebar">
             <div className="ph4 pv5">
                 <div className="lh-copy mb3">Try to scroll the main content!</div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex">
                             <div className="b--black-30 br flex flex-column justify-end pa3 w-30">
                                 <div className="mb3"><Block numberOfBlocks={5} /></div>
@@ -24,7 +24,7 @@ const Details = () => {
                                 <div className="w-80"><Block numberOfBlocks={10} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="display: flex;">
     <!-- Sidebar -->
diff --git a/client/patterns/simple-grid/Cover.jsx b/client/patterns/simple-grid/Cover.tsx
similarity index 97%
rename from client/patterns/simple-grid/Cover.jsx
rename to client/patterns/simple-grid/Cover.tsx
index 3789dfe..42c98c4 100644
--- a/client/patterns/simple-grid/Cover.jsx
+++ 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.jsx b/client/patterns/simple-grid/Details.tsx
similarity index 98%
rename from client/patterns/simple-grid/Details.jsx
rename to client/patterns/simple-grid/Details.tsx
index a9c901b..61311ee 100644
--- a/client/patterns/simple-grid/Details.jsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -4,12 +4,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w-60">
                                 <div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
@@ -82,7 +82,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <!-- Row -->
 <div style="
diff --git a/client/patterns/slider/Cover.jsx b/client/patterns/slider/Cover.tsx
similarity index 94%
rename from client/patterns/slider/Cover.jsx
rename to client/patterns/slider/Cover.tsx
index e7bc561..8398737 100644
--- a/client/patterns/slider/Cover.jsx
+++ 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.jsx b/client/patterns/slider/Details.tsx
similarity index 94%
rename from client/patterns/slider/Details.jsx
rename to client/patterns/slider/Details.tsx
index 749d00a..978a245 100644
--- a/client/patterns/slider/Details.jsx
+++ b/client/patterns/slider/Details.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
-import Circle from '../../placeholders/Circle';
 import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
-const Details = () => {
+const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Slider">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex items-center h1 w5">
                                 <div className="w-20"><Rectangle height={2} /></div>
@@ -18,7 +18,7 @@ const Details = () => {
                                 <div style={{ flex: 1 }}><Rectangle height={2} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered horizontally */
@@ -37,7 +37,7 @@ const Details = () => {
         /* Colors */
         background-color: rgba(0, 0, 0, .3);
     " />
-    
+
     <!-- Circle -->
     <div style="
         /* Size */
diff --git a/client/patterns/split-navigation/Cover.jsx b/client/patterns/split-navigation/Cover.tsx
similarity index 94%
rename from client/patterns/split-navigation/Cover.jsx
rename to client/patterns/split-navigation/Cover.tsx
index c5fdf44..ce22cf3 100644
--- a/client/patterns/split-navigation/Cover.jsx
+++ 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.jsx b/client/patterns/split-navigation/Details.tsx
similarity index 94%
rename from client/patterns/split-navigation/Details.jsx
rename to client/patterns/split-navigation/Details.tsx
index 6eafa9d..2aa0ceb 100644
--- a/client/patterns/split-navigation/Details.jsx
+++ b/client/patterns/split-navigation/Details.tsx
@@ -4,12 +4,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <ul className="list ma0 b--black-30 ba br3 flex items-center pa3 w-60">
                                 <li className="w-20 mr1"><Rectangle /></li>
@@ -18,7 +18,7 @@ const Details = () => {
                                 <li className="w-10 ml-auto"><Rectangle /></li>
                             </ul>
                         </div>
-                    }
+                    )}
                     source={`
 <ul style="
     /* Content is centered horizontally */
diff --git a/client/patterns/split-screen/Cover.jsx b/client/patterns/split-screen/Cover.tsx
similarity index 96%
rename from client/patterns/split-screen/Cover.jsx
rename to client/patterns/split-screen/Cover.tsx
index d31076e..38f1257 100644
--- a/client/patterns/split-screen/Cover.jsx
+++ 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.jsx b/client/patterns/split-screen/Details.tsx
similarity index 82%
rename from client/patterns/split-screen/Details.jsx
rename to client/patterns/split-screen/Details.tsx
index f2d6d45..7f49d7f 100644
--- a/client/patterns/split-screen/Details.jsx
+++ b/client/patterns/split-screen/Details.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
 import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex">
-                            <div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
+                            <div
+                                className="b--black-30 br flex flex-column justify-center items-center"
+                                style={{ flex: 1 }}
+                            >
                                 <div className="mb3"><Circle size={128} /></div>
                                 <div className="w-60"><Rectangle /></div>
                             </div>
@@ -25,7 +28,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="display: flex;">
     <!-- Left content -->
diff --git a/client/patterns/stepper-input/Cover.jsx b/client/patterns/stepper-input/Cover.tsx
similarity index 85%
rename from client/patterns/stepper-input/Cover.jsx
rename to client/patterns/stepper-input/Cover.tsx
index 821ab96..8b65cf7 100644
--- a/client/patterns/stepper-input/Cover.jsx
+++ b/client/patterns/stepper-input/Cover.tsx
@@ -2,13 +2,13 @@ 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">
                 <div className="b--black-30 ba br2 flex w-100 h1">
                     <div className="b--black-30 br flex items-center justify-center w1">-</div>
-                    <div className="flex-grow-1"></div>
+                    <div className="flex-grow-1" />
                     <div className="b--black-30 bl flex items-center justify-center w1">+</div>
                 </div>
             </div>
diff --git a/client/patterns/stepper-input/Details.jsx b/client/patterns/stepper-input/Details.tsx
similarity index 69%
rename from client/patterns/stepper-input/Details.jsx
rename to client/patterns/stepper-input/Details.tsx
index 466d18b..3a87559 100644
--- a/client/patterns/stepper-input/Details.jsx
+++ 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">
@@ -17,17 +17,27 @@ const Details = () => {
                     The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
                 </div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="b--black-30 ba br2 flex h2 w4">
-                                <button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={decrease}>-</button>
+                                <button
+                                    className="bg-black-05 bn flex items-center justify-center pointer w2"
+                                    onClick={decrease}
+                                >
+                                    -
+                                </button>
                                 <div className="b--black-30 ba bb-0 bt-0 h-100" style={{ flex: 1 }}>
                                     <input type="text" className="bn h-100 pa2 w-100" value={value} onChange={change} />
                                 </div>
-                                <button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={increase}>+</button>
+                                <button
+                                    className="bg-black-05 bn flex items-center justify-center pointer w2"
+                                    onClick={increase}
+                                >
+                                    +
+                                </button>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
@@ -41,11 +51,11 @@ const Details = () => {
 ">
     <!-- Minus button -->
     <button style="
-        /* Content is centered */            
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
-        
+
         /* Size */
         width: 32px;
     ">-</button>
@@ -61,7 +71,7 @@ const Details = () => {
 
     <!-- Plus button -->
     <button style="
-        /* Content is centered */                    
+        /* Content is centered */
         align-items: center;
         display: flex;
         justify-content: center;
diff --git a/client/patterns/sticky-footer/Cover.jsx b/client/patterns/sticky-footer/Cover.tsx
similarity index 97%
rename from client/patterns/sticky-footer/Cover.jsx
rename to client/patterns/sticky-footer/Cover.tsx
index 88ddded..9c97e3c 100644
--- a/client/patterns/sticky-footer/Cover.jsx
+++ 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.jsx b/client/patterns/sticky-footer/Details.tsx
similarity index 94%
rename from client/patterns/sticky-footer/Details.jsx
rename to client/patterns/sticky-footer/Details.tsx
index 47fdd9e..4e002a2 100644
--- a/client/patterns/sticky-footer/Details.jsx
+++ 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">
@@ -13,7 +13,7 @@ const Details = () => {
                     The footer always sticks to the bottom if the main content is short.
                 </div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column">
                             <div className="flex-shrink-0 bb b--black-30 pa3">
                                 <div className="w-50"><Rectangle /></div>
@@ -25,7 +25,7 @@ const Details = () => {
                             <div className="w-40"><Rectangle /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
diff --git a/client/patterns/sticky-header/Cover.jsx b/client/patterns/sticky-header/Cover.tsx
similarity index 96%
rename from client/patterns/sticky-header/Cover.jsx
rename to client/patterns/sticky-header/Cover.tsx
index 4a3341e..fee6f4b 100644
--- a/client/patterns/sticky-header/Cover.jsx
+++ 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.jsx b/client/patterns/sticky-header/Details.tsx
similarity index 83%
rename from client/patterns/sticky-header/Details.jsx
rename to client/patterns/sticky-header/Details.tsx
index d629729..478468c 100644
--- a/client/patterns/sticky-header/Details.jsx
+++ b/client/patterns/sticky-header/Details.tsx
@@ -5,13 +5,15 @@ 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">
-                <div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
+                <div className="lh-copy mb3">
+                    Try to scroll the main content to see the header sticks to the top of page.
+                </div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div>
                             <div className="top-0 bg-white bb b--black-30 pa3" style={{ position: 'sticky' }}>
                                 <div className="w-50"><Rectangle /></div>
@@ -22,7 +24,7 @@ const Details = () => {
                                 <div><Block numberOfBlocks={30} /></div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div>
     <header style="
diff --git a/client/patterns/switch/Cover.jsx b/client/patterns/switch/Cover.tsx
similarity index 92%
rename from client/patterns/switch/Cover.jsx
rename to client/patterns/switch/Cover.tsx
index 62c8203..008da00 100644
--- a/client/patterns/switch/Cover.jsx
+++ 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.jsx b/client/patterns/switch/Details.tsx
similarity index 83%
rename from client/patterns/switch/Details.jsx
rename to client/patterns/switch/Details.tsx
index e71f239..ead8306 100644
--- a/client/patterns/switch/Details.jsx
+++ b/client/patterns/switch/Details.tsx
@@ -4,23 +4,26 @@ 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);
+    const toggle = () => setChecked((c) => !c);
 
     return (
         <DetailsLayout title="Switch">
             <div className="ph4 pv5">
-                <div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
+                <div className="lh-copy mb3">
+                    The checkbox is placed inside a label. So when clicking on the label,
+                    the checkbox will be checked even though it's hidden.
+                </div>
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
                                 <input type="checkbox" className="dn" checked={checked} onChange={toggle} />
                                 <div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
                             </label>
                         </div>
-                    }
+                    )}
                     source={`
 <label style="
     display: flex;
diff --git a/client/patterns/tab/Cover.jsx b/client/patterns/tab/Cover.tsx
similarity index 65%
rename from client/patterns/tab/Cover.jsx
rename to client/patterns/tab/Cover.tsx
index 3a9c7d8..0e2431b 100644
--- a/client/patterns/tab/Cover.jsx
+++ b/client/patterns/tab/Cover.tsx
@@ -3,12 +3,17 @@ 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">
                 <div className="flex items-center justify-center">
-                    <div className="ph2 pv1 ba b--black-30 br2 br--top" style={{ borderBottomColor: 'transparent' }}><Circle size={8} /></div>
+                    <div
+                        className="ph2 pv1 ba b--black-30 br2 br--top"
+                        style={{ borderBottomColor: 'transparent' }}
+                    >
+                        <Circle size={8} />
+                    </div>
                     <div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
                     <div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
                 </div>
diff --git a/client/patterns/tab/Details.jsx b/client/patterns/tab/Details.tsx
similarity index 92%
rename from client/patterns/tab/Details.jsx
rename to client/patterns/tab/Details.tsx
index 36713a0..0be48f7 100644
--- a/client/patterns/tab/Details.jsx
+++ 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 (
@@ -27,7 +31,7 @@ const Details = () => {
         <DetailsLayout title="Tab">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex items-center justify-center">
                                 <Tab tabIndex={0}>
@@ -47,7 +51,7 @@ const Details = () => {
                                 </Tab>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     /* Content is centered */
diff --git a/client/patterns/toggle-password-visibility/Cover.jsx b/client/patterns/toggle-password-visibility/Cover.tsx
similarity index 95%
rename from client/patterns/toggle-password-visibility/Cover.jsx
rename to client/patterns/toggle-password-visibility/Cover.tsx
index 51fe665..7eee841 100644
--- a/client/patterns/toggle-password-visibility/Cover.jsx
+++ 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.jsx b/client/patterns/toggle-password-visibility/Details.tsx
similarity index 95%
rename from client/patterns/toggle-password-visibility/Details.jsx
rename to client/patterns/toggle-password-visibility/Details.tsx
index 299189b..db9df0f 100644
--- a/client/patterns/toggle-password-visibility/Details.jsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -3,15 +3,15 @@ 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);
+    const toggle = () => setVisible((v) => !v);
 
     return (
         <DetailsLayout title="Toggle password visibility">
             <div className="ph4 pv5">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="w5">
                                 <div className="b--black-30 ba br1 flex">
@@ -20,8 +20,8 @@ const Details = () => {
                                         <svg
                                             viewBox="0 0 24 24"
                                             style={{
-                                                height: '24px',
                                                 fill: "none",
+                                                height: '24px',
                                                 stroke: "rgba(0, 0, 0, 0.4)",
                                                 strokeLinecap: "round",
                                                 strokeLinejoin: "round",
@@ -41,7 +41,7 @@ const Details = () => {
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
diff --git a/client/patterns/wizard/Cover.jsx b/client/patterns/wizard/Cover.tsx
similarity index 97%
rename from client/patterns/wizard/Cover.jsx
rename to client/patterns/wizard/Cover.tsx
index 4b18390..a399984 100644
--- a/client/patterns/wizard/Cover.jsx
+++ 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.jsx b/client/patterns/wizard/Details.tsx
similarity index 88%
rename from client/patterns/wizard/Details.jsx
rename to client/patterns/wizard/Details.tsx
index b1e771c..730f920 100644
--- a/client/patterns/wizard/Details.jsx
+++ b/client/patterns/wizard/Details.tsx
@@ -6,12 +6,12 @@ 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">
                 <BrowserFrame
-                    content={
+                    content={(
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="flex w-80">
                                 <div style={{ flex: 1 }}>
@@ -20,7 +20,9 @@ const Details = () => {
                                         <div className="flex items-center justify-center mh1"><Circle size={32} /></div>
                                         <div style={{ flex: 1 }}><Line /></div>
                                     </div>
-                                    <div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
+                                    <div className="ph3 flex justify-center">
+                                        <Block justify='center' numberOfBlocks={5} />
+                                    </div>
                                 </div>
                                 <div style={{ flex: 1 }}>
                                     <div className="mb3 flex items-center justify-center">
@@ -28,7 +30,9 @@ const Details = () => {
                                         <div className="flex items-center justify-center mh1"><Circle size={32} /></div>
                                         <div style={{ flex: 1 }}><Line /></div>
                                     </div>
-                                    <div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
+                                    <div className="ph3 flex justify-center">
+                                        <Block justify='center' numberOfBlocks={5} />
+                                    </div>
                                 </div>
                                 <div style={{ flex: 1 }}>
                                     <div className="mb3 flex items-center justify-center">
@@ -36,11 +40,13 @@ const Details = () => {
                                         <div className="flex items-center justify-center mh1"><Circle size={32} /></div>
                                         <div style={{ flex: 1 }} />
                                     </div>
-                                    <div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
+                                    <div className="ph3 flex justify-center">
+                                        <Block justify='center' numberOfBlocks={5} />
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    }
+                    )}
                     source={`
 <div style="
     display: flex;
@@ -62,7 +68,7 @@ const Details = () => {
                 height: 1px;
 
                 background-color: rgba(0, 0, 0, .3);
-                /* 
+                /*
                 For the first step, you might need to set it to transparent background:
                 background-color: transparent;
                 */
@@ -94,7 +100,7 @@ const Details = () => {
                 height: 1px;
 
                 background-color: rgba(0, 0, 0, .3);
-                /* 
+                /*
                 For the last step, you might need to set it to transparent background:
                 background-color: transparent;
                 */
diff --git a/client/placeholders/Block.jsx b/client/placeholders/Block.tsx
similarity index 75%
rename from client/placeholders/Block.jsx
rename to client/placeholders/Block.tsx
index 7cdb6ba..71c8c78 100644
--- a/client/placeholders/Block.jsx
+++ b/client/placeholders/Block.tsx
@@ -2,7 +2,13 @@ import React from 'react';
 
 import random from '../helpers/random';
 
-const Block = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
+interface BlockProps {
+    blockHeight?: number;
+    justify?: string;
+    numberOfBlocks?: number;
+}
+
+const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
     return (
         <div className={`flex flex-wrap w-100 justify-${justify}`}>
             {
diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.tsx
similarity index 88%
rename from client/placeholders/BrowserFrame.jsx
rename to client/placeholders/BrowserFrame.tsx
index f50176b..5577357 100644
--- a/client/placeholders/BrowserFrame.jsx
+++ b/client/placeholders/BrowserFrame.tsx
@@ -2,12 +2,16 @@ import React, { useState } from 'react';
 
 import SampleCode from '../components/SampleCode';
 
-const BrowserFrame = ({ content, source }) => {
+interface BrowserFrameProps {
+    content: React.ReactNode;
+    source: string;
+}
+
+const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
     const [isContentActive, setContentActive] = useState(true);
-    const flip = () => setContentActive(isActive => !isActive);
+    const flip = () => setContentActive((isActive) => !isActive);
 
     return (
-        
         <div className="br2 ba b--black-20" style={{ boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)' }}>
             <div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
                 <div className="br-100 mr1 w1 h1 bg-red" />
@@ -23,25 +27,26 @@ const BrowserFrame = ({ content, source }) => {
                 className="relative"
                 style={{
                     height: '512px',
-                    transition: 'transform 1s',
-                    transformStyle: 'preserve-3d',
                     transform: isContentActive ? '' : 'rotateY(180deg)',
+                    transformStyle: 'preserve-3d',
+                    transition: 'transform 1s',
                 }}
             >
                 <div
                     className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
                     style={{
-                        backfaceVisibility: 'hidden',
                         WebkitBackfaceVisibility: 'hidden',
-                    }}>
+                        backfaceVisibility: 'hidden',
+                    }}
+                >
                     {content}
                 </div>
                 <div
                     className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
                     style={{
+                        WebkitBackfaceVisibility: 'hidden',
                         backfaceVisibility: 'hidden',
                         transform: 'rotateY(180deg)',
-                        WebkitBackfaceVisibility: 'hidden',
                     }}
                 >
                     <SampleCode lang="html" code={source} />
diff --git a/client/placeholders/Circle.jsx b/client/placeholders/Circle.tsx
similarity index 70%
rename from client/placeholders/Circle.jsx
rename to client/placeholders/Circle.tsx
index df64689..f09127f 100644
--- a/client/placeholders/Circle.jsx
+++ b/client/placeholders/Circle.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-const Circle = ({ size = 16 }) => {
+interface CircleProps {
+    size?: number;
+}
+
+const Circle: React.FC<CircleProps> = ({ size = 16 }) => {
     return (
         <div
             className="bg-black-30 br-pill"
diff --git a/client/placeholders/Frame.jsx b/client/placeholders/Frame.tsx
similarity index 88%
rename from client/placeholders/Frame.jsx
rename to client/placeholders/Frame.tsx
index 458f569..1437ddc 100644
--- a/client/placeholders/Frame.jsx
+++ b/client/placeholders/Frame.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Frame = ({ children }) => {
+const Frame: React.FC<{}> = ({ children }) => {
     return (
         <div
             className="ba b--black-30 br2"
diff --git a/client/placeholders/Line.jsx b/client/placeholders/Line.tsx
similarity index 83%
rename from client/placeholders/Line.jsx
rename to client/placeholders/Line.tsx
index 7d41c57..83a866f 100644
--- a/client/placeholders/Line.jsx
+++ b/client/placeholders/Line.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Line = () => {
+const Line: React.FC<{}> = () => {
     return (
         <div
             className="w-100 bg-black-30"
diff --git a/client/placeholders/Rectangle.jsx b/client/placeholders/Rectangle.tsx
similarity index 62%
rename from client/placeholders/Rectangle.jsx
rename to client/placeholders/Rectangle.tsx
index b1129d8..b76cc3d 100644
--- a/client/placeholders/Rectangle.jsx
+++ b/client/placeholders/Rectangle.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-const Rectangle = ({ height = 8 }) => {
+interface RectangleProps {
+    height?: number;
+}
+
+const Rectangle: React.FC<RectangleProps> = ({ height = 8 }) => {
     return (
         <div
             className="w-100 bg-black-30 br1"
diff --git a/client/placeholders/Square.jsx b/client/placeholders/Square.tsx
similarity index 55%
rename from client/placeholders/Square.jsx
rename to client/placeholders/Square.tsx
index d9fb6bc..8caf674 100644
--- a/client/placeholders/Square.jsx
+++ b/client/placeholders/Square.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-const Square = ({ size = 8 }) => {
+interface SquareProps {
+    size?: number;
+}
+
+const Square: React.FC<SquareProps> = ({ size = 8 }) => {
     return (
         <div className="w-100 h-100 bg-black-30 br2" />
     );
diff --git a/client/placeholders/Triangle.jsx b/client/placeholders/Triangle.tsx
similarity index 90%
rename from client/placeholders/Triangle.jsx
rename to client/placeholders/Triangle.tsx
index 1cb1d09..2d71136 100644
--- a/client/placeholders/Triangle.jsx
+++ b/client/placeholders/Triangle.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 
-const Triangle = ({ size = 16, corner = 'tl' }) => {
+interface TriangleProps {
+    corner?: string;
+    size?: number;
+}
+
+const Triangle: React.FC<TriangleProps> = ({ size = 16, corner = 'tl' }) => {
     let bw = '';
     let bc = '';
     switch (corner) {
diff --git a/client/placeholders/VerticalLine.jsx b/client/placeholders/VerticalLine.tsx
similarity index 81%
rename from client/placeholders/VerticalLine.jsx
rename to client/placeholders/VerticalLine.tsx
index e098ed8..0c3e857 100644
--- a/client/placeholders/VerticalLine.jsx
+++ b/client/placeholders/VerticalLine.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const VerticalLine = () => {
+const VerticalLine: React.FC<{}> = () => {
     return (
         <div
             className="h-100 bg-black-30"
diff --git a/client/types/hightlight.d.ts b/client/types/hightlight.d.ts
new file mode 100644
index 0000000..257398c
--- /dev/null
+++ b/client/types/hightlight.d.ts
@@ -0,0 +1,11 @@
+declare module 'highlight.js/lib/highlight' {
+    interface HighlightResult {
+        value: string;
+    }
+
+    function highlight(lang: string, code: string): HighlightResult;
+    function registerLanguage(name: string, language: any): void;
+}
+
+declare module 'highlight.js/lib/languages/xml' {
+}
diff --git a/package-lock.json b/package-lock.json
index aa5b531..0b176b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1977,6 +1977,21 @@
                 "@types/node": "*"
             }
         },
+        "@types/history": {
+            "version": "4.7.3",
+            "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.3.tgz",
+            "integrity": "sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==",
+            "dev": true
+        },
+        "@types/loadable__component": {
+            "version": "5.10.0",
+            "resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.10.0.tgz",
+            "integrity": "sha512-AaDP1VxV3p7CdPOtOTl3ALgQ6ES4AxJKO9UGj9vJonq/w2yERxwdzFiWNQFh9fEDXEzjxujBlM2RmSJtHV1/pA==",
+            "dev": true,
+            "requires": {
+                "@types/react": "*"
+            }
+        },
         "@types/minimatch": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -1988,6 +2003,52 @@
             "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.7.tgz",
             "integrity": "sha512-E6Zn0rffhgd130zbCbAr/JdXfXkoOUFAKNs/rF8qnafSJ8KYaA/j3oz7dcwal+lYjLA7xvdd5J4wdYpCTlP8+w=="
         },
+        "@types/prop-types": {
+            "version": "15.7.3",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+            "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+            "dev": true
+        },
+        "@types/react": {
+            "version": "16.9.13",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.13.tgz",
+            "integrity": "sha512-LikzRslbiufJYHyzbHSW0GrAiff8QYLMBFeZmSxzCYGXKxi8m/1PHX+rsVOwhr7mJNq+VIu2Dhf7U6mjFERK6w==",
+            "dev": true,
+            "requires": {
+                "@types/prop-types": "*",
+                "csstype": "^2.2.0"
+            }
+        },
+        "@types/react-dom": {
+            "version": "16.9.4",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.4.tgz",
+            "integrity": "sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==",
+            "dev": true,
+            "requires": {
+                "@types/react": "*"
+            }
+        },
+        "@types/react-router": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.3.tgz",
+            "integrity": "sha512-0gGhmerBqN8CzlnDmSgGNun3tuZFXerUclWkqEhozdLaJtfcJRUTGkKaEKk+/MpHd1KDS1+o2zb/3PkBUiv2qQ==",
+            "dev": true,
+            "requires": {
+                "@types/history": "*",
+                "@types/react": "*"
+            }
+        },
+        "@types/react-router-dom": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.2.tgz",
+            "integrity": "sha512-kRx8hoBflE4Dp7uus+j/0uMHR5uGTAvQtc4A3vOTWKS+epe0leCuxEx7HNT7XGUd1lH53/moWM51MV2YUyhzAg==",
+            "dev": true,
+            "requires": {
+                "@types/history": "*",
+                "@types/react": "*",
+                "@types/react-router": "*"
+            }
+        },
         "@webassemblyjs/ast": {
             "version": "1.8.5",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -2283,6 +2344,15 @@
             "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
             "dev": true
         },
+        "argparse": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+            "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+            "dev": true,
+            "requires": {
+                "sprintf-js": "~1.0.2"
+            }
+        },
         "arr-diff": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -2784,6 +2854,12 @@
             "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
             "dev": true
         },
+        "builtin-modules": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+            "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
+            "dev": true
+        },
         "builtin-status-codes": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -3436,6 +3512,12 @@
             "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
             "dev": true
         },
+        "csstype": {
+            "version": "2.6.7",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
+            "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==",
+            "dev": true
+        },
         "cyclist": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -3583,6 +3665,12 @@
             "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
             "dev": true
         },
+        "diff": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz",
+            "integrity": "sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==",
+            "dev": true
+        },
         "diffie-hellman": {
             "version": "5.0.3",
             "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -3861,6 +3949,12 @@
                 "estraverse": "^4.1.1"
             }
         },
+        "esprima": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+            "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+            "dev": true
+        },
         "esrecurse": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
@@ -5830,6 +5924,16 @@
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
             "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
         },
+        "js-yaml": {
+            "version": "3.13.1",
+            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+            "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+            "dev": true,
+            "requires": {
+                "argparse": "^1.0.7",
+                "esprima": "^4.0.0"
+            }
+        },
         "jsesc": {
             "version": "2.5.2",
             "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -6748,6 +6852,12 @@
             "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
             "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
         },
+        "picomatch": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.1.1.tgz",
+            "integrity": "sha512-OYMyqkKzK7blWO/+XZYP6w8hH0LDvkBvdvKukti+7kqYFCiEAk+gI3DWnryapc0Dau05ugGTy0foQ6mqn4AHYA==",
+            "dev": true
+        },
         "pify": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -7930,6 +8040,16 @@
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
             "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
+        "source-map-loader": {
+            "version": "0.2.4",
+            "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-0.2.4.tgz",
+            "integrity": "sha512-OU6UJUty+i2JDpTItnizPrlpOIBLmQbWMuBg9q5bVtnHACqw1tn9nNwqJLbv0/00JjnJb/Ee5g5WS5vrRv7zIQ==",
+            "dev": true,
+            "requires": {
+                "async": "^2.5.0",
+                "loader-utils": "^1.1.0"
+            }
+        },
         "source-map-resolve": {
             "version": "0.5.2",
             "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
@@ -8018,6 +8138,12 @@
                 "extend-shallow": "^3.0.0"
             }
         },
+        "sprintf-js": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+            "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+            "dev": true
+        },
         "ssri": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
@@ -8337,12 +8463,126 @@
             "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
             "dev": true
         },
+        "ts-loader": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-6.2.1.tgz",
+            "integrity": "sha512-Dd9FekWuABGgjE1g0TlQJ+4dFUfYGbYcs52/HQObE0ZmUNjQlmLAS7xXsSzy23AMaMwipsx5sNHvoEpT2CZq1g==",
+            "dev": true,
+            "requires": {
+                "chalk": "^2.3.0",
+                "enhanced-resolve": "^4.0.0",
+                "loader-utils": "^1.0.2",
+                "micromatch": "^4.0.0",
+                "semver": "^6.0.0"
+            },
+            "dependencies": {
+                "braces": {
+                    "version": "3.0.2",
+                    "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+                    "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+                    "dev": true,
+                    "requires": {
+                        "fill-range": "^7.0.1"
+                    }
+                },
+                "fill-range": {
+                    "version": "7.0.1",
+                    "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+                    "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+                    "dev": true,
+                    "requires": {
+                        "to-regex-range": "^5.0.1"
+                    }
+                },
+                "is-number": {
+                    "version": "7.0.0",
+                    "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+                    "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+                    "dev": true
+                },
+                "micromatch": {
+                    "version": "4.0.2",
+                    "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+                    "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+                    "dev": true,
+                    "requires": {
+                        "braces": "^3.0.1",
+                        "picomatch": "^2.0.5"
+                    }
+                },
+                "semver": {
+                    "version": "6.3.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+                    "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+                    "dev": true
+                },
+                "to-regex-range": {
+                    "version": "5.0.1",
+                    "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+                    "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+                    "dev": true,
+                    "requires": {
+                        "is-number": "^7.0.0"
+                    }
+                }
+            }
+        },
         "tslib": {
             "version": "1.10.0",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
             "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
             "dev": true
         },
+        "tslint": {
+            "version": "5.20.1",
+            "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.20.1.tgz",
+            "integrity": "sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==",
+            "dev": true,
+            "requires": {
+                "@babel/code-frame": "^7.0.0",
+                "builtin-modules": "^1.1.1",
+                "chalk": "^2.3.0",
+                "commander": "^2.12.1",
+                "diff": "^4.0.1",
+                "glob": "^7.1.1",
+                "js-yaml": "^3.13.1",
+                "minimatch": "^3.0.4",
+                "mkdirp": "^0.5.1",
+                "resolve": "^1.3.2",
+                "semver": "^5.3.0",
+                "tslib": "^1.8.0",
+                "tsutils": "^2.29.0"
+            }
+        },
+        "tslint-react": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/tslint-react/-/tslint-react-4.1.0.tgz",
+            "integrity": "sha512-Y7CbFn09X7Mpg6rc7t/WPbmjx9xPI8p1RsQyiGCLWgDR6sh3+IBSlT+bEkc0PSZcWwClOkqq2wPsID8Vep6szQ==",
+            "dev": true,
+            "requires": {
+                "tsutils": "^3.9.1"
+            },
+            "dependencies": {
+                "tsutils": {
+                    "version": "3.17.1",
+                    "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
+                    "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
+                    "dev": true,
+                    "requires": {
+                        "tslib": "^1.8.1"
+                    }
+                }
+            }
+        },
+        "tsutils": {
+            "version": "2.29.0",
+            "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+            "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+            "dev": true,
+            "requires": {
+                "tslib": "^1.8.1"
+            }
+        },
         "tty-browserify": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -8363,6 +8603,12 @@
             "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
             "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
         },
+        "typescript": {
+            "version": "3.7.2",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.2.tgz",
+            "integrity": "sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==",
+            "dev": true
+        },
         "uglify-js": {
             "version": "3.4.10",
             "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
diff --git a/package.json b/package.json
index 94ff105..87adb44 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
         "build": "npm run copy && webpack --mode production && npm run export",
         "export": "react-snap",
         "deploy": "npm run build && netlify deploy --dir=dist --prod",
-        "analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p"
+        "analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p",
+        "lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'"
     },
     "dependencies": {
         "@loadable/component": "^5.10.3",
@@ -22,10 +23,19 @@
         "@babel/preset-env": "^7.7.4",
         "@babel/preset-react": "^7.7.4",
         "@loadable/babel-plugin": "^5.10.3",
+        "@types/loadable__component": "^5.10.0",
+        "@types/react": "^16.9.13",
+        "@types/react-dom": "^16.9.4",
+        "@types/react-router-dom": "^5.1.2",
         "babel-loader": "^8.0.6",
         "css-loader": "^3.2.0",
         "html-webpack-plugin": "^3.2.0",
+        "source-map-loader": "^0.2.4",
         "style-loader": "^1.0.0",
+        "ts-loader": "^6.2.1",
+        "tslint": "^5.20.1",
+        "tslint-react": "^4.1.0",
+        "typescript": "^3.7.2",
         "webpack": "^4.41.2",
         "webpack-bundle-analyzer": "^3.6.0",
         "webpack-cli": "^3.3.10",
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..495fd53
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "esModuleInterop": true,
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "target": "esnext",
+        "jsx": "react"
+    }
+}
diff --git a/tslint.json b/tslint.json
new file mode 100644
index 0000000..2b35daa
--- /dev/null
+++ b/tslint.json
@@ -0,0 +1,11 @@
+{
+    "defaultSeverity": "error",
+    "extends": ["tslint:latest", "tslint-react"],
+    "jsRules": {},
+    "rules": {
+        "interface-name": false,
+        "jsx-no-multiline-js": false,
+        "quotemark": ["single"]
+    },
+    "rulesDirectory": []
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 32f6c19..ebf3654 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,7 +14,7 @@ if (process.env.NODE_ENV === "analyse") {
 }
 
 module.exports = {
-    entry: './client/index.jsx',
+    entry: './client/index.tsx',
     output: {
         path: path.join(__dirname, 'dist'),
         filename: '[name].[contenthash].js',
@@ -26,19 +26,26 @@ module.exports = {
     },
     module: {
         rules: [
-            {
-                test: /\.jsx?$/,
-                exclude: /node_modules/,
-                loader: 'babel-loader',
-            },
             {
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader'],
             },
+            {
+                test: /\.ts(x?)$/,
+                exclude: /node_modules/,
+                // The order of loaders are very important
+                // It will make the @loadable/component work
+                use: ['babel-loader', 'ts-loader'],
+            },
+            {
+                enforce: "pre",
+                test: /\.js$/,
+                loader: 'source-map-loader',
+            },
         ],
     },
     resolve: {
-        extensions: ['.js', '.jsx'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
     },
     devtool: 'cheap-module-eavl-source-map',
     devServer: {