diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
index b84ef7c..b4da205 100644
--- a/client/components/CoverCard.tsx
+++ b/client/components/CoverCard.tsx
@@ -4,7 +4,11 @@ import { Link } from 'react-router-dom';
 import CoverLoader from '../loaders/CoverLoader';
 import slug from '../helpers/slug';
 
-const CoverCard = ({ pattern }) => {
+interface CoverCardProps {
+    pattern: string;
+}
+
+const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
     return (
         <div className="pa1 w-20">
             <Link
diff --git a/client/loaders/CoverLoader.tsx b/client/loaders/CoverLoader.tsx
index 8bd2e43..870a71a 100644
--- a/client/loaders/CoverLoader.tsx
+++ b/client/loaders/CoverLoader.tsx
@@ -1,8 +1,12 @@
-import loadable from '@loadable/component';
+import loadable, { LoadableComponent } from '@loadable/component';
+
+interface CoverLoaderProps {
+    pattern: string;
+}
 
 //import slug from './helpers/slug';
-const slug = item => item.toLowerCase().split(' ').join('-');
+const slug = (item: string) => item.toLowerCase().split(' ').join('-');
 
-const CoverLoader = loadable(props => import(`../patterns/${slug(props.pattern)}/Cover`));
+const CoverLoader: LoadableComponent<CoverLoaderProps> = loadable(props => import(`../patterns/${slug(props.pattern)}/Cover`));
 
 export default CoverLoader;
diff --git a/client/placeholders/Block.tsx b/client/placeholders/Block.tsx
index 7cdb6ba..71c8c78 100644
--- a/client/placeholders/Block.tsx
+++ 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.tsx b/client/placeholders/BrowserFrame.tsx
index f50176b..dee1b8d 100644
--- a/client/placeholders/BrowserFrame.tsx
+++ b/client/placeholders/BrowserFrame.tsx
@@ -1,8 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, ReactNode } from 'react';
 
 import SampleCode from '../components/SampleCode';
 
-const BrowserFrame = ({ content, source }) => {
+interface BrowserFrameProps {
+    content: ReactNode;
+    source: string;
+}
+
+const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
     const [isContentActive, setContentActive] = useState(true);
     const flip = () => setContentActive(isActive => !isActive);
 
diff --git a/client/placeholders/Circle.tsx b/client/placeholders/Circle.tsx
index df64689..f09127f 100644
--- a/client/placeholders/Circle.tsx
+++ 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.tsx b/client/placeholders/Frame.tsx
index 458f569..1437ddc 100644
--- a/client/placeholders/Frame.tsx
+++ 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.tsx b/client/placeholders/Line.tsx
index 7d41c57..83a866f 100644
--- a/client/placeholders/Line.tsx
+++ 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.tsx b/client/placeholders/Rectangle.tsx
index b1129d8..b76cc3d 100644
--- a/client/placeholders/Rectangle.tsx
+++ 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.tsx b/client/placeholders/Square.tsx
index d9fb6bc..8caf674 100644
--- a/client/placeholders/Square.tsx
+++ 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.tsx b/client/placeholders/Triangle.tsx
index 1cb1d09..2d71136 100644
--- a/client/placeholders/Triangle.tsx
+++ 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.tsx b/client/placeholders/VerticalLine.tsx
index e098ed8..0c3e857 100644
--- a/client/placeholders/VerticalLine.tsx
+++ 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"